@samitouri / QOS-React-2 / commits / 85b59d2fc9

Replace hyperlink tag with button tag in tic-tac-toe tutorial and update related references in the tutorial document (#11045)

pyitphyoaung committed Oct 4, 2017 at 04:48 UTC 85b59d2fc96a286271f6b4ad126bca72871ac9bc

1 file changed +6 -6

docs/tutorial/tutorial.md

+6 -6

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

21 If you like, you can check out the final result here: [Final Result](https://codepen.io/gaearon/pen/gWWZgR?editors=0010). 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.

23 -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.

23 +Try playing the game. You can also click on a button in the move list to go "back in time" and see what the board looked like just after that move was made.

25 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.

@@ -905,7 +905,7 @@ Let's show the previous moves made in the game so far. We learned earlier that R

905 'Game start';

906 return (

907 <li>

908 - <a href="#" onClick={() => this.jumpTo(move)}>{desc}</a>

908 + <button onClick={() => this.jumpTo(move)}>{desc}</button>

909 </li>

910 );

911 });

@@ -936,7 +936,7 @@ Let's show the previous moves made in the game so far. We learned earlier that R

936

937 [View the current code.](https://codepen.io/gaearon/pen/EmmGEa?editors=0010)

938

939 -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:

939 +For each step in the history, we create a list item `<li>` with a button `<button>` inside it that 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:

940

941 > Warning:

942 > Each child in an array or iterator should have a unique "key" prop. Check the render method of "Game".

@@ -992,7 +992,7 @@ For our move list, we already have a unique ID for each step: the number of the

992 'Game start';

993 return (

994 <li key={move}>

995 - <a href="#" onClick={() => this.jumpTo(move)}>{desc}</a>

995 + <button onClick={() => this.jumpTo(move)}>{desc}</button>

996 </li>

997 );

998 });

@@ -1000,7 +1000,7 @@ For our move list, we already have a unique ID for each step: the number of the

1000

1001 [View the current code.](https://codepen.io/gaearon/pen/PmmXRE?editors=0010)

1002

1003 -Clicking any of the move links throws an error because `jumpTo` is undefined. Let's add a new key to Game's state to indicate which step we're currently viewing.

1003 +Clicking any of the move buttons throws an error because `jumpTo` is undefined. Let's add a new key to Game's state to indicate which step we're currently viewing.

1004

1005 First, add `stepNumber: 0` to the initial state in Game's `constructor`:

1006

@@ -1073,7 +1073,7 @@ Now you can modify Game's `render` to read from that step in the history:

1073

1074 [View the current code.](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)

1075

1076 -If you click any move link now, the board should immediately update to show what the game looked like at that time.

1076 +If you click any move button now, the board should immediately update to show what the game looked like at that time.

1077

1078 ### Wrapping Up

1079