React Tic Tac Toe

This week I had a phone call with a fellow Flatiron alum who currently works at a company I admire. I got a lot out of the call and she provided a lot of detailed and helpful advice — more than she needed to for a stranger, which I greatly appreciated. But one piece of advice from our call really stuck with me — to keep hammering home the topics we learned in bootcamp until I master them. Since the end of bootcamp, it has been somewhat overwhelming trying to decide what to learn or practice next. It’s easy to see a job listing mention a skill I don’t have and decide to find a tutorial for it but if I did that for every job listing I see, I’d never sleep. To avoid falling victim to the “jack of all trades, master of none” trap, I decided to really focus on React. I started off with the basics — the simple concepts that are easy to forget — and I plan to continue sharpening my skills from there. This week, that meant I completed the Tic Tac Toe tutorial from the React docs.

The project at its core is simple — create a functional tic tac toe game that can display the game piece of the winner once someone wins. But the beauty of this tutorial is that it briefly covers a number of React principles in practice. For example, the first task is a review of passing in props. The docs do an excellent job in this tutorial explaining the concept of even the most basic concepts thoroughly and in laymen's terms. Each step from there builds on the last and gradually grows in complexity — we start with a grid that simply displays numbers and we end with a board that can track state and identifies if anyone has won the game yet.

I’m glad that I worked on this tutorial this week. It made me think about the detailed mechanics of the tools React provides that I use daily in a way I don’t have time to when working on more complex projects. Next week, as I look to work on a more complicated project, I know I’ll be able to understand the why and how behind every line of code that much better.

Github: https://github.com/mccleskeyc/hook-tic-tac-toe

In Action: