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.
Next recommended video: ReactJS: 3 Ways to Pass Data Between Components ( • ReactJS: 3 Ways Compon... )
Codepen: React Tic tac toe exercise and solution - codepen.io/collection/Wvoxyg
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

[@LaFragas]

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

[@ASoftwareEngineer]

thank you for dropping a comment, really appreciate it! i always strive to make my videos direct to the point while doing it fast so audience will get what they came from.

[@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.

[@ASoftwareEngineer]

definitely. i got asked to create this game on my interview and got the job with great comp because of it.
you can use my codepen exercise to save you some time as i added react libs and style in there already so you can concentrate on the logic.
when you are very confident feel free to do everything on your own. good luck!

[@lidstech54]

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

[@ASoftwareEngineer]

my pleasure Lidia!

[@babylikescoffee]

Thanks for this!! Awesome video 💯🔥

[@ASoftwareEngineer]

my pleasure! expect more videos like this soon.

[@MyRc16]

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

[@ASoftwareEngineer]

you are welcome! will upload cool videos like this soon.

[@bitroix_]

This is great thank you for uploading

[@ASoftwareEngineer]

certainly. I am in the process of creating another ReactJS video that you might interesting.

[@Jhonyhndz]

Excelente. Me encanta la manera como lo resuelves.

[@ASoftwareEngineer]

Gracias. Me alegro de que este vídeo te resulte útil.

[@user-to9kh9kx3f]

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

[@ASoftwareEngineer]

thanks for the sweetest comment ever! :)

[@DastageerHC]

Hey Just An Update I was preparing for an interview that day, and surprisingly the same question was asked, your animations and explainaions made it very easy to understand, and thanks to you i cleared that round. Keep up the good work.

[@ASoftwareEngineer]

@@DastageerHC congrats! I am happy to hear that my effort producing this video is fruitful to you. Please let me know if you get the role. Good luck.

[@franku.n.1798]

You are awesome bro. thank you.

[@ASoftwareEngineer]

thank you for the kind words and the feedback. this channel could use them. 🎊🎉

[@conitos05122010]

Awesome!!!

[@ASoftwareEngineer]

thank you Resty! more ReactJS vids soon.

[@ASoftwareEngineer]

Next recommended video: ReactJS: 3 Ways to Pass Data Between Components (ruclips.net/video/e2OLRdJKnEg/видео.html)

[@onlydev4099]

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

[@ASoftwareEngineer]

thanks. absolutely! practicing your craft gets us to mastery level. good luck and i appreciate the comment always 👊

[@antonio6620]

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

[@ASoftwareEngineer]

thank you Antonio! I’m planning on creating more valuable content like this one.

[@felipepacheco.developer]

Good video bro! Upload more videos

[@ASoftwareEngineer]

thank you Felipe! You got it, will upload more soon. 👊👌

[@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);
};

[@ASoftwareEngineer]

it is a good idea always to treat arguments as immutable in general - react or vanilla js especially if arguments are being used by other parts of app.
for this example, it is only one place and is being updated by the setSquares so i figured make this tuts as simple as possible.

[@fallenIights]

@@ASoftwareEngineer clear, tnx

[@ASoftwareEngineer]

@@fallenIights of course, welcome

[@DanZdan99]

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

[@ASoftwareEngineer]

yes, it is possible. I update the Square component to add additional class where if it is clicked, i will add a class called `square--active`. That will set the background-color to something we desire. Lastly, is to add a css rule to `square--active`. You can see my implementation below.
codepen.io/angelo_jin/pen/wvNaQPw

[@oyatsukikagami1960]

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

[@ASoftwareEngineer]

you can create a function and pass that as a prop that a component can invoke. please let me know if that make sense. i cover this in one of my video

[@camo4970]

how do you implement a 'draw' functionality?

[@ASoftwareEngineer]

there is no draw functionality but turn functionality where each player swap turns from X to O and O to X.
Is this what you mean?

[@camo4970]

@@ASoftwareEngineer no, i mean when the game is over and nobody wins, how do you display it on the screen that there is a draw?

[@ASoftwareEngineer]

@@camo4970 oh i see, wasn't able to cover this edge case. An idea is to introduce another state that will track the number of turns. If the turn is 9th time and there is no winner then it is a draw. let me know if this make sense

[@camo4970]

@@ASoftwareEngineer oh thats a good idea, i will try that . Thanks

[@ASoftwareEngineer]

of course! 💪🤙🏻

[@ensar6803]

poorly explained.

[@ASoftwareEngineer]

i feel bad that you felt that way