File naming conventions

I’m trying to figure out a good file naming convention for my app and it seems like you guys have a great react style guide. There is one thing that is kind of confusing:

Use the filename as the component name. For example, ReservationCard.jsx should have a reference name of ReservationCard. However, for root components of a directory, use index.jsx as the filename and use the directory name as the component name

This sentence doesn’t really make sense to me:

However, for root components of a directory, use index.jsx as the filename and use the directory name as the component name

In your example here, it states that this is bad:

// bad
import Footer from './Footer/index';

Isn’t that “bad” example what you’re referring to when you say “for root components of a directory, use index.jsx as the filename and use the directory name as the component name”?

Can you give an example of what would go in the index file?

Thanks!

[tleunen]

We talk a bit in this ticket https://github.com/airbnb/javascript/issues/817, bu one thing that I don’t like with the current convention is if I’m building a UI component library, with css attached to each component, I end up with a structure like this:

components/
    Button/
        index.js
        styles.css
    Table/
        index.js
        styles.css
    Dropdown/
        index.js
        styles.css
    Video/
        index.js
        styles.css

Sometimes it gets confusing because they all have the same file name.

[wyze]

It is considered bad because then index is unneeded in the import from './Footer/index', as it will resolve the import without it. Right below the one you quoted they give a good example without index.

// good
import Footer from './Footer';