Javascript: File naming conventions

[scottmcpherson]

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!

[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';

[scottmcpherson]

I tried that approach using react with Meteor but for some reason it doesn't resolve the index when you import ./Footer. Must be because they're using a different module build process.

[lencioni]

@wyze is correct. This is the Node module resolution algorithm.

I'm not entirely sure what Meteor does. From their documentation, it looks like it may have changed in 1.3. What version are you using?

[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.

[scottmcpherson]

I'm using 1.3.4.4. Still not sure why Meteor is not recognizing index. Not a big deal though. Maybe I'll dig into it further when I get some free time

[LavaToaster]

@tleunen FWIW, I've started ignoring this part of the convention. It doesn't make sense to me, I get what they're trying to do, but file editors show names, not folders.

[ljharb]

My editor shows 'footer/index' when I type 'footer' in its "jump to file" box, as do my colleagues'. Which editor do you have that doesn't?

[lencioni]

@ljharb I'm guessing that the issue is not the jump to file interface, but rather the tabs interface in many editors, which often just shows the filename.

[LavaToaster]

I use IntelliJ. It does support the foldernames in tabs, however previous versions in my experience have been a bit buggy around when it tries to display it, the current version seems to be much better at handling this now.

Its jump to file interface does not fuzzy find folder names you have to enter in the whole name before it attempts to find the files within that directory.

Somewhat related: Stack traces in chrome only show the filename. (This may apply to other browsers but I don't recall what they do)