React 项目（或组件库）的标准目录结构？答案

【问题标题】：Standard directory structure for a React project (or component library)?React 项目（或组件库）的标准目录结构？
【发布时间】：2016-01-31 00:48:44
【问题描述】：

我正在尝试为我的 React 项目找出正确的文件夹结构。

这是我目前使用的典型 webapp 结构：

app/
    scripts/
        app.jsx
        Component.jsx
        __tests__/
            Component-test.jsx
    styles/
        main.scss
        _other.scss
    index.html
    favicon.ico
dist/, dev-build/
    (almost the same structure as /app)
docs/
    Component.md
node_modules/
    (all the 3rd party libraries and plugins)
package.json
gulpfile.js
.eslintrc
various other configs

我觉得它远非完美。这样的结构在 MVC 和类似框架的时代是有意义的，但对于 React 组件来说就没有多大意义了，因为与组件相关的东西分布在 app/scripts/Component.jsx、app/scripts/__tests__/Component-test.jsx、styles/_other.scss 和docs/Component.md。对于更复杂的组件，情况会变得更糟，因为它们需要数据模拟，用于单元测试和文档页面。

我认为将项目重组为每个组件有一个目录已经很有帮助：

some/path/Component/
    index.jsx
    readme.md
    mockData.json
    test.jsx
    style.scss

但我仍然无法弄清楚细节。我希望我的代码可以使用 Node、webpack 和/或 browserify 运行。我希望能够在样式指南中开发组件。我希望能够一次运行我所有的单元测试。名单还在继续。

是否有任何构建 React 项目的行业标准（最佳实践）？您能提供一个好的结构示例吗？我已经厌倦了自己构建它然后看到维护问题，我觉得我可以通过遵循行业标准来避免这一切。

我知道这个问题非常广泛，但我相信回答得好将对社区大有裨益。

【问题讨论】：

没有标准的方式，我更喜欢你建议的 pod 架构，这样它就在一个地方
看看github.com/kriasoft/react-starter-kit或stackoverflow.com/a/29982852/3219121

标签： reactjs integration development-environment directory-structure

【解决方案1】：

我想出了这个结构，效果很好

【讨论】：

【解决方案2】：

Create react app 提供以下结构：

.
├── index.html
├── node_modules
├── package.json
├── README.md
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── favicon.ico
    ├── index.css
    ├── index.js
    └── logo.svg

【讨论】：