YoVDO

Manage Complex Tic Tac Toe Game State in React

Offered By: egghead.io

Tags

React Courses Web Development Courses Game Development Courses CSS Grid Courses

Course Description

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

Taught by

Kyle Shevlin

Related Courses

Software as a Service
University of California, Berkeley via Coursera
Intro to Computer Science
University of Virginia via Udacity
Web Development
Udacity
Software Engineering for SaaS
University of California, Berkeley via Coursera
CS50's Introduction to Computer Science
Harvard University via edX