3 ms·
When it comes to the index.js issue, I’m partial to “unwrapping” component directories. For example, if a Post component has a few one off sub-components, they’
by throwaway284534 5y ago
When it comes to the index.js issue, I’m partial to “unwrapping” component directories. For example, if a Post component has a few one off sub-components, they’re placed in Post subdirectory:
src/
components/
Post.jsx
Post/
PostHeader.jsx
PostActions.jsx
Then import as:
import Post from “components/Post.js”
And within the component:
import PostActions from “components/Post/PostAction.js”
I’ve felt this approach eliminates most index.js reexports and aligns closer with a browser’s native import syntax. This all comes at the cost of less encapsulation, but in a private codebase, it’s less of an issue.
- toastercat 5y agoI used to do this as a newb before I learned about how index.js works. In hindsight, it makes a lot of sense (especially when you consider browser parity), and I find it amusing how common the use of index.js is in React codebases, when Ryan Dahl named index.js one of his greatest mistakes when creating Node.
- eurasiantiger 5y agoIt is a mistake. Index.js re-exports cannot be tree-shaken by bundlers unless the module is explicitly declared free of side effects. If you import { foo } you actually import everything. Check your bundle.