Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

A couple docs updates, new blog post

Browse Source
This commit is contained in:
Paul O’Shannessy
2013-07-11 15:59:51 -07:00
parent 688c56d79c
commit 3ce6c88952
13 changed files with 263 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
blog/2013/06/02/jsfiddle-integration.html
+2
View File
@@ -57,6 +57,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html">New in React v0.4: Prop Validation and Default Values</a></li>
<li><a href="/react/blog/2013/07/03/community-roundup-4.html">Community Round-up #4</a></li>
<li><a href="/react/blog/2013/07/02/react-v0-4-autobind-by-default.html">New in React v0.4: Autobind by Default</a></li>
blog/2013/06/05/why-react.html
+2
View File
@@ -57,6 +57,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html">New in React v0.4: Prop Validation and Default Values</a></li>
<li><a href="/react/blog/2013/07/03/community-roundup-4.html">Community Round-up #4</a></li>
<li><a href="/react/blog/2013/07/02/react-v0-4-autobind-by-default.html">New in React v0.4: Autobind by Default</a></li>
blog/2013/06/12/community-roundup.html
+2
View File
@@ -57,6 +57,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html">New in React v0.4: Prop Validation and Default Values</a></li>
<li><a href="/react/blog/2013/07/03/community-roundup-4.html">Community Round-up #4</a></li>
<li><a href="/react/blog/2013/07/02/react-v0-4-autobind-by-default.html">New in React v0.4: Autobind by Default</a></li>
blog/2013/06/19/community-roundup-2.html
+2
View File
@@ -57,6 +57,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html">New in React v0.4: Prop Validation and Default Values</a></li>
<li><a href="/react/blog/2013/07/03/community-roundup-4.html">Community Round-up #4</a></li>
<li><a href="/react/blog/2013/07/02/react-v0-4-autobind-by-default.html">New in React v0.4: Autobind by Default</a></li>
blog/2013/06/21/react-v0-3-3.html
+2
View File
@@ -57,6 +57,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html">New in React v0.4: Prop Validation and Default Values</a></li>
<li><a href="/react/blog/2013/07/03/community-roundup-4.html">Community Round-up #4</a></li>
<li><a href="/react/blog/2013/07/02/react-v0-4-autobind-by-default.html">New in React v0.4: Autobind by Default</a></li>
blog/2013/06/27/community-roundup-3.html
+2
View File
@@ -57,6 +57,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html">New in React v0.4: Prop Validation and Default Values</a></li>
<li><a href="/react/blog/2013/07/03/community-roundup-4.html">Community Round-up #4</a></li>
<li><a href="/react/blog/2013/07/02/react-v0-4-autobind-by-default.html">New in React v0.4: Autobind by Default</a></li>
blog/2013/07/02/react-v0-4-autobind-by-default.html
+2
View File
@@ -57,6 +57,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html">New in React v0.4: Prop Validation and Default Values</a></li>
<li><a href="/react/blog/2013/07/03/community-roundup-4.html">Community Round-up #4</a></li>
<li><a href="/react/blog/2013/07/02/react-v0-4-autobind-by-default.html" class="active">New in React v0.4: Autobind by Default</a></li>
blog/2013/07/03/community-roundup-4.html
+2
View File
@@ -57,6 +57,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html">New in React v0.4: Prop Validation and Default Values</a></li>
<li><a href="/react/blog/2013/07/03/community-roundup-4.html" class="active">Community Round-up #4</a></li>
<li><a href="/react/blog/2013/07/02/react-v0-4-autobind-by-default.html">New in React v0.4: Autobind by Default</a></li>
blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html
+169
View File
@@ -0,0 +1,169 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>React | New in React v0.4: Prop Validation and Default Values</title>
<meta name="viewport" content="width=device-width">
<meta property="og:title" content="React | New in React v0.4: Prop Validation and Default Values" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://facebook.github.io/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html" />
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" />
<meta property="og:description" content="A JavaScript library for building user interfaces" />
<link rel="shortcut icon" href="/react/favicon.ico">
<link rel="alternate" type="application/rss+xml" title="React" href="http://facebook.github.io/react/feed.xml">
<link rel="stylesheet" href="/react/css/react.css">
<link rel="stylesheet" href="/react/css/syntax.css">
<link rel="stylesheet" href="/react/css/codemirror.css">
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script type="text/javascript" src="/react/js/codemirror.js"></script>
<script type="text/javascript" src="/react/js/javascript.js"></script>
<script type="text/javascript" src="/react/js/react.min.js"></script>
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
<script type="text/javascript" src="/react/js/live_editor.js"></script>
<script type="text/javascript" src="/react/js/showdown.js"></script>
</head>
<body>
<div class="container">
<div class="nav-main">
<div class="wrap">
<a class="nav-home" href="/react/index.html">
<img class="nav-logo" alt="" src="/react/img/logo_small.png" width="38" height="38">
React
</a>
<ul class="nav-site">
<li><a href="/react/docs/getting-started.html">docs</a></li>
<li><a href="/react/support.html">support</a></li>
<li><a href="/react/downloads.html">download</a></li>
<li><a href="/react/blog/" class="active">blog</a></li>
<li><a href="http://github.com/facebook/react">github</a>
</ul>
<!-- <iframe src="http://ghbtns.com/github&#45;btn.html?user=facebook&#38;repo=react.js&#38;type=fork"allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe> -->
</div>
</div>
<section class="content wrap blogContent">
<div class="nav-docs">
<div class="nav-docs-section">
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html" class="active">New in React v0.4: Prop Validation and Default Values</a></li>
<li><a href="/react/blog/2013/07/03/community-roundup-4.html">Community Round-up #4</a></li>
<li><a href="/react/blog/2013/07/02/react-v0-4-autobind-by-default.html">New in React v0.4: Autobind by Default</a></li>
<li><a href="/react/blog/2013/06/27/community-roundup-3.html">Community Round-up #3</a></li>
<li><a href="/react/blog/2013/06/21/react-v0-3-3.html">React v0.3.3</a></li>
<li><a href="/react/blog/2013/06/19/community-roundup-2.html">Community Round-up #2</a></li>
<li><a href="/react/blog/2013/06/12/community-roundup.html">Community Round-up #1</a></li>
<li><a href="/react/blog/2013/06/05/why-react.html">Why did we build React?</a></li>
<li><a href="/react/blog/2013/06/02/jsfiddle-integration.html">JSFiddle Integration</a></li>
</ul>
</div>
</div>
<div class="inner-content">
<h1>New in React v0.4: Prop Validation and Default Values</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>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>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>
</div>
<div class="fb-like" data-send="true" data-width="650" data-show-faces="false"></div>
<div class="fb-comments" data-width="650" data-num-posts="10" data-href="http://facebook.github.io/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html"></div>
</div>
</section>
<footer class="wrap">
<div class="left">A Facebook &amp; Instagram collaboration.</div>
<div class="right">&copy; 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>
blog/index.html
+19
View File
@@ -57,6 +57,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html">New in React v0.4: Prop Validation and Default Values</a></li>
<li><a href="/react/blog/2013/07/03/community-roundup-4.html">Community Round-up #4</a></li>
<li><a href="/react/blog/2013/07/02/react-v0-4-autobind-by-default.html">New in React v0.4: Autobind by Default</a></li>
@@ -79,6 +81,23 @@
<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>
<p>
<a href="/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html">Continue Reading &rarr;</a>
</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>
docs/api.html
+1 -1
View File
@@ -120,7 +120,7 @@
<h4>React.createClass</h4>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">function</span> <span class="nx">createClass</span><span class="p">(</span><span class="nx">object</span> <span class="nx">specification</span><span class="p">)</span>
</code></pre></div>
<p>Creates a component given a specification. A component implements a <code>render</code> method which returns a single child. That child may have an arbitrarily deep child structure. One thing that makes components different than a standard prototypal classes is that you don&#39;t need to call new on them. They are convenience wrappers that construct backing instances (via new) for you.</p>
<p>Creates a component given a specification. A component implements a <code>render</code> method which returns <strong>one single</strong> child. That child may have an arbitrarily deep child structure. One thing that makes components different than a standard prototypal classes is that you don&#39;t need to call new on them. They are convenience wrappers that construct backing instances (via new) for you.</p>
<h4>React.renderComponent</h4>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">ReactComponent</span> <span class="nx">renderComponent</span><span class="p">(</span><span class="nx">ReactComponent</span> <span class="nx">container</span><span class="p">,</span> <span class="nx">DOMElement</span> <span class="nx">mountPoint</span><span class="p">)</span>
docs/syntax.html
+4 -4
View File
@@ -115,7 +115,7 @@ attributes into function calls and objects, respectively.</p>
<span class="c1">// Input (JSX):</span>
<span class="kd">var</span> <span class="nx">app</span> <span class="o">=</span> <span class="o">&lt;</span><span class="nx">Nav</span> <span class="nx">color</span><span class="o">=</span><span class="s2">&quot;blue&quot;</span> <span class="o">/&gt;</span><span class="p">;</span>
<span class="c1">// Output (JS):</span>
<span class="kd">var</span> <span class="nx">app</span> <span class="o">=</span> <span class="nx">Nav</span><span class="p">({</span><span class="nx">color</span><span class="o">:</span><span class="s1">&#39;blue&#39;</span><span class="p">});</span>
<span class="kd">var</span> <span class="nx">app</span> <span class="o">=</span> <span class="nx">Nav</span><span class="p">({</span><span class="nx">color</span><span class="o">:</span><span class="s1">&#39;blue&#39;</span><span class="p">},</span> <span class="kc">null</span><span class="p">);</span>
</code></pre></div>
<p>Notice that in order to use <code>&lt;Nav /&gt;</code>, the <code>Nav</code> variable must be in scope.</p>
@@ -124,7 +124,7 @@ attributes into function calls and objects, respectively.</p>
<span class="c1">// Input (JSX):</span>
<span class="kd">var</span> <span class="nx">app</span> <span class="o">=</span> <span class="o">&lt;</span><span class="nx">Nav</span> <span class="nx">color</span><span class="o">=</span><span class="s2">&quot;blue&quot;</span><span class="o">&gt;&lt;</span><span class="nx">Profile</span><span class="o">&gt;</span><span class="nx">click</span><span class="o">&lt;</span><span class="err">/Profile&gt;&lt;/Nav&gt;;</span>
<span class="c1">// Output (JS):</span>
<span class="kd">var</span> <span class="nx">app</span> <span class="o">=</span> <span class="nx">Nav</span><span class="p">({</span><span class="nx">color</span><span class="o">:</span><span class="s1">&#39;blue&#39;</span><span class="p">},</span> <span class="nx">Profile</span><span class="p">({},</span> <span class="s1">&#39;click&#39;</span><span class="p">));</span>
<span class="kd">var</span> <span class="nx">app</span> <span class="o">=</span> <span class="nx">Nav</span><span class="p">({</span><span class="nx">color</span><span class="o">:</span><span class="s1">&#39;blue&#39;</span><span class="p">},</span> <span class="nx">Profile</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="s1">&#39;click&#39;</span><span class="p">));</span>
</code></pre></div>
<p>Use the <a href="/react/jsx-compiler.html">JSX Compiler</a> to try out JSX and see how it
desugars into native JavaScript.</p>
@@ -186,7 +186,7 @@ will use that field to find DOM components.</p>
<span class="c1">// Input (JSX):</span>
<span class="kd">var</span> <span class="nx">tree</span> <span class="o">=</span> <span class="o">&lt;</span><span class="nx">Nav</span><span class="o">&gt;&lt;</span><span class="nx">span</span> <span class="o">/&gt;&lt;</span><span class="err">/Nav&gt;;</span>
<span class="c1">// Output (JS):</span>
<span class="kd">var</span> <span class="nx">tree</span> <span class="o">=</span> <span class="nx">Nav</span><span class="p">({},</span> <span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">span</span><span class="p">({}));</span>
<span class="kd">var</span> <span class="nx">tree</span> <span class="o">=</span> <span class="nx">Nav</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">span</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="kc">null</span><span class="p">));</span>
</code></pre></div>
<blockquote>
<p>Remember:</p>
@@ -213,7 +213,7 @@ pair of curly braces (<code>{}</code>) instead of quotes (<code>&quot;&quot;</co
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// Input (JSX):</span>
<span class="kd">var</span> <span class="nx">content</span> <span class="o">=</span> <span class="o">&lt;</span><span class="nx">Container</span><span class="o">&gt;</span><span class="p">{</span><span class="nb">window</span><span class="p">.</span><span class="nx">isLoggedIn</span> <span class="o">?</span> <span class="o">&lt;</span><span class="nx">Nav</span> <span class="o">/&gt;</span> <span class="o">:</span> <span class="o">&lt;</span><span class="nx">Login</span> <span class="o">/&gt;</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/Container&gt;;</span>
<span class="c1">// Output (JS):</span>
<span class="kd">var</span> <span class="nx">content</span> <span class="o">=</span> <span class="nx">Container</span><span class="p">({},</span> <span class="nb">window</span><span class="p">.</span><span class="nx">isLoggedIn</span> <span class="o">?</span> <span class="o">&lt;</span><span class="nx">Nav</span> <span class="o">/&gt;</span> <span class="o">:</span> <span class="o">&lt;</span><span class="nx">Login</span> <span class="o">/&gt;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">content</span> <span class="o">=</span> <span class="nx">Container</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="nb">window</span><span class="p">.</span><span class="nx">isLoggedIn</span> <span class="o">?</span> <span class="nx">Nav</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="kc">null</span><span class="p">)</span> <span class="o">:</span> <span class="nx">Login</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="kc">null</span><span class="p">));</span>
</code></pre></div>
<h2>Tooling</h2>
feed.xml
+54
View File
@@ -6,6 +6,60 @@
<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>New in React v0.4: Prop Validation and Default Values</title>
<description>&lt;p&gt;Many of the questions we got following the public launch of React revolved around &lt;code&gt;props&lt;/code&gt;, specifically that people wanted to do validation and to make sure their components had sensible defaults.&lt;/p&gt;
&lt;h2&gt;Validation&lt;/h2&gt;
&lt;p&gt;Oftentimes you want to validate your &lt;code&gt;props&lt;/code&gt; 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 &lt;code&gt;render&lt;/code&gt; or &lt;code&gt;componentWillReceiveProps&lt;/code&gt; functions, but that gets clunky fast.&lt;/p&gt;
&lt;p&gt;React v0.4 will provide a nice easy way for you to use built-in validators, or to even write your own.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;js language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;createClass&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;propTypes&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;// An optional string prop named &amp;quot;description&amp;quot;.&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;description&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;PropTypes&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;string&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;// A required enum prop named &amp;quot;category&amp;quot;.&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;category&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;PropTypes&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;oneOf&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;([&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;#39;News&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;#39;Photos&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]).&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;isRequired&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;// A prop named &amp;quot;dialog&amp;quot; that requires an instance of Dialog.&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;dialog&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;PropTypes&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;instanceOf&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Dialog&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;).&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;isRequired&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;...&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;h2&gt;Default Values&lt;/h2&gt;
&lt;p&gt;One common pattern we&amp;#39;ve seen with our React code is to do something like this:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;js language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;createClass&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;value&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;props&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;value&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;||&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;default value&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;value&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/div&amp;gt;;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Do this for a few &lt;code&gt;props&lt;/code&gt; 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:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;js language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;createClass&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;getDefaultProps&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;value&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;default value&amp;#39;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;};&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;...&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;We will use the cached result of this function before each &lt;code&gt;render&lt;/code&gt;. We also perform all validations before each &lt;code&gt;render&lt;/code&gt; to ensure that you have all of the data you need in the right form before you try to use it.&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;Both of these features are entirely optional. We&amp;#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.&lt;/p&gt;
</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>
<item>
<title>Community Round-up #4</title>
<description>&lt;p&gt;React reconciliation process appears to be very well suited to implement a text editor with a live preview as people at Khan Academy show us.&lt;/p&gt;