Rebuild website

contributing/design-principles.html

@@ -174,7 +174,7 @@
 
 <p>We do, however, provide some global configuration on the build level. For example, we provide separate development and production builds. We may also <a href="https://github.com/facebook/react/issues/6627">add a profiling build</a> in the future, and we are open to considering other build flags.</p>
 <h3><a class="anchor" name="beyond-the-dom"></a>Beyond the DOM <a class="hash-link" href="#beyond-the-dom">#</a></h3>
-<p>We see the value of React in the way it allows us to write components that have less bugs and compose together well. DOM is the original rendering target for React but <a href="http://facebook.github.io/react-native/">React Native</a> is just as important both to Facebook and the community.</p>
+<p>We see the value of React in the way it allows us to write components that have fewer bugs and compose together well. DOM is the original rendering target for React but <a href="http://facebook.github.io/react-native/">React Native</a> is just as important both to Facebook and the community.</p>
 
 <p>Being renderer-agnostic is an important design constraint of React. It adds some overhead in the internal representations. On the other hand, any improvements to the core translate across platforms.</p>
 

contributing/implementation-notes.html

@@ -625,15 +625,15 @@
     <span class="c1">// Unmount the old child and mount a new child</span>
     <span class="nx">prevRenderedComponent</span><span class="p">.</span><span class="nx">unmount</span><span class="p">();</span>
     <span class="kd">var</span> <span class="nx">nextRenderedComponent</span> <span class="o">=</span> <span class="nx">instantiateComponent</span><span class="p">(</span><span class="nx">nextRenderedElement</span><span class="p">);</span>
-    <span class="kd">var</span> <span class="nx">nextNode</span> <span class="o">=</span> <span class="nx">renderedComponent</span><span class="p">.</span><span class="nx">mount</span><span class="p">();</span>
+    <span class="kd">var</span> <span class="nx">nextNode</span> <span class="o">=</span> <span class="nx">nextRenderedComponent</span><span class="p">.</span><span class="nx">mount</span><span class="p">();</span>
 
     <span class="c1">// Replace the reference to the child</span>
-    <span class="k">this</span><span class="p">.</span><span class="nx">renderedComponent</span> <span class="o">=</span> <span class="nx">renderedComponent</span><span class="p">;</span>
+    <span class="k">this</span><span class="p">.</span><span class="nx">renderedComponent</span> <span class="o">=</span> <span class="nx">nextRenderedComponent</span><span class="p">;</span>
 
     <span class="c1">// Replace the old node with the new one</span>
     <span class="c1">// Note: this is renderer-specific code and</span>
     <span class="c1">// ideally should live outside of CompositeComponent:</span>
-    <span class="nx">prevNode</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">.</span><span class="nx">replaceChild</span><span class="p">(</span><span class="nx">prevNode</span><span class="p">,</span> <span class="nx">nextNode</span><span class="p">);</span>
+    <span class="nx">prevNode</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">.</span><span class="nx">replaceChild</span><span class="p">(</span><span class="nx">nextNode</span><span class="p">,</span> <span class="nx">prevNode</span><span class="p">);</span>
   <span class="p">}</span>
 <span class="p">}</span>
 </code></pre></div>

docs/animation.html

@@ -94,20 +94,20 @@
   <span class="p">}</span>
 
   <span class="nx">handleAdd</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="kr">const</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">&#39;Enter some text&#39;</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">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="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">slice</span><span class="p">();</span>
+    <span class="kd">let</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">slice</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">1</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="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="nx">item</span><span class="p">,</span> <span class="nx">i</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">(</span>
+    <span class="kr">const</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="nx">item</span><span class="p">,</span> <span class="nx">i</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">(</span>
       <span class="o">&lt;</span><span class="nx">div</span> <span class="nx">key</span><span class="o">=</span><span class="p">{</span><span class="nx">item</span><span class="p">}</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{()</span> <span class="o">=&gt;</span> <span class="k">this</span><span class="p">.</span><span class="nx">handleRemove</span><span class="p">(</span><span class="nx">i</span><span class="p">)}</span><span class="o">&gt;</span>
         <span class="p">{</span><span class="nx">item</span><span class="p">}</span>
       <span class="o">&lt;</span><span class="err">/div&gt;</span>
@@ -214,7 +214,7 @@
 
 <p>The example below would <strong>not</strong> work, because the <code>ReactCSSTransitionGroup</code> is being mounted along with the new item, instead of the new item being mounted within it. Compare this to the <a href="#getting-started">Getting Started</a> section above to see the difference.</p>
 <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">render</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="nx">item</span><span class="p">,</span> <span class="nx">i</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">(</span>
+  <span class="kr">const</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="nx">item</span><span class="p">,</span> <span class="nx">i</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">(</span>
     <span class="o">&lt;</span><span class="nx">div</span> <span class="nx">key</span><span class="o">=</span><span class="p">{</span><span class="nx">item</span><span class="p">}</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{()</span> <span class="o">=&gt;</span> <span class="k">this</span><span class="p">.</span><span class="nx">handleRemove</span><span class="p">(</span><span class="nx">i</span><span class="p">)}</span><span class="o">&gt;</span>
 <span class="hll">      <span class="o">&lt;</span><span class="nx">ReactCSSTransitionGroup</span> <span class="nx">transitionName</span><span class="o">=</span><span class="s2">&quot;example&quot;</span><span class="o">&gt;</span>
 </span>        <span class="p">{</span><span class="nx">item</span><span class="p">}</span>
@@ -288,7 +288,7 @@
 
 <p>However if you only need to render a single child inside <code>ReactTransitionGroup</code>, you can completely avoid wrapping it in a <code>&lt;span&gt;</code> or any other DOM component. To do this, create a custom component that renders the first child passed to it directly:</p>
 <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">function</span> <span class="nx">FirstChild</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span>
-  <span class="kd">var</span> <span class="nx">childrenArray</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Children</span><span class="p">.</span><span class="nx">toArray</span><span class="p">(</span><span class="nx">props</span><span class="p">.</span><span class="nx">children</span><span class="p">);</span>
+  <span class="kr">const</span> <span class="nx">childrenArray</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Children</span><span class="p">.</span><span class="nx">toArray</span><span class="p">(</span><span class="nx">props</span><span class="p">.</span><span class="nx">children</span><span class="p">);</span>
   <span class="k">return</span> <span class="nx">childrenArray</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">||</span> <span class="kc">null</span><span class="p">;</span>
 <span class="p">}</span>
 </code></pre></div>

docs/components-and-props.html

@@ -178,8 +178,9 @@
     <span class="o">&lt;</span><span class="nx">div</span> <span class="nx">className</span><span class="o">=</span><span class="s2">&quot;Comment&quot;</span><span class="o">&gt;</span>
       <span class="o">&lt;</span><span class="nx">div</span> <span class="nx">className</span><span class="o">=</span><span class="s2">&quot;UserInfo&quot;</span><span class="o">&gt;</span>
         <span class="o">&lt;</span><span class="nx">img</span> <span class="nx">className</span><span class="o">=</span><span class="s2">&quot;Avatar&quot;</span>
-             <span class="nx">src</span><span class="o">=</span><span class="p">{</span><span class="nx">props</span><span class="p">.</span><span class="nx">author</span><span class="p">.</span><span class="nx">avatarUrl</span><span class="p">}</span>
-             <span class="nx">alt</span><span class="o">=</span><span class="p">{</span><span class="nx">props</span><span class="p">.</span><span class="nx">author</span><span class="p">.</span><span class="nx">name</span><span class="p">}</span> <span class="o">/&gt;</span>
+          <span class="nx">src</span><span class="o">=</span><span class="p">{</span><span class="nx">props</span><span class="p">.</span><span class="nx">author</span><span class="p">.</span><span class="nx">avatarUrl</span><span class="p">}</span>
+          <span class="nx">alt</span><span class="o">=</span><span class="p">{</span><span class="nx">props</span><span class="p">.</span><span class="nx">author</span><span class="p">.</span><span class="nx">name</span><span class="p">}</span>
+        <span class="o">/&gt;</span>
         <span class="o">&lt;</span><span class="nx">div</span> <span class="nx">className</span><span class="o">=</span><span class="s2">&quot;UserInfo-name&quot;</span><span class="o">&gt;</span>
           <span class="p">{</span><span class="nx">props</span><span class="p">.</span><span class="nx">author</span><span class="p">.</span><span class="nx">name</span><span class="p">}</span>
         <span class="o">&lt;</span><span class="err">/div&gt;</span>
@@ -204,8 +205,9 @@
 <div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">function</span> <span class="nx">Avatar</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span>
   <span class="k">return</span> <span class="p">(</span>
 <span class="hll">    <span class="o">&lt;</span><span class="nx">img</span> <span class="nx">className</span><span class="o">=</span><span class="s2">&quot;Avatar&quot;</span>
-</span><span class="hll">         <span class="nx">src</span><span class="o">=</span><span class="p">{</span><span class="nx">props</span><span class="p">.</span><span class="nx">user</span><span class="p">.</span><span class="nx">avatarUrl</span><span class="p">}</span>
-</span><span class="hll">         <span class="nx">alt</span><span class="o">=</span><span class="p">{</span><span class="nx">props</span><span class="p">.</span><span class="nx">user</span><span class="p">.</span><span class="nx">name</span><span class="p">}</span> <span class="o">/&gt;</span>
+</span><span class="hll">      <span class="nx">src</span><span class="o">=</span><span class="p">{</span><span class="nx">props</span><span class="p">.</span><span class="nx">user</span><span class="p">.</span><span class="nx">avatarUrl</span><span class="p">}</span>
+</span><span class="hll">      <span class="nx">alt</span><span class="o">=</span><span class="p">{</span><span class="nx">props</span><span class="p">.</span><span class="nx">user</span><span class="p">.</span><span class="nx">name</span><span class="p">}</span>
+</span><span class="hll">    <span class="o">/&gt;</span>
 </span>  <span class="p">);</span>
 <span class="p">}</span>
 </code></pre></div>

docs/create-fragment.html

@@ -87,7 +87,7 @@
 
 <p>That is, if you have a component such as:</p>
 <div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">function</span> <span class="nx">Swapper</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span>
-  <span class="kd">var</span> <span class="nx">children</span><span class="p">;</span>
+  <span class="kd">let</span> <span class="nx">children</span><span class="p">;</span>
   <span class="k">if</span> <span class="p">(</span><span class="nx">props</span><span class="p">.</span><span class="nx">swapped</span><span class="p">)</span> <span class="p">{</span>
     <span class="nx">children</span> <span class="o">=</span> <span class="p">[</span><span class="nx">props</span><span class="p">.</span><span class="nx">rightChildren</span><span class="p">,</span> <span class="nx">props</span><span class="p">.</span><span class="nx">leftChildren</span><span class="p">];</span>
   <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
@@ -101,10 +101,10 @@
 <p>To solve this problem, you can use the <code>createFragment</code> add-on to give keys to the sets of children.</p>
 <h4><a class="anchor" name="arrayltreactnodegt-createfragmentobject-children"></a><code>Array&lt;ReactNode&gt; createFragment(object children)</code> <a class="hash-link" href="#arrayltreactnodegt-createfragmentobject-children">#</a></h4>
 <p>Instead of creating arrays, we write:</p>
-<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">createFragment</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;react-addons-create-fragment&#39;</span><span class="p">);</span>
+<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kr">import</span> <span class="nx">createFragment</span> <span class="nx">from</span> <span class="s1">&#39;react-addons-create-fragment&#39;</span>
 
 <span class="kd">function</span> <span class="nx">Swapper</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span>
-  <span class="kd">var</span> <span class="nx">children</span><span class="p">;</span>
+  <span class="kd">let</span> <span class="nx">children</span><span class="p">;</span>
   <span class="k">if</span> <span class="p">(</span><span class="nx">props</span><span class="p">.</span><span class="nx">swapped</span><span class="p">)</span> <span class="p">{</span>
     <span class="nx">children</span> <span class="o">=</span> <span class="nx">createFragment</span><span class="p">({</span>
       <span class="nx">right</span><span class="o">:</span> <span class="nx">props</span><span class="p">.</span><span class="nx">rightChildren</span><span class="p">,</span>

docs/events.html

@@ -110,7 +110,7 @@ As such, you cannot access the event in an asynchronous way.</p>
 <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">function</span> <span class="nx">onClick</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
   <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">event</span><span class="p">);</span> <span class="c1">// =&gt; nullified object.</span>
   <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">type</span><span class="p">);</span> <span class="c1">// =&gt; &quot;click&quot;</span>
-  <span class="kd">var</span> <span class="nx">eventType</span> <span class="o">=</span> <span class="nx">event</span><span class="p">.</span><span class="nx">type</span><span class="p">;</span> <span class="c1">// =&gt; &quot;click&quot;</span>
+  <span class="kr">const</span> <span class="nx">eventType</span> <span class="o">=</span> <span class="nx">event</span><span class="p">.</span><span class="nx">type</span><span class="p">;</span> <span class="c1">// =&gt; &quot;click&quot;</span>
 
   <span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
     <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">type</span><span class="p">);</span> <span class="c1">// =&gt; null</span>

docs/hello-world.html

@@ -78,7 +78,7 @@
     </h1>
     <div class="subHeader"></div>
 
-    <p>The easiest way to get started with React is to use <a href="http://codepen.io/gaearon/pen/ZpvBNJ?editors=0010">this Hello World example code on CodePen</a>. You don&#39;t need to install anything; you can just open it in another tab and follow along as we go through examples. If you&#39;d rather use a local development environment, check out the <a href="/docs/installation.html">Installation</a> page.</p>
+    <p>The easiest way to get started with React is to use <a href="http://codepen.io/gaearon/pen/ZpvBNJ?editors=0010">this Hello World example code on CodePen</a>. You don&#39;t need to install anything; you can just open it in another tab and follow along as we go through examples. If you&#39;d rather use a local development environment, check out the <a href="/react/docs/installation.html">Installation</a> page.</p>
 
 <p>The smallest React example looks like this:</p>
 <div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span>

docs/jsx-in-depth.html

@@ -111,14 +111,14 @@
 <p>You can also refer to a React component using dot-notation from within JSX. This is convenient if you have a single module that exports many React components. For example, if <code>MyComponents.DatePicker</code> is a component, you can use it directly from JSX with:</p>
 <div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kr">import</span> <span class="nx">React</span> <span class="nx">from</span> <span class="s1">&#39;react&#39;</span><span class="p">;</span>
 
-<span class="kd">var</span> <span class="nx">MyComponents</span> <span class="o">=</span> <span class="p">{</span>
+<span class="kr">const</span> <span class="nx">MyComponents</span> <span class="o">=</span> <span class="p">{</span>
   <span class="nx">DatePicker</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span>
     <span class="k">return</span> <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span><span class="nx">imagine</span> <span class="nx">a</span> <span class="p">{</span><span class="nx">props</span><span class="p">.</span><span class="nx">color</span><span class="p">}</span> <span class="nx">datepicker</span> <span class="nx">here</span><span class="o">&lt;</span><span class="err">/div&gt;;</span>
   <span class="p">}</span>
 <span class="p">}</span>
 
 <span class="kd">function</span> <span class="nx">BlueDatePicker</span><span class="p">()</span> <span class="p">{</span>
-  <span class="k">return</span> <span class="o">&lt;</span><span class="nx">MyComponents</span><span class="p">.</span><span class="nx">DatePicker</span> <span class="nx">color</span><span class="o">=</span><span class="s2">&quot;blue&quot;</span><span class="p">}</span> <span class="o">/&gt;</span><span class="p">;</span>
+  <span class="k">return</span> <span class="o">&lt;</span><span class="nx">MyComponents</span><span class="p">.</span><span class="nx">DatePicker</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="p">}</span>
 </code></pre></div>
 <p>When an element type starts with a lowercase letter, it refers to a built-in component like <code>&lt;div&gt;</code> or <code>&lt;span&gt;</code> and results in a string <code>&#39;div&#39;</code> or <code>&#39;span&#39;</code> passed to <code>React.createElement</code>. Types that start with a capital letter like <code>&lt;Foo /&gt;</code> compile to <code>React.createElement(Foo)</code> and correspond to a component defined or imported in your JavaScript file.</p>
@@ -153,7 +153,7 @@
 <span class="p">}</span>
 
 <span class="kd">function</span> <span class="nx">render2</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span>
-  <span class="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">components</span><span class="p">[</span><span class="nx">props</span><span class="p">.</span><span class="nx">story</span><span class="p">];</span>
+  <span class="kr">const</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">components</span><span class="p">[</span><span class="nx">props</span><span class="p">.</span><span class="nx">story</span><span class="p">];</span>
 
   <span class="c1">// Valid JSX</span>
   <span class="k">return</span> <span class="o">&lt;</span><span class="nx">MyComponent</span> <span class="o">/&gt;</span><span class="p">;</span>
@@ -168,7 +168,7 @@
 
 <p><code>if</code> statements and <code>for</code> loops are not expressions in JavaScript, so they can&#39;t be used in JSX directly. Instead, you can put these in the surrounding code. For example:</p>
 <div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">function</span> <span class="nx">NumberDescriber</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span>
-  <span class="kd">var</span> <span class="nx">description</span><span class="p">;</span>
+  <span class="kd">let</span> <span class="nx">description</span><span class="p">;</span>
   <span class="k">if</span> <span class="p">(</span><span class="nx">props</span><span class="p">.</span><span class="nx">number</span> <span class="o">%</span> <span class="mi">2</span> <span class="o">==</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
     <span class="nx">description</span> <span class="o">=</span> <span class="o">&lt;</span><span class="nx">strong</span><span class="o">&gt;</span><span class="nx">even</span><span class="o">&lt;</span><span class="err">/strong&gt;;</span>
   <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
@@ -198,7 +198,7 @@
 <h3><a class="anchor" name="spread-attributes"></a>Spread Attributes <a class="hash-link" href="#spread-attributes">#</a></h3>
 <p>If you already have <code>props</code> as an object, and you want to pass it in JSX, you can use <code>...</code> as a &quot;spread&quot; operator to pass the whole props object. These two render functions are equivalent:</p>
 <div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">function</span> <span class="nx">render1</span><span class="p">()</span> <span class="p">{</span>
-  <span class="kd">var</span> <span class="nx">props</span> <span class="o">=</span> <span class="p">{</span><span class="nx">left</span><span class="o">:</span> <span class="s1">&#39;ben&#39;</span><span class="p">,</span> <span class="nx">right</span><span class="o">:</span> <span class="s1">&#39;hector&#39;</span><span class="p">};</span>
+  <span class="kr">const</span> <span class="nx">props</span> <span class="o">=</span> <span class="p">{</span><span class="nx">left</span><span class="o">:</span> <span class="s1">&#39;ben&#39;</span><span class="p">,</span> <span class="nx">right</span><span class="o">:</span> <span class="s1">&#39;hector&#39;</span><span class="p">};</span>
   <span class="k">return</span> <span class="o">&lt;</span><span class="nx">MyComponent</span> <span class="p">{...</span><span class="nx">props</span><span class="p">}</span> <span class="o">/&gt;</span><span class="p">;</span>
 <span class="p">}</span>
 
@@ -261,7 +261,7 @@
 <span class="p">}</span>
 
 <span class="kd">function</span> <span class="nx">renderTodoList</span><span class="p">()</span> <span class="p">{</span>
-  <span class="kd">var</span> <span class="nx">todos</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;finish doc&#39;</span><span class="p">,</span> <span class="s1">&#39;submit pr&#39;</span><span class="p">,</span> <span class="s1">&#39;nag dan to review&#39;</span><span class="p">];</span>
+  <span class="kr">const</span> <span class="nx">todos</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;finish doc&#39;</span><span class="p">,</span> <span class="s1">&#39;submit pr&#39;</span><span class="p">,</span> <span class="s1">&#39;nag dan to review&#39;</span><span class="p">];</span>
   <span class="k">return</span> <span class="p">(</span>
     <span class="o">&lt;</span><span class="nx">ul</span><span class="o">&gt;</span>
       <span class="p">{</span><span class="nx">todos</span><span class="p">.</span><span class="nx">map</span><span class="p">((</span><span class="nx">message</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="o">&lt;</span><span class="nx">Item</span> <span class="nx">key</span><span class="o">=</span><span class="p">{</span><span class="nx">message</span><span class="p">}</span> <span class="nx">message</span><span class="o">=</span><span class="p">{</span><span class="nx">message</span><span class="p">}</span> <span class="o">/&gt;</span><span class="p">)}</span>
@@ -285,8 +285,8 @@
 
 <span class="c1">// Calls the children callback numTimes to produce a repeated component</span>
 <span class="kd">function</span> <span class="nx">Repeat</span><span class="p">(</span><span class="nx">props</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="p">[];</span>
-  <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">numTimes</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
+  <span class="kd">let</span> <span class="nx">items</span> <span class="o">=</span> <span class="p">[];</span>
+  <span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">numTimes</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
     <span class="nx">items</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">props</span><span class="p">.</span><span class="nx">children</span><span class="p">(</span><span class="nx">i</span><span class="p">));</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">items</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/div&gt;</span>

docs/lists-and-keys.html

@@ -103,7 +103,7 @@
 </span>  <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;root&#39;</span><span class="p">)</span>
 <span class="p">);</span>
 </code></pre></div>
-<p><a href="https://codepen.io/gaearon/pen/GjPyQr?editors=0011">Try it out on Codepen.</a></p>
+<p><a href="https://codepen.io/gaearon/pen/GjPyQr?editors=0011">Try it out on CodePen.</a></p>
 
 <p>This code displays a bullet list of numbers between 1 and 5.</p>
 <h3><a class="anchor" name="basic-list-component"></a>Basic List Component <a class="hash-link" href="#basic-list-component">#</a></h3>
@@ -147,7 +147,7 @@
   <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;root&#39;</span><span class="p">)</span>
 <span class="p">);</span>
 </code></pre></div>
-<p><a href="https://codepen.io/gaearon/pen/jrXYRR?editors=0011">Try it out on Codepen.</a></p>
+<p><a href="https://codepen.io/gaearon/pen/jrXYRR?editors=0011">Try it out on CodePen.</a></p>
 <h2><a class="anchor" name="keys"></a>Keys <a class="hash-link" href="#keys">#</a></h2>
 <p>Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity:</p>
 <div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kr">const</span> <span class="nx">numbers</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">];</span>
@@ -176,10 +176,10 @@
 <h3><a class="anchor" name="extracting-components-with-keys"></a>Extracting Components with Keys <a class="hash-link" href="#extracting-components-with-keys">#</a></h3>
 <p>Keys only make sense in the context of the surrounding array.</p>
 
-<p>For example, if you <a href="/react/docs/components-and-props.html#extracting-components">extract</a> a <code>Number</code> component, you should keep the key on the <code>&lt;Number /&gt;</code> elements in the array rather than on the root <code>&lt;li&gt;</code> element in the <code>Number</code> itself.</p>
+<p>For example, if you <a href="/react/docs/components-and-props.html#extracting-components">extract</a> a <code>ListItem</code> component, you should keep the key on the <code>&lt;ListItem /&gt;</code> elements in the array rather than on the root <code>&lt;li&gt;</code> element in the <code>ListItem</code> itself.</p>
 
 <p><strong>Example: Incorrect Key Usage</strong></p>
-<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">function</span> <span class="nb">Number</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span>
+<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">function</span> <span class="nx">ListItem</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span>
   <span class="kr">const</span> <span class="nx">value</span> <span class="o">=</span> <span class="nx">props</span><span class="p">.</span><span class="nx">value</span><span class="p">;</span>
   <span class="k">return</span> <span class="p">(</span>
 <span class="hll">    <span class="c1">// Wrong! There is no need to specify the key here:</span>
@@ -193,7 +193,7 @@
   <span class="kr">const</span> <span class="nx">numbers</span> <span class="o">=</span> <span class="nx">props</span><span class="p">.</span><span class="nx">numbers</span><span class="p">;</span>
   <span class="kr">const</span> <span class="nx">listItems</span> <span class="o">=</span> <span class="nx">numbers</span><span class="p">.</span><span class="nx">map</span><span class="p">((</span><span class="nx">item</span><span class="p">)</span> <span class="o">=&gt;</span>
 <span class="hll">    <span class="c1">// Wrong! The key should have been specified here:</span>
-</span><span class="hll">    <span class="o">&lt;</span><span class="nb">Number</span> <span class="nx">value</span><span class="o">=</span><span class="p">{</span><span class="nx">number</span><span class="p">}</span> <span class="o">/&gt;</span>
+</span><span class="hll">    <span class="o">&lt;</span><span class="nx">ListItem</span> <span class="nx">value</span><span class="o">=</span><span class="p">{</span><span class="nx">number</span><span class="p">}</span> <span class="o">/&gt;</span>
 </span>  <span class="p">);</span>
   <span class="k">return</span> <span class="p">(</span>
     <span class="o">&lt;</span><span class="nx">ul</span><span class="o">&gt;</span>
@@ -209,7 +209,7 @@
 <span class="p">);</span>
 </code></pre></div>
 <p><strong>Example: Correct Key Usage</strong></p>
-<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">function</span> <span class="nb">Number</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span>
+<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">function</span> <span class="nx">ListItem</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span>
 <span class="hll">  <span class="c1">// Correct! There is no need to specify the key here:</span>
 </span><span class="hll">  <span class="k">return</span> <span class="o">&lt;</span><span class="nx">li</span><span class="o">&gt;</span><span class="p">{</span><span class="nx">props</span><span class="p">.</span><span class="nx">value</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/li&gt;;</span>
 </span><span class="p">}</span>
@@ -218,8 +218,8 @@
   <span class="kr">const</span> <span class="nx">numbers</span> <span class="o">=</span> <span class="nx">props</span><span class="p">.</span><span class="nx">numbers</span><span class="p">;</span>
   <span class="kr">const</span> <span class="nx">listItems</span> <span class="o">=</span> <span class="nx">numbers</span><span class="p">.</span><span class="nx">map</span><span class="p">((</span><span class="nx">number</span><span class="p">)</span> <span class="o">=&gt;</span>
 <span class="hll">    <span class="c1">// Correct! Key should be specified inside the array.</span>
-</span><span class="hll">    <span class="o">&lt;</span><span class="nb">Number</span> <span class="nx">key</span><span class="o">=</span><span class="p">{</span><span class="nx">number</span><span class="p">.</span><span class="nx">toString</span><span class="p">()}</span>
-</span>            <span class="nx">value</span><span class="o">=</span><span class="p">{</span><span class="nx">number</span><span class="p">}</span> <span class="o">/&gt;</span>
+</span><span class="hll">    <span class="o">&lt;</span><span class="nx">ListItem</span> <span class="nx">key</span><span class="o">=</span><span class="p">{</span><span class="nx">number</span><span class="p">.</span><span class="nx">toString</span><span class="p">()}</span>
+</span>              <span class="nx">value</span><span class="o">=</span><span class="p">{</span><span class="nx">number</span><span class="p">}</span> <span class="o">/&gt;</span>
   <span class="p">);</span>
   <span class="k">return</span> <span class="p">(</span>
     <span class="o">&lt;</span><span class="nx">ul</span><span class="o">&gt;</span>
@@ -234,7 +234,7 @@
   <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;root&#39;</span><span class="p">)</span>
 <span class="p">);</span>
 </code></pre></div>
-<p><a href="https://codepen.io/gaearon/pen/ozJEPy?editors=0010">Try it out on Codepen.</a></p>
+<p><a href="https://codepen.io/rthor/pen/QKzJKG?editors=0010">Try it out on CodePen.</a></p>
 
 <p>A good rule of thumb is that elements inside the <code>map()</code> call need keys.</p>
 <h3><a class="anchor" name="keys-must-only-be-unique-among-siblings"></a>Keys Must Only Be Unique Among Siblings <a class="hash-link" href="#keys-must-only-be-unique-among-siblings">#</a></h3>
@@ -289,8 +289,8 @@
 <div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">function</span> <span class="nx">NumberList</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span>
   <span class="kr">const</span> <span class="nx">numbers</span> <span class="o">=</span> <span class="nx">props</span><span class="p">.</span><span class="nx">numbers</span><span class="p">;</span>
 <span class="hll">  <span class="kr">const</span> <span class="nx">listItems</span> <span class="o">=</span> <span class="nx">numbers</span><span class="p">.</span><span class="nx">map</span><span class="p">((</span><span class="nx">number</span><span class="p">)</span> <span class="o">=&gt;</span>
-</span><span class="hll">    <span class="o">&lt;</span><span class="nb">Number</span> <span class="nx">key</span><span class="o">=</span><span class="p">{</span><span class="nx">number</span><span class="p">.</span><span class="nx">toString</span><span class="p">()}</span>
-</span><span class="hll">            <span class="nx">value</span><span class="o">=</span><span class="p">{</span><span class="nx">number</span><span class="p">}</span> <span class="o">/&gt;</span>
+</span><span class="hll">    <span class="o">&lt;</span><span class="nx">ListItem</span> <span class="nx">key</span><span class="o">=</span><span class="p">{</span><span class="nx">number</span><span class="p">.</span><span class="nx">toString</span><span class="p">()}</span>
+</span><span class="hll">              <span class="nx">value</span><span class="o">=</span><span class="p">{</span><span class="nx">number</span><span class="p">}</span> <span class="o">/&gt;</span>
 </span><span class="hll">  <span class="p">);</span>
 </span>  <span class="k">return</span> <span class="p">(</span>
     <span class="o">&lt;</span><span class="nx">ul</span><span class="o">&gt;</span>
@@ -305,8 +305,8 @@
   <span class="k">return</span> <span class="p">(</span>
     <span class="o">&lt;</span><span class="nx">ul</span><span class="o">&gt;</span>
 <span class="hll">      <span class="p">{</span><span class="nx">numbers</span><span class="p">.</span><span class="nx">map</span><span class="p">((</span><span class="nx">number</span><span class="p">)</span> <span class="o">=&gt;</span>
-</span><span class="hll">        <span class="o">&lt;</span><span class="nb">Number</span> <span class="nx">key</span><span class="o">=</span><span class="p">{</span><span class="nx">number</span><span class="p">.</span><span class="nx">toString</span><span class="p">()}</span>
-</span><span class="hll">                <span class="nx">value</span><span class="o">=</span><span class="p">{</span><span class="nx">number</span><span class="p">}</span> <span class="o">/&gt;</span>
+</span><span class="hll">        <span class="o">&lt;</span><span class="nx">ListItem</span> <span class="nx">key</span><span class="o">=</span><span class="p">{</span><span class="nx">number</span><span class="p">.</span><span class="nx">toString</span><span class="p">()}</span>
+</span><span class="hll">                  <span class="nx">value</span><span class="o">=</span><span class="p">{</span><span class="nx">number</span><span class="p">}</span> <span class="o">/&gt;</span>
 </span><span class="hll">      <span class="p">)}</span>
 </span>    <span class="o">&lt;</span><span class="err">/ul&gt;</span>
   <span class="p">);</span>

docs/optimizing-performance.html

@@ -241,15 +241,15 @@
 </ul>
 
 <p>Immutability makes tracking changes cheap. A change will always result in a new object so we only need to check if the reference to the object has changed. For example, in this regular JavaScript code:</p>
-<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">x</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">foo</span><span class="o">:</span> <span class="s2">&quot;bar&quot;</span> <span class="p">};</span>
-<span class="kd">var</span> <span class="nx">y</span> <span class="o">=</span> <span class="nx">x</span><span class="p">;</span>
+<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">const</span> <span class="nx">x</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">foo</span><span class="o">:</span> <span class="s2">&quot;bar&quot;</span> <span class="p">};</span>
+<span class="kr">const</span> <span class="nx">y</span> <span class="o">=</span> <span class="nx">x</span><span class="p">;</span>
 <span class="nx">y</span><span class="p">.</span><span class="nx">foo</span> <span class="o">=</span> <span class="s2">&quot;baz&quot;</span><span class="p">;</span>
 <span class="nx">x</span> <span class="o">===</span> <span class="nx">y</span><span class="p">;</span> <span class="c1">// true</span>
 </code></pre></div>
 <p>Although <code>y</code> was edited, since it&#39;s a reference to the same object as <code>x</code>, this comparison returns <code>true</code>. You can write similar code with immutable.js:</p>
-<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">SomeRecord</span> <span class="o">=</span> <span class="nx">Immutable</span><span class="p">.</span><span class="nx">Record</span><span class="p">({</span> <span class="nx">foo</span><span class="o">:</span> <span class="kc">null</span> <span class="p">});</span>
-<span class="kd">var</span> <span class="nx">x</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SomeRecord</span><span class="p">({</span> <span class="nx">foo</span><span class="o">:</span> <span class="s1">&#39;bar&#39;</span>  <span class="p">});</span>
-<span class="kd">var</span> <span class="nx">y</span> <span class="o">=</span> <span class="nx">x</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="s1">&#39;foo&#39;</span><span class="p">,</span> <span class="s1">&#39;baz&#39;</span><span class="p">);</span>
+<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">const</span> <span class="nx">SomeRecord</span> <span class="o">=</span> <span class="nx">Immutable</span><span class="p">.</span><span class="nx">Record</span><span class="p">({</span> <span class="nx">foo</span><span class="o">:</span> <span class="kc">null</span> <span class="p">});</span>
+<span class="kr">const</span> <span class="nx">x</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SomeRecord</span><span class="p">({</span> <span class="nx">foo</span><span class="o">:</span> <span class="s1">&#39;bar&#39;</span>  <span class="p">});</span>
+<span class="kr">const</span> <span class="nx">y</span> <span class="o">=</span> <span class="nx">x</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="s1">&#39;foo&#39;</span><span class="p">,</span> <span class="s1">&#39;baz&#39;</span><span class="p">);</span>
 <span class="nx">x</span> <span class="o">===</span> <span class="nx">y</span><span class="p">;</span> <span class="c1">// false</span>
 </code></pre></div>
 <p>In this case, since a new reference is returned when mutating <code>x</code>, we can safely assume that <code>x</code> has changed.</p>

docs/react-component.html

@@ -127,7 +127,7 @@
 <h3><a class="anchor" name="class-properties"></a>Class Properties <a class="hash-link" href="#class-properties">#</a></h3>
 <ul>
 <li><a href="#defaultprops"><code>defaultProps</code></a></li>
-<li><a href="#displayName"><code>displayName</code></a></li>
+<li><a href="#displayname"><code>displayName</code></a></li>
 <li><a href="#proptypes"><code>propTypes</code></a></li>
 </ul>
 <h3><a class="anchor" name="instance-properties"></a>Instance Properties <a class="hash-link" href="#instance-properties">#</a></h3>

docs/react-without-jsx.html

@@ -101,18 +101,22 @@
   <span class="p">}</span>
 <span class="p">}</span>
 
-<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="nx">React</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="nx">Hello</span><span class="p">,</span> <span class="p">{</span><span class="nx">toWhat</span><span class="o">:</span> <span class="s1">&#39;World&#39;</span><span class="p">},</span> <span class="kc">null</span><span class="p">),</span>
-                <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;root&#39;</span><span class="p">));</span>
+<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span>
+  <span class="nx">React</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="nx">Hello</span><span class="p">,</span> <span class="p">{</span><span class="nx">toWhat</span><span class="o">:</span> <span class="s1">&#39;World&#39;</span><span class="p">},</span> <span class="kc">null</span><span class="p">),</span>
+  <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;root&#39;</span><span class="p">)</span>
+<span class="p">);</span>
 </code></pre></div>
 <p>If you&#39;re curious to see more examples of how JSX is converted to JavaScript, you can try out <a href="https://babeljs.io/repl/#?babili=false&amp;evaluate=true&amp;lineWrap=false&amp;presets=es2015%2Creact%2Cstage-0&amp;code=function%20hello()%20%7B%0A%20%20return%20%3Cdiv%3EHello%20world!%3C%2Fdiv%3E%3B%0A%7D">the online Babel compiler</a>.</p>
 
 <p>The component can either be provided as a string, or as a subclass of <code>React.Component</code>, or a plain function for stateless components.</p>
 
 <p>If you get tired of typing <code>React.createElement</code> so much, one common pattern is to assign a shorthand:</p>
-<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">e</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createElement</span><span class="p">;</span>
+<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kr">const</span> <span class="nx">e</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createElement</span><span class="p">;</span>
 
-<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="nx">e</span><span class="p">(</span><span class="s1">&#39;div&#39;</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="s1">&#39;Hello World&#39;</span><span class="p">),</span>
-                <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;root&#39;</span><span class="p">));</span>
+<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span>
+  <span class="nx">e</span><span class="p">(</span><span class="s1">&#39;div&#39;</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="s1">&#39;Hello World&#39;</span><span class="p">),</span>
+  <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;root&#39;</span><span class="p">)</span>
+<span class="p">);</span>
 </code></pre></div>
 <p>If you use this shorthand form for <code>React.createElement</code>, it can be almost as convenient to use React without JSX.</p>
 

docs/reconciliation.html

@@ -162,14 +162,14 @@
 <h3><a class="anchor" name="keys"></a>Keys <a class="hash-link" href="#keys">#</a></h3>
 <p>In order to solve this issue, React supports a <code>key</code> attribute. When children have keys, React uses the key to match children in the original tree with children in the subsequent tree. For example, adding a <code>key</code> to our inefficient example above can make the tree conversion efficient:</p>
 <div class="highlight"><pre><code class="language-xml" data-lang="xml"><span class="nt">&lt;ul&gt;</span>
-  <span class="nt">&lt;li</span> <span class="na">key=</span><span class="s">&quot;2015&quot;</span><span class="err">}</span><span class="nt">&gt;</span>Duke<span class="nt">&lt;/li&gt;</span>
-  <span class="nt">&lt;li</span> <span class="na">key=</span><span class="s">&quot;2016&quot;</span><span class="err">}</span><span class="nt">&gt;</span>Villanova<span class="nt">&lt;/li&gt;</span>
+  <span class="nt">&lt;li</span> <span class="na">key=</span><span class="s">&quot;2015&quot;</span><span class="nt">&gt;</span>Duke<span class="nt">&lt;/li&gt;</span>
+  <span class="nt">&lt;li</span> <span class="na">key=</span><span class="s">&quot;2016&quot;</span><span class="nt">&gt;</span>Villanova<span class="nt">&lt;/li&gt;</span>
 <span class="nt">&lt;/ul&gt;</span>
 
 <span class="nt">&lt;ul&gt;</span>
-  <span class="nt">&lt;li</span> <span class="na">key=</span><span class="s">&quot;2014&quot;</span><span class="err">}</span><span class="nt">&gt;</span>Connecticut<span class="nt">&lt;/li&gt;</span>
-  <span class="nt">&lt;li</span> <span class="na">key=</span><span class="s">&quot;2015&quot;</span><span class="err">}</span><span class="nt">&gt;</span>Duke<span class="nt">&lt;/li&gt;</span>
-  <span class="nt">&lt;li</span> <span class="na">key=</span><span class="s">&quot;2016&quot;</span><span class="err">}</span><span class="nt">&gt;</span>Villanova<span class="nt">&lt;/li&gt;</span>
+  <span class="nt">&lt;li</span> <span class="na">key=</span><span class="s">&quot;2014&quot;</span><span class="nt">&gt;</span>Connecticut<span class="nt">&lt;/li&gt;</span>
+  <span class="nt">&lt;li</span> <span class="na">key=</span><span class="s">&quot;2015&quot;</span><span class="nt">&gt;</span>Duke<span class="nt">&lt;/li&gt;</span>
+  <span class="nt">&lt;li</span> <span class="na">key=</span><span class="s">&quot;2016&quot;</span><span class="nt">&gt;</span>Villanova<span class="nt">&lt;/li&gt;</span>
 <span class="nt">&lt;/ul&gt;</span>
 </code></pre></div>
 <p>Now React knows that the element with key <code>&#39;2014&#39;</code> is the new one, and the elements with the keys <code>&#39;2015&#39;</code> and <code>&#39;2016&#39;</code> have just moved.</p>

docs/test-utils.html

@@ -130,7 +130,7 @@
 <span class="o">&lt;</span><span class="err">/div&gt;</span>
 </code></pre></div>
 <p>Then you can assert:</p>
-<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">renderer</span> <span class="o">=</span> <span class="nx">ReactTestUtils</span><span class="p">.</span><span class="nx">createRenderer</span><span class="p">();</span>
+<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">const</span> <span class="nx">renderer</span> <span class="o">=</span> <span class="nx">ReactTestUtils</span><span class="p">.</span><span class="nx">createRenderer</span><span class="p">();</span>
 <span class="nx">result</span> <span class="o">=</span> <span class="nx">renderer</span><span class="p">.</span><span class="nx">getRenderOutput</span><span class="p">();</span>
 <span class="nx">expect</span><span class="p">(</span><span class="nx">result</span><span class="p">.</span><span class="nx">type</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;div&#39;</span><span class="p">);</span>
 <span class="nx">expect</span><span class="p">(</span><span class="nx">result</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">children</span><span class="p">).</span><span class="nx">toEqual</span><span class="p">([</span>
@@ -154,12 +154,12 @@
 
 <p><strong>Clicking an element</strong></p>
 <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// &lt;button ref=&quot;button&quot;&gt;...&lt;/button&gt;</span>
-<span class="kd">var</span> <span class="nx">node</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">refs</span><span class="p">.</span><span class="nx">button</span><span class="p">;</span>
+<span class="kr">const</span> <span class="nx">node</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">refs</span><span class="p">.</span><span class="nx">button</span><span class="p">;</span>
 <span class="nx">ReactTestUtils</span><span class="p">.</span><span class="nx">Simulate</span><span class="p">.</span><span class="nx">click</span><span class="p">(</span><span class="nx">node</span><span class="p">);</span>
 </code></pre></div>
 <p><strong>Changing the value of an input field and then pressing ENTER.</strong></p>
 <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// &lt;input ref=&quot;input&quot; /&gt;</span>
-<span class="kd">var</span> <span class="nx">node</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">refs</span><span class="p">.</span><span class="nx">input</span><span class="p">;</span>
+<span class="kr">const</span> <span class="nx">node</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">refs</span><span class="p">.</span><span class="nx">input</span><span class="p">;</span>
 <span class="nx">node</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="s1">&#39;giraffe&#39;</span><span class="p">;</span>
 <span class="nx">ReactTestUtils</span><span class="p">.</span><span class="nx">Simulate</span><span class="p">.</span><span class="nx">change</span><span class="p">(</span><span class="nx">node</span><span class="p">);</span>
 <span class="nx">ReactTestUtils</span><span class="p">.</span><span class="nx">Simulate</span><span class="p">.</span><span class="nx">keyDown</span><span class="p">(</span><span class="nx">node</span><span class="p">,</span> <span class="p">{</span><span class="nx">key</span><span class="o">:</span> <span class="s2">&quot;Enter&quot;</span><span class="p">,</span> <span class="nx">keyCode</span><span class="o">:</span> <span class="mi">13</span><span class="p">,</span> <span class="nx">which</span><span class="o">:</span> <span class="mi">13</span><span class="p">});</span>

docs/typechecking-with-proptypes.html

@@ -177,7 +177,7 @@
 <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">class</span> <span class="nx">MyComponent</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
   <span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
     <span class="c1">// This must be exactly one element or it will warn.</span>
-    <span class="kd">var</span> <span class="nx">children</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">children</span><span class="p">;</span>
+    <span class="kr">const</span> <span class="nx">children</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">children</span><span class="p">;</span>
     <span class="k">return</span> <span class="p">(</span>
       <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span>
         <span class="p">{</span><span class="nx">children</span><span class="p">}</span>

docs/update.html

@@ -98,12 +98,12 @@
 <span class="nx">myData</span><span class="p">.</span><span class="nx">a</span><span class="p">.</span><span class="nx">b</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="mi">9</span><span class="p">);</span>
 </code></pre></div>
 <p>You have no way of determining which data has changed since the previous copy has been overwritten. Instead, you need to create a new copy of <code>myData</code> and change only the parts of it that need to be changed. Then you can compare the old copy of <code>myData</code> with the new one in <code>shouldComponentUpdate()</code> using triple-equals:</p>
-<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">newData</span> <span class="o">=</span> <span class="nx">deepCopy</span><span class="p">(</span><span class="nx">myData</span><span class="p">);</span>
+<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kr">const</span> <span class="nx">newData</span> <span class="o">=</span> <span class="nx">deepCopy</span><span class="p">(</span><span class="nx">myData</span><span class="p">);</span>
 <span class="nx">newData</span><span class="p">.</span><span class="nx">x</span><span class="p">.</span><span class="nx">y</span><span class="p">.</span><span class="nx">z</span> <span class="o">=</span> <span class="mi">7</span><span class="p">;</span>
 <span class="nx">newData</span><span class="p">.</span><span class="nx">a</span><span class="p">.</span><span class="nx">b</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="mi">9</span><span class="p">);</span>
 </code></pre></div>
 <p>Unfortunately, deep copies are expensive, and sometimes impossible. You can alleviate this by only copying objects that need to be changed and by reusing the objects that haven&#39;t changed. Unfortunately, in today&#39;s JavaScript this can be cumbersome:</p>
-<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">newData</span> <span class="o">=</span> <span class="nx">extend</span><span class="p">(</span><span class="nx">myData</span><span class="p">,</span> <span class="p">{</span>
+<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kr">const</span> <span class="nx">newData</span> <span class="o">=</span> <span class="nx">extend</span><span class="p">(</span><span class="nx">myData</span><span class="p">,</span> <span class="p">{</span>
   <span class="nx">x</span><span class="o">:</span> <span class="nx">extend</span><span class="p">(</span><span class="nx">myData</span><span class="p">.</span><span class="nx">x</span><span class="p">,</span> <span class="p">{</span>
     <span class="nx">y</span><span class="o">:</span> <span class="nx">extend</span><span class="p">(</span><span class="nx">myData</span><span class="p">.</span><span class="nx">x</span><span class="p">.</span><span class="nx">y</span><span class="p">,</span> <span class="p">{</span><span class="nx">z</span><span class="o">:</span> <span class="mi">7</span><span class="p">}),</span>
   <span class="p">}),</span>
@@ -115,7 +115,7 @@
 <p><code>update()</code> provides simple syntactic sugar around this pattern to make writing this code easier. This code becomes:</p>
 <div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kr">import</span> <span class="nx">update</span> <span class="nx">from</span> <span class="s1">&#39;react-addons-update&#39;</span><span class="p">;</span>
 
-<span class="kd">var</span> <span class="nx">newData</span> <span class="o">=</span> <span class="nx">update</span><span class="p">(</span><span class="nx">myData</span><span class="p">,</span> <span class="p">{</span>
+<span class="kr">const</span> <span class="nx">newData</span> <span class="o">=</span> <span class="nx">update</span><span class="p">(</span><span class="nx">myData</span><span class="p">,</span> <span class="p">{</span>
   <span class="nx">x</span><span class="o">:</span> <span class="p">{</span><span class="nx">y</span><span class="o">:</span> <span class="p">{</span><span class="nx">z</span><span class="o">:</span> <span class="p">{</span><span class="nx">$set</span><span class="o">:</span> <span class="mi">7</span><span class="p">}}},</span>
   <span class="nx">a</span><span class="o">:</span> <span class="p">{</span><span class="nx">b</span><span class="o">:</span> <span class="p">{</span><span class="nx">$push</span><span class="o">:</span> <span class="p">[</span><span class="mi">9</span><span class="p">]}}</span>
 <span class="p">});</span>
@@ -132,22 +132,22 @@
 <li><code>{$merge: object}</code> merge the keys of <code>object</code> with the target.</li>
 <li><code>{$apply: function}</code> passes in the current value to the function and updates it with the new returned value.</li>
 </ul>
-<h2><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="#examples">#</a></h2><h3><a class="anchor" name="simple-push"></a>Simple push <a class="hash-link" href="#simple-push">#</a></h3><div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">initialArray</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">];</span>
-<span class="kd">var</span> <span class="nx">newArray</span> <span class="o">=</span> <span class="nx">update</span><span class="p">(</span><span class="nx">initialArray</span><span class="p">,</span> <span class="p">{</span><span class="nx">$push</span><span class="o">:</span> <span class="p">[</span><span class="mi">4</span><span class="p">]});</span> <span class="c1">// =&gt; [1, 2, 3, 4]</span>
+<h2><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="#examples">#</a></h2><h3><a class="anchor" name="simple-push"></a>Simple push <a class="hash-link" href="#simple-push">#</a></h3><div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kr">const</span> <span class="nx">initialArray</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">];</span>
+<span class="kr">const</span> <span class="nx">newArray</span> <span class="o">=</span> <span class="nx">update</span><span class="p">(</span><span class="nx">initialArray</span><span class="p">,</span> <span class="p">{</span><span class="nx">$push</span><span class="o">:</span> <span class="p">[</span><span class="mi">4</span><span class="p">]});</span> <span class="c1">// =&gt; [1, 2, 3, 4]</span>
 </code></pre></div>
 <p><code>initialArray</code> is still <code>[1, 2, 3]</code>.</p>
-<h3><a class="anchor" name="nested-collections"></a>Nested collections <a class="hash-link" href="#nested-collections">#</a></h3><div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">collection</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="p">{</span><span class="nx">a</span><span class="o">:</span> <span class="p">[</span><span class="mi">12</span><span class="p">,</span> <span class="mi">17</span><span class="p">,</span> <span class="mi">15</span><span class="p">]}];</span>
-<span class="kd">var</span> <span class="nx">newCollection</span> <span class="o">=</span> <span class="nx">update</span><span class="p">(</span><span class="nx">collection</span><span class="p">,</span> <span class="p">{</span><span class="mi">2</span><span class="o">:</span> <span class="p">{</span><span class="nx">a</span><span class="o">:</span> <span class="p">{</span><span class="nx">$splice</span><span class="o">:</span> <span class="p">[[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">13</span><span class="p">,</span> <span class="mi">14</span><span class="p">]]}}});</span>
+<h3><a class="anchor" name="nested-collections"></a>Nested collections <a class="hash-link" href="#nested-collections">#</a></h3><div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kr">const</span> <span class="nx">collection</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="p">{</span><span class="nx">a</span><span class="o">:</span> <span class="p">[</span><span class="mi">12</span><span class="p">,</span> <span class="mi">17</span><span class="p">,</span> <span class="mi">15</span><span class="p">]}];</span>
+<span class="kr">const</span> <span class="nx">newCollection</span> <span class="o">=</span> <span class="nx">update</span><span class="p">(</span><span class="nx">collection</span><span class="p">,</span> <span class="p">{</span><span class="mi">2</span><span class="o">:</span> <span class="p">{</span><span class="nx">a</span><span class="o">:</span> <span class="p">{</span><span class="nx">$splice</span><span class="o">:</span> <span class="p">[[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">13</span><span class="p">,</span> <span class="mi">14</span><span class="p">]]}}});</span>
 <span class="c1">// =&gt; [1, 2, {a: [12, 13, 14, 15]}]</span>
 </code></pre></div>
 <p>This accesses <code>collection</code>&#39;s index <code>2</code>, key <code>a</code>, and does a splice of one item starting from index <code>1</code> (to remove <code>17</code>) while inserting <code>13</code> and <code>14</code>.</p>
-<h3><a class="anchor" name="updating-a-value-based-on-its-current-one"></a>Updating a value based on its current one <a class="hash-link" href="#updating-a-value-based-on-its-current-one">#</a></h3><div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span><span class="nx">a</span><span class="o">:</span> <span class="mi">5</span><span class="p">,</span> <span class="nx">b</span><span class="o">:</span> <span class="mi">3</span><span class="p">};</span>
-<span class="kd">var</span> <span class="nx">newObj</span> <span class="o">=</span> <span class="nx">update</span><span class="p">(</span><span class="nx">obj</span><span class="p">,</span> <span class="p">{</span><span class="nx">b</span><span class="o">:</span> <span class="p">{</span><span class="nx">$apply</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">x</span><span class="p">)</span> <span class="p">{</span><span class="k">return</span> <span class="nx">x</span> <span class="o">*</span> <span class="mi">2</span><span class="p">;}}});</span>
+<h3><a class="anchor" name="updating-a-value-based-on-its-current-one"></a>Updating a value based on its current one <a class="hash-link" href="#updating-a-value-based-on-its-current-one">#</a></h3><div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kr">const</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span><span class="nx">a</span><span class="o">:</span> <span class="mi">5</span><span class="p">,</span> <span class="nx">b</span><span class="o">:</span> <span class="mi">3</span><span class="p">};</span>
+<span class="kr">const</span> <span class="nx">newObj</span> <span class="o">=</span> <span class="nx">update</span><span class="p">(</span><span class="nx">obj</span><span class="p">,</span> <span class="p">{</span><span class="nx">b</span><span class="o">:</span> <span class="p">{</span><span class="nx">$apply</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">x</span><span class="p">)</span> <span class="p">{</span><span class="k">return</span> <span class="nx">x</span> <span class="o">*</span> <span class="mi">2</span><span class="p">;}}});</span>
 <span class="c1">// =&gt; {a: 5, b: 6}</span>
 <span class="c1">// This is equivalent, but gets verbose for deeply nested collections:</span>
-<span class="kd">var</span> <span class="nx">newObj2</span> <span class="o">=</span> <span class="nx">update</span><span class="p">(</span><span class="nx">obj</span><span class="p">,</span> <span class="p">{</span><span class="nx">b</span><span class="o">:</span> <span class="p">{</span><span class="nx">$set</span><span class="o">:</span> <span class="nx">obj</span><span class="p">.</span><span class="nx">b</span> <span class="o">*</span> <span class="mi">2</span><span class="p">}});</span>
-</code></pre></div><h3><a class="anchor" name="shallow-merge"></a>(Shallow) Merge <a class="hash-link" href="#shallow-merge">#</a></h3><div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span><span class="nx">a</span><span class="o">:</span> <span class="mi">5</span><span class="p">,</span> <span class="nx">b</span><span class="o">:</span> <span class="mi">3</span><span class="p">};</span>
-<span class="kd">var</span> <span class="nx">newObj</span> <span class="o">=</span> <span class="nx">update</span><span class="p">(</span><span class="nx">obj</span><span class="p">,</span> <span class="p">{</span><span class="nx">$merge</span><span class="o">:</span> <span class="p">{</span><span class="nx">b</span><span class="o">:</span> <span class="mi">6</span><span class="p">,</span> <span class="nx">c</span><span class="o">:</span> <span class="mi">7</span><span class="p">}});</span> <span class="c1">// =&gt; {a: 5, b: 6, c: 7}</span>
+<span class="kr">const</span> <span class="nx">newObj2</span> <span class="o">=</span> <span class="nx">update</span><span class="p">(</span><span class="nx">obj</span><span class="p">,</span> <span class="p">{</span><span class="nx">b</span><span class="o">:</span> <span class="p">{</span><span class="nx">$set</span><span class="o">:</span> <span class="nx">obj</span><span class="p">.</span><span class="nx">b</span> <span class="o">*</span> <span class="mi">2</span><span class="p">}});</span>
+</code></pre></div><h3><a class="anchor" name="shallow-merge"></a>(Shallow) Merge <a class="hash-link" href="#shallow-merge">#</a></h3><div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kr">const</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span><span class="nx">a</span><span class="o">:</span> <span class="mi">5</span><span class="p">,</span> <span class="nx">b</span><span class="o">:</span> <span class="mi">3</span><span class="p">};</span>
+<span class="kr">const</span> <span class="nx">newObj</span> <span class="o">=</span> <span class="nx">update</span><span class="p">(</span><span class="nx">obj</span><span class="p">,</span> <span class="p">{</span><span class="nx">$merge</span><span class="o">:</span> <span class="p">{</span><span class="nx">b</span><span class="o">:</span> <span class="mi">6</span><span class="p">,</span> <span class="nx">c</span><span class="o">:</span> <span class="mi">7</span><span class="p">}});</span> <span class="c1">// =&gt; {a: 5, b: 6, c: 7}</span>
 </code></pre></div>
 
     <div class="docs-prevnext">

docs/web-components.html

@@ -105,14 +105,14 @@ You will need to manually attach event handlers to handle these events within yo
     <span class="o">&lt;</span><span class="err">/brick-flipbox&gt;</span>
   <span class="p">);</span>
 <span class="p">}</span>
-</code></pre></div><h2><a class="anchor" name="using-react-in-your-web-components"></a>Using React in your Web Components <a class="hash-link" href="#using-react-in-your-web-components">#</a></h2><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">proto</span> <span class="o">=</span> <span class="nb">Object</span><span class="p">.</span><span class="nx">create</span><span class="p">(</span><span class="nx">HTMLElement</span><span class="p">.</span><span class="nx">prototype</span><span class="p">,</span> <span class="p">{</span>
+</code></pre></div><h2><a class="anchor" name="using-react-in-your-web-components"></a>Using React in your Web Components <a class="hash-link" href="#using-react-in-your-web-components">#</a></h2><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">const</span> <span class="nx">proto</span> <span class="o">=</span> <span class="nb">Object</span><span class="p">.</span><span class="nx">create</span><span class="p">(</span><span class="nx">HTMLElement</span><span class="p">.</span><span class="nx">prototype</span><span class="p">,</span> <span class="p">{</span>
   <span class="nx">attachedCallback</span><span class="o">:</span> <span class="p">{</span>
     <span class="nx">value</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">mountPoint</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;span&#39;</span><span class="p">);</span>
+      <span class="kr">const</span> <span class="nx">mountPoint</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;span&#39;</span><span class="p">);</span>
       <span class="k">this</span><span class="p">.</span><span class="nx">createShadowRoot</span><span class="p">().</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">mountPoint</span><span class="p">);</span>
 
-      <span class="kd">var</span> <span class="nx">name</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">getAttribute</span><span class="p">(</span><span class="s1">&#39;name&#39;</span><span class="p">);</span>
-      <span class="kd">var</span> <span class="nx">url</span> <span class="o">=</span> <span class="s1">&#39;https://www.google.com/search?q=&#39;</span> <span class="o">+</span> <span class="nb">encodeURIComponent</span><span class="p">(</span><span class="nx">name</span><span class="p">);</span>
+      <span class="kr">const</span> <span class="nx">name</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">getAttribute</span><span class="p">(</span><span class="s1">&#39;name&#39;</span><span class="p">);</span>
+      <span class="kr">const</span> <span class="nx">url</span> <span class="o">=</span> <span class="s1">&#39;https://www.google.com/search?q=&#39;</span> <span class="o">+</span> <span class="nb">encodeURIComponent</span><span class="p">(</span><span class="nx">name</span><span class="p">);</span>
       <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">a</span> <span class="nx">href</span><span class="o">=</span><span class="p">{</span><span class="nx">url</span><span class="p">}</span><span class="o">&gt;</span><span class="p">{</span><span class="nx">name</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/a&gt;, mountPoint);</span>
     <span class="p">}</span>
   <span class="p">}</span>

tutorial/tutorial.html

@@ -325,7 +325,7 @@
 
 <p>Square no longer keeps its own state; it receives its value from its parent <code>Board</code> and informs its parent when it&#39;s clicked. We call components like this <strong>controlled components</strong>.</p>
 <h2><a class="anchor" name="why-immutability-is-important"></a>Why Immutability Is Important <a class="hash-link" href="#why-immutability-is-important">#</a></h2>
-<p>In the previous code example, I suggest using the <code>.slice()</code> operator to copy the <code>squares</code> array prior to making changges and to prevent mutating the existing array. Let&#39;s talk about what this means and why it an important concept to learn.</p>
+<p>In the previous code example, I suggest using the <code>.slice()</code> operator to copy the <code>squares</code> array prior to making changes and to prevent mutating the existing array. Let&#39;s talk about what this means and why it an important concept to learn.</p>
 
 <p>There are generally two ways for changing data. The first, and most common method in past, has been to <em>mutate</em> the data by directly changing the values of a variable. The second method is to replace the data with a new copy of the object that also includes desired changes.</p>
 <h4><a class="anchor" name="data-change-with-mutation"></a>Data change with mutation <a class="hash-link" href="#data-change-with-mutation">#</a></h4><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">player</span> <span class="o">=</span> <span class="p">{</span><span class="nx">score</span><span class="o">:</span>  <span class="mi">1</span><span class="p">}</span>
@@ -341,7 +341,7 @@
 <h3><a class="anchor" name="determining-when-to-re-render-in-react"></a>Determining When To Re-render in React <a class="hash-link" href="#determining-when-to-re-render-in-react">#</a></h3>
 <p>The biggest benefit of immutability in React comes when you build simple <em>pure components</em>. Since immutable data can more easily determine if changes have been made it also helps to determine when a component requires being re-rendered.</p>
 
-<p>To learn how you can build <em>pure components</em> take a look at <a href="https://facebook.github.io/react/docs/update.html">shouldComponentUpdate()</a>. Also, take a look at the <a href="https://facebook.github.io/immutable-js/">immutability.js</a> library to strictly enforce immutable data.</p>
+<p>To learn how you can build <em>pure components</em> take a look at <a href="https://facebook.github.io/react/docs/update.html">shouldComponentUpdate()</a>. Also, take a look at the <a href="https://facebook.github.io/immutable-js/">Immutable.js</a> library to strictly enforce immutable data.</p>
 <h2><a class="anchor" name="functional-components"></a>Functional Components <a class="hash-link" href="#functional-components">#</a></h2>
 <p>Back to our project, you can now delete the <code>constructor</code> from <code>Square</code>; we won&#39;t need it any more. In fact, React supports a simpler syntax called <strong>stateless functional components</strong> for component types like Square that only consist of a <code>render</code> method. Rather than define a class extending React.Component, simply write a function that takes props and returns what should be rendered:</p>
 <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">function</span> <span class="nx">Square</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span>
@@ -464,7 +464,7 @@
   <span class="k">if</span> <span class="p">(</span><span class="nx">calculateWinner</span><span class="p">(</span><span class="nx">squares</span><span class="p">)</span> <span class="o">||</span> <span class="nx">squares</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="p">}</span>
-  <span class="nx">squares</span><span class="p">[</span><span class="nx">i</span><span class="p">]</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">xIsNext</span><span class="p">(</span><span class="nx">current</span><span class="p">.</span><span class="nx">squares</span><span class="p">)</span> <span class="o">?</span> <span class="s1">&#39;X&#39;</span> <span class="o">:</span> <span class="s1">&#39;O&#39;</span><span class="p">;</span>
+  <span class="nx">squares</span><span class="p">[</span><span class="nx">i</span><span class="p">]</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">xIsNext</span> <span class="o">?</span> <span class="s1">&#39;X&#39;</span> <span class="o">:</span> <span class="s1">&#39;O&#39;</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">history</span><span class="o">:</span> <span class="nx">history</span><span class="p">.</span><span class="nx">concat</span><span class="p">([{</span>
       <span class="nx">squares</span><span class="o">:</span> <span class="nx">squares</span>