This is a simple single-page application where two players (human or computer) can play tic-tac-toe.
This was my second project using React, and the first where I wasn't following any type of guide/tutorial. I would do a lot differently if I were to restart this project today.
On GitHub Pages at https://kr-matthews.github.io/tic-tac-toe/.
There are two players playing against each other on a common interface (screen). Each player can be human-controlled or one of several built-in computer players.
Wins-ties-loses are tracked (until the page is refreshed or exited).
As my second project (the first being a relatively static website), my main goal was simply to get something that functioned properly. While I tried to follow conventions and best practices, they were secondary to just getting something working (refinement could come in later projects).
I ended up focusing on the basics JSX, click handlers, basic state storage and manipulation (useState
and useEffect
), and form submissions.
There are many, many flaws with this project:
-
I used
useState
whereuseReducer
may have been better. -
Some states were updated via improper uses of side effects (using
useEffect
). -
I didn't encapsulate board-related states and code into a custom hook.
-
If-then statements were used where ternary operators (
_ ? _ : _
) may have been better. -
Some views could have been broken down into simpler components.
-
Form submission, and managing state attached to those inputs, was messy.
-
There are no tests at all.
-
The styling via CSS isn't great.
There are probably more flaws beyond this list.