Here are some rules to keep handy as you build Tic Tac Toe - following them will help you avoid lots of problems.
Some guidelines for better looking React code:
This challenge is intended to let you practice maintaining state in a React application and
become more familiar with passing props and dealing with user interactions. This game will be for two
users, playing on one device, taking turns. You will have to use component state to keep track of
whose turn it is and which squares have been marked by each player. One hint is that you should not
directly manipulate the DOM to keep track of changes (in other words, no direct DOM manipulation like
getElementById("square").style = ...). React state and props should do all the heavy lifting.
On another note - this project will challenge your knowledge of React but should also be an exercise
in creating good user experiences. Your view should be styled to look good as well as function
Here are the user stories to guide your progress:
As a user, I should be able to click on a square to mark it. My partner should be able to
click on a square after me and see their mark.
As a user, when someone has won the game (3 squares in a row: horizontally, vertically, or diagonally)
or there are no more squares, an alert will tell me who has won or that there are no more squares
and the game has ended.
Read all the stories.
Get the elements of the view and model that will be needed to complete the first epic. In other words, design it, but don't implement the whole thing at once. Create a piece at a time when you need it.
Take it one story at a time. It is easier to have many small wins than to have one big catastrophe.
Remember correct indentation.
Use the comment recipe for planning out functions.