Standardverzeichnisstruktur für ein React-Projekt (oder eine Komponentenbibliothek)?

Ich versuche, die richtige Ordnerstruktur für mein React-Projekt herauszufinden.Standardverzeichnisstruktur für ein React-Projekt (oder eine Komponentenbibliothek)?

Dies ist die typische Webapp-Struktur, die ich zur Zeit verwenden:

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

finde ich es sehr weitem nicht perfekt. Eine solche Struktur ergab in den Zeiten von MVC und ähnlichen) Frameworks Sinn, aber es macht wenig Sinn, wenn es um React-Komponenten geht, da Komponenten-bezogenes Zeug über app/scripts/Component.jsx, app/scripts/__tests__/Component-test.jsx, styles/_other.scss und docs/Component.md verteilt ist. Bei komplexeren Komponenten wird es sogar noch schlimmer, da sie Datenmocks sowohl für Komponententests als auch für die Dokumentseite benötigen.

Ich denke, dass das Projekt der Umstrukturierung würde ein Verzeichnis pro Komponente hat schon viel helfen:

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

Aber ich kann immer noch nicht die Details herauszufinden. Ich möchte, dass mein Code mit Node, Webpack und/oder browserify lauffähig ist. Ich würde gerne in der Lage sein, Komponenten im Style Guide live zu entwickeln. Ich würde gerne alle meine Unit-Tests gleichzeitig ausführen können. Die Liste geht weiter.

Gibt es einen Industriestandard (Best Practice) für die Strukturierung von React-Projekten? Können Sie ein gutes Strukturbeispiel bereitstellen? Ich habe es satt, es selbst zu strukturieren und dann Wartungsprobleme zu sehen. Ich glaube, ich könnte das alles vermeiden, indem ich einen Industriestandard befolge.

Ich verstehe, dass die Frage sehr breit ist, aber ich glaube, dass die Beantwortung davon gut ein großer Vorteil für die Gemeinschaft sein wird.

Quelle

2015-10-30 mik01aj

Es gibt keine Standardmethode, ziehe ich pod Architektur, wie Sie vorgeschlagen haben so dass es alles an einem Ort ist –

Werfen Sie einen Blick auf https://github.com/kriasoft/react-starter-kit oder http://stackoverflow.com/a/29982852/3219121 – matagus

Create react app bietet die folgende Struktur:

. 
├── index.html 
├── node_modules 
├── package.json 
├── README.md 
└── src 
    ├── App.css 
    ├── App.js 
    ├── App.test.js 
    ├── favicon.ico 
    ├── index.css 
    ├── index.js 
    └── logo.svg

Quelle

2016-09-06 11:53:27 sylvain