This is a hands-on class, so while covering a lot of theory along the lines our main focus will be to build a fully functioning Tic Tac Toe game with React. We are going to cover how to set up the grid layout, how to make it interactive, some basic logic to detect the winner and a result screen which both announces the winner and that can be used to reset the game.

Be sure to share a link to your completed game in the Project Gallery. If you get stuck, post in the discussions section - we're all in this together!

You can also check out the result of each lesson step by step on CodePen:

And here is a more advanced version of this game with animations and computer logic: https://codepen.io/HunorMarton/pen/LoPXLq

More about CSS grid: https://css-tricks.com/snippets/css/complete-guide-grid/

More about CSS flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Note: If you are having problems with the settings: New versions of React and React DOM come out together, but it can happen that the website providing these libraries for CodePen is not up to date with both of them. If for some reason the version number of React and the version number of React DOM do not match then you have to downgrade the one with the higher version number by simply changing the number in the url of the added library to match.

Arnaldo Drljevic

--

1