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
HTML5 and CSS FundamentalsWorld Wide Web Consortium (W3C) via edX Build Responsive Real-World Websites with HTML and CSS
Udemy HTML5 & CSS3 Course: Build Responsive Websites from Scratch
Udemy Advanced CSS and Sass: Flexbox, Grid, Animations and More!
Udemy Modern HTML & CSS From The Beginning 2.0 (2024 Revamp)
Udemy