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

View post

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?

jsmanifest • Aug 18 '19

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.

Chris Achard • Aug 18 '19

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

jsmanifest • Aug 19 '19

No problem :)