revert id adding

content/tutorial/tutorial.md

@@ -14,7 +14,7 @@ redirect_from:
 
 This tutorial doesn't assume any existing React knowledge.
 
-## Before We Start the Tutorial {#before-we-start-the-tutorial}
+## Before We Start the Tutorial
 
 We will build a small game during this tutorial. **You might be tempted to skip it because you're not building games -- but give it a chance.** The techniques you'll learn in the tutorial are fundamental to building any React apps, and mastering it will give you a deep understanding of React.
 
@@ -33,7 +33,7 @@ You don't have to complete all of the sections at once to get the value out of t
 
 It's fine to copy and paste code as you're following along the tutorial, but we recommend to type it by hand. This will help you develop a muscle memory and a stronger understanding.
 
-### What Are We Building? {#what-are-we-building}
+### What Are We Building?
 
 In this tutorial, we'll show how to build an interactive tic-tac-toe game with React.
 
@@ -43,17 +43,17 @@ We recommend that you check out the tic-tac-toe game before continuing with the
 
 You can close the tic-tac-toe game once you're familiar with it. We'll be starting from a simpler template in this tutorial. Our next step is to set you up so that you can start building the game.
 
-### Prerequisites {#prerequisites}
+### Prerequisites
 
 We'll assume that you have some familiarity with HTML and JavaScript, but you should be able to follow along even if you're coming from a different programming language. We'll also assume that you're familiar with programming concepts like functions, objects, arrays, and to a lesser extent, classes.
 
 If you need to review 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 the [Babel REPL](babel://es5-syntax-example) to check what ES6 code compiles to.
 
-## Setup for the Tutorial {#setup-for-the-tutorial}
+## Setup for the Tutorial
 
 There are two ways to complete this tutorial: you can either write the code in your browser, or you can set up a local development environment on your computer.
 
-### Setup Option 1: Write Code in the Browser {#setup-option-1-write-code-in-the-browser}
+### Setup Option 1: Write Code in the Browser
 
 This is the quickest way to get started!
 
@@ -61,7 +61,7 @@ First, open this **[Starter Code](https://codepen.io/gaearon/pen/oWWQNa?editors=
 
 You can now skip the second setup option, and go to the [Overview](#overview) section to get an overview of React.
 
-### Setup Option 2: Local Development Environment {#setup-option-2-local-development-environment}
+### Setup Option 2: Local Development Environment
 
 This is completely optional and not required for this tutorial!
 
@@ -116,15 +116,15 @@ We recommend following [these instructions](https://babeljs.io/docs/editors/) to
 
 </details>
 
-### Help, I'm Stuck! {#help-im-stuck}
+### Help, I'm Stuck!
 
 If you get stuck, check out the [community support resources](/community/support.html). In particular, [Reactiflux Chat](https://discord.gg/0ZcbPKXt5bZjGY5n) is a great way to get help quickly. If you don't receive an answer, or if you remain stuck, please file an issue, and we'll help you out.
 
-## Overview {#overview}
+## Overview
 
 Now that you're set up, let's get an overview of React!
 
-### What Is React? {#what-is-react}
+### What Is React?
 
 React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called "components".
 
@@ -170,7 +170,7 @@ JSX comes with the full power of JavaScript. You can put *any* JavaScript expres
 
 The `ShoppingList` component above only renders built-in DOM components like `<div />` and `<li />`. But you can compose and render custom React components too. For example, we can now refer to the whole shopping list by writing `<ShoppingList />`. Each React component is encapsulated and can operate independently; this allows you to build complex UIs from simple components.
 
-## Inspecting the Starter Code {#inspecting-the-starter-code}
+## Inspecting the Starter Code
 
 If you're going to work on the tutorial **in your browser,** open this code in a new tab: **[Starter Code](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)**. If you're going to work on the tutorial **locally,** instead open `src/index.js` in your project folder (you have already touched this file during the [setup](#setup-option-2-local-development-environment)).
 
@@ -184,7 +184,7 @@ By inspecting the code, you'll notice that we have three React components:
 
 The Square component renders a single `<button>` and the Board renders 9 squares. The Game component renders a board with placeholder values which we'll modify later. There are currently no interactive components.
 
-### Passing Data Through Props {#passing-data-through-props}
+### Passing Data Through Props
 
 Just to get our feet wet, let's try passing some data from our Board component to our Square component.
 
@@ -223,7 +223,7 @@ After: You should see a number in each square in the rendered output.
 
 Congratulations! You've just "passed a prop" from a parent Board component to a child Square component. Passing props is how information flows in React apps, from parents to children.
 
-### Making an Interactive Component {#making-an-interactive-component}
+### Making an Interactive Component
 
 Let's fill the Square component with an "X" when we click it. 
 First, change the button tag that is returned from the Square component's `render()` function to this:
@@ -325,7 +325,7 @@ When you call `setState` in a component, React automatically updates the child c
 
 **[View the full code at this point](https://codepen.io/gaearon/pen/VbbVLg?editors=0010)**
 
-### Developer Tools {#developer-tools}
+### Developer Tools
 
 The React Devtools extension for [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) and [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) lets you inspect a React component tree with your browser's developer tools.
 
@@ -342,11 +342,11 @@ After installing React DevTools, you can right-click on any element on the page,
 3. Click "Change View" and then choose "Debug mode".
 4. In the new tab that opens, the devtools should now have a React tab.
 
-## Completing the Game {#completing-the-game}
+## Completing the Game
 
 We now have the basic building blocks for our tic-tac-toe game. To have a complete game, we now need to alternate placing "X"s and "O"s on the board, and we need a way to determine a winner.
 
-### Lifting State Up {#lifting-state-up}
+### Lifting State Up
 
 Currently, each Square component maintains the game's state. To check for a winner, we'll maintain the value of each of the 9 squares in one location.
 
@@ -543,20 +543,20 @@ Since the Square components no longer maintain state, the Square components rece
 
 Note how in `handleClick`, we call `.slice()` to create a copy of the `squares` array to modify instead of modifying the existing array. We will explain why we create a copy of the `squares` array in the next section.
 
-### Why Immutability Is Important {#why-immutability-is-important}
+### Why Immutability Is Important
 
 In the previous code example, we suggested that you use the `.slice()` operator to create a copy of the `squares` array to modify instead of modifying the existing array. We'll now discuss immutability and why immutability is important to learn.
 
 There are generally two approaches to changing data. The first approach is to *mutate* the data by directly changing the data's values. The second approach is to replace the data with a new copy which has the desired changes.
 
-#### Data Change with Mutation {#data-change-with-mutation}
+#### Data Change with Mutation
 ```javascript
 var player = {score: 1, name: 'Jeff'};
 player.score = 2;
 // Now player is {score: 2, name: 'Jeff'}
 ```
 
-#### Data Change without Mutation {#data-change-without-mutation}
+#### Data Change without Mutation
 ```javascript
 var player = {score: 1, name: 'Jeff'};
 
@@ -569,23 +569,23 @@ var newPlayer = Object.assign({}, player, {score: 2});
 
 The end result is the same but by not mutating (or changing the underlying data) directly, we gain several benefits described below.
 
-#### Complex Features Become Simple {#complex-features-become-simple}
+#### Complex Features Become Simple
 
 Immutability makes complex features much easier to implement. Later in this tutorial, we will implement a "time travel" feature that allows us to review the tic-tac-toe game's history and "jump back" to previous moves. This functionality isn't specific to games -- an ability to undo and redo certain actions is a common requirement in applications. Avoiding direct data mutation lets us keep previous versions of the game's history intact, and reuse them later.
 
-#### Detecting Changes {#detecting-changes}
+#### Detecting Changes
 
 Detecting changes in mutable objects is difficult because they are modified directly. This detection requires the mutable object to be compared to previous copies of itself and the entire object tree to be traversed.
 
 Detecting changes in immutable objects is considerably easier. If the immutable object that is being referenced is different than the previous one, then the object has changed.
 
-#### Determining When to Re-render in React {#determining-when-to-re-render-in-react}
+#### Determining When to Re-render in React
 
 The main benefit of immutability is that it helps you build _pure components_ in React. Immutable data can easily determine if changes have been made which helps to determine when a component requires re-rendering.
 
 You can learn more about `shouldComponentUpdate()` and how you can build *pure components* by reading [Optimizing Performance](/docs/optimizing-performance.html#examples).
 
-### Function Components {#function-components}
+### Function Components
 
 We'll now change the Square to be a **function component**.
 
@@ -611,7 +611,7 @@ We have changed `this.props` to `props` both times it appears.
 >
 >When we modified the Square to be a function component, we also changed `onClick={() => this.props.onClick()}` to a shorter `onClick={props.onClick}` (note the lack of parentheses on *both* sides). In a class, we used an arrow function to access the correct `this` value, but in a function component we don't need to worry about `this`.
 
-### Taking Turns {#taking-turns}
+### Taking Turns
 
 We now need to fix an obvious defect in our tic-tac-toe game: the "O"s cannot be marked on the board.
 
@@ -710,7 +710,7 @@ class Board extends React.Component {
 
 **[View the full code at this point](https://codepen.io/gaearon/pen/KmmrBy?editors=0010)**
 
-### Declaring a Winner {#declaring-a-winner}
+### Declaring a Winner
 
 Now that we show which player's turn is next, we should also show when the game is won and there are no more turns to make. We can determine a winner by adding this helper function to the end of the file:
 
@@ -772,11 +772,11 @@ We can now change the Board's `handleClick` function to return early by ignoring
 
 Congratulations! You now have a working tic-tac-toe game. And you've just learned the basics of React too. So *you're* probably the real winner here.
 
-## Adding Time Travel {#adding-time-travel}
+## Adding Time Travel
 
 As a final exercise, let's make it possible to "go back in time" to the previous moves in the game.
 
-### Storing a History of Moves {#storing-a-history-of-moves}
+### Storing a History of Moves
 
 If we mutated the `squares` array, implementing time travel would be very difficult.
 
@@ -816,7 +816,7 @@ history = [
 
 Now we need to decide which component should own the `history` state.
 
-### Lifting State Up, Again {#lifting-state-up-again}
+### Lifting State Up, Again
 
 We'll want the top-level Game component to display a list of past moves. It will need access to the `history` to do that, so we will place the `history` state in the top-level Game component.
 
@@ -1002,7 +1002,7 @@ At this point, the Board component only needs the `renderSquare` and `render` me
 
 **[View the full code at this point](https://codepen.io/gaearon/pen/EmmOqJ?editors=0010)**
 
-### Showing the Past Moves {#showing-the-past-moves}
+### Showing the Past Moves
 
 Since we are recording the tic-tac-toe game's history, we can now display it to the player as a list of past moves.
 
@@ -1069,7 +1069,7 @@ For each move in the tic-tac-toes's game's history, we create a list item `<li>`
 
 Let's discuss what the above warning means.
 
-### Picking a Key {#picking-a-key}
+### Picking a Key
 
 When we render a list, React stores some information about each rendered list item. When we update a list, React needs to determine what has changed. We could have added, removed, re-arranged, or updated the list's items.
 
@@ -1105,7 +1105,7 @@ If no key is specified, React will present a warning and use the array index as
 Keys do not need to be globally unique; they only need to be unique between components and their siblings.
 
 
-### Implementing Time Travel {#implementing-time-travel}
+### Implementing Time Travel
 
 In the tic-tac-toe game's history, each past move has a unique ID associated with it: it's the sequential number of the move. The moves are never re-ordered, deleted, or inserted in the middle, so it's safe to use the move index as a key.
 
@@ -1203,7 +1203,7 @@ If we click on any step in the game's history, the tic-tac-toe board should imme
 
 **[View the full code at this point](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**
 
-### Wrapping Up {#wrapping-up}
+### Wrapping Up
 
 Congratulations! You've created a tic-tac-toe game that: