I am trying to find the correct folder structure for my React project.
This is a typical webapp structure that I am currently using:
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. Such a structure made sense in the days of MVC and similar) frameworks, but it doesn’t make much sense when it comes to React components, because the components related components are distributed by app/scripts/Component.jsx , app/scripts/__tests__/Component-test.jsx , styles/_other.scss and docs/Component.md . For a more complex component, this gets even worse, because they need mocks data for both unit tests and the doc page.
I think that restructuring the project to have one directory per component has helped a lot:
some/path/Component/ index.jsx readme.md mockData.json test.jsx style.scss
But I still can not figure out the details. I want my code to be run using Node, a web page and / or browser. I would like to be able to design components in a leadership style. I would like to be able to run all of 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 example of a structure? I’m tired of structuring it myself and then seeing problems with the service, I feel that I can avoid all this by following the industry standard.
I understand that the question is very broad, but I believe that the answer to it will be useful to the community.
source share