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

Подписаться 1 млн

Просмотров 71 тыс.

50% 1

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

Опубликовано:

7 сен 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 70

@iftyrahman2239 9 месяцев назад

Thank you for this awesome tutorial ❤

@n0social 3 месяца назад

FINALLY MY FIRST REACT PROJECT THAT WORKS!

@abhinavgupta1219 9 месяцев назад

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

@NikhilPawar151 8 месяцев назад

Thank you for such valuable content.

@ifeomadymphna 9 месяцев назад

Nice tutorial 😊

@Eclipssed 9 месяцев назад

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🙏

@palanimathi4493 9 месяцев назад

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

@orlandoferazzani3639 3 месяца назад

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

@dancepractice805 9 месяцев назад

It was very useful

@SandeepMR26 8 месяцев назад

Awesome keep it up . .

@prakashchalke1708 8 месяцев назад

Wonderful, friend.

@mdsabbirhossen884 9 месяцев назад

Do you need channel seo manager?

@user-os4lj3pi4q 2 месяца назад

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.

@tebiksingh 6 месяцев назад

Love and guidance ❤

@user-zw7vd7fj1q 6 месяцев назад

cool game making bro

@loser8198 9 месяцев назад

Awesome

@Nanashi-rq7lk 9 месяцев назад

Nice

@Zetsu1307 4 месяца назад

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.

@joshuasappor5435 6 месяцев назад

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

@devrimsarikaya 4 месяца назад

çok teşekkürler :)

@tarun7453 9 месяцев назад

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

@aymenbachiri-yh2hd 6 месяцев назад

thank you

@franciskp9117 2 месяца назад

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.

@feekz8590 Месяц назад

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

@user-vp7gf2yi8n 8 месяцев назад

Thanks...

@rachappajiachar5062 9 месяцев назад

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

@ibrohimismoilov8345 5 месяцев назад

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

@aswinkrishna9783 4 месяца назад

why images are not showing when i import

@yashlad9412 9 месяцев назад

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

@economicblast 9 месяцев назад

Change data values.

@ArshaqAk 8 месяцев назад

It is not working properly

@govindsharma973 3 месяца назад

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

@omsatishthanage6083 3 месяца назад

how to add draw condition?

@dipankarpaul3405 9 месяцев назад

Please make some videos with Svelte or SvelteKit...

@arunkumar-pr1rg 2 месяца назад

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

@heyyangshuman 5 месяцев назад

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

@User123_00__ 5 месяцев назад

First you need to install node js on your system

@pratishrutisahoo7 4 месяца назад

npm create vite@latest

@ParallelXL 9 месяцев назад

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 9 месяцев назад

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.

@officialSportsE 9 месяцев назад

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

@pain5772 8 месяцев назад

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

@FesiBaya 8 месяцев назад

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

@eugeneokaka 9 месяцев назад

more react content

@kondisettysaidheeraj4276 16 дней назад

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

@sonalkhapre5716 9 месяцев назад

How to add draw msg, if there is draw?

@rashmithagudipudi5979 9 месяцев назад

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!'; }

@shreyashyadav4169 9 месяцев назад

pls provide your Git hub link

@user-xe6ru6rt2l 9 месяцев назад

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

@user-lm6dv9nt3f 7 месяцев назад

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 6 месяцев назад

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

@salimbendag6274 5 месяцев назад

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

@titikshyachanda8623 5 месяцев назад

Why does my toggle function not working?

@govindsharma973 3 месяца назад

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

@KondisettySaidheeraj 19 дней назад

Please provide git link

@SBamniya 9 месяцев назад

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 8 месяцев назад

hiiiii

@opivcm4566 8 месяцев назад

guys i am getting error in @4:44

@acardona8340 4 месяца назад

Reset the counter on reset

@KondisettySaidheeraj 19 дней назад

Bro can you send code please.

@fast_develop 9 месяцев назад

Lol, react documentation game

@aztra_01 7 месяцев назад

What if the game gets a Draw?

@User123_00__ 5 месяцев назад

Good question

@Hashek 3 месяца назад

then just reset lmao

@Examplist 6 месяцев назад

bad pronounciation, couldnt understand words 9:24

@user-os4lj3pi4q 2 месяца назад

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 2 месяца назад

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(); }