From 7d90ed3b7b137f0c96ef5423e2ce585e4d9e0253 Mon Sep 17 00:00:00 2001 From: Pyit Phyo Aung Date: Tue, 3 Oct 2017 09:44:12 +1300 Subject: [PATCH 1/2] Replace hyperlink tag with button tag in tic-tac-toe tutorial and update related references in the tutorial document --- docs/tutorial/tutorial.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/tutorial/tutorial.md b/docs/tutorial/tutorial.md index 37e3bbfcbaaad..e4e33591005d4 100644 --- a/docs/tutorial/tutorial.md +++ b/docs/tutorial/tutorial.md @@ -20,7 +20,7 @@ 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](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. -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. +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. 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 'Game start'; return (
  • - this.jumpTo(move)}>{desc} +
  • ); }); @@ -936,7 +936,7 @@ Let's show the previous moves made in the game so far. We learned earlier that R [View the current code.](https://codepen.io/gaearon/pen/EmmGEa?editors=0010) -For each step in the history, we create a list item `
  • ` with a link `` 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: +For each step in the history, we create a list item `
  • ` with a 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: > Warning: > 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 'Game start'; return (
  • - this.jumpTo(move)}>{desc} +
  • ); }); @@ -1000,7 +1000,7 @@ For our move list, we already have a unique ID for each step: the number of the [View the current code.](https://codepen.io/gaearon/pen/PmmXRE?editors=0010) -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. +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. First, add `stepNumber: 0` to the initial state in Game's `constructor`: @@ -1073,7 +1073,7 @@ Now you can modify Game's `render` to read from that step in the history: [View the current code.](https://codepen.io/gaearon/pen/gWWZgR?editors=0010) -If you click any move link now, the board should immediately update to show what the game looked like at that time. +If you click any move button now, the board should immediately update to show what the game looked like at that time. ### Wrapping Up From 3c0133d8846f0295c7725847af6b3083e9da4ec4 Mon Sep 17 00:00:00 2001 From: Pyit Phyo Aung Date: Tue, 3 Oct 2017 09:51:57 +1300 Subject: [PATCH 2/2] Update reference missed out in previous commit --- docs/tutorial/tutorial.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/tutorial.md b/docs/tutorial/tutorial.md index e4e33591005d4..72b2735bc04d4 100644 --- a/docs/tutorial/tutorial.md +++ b/docs/tutorial/tutorial.md @@ -936,7 +936,7 @@ Let's show the previous moves made in the game so far. We learned earlier that R [View the current code.](https://codepen.io/gaearon/pen/EmmGEa?editors=0010) -For each step in the history, we create a list item `
  • ` with a 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: +For each step in the history, we create a list item `
  • ` with a button `