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的时间和类似)的框架,但它并没有多大意义,当谈到反应的组分,因为组件相关的东西被分布在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

创建反应应用程序提供以下结构：

\n\n

.\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.html\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 node_modules\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 README.md\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 src\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 App.css\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 App.js\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 App.test.js\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 favicon.ico\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.css\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.js\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 logo.svg\n

\n