React + SASS Header Navbar Component | Fully Responsive | React JS Project Tutorial w/ React Router

In this video, I will be walking you through the build process for a fully responsive and reusable header / navbar component built with the popular JavaScript framework React. For functionality, we'll use modern react hooks and for styling we'll use custom SCSS modules. Towards the end of the video, you'll see how you can implement the react router standard library and how to then connect your navbar links so that your application has full routing capabilities.

📁 Assets

In this project we'll use React, react-router-dom, react-icons, scss modules, css flexbox, and more!

⏱️ Timestamps
0:00 Intro/Demo
2:10 Project Setup
11:00 Navbar Build/Styling
27:20 Navbar State/Functionality
33:45 React Routing
38:40 Outro

👍 Thanks for watching!
Make sure to like and subscribe for more.
Comment what you'd like to see from this channel in the future!

[weather]

This is the best tutorial I've found on React Components thus far.

[oxanasf]

It's was the only navbar tutorial that worked for me. Thanks!

[babyfeavel]

Best responsive navbar tutorial I saw so far! Thank u

[magnusmanz]

Buenísimo, el primer video que encuentro de cómo implementar Sass con React, y lo mejor de todo usando module. Eres genial! Gracias por el video!

[NoorMuhammad-hxhy]

I am from Pakistan and I love your Work that is Amazing

[mindatoryX]

Thx for the tutorial, it was very easy to follow

[luandesouza]

Thanks! It helped me to build my navbar, great video! Very clear

[Leo-jhnj]

awesome work, I learn a lots from your video, thanks a lot !

[gabrielramone]

Thanks \o/
Now my project has a very cool navbar. haha

[МихаилАндросюк-шц]

Thanks a lot! Short and great video. Finally I understood how use classNames and styles in React.

[ViniciusPR]

Hi CodeFocus. I cloned your projects to play with it and I saw that the removeEventListener does not work. I put a console.log() inside the addEventListener to see it to log only once. Because your are adding and then removing right after. However, the log appear all the time when we resize. Looks like the removeEventListener is not working. Do u know why?

[bhargavipadhya]

Isn't node-sass now deprecated? But I love the tutorial. Will try it with react+Vite+SCSS! Thank you.

[CoconutwCoco]

this would be the perfect navbar tutorial for me with react n sass. but could we get an update version especially regarding react router

[babyfeavel]

If you are having issues when loading the smaller size initially and not getting the menu size, you may change the useState setSize to initial values 300, this will allow the menu to pop out

const [size, setSize] = useState({
//This is the original
width: undefined
height: undefined,
//This is the new code
width: 300,
height: 300,
});

[tomassanimbo]

muito obrigado pela aula, ajudou muito de coração!

[diamanteduul]

5:38 isn't this suppose to be importing css, not scss file? When I tried it with scss non of my styles work but they do work with regular css

[vincentnguyen]

Hi guy, I love this video It so great. But I have a problem, when I open Toggle device toolbar(to check responsive on phone). In the first time I click to Icon navBar, it return true to open the nav but the nav do not appear on the screen, but when I change to another the device, It's working. I just cofuse about the problem. Do you know why? I hope get the response from you.

[JhonyHDV]

Camel Case in className for example is not a good practice?

[alfredgbubemilori]

Thanks a lot for a great video. Also would like to ask please what's the name of the extension responsible for Highlighting the opening tags and closing tags with different background colors on your vs code?

[jakubvodrazka]

Hello, this is probably the best tutorial for making responsive navbars so far. I adapted your design to my needs but I am missing one thing. How does one change the breakpoint of the navbar to turn into a mobile version? I have quite a few links in my navbar so when I am resizing the page I would like it to turn to mobile version sooner. Any tips? Anyways... keep up the great work man!