This is a simple implementation of the classic Tic Tac Toe game using React. The game consists of a 3x3 grid where two players take turns to place their marks ('X' or 'O') in an attempt to get three in a row horizontally, vertically, or diagonally. The game declares a winner when such a sequence is achieved or ends in a draw when the grid is filled with no winner.
The main component that represents the game board.
squares: An array representing the state of each square in the grid.isXTurn: A boolean indicating whether it's currently X's turn.
winnerLogic: An array containing all the possible winning combinations (rows, columns, and diagonals).checkWinner: A function to check if there is a winner based on the current state of the board.handleSquareClick: A function to handle a click on a square. It updates the board state and switches turns.handleReset: A function to reset the board to its initial state.
- If there is a winner, display the winner and a "Play Again" button.
- If there is no winner, display the current player's turn and the game board.
- The game board is divided into rows and squares, and each square is a
Squarecomponent.
- The game board is divided into rows and squares, and each square is a
- A "Refresh" button is provided to reset the board.
A simple functional component representing a square in the Tic Tac Toe grid.
value: The value ('X', 'O', ornull) of the square.onClick: A function to be called when the square is clicked.
- Clone the repository or create a new React app.
- Copy and paste the
BoardandSquarecomponents into your React application. - Ensure that the necessary dependencies are installed (
reactandreact-dom). - Use the
Boardcomponent in your main application file or component. - Run your React application.
Now, you should have a functional Tic Tac Toe game ready to be played!