Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

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

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 )?

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!