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

HTML5 and CSS Fundamentals
World Wide Web Consortium (W3C) via edX
Build Responsive Real-World Websites with HTML and CSS
Udemy
HTML5 & CSS3 Course: Build Responsive Websites from Scratch
Udemy
Advanced CSS and Sass: Flexbox, Grid, Animations and More!
Udemy
Modern HTML & CSS From The Beginning 2.0 (2024 Revamp)
Udemy