DEV Community

Discussion on: 14 Beneficial Tips to Write Cleaner Code in React Apps

Collapse
chrisachard profile image
Chris Achard

Good tips, thanks. In regards to "folderizing your components" - do you ever run into issues with so many files called "index.js"? That's just a little thing - but it always kind of confuses/bugs me when I have a bunch of index.js functions open, and I have to figure out which is which... Any tips for that?

Collapse
jsmanifest profile image
jsmanifest Author

No problem! And what I do is to not write anything in the index.js but to export default the actual file in the same directory.

src/components/Tooltip/index.js:

export { default } from './Tooltip'
import Tooltip from '../components/Tooltip'

You can also put a package.json in place of index.js as below:

src/components/Tooltip/package.json

{
  "main": "./Tooltip.js"
}
import Tooltip from '../components/Tooltip'

Either way the end goal is to write code in the actual Tooltip.js file.

Collapse
chrisachard profile image
Chris Achard

Ahhhh - got it. Thanks! that's a good idea.

Thread Thread
jsmanifest profile image
jsmanifest Author

No problem :)