DEV Community

Cover image for I am a professional React developer, and I recently performed a code review of a stranger's code. Here's what I got.
Better Coding Academy
Better Coding Academy

Posted on • Edited on

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

Update: The entire code review series is now available on YouTube at https://www.youtube.com/c/BetterCodingAcademy!

I've been a professional web developer for just over 10 years now. I'm currently the lead web development instructor at Better Coding Academy, and as part of what I do, I post videos on our YouTube channel at https://www.youtube.com/c/BetterCodingAcademy.

(Subscribe for awesome web development content!)

I recently asked the DEV community to provide me with code to review, and this is my review of one of the React.js projects. I try to make these code reviews as in-depth as possible, covering everything from coding styles, to semantics, to design patterns, to code smells, to directory structures, and much more.

The below video is part 1 in a series that will be available on the channel very soon 🙂

Happy coding!

Top comments (22)

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

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
 
acomito profile image
acomito

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

Collapse
 
tripleaxis profile image
Kim Holland • Edited

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”

Collapse
 
bettercodingacademy profile image
Better Coding Academy

Hi Kim!

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

Hope this helps!

Collapse
 
tripleaxis profile image
Kim Holland

Aha - Parcel - that explains a lot. Thanks 👍

Thread Thread
 
bettercodingacademy profile image
Better Coding Academy

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

Collapse
 
lucasmonstro profile image
Lucas Silva

your App is not using arrow function hehe.

Collapse
 
bettercodingacademy profile image
Better Coding Academy

Code review - not my code! 🙃

Collapse
 
lucasmonstro profile image
Lucas Silva

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

Thread Thread
 
matthewbcool profile image
Matt • Edited

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.

Thread Thread
 
lucasmonstro profile image
Lucas Silva

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

Collapse
 
roestvrijstaal profile image
RoestVrijStaal • Edited

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.

Collapse
 
bettercodingacademy profile image
Better Coding Academy

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 :)

Collapse
 
metruzanca profile image
Samuele Zanca

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

Collapse
 
bettercodingacademy profile image
Better Coding Academy

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.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.