Responsive Navbar in React using React Router | Beginner Tutorial

แชร์
ฝัง
  • เผยแพร่เมื่อ 24 ธ.ค. 2024

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

  • @Code_Complete
    @Code_Complete  11 หลายเดือนก่อน +4

    Have questions or feedback? Head over to our Discord server! discord.gg/TWBtv5an7N
    Solve advanced programming challenges and become an expert software engineer with CodeCrafters! 40% discount on your membership - app.codecrafters.io/join?via=CodeCompleteYT

  • @chrisdavis1508
    @chrisdavis1508 9 หลายเดือนก่อน +10

    I loved how you broke down the 'why' as you were going along! that was SUPER helpful from a backend guy that struggles with the 'WHY' of CSS!! Thank you

    • @Code_Complete
      @Code_Complete  8 หลายเดือนก่อน +1

      CSS can be confusing sometimes haha, glad it helped!

    • @Ace-n3t
      @Ace-n3t 8 หลายเดือนก่อน

      Midway through the video, I wanted to make the same color. I really appreciate all the why explanations. Great video.

  • @Nop3.1
    @Nop3.1 10 หลายเดือนก่อน +9

    I really appreciate this man. There a billion ways to make a navbar and very few of them are friendly to the beginner. thanks for the introduction!

    • @Code_Complete
      @Code_Complete  10 หลายเดือนก่อน +1

      Glad I could help!

  • @sylvainbecquaert6870
    @sylvainbecquaert6870 7 วันที่ผ่านมา

    It's useless to copy Github code without have seen this video before. Thanks for explanations. Perfect for beginners. 🙂

  • @25-cse-csmohitkumarmandal59
    @25-cse-csmohitkumarmandal59 10 หลายเดือนก่อน +4

    Easiest Explanation to the point ❤❤

    • @Code_Complete
      @Code_Complete  10 หลายเดือนก่อน +4

      Glad you think so!

  • @lrachelparaiso7334
    @lrachelparaiso7334 11 หลายเดือนก่อน +4

    Clear, precise & very helpful! 👍👍👍Thank you…pls keep making these tutorials! ✅✅✅

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

    This is clear and so simple and so helpful!

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

    Explained in a manner that it became easy to understand for beginners like myself. Thanks a lot!

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

    Great video! I'm a beginner at React and your video has helped me so much.

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

    I’m 3 mins in and I’m already sure this would be prefect for me. Love your style of explanation. Precise, straight to the point and your pronunciation is clearest I’ve heard from an Indian TH-camr🤌🤍

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

    Amazing tutorial!! Really easy to understand!

  • @Gaamaa-oz5ef2lf3n
    @Gaamaa-oz5ef2lf3n 9 หลายเดือนก่อน +1

    Simple and excellent explanation !
    4 star

  • @fletcherrat337
    @fletcherrat337 ปีที่แล้ว +6

    Exactly what I needed right when I needed it. Ty for the vid and the repo!! Really helpful to a beginner

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

    Worked just the way it should, I found out you can add some cool transitions to the menu bar using this line of code on Css. (colour is of course of your choosing!)
    nav .menu:not(.active):hover {
    background-color: #40703a;
    padding: 4px; /* Adjust padding to increase the size */
    transition: all 0.2s ease; /* Smooth transition effect */
    border-radius: 4px; /* Optional: Adds rounded corners */
    }

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

    Keep making videos Don't stop

  • @mbalizungu4330
    @mbalizungu4330 2 หลายเดือนก่อน

    Absolutely super gorgeous. What a stellar tutorial, thank you so much.

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

    Best up to date tutorial

  • @faizaislam6191
    @faizaislam6191 8 หลายเดือนก่อน

    very helpful and easy to understnad especially for beginner, thank you

  • @abhinand665-t8l
    @abhinand665-t8l 8 หลายเดือนก่อน +1

    Thank you... Excellent tutorial

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

    Great vid! A tad bit of feedback if I may, the menu doesn't close when clicked elsewhere (Need to click specifically on the hamburger lines). A simple solution might the use of useEffect hook to listen for a mouse click and gauge whether it is within the borders of the menu or not, and then the useRef hook to refer to the relevant div in the rendered HTML and ensure the open/close state of the menu is toggled accordingly. current.contains(e.target) returns a boolean indicating whether the click was within the borders of the menu or not.

    • @annetantanella5913
      @annetantanella5913 2 หลายเดือนก่อน

      You can also attach a callback function to the link components onClick. If the value of menuOpen is true, set it to false.
      Example: Movies

  • @ayshasaddi8963
    @ayshasaddi8963 10 หลายเดือนก่อน +1

    Great video! Thanks!

    • @Code_Complete
      @Code_Complete  10 หลายเดือนก่อน

      Glad it helped!

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

    great tutorial!. Thank you!!!

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

    Excellent Tutorial..

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

    Wow Excellent Video🤩🤩🤩

    • @Code_Complete
      @Code_Complete  11 หลายเดือนก่อน

      Thank you! Cheers!

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

    Thank you so much!

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

    GOOD JOB BROTHER THANK YOU SO MUCH

  • @malcomk
    @malcomk 10 หลายเดือนก่อน +2

    Sir, around 9:30 as soon as we start adding route, the website started go white. And nothing shows since then even though I continued following the instruction and updated css for nav, app, etc. would you have any idea why the pages go blank as soon as I started writing code with routes?

    • @MrRoy69
      @MrRoy69 10 หลายเดือนก่อน +1

      same issue did you resolved it?

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

      import it pro like as he write it , it auto import at the top or write it like that

  • @abduab5453
    @abduab5453 10 หลายเดือนก่อน +2

    thank you

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

    That’s a GREAT video, although I want to see how can we make the menu to switch to an X then to lines

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

    Great video

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

    around the 22:52 mark how do you get the background to take the entire 100% width? the same CSS doesnt work for me haha

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

    Awesome! appreciate!

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

    Thank you very much for your help

  • @CodeJourneyWithRahul
    @CodeJourneyWithRahul 10 หลายเดือนก่อน +2

    Thanks

  • @noohkot
    @noohkot 7 หลายเดือนก่อน

    Thanks for the super helpful video! I really love your explanation along the way! Keep up the good work!

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

    Excellent

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

    good stuff, well explained too :D

  • @devrodSantos
    @devrodSantos 10 หลายเดือนก่อน +1

    Thank you very much

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

    Thank a lot sir helped me a lot ❤

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

    Nice Tutorial

  • @reconnect3342
    @reconnect3342 9 หลายเดือนก่อน +1

    Thanks..Man !

  • @NtlonieManci
    @NtlonieManci 7 หลายเดือนก่อน

    Thank you 🙏

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

    Thank you So much

  • @Pubg9812-h2u
    @Pubg9812-h2u ปีที่แล้ว +1

    love you bro
    live long life

  • @ЕленаЛенивцева-ц9э
    @ЕленаЛенивцева-ц9э 10 หลายเดือนก่อน

    Я еще добавила функцию, которая закрывает меню после перехода по ссылке. Возможно, стоит давать классы по БЭМ или же использовать css-модули. Но в целом мне все нравится, спасибо)

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

    Thanks Buddy

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

    shall we write in visual studio code? because the files are in jsx

    • @Code_Complete
      @Code_Complete  10 หลายเดือนก่อน

      Yup you can use VS Code or any editor you like, just know that when using Vite you have to name the files .jsx

    • @sujatha204
      @sujatha204 10 หลายเดือนก่อน

      Tq🎉​@@Code_Complete

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

    I subscribed

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

    pls explain difference between BrowserRouter vs createBrowserRouter.. and make a tutorial for it..

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

    I probably missed something , but how are you rendering this to the page without “export default App;”

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

    How to routes to single page web apps like portfolio, (i.e). When the touch the navber that scroll down to that content..

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

      I use react-scroll module and also useLocation

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

    in my case this active link color also appears for website what should i do

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

    Hey man, I've been looking for someone that can tell me what the cpm for react tutorials channels is. could you please tell me what the current cpm is?

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

    How can we animate the drop-down list when the bars are clicked
    Plz help

  • @azka-c6q
    @azka-c6q 3 หลายเดือนก่อน

    your voice is so beautiful

  • @swarup868
    @swarup868 7 หลายเดือนก่อน

    why sapn elements are used

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

  • @shoaibms-012
    @shoaibms-012 9 หลายเดือนก่อน

    abe yrr ky akr raha he link add krna acche se samjhana tha khan kon si cheez import karni he tu laga hua styling karne

  • @AjayParihar-r5o
    @AjayParihar-r5o ปีที่แล้ว

    ul taking space and it is not proper

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

    help please Uncaught TypeError: Cannot destructure property 'basename' of 'React2.useContext(...)' as it is null.
    at LinkWithRef (index.tsx:529:11)
    at renderWithHooks (react-dom.development.js:16305:18)
    at updateForwardRef (react-dom.development.js:19226:20)
    at beginWork (react-dom.development.js:21636:16)
    at beginWork$1 (react-dom.development.js:27426:14)
    at performUnitOfWork (react-dom.development.js:26557:12)
    at workLoopSync (react-dom.development.js:26466:5)
    at renderRootSync (react-dom.development.js:26434:7)
    at recoverFromConcurrentError (react-dom.development.js:25850:20)
    at performConcurrentWorkOnRoot (react-dom.development.js:25750:22)

    • @jayson8111
      @jayson8111 11 หลายเดือนก่อน

      i have the same error, how do you solve this?