In today's adventure I will take you to the Other Side of code development. As ONE, we'll explore the art of code refactoring and see how it can re...
For further actions, you may consider blocking this person and/or reporting abuse
Agree with the component should use PascalCase, but not with the file name. For the file name, I prefer KCD suggestion. He use lower-kebab-case for universal use OS.
So, you have component
MagicButton
and filename ismagic-button.tsx
. This will ensure you have no filename insensitive problem.I have experienced coding on Mac, no problem happened. But when I pull the code from github and running on Linux, I forget to rename the import component from "Button" to "button" and the entire file that importing that component thow an error.
Thank you for your valuable feedback. Anyway, I prefer to use the PascalCase for the file name and Component Name. I don't think it can create any problems while coding on Mac, Linux or Windows.
Instances:
PascalCase for filenames is also recommended by Airbnb' React/JSX Style Guide.
Yeah, this is a rare case. Usually it happens when you importing a file.
Imagine you have a component
Navigation.tsx
and import it like this:On windows and Mac it shouldn't throw an error because they don't care about "case-sensitive".
The thing why this metter is when you use CI tools for example GitHub actions which use Linux based OS (you can also use windows or mac) for doing automated-test.
Linux cares about case-sensitive and of course the code above should make your actions fail.
Another case is when you use Vercel, Netlify, etc which provide CI/CD and of course their runner is use Linux based OS.
IMHO, this is metter because I don't want to lost a time because of simple problem and for me style guide is only a style guide. Like a cookbook. Meaning you can adjust it.
And the most important thing is to document your changes. Maybe you already work in CamelCase project, but you want another one. This is important for next devs, so they know "what happens" to the codebase.
Interesting, thank you for sharing detailed info..
I really like it, some things that worth mentioning:
Typescript and the usage of common variables.
Maybe also exporting all the components from a common index file.
Instead of:
Something like this:
Yes its looks good to me. There are so many ways we can go with it for the code refactoring.
I really like your approach to import the components:
Thank you for sharing your insights..
A really good write-up!
For removing comments, I think this is a really good idea. I see lots of commented code too often. People usually say it's there just in case; it'll also be in source control.
For
if
statements, I generally stick to the rule of usingif
with up to three branches. After that, I'll either useswitch
, or the dictionary/object approach. One other point that might not be obvious is that it's possible to put arrow functions in there to run. This might be useful if implementing some type of command interpreter.I completely agree with you. Thanks for sharing your insights.. Happy coding!!!
a lot of these suggestions are nothing more than preferred syntax. wouldn't bother messing with most of these because a senior programmer will just overrule you. sometimes it just isn't making code "more readable"
I completely agree with you. I had showed basics of code refactor. There are millions ways a developer can approach it.. Starting with basics, eventually we will end as a "Pro Developer". It's important to maintain consistency in while coding.. THnak you for reading and your valuable feedback..
Very excited to announce that we have reached 1K followers in our community. We couldn't have done it without your support and engagement. We want to thank each and every one of you for being a part of our adventure..
We look forward to continuing to grow together & providing even more value to our community.
Happy coding!!!
Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 👍
Thanks a ton man
Such a informative aritcle! This does make me to reconsider my own coding practices. Good work!
Glad, you enjoyed the trip of Other Side of code development. Thank you for reading and feedback.
Just one word! Thank You
You're welcome my friend. I hope my article helped you to break on through the Other Side of code development. Thank you..
Really nice post CR, you are becoming an expert buddy. 🚀
Thanks for your support, it means a lot! 🙏🏼Let's keep pushing forward & reaching towards the stars 🚀
Great article, key concepts explained beautifully!
Thanks a million..
wow good for me
Thank you stake..
Thank you so much for your really cool instruction.
You’re welcome. Thanks for sharing your valuable feedback
Adorei, muito obrigado
De nada. Fico feliz que tenha achado a leitura útil.