Create Tabs with React !

แชร์
ฝัง
  • เผยแพร่เมื่อ 9 ก.พ. 2025
  • 🔥 Source code : github.com/Zir...

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

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

    I love this, very short, straight to the point and informative. This actually helped me, so please keep it up.

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

    Thanks brother. I had been looking for this solution all over the internet. Thanks.

  • @al-meqdadjabi8745
    @al-meqdadjabi8745 2 ปีที่แล้ว +1

    Actually the most straight forward Video I have ever seen about such subject Good job man keep up the good work Love it

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

    finally, after trying to find some decent approach of this, i finally found it ! thank you mate

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

    Simple, short and straight to the point.

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

    Love you bro , you saved me I was stucked badly in this

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

    Thanks a lot for this!! I've been searching around trying to find a simple way to do this for ages. Really appreciate it :)

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

    Very easy to follow and straight to the points. Other videos had extra coding and very long for same outcome. Thank you.

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

    Short and sweet, and with no packages, well done, you earned my sub!

  • @JUST_CORELDRAW
    @JUST_CORELDRAW 3 หลายเดือนก่อน

    I immediately subscribed to your channel when you said most videos show how to do this with dependencies when we can just do it with React. Thanks for this video I didn't know it was this simple. I need to work more on my logical reasoning 😅

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

    Awesome content. To the point and no time wastage. Have been searching for similar tutorial and here it is. Thank you so much for sharing.

    • @TheWebSchool
      @TheWebSchool  3 ปีที่แล้ว

      Thanks for the kind comment

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

    Short and Informative. Job well done. Thank you.

  • @TheWebSchool
    @TheWebSchool  4 ปีที่แล้ว +8

    Indeed use instead of for the tabs !
    I made this quickly for this tutorial purpose and I've overlooked that :)
    (I already made the changement in the source code though)

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

    Thank you bro, finally i can found custom tabs in react..
    This content is very helpfull..

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

      Yeah I don't know why no one had talked about it yet :)

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

    This channel always has good stuff

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

    Amazing tutorial, thank you! I've been trying to figure out how to put tabs on my website without using dependency and you explained it perfectly and gave me a better understanding of using State. #SUBSCRIBED!

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

    love u men, final project from a bootcamp and being stucked using swipers to get ugly styles, and you come with that, so easy to understand, and handsome teaching skills, thank you very much!

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

    THIS IS SO PERFECTLY SIMPLE!!! Thank you

  • @S.E_RayZ
    @S.E_RayZ 2 ปีที่แล้ว

    Well done bro, u saved me from dependencies. Thanks for the video.

  • @codingworld6762
    @codingworld6762 3 ปีที่แล้ว

    Great tutorial on Tabs using React. Thanks . You are TNA Champion!

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

    gracias pa, la vdd no le se mucho a react pero en la empresa nos dieron 1 semana pa aprenderlo y como eso es imposible hay que apoyarse en esas joyas, tenkiu veri mush jeje

  • @rubertuhd
    @rubertuhd 3 ปีที่แล้ว

    dude, thanks a lot! you're right about everyone trying to make you install other libraries to create this, but what i've been looking for i've found in your video.

    • @TheWebSchool
      @TheWebSchool  3 ปีที่แล้ว

      Absolutely, we need to keep it simple as long as we can!

  • @RayMartinez91
    @RayMartinez91 4 หลายเดือนก่อน

    Super simple to do! thank you Sir!

  • @rumeshnonis3906
    @rumeshnonis3906 3 ปีที่แล้ว

    Outstanding method! That was great you provide the source code too.

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

    the github link doesnt work.

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

    source code was not found

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

    and the logic is done now we do need to change the class conditionally....perfect!!!!!!!! Huge Thanks!

  • @ben.aka.bigben
    @ben.aka.bigben 4 ปีที่แล้ว +13

    nice, first component ever with function instead of class

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

    The repo for the source code seems to no longer exist. Anyone know the new or current repo for the source code?

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

    Amazing video man! Straight to the point and helped so much! Cheers

  • @DelandaBaudLacanian
    @DelandaBaudLacanian 3 ปีที่แล้ว

    "vanilla React" I love it, thank you

  • @ashadulmridha6551
    @ashadulmridha6551 3 ปีที่แล้ว

    Awesome Man You Deserve more subscribe

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

    Awesome guys ,what i was looking for

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

    thx ! thats helped me so much !

  • @vipin143kumar
    @vipin143kumar 3 ปีที่แล้ว

    thanks, buddy for this video, I got help in my project because of u. thank u so much, buddy

  • @loogie5679
    @loogie5679 3 ปีที่แล้ว

    That's a very strong french accent you got there my friend :p . Merci beaucoup !

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

      Indeed mate, you're welcome :)

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

    what happened to the source code?

  • @shhdevon
    @shhdevon 3 ปีที่แล้ว

    ty sm dude! rlly helped to finish my portfolio

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

    Ля, спасибо. До меня сначала не дошло, чтобы по индексу сделать

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

    Thanks!!! this tutorial helped me a lot!

  • @parasrawat9321
    @parasrawat9321 4 ปีที่แล้ว

    Very helpful ..
    everyone else were using dependencies .

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

    loved your video keep going

  • @saharshsinha5349
    @saharshsinha5349 3 ปีที่แล้ว

    Works perfectly fine, recommended to beginners.

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

    very fast implementation, thank you !

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

    This was really helpful, thanks

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

    Helped me a Lot

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

    Super easy to understand.!! thank you. I learned a lot

  • @zahrlyttle4450
    @zahrlyttle4450 3 ปีที่แล้ว

    This is exactly what I needed. Thank you!

  • @PaulaOliveira-ih1bf
    @PaulaOliveira-ih1bf 3 ปีที่แล้ว +1

    Very nice tutorial! Thank you so much for this content, it helped me a lot

    • @TheWebSchool
      @TheWebSchool  3 ปีที่แล้ว

      Great, you're welcome ! ✌

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

    Nice bro, im trying to figure out a method toggle classes. This seems perfect

  • @터미샘
    @터미샘 3 ปีที่แล้ว

    Thank you very much your simple code. From Korea.

    • @TheWebSchool
      @TheWebSchool  3 ปีที่แล้ว

      Great ! I hope that I'll be able to visit Seoul one day ✌️

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

    Good explanation. Thank you.

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

    you did it so simple . Thank you

  • @RavindraSingh-lp9pl
    @RavindraSingh-lp9pl ปีที่แล้ว +1

    source code please ?

  • @jhon.bianchi
    @jhon.bianchi 3 ปีที่แล้ว

    love it brooooooooooooooooooo, thank you so much you give a good idea for do that!!!!

  • @pkale7176
    @pkale7176 3 ปีที่แล้ว

    Thank you so much this really helped :)

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

    thanks bro.. Excellent coder.

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

    Very good video!

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

    simple and efficient. Nice job thanks

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

    Thank you this helped alot.

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

    The link to the source files seems to be broken...Is there an updated link? Great video!

  • @lofi_Insomnia_
    @lofi_Insomnia_ 3 ปีที่แล้ว

    I understand your course. GOod job!

  • @livetheworld23
    @livetheworld23 3 ปีที่แล้ว

    it worked ! So Happy 😇😇

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

    Good video, though you don't show the css file quite well

  • @dechto1
    @dechto1 3 ปีที่แล้ว

    Thank you very much for such a wonderful lesson!!!

  • @lekvikwertik6658
    @lekvikwertik6658 3 ปีที่แล้ว

    Thank u man)
    Real simple and good case solution

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

      You're welcome, have a nice day!

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

    Very nice tutorial! Thank you so much for this content..

  • @hamn_n1483
    @hamn_n1483 3 ปีที่แล้ว

    Thank you so much, it help me a lot :D.

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

      You're welcome ✔️✔️

  • @nairgh
    @nairgh 3 ปีที่แล้ว

    Thanks . Nice Tutorial. If we want to disable one tab what is the best way . I think button disable right ?

  • @anandagharami8957
    @anandagharami8957 3 ปีที่แล้ว

    Aswome video,sir

  • @mayurbahuguna8438
    @mayurbahuguna8438 3 ปีที่แล้ว

    Hey can I put cards of my projects inside those tabs to show case my portfolio?
    Will it be an optimized way as we are hiding content! here but it's their?
    Or is their any another way! Please let me know!

    • @TheWebSchool
      @TheWebSchool  3 ปีที่แล้ว

      It can be a good way to showcase a portfolio

  • @amish4134
    @amish4134 3 ปีที่แล้ว

    Thank you so much it was very helpful

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

    thanks dude! is so cool and so easy

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

    Thank you very much this is so so helpful T^T

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

    thanks for the tutorial!

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

    Cant access the source code...It says page not found and that you have no public Repos. Please Reply ASAP

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

    Well Played :)

  • @ziyaulrana1840
    @ziyaulrana1840 3 ปีที่แล้ว

    Loved it bro
    Thank you so much.

  • @mirzairtiza5113
    @mirzairtiza5113 3 ปีที่แล้ว

    in tabs mostly hooks dont update their state, do you have any solution,
    im using "import { Tabs } from 'react-simple-tabs-component'" and try others as well but both are not updating hook state

  • @ЕвгенияБольшакова-с4м
    @ЕвгенияБольшакова-с4м 3 ปีที่แล้ว

    Thank you! Super easy and works perfectly

  • @nagireddypanditi6429
    @nagireddypanditi6429 3 ปีที่แล้ว

    Awesome! please make more videos!!! :)

  • @Victor-wh9bs
    @Victor-wh9bs 3 ปีที่แล้ว

    Thanku

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

    Bobby Z I use the signature version but I tNice tutorialnk most of the stuff was also available in the producer edition (I bought that first). I am using

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

    thank's Awesome video 🥰🥰

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

    Olé ! Mais tu fais quoi là à parler anglais ? Moi qui voulais juste créer une boîte d'onglet avec React, voilà que je te retrouve ici ! Bon ben lessgo suivre le tuto alors

  • @parimalaha7642
    @parimalaha7642 9 หลายเดือนก่อน

    can anyone provide the github link
    the provided one is not working

  • @Deddy676
    @Deddy676 3 ปีที่แล้ว

    Great tutorial of Tabs, so easy to understand for pure newbie like me ! hei is this state also working for subnav? like after you click your tabs, and you also need to click another tabs again.
    Would be cool if you create tutorial about that !

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

      Hey, I see what you mean, you can achieve that in pure CSS, but also with React, especially if you want to animate it.
      Thank's for the idea, I will add it to the list of ideas ✔️

    • @Deddy676
      @Deddy676 3 ปีที่แล้ว

      @@TheWebSchool thanks :)

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

    wow very simple. thank you

  • @Rikuyashi
    @Rikuyashi 3 ปีที่แล้ว

    A really nice video.
    But i have one question.
    How can i made out of this a reusable component?

    • @TheWebSchool
      @TheWebSchool  3 ปีที่แล้ว

      Hey thank's!
      Well, it is a reusable component, you can import it and use it wherever you want.
      Here is the source code : github.com/Ziratsu/YT-REACT-TABS
      The component's name is : Tabs.js

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

    thank you!!

  • @pranikz
    @pranikz 3 ปีที่แล้ว

    thanks a ton!

  • @sonhung6632
    @sonhung6632 3 ปีที่แล้ว

    Very useful thank you so much.

  • @samuelloba9339
    @samuelloba9339 3 ปีที่แล้ว

    Bon boulot!

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

    i love you man ❤️

  • @alexlions8633
    @alexlions8633 3 ปีที่แล้ว

    great tutorial thank you bro )

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

    Good Job. Thanks...

  • @syedaanam9811
    @syedaanam9811 4 หลายเดือนก่อน

    Thank u so much

  • @gayathri-8-i6s
    @gayathri-8-i6s 8 หลายเดือนก่อน

    link in description is not working

  • @olamide9108
    @olamide9108 3 ปีที่แล้ว

    Hi, can I add an input in these tabs and maybe a button too?

    • @TheWebSchool
      @TheWebSchool  3 ปีที่แล้ว

      Hey, you can add whatever you want inside those ;)

  • @zerothenumber0
    @zerothenumber0 3 ปีที่แล้ว

    Thanks a lot!