From c653f07ca8de2627ea7dc0eecaa8f90597e89f22 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Thu, 4 May 2017 00:30:57 +0100 Subject: [PATCH] Rebuild manually --- tutorial/tutorial.html | 50 ++++++++++++++++++++++++++++++++---------- 1 file changed, 39 insertions(+), 11 deletions(-) diff --git a/tutorial/tutorial.html b/tutorial/tutorial.html index 1f95e319c3..7470885edd 100644 --- a/tutorial/tutorial.html +++ b/tutorial/tutorial.html @@ -203,7 +203,11 @@

Today, we're going to build an interactive tic-tac-toe game.

-

If you like, you can check out the final result here: Final Result. 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.

+

If you like, you can check out the final result here: Final Result. Don't worry if the code doesn'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.

+ +

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.

+ +

Once you get a little familiar with the game, feel free to close that tab, as we'll start from a simpler template in the next sections.

Prerequisites

@@ -213,15 +217,25 @@

How to Follow Along

-

Following Along in Browser

+

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.

-

We'll be using an online editor called CodePen in this guide. You can begin by opening this starter code. It should display an empty tic-tac-toe field. We will be editing that code during this tutorial.

+

If You Prefer to Write Code in the Browser

-

Following Along Locally

+

This is the quickest way to get started!

+ +

First, open this starter code in a new tab. It should display an empty tic-tac-toe field. We will be editing that code during this tutorial.

+ +

You can now skip the next section about setting up a local development environment and head straight to the overview.

+ +

If You Prefer to Write Code in Your Editor

Alternatively, you can set up a project on your computer.

-

This is more work, but gives you a standard development environment, including support for modules.

+

Note: this is completely optional and not required for this tutorial!

+ +

This is more work, but lets you work from the comfort of your editor.

+ +

If you want to do it, here are the steps to follow:

  1. Make sure you have a recent version of Node.js installed.
    2. @@ -237,12 +251,12 @@

    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.

    +

    We recommend following these instructions to configure syntax highlighting for your editor.

    +

    Help, I'm Stuck!

    If you get stuck, check out the community support resources. In particular, 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.

    -

    You can also look at the final version of the code.

    -

    With this out of the way, let's get started!

    Overview

    @@ -412,7 +426,9 @@

    It lets you inspect the props and state of any of the components in your tree.

    -

    After installing it, you can right-click any element on the page, click "Inspect" 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:

    +

    After installing it, you can right-click any element on the page, click "Inspect" to open the developer tools, and the React tab will appear as the last tab to the right.

    + +

    However, note there are a few extra steps to get it working with CodePen:

    1. Log in or register and confirm your email (required to prevent spam).
      2. @@ -847,9 +863,21 @@

      Now the whole Board component looks like this:

      -
      class Board extends React.Component {
-  renderSquare(i) {
-    return (
+
      class Board extends React.Component {
+  handleClick(i) {
+    const squares = this.state.squares.slice();
+    if (calculateWinner(squares) || squares[i]) {
+      return;
+    }
+    squares[i] = this.state.xIsNext ? 'X' : 'O';
+    this.setState({
+      squares: squares,
+      xIsNext: !this.state.xIsNext,
+    });
+  }
+
+  renderSquare(i) {
+    return (
       <Square
         value={this.props.squares[i]}
         onClick={() => this.props.onClick(i)}