How To Make Tic Tac Toe Game In React | Create Tic-Tac-Toe Using React JS
HTML-код
- Опубликовано: 7 сен 2023
- Learn How To Make Tic Tac Toe Game In React | Create Tic-Tac-Toe Using React JS Step by step tutorial
❤️ SUBSCRIBE: @GreatStackDev
In this tutorial we will learn to create Tic Tac Toe Game in React JS. This will be completely functional game that can be played by 2 players. After wining it will display the winner name. We will build this Tic Tac Toe game using HTML, CSS and React JS.
Download the assets: drive.google.com/file/d/1Rmqw...
👉 React Introduction Tutorial: • What Is React (React J...
#ReactJS #ReactJsTutorial #WebDevelopment #GreatStack
-------------------------------------
Build more React JS projects:
Complete Portfolio Website In React:
👉 • How To Make Portfolio ...
Build ChatGPT Clone In React:
👉 • Build ChatGPT In React...
Build AI Image Generator with OpenAI In React
👉 • Build An AI Image Gene...
Create Weather App In React
👉 • How To Create Weather ...
-------------------------------------
Recommended Videos:
Learn Complete HTML and CSS from basics:
► • HTML And CSS Tutorial ...
Make A Complete Website for college using HTML & CSS:
► • How To Make A College ...
How to make personal resume website step by step:
► • How To Make A Website ...
How to make an Ecommerce Website Design:
► • How To Make eCommerce ...
How to make travel website design with HTML CSS Bootstrap:
► • How To Make A Website ...
-------------------------------------
Connect with me:
👉 linktr.ee/iamavinashkr
Connect with GreatStack:
Instagram: / greatstackdev
Twitter: / greatstackdev
Facebook: / greatstack
Thank you for this awesome tutorial ❤
This is awesome tutorial, i can now easily make tic tac toe game. Thanks for this ❤ best yourube channel to learn frontend development.
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🙏
Nice tutorial 😊
Thank you for such valuable content.
Thanks for this video, Need a Javascript video continuation....
FINALLY MY FIRST REACT PROJECT THAT WORKS!
It was very useful
Do you need channel seo manager?
Awesome
Awesome keep it up .
.
Nice
Love and guidance ❤
Nice project made it but if I click at same postion more than once the output is different
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
Wonderful, friend.
çok teşekkürler :)
more react content
thank you
cool game making bro
Thanks...
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
how to create mulitple product details page in single html page using JavaScript please reply sir
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.
Please make some videos with Svelte or SvelteKit...
dude, such a nice video and no github link ?
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.
At timestamp 16:50,
In TicTackToe Component,
Why have you repeated the code from line 61 to 64?
Change data values.
pls provide your Git hub link
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.
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?
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.
@@GreatStackDevhow to create username and highest score in sec.
hi bro there is bug, where i finished game with toe. You haven't checked this situation.
Bro on the next Please make a video about full stake freelancer website
why images are not showing when i import
How to add draw msg, if there is draw?
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!';
}
It is not working properly
Bhai tumne data array ko tictac ka function hai na usse bahar karo sayad kaam kar jaye ye
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
how to add draw condition?
npm create-react-app . is taking hours to install. What should I do?
First you need to install node js on your system
npm create vite@latest
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.
hiiiii
Sir my output is showing error that e is not defined and useRef is not defined why is that
useRef should be inside: const TicTacToe = () => { let titleRef = useRef(null);
}
and in
return ( Tic Tac toe Game In React )
Lol, react documentation game
guys i am getting error in @4:44
Why does my toggle function not working?
Listen tumne data array ko sayad tictac toe ka component ke upar declarr karo chal jayega
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
At 9:29 const toggle = (e,num) =>{ replace w with e
and for useState you need to import it " import { useState } from 'react'; "
Reset the counter on reset
What if the game gets a Draw?
Good question
then just reset lmao
bad pronounciation, couldnt understand words 9:24
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.
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();
}