Ben Hammond Blog: Tech && Music

Ben Hammond Blog: Tech && Music

react-tac-toe

react-tac-toe

Learning React by Building and Styling the Classic Game

Play React-Tac-Toe

My classmate Armando from General Assembly told us of someone he knew that had applied for a software engineering role at a larger company. Their tech interview consisted of the interviewers saying "ok, build us tic tac toe in a few hours; we'll come back and walk through your code". I heard this and was curious... could I do it in a few hours? Probably. Could I do it in React, a framework we had just barely started learning in my bootcamp (when should I use props? How does state work?) I didn't know, but I could try!

The piece of the equation missing from my calculation were my two-under-two babies whom I'm solely responsible for workdays. I intermittently coded between diaper changes, bottle feedings, trains playing, building-and-then-destroying magnet block castles, and of course setting up a healthy dose of babysitting from "Cocomelon".

Did I finish in a few hours? Nope! Did I manage to get it working the next day, when I had my buddy coming over to help babysit? Heck ya! Even more rewarding, I was able to revisit the game a few weeks later after more fully covering React basics, and refactor using functional components and hooks like useEffect() and useState(). These helped to fix up the win- and tie-condition timing issues I'd been having. I also figured out deploying to Netlify, which was super straightforward using their GitHub integration for CI/CD. For a bit of whimsy I ultimately decided to style the entire board like the default create-react-app logo, so that the game actually spins in glowing aqua-blue as you play. Not only did I think it was funny and kinda cool; in all honesty it brings a level of drama to tic-tac-toe gameplay that I haven't experienced in since I was 7 years old.

I hope you enjoy playing this over-coded game in a slightly new way, and I'd love to hear your thoughts! What should I build next? What's better than "Cocomelon" for a 2 year old to watch?

#reactjs#codenewbies#create-react-app#javascript#games
 
Share this