هيكلة المجلدات في مشروع react

هيكلة المجلدات ترجع بشكل كبير الى ذوق المبرمج وبرأيي الشخصي أفضل هيكلة مجلدات تبسط العمل على react الى أقصى حد هي هيكلة الصفحات بحيث كل صفحة يكون لديها مجلد components خاص بها و مجلد hooks لل custom hooks بحيث نفصل المنطق عن المكونات ونستوردها على شكل hooks مبسطة في components وفي الأخير نقوم باستيراد المكونات للمكون الصفحة الرئيسي بالنسبة لهيكلة redux فهيكلته معروفة 

----src/
        --utils/
        --static/
        --redux/
        --common/
        --pages/
            --page1/
                --hooks/
                --components/
                --Page1.js
            --page2/
                --hooks/
                --components/
                --Page2.js
            --page3/
                --hooks/
                --components/
                --Page3.js
            --page4/
                --hooks/
                --components/
                --Page4.js

عملية التنظيم والهيكلة للمشروع تختلف بطبيعة الحال بإختلاف المشروع 
على إفتراض أن المشروع كبير مثلما تقول ويتم إستهلاك الكثير من الوقت في عملية الهيكله فيمكنك إتباع ال modular pattern
حيث تقوم بقسيم المشروع الى عدة وحدات كل وحدة تحتوي علي فولدر خاص ب components الخاصه بهذه الوحدة بالاضافة الى فولدر services الخاص باللوجيك المسئول عن ال API وفولدر __tests__ يحوي عملية الاختبار لهذه الوحده في حالة كنت تريده فيكون على سبيل المثال تقسم المشروع كالتالي: 
 

├── src
│   ├── globals
│   │   ├── contexts - يحتوي علي أي كونتكست
│   │   ├── core.service.js - يحتوي على اللوجيك المستخدم مع ال API المشترك في المشروع بأكمله
│   │   └── routes.js - يحتوي على جميل المسارات
│   ├── index.js - الملف الرئيسي
│   ├── modules - الوحدات المكونه للمشروع
│   │   ├── blog
│   │   │   ├── components
│   │   │   │   ├── blogCard
│   │   │   │   │   ├── index.js
│   │   │   │   │   └── style.module.css
│   │   │   │   ├── blogListPage
│   │   │   │   │   ├── index.js
│   │   │   │   │   └── style.module.css
│   │   │   │   ├── CategoriesFilter
│   │   │   │   │   ├── index.js
│   │   │   │   │   └── style.module.css
│   │   │   │   ├── SearchFilter
│   │   │   │   │   ├── index.js
│   │   │   │   │   └── style.module.css
│   │   │   │   └── singleBlogPage
│   │   │   │       ├── index.js
│   │   │   │       └── style.module.css
│   │   │   ├── services
│   │   │   │   ├── blog.service.js
│   │   │   │   └── category.service.js
│   │   │   └── __tests__
│   │   ├── contact
│   │   │   ├── components
│   │   │   │   ├── form
│   │   │   │   │   ├── index.js
│   │   │   │   │   └── style.module.css
│   │   │   │   ├── icon
│   │   │   │   │   ├── index.js
│   │   │   │   │   └── style.module.css
│   │   │   │   └── page
│   │   │   │       ├── index.js
│   │   │   │       └── style.module.css
│   │   │   ├── services
│   │   │   │   └── contact.service.js
│   │   │   └── __tests__
│   │   ├── events
│   │   │   ├── components
│   │   │   │   ├── ApplyButton
│   │   │   │   │   ├── ApplyButton.js
│   │   │   │   │   └── style.module.css
│   │   │   │   ├── eventCard
│   │   │   │   │   ├── index.js
│   │   │   │   │   └── style.module.css
│   │   │   │   ├── EventDetails
│   │   │   │   │   ├── index.js
│   │   │   │   │   └── style.module.css
│   │   │   │   ├── eventsListPage
│   │   │   │   │   ├── index.js
│   │   │   │   │   └── style.module.css
│   │   │   │   ├── eventsSection
│   │   │   │   │   ├── index.js
│   │   │   │   │   └── style.module.css
│   │   │   │   ├── Gallery
│   │   │   │   │   ├── index.js
│   │   │   │   │   └── style.module.css
│   │   │   │   ├── PopupContent
│   │   │   │   │   ├── PopupContent.js
│   │   │   │   │   └── style.module.css
│   │   │   │   └── singleEventPage
│   │   │   │       ├── index.js
│   │   │   │       └── style.module.css
│   │   │   ├── services
│   │   │   │   └── events.service.js
│   │   │   └── __tests__
│   │   ├── static-pages
│   │   │   ├── about
│   │   │   │   └── components
│   │   │   │       ├── page
│   │   │   │       │   ├── components
│   │   │   │       │   │   ├── header
│   │   │   │       │   │   │   ├── index.js
│   │   │   │       │   │   │   └── style.module.css
│   │   │   │       │   │   ├── sectionName
│   │   │   │       │   │   │   ├── index.js
│   │   │   │       │   │   │   └── style.module.css
│   │   │   │       │   │   ├── sectionName
│   │   │   │       │   │   │   ├── index.js
│   │   │   │       │   │   │   └── style.module.css
│   │   │   │       │   │   └── structureSection
│   │   │   │       │   │       ├── index.js
│   │   │   │       │   │       └── style.module.css
│   │   │   │       │   ├── index.js
│   │   │   │       │   └── style.module.css
│   │   │   │       ├── section
│   │   │   │       │   ├── index.js
│   │   │   │       │   └── style.module.css
│   │   │   │       └── video
│   │   │   │           └── index.js
│   │   │   └── home
│   │   │       ├── components
│   │   │       │   ├── bestProjects
│   │   │       │   │   ├── index.js
│   │   │       │   │   └── style.module.css
│   │   │       │   ├── intro
│   │   │       │   │   ├── index.js
│   │   │       │   │   └── style.module.css
│   │   │       │   └── page
│   │   │       │       ├── index.js
│   │   │       │       └── style.module.css
│   │   │       ├── services
│   │   │       │   └── clients.service.js
│   │   │       └── __tests__
│   │   └── teamServices
│   │       ├── components
│   │       │   ├── singleServicePage
│   │       │   │   ├── index.js
│   │       │   │   └── style.module.css
│   │       │   └── teamServicesSection
│   │       │       ├── index.js
│   │       │       └── style.module.css
│   │       ├── store
│   │       │   └── services.json
│   │       └── __tests__
│   │           ├── singleServiceSection.test.js
│   │           └── __snapshots__
│   ├── serviceWorker.js
│   ├── shared
│   │   ├── footer
│   │   │   ├── index.js
│   │   │   └── style.module.css
│   │   ├── header
│   │   │   ├── index.js
│   │   │   └── style.css
│   │   ├── Image-loader
│   │   │   ├── index.js
│   │   │   └── style.css
│   │   ├── Input.js
│   │   ├── layout
│   │   │   ├── index.js
│   │   │   └── style.css
│   │   ├── lazy-image
│   │   │   └── index.js
│   │   ├── loading
│   │   │   └── index.js
│   │   ├── newsletterForm
│   │   │   ├── index.js
│   │   │   └── style.module.css
│   │   ├── notFoundPage
│   │   │   ├── index.js
│   │   │   └── style.module.css
│   │   ├── services
│   │   │   ├── date.service.js
│   │   │   ├── image.service.js
│   │   │   ├── language.service.js
│   │   │   ├── newsletter.service.js
│   │   │   └── validation.service.js
│   │   ├── sideDrawer
│   │   │   ├── index.js
│   │   │   └── style.module.css
│   │   ├── __tests__
│   │   │   ├── footer.test.js
│   │   │   ├── header.test.js
│   │   │   ├── newsLetter.test.js
│   │   │   ├── sideDrawer.test.js
│   │   │   └── themeBtn.test.js
│   │   └── theme-button
│   │       ├── index.js
│   │       └── style.css
│   └── styles.css

وهذا مثال على تخطيط وتنظيم لمشروع متوسط نوعا ويتيح  لك الإمكانية للتوسع في المستقبل دون معاناه ودون إستهلاك الكثير من الوقت حيث أن المشروع مقسم وحدات وكل وحدة منعزلة بمفردها حتى في حالة أردت إستخدام وحدة كاملة في مشروع أخر فيمكنك فقط نسخ الفولدر الخاص بها كاملا ونقله الى المشروع الذي تريد دون أي معاناة تذكر.