Let me start the article with a cliché: Programming is learnt by practice. It is an oldie, but goodie. OK! I stop here. Two cliché for one article is more than enough.
Like many front-end developers, I also decided to take my chances with React and I wanted to push myself with some ambitious example where Firebase database and many other things involve, but after a while, I paused this project and aimed for some assisted tutorial.
At this point, I came across a tutorial on React’s official webpage. It is a tic-tac-toe game and the tutorial process goes quite smooth. The steps that you follow help you see the philosophy of React and shows you the way of doing things in a smart way.
Even though you only type what the mentor is asking you to do, this tutorial is still handy, because it gives you room to practice. And the exciting thing about the tic-tac-toe tutorial is the TO-DO list at the end of the lesson. These tasks encouraged me to enhance the game and I am currently down with the first three. See the full list of tasks below:
- Display the location for each move in the format (col, row) in the move history list.
- Bold the currently selected item in the move list.
- Rewrite Board to use two loops to make the squares instead of hardcoding them.
- Add a toggle button that lets you sort the moves in either ascending or descending order.
- When someone wins, highlight the three squares that caused the win.
- When no one wins, display a message about the result being a draw.
In this article, I assume that you have already followed the tutorial till the end and if you struggles with one of these tasks, I will share my solutions with you. Also, if you think my suggestion is not good enough, let me know how I can improve it.
Task #1 Display the location for each move in the history list.
As expected, we start with the simplest one. The challenging part here is to decide how column and row values should be stored and I hope you guess the answer already. Yes! We should create two new attributes inside this.state.history (Game.js). See the constructor below:
Certainly, that much is not enough. We should make some changes inside handleClick(…) as well. Each time a player clicks on the board, handleClick function is triggered. The changes below shows how we calculate the row and column values via array index.
And we should also store the coordinate values for each move inside this.history.state. To do that, we make some modifications in history.concat(…).
We are almost done. Currently, our tic-tac-toe game is able to save each move’s coordinates, but it doesn’t output to the user. Therefore, we will simply benefit those values inside the render.
That was it. If you’d like to check this commit, click here. And the gif below shows the current outcome.
Task #2 Bold the currently selected item in the move list.
Task number 2 challenged me a bit. It was actually easy to fix, but I didn’t feel peaceful after my first commit. I was sure that I should find my way through this.state.stepNumber, but my solution had some code duplication. See the first commit below:
As you see above, I compare the current move index with the stepNumber and add some CSS class inside the render. (selectedMove = fontWeight: bold) I apparently didn’t know what to do with the second <li> block. Also, this commit caused showing bold text on latest move as well. That wasn’t what I was expected to do. I should’ve shown the last clicked button with bold text, not the latest one all the time. See the result gif of the first commit:
I got a better idea on the next day. Why not using a variable for the className? And also ignoring the CSS where history.length equals the current move number? I reorganised the code accordingly. See the commit here:
And the output is nicer 🙂 Now the move becomes bold only when the user clicks on it and the code has no redundant duplications.
Task #3 Rewrite Board to use two loops …
To solve this problem, I needed to get some help from Google, because I didn’t know how to return html code from a function. Let us remember how our Board.js rendering was implemented:
Apparently, the code snippet above does not promise any flexibility and it is a trap for typos. (It happened to me 🙂 See it here)
So, we clearly need a function inside Board.js to help render look tidy. Therefore, I wrote a new function called createTheBoard(). We go through the rows and columns to render the squares and at the end, an array of html content is returned. See the last commit here.
I highly recommend to start with the default tutorial page of React. For example, learning that “this.state should be considered as private to a React component that it’s defined in” was a huge enlightenment for me.
Tic-tac-toe tutorial will help you understand fundamental concepts of React world and it also gives you room for improvement. I will hopefully solve the following tasks (#4, #5, #6) soon and post it. Until then, ha det bra!
Sercan Leylek / OSLO