React Tic Tac Toe

This week Andrew Koerner went over the beginning steps to create a tic-tac-toe game using React. The first step he briefly went over was setting up the CSS classes to be used for the different elements of the game. Then he went on to use those classes when setting up the divs to create three rows with three squares each. Next he created a function to put the Xs and Os on the board when a square is clicked which required importing useState so that he could set up each square with a null state to eventually be populated with an X or an O. To decide if an X or an O is needed he set up a variable XIsNext and changed the value after each click in order to switch between Xs and Os being placed on the board. He also added logic to check if the square clicked was already populated to ensure that players would not be able to overwrite someone else’s move.

After some questions arose about whether it would be possible to use a different variable instead of relying on states he set up a test and showed that it did not work as intended so he reverted back to using states. At the end Andrew talked about how at the next Knowledge Exchange we would go over logic for how to determine if a player won and the message and board reset that would go along with that.