clean-react-file-organization

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Clean File Organization

清晰的文件组织规范

Organize files by dependency ownership. Keep private dependencies inside the owner that uses them, and move shared dependencies only as high as their nearest shared owner.

按依赖所属关系组织文件。将私有依赖项放在使用它们的所有者目录内，仅将共享依赖项移至最近的共享所有者层级。

R11: Owner Folders

R11：所有者文件夹

Give a React owner a folder when it has private dependencies.

text

A/
  A.tsx
  hooks.ts
  B/
    B.tsx
    C.tsx

In this structure:

```
C.tsx
```
is private to
```
B.tsx
```
.
```
B.tsx
```
is private to
```
A.tsx
```
.
```
hooks.ts
```
is owned by
```
A/
```
, so
```
A.tsx
```
,
```
B.tsx
```
, and
```
C.tsx
```
may use it.

Use the same rule for hooks, presenters, utils, and similar helpers. If only one owner uses it, keep it with that owner.

当React所有者存在私有依赖项时，为其创建文件夹。

text

A/
  A.tsx
  hooks.ts
  B/
    B.tsx
    C.tsx

在该结构中：

```
C.tsx
```
是
```
B.tsx
```
的私有文件。
```
B.tsx
```
是
```
A.tsx
```
的私有文件。
```
hooks.ts
```
归属于
```
A/
```
，因此
```
A.tsx
```
、
```
B.tsx
```
和
```
C.tsx
```
均可使用它。

对hooks、presenters、工具函数（utils）及类似辅助文件应用相同规则。如果只有一个所有者使用它，就将其与该所有者放在一起。

Shared Dependencies

共享依赖项

If multiple nearby owners use the same dependency, move it to their nearest

common/

folder.

text

common/
  hooks.ts
A/
  A.tsx
  B.tsx
C/
  C.tsx

Inside

common/

, create layer folders only when they are useful for that area:

components/

hooks/

presenters/

, or

utils/

. For single files, prefer

MyHelperComponent.tsx

hooks.ts

presenters.ts

, or

utils.ts

如果多个相邻所有者使用同一依赖项，将其移至最近的

common/

文件夹。

text

common/
  hooks.ts
A/
  A.tsx
  B.tsx
C/
  C.tsx

在

common/

内部，仅当对该区域有用时才创建层级文件夹：

components/

、

hooks/

、

presenters/

或

utils/

。对于单个文件，优先使用

MyHelperComponent.tsx

、

hooks.ts

、

presenters.ts

或

utils.ts

这类命名方式。

CSS Modules

CSS modules are owner-scoped by default. Prefer one owner folder per CSS module, such as:

text

BattleStage/
  BattleStage.tsx
  BattleStage.module.css

Do not share a CSS module across unrelated features. If styling must be shared, keep it inside the nearest shared owner or

common/

, and prefer a shared component over shared CSS when possible.

CSS Modules默认按所有者作用域划分。优先为每个CSS模块对应一个所有者文件夹，例如：

text

BattleStage/
  BattleStage.tsx
  BattleStage.module.css

不要在不相关功能之间共享CSS模块。如果样式必须共享，将其放在最近的共享所有者目录或

common/

中，且尽可能优先使用共享组件而非共享CSS。

Naming

命名规范

For React owner folders, prefer PascalCase for the owner folder, owner component file, and owner CSS module:

text

BattleStage/
  BattleStage.tsx
  BattleStage.module.css

对于React所有者文件夹，优先为所有者文件夹、所有者组件文件和所有者CSS模块使用PascalCase命名：

text

BattleStage/
  BattleStage.tsx
  BattleStage.module.css

Outside React

React之外的场景

Apply the same ownership principle outside React. Non-UI modules do not need React-style layer folders unless they help. Do not create folders preemptively for one standalone file; add a folder when the owner gains private dependencies or enough internal structure to justify it.

将相同的所属关系原则应用于React之外的场景。非UI模块无需使用React风格的层级文件夹，除非这些文件夹能带来帮助。不要为单个独立文件预先创建文件夹；仅当所有者拥有私有依赖项或具备足够内部结构需要时，再添加文件夹。

Common Mistakes

常见错误

Creating broad
```
components/
```
,
```
hooks/
```
, or
```
utils/
```
folders before ownership is clear.
Moving a helper to global
```
common/
```
when only one owner uses it.
Sharing CSS modules instead of extracting a shared component.
Creating folders preemptively for one standalone file.

在所属关系明确前创建宽泛的
```
components/
```
、
```
hooks/
```
或
```
utils/
```
文件夹。
当只有一个所有者使用辅助文件时，将其移至全局
```
common/
```
。
共享CSS模块而非提取共享组件。
为单个独立文件预先创建文件夹。