React Responsive Navbar Tutorial - Beginner React JS Project

Поділитися
Вставка
  • Опубліковано 27 вер 2024

КОМЕНТАРІ • 88

  • @Tech2etc
    @Tech2etc  2 роки тому +6

    Create Portfolio Using React JS 👉👉 ua-cam.com/video/0h2b4ftbZcU/v-deo.html
    Guys SUBSCRIBE & Help us to react 200k SUBS 🔥🔥
    Chapters:
    0:00 Intro
    2:18 Code Sandbox
    8:50 Creating Components
    9:59 Create Navbar
    15:47 Navbar Styling
    22:24 Responsive Navbar
    39:55 Deploy Your Project
    44:52 Download Your Project

    • @sujitbhujbal94
      @sujitbhujbal94 Рік тому

      can you share link for specific tut that solve my react js navigation problem that navigate another page through nav option

  • @recruitmentteam3651
    @recruitmentteam3651 2 роки тому +6

    I was searching for a basic responsive navbar video. Searched a lot but never find. In the end, I found your video. It is just Awesome. Thank you for making it!

    • @Tech2etc
      @Tech2etc  2 роки тому

      Your most welcome. Please share this project on your social media. Will appreciate that.

    • @rishabhgarg5914
      @rishabhgarg5914 Рік тому

      Can I run it on vs code

  • @laponiec
    @laponiec 9 місяців тому +2

    Wow, the best tutorial on responsive navbar so far, there are few moments that I don't understand (mostly the positions of the CSS), but overall a great tutorial. Thank you

  • @Chowdahhh
    @Chowdahhh Рік тому +7

    I liked this! Though I agree with the other guy that you're better off using hooks instead of changing it to a class component. Something else that bugged me is that you added the 'active' className to just the 'Home' list item, but didn't actually include handling to switch which menu item would be active as you switch pages, which makes this navbar feel incomplete.

    • @shivanshmittal4297
      @shivanshmittal4297 11 місяців тому +1

      Exactly, i am wondering that this is soo much hardcoded. and he is saying react based project. it is just a HTML CSS page

  • @mnav709
    @mnav709 Рік тому +8

    Great explanation but consider you could use the state hook instead of turning the component into a class
    > const [clicked, setClicked] = useState(false);

    • @Tech2etc
      @Tech2etc  Рік тому +1

      Thanks for the wonderful suggestion. I will try to use them in my future videos.

    • @ZukoTheShinigami
      @ZukoTheShinigami Рік тому +5

      exactly what I thought.
      Its sorta scary when people making tutorials mislead viewers with practices that aren't up to date, then we end up picking up bad habits 🤦‍♂

    • @rishabhgarg5914
      @rishabhgarg5914 Рік тому

      Can I run it on vs code

    • @mnav709
      @mnav709 Рік тому

      @@rishabhgarg5914 this is a React feature and the editor doesn't matter. You can code in Notepad if you wanted

    • @jhonathan-cs
      @jhonathan-cs Рік тому +1

      const [clicked, setClicked] = useState(false);
      const handleClick = () => {
      setClicked(!clicked);
      };

  • @theLaurrenJoseph
    @theLaurrenJoseph Рік тому

    this is the first video that has explained this to me very well. well done sir, thank you

  • @daviderivona6576
    @daviderivona6576 5 місяців тому

    Thank you very much man, I am not really a frontend guy, but this was very helpful in my most recent project

  • @thatfamiliarstranger
    @thatfamiliarstranger Рік тому

    Your videos are really helpful!! Thank-you for your efforts and the projects! I love this channel.

  • @HrissW
    @HrissW Рік тому

    Great tutorial man!! 💯 No BS, straight to the point 👌🏻

  • @evolutionXXVII
    @evolutionXXVII 3 місяці тому

    You sir, are a CSS jedi master.

  • @askay2382
    @askay2382 Рік тому

    so easy so easy it take just 3.30 hour just btw nice i have done my first project thank you man..

  • @xunkuong8837
    @xunkuong8837 Рік тому

    ty so much, i spend a day for fix this ,after watch your video ,i fixed

  • @loyaltythameem
    @loyaltythameem 2 роки тому +9

    Please continue to reactjs

  • @manishkumar-bw5iv
    @manishkumar-bw5iv 2 роки тому

    Very nice sir.. Please continue this reactjs series.. you explain so well

  • @brahmanimundhe1465
    @brahmanimundhe1465 Рік тому

    When I maximize the the output screen I'm not getting the icons separately on navbar...it still shows just the logo and menu. Can you please help.

  • @Insane.18_7
    @Insane.18_7 11 місяців тому

    Thank you for this bruda ❤. I have one doubt bro how can I give routing to respective for those listed items. I mean like inside Anchor tag how can I give routing can you please tell me. Thank you in advance

  • @Zahid_Al-maeda
    @Zahid_Al-maeda Рік тому

    Shkran Shqiq !! Yarhamuk Allah !! Subhana Allah !! I sucessed in my system
    bro !!!!!!!!!!

  • @lalaniwerake881
    @lalaniwerake881 Рік тому

    Great tutorial, thank you!

  • @durga972
    @durga972 2 роки тому

    Waiting for this video 😍

    • @Tech2etc
      @Tech2etc  2 роки тому +1

      Thank you very much. Please share this project on your social media. I will appreciate that.

  • @thelannymaguillano4612
    @thelannymaguillano4612 Рік тому

    Thank you so much It helped me alot

  • @md.israfil1935
    @md.israfil1935 26 днів тому

    please give me image icons link in this project,

  • @adeusiiyanu5430
    @adeusiiyanu5430 10 місяців тому

    Thanks for this, really helpfull

  • @sujitbhujbal94
    @sujitbhujbal94 Рік тому +1

    plz help.......I'm done with all thing that mention in tut but , I want to make next page of "contact" and that have to be connect with navbar contact button........

    • @Tech2etc
      @Tech2etc  Рік тому +1

      Please checkout our react js playlist for more advance projects.

    • @sujitbhujbal94
      @sujitbhujbal94 Рік тому

      @@Tech2etc I watched but, there is no relevant solution for connect another page with our main page navbar.

    • @sujitbhujbal94
      @sujitbhujbal94 Рік тому

      share that link....plzzz
      @@Tech2etc

  • @thumulabasura
    @thumulabasura Рік тому

    great tutorial, It helps a lot

  • @fitvibeindia
    @fitvibeindia Рік тому

    Nice explanation bro good video at all

  • @raydonosengo2830
    @raydonosengo2830 6 місяців тому

    helpfull🤯🥳

  • @mayurPrmr1182
    @mayurPrmr1182 Рік тому

    Awesome 👌👌👌

  • @horrytech7828
    @horrytech7828 2 роки тому

    Bro Pleace make a video of country picker using css html and js

  • @jialu8630
    @jialu8630 Рік тому

    Thank u so much!!!

  • @minimalcompany49
    @minimalcompany49 Рік тому

    Thank you bro❤

  • @shivasanwale6734
    @shivasanwale6734 Рік тому

    fas fa-bars not working

  • @vimalkumarchaudhary1913
    @vimalkumarchaudhary1913 Рік тому +1

    Hindi mai kiu nhi upload kiye

  • @amira-pf5dw
    @amira-pf5dw 8 місяців тому

    Thannnnnnnnnnnnnk u

  • @hellomister5842
    @hellomister5842 Рік тому

    bongali babu!!

  • @TechTalkTips7
    @TechTalkTips7 2 роки тому

    Nice

    • @Tech2etc
      @Tech2etc  2 роки тому +1

      Thank you very much. Please share this project on your social media. I will appreciate that.

  • @vatansrivastava7279
    @vatansrivastava7279 2 роки тому

    make clones in react js like linkeding instagram etc.

    • @Tech2etc
      @Tech2etc  2 роки тому

      Sure, new videos are coming soon.

  • @nirvana124
    @nirvana124 Рік тому

    when you are doing everything in function, why you need to create a class.

  • @suprabhatsahoo2782
    @suprabhatsahoo2782 4 місяці тому

    Bengali🎉

  • @Jukamo90
    @Jukamo90 Рік тому

  • @kacperkepinski4990
    @kacperkepinski4990 Рік тому +3

    50 min for navbar........

  • @amira-pf5dw
    @amira-pf5dw 8 місяців тому

    Yarbi lhmd li 3t9ni

  • @36547
    @36547 Рік тому +7

    Not good because it isn't showing how to use react router and he is using class instead of functions

    • @Tech2etc
      @Tech2etc  Рік тому +5

      At the very first beginning of the video I already mentioned that its a basic react navbar. I also mentioned another advance react navbar tutorial is coming & it was already been published long time ago.
      Go to the description and watch that video before passing any irrelative arguments.
      Thanks.

    • @999slawter
      @999slawter Рік тому +1

      It is clear, what it is. It is you fault if you are complaining because you need a pear but this is an apple (an it`s 100% clear that this is an apple)
      So the problem is you, not the video.

    • @spacetime3636
      @spacetime3636 8 місяців тому

      Not using react router

  • @aloky247
    @aloky247 5 місяців тому

    Setting up React using Vite only takes a couple of seconds.

  • @adityamarzuk5970
    @adityamarzuk5970 Рік тому +1

    my fa bars didnt show up

  • @crafttechindia
    @crafttechindia Рік тому

    Your explanation was too good even after i dont know class based components still I'm making it

  • @safiq_ur_rahaman
    @safiq_ur_rahaman Рік тому

    Bro just use useState hook instead of changing the whole component to class based component

  • @Willymaster777
    @Willymaster777 Рік тому

    Thank you, your video was very useful in my project, regards from Chile

  • @spacetime3636
    @spacetime3636 8 місяців тому

    Is possible create a navbar respondive with mobile js?

  • @namnguyenhoai9850
    @namnguyenhoai9850 10 місяців тому

    Your video is very helpful, thank you very much

  • @leomacdon7858
    @leomacdon7858 Рік тому

    Amazing tutorial..
    Thanks much from me.
    Really helpful

  • @slipstream01
    @slipstream01 Рік тому

    Thank you for this great explanation and great knoweledge.

  • @snehagour4210
    @snehagour4210 Рік тому

    Thnku sir me bhut time se presan thi mera ho hi nhi ra tha ye menu vala part

  • @thuynguyenngocthanh9646
    @thuynguyenngocthanh9646 5 місяців тому

    Thank you so much Sir

  • @sujitbhujbal94
    @sujitbhujbal94 Рік тому

    excellent tutorial

  • @aothymahmudmoon3578
    @aothymahmudmoon3578 Рік тому

    awesome bro

  • @jokera7570
    @jokera7570 Рік тому

    awesome bro

  • @juliusngeno1804
    @juliusngeno1804 Рік тому

    Awesome Content

  • @petermwansa4890
    @petermwansa4890 Рік тому

    Thank you

  • @emreaydogdu5413
    @emreaydogdu5413 2 роки тому

    Amazing as always!
    Thanks for labour and info sharing!

    • @Tech2etc
      @Tech2etc  2 роки тому

      Your most welcome. Please share this project on your social media. Will appreciate that.

  • @loyaltythameem
    @loyaltythameem 2 роки тому

    Awesome 👍😎

    • @Tech2etc
      @Tech2etc  2 роки тому

      Thank you so much. Please share this project on your social media. Will appreciate that.