React Best Practices for Front-End Developers
React, a vital tool in modern web development demands an organized approach for enhanced r...
For further actions, you may consider blocking this person and/or reporting abuse
why the file naming convention should be a PascalCase for components and camelCase for the others? I've seen a lot on youtube & articles that the naming is using kebab-case for the components, page, & everything else...
Its just a common convention for react, makes it consistent with component names, and easier to find when searching, and by using this convention you make sure that other react developers also understand the structure as its common practice
With React, I like having the JSX components match their directory names. I think it makes it as clear as possible as to what is/isn't a component.
For example, this:
Is clearer to me than:
Exactly.
Another good approach to importing is to have an absolute import.
Instead of:
import SpecialButton from '../components/SpecialButton';Use something like:
import SpecialButton from 'components/SpecialButton';This will involve some config adjustments
Ooh thank you for reminding me of those! I've got some imports like
import * as UserActions from '../../../../../store/slices/usersSlice'that would appreciate being cleaned up a bit :)No problem 😃
BTW, make sure to import only relevant methods and avoid import * as possible 👍🏼
Update: I ended up refactoring our main Next.js repos to use module aliases and I'm never looking back 😍
Nice :)
One question, what made you choose module path aliases
over absolute imports?
I like having something to indicate that it's an "artificial" (maybe not the right word) path.
For example, these 2 lines could look like they're pointing to the same directory:
Whereas it would be instantly clear that one is from a root-level utils directory if it's written as:
In the end just a matter of personal preference I'd say.
Great share
helpfully