• Post category:StudyBullet-7
  • Reading time:5 mins read


Helping you build your React.js portfolio

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.

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.


Get Instant Notification of New Courses on our Telegram channel.


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.

English
language

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