In this workshop you will build a Tic Tac Toe game using React.

As soon as you have all of this installed, you can run the code from the application at any moment by running yarn start (hint: look at package.json to see how that works)

You can choose to rush in the next steps straight away, but if you have not done it yet, I strongly recommand that you take the time to look at all the files in the src directory, and then read all the instructions.

Also, if you did not run git init yet, now is a good time to.

Look at ./src/layouts/GameLayout.js and find a way for making its children render the informations from the state.

Make the cells change style when they are rolled over by using onMouseOver, onMouseOut and setState in ./src/components/Cell.js

• onMouseOver -> équivalent hoover css (occurs when the mouse pointer is moved onto an element (it can be a div, a button, an input, a textarea, etc)
• onMouseOut -> fin du survol de l'lément (occurs when the mouse pointer is moved out of an element.)

hint: you might want to transform Cell from a functionnal Component into a Class Component to achieve this.

Using props, make your cells display a X, a O or nothing based on the current game state.

hint: init your game state with Xs and Os to see if it is working.

Using onClick, make your Cells change their content based on game state's currentPlayer. A cell can only be clicked once, every time a cell is clicked currentPlayer must change.

Use getDerivedStateFromProps to react to state changes and check if a player has won.

hint: Tic Tac Toe

• Implement a small AI to play with,
• Make the game use more rows and columns,
• use your imagination.