React.Js - Let'S Build A Tic Tac Toe Game.

Helping you build your React.js portfolio

What you'll 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

Requirements

A basic level of understand of React is preferred

A reasonable understand of HTML, Javascript and CSS

Node and NPM must be installed at a minimum

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.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.

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 Tools and Resources

Lecture 3 Creating our React application

Section 2: Converting our template into components

Lecture 4 Adding our game template

Lecture 5 Creating the game component

Lecture 6 Creating the board component

Lecture 7 Creating the cell component

Section 3: Component display logic

Lecture 8 Populating cell content

Lecture 9 Setting cell dynamic classes

Lecture 10 Creating cells from dynamic data

Lecture 11 Highlighting winning cells dynamically

Lecture 12 Lifting game state

Section 4: Making the game interactive

Lecture 13 Configuring cell clicks

Lecture 14 Populating cells on click

Lecture 15 Changing turns

Lecture 16 Prevent overwriting cells

Section 5: Configuring the Game Over screen.

Lecture 17 Creating the result modal component

Lecture 18 Controlling modal display from the game.

Lecture 19 Setting up game over state

Section 6: Determining the game result

Lecture 20 Setting up the calculate winner function

Lecture 21 Calculating a winner

Lecture 22 Calculating a tie

Section 7: Adding the finishing touches

Lecture 23 Showing the game's result

Lecture 24 Fixing the winning combinations

Lecture 25 Starting a new game

Section 8: Conclusion

Lecture 26 Conclusion

Lecture 27 BONUS CONTENT: OTHER COURSES

React Developers looking to take on a reasonably sized project that isn't too complex,Developers who are keen on adding a project to their portfolio,Any developer that wants to know how to build a Tic Tac Toe game