Build an Awesome Version of Tic Tac Toe in React Tutorial

Published: 14 August 2023
on channel: Coding With Adam

22,502

531

In this Tutorial we are going to build an awesome version of Tic Tac Toe using React.

Learn React concepts such as thinking in components, useState hook and useEffect hook. We also cover JS audio, CSS concepts such as flex-box and grid layouts for display and more to create a delightful UI.

CSS Gist
https://gist.github.com/CodingWith-Ad...

Github Complete project
https://github.com/CodingWith-Adam/ti...

Try the game:
https://codingwith-adam.github.io/tic...

VsCode Extensions Used:
Simple React Snippets
https://marketplace.visualstudio.com/...

Prettier
https://marketplace.visualstudio.com/...

Material Icons
https://marketplace.visualstudio.com/...

Chapters
00:00 intro
01:09 Component diagram
03:07 Stub out components
07:48 Where to get CSS
10:00 Board and Tile CSS
12:02 Tic Tac Toe Grid lines
13:54 Tile State
16:33 PlayerTurn State
17:10 Handle Tile Click
21:14 Hover CSS show next player turn
24:56 Strike Through
30:08 Check for Winner
37:43 Game Over Component
45:02 Play Again Button
48:32 Sound

#react #webdeveloper #softwareengineer #reactdeveloper #tictactoe

Watch video Build an Awesome Version of Tic Tac Toe in React Tutorial online, duration hours minute second in high quality that is uploaded to the channel Coding With Adam 14 August 2023. Share the link to the video on social media so that your subscribers and friends will also watch this video. This video clip has been viewed 22,502 times and liked it 531 visitors.

185