Manage Complex Tic Tac Toe Game State in React
Instructor
Kyle Shevlin
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
- Mindtickle3 weeks agoWhat did you like about this course?
nice short, bite sized, unusual topic
- Learner2 years agoWhat did you like about this course?
Loved the brevity. A lot of times I don't want or need a ton of extra explanation, I just want to see how something works and the creation process. Really enjoyed the short format of this course.
- Learner2 years agoWhat did you like about this course?
Phenomenal. Amazing Engineer. Learned a lot.
- Jose3 years agoWhat did you like about this course?
Course is a great introduction into several topics. Highly recommend it.
- Zac Jones3 years agoWhat 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.
- Ak3 years agoWhat did you like about this course?
Simple project with really useful real life code nuggets. Thank you!
Course Content
You might also like these resources:
Introduction to Cloudflare Workers
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.
Create an eCommerce Store with Next.js and Stripe Checkout
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
Practical Git for Everyday Professional Use
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.