Responsive Navbar in React using React Router | Beginner Tutorial

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

КОМЕНТАРІ • 64

  • @Code_Complete
    @Code_Complete  8 місяців тому +3

    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 5 місяців тому +8

    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  5 місяців тому +1

      CSS can be confusing sometimes haha, glad it helped!

    • @user-dm5mr5tw1e
      @user-dm5mr5tw1e 4 місяці тому

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

  • @Nop3.1
    @Nop3.1 7 місяців тому +8

    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!

  • @lrachelparaiso7334
    @lrachelparaiso7334 8 місяців тому +4

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

  • @user-ee9ex1hz2p
    @user-ee9ex1hz2p 18 днів тому

    This is clear and so simple and so helpful!

  • @25-cse-csmohitkumarmandal59
    @25-cse-csmohitkumarmandal59 7 місяців тому +3

    Easiest Explanation to the point ❤❤

  • @fletcherrat337
    @fletcherrat337 Рік тому +6

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

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

    Keep making videos Don't stop

  • @user-fe6sj2yd8c
    @user-fe6sj2yd8c 10 місяців тому +4

    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 UA-camr🤌🤍

  • @senalchandrasekara8874
    @senalchandrasekara8874 11 місяців тому +2

    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.

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

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

  • @Gaamaa-oz5ef2lf3n
    @Gaamaa-oz5ef2lf3n 5 місяців тому +1

    Simple and excellent explanation !
    4 star

  • @iarawy.
    @iarawy. 21 день тому

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

  • @dreamspiring04
    @dreamspiring04 5 днів тому

    Thank you so much!

  • @abhinand2682
    @abhinand2682 4 місяці тому +1

    Thank you... Excellent tutorial

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

    Best up to date tutorial

  • @gajanankanekar9118
    @gajanankanekar9118 2 місяці тому

    Thank you very much for your help

  • @ayshasaddi8963
    @ayshasaddi8963 7 місяців тому +1

    Great video! Thanks!

  • @usamashahid6701
    @usamashahid6701 Рік тому +2

    Excellent Tutorial..

  • @devrodSantos
    @devrodSantos 6 місяців тому +1

    Thank you very much

  • @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

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

    GOOD JOB BROTHER THANK YOU SO MUCH

  • @malcomk
    @malcomk 6 місяців тому +1

    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 6 місяців тому +1

      same issue did you resolved it?

  • @lalaniwerake881
    @lalaniwerake881 10 місяців тому +1

    great tutorial!. Thank you!!!

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

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

  • @abduab5453
    @abduab5453 6 місяців тому +1

    thank you

  • @reconnect3342
    @reconnect3342 5 місяців тому +1

    Thanks..Man !

  • @gohelboy
    @gohelboy 8 місяців тому +1

    Great video

  • @aryangohel9967
    @aryangohel9967 9 місяців тому

    Thank a lot sir helped me a lot ❤

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

    Thank you So much

  • @user-qf5wx1oc2y
    @user-qf5wx1oc2y 3 місяці тому

    Thank you 🙏

  • @Anonymous____________A721
    @Anonymous____________A721 7 місяців тому +1

    Excellent

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

    Awesome! appreciate!

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

    love you bro
    live long life

  • @always_code
    @always_code 7 місяців тому +1

    Wow Excellent Video🤩🤩🤩

  • @chaand3423
    @chaand3423 Рік тому +2

    good stuff, well explained too :D

  • @Threenineswon20racks
    @Threenineswon20racks 9 місяців тому

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

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

    Nice Tutorial

  • @user-dp7cx3kg4t
    @user-dp7cx3kg4t 6 місяців тому

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

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

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

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

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

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

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

  • @sujatha204
    @sujatha204 7 місяців тому +1

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

    • @Code_Complete
      @Code_Complete  7 місяців тому

      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 6 місяців тому

      Tq🎉​@@Code_Complete

  • @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

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

    Thanks Buddy

  • @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?

  • @devl0ver666
    @devl0ver666 2 місяці тому

    I subscribed

  • @azka-c6q
    @azka-c6q 12 днів тому

    your voice is so beautiful

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

    why sapn elements are used

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

    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 7 місяців тому

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