एक प्रतिक्रिया परियोजना (या घटक पुस्तकालय) के लिए मानक निर्देशिका संरचना?

Question

मैं अपने रिएक्ट प्रोजेक्ट के लिए सही फ़ोल्डर संरचना को खोजने का प्रयास कर रहा हूं।

यह विशिष्ट 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 

मैं इसे सही से बहुत दूर हैं। इस तरह की संरचना एमवीसी और इसी तरह के समय में समझ में आती है) ढांचे, लेकिन जब प्रतिक्रिया घटकों की बात आती है तो यह अधिक समझ में नहीं आता है, क्योंकि घटक से संबंधित सामान 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 

लेकिन मैं अभी भी विवरण को समझ नहीं सकता। मैं चाहता हूं कि मेरा कोड नोड, वेबपैक और/या ब्राउज़र के साथ चलने योग्य हो। मैं स्टाइल गाइड में रहने वाले घटकों को विकसित करने में सक्षम होना चाहता हूं। मैं एक बार में अपने सभी यूनिट परीक्षण चलाने में सक्षम होना चाहता हूं। सूची चलती जाती है।

क्या प्रतिक्रिया परियोजनाओं के निर्माण के लिए कोई उद्योग मानक (सर्वोत्तम अभ्यास) है? क्या आप एक अच्छी संरचना उदाहरण प्रदान कर सकते हैं? मैं इसे अपने आप पर संरचित करने और फिर रखरखाव की समस्याओं को देखकर थक गया हूं, मुझे लगता है कि मैं उद्योग के मानक का पालन करके इन सब से बच सकता हूं।

मैं समझता हूं कि सवाल बहुत व्यापक है लेकिन मुझे विश्वास है कि इसका उत्तर देने से समुदाय के लिए एक बड़ा लाभ होगा।

Answer 1

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 

Answer 2

मैं इस संरचना के साथ आया है और यह बहुत अच्छी तरह से काम करता है