How To Make Tic Tac Toe Game In React | Create Tic-Tac-Toe Using React JS

[@n0social]

FINALLY MY FIRST REACT PROJECT THAT WORKS!

[@orlandoferazzani3639]

works almost fine, but if you try it, you will see that you can put two elements on top of eachother, because it doesnt check if the box is empty

[@warriorgaming4866]

🎯 Key points for quick navigation: 00:00 *🎮 Setting up Tic Tac Toe Game Board* - Setting up the initial game board with boxes that toggle between Cross and Circle icons. - Creating a reset button to clear the game board and start over. 01:48 *🛠️ Cleaning and Configuring React Project* - Removing default React project elements and renaming the project. - Configuring folder structure and basic setup for Tic Tac Toe component. 03:09 *🖼️ Adding Assets and Styling* - Importing and using game icons (Cross and Circle) from assets folder. - Setting up basic CSS for the game board, title, and reset button. 09:04 *⚙️ Implementing Game Logic: Toggle Functionality* - Implementing toggle functionality to switch between Cross (X) and Circle (O) icons on click. - Managing game state with a data array to track moves and check for a winner. 13:24 *🏆 Implementing Win Condition* - Creating a function to check for win conditions after each move. - Displaying a congratulations message and locking the board upon winning. 17:09 *🎉 Displaying Winner and Resetting the Game* - Updating the title with the winner's icon and message upon winning. - Adding functionality to reset the game board and title after a win or reset button click. Made with HARPA AI

[@muhammadkausar2842]

How do you do that brother?

[@iftyrahman2239]

Thank you for this awesome tutorial ❤

[@javirsagar8]

great and straightforward way😍

[@easycodingwithbg4731]

Very Informative Sir 😘

[@Eclipssed]

Hey brother I really like your teaching style. A single request to make a playlist of react so that it becomes easy to access react videos only. Pleazzzzzzzzzzzzzzzzzzzzz🙏

[@Zetsu1307]

Great, bu there will be a bug in this game, that is once you double click on already selected box you can again do the same move. I mean, if you click once a box and you get cross, thenagain click on the same box, and then try clicking another block, you will get cross again but whereas you should get a circle.

[@JaikumarLohana-v4t]

if (count%2==0) { if(data[num] === "" ){ e.target.innerHTML=`` data[num]="x" setCount(count+1) } } if (count%2!=0) { if(data[num] === "" ){ e.target.innerHTML=`` data[num]="O" setCount(count+1) } } checkwin() } this will do

[@franciskp9117]

You videos are alright. A bit more explanation would be great. As a beginner I don't understand, why some steps are done in your tutorial.

[@AlejandroMéndez-j6j]

Dam, some bad practices here (inerhtml, writing the blocks one by one, writing EVERYTHING in one file, box i is also box i-1...) But it was helpful as some way to start.

[@abhinavgupta1219]

This is awesome tutorial, i can now easily make tic tac toe game. Thanks for this ❤ best yourube channel to learn frontend development.

[@dymphna_creates]

Nice tutorial 😊

[@TheEnd-m5w]

Thankyou sir

[@GreatStackDev]

You're welcome. 😊 Keep coding.

[@TheEnd-m5w]

Sir thankyou for Your response Sometimes I feel very demotivated I think I am lost my family ,relations bcz lack of IT job 😅. Again thanks to you for your coding contribution on KZbin sir❤

[@NikhilPawar151]

Thank you for such valuable content.

[@SandeepMR26]

Awesome keep it up . .

[@feekz8590]

i tried following your code but i have 'useState' is not defined no-undef error popping up.

[@dancepractice805]

It was very useful

[@joshuasappor5435]

nice tutorials but please with the rows in the board i think it show be column instead. So maybe column1, column2, column3 because it almost confused me when i opened in the developer tools with chrome

[@ArshaqAk]

It is not working properly

[@govindsharma973]

Bhai tumne data array ko tictac ka function hai na usse bahar karo sayad kaam kar jaye ye

[@palanimathi4493]

Thanks for this video, Need a Javascript video continuation....

[@tebiksingh]

Love and guidance ❤

[@prakashchalke1708]

Wonderful, friend.

[@devrimsarikaya]

çok teşekkürler :)

[@HamzaSuleman-u4m]

Line 11:23: 'useState' is not defined no-undef Line 12:22: 'useState' is not defined no-undef Line 20:13: 'e' is not defined no-undef Line 25:13: 'e' is not defined i am having the above issue help me

[@jasongutierrez2548]

At 9:29 const toggle = (e,num) =>{ replace w with e

[@salimbendag6274]

and for useState you need to import it " import { useState } from 'react'; "

[@FullSTACKDev16]

cool game making bro

[@mahkamov_9]

Thank You

[@soumyajeetbiswal8401]

3:50 I'm not getting that automatically 😅 it's not importing...need help

[@pruthivirajrao2976]

which website you not made pls tell whenever i search any react related query i always found your channel

[@yashlad9412]

At timestamp 16:50, In TicTackToe Component, Why have you repeated the code from line 61 to 64?

[@economicblast]

Change data values.

[@tarun7453]

Nice project made it but if I click at same postion more than once the output is different

[@ParallelXL]

Hey I am here after like years, And I just remembered from Whom I used to learn back in those days So I searched easy tutorials and yeah Why yall changed the name and are there multiple teachers now?

[@GreatStackDev]

Hi Ayan, Thanks for coming back. I find GreatStack more relevant to the content we make. Yes, now we are working as a team. Btw, I really liked your Netlify portfolio site.

[@Letsplayxxs]

​@@GreatStackDevhow to create username and highest score in sec.

[@aymenbachiri-yh2hd]

thank you

[@clouduro5227]

If the game results in a tie, then upon clicking on the reset button it gives error!

[@MaulanaRafinda-r8l]

Thanks...

[@heyyangshuman]

npm create-react-app . is taking hours to install. What should I do?

[@User123_00__]

First you need to install node js on your system

[@pratishrutisahoo7]

npm create vite@latest

[@aswinkrishna9783]

why images are not showing when i import

[@AhmadHassan-o6f]

Ap me image Ka path nhi dia ho ga ap ise public ke app SE import karva do

[@Nanashi-rq7lk]

Nice

[@mdsabbirhossen884]

Do you need channel seo manager?

[@Unstableaspirant]

i m doing the same but titleRef is undefined showing what should i do

[@VedantKumbharkar-f2x]

you must have written let titleRef= useRef(null); so above write import{useRef} from "react"; it would work

[@loser8198]

Awesome

[@opivcm4566]

guys i am getting error in @4:44

[@A11-b6e4s]

Bro on the next Please make a video about full stake freelancer website

[@ibrohimismoilov8345]

hi bro there is bug, where i finished game with toe. You haven't checked this situation.

[@pain5772]

Sir my output is showing error that e is not defined and useRef is not defined why is that

[@FesiBaya]

useRef should be inside: const TicTacToe = () => { let titleRef = useRef(null); } and in return ( Tic Tac toe Game In React )

[@arunkumar-pr1rg]

You need to explain the conditions which you are using and why you are using You are just saying we will set ,we will create ., but need to explain why it is needed there

[@SBamniya]

Good try, keep it up, I would suggest to study more about the logics before making video. You don't need multiple references for reset, you can do it in better way without multiple reference, the data that you stored could be a state, the conditions are really messed. The counter update is not the correct way either, lots if duplicacy.

[@ashwinchavhan860]

hiiiii

[@rachappajiachar5062]

how to create mulitple product details page in single html page using JavaScript please reply sir

[@manideepmaturi4682]

Connecting and retrieving the data from mongo db for these pages

[@omsatishthanage6083]

how to add draw condition?

[@titikshyachanda8623]

Why does my toggle function not working?

[@govindsharma973]

Listen tumne data array ko sayad tictac toe ka component ke upar declarr karo chal jayega

[@Spinrider1817]

Reset the counter on reset

[@dipankarpaul3405]

Please make some videos with Svelte or SvelteKit...

[@sonalkhapre5716]

How to add draw msg, if there is draw?

[@rashmithagudipudi5979]

create variable like is draw let isDraw=false; then modify cheeckwin with include the draw condition else if (!data.includes("")) { . isDraw = true; setLock(true); titleRef.current.innerHTML = 'It\'s a Draw!'; }

[@kondisettysaidheeraj4276]

bro you are missing the condition that if the game draws .

[@ashumishra2330]

What if we do designing this from Tailwind CSS Ans: It will become FAST AND FURIOUS😅

[@eugeneokaka]

more react content

[@wiccanmarvelous]

pls provide your Git hub link

[@KondisettySaidheeraj]

Please provide git link

[@KondisettySaidheeraj]

Bro can you send code please.

[@aztra_01]

What if the game gets a Draw?

[@User123_00__]

Good question

[@Hashek]

then just reset lmao

[@fast_develop]

Lol, react documentation game

[@Examplist]

bad pronounciation, couldnt understand words 9:24

[@AlejandroMéndez-j6j]

Oh, poor of you, 1 work stoped you. Go an learn some English so 1 word doesn't stop you next time. No problem for me.

[@atulmourya7130]

bugs alert! if you try to click again the box which is already clicked you will get an error and the count of value is increament as well. use bellow fixed toggle method to escape the issue! const toggle =(e,num)=> { if(lock){ return 0; } if (count%2 === 0){ e.target.innerHTML = ``; if(data[num] === "" ){ data[num] = "x"; setCount(++count); } } else{ e.target.innerHTML = ``; if(data[num] === "" ){ data[num] = "o"; setCount(++count); } } checkwin(); }

[@TheSachinAlam]

great

[@smartandrew2362]

const reset = ()=>{ setLock(false); // let data = ["","","","","","","","",""]; data.fill(""); titleRef.current.innerHTML = 'Tic Tack Toe Game In React' boxArray.map((e) =>{ e.current.innerHTML = ""; }) setCount(0); } this help to solve me the bug which is when i resets the game and make one move instanly it satys wins