{"files":[{"path":"docs\/tutorial\/tutorial.md","status":"M"}],"patch":"diff --git a\/docs\/tutorial\/tutorial.md b\/docs\/tutorial\/tutorial.md\nindex d0c1d18402..827b331923 100644\n--- a\/docs\/tutorial\/tutorial.md\n+++ b\/docs\/tutorial\/tutorial.md\n@@ -14,9 +14,47 @@ redirect_from:\n \n ## What We're Building\n \n-Today, we're going to build an interactive tic-tac-toe game. We'll assume some familiarity with HTML and JavaScript but you should be able to follow along even if you haven't used them before.\n+Today, we're going to build an interactive tic-tac-toe game.\n \n-If you like, you can check out the final result here: Final Result<\/a>. Try playing the game. You can also click on a link in the move list to go \"back in time\" and see what the board looked like just after that move was made.\n+If you like, you can check out the final result here: Final Result<\/a>. Try playing the game. You can also click on a link in the move list to go \"back in time\" and see what the board looked like just after that move was made.\n+\n+## Prerequisites\n+\n+We'll assume some familiarity with HTML and JavaScript but you should be able to follow along even if you haven't used them before.\n+\n+If you need a refresher on JavaScript, we recommend reading [this guide](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/A_re-introduction_to_JavaScript). Note that we're also using some features from ES6, a recent version of JavaScript. In this tutorial, we're using [arrow functions](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Functions\/Arrow_functions), [classes](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Classes), [`let`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/let), and [`const`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/const) statements. You can use Babel REPL<\/a> to check what ES6 code compiles to.\n+\n+## How to Follow Along\n+\n+### Following Along in Browser\n+\n+We'll be using an online editor called CodePen in this guide. Start by opening this starter code<\/a>. It should display an empty tic-tac-toe field. We will be editing that code during this tutorial.\n+\n+### Following Along Locally\n+\n+You can also follow along locally if you don't mind a few extra steps:\n+\n+1. Make sure you have a recent version of [Node.js](https:\/\/nodejs.org\/en\/) installed.\n+2. Follow the [installation instructions](\/react\/docs\/installation.html#creating-a-new-application) to create a new project.\n+3. Replace the contents of `src\/index.js` in the generated project with this JavaScript code<\/a>.\n+4. Replace the contents of `src\/index.css` in the generated project with this CSS code<\/a>.\n+5. Delete any other files in the `src\/` folder, and add three lines to the top of `src\/index.js`:\n+\n+```js\n+import React from 'react';\n+import ReactDOM from 'react-dom';\n+import '.\/index.css';\n+```\n+\n+Now if you run `npm start` in the project folder and open `http:\/\/localhost:3000` in the browser, you should see an empty tic-tac-toe field.\n+\n+## Help, I'm Stuck!\n+\n+If you get stuck, check out the [community support resources](https:\/\/facebook.github.io\/react\/community\/support.html). In particular, [Reactiflux chat](\/react\/community\/support.html#reactiflux-chat) is a great way to get quick help. If you don't get a good answer anywhere, please file an issue, and we'll help you out.\n+\n+You can also look at the final version of the code<\/a>.\n+\n+With this out of the way, let's get started!\n \n ## What is React?\n \n@@ -62,7 +100,7 @@ The `ShoppingList` component only renders built-in DOM components, but you can c\n \n ## Getting Started\n \n-Start with this example: Starter Code<\/a>.\n+Start with this example: Starter Code<\/a>.\n \n It contains the shell of what we're building today. We've provided the styles so you only need to worry about the JavaScript.\n \n@@ -90,10 +128,12 @@ After: You should see a number in each square in the rendered output.\n \n ##An Interactive Component\n \n-Let's make the Square component fill in an \"X\" when you click it. Try changing the opening button tag returned in the `render()` function of the `Square` class to:\n+Let's make the Square component fill in an \"X\" when you click it. Try changing the button tag returned in the `render()` function of the `Square` class to:\n \n ```html\n

dillon1000/react

Files changed