Standard directory structure for a React project (or component library)?

Question

I'm trying to find out the right folder structure for my React project.

This is the typical webapp structure that I currently use:

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

I find it very far from perfect. Structure like this made sense in the times of MVC and similar) frameworks, but it doesn't make much sense when it comes to React components, because component-related stuff is spread across app/scripts/Component.jsx, app/scripts/__tests__/Component-test.jsx, styles/_other.scss and docs/Component.md. For more complex component it gets even worse, because they need data mocks, both for unit tests and the docs page.

I think that restructuring the project to have one directory per component would already help a lot:

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

But I still can't figure out the details. I'd like my code to be runnable with Node, webpack and/or browserify. I'd like to be able to develop components live in the style guide. I'd like to be able to run all my unit tests at once. The list goes on.

Is there any industry standard (best practice) for structuring React projects? Could you provide a good structure example? I'm tired of structuring it on my own and then seeing maintenance problems, I feel I could avoid all this by following an industry standard.

I understand that the question is very broad but I believe that answering it well will be a great benefit for the community.

Answer 1

I've came up with this structure and it works pretty well