Tic Tac Toe is a classic game that has a relatively simple win condition. Get three of your pieces to line up in a row on a 3x3 grid-style board and you win, and also prevent your opponent from doing so.

This makes the game a great challenge to represent as code. 

In this course, you will start with a blank create-react-app application, learn how to build a 3x3 grid (with CSS Grid), and power that grid so that you can take turns with another person and play tic tac toe. 

You'll model the game state as a multidimensional array where you will manage and update that state with `useReducer`


Tic-tac-toe, like many grid-based games, relies upon a 2-dimensional array data structure to hold the state of our `grid`.

A `grid` is a matrix. The outer array contains all the `rows`, and each row is an array of `columns`. Often each column value is referred to as a `cell`. In tic-tac-toe, we create a 3x3 grid of `null` values that will be replaced with `X`s and `O`s as the user interacts with the game.

Create a 2-Dimensional Grid for our Tic-Tac-Toe Game

Our tic-tac-toe UI has to display our `grid` data. Using CSS Grid to do so is :chefs_kiss:. We'll create `Grid` and `Cell` components to handle our data. The `Grid` component will map our `rows` and `columns` and use the CSS Grid layout engine to correctly place them. We'll make our grid generically handle any amount of rows and columns we would throw at it. We'll use a simple trick with the `grid-gap` property to easily create the crossing lines of a tic-tac-toe game.

Map Over a 2-Dimensional Array to Create a Game Grid in React with CSS Grid

A game a user can't interact with is hardly a game at all. We'll go through the process of turning our `Cell` components into accessible buttons and moving the click handling function up to our `Game` component where our state will eventually be handled.

Convert a 3x3 Tic-Tac-Toe Grid Interactive by Adding Buttons in React

In order to update our UI when a user interacts with the buttons, we need to store and update the tic-tac-toe `grid` data somehow. We're going to use the `React.useReducer` hook to accomplish this.

With this hook, we are able to store some data (including our grid) and define `actions` that update that data. We'll work on adding a `CLICK` case to our `reducer` that will update the `grid` with either an `X` or an `O` according to whose `turn` it is.

Handle User Input by Adding State to the Tic-Tac-Toe Grid with React useReducer

Our tic-tac-toe board works and can be played, but it can't be reset once the game is won or the board is full. Adding this is simple. We'll add another case to our `reducer` and use a function to regenerate the `initialState` of our game.

Reset React State with a Button and Function in our Tic-Tac-Toe Game

At this point, our game is fully usable. Users can add `X`s and `O`s and can see for themselves who has won or not. However, this is a computer game now and it should be programmed to determine who the winner is algorithmically.

Breaking down the problem of tic-tac-toe, one will realize that there are only 8 winning conditions in the game. We can create a handful of functions that will `checkForWin` when a square is clicked. Once we have determined the winner, we can update the UI to announce that to the users.

Check for Winning Conditions in React useReducer for Tic-Tac-Toe

We should add some final touches to our tic-tac-toe game. We want to make sure that after a user has won, that it's impossible for them to put the game into a broken state. We can do that by adding a guard to our `reducer`.

It would also be nice if the board automatically reset in the result of a draw. We can add a `checkForDraw` function that algorithmically determines if the game is drawn or not and automatically reset the `grid` data.

Manage Complex Tic Tac Toe Game State in React

Instructor

Course Content