DEV Community

Discussion on: I am a professional React developer, and I recently performed a code review of a stranger's code. Here's what I got.

Collapse
 
arberbr profile image
Arber Braja

Some good tips you recommemded IMO. Regarding imports and how to group/list them i follow another method.

I group them by what they are, or what they do.

Example if its an external package, lets say, something from react-router-dom i put it on top.

If its a layout component which is universal for then whole app, i put it on top of the other imports.

Then i put universal components. Example components outside of an switch, navbar, footer, etc.

Then i put the pages imports.

Then i put the utils or helper methods.

I understand what you mean with when havint 20 or more imports its easier to find what is imported and where, etc but grouping them logically to me personally works better.

At least i got used to this method and thats how i do it om my projects.

Will follow you since i had love to see the comments on the rest of the project.

Collapse
 
acomito profile image
acomito

I do the same thing! I’m glad I’m not alone.

Collapse
 
marcus-sa profile image
Marcus S. Abildskov

Funny, I do the exact same.

NPM package imports on top
Newline
Project module imports
Newline
Current module imports

And then group each by interfaces, components, services etc

Collapse
 
skydevht profile image
Holy-Elie Scaïde

The important thing is consistency. Pretty much everything is decided by convention and business priorities but consistency is key if you don't want to slow people down.

Collapse
 
bettercodingacademy profile image
Better Coding Academy

Hey Arber! Thanks for your reply.

If that works for you, then by all means go ahead with it! I'm not condemning any strategy nor believing that mine is superior in any way. If you have a formatting standard that you can consistently follow, then I'm all for it. 🙂