Welcome folks today in this blog post we will be building a tic tac toe game in both modes single or multiplayer in react.js. using the concept called redux and deploy it to vercel platform. All the full source code of the application is given below.
Live Demo
Get Started
In order to get started we need to create a brand new github repository as shown below to initialize a new react.js project
react-tic-tac-toe
A React implementation of Tic Tac Toe for one or two players.
And also you can clone the github repository as shown below
git clone https://github.com/lucasbento/react-tic-tac-toe.git
cd react-tic-tac-toe
npm install
npm start
The directory structure will look like this as shown below
Running
Development
Simply run:
|
1 |
npm run watch |
And open http://localhost:7000/ on your favorite browser.
Production
- Build the app, the files will be available in
./dist:
|
1 |
npm run build |
- Run with amazing http-server:
|
1 |
npm start |
- And open http://localhost:7000/ also on your favorite browser. 😉
After this when you start the react.js application your game will start and the screenshot will look like this
Features
- ✅ Done. Display the location for each move in the format (col, row) in the move history list.
- ✅ Done. Bold the currently selected item in the move list.
- ✅ Done. Rewrite Board to use two loops to make the squares instead of hardcoding them.
- ✅ Done. Add a toggle button that lets you sort the moves in either ascending or descending order.
- ✅ Done. When someone wins, highlight the three squares that caused the win.
- ✅ Done. When no one wins, display a message about the result being a draw.
- ✅ Done. Add the button to re-start the game.
