Build a Tic Tac Toe game component in React that allows two players to play against each other.
Requirements
1. Game Board
- Render a 3x3 grid of clickable squares
- Each square is either empty,
X, or O - Show a clear status line (whose turn / winner / draw)
2. Turns + Rules
X always plays first- Clicking an empty square places the current player's mark
- Clicking a filled square does nothing
- Once the game is won or drawn, further clicks do nothing
3. Win + Draw Detection
- Detect win (3 in a row) across:
- 3 rows
- 3 columns
- 2 diagonals
- Detect draw when the board is full and there is no winner
4. Controls
- Provide a New Game / Reset button
- Reset should restore a fresh empty board and set turn back to
X
5. Data Structure
type Player = 'X' | 'O' | null;
type Board = Player[]; // length 9
interface GameState {
board: Board;
currentPlayer: 'X' | 'O';
winner: 'X' | 'O' | null;
isDraw: boolean;
}
> Note: Use buttons for squares (good semantics + keyboard focus). Avoid inline styles; use CSS classes.