React.js - Let's build a Tic Tac Toe game.

Helping you build your React.js portfolio

4.70 (66 reviews)

Udemy

platform

English

language

Web Development

What you will learn

How to build a Tic Tac Toe game

How to build a React application from using a HTML / CSS template

Proper way to structure components and state information in React

A way of reducing loops in your code by using hash maps in Javascript

How to use the useState React hook in a decently sized application

Why take this course?

In this short 2 hour course you will build out a simple 2 player Tic Tac Toe game using React.js. This will be built from the ground up, starting with creating your own new React application. Then breaking a simple HTML / CSS template into reusable functional React components. Lastly you'll also create and maintaining the necessary state needed for the game as well as writing the logic for calculating a win etc.

By doing this course you can add a full application to your portfolio, which can be incredibly helpful for getting a job in the industry. Plus you'll be able to play a few games of a classic puzzle game ;). The knowledge gained in this course will also see you up for slightly more advanced projects in the future. It is 2 hours long, however the detail given during this time can be used for future projects also. Not just this one.

Please note: This course is not for beginners. And will not spend much time talking about the basics of React. So it is suggested that you have at least a little bit of knowledge before taking the course. Overall it's a great refresher for those who understand the basics.

Content

Introduction

Tools and Resources

Creating our React application

Converting our template into components

Adding our game template

Creating the game component

Creating the board component

Creating the cell component

Component display logic

Populating cell content

Setting cell dynamic classes

Creating cells from dynamic data

Highlighting winning cells dynamically

Lifting game state

Making the game interactive

Configuring cell clicks

Populating cells on click

Changing turns

Prevent overwriting cells

Configuring the Game Over screen.

Creating the result modal component

Controlling modal display from the game.

Setting up game over state

Determining the game result

Setting up the calculate winner function

Calculating a winner

Calculating a tie

Adding the finishing touches

Showing the game's result

Fixing the winning combinations

Starting a new game

Conclusion

BONUS CONTENT: OTHER COURSES

Screenshots

React.js - Let's build a Tic Tac Toe game. - Screenshot_01

React.js - Let's build a Tic Tac Toe game. - Screenshot_02

React.js - Let's build a Tic Tac Toe game. - Screenshot_03

React.js - Let's build a Tic Tac Toe game. - Screenshot_04

Reviews

Kawthar

April 27, 2022

it was great! i had a little bit of trouble but i managed to fix them thank you and please make more courses

Michail

October 2, 2021

Good in that it shoots straight to the commonly used React concepts. Of course one should read additionally about some of the stuff shown here, as it is a short course. Thanks

Laurence

March 21, 2021

As a free React-helper course, this can't be faulted! Thank you very much for making it available. ???

Greg

November 25, 2020

I already have some programming experience, but not so much with react. I found the majority of the explanations easy to follow an understand. I also enjoyed the project based learning and development that so many other educators fail to provide.

Alex

November 1, 2020

This guy's course is better than so many of the paid courses. Instead of wasting 36 hours of our time listening to what we can read in docs, by making this tic tac toe react app, I can learn how react works in a very short amount of time. Great guy, great explanation, great work. I would definitely buy if theres more content like this

Charts

Price

Rating

Enrollment distribution

React.js - Let's build a Tic Tac Toe game. - Distribution chart