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

Question

我试图找到我的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，{{1} }，app/scripts/__tests__/Component-test.jsx和styles/_other.scss。对于更复杂的组件，它会变得更糟，因为它们需要数据模拟，无论是单元测试还是文档页面。

我认为重组项目以使每个组件有一个目录已经有很多帮助了：

docs/Component.md

但我仍然无法弄清楚细节。我希望我的代码能够与Node，webpack和/或browserify一起运行。我希望能够在样式指南中实时开发组件。我希望能够立刻运行所有的单元测试。名单还在继续。

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

我理解这个问题非常广泛，但我相信回答这个问题对社区来说是一个很大的好处。

Answer 1

我想出了这个结构，它运作得很好

Answer 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