Rebuild manually

tutorial/tutorial.html

@@ -203,7 +203,11 @@
 
 <p>Today, we&#39;re going to build an interactive tic-tac-toe game.</p>
 
-<p>If you like, you can check out the final result here: <a href="https://codepen.io/gaearon/pen/gWWZgR?editors=0010">Final Result</a>. Try playing the game. You can also click on a link in the move list to go &quot;back in time&quot; and see what the board looked like just after that move was made.</p>
+<p>If you like, you can check out the final result here: <a href="https://codepen.io/gaearon/pen/gWWZgR?editors=0010">Final Result</a>. Don&#39;t worry if the code doesn&#39;t make sense to you yet, or if it uses an unfamiliar syntax. We will be learning how to build this game step by step throughout this tutorial.</p>
+
+<p>Try playing the game. You can also click on a link in the move list to go &quot;back in time&quot; and see what the board looked like just after that move was made.</p>
+
+<p>Once you get a little familiar with the game, feel free to close that tab, as we&#39;ll start from a simpler template in the next sections.</p>
 
 <h3>Prerequisites</h3>
 
@@ -213,15 +217,25 @@
 
 <h3>How to Follow Along</h3>
 
-<h4>Following Along in Browser</h4>
+<p>There are two ways to complete this tutorial: you could either write the code right in the browser, or you could set up a local development environment on your machine. You can choose either option depending on what you feel comfortable with.</p>
 
-<p>We&#39;ll be using an online editor called CodePen in this guide. You can begin by opening this <a href="https://codepen.io/gaearon/pen/oWWQNa?editors=0010">starter code</a>. It should display an empty tic-tac-toe field. We will be editing that code during this tutorial.</p>
+<h4>If You Prefer to Write Code in the Browser</h4>
 
-<h4>Following Along Locally</h4>
+<p>This is the quickest way to get started!</p>
+
+<p>First, open this <a href="https://codepen.io/gaearon/pen/oWWQNa?editors=0010">starter code</a> in a new tab. It should display an empty tic-tac-toe field. We will be editing that code during this tutorial.</p>
+
+<p>You can now skip the next section about setting up a local development environment and head straight to the <a href="#overview">overview</a>.</p>
+
+<h4>If You Prefer to Write Code in Your Editor</h4>
 
 <p>Alternatively, you can set up a project on your computer.</p>
 
-<p>This is more work, but gives you a standard development environment, including support for <a href="https://medium.freecodecamp.com/javascript-modules-a-beginner-s-guide-783f7d7a5fcc">modules</a>.</p>
+<p>Note: <strong>this is completely optional and not required for this tutorial!</strong></p>
+
+<p>This is more work, but lets you work from the comfort of your editor.</p>
+
+<p>If you want to do it, here are the steps to follow:</p>
 
 <ol>
 <li>Make sure you have a recent version of <a href="https://nodejs.org/en/">Node.js</a> installed.</li>
@@ -237,12 +251,12 @@
 
 <p>Now if you run <code>npm start</code> in the project folder and open <code>http://localhost:3000</code> in the browser, you should see an empty tic-tac-toe field.</p>
 
+<p>We recommend following <a href="http://babeljs.io/docs/editors">these instructions</a> to configure syntax highlighting for your editor.</p>
+
 <h3>Help, I&#39;m Stuck!</h3>
 
 <p>If you get stuck, check out the <a href="https://facebook.github.io/react/community/support.html">community support resources</a>. In particular, <a href="/react/community/support.html#reactiflux-chat">Reactiflux chat</a> is a great way to get quick help. If you don&#39;t get a good answer anywhere, please file an issue, and we&#39;ll help you out.</p>
 
-<p>You can also look at the <a href="https://codepen.io/gaearon/pen/gWWZgR?editors=0010">final version of the code</a>.</p>
-
 <p>With this out of the way, let&#39;s get started!</p>
 
 <h2>Overview</h2>
@@ -412,7 +426,9 @@
 
 <p>It lets you inspect the props and state of any of the components in your tree.</p>
 
-<p>After installing it, you can right-click any element on the page, click &quot;Inspect&quot; to open the developer tools, and the React tab will appear as the last tab to the right. However, there are a few extra steps to get it working with CodePen:</p>
+<p>After installing it, you can right-click any element on the page, click &quot;Inspect&quot; to open the developer tools, and the React tab will appear as the last tab to the right.</p>
+
+<p><strong>However, note there are a few extra steps to get it working with CodePen:</strong></p>
 
 <ol>
 <li>Log in or register and confirm your email (required to prevent spam).</li>
@@ -847,9 +863,21 @@
 </ul>
 
 <p>Now the whole Board component looks like this:</p>
-<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="hll"><span class="kr">class</span> <span class="nx">Board</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><span class="hll">  <span class="nx">renderSquare</span><span class="p">(</span><span class="nx">i</span><span class="p">)</span> <span class="p">{</span>
-</span>    <span class="k">return</span> <span class="p">(</span>
+<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">class</span> <span class="nx">Board</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">handleClick</span><span class="p">(</span><span class="nx">i</span><span class="p">)</span> <span class="p">{</span>
+    <span class="kr">const</span> <span class="nx">squares</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">squares</span><span class="p">.</span><span class="nx">slice</span><span class="p">();</span>
+    <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="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">squares</span><span class="o">:</span> <span class="nx">squares</span><span class="p">,</span>
+      <span class="nx">xIsNext</span><span class="o">:</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="p">});</span>
+  <span class="p">}</span>
+
+  <span class="nx">renderSquare</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="o">&lt;</span><span class="nx">Square</span>
 <span class="hll">        <span class="nx">value</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">squares</span><span class="p">[</span><span class="nx">i</span><span class="p">]}</span>
 </span><span class="hll">        <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">props</span><span class="p">.</span><span class="nx">onClick</span><span class="p">(</span><span class="nx">i</span><span class="p">)}</span>