Make Tic Tac Toe with React | Beginners Tutorial

แชร์
ฝัง
  • เผยแพร่เมื่อ 16 ม.ค. 2025

ความคิดเห็น • 65

  • @Code_Complete
    @Code_Complete  2 ปีที่แล้ว +1

    Check out some of my other web development courses on Skillshare! Get 1 month of Skillshare free using my referral link - www.skillshare.com/r/profile/Laksh-Dwivedee/57076884?gr_tch_ref=on&gr_trp=on

  • @raheelafzal5406
    @raheelafzal5406 2 ปีที่แล้ว +1

    best video on youtube for Tic Tac Toe with React 😍😍😍

  • @cyborganic
    @cyborganic 11 หลายเดือนก่อน +1

    Thanks very much for this tutorial!

  • @kiwiskilled
    @kiwiskilled 4 หลายเดือนก่อน +1

    awesome tutorial.
    just a little tip: for the css classes of box and reset-btn you should add cursor:pointer to show interactivity.
    also in the Board.js you should give your mapped buttons components a key prop "key={idx}" to get rid of the annoying error message in console

  • @sports4yoo
    @sports4yoo ปีที่แล้ว +1

    Really helpful bro.thanks for this tutorial.

  • @MrItzreal
    @MrItzreal 2 ปีที่แล้ว +1

    Thanks for the video! It helped me to really get familiar with the syntax and how to connect components! I'm looking forward for your next video.

    • @Code_Complete
      @Code_Complete  2 ปีที่แล้ว

      I'm glad the tutorial was useful to you! If you have any recommendations for future topics, do let me know 😃

  • @pallzpallz8205
    @pallzpallz8205 5 หลายเดือนก่อน

    Awesome tutorial, thank you so much😇

  • @mariomeza3514
    @mariomeza3514 ปีที่แล้ว +3

    Also pro tip: if you get stuck on some of the parts, you can copy and paste the source code into chat gpt, and have it explain to you the part your stuck on

  • @anniezafar3777
    @anniezafar3777 2 ปีที่แล้ว +1

    thank you. its been very helpful

  • @PauloGu1na69
    @PauloGu1na69 ปีที่แล้ว +1

    great tutorial man. Thankss

  • @kaushikid1
    @kaushikid1 2 ปีที่แล้ว +4

    Extremely useful 👍

  • @brandoncharles9667
    @brandoncharles9667 2 ปีที่แล้ว +1

    Thanks for the help!!

  • @devikapm516
    @devikapm516 ปีที่แล้ว +1

    Thanku so much sir for this

  • @swarnimpaudyal
    @swarnimpaudyal ปีที่แล้ว

    Clear instructions and logic. Thankyou ! It really helped the go back through the basics.

  • @noorb374
    @noorb374 2 ปีที่แล้ว +1

    plz make more videos , it very helpful

  • @Viezieg
    @Viezieg 2 ปีที่แล้ว +1

    thank you so much !

  • @harshitsachan154
    @harshitsachan154 ปีที่แล้ว

    This is a really helpful educational resource. I was very impressed with your pedagogy skills. Looking forward to more great content. Thank you for sharing this informative content.😇

  • @DUGALAMNAVEEN
    @DUGALAMNAVEEN ปีที่แล้ว

    super bro it is really help full we need more projects explanations to increase over knowledge

  • @petridev77
    @petridev77 2 ปีที่แล้ว +1

    Thank you!

  • @Flower-ho2kp
    @Flower-ho2kp 2 ปีที่แล้ว +1

    great video! thank you very much :)

  • @SandeepYadav-gz6pw
    @SandeepYadav-gz6pw 2 ปีที่แล้ว +1

    Great video bro you are pretty good with react 😊

    • @Code_Complete
      @Code_Complete  2 ปีที่แล้ว

      Thanks a lot! Do let me know if there's any project/topic you want me to make a video on!

    • @daminiraj4846
      @daminiraj4846 2 ปีที่แล้ว +1

      React redux beginner project

  • @Unknown-fe4uk
    @Unknown-fe4uk 5 หลายเดือนก่อน

    Good One Bro 👍. Could Have Added Draw Condition Also

  • @ebunoluwaoni3962
    @ebunoluwaoni3962 2 ปีที่แล้ว

    thank you very much,i found it useful for my assignment and it was well explained

    • @Code_Complete
      @Code_Complete  2 ปีที่แล้ว

      You're most welcome, glad I could help! 😊

  • @karankumar-mt1sx
    @karankumar-mt1sx 2 ปีที่แล้ว +1

    thnks a lot! very helpfull video

    • @Code_Complete
      @Code_Complete  2 ปีที่แล้ว

      Thanks! I'm glad it helped

    • @veterancode2523
      @veterancode2523 2 ปีที่แล้ว

      React js another projects try th-cam.com/video/tuInCmwydEY/w-d-xo.html

  • @ManishKumar-vx2xe
    @ManishKumar-vx2xe ปีที่แล้ว +1

    hello at 15:51 how to you clean your box value ...

    • @Code_Complete
      @Code_Complete  ปีที่แล้ว +1

      Adding a useState to the boards variable with an initial null array should clear it up

    • @ManishKumar-vx2xe
      @ManishKumar-vx2xe ปีที่แล้ว

      @@Code_Complete thank you

  • @holmdev
    @holmdev ปีที่แล้ว +1

    if the board is full and no one have three in row , how do we reset the board then

  • @anniezafar3777
    @anniezafar3777 2 ปีที่แล้ว +1

    you should make more videos on react tutorials.

  • @driveandlisten2062
    @driveandlisten2062 6 หลายเดือนก่อน

    it's amazing.....can you please make an react course from scratch to advance😀 you are awesome at teaching🥰 god bless you brother

  • @MythicalNightsPodcast
    @MythicalNightsPodcast 2 ปีที่แล้ว +3

    Hi excelent video, but could you do this same video but using zutand to keep the winer players and create microstore to save the board if the user refresh the page, the board and the winers player keep them values.

    • @Code_Complete
      @Code_Complete  2 ปีที่แล้ว +3

      Glad you liked the video! I haven't used these these technologies before but I'll try my best to read up on them and make a tutorial!

    • @MythicalNightsPodcast
      @MythicalNightsPodcast 2 ปีที่แล้ว

      @@Code_Complete sound realy great!! keep going, I learn so much with this video!! {

    • @cmenterprises6592
      @cmenterprises6592 2 ปีที่แล้ว +1

      Sir please use local storage for score store and update as well

  • @vetri4206
    @vetri4206 2 ปีที่แล้ว +1

    please what shortcut did you use to clean up the code at 11:01 ?

    • @Code_Complete
      @Code_Complete  2 ปีที่แล้ว +1

      In VS Code you can go into the settings and turn on “Format on Save” which will clean up your code whenever you save a file. Hope that helps!

    • @vetri4206
      @vetri4206 2 ปีที่แล้ว +1

      @@Code_Complete thanks bro

  • @venkatramisetti6961
    @venkatramisetti6961 2 ปีที่แล้ว +1

    Please do make more videos

  • @calixtepaul3306
    @calixtepaul3306 ปีที่แล้ว

    Which extra packages does he have installed? Not a huge deal but I don't have access to the rafc shortcut and couldn't find any extension in vs code that does.

  • @David-co5gy
    @David-co5gy 2 ปีที่แล้ว +1

    When you use the reset button after x's turn, the game starts on o's turn. How would you make it so the game always starts on x?

    • @Code_Complete
      @Code_Complete  ปีที่แล้ว

      In the resetBoard function, you can add setXPlaying(true). So no matter who ends the game, it always starts on X when the board is reset

  • @shivamtoons12
    @shivamtoons12 ปีที่แล้ว +1

    One of my instructor have same teaching style.. are you chandra sir?

  • @LucaLucci-u8g
    @LucaLucci-u8g 8 หลายเดือนก่อน

    Doesn't work to me: it give to me false results many time

  • @pushupnow7518
    @pushupnow7518 2 ปีที่แล้ว +1

    you so cool

  • @daminiraj4846
    @daminiraj4846 2 ปีที่แล้ว

    Grt

  • @lalit-singh-bisht
    @lalit-singh-bisht ปีที่แล้ว

    that onClick created so much confusion...and is one of the worst things for me in this app

  • @gonguyen7102
    @gonguyen7102 ปีที่แล้ว

    It's so hard to understand 😢

  • @daanvanhove9657
    @daanvanhove9657 ปีที่แล้ว

    Noice

  • @synster693
    @synster693 ปีที่แล้ว

    'beginner'

  • @mayankkankoriya4620
    @mayankkankoriya4620 2 ปีที่แล้ว +1

    Time 27.34 and line no 9 in scoreboard.js how it is possible to write strings in ' score x-score ${ !xplaying}'

    • @Code_Complete
      @Code_Complete  ปีที่แล้ว

      It’s called template literals, a feature in ES6 which allows writing variables inside strings