React Relay项目目录结构组织

Question

我开始使用 Relay 构建项目并且我[对我的项目结构有点困惑（我使用同构方法）。

这是我正常的 React 项目结构：

-- project
     |-----src
     |       |---components (React components with their respective .css styles)
     |       |---containers (React/Redux containers)
     |       |---helpers (Helpers, common to components and containers)
     |       |---redux (Redux stores)
     |       server.js (node server code)
     |       client.js (client code)
     |       routes.js (routes)
     |       config.js (application config)
     |
     |-----static
     |       |-- ... (static files)
     |-----webpack 
     |       |-- ... (webpack configuration files)

在 React/Redux 中，容器在概念上是一个 "smart component"（参见 this link 并且在组件（纯 React 组件）和容器（"smart component" 与 redux 数据)

现在，当我转向 Relay 时，容器在概念上仅与数据相关，与 React 组件相关（参见 here），这将稍微改变上面的目录结构。

问题：

a) 我应该将组件和容器放在单独的目录中吗？

b) 我应该将它们称为所有组件并将其结构化为：

  src
   |------ containers
               |-------- itemcontainer.js (relay container)
               |-------- itemcomponent.js (react component)
               |-------- itemcomponent.css (react component styling)

那么，如何处理没有关联数据的组件？

c) 我应该做些不同的事情吗？

在 React/Relay 架构中组织组件、容器和样式元素的最佳方法是什么？

组织 React/Relay 项目结构的最佳方法是什么？

Answer 1

你的问题确实是一个偏好问题，但如果你想最大限度地提高开发者体验：

最好不要把你的“容器”和“组件”分开，这样可以方便的改变组件的数据需求。无论您是使用终端还是 GUI（如文件资源管理器、Finder 或 VSCode）来浏览项目，将有关组件的所有内容都放在一个目录中可以轻松进行更改，尤其是在长运行并且在大型团队中，您想限制摩擦。只需考虑遍历文件结构，可能会阻止“懒惰”的开发人员修复错误或执行简单的任务。

我会建议这种结构，但要半信半疑：

src
   |------ components
         |-------- ComponentName
               |-------- index.js          (relay container)
               |-------- ComponentNameUI.js  (react component)
               |-------- ComponentName.css (react component styling)
   |------ ui
         |-------- ComponentName
               |-------- index.js          (react component)
               |-------- ComponentName.css (react component styling)

所有“智能”中继组件（“容器”+“演示”，您称之为“组件”）都在 components/ 目录中，而您的“哑”组件则不在与 Relay 有任何关系，例如您的设计系统的组件（如 Button、Avatar 等）将位于 ui/ 目录中（您可以随意命名喜欢）。

如果你想要一个简单的方法来放置和执行上述结构，我创建了一个 CLI，relay-butler，它接受 GraphQL fragments 和输出该结构中的继电器组件。默认情况下是 TypeScript，但您可以根据需要自定义模板并将其更改为 JavaScript.

我还建议阅读有关 Thinking in Relay in the relay.dev 文档的页面，它不会告诉您如何构建您的项目，但会让您了解您可能想要如何去做。

但最重要的是，正如 create-react-app 的合著者之一丹·阿布拉莫夫 (Dan Abramov) 曾经说过的：“四处移动文件，直到感觉正确为止”(https://twitter.com/dan_abramov/status/1042364018848145408)。

React Relay项目目录结构组织

React Relay project directory structure organization

javascript

reactjs

relayjs