Though React is one of the most common single page application (SPA) frameworks in the industry, I didn’t have opportunities to use it in my position at the time. React had also moved towards a more functional programming paradigm with React Hooks, which I wasn’t exposed to when I had first learned React. As a result, I decided to dive into a small side project in order to brush up on my skills in the React world.
I started off following a basic React Hooks tutorial that created a Tic-Tac-Toe game, but I decided to step it up a notch to get some more practice in. What started off as a simple game of Tic-Tac-Toe evolved into a much more polished game of Connect 4. Though the project was never deployed, it served its job in helping me gain a better understanding of how to use React Hooks and effects, as well as practice unit testing in a React environment.
Using React Hooks and some styling, I was able to make the game feel much more real, with token animations, sound effects, falling confetti, and more.
To make sure the game logic was valid, unit testing through Jest was invaluable. More than just testing calculating the board state, unit testing also validated that the components were behaving as intended.