https://github.com/christinec-dev/tic-tac-react
Tic-Tac-React: A simple Tic-Tac-Toe game made with ReactJs .
https://github.com/christinec-dev/tic-tac-react
bootstrap css3 javascript javascript-game react react-components reactjs scss tutorial
Last synced: about 1 month ago
JSON representation
Tic-Tac-React: A simple Tic-Tac-Toe game made with ReactJs .
- Host: GitHub
- URL: https://github.com/christinec-dev/tic-tac-react
- Owner: christinec-dev
- Created: 2021-08-17T17:26:10.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-02-19T17:44:59.000Z (about 3 years ago)
- Last Synced: 2025-01-30T07:42:32.450Z (3 months ago)
- Topics: bootstrap, css3, javascript, javascript-game, react, react-components, reactjs, scss, tutorial
- Language: JavaScript
- Homepage: https://tic-tac-react-christine.herokuapp.com/
- Size: 654 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Tic Tac React!
This repository contains my version of the Tic Tac Toe game that every beginner should do on the Reactjs.org website (for reference view: https://reactjs.org/tutorial/tutorial.html). I call it: _Tic-Tac-React!_
In my version, instead of doing all the coding for the game on a singular app.js or index.js page, I broke my source code up into their respective component files (Board.js, Game.js, Header.js, Square.js etc.). With this tutorial I refreshed my mind a bit on how to work with pure Reactjs, and, I even learnt how to import custom downloaded fonts from websites other than Google Fonts (which I'm extremely proud of)! This game is now fully functional, and I added a pulse transition to the squares that adds extra focus on the block on which the last move was made. I spent hours trying to create a modal using react-bootstrap to customize the player names, but each time it would not return correctly.
Day one (1) of trying to code in React on my own was a success. I completed it with the following: React, JavaScript, HTML5, CSS3, SCSS and Bootstrap.I completed it with the following: React, JavaScript, HTML5, CSS3, SCSS and Bootstrap.
#### FUTURE NOTE:
Custom player names instead of 'X' and 'O', and the ability to play against the computer instead are all functions that I will implement at a later stage once I have more time and understanding.
## 💣 Play Via Demo Link 💣 ##
[Tic Tac React Game](tic-tac-react-christine.herokuapp.com/)
#### **Please note that if the app does not load or gives an error, just reload the page and Heroku will work again. Sorry for any inconveniece :) ####
## Video Preview
https://user-images.githubusercontent.com/87696858/130235578-a0c7ce28-aa96-4732-9392-1518a277f72d.mp4
## My Version UI
## Tutorial Version UI
