Tic-Tac-Toe: Building In React
by Taylor White
8th February, 2019
I’ve decided finally to get up to speed on current stacks and development processes like using npm to build and deploy applications, and this tutorial was my first adventure into the forest.
Below is a (not terribly) detailed journaling of my thoughts as I went through the tutorial.
January 5, 2019
Today I’ve decided to start learning react. I googled “build a react app tutorial”, and found https://reactjs.org/tutorial/tutorial.html.
January 6, 2019
10:57 AM –
Electrocuted my hands and watched some of the second season of West World with my roommates, back at the React tutorial (and by back at, I mean the start) now.
11:31 AM –
After about 20 minutes of scrolling through and setting up via installing Node.js, and the babble syntax highlighter, I’m ready to get going.
I’ve got the code all downloaded and hosted via npm-start, and am making it through the tic tac toe tutorial.
Surprisingly no feeling of spinning my wheels, unknown issues, or lack of understanding. JSX makes sense to me, though “passing” parameters is one aspect I find too opaque and not transparent to the component.
I’m starting on state now.
2:44 PM –
Ran into my first weird behavior I have stumbled on since starting the tutorial. In the controlled components where I’ve moved up the squares array into the state of the board, each click would move the X rather than add a new one, which is not what I expected.
2:58 PM –
After some lolligagging and debugging, I realized that in the click handler of the square, I used “squares.splice” rather than “squares.slice” so the array was being wiped out erroneously.
5:43 PM –
I’ve been working on the React tutorial pretty solidly all day today. I’m just about wrapped up. Pretty interesting stuff. It’s been very easy to recreate and step through the game using the history of the moves. I love the immutable concept and being able to step through like that.
It feels like a way less buggy way to program, and I cannot believe how few lines of code it took.
I’m amazed at how simplistic the structure of react really is. I don’t feel I have the most solid grasp on it quite yet, evidenced by struggling to complete even some of the more basic challenges (generate the blocks via looping for instance) the authors posed at the end of the tutorial:
- 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.
…I did eventually do all of these and a few more (it’s a labor of love after all), but I don’t fully understand when to use arrows vs. the this object, which seemed to be a pretty important concept.