Learn how React components, state, and event handling work by reading and modifying a real game.
Play a quick two-player Tic Tac Toe game with a friend on one computer.
Customize the styling, icons, or game logic to practice front-end development skills.
Requires Node.js installed; three commands (npm install, npm run dev, open localhost link) to play.
This repository is a small Tic Tac Toe game built with React. Tic Tac Toe is the well-known pencil-and-paper game where two players take turns marking squares on a 3 by 3 grid, and the first to line up three of their marks in a row, column, or diagonal wins. The author built this version as part of a learning program called Web Dev Cohort 2026, so the goal is partly to play the game and partly to practice the basics of React. React is a JavaScript library for building user interfaces out of reusable components. The README highlights that this project shows the fundamental React ideas: breaking the screen into components, holding the current game state in one place, reacting to clicks, and re-drawing the board when the state changes. The game itself is a standard 3 by 3 board. Two players share the keyboard and mouse, alternating between X and O. The code automatically detects a win or a draw, and there is a reset button to clear the board for a new round. The interface is described as modern, with a dark theme, gold accents, and gradient styling. Custom icons are used for the X and O pieces rather than plain letters. The README also states the layout is responsive, meaning it adjusts to work on both phone screens and larger desktop displays. Under the hood the project uses React together with Vite, a build tool that gives a fast local development server. The styling is plain CSS3 with custom themes, and the game logic is written in modern JavaScript, ES6 or newer. There is no mention of a backend, a database, or any kind of online multiplayer; everything runs inside the browser on the local machine. Running it is straightforward for anyone who has Node.js installed. The README lists three steps: run npm install to download the libraries the project depends on, run npm run dev to start the local development server, and then open the link printed in the terminal, usually http://localhost:5173, in a web browser. From there the rules are the familiar ones: click an empty square to place your mark, alternate turns, and click Reset Game when you want to start over.
Generated 2026-05-22 · Model: sonnet-4-6 · Verify against the repo before relying on details.