Hey guys

This video is a tic tac toe course written in React.js. It’s part of a free course I did on Udemy / Skillshare. However I have decided that it’s probably worthy of publishing on YouTube. So here it is.

Please note: The gist used in this video can be found at https://gist.github.com/lyraddigital/452de5248778c6075c4604130661a42c

This course takes you through the steps of how to build a Tic Tac Toe game in React js from start to finish. You will learn as part of this react project some of the basics of React. This will include some react hooks such as useState etc. You will also know how to split a template into different react components.

Here are the key moments of the video.

00:00 Introduction
00:37 Tools and Resources
02:35 Creating our React project
05:07 Adding our game template
14:13 Creating the game component
18:01 Creating the board component
21:16 Creating the cell component
24:24 Populating cell content
29:00 Setting cell dynamic classes
39:00 Creating cells from dynamic data
43:23 Highlighting winning cells dynamically
47:53 Lifting game state
50:03 Configuring cell clicks
55:13 Populating cells on click
01:00:34 Changing turns
01:03:02 Prevent overwriting cells
01:05:33 Creating the result modal component
01:11:16 Controlling modal display from the game
01:15:08 Setting up game over state
01:17:39 Setting up the calculate winner function
01:21:52 Calculating a winner
01:35:06 Calculating a tie
01:39:41 Showing the game’s result
01:44:49 Fixing the winning combinations
01:47:38 – Starting a new game
01:51:32 – Outro

Enjoy the mini course

Daryl

source