Manage Complex Tic Tac Toe Game State in React
Offered By: egghead.io
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.
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
Software as a ServiceUniversity of California, Berkeley via Coursera Intro to Computer Science
University of Virginia via Udacity Web Development
Udacity Software Engineering for SaaS
University of California, Berkeley via Coursera CS50's Introduction to Computer Science
Harvard University via edX