Building A Simple React Tic-Tac-Toe Game: A Beginner's Guide

In the world of web development, React JS has become a cornerstone for building dynamic and interactive user interfaces. Its component-based architecture and efficient rendering make it a favorite among developers of all levels. But where do you begin if you’re just starting out? One of the best ways to learn React is by building small projects. This hands-on approach allows you to grasp the core concepts while creating something tangible. In this guide, we’ll walk through the process of building a classic Tic-Tac-Toe game using React. This project is perfect for beginners, providing a solid foundation in React fundamentals like components, state management, and event handling.

Why Build a Tic-Tac-Toe Game?

Tic-Tac-Toe is an ideal project for several reasons:

Simplicity: The game’s rules are straightforward, allowing you to focus on learning React without getting bogged down in complex logic.
Core Concepts: It involves essential React concepts like state, props, and event handling.
Visual Feedback: The game provides immediate visual feedback, making it easy to see the results of your code.
Progressive Learning: You can incrementally add features, such as AI opponents or game history, to challenge yourself further.

By building this game, you’ll gain a practical understanding of how React works, making it easier to tackle more complex projects in the future. Plus, you’ll have a fun game to show off!

Setting Up Your React Project

Before we dive into the code, you’ll need to set up your React development environment. We’ll use Create React App, a popular tool that simplifies the setup process. If you have Node.js and npm (Node Package Manager) installed, you can create a new React project with a single command:

npx create-react-app tic-tac-toe-react
cd tic-tac-toe-react

This command creates a new directory named “tic-tac-toe-react” with all the necessary files and dependencies. Once the installation is complete, navigate to the project directory using the “cd” command. Now, start the development server:

npm start

This will open your React app in your default web browser, usually at http://localhost:3000. You should see the default React welcome screen. Now, it’s time to start building our Tic-Tac-Toe game!

Project Structure and Components

Our Tic-Tac-Toe game will be composed of several components. Components are reusable building blocks of a React application. Here’s a breakdown of the components we’ll create:

Square: Represents a single square on the Tic-Tac-Toe board. It will render a button and display either an “X”, an “O”, or nothing.
Board: Represents the entire Tic-Tac-Toe board. It will render nine Square components and manage the game’s state (who’s turn it is, and the values of each square).
Game: The top-level component that renders the Board and displays game information, such as the current player and the game’s status (winner or draw).

Let’s start by modifying the default “App.js” file created by Create React App. We’ll start with the Square component.

Creating the Square Component

Create a new file called “Square.js” in the “src” directory. This component will render a single square on the board. The code will look like this:

import React from 'react';

function Square(props) {
  return (
    <button>
      {props.value}
    </button>
  );
}

export default Square;

Let’s break down the code:

Import React: We import the React library to use its features.
Functional Component: We define a functional component called “Square”. React functional components are JavaScript functions.
Props: The “props” object contains data passed to the component from its parent. In this case, we’ll pass in the square’s value (X, O, or null) and a function to handle clicks.
JSX: We use JSX (JavaScript XML) to describe the UI. Here, we render a button with a class name “square”. The button’s text is determined by “props.value”.
onClick: The “onClick” prop is assigned a function from the parent, which is called when the button is clicked.
Export: We export the “Square” component so it can be used in other components.

Next, we need to add some basic CSS to style the squares. Create a file called “Square.css” in the “src” directory, and add the following CSS:

.square {
  width: 75px;
  height: 75px;
  background: #fff;
  border: 2px solid #333;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  outline: none;
}

.square:hover {
  background: #eee;
}

Import the CSS file into “Square.js” by adding the following line at the top:

import './Square.css';

Building the Board Component

Now, let’s create the “Board” component. This component will render the nine “Square” components and manage the state of the board. Create a new file called “Board.js” in the “src” directory, and add the following code:

import React, { useState } from 'react';
import Square from './Square';

function Board() {
  const [squares, setSquares] = useState(Array(9).fill(null));
  const [xIsNext, setXIsNext] = useState(true);

  const handleClick = (i) => {
    const newSquares = [...squares];
    if (calculateWinner(newSquares) || newSquares[i]) {
      return;
    }
    newSquares[i] = xIsNext ? 'X' : 'O';
    setSquares(newSquares);
    setXIsNext(!xIsNext);
  };

  const winner = calculateWinner(squares);
  let status;
  if (winner) {
    status = 'Winner: ' + winner;
  } else {
    status = 'Next player: ' + (xIsNext ? 'X' : 'O');
  }

  const renderSquare = (i) => {
    return (
       handleClick(i)}
      />
    );
  };

  return (
    <div>
      <div>{status}</div>
      <div>
        {renderSquare(0)}{renderSquare(1)}{renderSquare(2)}
      </div>
      <div>
        {renderSquare(3)}{renderSquare(4)}{renderSquare(5)}
      </div>
      <div>
        {renderSquare(6)}{renderSquare(7)}{renderSquare(8)}
      </div>
    </div>
  );
}

function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}

export default Board;

Let’s break down this code:

Import React and useState: We import React and the “useState” hook. The “useState” hook allows us to manage state within a functional component.
Import Square: We import the “Square” component we created earlier.
useState: We use “useState” to manage two pieces of state:
- squares: An array of 9 elements, representing the values of the squares on the board. Initially, all squares are set to “null”.
- xIsNext: A boolean value indicating whose turn it is. Initially, it’s set to “true” (X goes first).
handleClick: This function is called when a square is clicked. It updates the “squares” state based on the current player and the square that was clicked. It also calls the “calculateWinner” function to check for a winner and switches to the next player.
calculateWinner: This function checks if there’s a winner based on the current state of the board. It defines all possible winning lines and checks if any of them are filled by the same player.
renderSquare: This function renders a single “Square” component. It passes the square’s value and the “handleClick” function as props.
JSX: We use JSX to render the board. We create three rows of three “Square” components each, using the “renderSquare” function to render each square. We also display the game status (who’s turn it is or the winner).

We’ll also need some CSS for the board. Create a file called “Board.css” in the “src” directory, and add the following CSS:

.board-row {
  display: flex;
  flex-direction: row;
}

.square {
  border: 2px solid #333;
  width: 75px;
  height: 75px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  background-color: #fff;
  outline: none;
}

.square:hover {
  background-color: #eee;
}

.status {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: bold;
}

Import the CSS file into “Board.js” by adding the following line at the top:

import './Board.css';

Putting it all together: The Game Component

Now, let’s create the “Game” component. This is the top-level component that will render the “Board” component and display game information. Modify the “App.js” file (or create a new “Game.js” file and update the import in “App.js”) with the following code:

import React from 'react';
import Board from './Board';
import './App.css';

function Game() {
  return (
    <div>
      <div>
        
      </div>
      <div>
        {/* Add game info here */}
      </div>
    </div>
  );
}

export default Game;

Let’s break down this code:

Import React and Board: We import React and the “Board” component.
JSX: We use JSX to render the game. We create a container with class name “game”. Inside the container, we render the “Board” component. We also create a container with class name “game-info” for future game information.

We’ll also need some CSS for the game container. Add the following CSS to your “App.css” file (or create a new “Game.css” and import it into “Game.js”) :

.game {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
}

.game-board {
  margin-bottom: 20px;
}

.game-info {
  /* Add game info styling here */
}

Finally, update your “App.js” file to render the “Game” component instead of the default React content:

import React from 'react';
import Game from './Game';
import './App.css';

function App() {
  return (
    
  );
}

export default App;

Now, run your React app (npm start), and you should see a working Tic-Tac-Toe board! You can click the squares to make your moves. Currently, there is no winner detection, but the basic game flow is there.

Adding Winner Detection

The core logic for winner detection is already implemented in the “calculateWinner” function within the “Board” component. However, it’s not being used yet. We need to modify the “Board” component to display the winner or declare a draw. We’ll also add a button to reset the game.

Modify the “Board.js” file by updating the “handleClick” and the status display logic:

import React, { useState } from 'react';
import Square from './Square';
import './Board.css';

function Board() {
  const [squares, setSquares] = useState(Array(9).fill(null));
  const [xIsNext, setXIsNext] = useState(true);

  const handleClick = (i) => {
    const newSquares = [...squares];
    if (calculateWinner(newSquares) || newSquares[i]) {
      return;
    }
    newSquares[i] = xIsNext ? 'X' : 'O';
    setSquares(newSquares);
    setXIsNext(!xIsNext);
  };

  const winner = calculateWinner(squares);
  let status;
  if (winner) {
    status = 'Winner: ' + winner;
  } else if (squares.every(square => square !== null)) {
    status = 'Draw!';
  } else {
    status = 'Next player: ' + (xIsNext ? 'X' : 'O');
  }

  const renderSquare = (i) => {
    return (
       handleClick(i)}
      />
    );
  };

  const resetGame = () => {
    setSquares(Array(9).fill(null));
    setXIsNext(true);
  };

  return (
    <div>
      <div>{status}</div>
      <div>
        {renderSquare(0)}{renderSquare(1)}{renderSquare(2)}
      </div>
      <div>
        {renderSquare(3)}{renderSquare(4)}{renderSquare(5)}
      </div>
      <div>
        {renderSquare(6)}{renderSquare(7)}{renderSquare(8)}
      </div>
      <button>Reset Game</button>
    </div>
  );
}

function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}

export default Board;

Here’s what changed:

Draw Detection: We added a check within the status logic to determine if the game is a draw. We use the “every” method to check if all squares are filled.
Reset Button: We added a “Reset Game” button that calls a “resetGame” function when clicked.
resetGame Function: This function resets the “squares” state to an array of nine “null” values and sets “xIsNext” to “true”, starting a new game.

Now, the game will display the winner (X or O) or a “Draw!” message, and you can reset the game to play again.

Common Mistakes and How to Fix Them

As a beginner, you might encounter some common mistakes while building this project. Here are a few and how to address them:

Incorrect State Updates: When updating state, always create a copy of the existing state using the spread operator (“…”) before modifying it. Directly modifying state can lead to unexpected behavior and is generally discouraged in React.
Forgetting to Import Components: Ensure you import all the necessary components (e.g., “Square”, “Board”) into the files where you use them.
Incorrect CSS Styling: Double-check your CSS class names and ensure they match the class names used in your JSX. Use your browser’s developer tools to inspect the elements and see if the CSS styles are being applied.
Issues with Event Handling: Make sure you’re passing the correct arguments to your event handler functions (e.g., “onClick”). If you’re having trouble with event handling, try using “console.log” to debug and see what values are being passed.
Forgetting the Return Statement: All React components, whether functional or class-based, must return something. This is usually JSX, but it can also be null. Make sure your components have a return statement.

Adding More Features (Optional)

Once you’ve built the basic game, you can add more features to challenge yourself and further your React skills. Here are some ideas:

Game History: Implement a game history feature that allows players to see previous moves and go back in time to undo moves. This involves managing an array of game states.
AI Opponent: Create an AI opponent that can play against the user. This can be as simple as random moves or more complex with algorithms like minimax.
Scoreboard: Add a scoreboard to track the number of wins for each player.
Difficulty Levels: Allow the user to select different difficulty levels for the AI opponent.
Animations: Add animations for moves or when a player wins.
Responsive Design: Make the game responsive so it looks good on different screen sizes.

Summary / Key Takeaways

In this guide, we’ve walked through building a complete Tic-Tac-Toe game using React. You’ve learned about components, state management using the “useState” hook, event handling, and how to structure a simple React application. By completing this project, you’ve gained a practical understanding of React fundamentals, which is crucial for building more complex and interactive web applications. Remember to experiment with the code, add features, and try to understand the underlying concepts. The more you practice, the more comfortable you’ll become with React.

This project is an excellent starting point for anyone learning React. Building the Tic-Tac-Toe game provides hands-on experience with the core principles of React, from understanding components to managing state and handling events. It’s a stepping stone to more complex projects, giving you the confidence to explore advanced features and frameworks. The key is to keep practicing, experimenting, and building. Each project you complete will solidify your understanding and pave the way for more innovative web development endeavors. As you continue your journey, embrace the challenges and celebrate the victories, knowing that each line of code brings you closer to mastering this powerful library.

Building a Simple React Tic-Tac-Toe Game: A Beginner’s Guide

Why Build a Tic-Tac-Toe Game?

Setting Up Your React Project

Project Structure and Components

Creating the Square Component

Building the Board Component

Putting it all together: The Game Component

Adding Winner Detection

Common Mistakes and How to Fix Them

Adding More Features (Optional)

Summary / Key Takeaways

More posts

Build a Simple Next.js Interactive Survey App: A Beginner’s Guide

Build a Simple Next.js Interactive Code Snippet Sharing App

Build a Simple Next.js Interactive File Uploader App

Build a Simple Next.js Interactive Credit Card Validator