React Project

Tic-Tac-Toe Game

Project Overview

This project is a classic tic-tac-toe game built using the React framework, developed as part of a web development course at Northeastern University. I enjoy learning to code through game development, so I chose to showcase this project.

By leveraging component-based design, each part of the game (board, squares, game status) is modularized, making the code structure clear, maintainable, and extendable. Users can interact with the game by clicking on the squares to make their moves and see the game status and results in real-time.


Main Components in App.js

Tic-Tac-Toe Game

1. Square Component

The Square component represents each square in the game. It is a functional component that takes two props: the value of the square (value) and the click event handler (onSquareClick). By passing the click event handler, the Square component can trigger the corresponding logic when a user clicks on it.

2. Board Component

The Board component manages the layout and logic of the entire game board. It receives the current player (xIsNext), the board state (squares), and a function to update the board state (onPlay) as props. The Board component contains the logic for handling square clicks and displays the current player or game winner based on the game state. The board is divided into three rows, each containing three Square components, creating the tic-tac-toe grid.

3. Game Component

The Game component is the top-level component responsible for managing the game's history and current state. It maintains an array of board state history (history) and the current move number (currentMove). When a user clicks a square, the Game component updates the history and current state, and provides functionality for users to jump to any previous step in the game. By rendering the Board component and the game history, the Game component completes the game's display and interaction.

4. Game State Management

By using React's useState hook, the project achieves state management for the game. Each step's board state and current move number are stored in state variables and updated upon user actions. This allows the game to dynamically respond to user input and re-render based on state changes.


Styling

Tic-Tac-Toe Game

The styling of the project adopts a clean and intuitive design, defined through CSS. The entire page uses a black background and white text, with a retro game font. The board and squares are meticulously styled, adding hover and click animations to enhance the user experience.