Note-50088-3

{
  "title": "React 项目的文件结构",
  "tags": [
    "post",
    "react"
  ],
  "summary": "关于 React 项目的文件结构的最佳实践（雾 ",
  "sources": [
    "xlog"
  ],
  "external_urls": [
    "https://blog.mancuoj.me/react-file-structure"
  ],
  "date_published": "2023-04-07T06:23:57.001Z",
  "content": "整体结构来源于外网大佬的一篇文章：[Delightful React File/Directory Structure](https://www.joshwcomeau.com/react/file-structure/)，略有修改，使用了一段时间，觉得还不错。\n\n\n## 整体预览\n\n\n![image](ipfs://bafkreihrskfyvfloelf6d4ytu4q64g3o7drbtztusddoj3lbwyvbqeszc4)\n\n\n\n## index.js\n\n你可能已经注意到了，每个 component 的文件夹下都会有一个 index.js，它的内容类似于：\n\n```js\nexport * from './App'\nexport { default } from './App'\n```\n\n会把组件的模块重新导出，所以为什么不把组件代码都放在 index 里？因为如果所有的组件都需要从 index 文件导入，那么各种 index 将会充满我们的编辑器，查看它们就会变得非常难受。\n\n而且如果没有进行重新导出，导入 App 组件就需要这样写：\n\n```js\nimport App from '../App/App'\n```\n\n通过 index 文件“重定向”，我们可以将其缩短为：\n\n```js\nimport App from '../App'\n```\n\n## components\n\n一个示例组件结构如下：\n\n```\nsrc/\n└── components/\n    └── FileViewer/\n        ├── Directory.js\n        ├── File.js\n        ├── FileContent.js\n        ├── FileViewer.helpers.js\n        ├── FileViewer.js\n        ├── index.js\n        └── Sidebar.js\n```\n\n## hooks\n\nhooks 文件夹用来存储项目通用的 hook。\n\n如果 hook 特定于一个组件使用，就把它放在该组件的文件夹下。\n\n我一般会使用这种命名方式 `use-worker.hook.js`：\n\n- 烤肉串式 kebab-case 而不是驼峰式\n- 在文件名中加上 .hook\n\n当然你也可以使用常规的 `useWorker.js` 命名方式。\n\n## helpers\n\nhelpers 文件夹用来存储项目通用的 helper 函数，也就是特定于项目的辅助函数。\n\n如果函数特定于一个组件使用，那就把它放在该组件的文件夹下，就像 `FileViewer.helpers.js` 这样。\n\n## utils\n\nutils 文件夹用来存储**项目无关**的实用程序，你可以把它理解为仅限于个人使用的 lodash 库。\n\n## constants\n\nconstants 文件夹用来存储项目的公共常量，其中大部分与样式相关。\n\n当然如果常量特定于组件，你也可以把它放在组件文件夹下，就像 `App.constants.js` 一样。\n\n## pages\n\n如果你使用 Next.js 这种包含路由的框架，就会有 pages 文件夹。",
  "attributes": [
    {
      "value": "react-file-structure",
      "trait_type": "xlog_slug"
    }
  ]
}