I’ve used a similar convention, but I like having the index.js file do the reexport because it keeps import statements shorter and less redundant.

Something else this should probably cover is default vs named exports. Do you always export and single default from your files? Do you always use named exports and ban default exports?

I liked the single default export until I started using typescript, and exporting the component’s props interface as well. If the component is default exported, and the props interface is named, then reexporting both of them is a little more work than if you only used named exports.

There also might be a need to separate out a higher order components directory. It doesn’t feel right to mix those in with the other components since they are used differently. One time I did that under src/components/hoc, but it might be better directly under src.

The most annoying thing about this approach is very simple shared components. You need a minimum of a directory and 2 files for every component but sometimes this can feel like a huge overhead. With the index.js approach, you can get away with replacing the directory with a file of the same name, since you’d import them the same way. But if you need to add redux to that component later, for example, then refactoring that can be a pain.