No video

Responsive Navbar in React using React Router | Beginner Tutorial

Learn how to make a responsive navbar in React using React Router. The navbar shows the active page, highlights links on hover, and sticks to the top of the page on scrolling. This project is a great introduction to the basics of routing in react using React Router.
🚨 Break into a software dev career with this free course from CourseCareers! - coursecareers.com/a/TechStack... 🚨
Discord - / discord
Subscribe - / @code_complete
☕ Donate to support the channel! - www.buymeacoffee.com/CodeComp...
-- 🌟 Useful Tools and Software 🌟 --
🌐 10% off domains at Domain.com (use code DOMAIN10) - domain.mno8.net/CodeComplete
☁️ FREE $100 for server hosting on Linode - linode.gvw92c.net/CodeComplete
📚 30% off annual Skillshare membership (use code annual30aff) - skillshare.eqcm.net/CodeComplete
-- 🔗 Links 🔗 --
💻 Code - github.com/CodeCompleteYT/rea...
DISCLAIMER: Some of the links in the description are affiliate links. The channel will receive a small commission from any sales from these links, but there is no extra charge to you. Thanks for supporting the channel so I can keep making these free tutorials!

Пікірлер: 60

  • @Code_Complete
    @Code_Complete7 ай бұрын

    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

  • @Nop3.1
    @Nop3.15 ай бұрын

    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

    5 ай бұрын

    Glad I could help!

  • @user-fe6sj2yd8c
    @user-fe6sj2yd8c9 ай бұрын

    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 KZreadr🤌🤍

  • @fletcherrat337
    @fletcherrat33711 ай бұрын

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

  • @lrachelparaiso7334
    @lrachelparaiso73347 ай бұрын

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

  • @chrisdavis1508
    @chrisdavis15084 ай бұрын

    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

    4 ай бұрын

    CSS can be confusing sometimes haha, glad it helped!

  • @user-dm5mr5tw1e

    @user-dm5mr5tw1e

    3 ай бұрын

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

  • @noohkot
    @noohkot3 ай бұрын

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

  • @faizaislam6191
    @faizaislam61913 ай бұрын

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

  • @senalchandrasekara8874
    @senalchandrasekara887410 ай бұрын

    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.

  • @rhamseysgarcia2287
    @rhamseysgarcia2287 Жыл бұрын

    Best up to date tutorial

  • @chaand3423
    @chaand3423 Жыл бұрын

    good stuff, well explained too :D

  • @lalaniwerake881
    @lalaniwerake8819 ай бұрын

    great tutorial!. Thank you!!!

  • @Gaamaa-oz5ef2lf3n
    @Gaamaa-oz5ef2lf3n4 ай бұрын

    Simple and excellent explanation ! 4 star

  • @gajanankanekar9118
    @gajanankanekar911829 күн бұрын

    Thank you very much for your help

  • @abhinand2682
    @abhinand26823 ай бұрын

    Thank you... Excellent tutorial

  • @godofwar8262
    @godofwar826211 ай бұрын

    Keep making videos Don't stop

  • @usamashahid6701
    @usamashahid6701 Жыл бұрын

    Excellent Tutorial..

  • @25-cse-csmohitkumarmandal59
    @25-cse-csmohitkumarmandal595 ай бұрын

    Easiest Explanation to the point ❤❤

  • @Code_Complete

    @Code_Complete

    5 ай бұрын

    Glad you think so!

  • @aryangohel9967
    @aryangohel99677 ай бұрын

    Thank a lot sir helped me a lot ❤

  • @Shaburu69
    @Shaburu69 Жыл бұрын

    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

  • @gohelboy
    @gohelboy7 ай бұрын

    Great video

  • @glefordbanglayan5322
    @glefordbanglayan53225 ай бұрын

    GOOD JOB BROTHER THANK YOU SO MUCH

  • @ferrouswroughtnaut3230
    @ferrouswroughtnaut3230 Жыл бұрын

    Nice Tutorial

  • @abhinavs2484
    @abhinavs24845 ай бұрын

    Awesome! appreciate!

  • @jawadsherazi6954
    @jawadsherazi6954 Жыл бұрын

    Thank you So much

  • @devrodSantos
    @devrodSantos5 ай бұрын

    Thank you very much

  • @Anonymous____________A721
    @Anonymous____________A7216 ай бұрын

    Excellent

  • @ayshasaddi8963
    @ayshasaddi89636 ай бұрын

    Great video! Thanks!

  • @Code_Complete

    @Code_Complete

    5 ай бұрын

    Glad it helped!

  • @user-qf5wx1oc2y
    @user-qf5wx1oc2y2 ай бұрын

    Thank you 🙏

  • @reconnect3342
    @reconnect33424 ай бұрын

    Thanks..Man !

  • @shamsliaqat4732
    @shamsliaqat47327 ай бұрын

    Thanks Buddy

  • @abduab5453
    @abduab54535 ай бұрын

    thank you

  • @yourdady8448
    @yourdady844810 ай бұрын

    love you bro live long life

  • @ParasProgramming123
    @ParasProgramming123 Жыл бұрын

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

  • @adeebrahman5798
    @adeebrahman579811 ай бұрын

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

  • @always_code
    @always_code6 ай бұрын

    Wow Excellent Video🤩🤩🤩

  • @Code_Complete

    @Code_Complete

    6 ай бұрын

    Thank you! Cheers!

  • @Threenineswon20racks
    @Threenineswon20racks8 ай бұрын

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

  • @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
    @devl0ver66627 күн бұрын

    I subscribed

  • @malcomk
    @malcomk5 ай бұрын

    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

    5 ай бұрын

    same issue did you resolved it?

  • @velumani2980
    @velumani2980 Жыл бұрын

    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

  • @user-dp7cx3kg4t
    @user-dp7cx3kg4t5 ай бұрын

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

  • @jasim17
    @jasim174 ай бұрын

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

  • @swarup868
    @swarup8682 ай бұрын

    why sapn elements are used

  • @sujatha204
    @sujatha2046 ай бұрын

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

  • @Code_Complete

    @Code_Complete

    6 ай бұрын

    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

    5 ай бұрын

    Tq🎉​@@Code_Complete

  • @user-hq1yj4wd2u
    @user-hq1yj4wd2u10 ай бұрын

    ul taking space and it is not proper

  • @CartoonKingdom99
    @CartoonKingdom995 ай бұрын

    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

  • @julianadelosrios9876
    @julianadelosrios987611 ай бұрын

    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

    6 ай бұрын

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

Келесі