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

Lucas Chen on August 15, 2019

Update: The entire code review series is now available on YouTube at https://www.youtube.com/c/BetterCodingAcademy! I've been a professional web d... [Read Full]
markdown guide
 

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.

 

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. 🙂

 

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

 

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.

 

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

 

Hey Lucas - good review - thanks for sharing.
Do you know where I can find documentation/explanation for the import aliasing you used.
import thing from “#root/thing”

 

Hi Kim!

Here's the Parcel documentation on how to set it up: parceljs.org/module_resolution.html

Hope this helps!

 

You can do the same thing with Webpack as well, however the setup process is slightly different. :)

 
 
 

So, you have a 10 min video only talking about importers orders?

You should have said a little more so that you say you are a "professional".

Let's see you post a code review, you can show us all how it's done "professionally". I thought OP did a great job. I found the tips very useful. Thank you @LucasChen for the post.

he did a great job ofc, I love the video, but I was expecting something more.

 

I kindly recommend to do some postprocessing on the audio to normalize the volume of your video.

You moved away from your microphone too often. Unfortunately I had to stop watching because switching the volume per ±½ minute is distracting.

 

Thanks for your feedback, and sorry to distract you from the content of the video! I am working on improving video quality, and your advice really helps me to do that :)

 

Great video, crisp audio. Definitely got a few new tips out of it, I'll be waiting for part 2

 

The whole series has been out for a couple days now! Check it out on the Better Coding Academy YouTube channel at youtube.com/c/BetterCodingAcademy.

 
[deleted]
 

Hi Kyle! My apologies if my thorough-ness bored you, but on the converse many beginners who watch my videos tell me that they much prefer me explaining the more menial concepts and tasks in a bit more detail. 🙂

 
[deleted]

He wasn't passive-aggressive at all. He recognized your criticism and offered an explanation why he films his videos this way.

This community is for being supportive and learning from one another, not armchair-quarterbacking. Maybe try that in your future comments?

code of conduct - report abuse