Learning React: Building 3 Interactive Games

While working on a long-term project, building an API for a video game database for Husband, I wanted to learn React for the front end. This mini-project serves as my learning experience with React, with apps of increasing difficulty.

(1) Tic tac toe tutorial

This Tic Tac Toe game is based on the official React Tic Tac Toe tutorial. At the end of the tutorial is a list of challenge improvements to the game, which I implemented here:

1. For the current move only, show “You are at move #…” instead of a button.
2. Rewrote Board to use two loops to make the squares instead of hardcoding them.
3. Added a toggle button to sort the moves in either ascending or descending order.
4. Highlighted the three squares that caused the win.
5. Displayed the location for each move in the format (Row, Col).

(2) My version

Obviously I had to change the color scheme, layout, etc! Here are the changes I made using React, specifically:

1. Changed how a win is indicated by highlighting the winning row/column/diagonal.
2. Added sound effects for X play, O play, X win, O win, and draw.
3. Added hover effects to empty squares (and buttons).
4. Added an indicator of the current move when going back in time.

(3) Next level: Connect Four

Here's my final challenge: a Connect Four game built using React!