diff --git a/tutorial/tutorial.html b/tutorial/tutorial.html index 545b708291..ef3a7d8f34 100644 --- a/tutorial/tutorial.html +++ b/tutorial/tutorial.html @@ -224,7 +224,7 @@

React is a declarative, efficient, and flexible JavaScript library for building user interfaces.

-

React has a few different kinds of components, but we'll start with React.Component subclasses:

+

React has a few different kinds of components, but we'll start with React.Component subclasses:

class ShoppingList extends React.Component {
   render() {
     return (
@@ -303,14 +303,14 @@
       value: null,
     };
   }
-  ...
+  // ...
 }

In JavaScript classes, you need to explicitly call super(); when defining the constructor of a subclass.

Now change the render method to display this.state.value instead of this.props.value, and change the event handler to be () => this.setState({value: 'X'}) instead of the alert:

<button className="square" onClick={() => this.setState({value: 'X'})}>
-    {this.state.value}
+  {this.state.value}
 </button>

Whenever this.setState is called, an update to the component is scheduled, causing React to merge in the passed state update and rerender the component along with its descendants. When the component rerenders, this.state.value will be 'X' so you'll see an X in the grid.

@@ -409,7 +409,7 @@ var newPlayer = Object.assign({}, player, {score: 2}); // Now player is unchanged, but newPlayer is {score: 2, name: 'Jeff'} -// Or if you are using object spread, you can write: +// Or if you are using object spread syntax proposal, you can write: // var newPlayer = {...player, score: 2};

The end result is the same but by not mutating (or changing the underlying data) directly we now have an added benefit that can help us increase component and overall application performance.

@@ -448,7 +448,7 @@ constructor() { super(); this.state = { - ... + // ... xIsNext: true, }; } @@ -466,7 +466,7 @@

Now X and O take turns. Next, change the "status" text in Board's render so that it also displays who is next.

render() {
   const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
-  ...
+  // ...

Declaring a Winner

@@ -479,7 +479,7 @@ } else { status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O'); } - ... + // ... }

You can now change handleClick to return early and ignore the click if someone has already won the game or if a square is already filled:

@@ -488,7 +488,7 @@ if (calculateWinner(squares) || squares[i]) { return; } - ... + // ... }

Congratulations! You now have a working tic-tac-toe game. And now you know the basics of React. So you're probably the real winner here.

@@ -505,7 +505,7 @@ { squares: [... x 9] }, - ... + // ... ]

We'll want the top-level Game component to be responsible for displaying the list of moves. So just as we pulled the state up before from Square into Board, let's now pull it up again from Board into Game – so that we have all the information we need at the top level.

@@ -521,7 +521,7 @@ xIsNext: true }; } - ... + // ... }

Then remove the constructor from Board and change Board so that it takes squares via props and has its own onClick prop specified by Game, like the transformation we made for Square earlier. You can pass the location of each square into the click handler so that we still know which square was clicked:

@@ -538,7 +538,9 @@ } else { status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O'); } -... + +// ... + <div className="game-board"> <Board squares={current.squares} @@ -584,7 +586,9 @@ </li> ); }); -... + +// ... + <ol>{moves}</ol>

For each step in the history, we create a list item <li> with a link <a> inside it that goes nowhere (href="#") but has a click handler which we'll implement shortly. With this code, you should see a list of the moves that have been made in the game, along with a warning that says