reactjs - React 项目(或组件库)的标准目录结构？

Question

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

这是我当前使用的典型 Web 应用程序结构:

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 项目的行业标准(最佳实践)？您能提供一个好的结构示例吗？我厌倦了自己构建它，然后看到维护问题，我觉得我可以通过遵循行业标准来避免这一切。

我知道这个问题非常广泛，但我相信回答得好将为社区带来巨大的好处。

Answer 1

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