Udemy

Platform

English

Language

Web Development

Category

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

Helping you build your React.js portfolio

4.40 (33 reviews)

Students

2 hours

Content

Oct 2020

Last Update
Regular Price

BLUE HOST
Blue Host
Fast, easy, and secure WordPress hosting in minutes + 1 free domain name
65%OFF : $2.95/month

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


Description

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.

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.


Screenshots

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

Content

Introduction

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

Conclusion

BONUS CONTENT: OTHER COURSES


Reviews

L
Laurence21 March 2021

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

G
Greg25 November 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.

A
Alex1 November 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


3576427

Udemy ID

10/18/2020

Course created date

10/30/2020

Course Indexed date
Angelcrc Seven
Course Submitted by