英文:
Index pages in a react application and naming conventions with folder structure
问题
我真的很想听听其他JavaScript开发者对文件名称和结构的看法。我的主要关注点是在一个孤立的文件夹中使用文件名index.tsx（或js）是否会导致问题，如果另一位开发者接手我的工作。
下面是我目前的文件结构，你可以看到每个页面和组件都分别放在自己的文件夹中，并使用index.tsx的命名约定。例如，关于页面是否应该具有文件名和文件夹结构" ./About/about.tsx "，还是我现在使用的命名约定" ./About/index.tsx "可以正常工作？
我能看到的唯一区别是当将文件导入另一个文件时，文件路径会稍微变长。
├─ src
│ ├─ App.tsx
│ ├─ components
│ │ ├─ ArrowIcon
│ │ │ └─ index.tsx
│ │ ├─ Footer
│ │ │ ├─ index.tsx
│ │ │ └─ styles.module.css
│ │ ├─ FormError
│ │ │ ├─ index.tsx
│ │ │ └─ styles.module.css
│ │ ├─ Header
│ │ │ ├─ header.module.css
│ │ │ ├─ index.tsx
│ │ │ ├─ Logo
│ │ │ │ ├─ index.tsx
│ │ │ │ └─ styles.module.css
│ │ │ └─ Navigation
│ │ │ ├─ PrimaryNav.tsx
│ │ │ ├─ SecondaryNav.tsx
│ │ │ └─ styles.module.css
│ │ ├─ IntroHeader
│ │ │ ├─ index.tsx
│ │ │ └─ styles.module.css
│ │ ├─ Layout
│ │ │ ├─ Container
│ │ │ │ ├─ index.tsx
│ │ │ │ └─ styles.module.css
│ │ │ ├─ index.module.css
│ │ │ └─ index.tsx
│ │ └─ PageHeader
│ │ ├─ index.tsx
│ │ └─ styles.module.css
│ ├─ Content
│ │ ├─ Configuration
│ │ │ └─ ConfigurationHome.ts
│ │ ├─ Footer
│ │ │ └─ footer.json
│ │ ├─ Home
│ │ │ ├─ About.json
│ │ │ ├─ FAQ.ts
│ │ │ └─ Tutorial.json
│ │ ├─ Navigation
│ │ │ └─ index.ts
│ │ ├─ Sagacity
│ │ │ ├─ History
│ │ │ │ └─ HistoryContent.ts
│ │ │ ├─ Management
│ │ │ │ └─ ManagementContent.ts
│ │ │ └─ SagacityContent.ts
│ │ ├─ Support
│ │ │ └─ supportHome.ts
│ │ └─ Terminal
│ │ └─ terminalHome.ts
│ ├─ index.css
│ ├─ main.tsx
│ ├─ pages
│ │ ├─ Configuration
│ │ │ ├─ BusinessUnits
│ │ │ │ ├─ BusinessUnits
│ │ │ │ │ ├─ Create
│ │ │ │ │ │ └─ index.tsx
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ styles.module.css
│ │ │ │ └─ SupportContacts
│ │ │ │ └─ index.tsx
│ │ │ ├─ index.tsx
│ │ │ ├─ Merchants
│ │ │ │ ├─ BillingGroupChains
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ BillingGroupDisbursementHold
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ BillingGroups
│ │ │ │ │ ├─ Edit
│ │ │ │ │ │ └─ [id].tsx
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ FeeTemplates
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ PaymentChannels
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ RelationshipManager
│ │ │ │ │ └─ index.tsx
│ │ │ │ └─ styles.module.css
│ │ │ ├─ ODFIs
│ │ │ │ ├─ BankExpenses
│ │ │ │ │ ├─ Create
│ │ │ │ │ │ ├─ index.tsx
│ │ │ │ │ │ └─ styles.module.css
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ ExpenseBatch
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ FinancialInstitution
│ │ │ │ │ ├─ Create
│ │ │ │ │ │ └─ index.tsx
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ RoutingNumbers
│ │ │ │ │ └─ index.tsx
│ │ │ │ └─ styles.module.css
<details>
<summary>英文:</summary>
I'm really trying to get an idea from other Javascript developers opinion on file name and structure. My main concern is using the file name index.tsx(or js) inside a lone folder if there would be issues if a fellow developer were to come in and pick up where I left off.
Below is the file structure I currently have and you can see that each page and component is separated into its own folder and using the index.tsx naming convention. Should for example the About page have the file name and folder structure of "./About/about.tsx" or does the naming convention I have in place now work just fine of "./About/index.tsx"?
Only real difference I can see is when importing the file into another it'll have a slightly longer file path.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
├─ src
│ ├─ App.tsx
│ ├─ components
│ │ ├─ ArrowIcon
│ │ │ └─ index.tsx
│ │ ├─ Footer
│ │ │ ├─ index.tsx
│ │ │ └─ styles.module.css
│ │ ├─ FormError
│ │ │ ├─ index.tsx
│ │ │ └─ styles.module.css
│ │ ├─ Header
│ │ │ ├─ header.module.css
│ │ │ ├─ index.tsx
│ │ │ ├─ Logo
│ │ │ │ ├─ index.tsx
│ │ │ │ └─ styles.module.css
│ │ │ └─ Navigation
│ │ │ ├─ PrimaryNav.tsx
│ │ │ ├─ SecondaryNav.tsx
│ │ │ └─ styles.module.css
│ │ ├─ IntroHeader
│ │ │ ├─ index.tsx
│ │ │ └─ styles.module.css
│ │ ├─ Layout
│ │ │ ├─ Container
│ │ │ │ ├─ index.tsx
│ │ │ │ └─ styles.module.css
│ │ │ ├─ index.module.css
│ │ │ └─ index.tsx
│ │ └─ PageHeader
│ │ ├─ index.tsx
│ │ └─ styles.module.css
│ ├─ Content
│ │ ├─ Configuration
│ │ │ └─ ConfigurationHome.ts
│ │ ├─ Footer
│ │ │ └─ footer.json
│ │ ├─ Home
│ │ │ ├─ About.json
│ │ │ ├─ FAQ.ts
│ │ │ └─ Tutorial.json
│ │ ├─ Navigation
│ │ │ └─ index.ts
│ │ ├─ Sagacity
│ │ │ ├─ History
│ │ │ │ └─ HistoryContent.ts
│ │ │ ├─ Management
│ │ │ │ └─ ManagementContent.ts
│ │ │ └─ SagacityContent.ts
│ │ ├─ Support
│ │ │ └─ supportHome.ts
│ │ └─ Terminal
│ │ └─ terminalHome.ts
│ ├─ index.css
│ ├─ main.tsx
│ ├─ pages
│ │ ├─ Configuration
│ │ │ ├─ BusinessUnits
│ │ │ │ ├─ BusinessUnits
│ │ │ │ │ ├─ Create
│ │ │ │ │ │ └─ index.tsx
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ styles.module.css
│ │ │ │ └─ SupportContacts
│ │ │ │ └─ index.tsx
│ │ │ ├─ index.tsx
│ │ │ ├─ Merchants
│ │ │ │ ├─ BillingGroupChains
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ BillingGroupDisbursementHold
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ BillingGroups
│ │ │ │ │ ├─ Edit
│ │ │ │ │ │ └─ [id].tsx
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ FeeTemplates
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ PaymentChannels
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ RelationshipManager
│ │ │ │ │ └─ index.tsx
│ │ │ │ └─ styles.module.css
│ │ │ ├─ ODFIs
│ │ │ │ ├─ BankExpenses
│ │ │ │ │ ├─ Create
│ │ │ │ │ │ ├─ index.tsx
│ │ │ │ │ │ └─ styles.module.css
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ ExpenseBatch
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ FinancialInstitution
│ │ │ │ │ ├─ Create
│ │ │ │ │ │ └─ index.tsx
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ RoutingNumbers
│ │ │ │ │ └─ index.tsx
│ │ │ │ └─ styles.module.css
│ │ │ ├─ Partners
│ │ │ │ ├─ Create
│ │ │ │ │ ├─ index.tsx
│ │ │ │ │ └─ styles.module.css
│ │ │ │ ├─ Details
│ │ │ │ │ ├─ index.tsx
│ │ │ │ │ └─ styles.module.css
│ │ │ │ └─ index.tsx
│ │ │ ├─ Profiles
│ │ │ │ ├─ APIProfiles
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ ExternalUsers
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ HeartlandUsers
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ index.tsx
│ │ │ │ └─ styles.module.css
│ │ │ ├─ styles.module.css
│ │ │ └─ System
│ │ │ ├─ index.tsx
│ │ │ └─ styles.module.css
│ │ ├─ Home
│ │ │ ├─ About
│ │ │ │ ├─ index.tsx
│ │ │ │ └─ styles.module.css
│ │ │ ├─ Contact
│ │ │ │ ├─ index.tsx
│ │ │ │ └─ styles.module.css
│ │ │ ├─ Faq
│ │ │ │ ├─ index.tsx
│ │ │ │ └─ styles.module.css
│ │ │ ├─ HealthCheck
│ │ │ │ └─ index.tsx
│ │ │ ├─ Tutorial
│ │ │ │ ├─ index.tsx
│ │ │ │ └─ styles.module.css
│ │ │ └─ VersionHistory
│ │ │ └─ index.tsx
│ │ ├─ Sagacity
│ │ │ ├─ History
│ │ │ │ ├─ AuthenticationRequests
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ BankAccounts
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ Consumers
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ FailedAPICalls
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ History
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ Statistics
│ │ │ │ │ └─ index.tsx
│ │ │ │ └─ VerificationRequests
│ │ │ │ └─ index.tsx
│ │ │ ├─ index.tsx
│ │ │ ├─ Management
│ │ │ │ ├─ BusinessUnits
│ │ │ │ │ ├─ Configure
│ │ │ │ │ │ └─ index.tsx
│ │ │ │ │ ├─ Create
│ │ │ │ │ │ └─ index.tsx
│ │ │ │ │ ├─ Details
│ │ │ │ │ │ └─ index.tsx
│ │ │ │ │ ├─ Edit
│ │ │ │ │ │ └─ index.tsx
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ GIACTInvoices
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ Global
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ Management
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ Merchants
│ │ │ │ │ └─ index.tsx
│ │ │ │ └─ Users
│ │ │ │ └─ index.tsx
│ │ │ └─ styles.module.css
│ │ ├─ Support
│ │ │ ├─ ACHFiles
│ │ │ │ ├─ ACHEntryFinder
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ ACHFiles
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ ACHRejects
│ │ │ │ │ └─ index.tsx
│ │ │ │ └─ index.tsx
│ │ │ ├─ Automation
│ │ │ │ ├─ Alerts
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ Jobs
│ │ │ │ │ └─ index.tsx
│ │ │ │ └─ Subscriptions
│ │ │ │ ├─ Create
│ │ │ │ │ └─ Index.tsx
│ │ │ │ └─ index.tsx
│ │ │ ├─ Bulwark
│ │ │ │ ├─ Bulwark
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ RiskRuleConfiguration
│ │ │ │ │ └─ index.tsx
│ │ │ │ └─ RiskRuleEnforcement
│ │ │ │ └─ index.tsx
│ │ │ ├─ Consumers
│ │ │ │ ├─ Blacklist
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ Consumers
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ ProvisionalWhitelist
│ │ │ │ │ └─ index.tsx
│ │ │ │ └─ Whitelist
│ │ │ │ └─ index.tsx
│ │ │ ├─ index.tsx
│ │ │ ├─ Invoices
│ │ │ │ ├─ BillingGroup
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ index.tsx
│ │ │ │ └─ Partner
│ │ │ │ └─ index.tsx
│ │ │ ├─ Logging
│ │ │ │ ├─ Emails
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ FailedApiCalls
│ │ │ │ │ └─ index.tsx
│ │ │ │ └─ index.tsx
│ │ │ ├─ Returns
│ │ │ │ ├─ Exceptions
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ index.tsx
│ │ │ │ ├─ NoticeOfChange
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ Reinitiations
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ ReturnDetails
│ │ │ │ │ └─ index.tsx
│ │ │ │ ├─ ReturnFiles
│ │ │ │ │ └─ index.tsx
│ │ │ │ └─ ReturnReconciliations
│ │ │ │ └─ index.tsx
│ │ │ └─ styles.module.css
│ │ └─ Terminal
│ │ ├─ index.tsx
│ │ ├─ styles.module.css
│ │ └─ VirtualTerminal
│ │ └─ index.tsx
│ ├─ Utils
│ │ ├─ Enums
│ │ │ ├─ MerchantTypeId.ts
│ │ │ ├─ ODFI.ts
│ │ │ ├─ RelationshipManager.ts
│ │ │ ├─ States.ts
│ │ │ └─ SupportContactId.ts
│ │ ├─ Func
│ │ └─ Interfaces
│ │ ├─ Configuration
│ │ │ ├─ Merchants
│ │ │ │ ├─ BillingGroupChains
│ │ │ │ │ └─ BillingGroupChains.ts
│ │ │ │ ├─ BillingGroups
│ │ │ │ │ └─ BillingGroupCreate.ts
│ │ │ │ ├─ FeeTemplate
│ │ │ │ │ └─ FeeTemplate.ts
│ │ │ │ ├─ Partners
│ │ │ │ │ └─ Partners.ts
│ │ │ │ └─ RelationshipManagers
│ │ │ │ └─ RelationshipManagers.ts
│ │ │ └─ Partners
│ │ └─ NavItems.ts
│ └─ vite-env.d.ts
├─ tsconfig.json
├─ tsconfig.node.json
└─ vite.config.ts
```
<!-- end snippet -->
</details>
# 答案1
**得分**: 1
以下是翻译好的部分：
What you have (with the `index.ts`) is totally fine and a typical pattern. However, I would tweak this by moving the component code into a separate file next to `index.ts` then import this and export it in the `index.ts`. So for example, for `ArrowIcon` you'd have `ArrowIcon.tsx` and `index.tsx` and `index.tsx` would export everything from `ArrowIcon.tsx`.
My reasons for that are:
* Tends to be a bit easier to navigate to the component with ctrl+p in vscode (or any IDE's "go to file" functionality).
* If you want that component to have sister components or maybe extra utils etc you can put them in their own file in the same folder and export them from the index file. The dev using these components does not usually care (so would use the index to grab it), but this allows all the different files you might have to optionally be imported granularly by targeting the actual file if the dev wants. This can be useful in testing scenarios or if wanting to reduce bundle sizes/have better code splitting.
Here's an [example in the popular Chakra lib][1].
Also, I wouldn't fret over this issue. It really doesn't matter much what way you pick, just pick one and be consistent.
[1]: https://github.com/chakra-ui/chakra-ui/tree/main/packages/components/avatar/src
<details>
<summary>英文:</summary>
What you have (with the `index.ts`) is totally fine and a typical pattern. However, I would tweak this by moving the component code into a separate file next to `index.ts` then import this and export it in the `index.ts`. So for example, for `ArrowIcon` you'd have `ArrowIcon.tsx` and `index.tsx` and `index.tsx` would export everything from `ArrowIcon.tsx`.
My reasons for that are:
* Tends to be a bit easier to navigate to the component with ctrl+p in vscode (or any IDE's "go to file" functionality).
* If you want that component to have sister components or maybe extra utils etc you can put them in their own file in the same folder and export them from the index file. The dev using these components does not usually care (so would use the index to grab it), but this allows all the different files you might have to optionally be imported granularly by targeting the actual file if the dev wants. This can be useful in testing scenarios or if wanting to reduce bundle sizes/have better code splitting.
Here's an [example in the popular Chakra lib][1].
Also, I wouldn't fret over this issue. It really doesn't matter much what way you pick, just pick one and be consistent.
[1]: https://github.com/chakra-ui/chakra-ui/tree/main/packages/components/avatar/src
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论