React Tic-Tac-Toe Game Tutorial

Recently I went through the React Tic-Tac-Toe tutorial that's available right on the React website.  While it's not a complete, enterprise-grade crash course in using React, I feel it teaches some important concepts in React and refactoring components.  You even get a neat game out of completing it too!

Components

React is known for being component-based.  This helps immensely when trying to increase code reuse and follow the DRY Principle.  The component aspect is great for companies that would want to share UI objects across projects.  Many teams could share a React Component library to save time by not having to rebuild a UI Element.  This concept also helps unify the look and feel of your apps.

State Management

The game tutorial focuses mainly on component state management.  It starts out with three components: the square, the board, and the game.  You'll begin by putting logic in the square for handling the onClick() event.  As you add features, it becomes apparent that the state of the square will need to be known by its parent components. The tutorial then guides you through moving the state from the square component.  This is referred to as Lifting State, since you are "lifting" the function and values from the child component to be defined by the parent.  This allowed for more control when trying to determine whether a player has won the game, to store a history of moves, and to move the game back in time to those previous states.

The Result

The result of the tutorial is probably the best part.  I pushed my code to now to host and share the project.  You can find the link to the game here: https://my-react-tutorial.mitchgollub.now.sh/. Thanks for reading!