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...
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 😍
Great share
helpfully