DEV Community

Your very first responsive and animated navigation bar with React and React-Spring

Nuno Pereira on September 04, 2019

In this tutorial you will build a simple, responsive and animated navigation bar with React JS. You will use styled-components for the css and reac...
Collapse
 
matthill8286 profile image
matthill8286

You need to stop relying upon hoisting as all of your examples would throw an eslint error. For example, you are calling CollapseWrapper before it has been declared and this is consistent throughout your code unless you are actually hoisting functions by intent declare the pointer first.

Collapse
 
nunocpnp profile image
Nuno Pereira

This is a standard way of use Styled Components in React but thanks for your comment. If you dont link to use it this way you can put the styled component on another file

Collapse
 
matthill8286 profile image
matthill8286

My comment was purely about your javascript. The code you have given us as an example would fail when run through eslint.

Please be careful sharing code that is bad practice as you are encouraging others to write code in this way.

Thread Thread
 
nunocpnp profile image
Nuno Pereira

I understand what you are trying to say but, is not true.

You will not get any linting error, if you quickly install eslint and extend airbnb preset or even react-standard for instance on my demo you will see that no error or warning will show up.

Declaring styled-components in react at the end of the file is not consider bad practice either.

Collapse
 
dance2die profile image
Sung M. Kim

Thanks for the nice series of posts on DEV, Nuno~

May I request to add syntax highlights for code snippets?
Check out the Editor Guide for more info.

Collapse
 
nunocpnp profile image
Nuno Pereira

Thx for the tip ! I'll do it on all my articles !

Collapse
 
dance2die profile image
Sung M. Kim

Thank you ~

Collapse
 
shameera91 profile image
Shameera Anuranga

great post

Collapse
 
nunocpnp profile image
Nuno Pereira

Thank you !!

Collapse
 
thepedroferrari profile image
Pedro Ferrari

Thank you for the amazing, simple and straightforward. I was looking into spring and your post really helped :)

Collapse
 
nunocpnp profile image
Nuno Pereira

Thank you so much for your positive feedback !

Collapse
 
adhibhuta profile image
Nature

Thank you so much, I am a beginner this is exactly what I was looking for, simple and straightforward.

Collapse
 
nunocpnp profile image
Nuno Pereira

Im glad I could help you ! Thx for the feedback !

Collapse
 
farooqkrkt profile image
farooqkrkt

thanks for the tutorial. can we make navbar font color & background color different for different links?

Collapse
 
nunocpnp profile image
Nuno Pereira

sure you can, just style the a tags accordingly

Collapse
 
markdreed512 profile image
Mark Reed

Thanks for the tut! I'm just curious why you would need to refactor to an App.js class component?

Collapse
 
nunocpnp profile image
Nuno Pereira

Today with hooks you dont need it, but when I made the tutorial i still used class based react components

Collapse
 
vevi1 profile image
vevi1

thanks for this wonderful tutorials. I have an observation which is Module not found: Can't resolve './styles/Global'.....this is the error i get, thanks.

Collapse
 
nunocpnp profile image
Nuno Pereira

Thanks for your feedback !

Did you create de globalstyles file ?

You tried to follow the tutorial or you get that error cloning the repository ?