Responsive Navbar In React With Styled Components Tutorial

Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial

#reactjs #coding

[luiss.becerra]

It is so well explained, I don't speak English very well, and I understood your tutorial better than tutorials explained in my language

[vmamore]

I really enjoy you creating components with Styled Components, thanks!

[mudcrab]

A very good video. It helped me understand Styled components much better. I hope you can make a video on how to use Outlet component from React Router.

[roshanjalil]

Hey pedro! Amazing video. Loved it! I was hoping if you could make a video regarding handling user data in firebase, like once a user is authenticated how do we handle each and everyone’s data separately. I have not been able to find any videos regarding that, I would really appreciate it if u made some

[julianonotari]

Acho que você é brasileiro, então, muito obrigado mano PedroTech, salvou demais aqui pra um iniciante

[rizqyhbb]

At 34.38 it is called "fragment" to wrap something without element, you can wrap it with div i guess if you don't want to use fragment. Cmiiw

[luciano]

Via seus vídeos e nem tinha parado para pensar que você era brasileiro, hoje vi seu nome e minha mente explodiu

[priyasashi]

Very grateful for this video:) Superb clear. Also please upload more videos related to state and hooks.

[BlackDragon]

on mobile screen when the menu doesn't close if I click on one of the links, it only closes when I click on the X, how can I do in order to close the menu when one of the links are clicked?

[tanyabansal]

Thank you for this tutorial! it was exactly what I needed!!!

[ashish_prajapati_tr]

how you have enabled import size for packages?
pls tell i have installed "import cost" extension but it's not displaying anything

[dibeshrana]

The tutorial is very good. How would i add acive property to the links. I tried using the class name but it did not work. It only applies while the link is being clicked.

[zuriglr]

I like this video. Showing Another way handling react.
Hope you got better and with many more followers.

[thestone]

At 1:14 we can actually remove the blue highlight on pressing the button by adding->
to the highest element like *.
I personally feel it very annoying

[jtvnego]

thank you sir, this is really helpful for beginner.

[jpcc]

Thank you so much for sharing this, helped me a lot!! :)

[ysteinellingsen]

Looks great :-)
Some feedback:

1 ( this one is not debatable)
You should avoid using px. usually you want to use responsive units wherever you can.

as a rule of thumb I only use px for media query's and border radius.

This is especially important with font sizes. If you use px there the browser wont change the font-size when you change it in the browser. It is deadest. Use rem instead to fill accessibility demands.

2 ( this is more a convention thing, especially important if you work at a company. However thoughts do differ from place to place.)
your folder/file structure seems a little off. I have visited multiple companies and I have never seen it done like this. Top level folders should only contain global stuff. So if you use css in just that component it should be a sibling to that component.

3 would also build in a prop that to the components that returns the display none if the prop is detected. In other words, you could remove navbarExtended and have it just be one component.

Otherwise great navbar! Don't get me wrong! :-) Naming convention is spot on :-) Had to add some functionality to it to suit my needs, but I saved a lot of time thanks to you. I unfortunately did not have the time to make one my self and have to find fast solutions because I'm making an app on my spare time and don't have enough of that.

[ayomidestephen]

is there a way we can do it to make the page reload after clicking any of the navigation links whenever its on mobile, because i realized the page doesnt reload but navigates to the page if i click them on mobile screensize. if i want to see the page content, i have to cancel the navigation hamburg menu. why is it like that?

[imnemo]

This extenstion is removed I think I can't find it

[imnemo]

Whats the point making these from scratch when I can just use chakra or material???