Importing JavaScript files with the same name as directory they're inside
Let me suggest you the following structure I personally like:
Your component tree structure (As an example every component has a different folder structure. It is up to you to keep it clean and tidy. Index.jsx in components folder just normalizes access to those components whoever needs them):
src/components/
Butter/
Butter.jsx
index.jsx
Beets/
Beets.jsx
Cabbage/
index.jsx
Meat.jsx
index.jsx
Content of components/index.jsx
export Butter from './Butter/index.jsx';
export Beets from './Beets/Beets.jsx';
export Cabbage from './Cabbage/index.jsx';
export Meat from './Meat.jsx';
Some container Borscht.jsx somewhere else in your project which uses those components
import {
Beets,
Cabbage,
} from 'src/components';