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)
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!
Aha - Parcel - that explains a lot. Thanks 👍
You can do the same thing with Webpack as well, however the setup process is slightly different. :)
your App is not using arrow function hehe.
Code review - not my code! 🙃
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.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.