illustration for Manage Complex Tic Tac Toe Game State in React

Manage Complex Tic Tac Toe Game State in React


Kyle Shevlin

24m closed-captioning
7 lessons
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
people completed
Published 4 years ago
Updated 3 years ago

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.

What you'll learn:

  • Utilize guard statements to check for wins and ties
  • Pass handleClick functions into a child component to modify parent state
  • Keep state immutable by cloning and returning new state
  • Utilize data structures effectively

Course Content

24m • 7 lessons

    You might also like these resources:

    illustration for Introduction to Cloudflare Workers
    Kristian Freeman・36m・Course

    Become familiar with the Workers CLI wrangler that we will use to bootstrap our Worker project. From there you'll understand how a Worker receives and returns requests/Responses. We will also build this serverless function locally for development and deploy it to a custom domain.

    illustration for Create an eCommerce Store with Next.js and Stripe Checkout
    Colby Fayock・1h 4m・Course

    This is a practical project based look at building a working e-commerce store using modern tools and APIs. Excellent for a weekend side-project for your developer project portfolio

    illustration for Practical Git for Everyday Professional Use
    Trevor Miller・1h・Course

    git is a critical component in the modern web developers tool box. This course is a solid introduction and goes beyond the basics with some more advanced git commands you are sure to find useful.