What's the advantage of naming every React component 'index.jsx'?

Question

I can see in many tutorials, code examples etc, lots of people just call every component 'index.jsx'. I still kind of assume it's best practice, so I always start my projects doing this, but quickly become really frustrated with it and swap back to something more sane.

I understand you don't need to write the name twice in the import, e.g import ThisThing rather than import ThisThing/ThisThing, but doesn't every single console log, editor tab title etc etc all having the same name make it impossible to debug or work with?

Answer 1

So if you have index.jsx like so.

src/containers/login/index.jsx

export function speak () {
  return 'speak'
}

export default function yell () {
  return 'yell'
}

then to import from say

src/index.jsx

import yell, { speak } from './containers/login

You don't have to specifiy the index like import yell, { speak } from ./containers/login

But if you find your project has folders some of which might have 5+ components in them then a common practice is to export them all in a index.js file and then you can import them appropriately the same way without having to specify the file name.

So say I have Speak.jsx, Clap.jsx and Jump.jsx in a folder called components. Then I would also add an index.js folder with the following.

export { Speak } from './Speak'
export { Clap } from './Clap'
export { Jump } from './Jump'

and then to import depending on how many I need you can do any of the following.

import { Speak, Clap } from './src/components'
// or
import { Jump } from './src/components'

you do not require the curly braces for default exports

There can only be one default export per file if you do go down that path.

Here is a much better and in-depth tutorial