DEV Community

Discussion on: 5 Good practices to scale your React projects easily

View post

Replies for: Great writeup. The only thing I don't like is your use of index.tsx every where. I prefer naming my files by the component name inside (usually ...

Collapse
 
jeffreythecoder profile image
Jeffrey Yu •

Hi Ziv, I'm using index.tsx for components because I'm putting styles, types, tests under a folder named after the component's name. index.tsx serves as an access point to a component or a page, where exports can be organized.

I definitely agree with deconstructing exports, but naming one as default also helps identify the exported component. I would do exports in index.tsx like this.

// components/atoms/CustomButton/index.tsx
export { default } from './CustomButton'
export * from './CustomButton.types'
Enter fullscreen mode Exit fullscreen mode 
// components/atoms/index.tsx
export { default as CustomButton } from './CustomButton'
Enter fullscreen mode Exit fullscreen mode

Then it's easy to import components in one line, like what Material UI is doing.

import { CustomTextField, CustomButton } from 'components/atoms'
Enter fullscreen mode Exit fullscreen mode
Collapse
 
edmundo096 profile image
Edmundo Elizondo • • Edited

As far I understand, this practice assumes a configured tree shaking on a package bundler.
I have seen sites where unused components and even tests files are still referenced from the index file (and downloaded).
Well configured, it leaves less and shorter imports.

Thread Thread
 
jeffreythecoder profile image
Jeffrey Yu •

Yes Edmundo, tree shaking strictly bundles only explicitly exported modules and avoids unnecessary ones. I believe it's an essential practice for good production build. I also use lighthouse to scan and optomize.