Tic Tac Toe

Web Development Project (React + Redux)



This is a simple web development project I worked on in mid 2017 when I was just teaching myself React. Project Repo here.

I built foundation for this project by following the Intro to React Tutorial. After learning how to set up Create React App and going through the tutorial, I expanded on the main tutorial with custom styling and a responsive layout, color coding the X's and O's, highlighting the winning line, highlighting the currently selected turn and displaying the coordinates + mark made for each turn in the history list, and enhancing the status to handle win, lose, and draw conditions.

Although I'd completed the React and Redux lessons on FreeCodeCamp prior to this project, I'd consider this my first 'real' react app. This project was a great learning experience for me because the app uses multi-level nested components and passes props all the way down from the top to bottom level. I had originally tried to track the winner and winning line in the Game component's state by using setState in Game.handleClick, but then I realized that doing so blocked the "rewind" functionality. Instead, I ended up just passing down the winning line from Game.update to Board and Square through props, exposing this data where it was needed and solving the problems I was facing with the rewind. Additonally, I had some trouble figuring out how to correctly import images using relative filepaths until I took a fifth look at the docs!

Spencer James, Product Designer - Silicon Valley, CA

Email | LinkedIn | Github | Twitter

©SLJ forever