Manage Complex Tic Tac Toe Game State in React

Overview

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.
This course shows you a solid pattern for managing complex state while you build a fun project. Emotion has been updated to work with v11.

Syllabus

Create a 2-Dimensional Grid for our Tic-Tac-Toe Game
Map Over a 2-Dimensional Array to Create a Game Grid in React with CSS Grid
Convert a 3x3 Tic-Tac-Toe Grid Interactive by Adding Buttons in React
Handle User Input by Adding State to the Tic-Tac-Toe Grid with React useReducer
Reset React State with a Button and Function in our Tic-Tac-Toe Game
Check for Winning Conditions in React useReducer for Tic-Tac-Toe
Prevent Impossible States and Check for Draw Conditions with Guard Statements in React