In this lab, you'll implement a Tic Tac Toe game where you will respond to state changes in React amd rendering React components.
One upon a time, long before Virtual Reality, Pokemon Go and World of Warcraft, people used to play games on "physical" paper with "real" pencils. One of those games was Tic-tac-toe.
Tic-tac-toe is a really simple paper-and-pencil game for two players. Each turn, one of the players (X or O) marks a space in a 3x3 grid. The first player to place three marks in a vertical, horizontal, or diagonal row wins.
In this lab we're going to implement such a game. Our app should allow us to place Xs and Os on the playing field. Once a player succeeds by placing three of their marks in a row, an alert should appear and the playing field should be reset.
This is how our final application is going to look like:
There are four different components:
The game component represents the application as a whole. It is the only stateful component. The initial state of the Game component should encode the following information:
-
board, e.g.[null, 'x', null, null, null, null, null, null, null]The
boardstate represents the current state of the Tic Tac Toe game. Each item in the array stands for one field.nullmeans a player can mark the field,Xmeans theXplayer marked the field etc. -
turn, e.g.XorO.If
turnisX, then it's currentlyX's turn. IfturnisO, then it's currentlyO's turn.
The board component is a pure component. It consists of exactly nine Fields and accepts the board prop. It renders the actual Tic Tac Toe board.
The status component can be seen in the above screenshot as the gray box. It notifies the user about the current state of the game (Tie / X won / O won).
- Tic Tac Toe image by Symode09 — Own work, Public Domain