React best practice: component in separate file or component in separate folder with located in index.js?

Viewed 477

I am not sure where to find info about folder/file naming conventions so, I'm going to post it here, hoping this question will make sense. In my previous job I came across two component naming options (used for building components / sub-components / etc in a React project).

Options:

Option A:

.
├── components/
│   └── SubComponent/
│       ├── SubComponent.js → // export default function SubComponent(){ return <></> }
│       └── index.js → // export { default } from './SubComponent'
└── App.js → // import SubComponent from './components/SubComponent' 

Option B:

.
├── components/
│   └── RandomSubFolder/
│       └── ComponentName.js → // export default function ComponentName(){ return <></> }
└── App.js // import ComponentName from './components/RandomSubFolder/ComponentName' 

To Sum Up:

In both cases we are talking about a large number of components, sub-components, sub-sub-components and so on.

I know index.js ( which allows a simple import based on its parent foldername ) adds noise but is it the case that Option A is preferred for its simplicity despite this or Option B ( which relies of filename )?

0 Answers
Related