illustration for Manage Complex Tic Tac Toe Game State in React
pro

Manage Complex Tic Tac Toe Game State in React

Instructor

Kyle Shevlin
24m closed-captioning
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
4.6
213
people completed
Published a year ago
|
Updated 5 months 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

Learner Reviews

  • Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Course is a great introduction into several topics. Highly recommend it.

    Jose
    5 months ago
  • Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Really great course! Loved the example that was used and the patterns that Kyle fit in like creating state 'clones' with JSON parse and stringify as well as the Enum trick to switch turns.

    Zac Jones
    5 months ago
  • Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Simple project with really useful real life code nuggets. Thank you!

    Ak
    7 months ago
  • Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Tons of handy tips and tricks. I have trouble going from theory to practice. This was a great exercise. Thanks all

    Ian Doyle
    10 months ago

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.