<p>In this tutorial, we'll build a basic tic-tac-toe game with JavaScript, React, and Tailwind CSS.</p><h1>Step 1</h1><p>Let's start by writing two components we'll need to build the game.</p><p>First, We'll need a <code>Cell</code> component to represent each square in the tic-tac-toe grid.</p><pre><code>export default function Cell({ number, value, handleClick }) {
    return (
        &lt;div className="border p-2 w-8 h-8" onClick={() =&gt; handleClick(number)}&gt;{value}&lt;/div&gt;
    )
}</code></pre><p>Second, we'll need to use these <code>Cell</code>s to build the <code>Board</code> used in the game.</p><pre><code>import Cell from "@/components/Cell";

export default function Board({ board, handleClick }) {
    return (
        &lt;div className="flex flex-col"&gt;
            &lt;div className="flex"&gt;
                &lt;Cell number={0} value={board[0]} handleClick={handleClick}&gt;&lt;/Cell&gt;
                &lt;Cell number={1} value={board[1]} handleClick={handleClick}&gt;&lt;/Cell&gt;
                &lt;Cell number={2} value={board[2]} handleClick={handleClick}&gt;&lt;/Cell&gt;
            &lt;/div&gt;
            &lt;div className="flex"&gt;
                &lt;Cell number={3} value={board[3]} handleClick={handleClick}&gt;&lt;/Cell&gt;
                &lt;Cell number={4} value={board[4]} handleClick={handleClick}&gt;&lt;/Cell&gt;
                &lt;Cell number={5} value={board[5]} handleClick={handleClick}&gt;&lt;/Cell&gt;
            &lt;/div&gt;
            &lt;div className="flex"&gt;
                &lt;Cell number={6} value={board[6]} handleClick={handleClick}&gt;&lt;/Cell&gt;
                &lt;Cell number={7} value={board[7]} handleClick={handleClick}&gt;&lt;/Cell&gt;
                &lt;Cell number={8} value={board[8]} handleClick={handleClick}&gt;&lt;/Cell&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    )
}</code></pre><h1>Step 2</h1><p>Now we'll build the <code>Game</code> component, which includes all the good stuff: state, event handlers, game logic, and more. These are the important parts:</p><ul><li><p>Import <code>useState</code> from the react library.</p></li><li><p>Declare the <code>initialBoardState</code> variable. We'll represent this as an array of nine values, each set to null by default.</p></li><li><p>Declare two pieces of state to remember the board array and which player's turn it is.</p></li><li><p>Write some logic to determine whether a player has won or if not, whose turn it is. We'll worry about the <code>calculateWin</code> function in step 3.</p></li><li><p>Write an event handler function so when the player clicks on a <code>Cell</code> the state is updated and a mark is rendered in that <code>Cell</code>.</p></li></ul><p>Here's the final code:</p><pre><code>import {useState} from "react";
import Board from "@/components/Board";

const initialBoardState = [null, null, null, null, null, null, null, null, null];

export default function Game() {
    const [board, setBoard] = useState(initialBoardState);
    const [player, setPlayer] = useState(true);

    const winner = calculateWin(board);
    let winnerText;
    if (winner === true || winner === false) {
        winnerText = winner ? `Winner: player 1` : `Winner: player 2`;
    } else if (player) {
        winnerText = `Player 1's turn`;
    } else {
        winnerText = `Player 2's turn`;
    }

    function handleClick(number) {
        if (board[number] === null) {
            setBoard(board.map((e, i) =&gt; {
                if (i === number) {
                    const value = player ? 'X' : 'O';
                    setPlayer(!player);
                    return value;
                } else {
                    return e;
                }
            }));
        }
    }

    return (
        &lt;&gt;
            &lt;Board board={board} handleClick={handleClick}&gt;&lt;/Board&gt;
            &lt;div&gt;{winnerText}&lt;/div&gt;
        &lt;/&gt;
    )
}</code></pre><h1>Step 3</h1><p>Now that we have all the components and state setup, we need to calculate whether a player has won the game based on the state of the board. In tic-tac-toe there are three broad win conditions: three of the same mark in a row vertically, horizontally, or diagonally.</p><p>We'll use <code>for</code> loops to check each possible win in each of these three possible conditions.</p><pre><code>function calculateWin(board) {
    // Horizontal win conditions.
    for (let i = 0; i &lt; 7; i += 3) {
        if (board[i] === board[i + 1] &amp;&amp; board[i + 1] === board[i + 2]) {
            if (board[i] === 'X') {
                return true;
            } else if (board[i] === 'O') {
                return false;
            }
        }
    }

    // Vertical win conditions.
    for (let i = 0; i &lt; 3; i++) {
        if (board[i] === board[i + 3] &amp;&amp; board[i + 3] === board[i + 6]) {
            if (board[i] === 'X') {
                return true;
            } else if (board[i] === 'O') {
                return false;
            }
        }
    }

    // Top left to bottom right diagonal.
    if (board[0] === board[4] &amp;&amp; board[4] === board[8]) {
        if (board[0] === 'X') {
            return true;
        } else if (board[0] === 'O') {
            return false;
        }
    }

    // Top right to bottom left diagonal.
    if (board[2] === board[4] &amp;&amp; board[4] === board[6]) {
        if (board[2] === 'X') {
            return true;
        } else if (board[2] === 'O') {
            return false;
        }
    }

    return null;
}</code></pre><p>Overall, this code provides a basic implementation of a tic-tac-toe game using React and demonstrates how to use hooks to manage state in a functional component.</p>

This project is a simple example of a tic-tac-toe game powered by React and Tailwind. This question is common in front-end interviews!

Build a tic-tac-toe game with React and Tailwind

Bjorn Builds