{"patch":"diff --git a\/docs\/_data\/nav_tutorial.yml b\/docs\/_data\/nav_tutorial.yml\nindex 2a321a17ee..49cc7557f9 100644\n--- a\/docs\/_data\/nav_tutorial.yml\n+++ b\/docs\/_data\/nav_tutorial.yml\n@@ -1,7 +1,7 @@\n - title: Tutorial\n items:\n - id: tutorial\n- title: Overview\n+ title: Before We Start\n subitems:\n - id: what-were-building \n title: What We're Building\n@@ -19,6 +19,11 @@\n title: Help, I'm Stuck!\n href: \/react\/tutorial\/tutorial.html#help-im-stuck\n forceInternal: true\n+ - id: overview\n+ title: Overview\n+ href: \/react\/tutorial\/tutorial.html#overview\n+ forceInternal: true\n+ subitems:\n - id: what-is-react\n title: What is React?\n href: \/react\/tutorial\/tutorial.html#what-is-react\ndiff --git a\/docs\/tutorial\/tutorial.md b\/docs\/tutorial\/tutorial.md\nindex 612fbc0b56..2cc9b53059 100644\n--- a\/docs\/tutorial\/tutorial.md\n+++ b\/docs\/tutorial\/tutorial.md\n@@ -12,25 +12,27 @@ redirect_from:\n - \"docs\/tutorial-zh-CN.html\"\n ---\n \n-## What We're Building\n+## Before We Start\n+\n+### What We're Building\n \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 \n-## Prerequisites\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+### How to Follow Along\n \n-### Following Along in Browser\n+#### Following Along in Browser\n \n We'll be using an online editor called CodePen in this guide. You can begin 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+#### Following Along Locally\n \n You can also follow along locally if you don't mind a few extra steps:\n \n@@ -48,7 +50,7 @@ You can also follow along locally if you don't mind a few extra steps:\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+### 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@@ -56,7 +58,9 @@ You can also look at the `. Each component is encapsulated so it can operate independently, which allows you to build complex UIs out of simple components.\n \n-## Getting Started\n+### Getting Started\n \n Start with this example: Starter Code<\/a>.\n \n@@ -114,7 +118,7 @@ The Square component renders a single `

dillon1000/react

Files changed