ReactJS Tic Tac Toe (FAST and MODERN Tutorial)

This video will show you one way to create a Tic Tac Toe game application using the ReactJS library.

Timestamps:
0:00 Introduction
0:26 Create Square Component
0:57 Create Board Component
1:22 Display X or O letters dynamically
2:59 Calculate Game Winner
4:50 Display Player Letter During Turns
5:30 Restart Game
6:07 Refactor JSX
7:32 Outro - Please like and subscribe to help me reach others and support this channel

[DastageerHC-bq]

you areby far the the best web dev tutorial channel i have every come across.

[LaFragas]

great visual intro, preface, and short fast explanation. well done. love it!

[Jutsued]

Nice man. I will try to re-create this game. I'm learning bit by bit and this is a good project to cement some react concepts. Well done.

[fallenIights]

Thanks for the tutorial! BTW in React, it is better to treat the first argument given by useState as immutable. Therefore I would replace handleClick to:

const handleClick = (i) => {
const updatedSquares = [...squares];
updatedSquares[i] = isX ? "O" : "X";
setSquares(updatedSquares);
setX((p) => !p);
};

[MyRc]

Tahnk you so much bro, this is the best solution i found and you explain really well! hope you upload more content like this.

[onlydev]

nice one. I try to adapt this reactjs code to angular
Thank you

[lidstech]

Thank a lot for this one! It really helped me understanding.

[antonio]

Sorry your post on LinkedIn from React Jobs page. Nice video!

[Jhonyhndz]

Excelente. Me encanta la manera como lo resuelves.

[DanZdan]

Hello sir, can you show how to make the "x" and "o" text changing color when clicked? I already try to do some edit in square and board component but I'm still confuse. Btw, nice tutorial sir

[oyatsukikagami]

you did all the componenets in the same file, but how do you use the click function when you use a separated files ?

[camo]

how do you implement a 'draw' functionality?