Tic-Tac-Toe game in ReactJS using Hooks.

INTRODUCTION

A game in which two players seek in alternate turns to complete a row, a column, or a diagonal with either three O's or three X's drawn in the spaces of a grid of nine squares

When you take an original look at the React Hooks attestation, you ’ll see that there are several Hooks that we can use for our operations. You can indeed produce your own. Some of the popular bones include 

useState : returns a stateful value 

useEffect : perform side goods from function factors 

useContext : accepts a environment objects and returns current environment value 

useCallback : pass an inline message and an array of dependencies 

PREREQUISITE

- NODE JS, NPM/YARN , REACT should have already installed in your computer.

-Knowledge how to use the third-party library

- Basic knowledge of 

• REACT JS
• nodemon 

and other necessary packages

CREATING PROJECT

To Create React Application Type: 

• yarn: yarn create react-app appname
• npm: npx create-react-app appname

Now go to todo app and run yarn start (if using Yarn) OR npm start (if using npm). Your project should now be served on localhost:3000. (by default the port is 3000.)

CODE EXAMPLES

• Add below css code to App.css file

.board {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  height: 300px;
  margin: 0 auto;
}

.square {
  width: 100px;
  height: 100px;
  font-size: 50px;
  font-weight: bold;
  text-align: center;
  line-height: 100px;
  border: 1px solid rgb(108, 10, 10);
  box-sizing: border-box;
  cursor: pointer;
}

.status {
  margin: 10px 0;
  text-align: center;
}

.winner {
  color: green;
  font-size: 20px;
  margin: 10px 0;
  text-align: center;
}



  

• edit App.js   :  get rid of all the code inside return function and add your imported component

import './App.css';
import TicTacToe from './TicTacToe'

function App() {
  return (
    <TicTacToe/>
  );
}

export default App;
  
  

• Add below code after creating component TicTacToe.js

import React, { useState } from 'react';

const initialState = Array(9).fill(null);
const winningCombinations = [  [0, 1, 2],
  [3, 4, 5],
  [6, 7, 8],
  [0, 3, 6],
  [1, 4, 7],
  [2, 5, 8],
  [0, 4, 8],
  [2, 4, 6],
];

const TicTacToe = () => {
  const [board, setBoard] = useState(initialState);
  const [currentPlayer, setCurrentPlayer] = useState('X');
  const [winner, setWinner] = useState(null);

  const handleClick = (index) => {
    if (winner || board[index]) {
      return;
    }

    const newBoard = [...board];
    newBoard[index] = currentPlayer;

    setBoard(newBoard);
    setCurrentPlayer(currentPlayer === 'X' ? 'O' : 'X');

    for (const combination of winningCombinations) {
      if (combination.every((i) => newBoard[i] === currentPlayer)) {
        setWinner(currentPlayer);
        return;
      }
    }
  };

  const renderSquare = (index) => {
    return (
      <button className="square" onClick={() => handleClick(index)}>
        {board[index]}
      </button>
    );
  };

  return (
    <div>
      {winner ? (
        <div className="winner">Winner: {winner}</div>
      ) : (
        <div className="status">Current player: {currentPlayer}</div>
      )}
      <div className="board">
        {renderSquare(0)}
        {renderSquare(1)}
        {renderSquare(2)}
        {renderSquare(3)}
        {renderSquare(4)}
        {renderSquare(5)}
        {renderSquare(6)}
        {renderSquare(7)}
        {renderSquare(8)}
      </div>
    </div>
  );
};

export default TicTacToe;

OUTPUT/RESULTS:

Run your project by typing npm start or yarn start