Manage Complex Tic Tac Toe Game State in React
Kyle Shevlin
- react
>=16.8.6 - javascript
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
You might also like these resources:
Learn how to make a fully functioning Tic Tac Toe game that doesn't need any client-side JavaScript!
Learn Hooks by taking a modern React codebase that uses classes and refactor the entire thing to use function components as much as possible.
This course gets you up and running with react in under a minute by using codesandbox.io to skip the painful process of setting up your dev environment.