تنظيم ملفات مشروع React بطريقة احترافية

أكيد وانت بتشتغل على مشروع React كان شغال عليه حد قبلك، قابلت الحالة الكارثية اللي كلنا بنخاف منها 😅
ملفات متلخبطة، مجلدات مش مفهومة، وكود مش مترتب… تحس إن المشروع نفسه بيقولك “سيبني واهرب” 😂

علشان كده، في البوست ده يا صديقي، هشرحلك أبسط وأفضل الطرق لتنظيم ملفاتك في أي مشروع React، بحيث يبقى شكله احترافي، وسهل لأي مطور يدخل عليه بعدك يفهمه بسرعة ⚡
يلا نبدأ سوا 👇

أول حاجة: تقسيم المجلدات الأساسية 🗂️​

ده الشكل المثالي لأي مشروع React منظم:

src/
|-- assets/
|-- components/
|-- pages/
|-- hooks/
|-- utils/
|-- services/
|-- styles/
|-- App.js
|-- index.js

تعالى نوضح واحدة واحدة 👇

• assets: هنا بتحط الصور، الأيقونات، والخطوط.
• components: كل عناصر الـUI زي Button، Navbar، Footer.
• pages: الصفحات الرئيسية زي Home، About، Contact.
• hooks: أي Custom Hook زي useFetch أو useAuth.
• utils: ملفات فيها دوال عامة زي تنسيق التاريخ أو فلترة البيانات.
• services: الكود اللي بيتعامل مع الـAPIs أو الـHTTP Requests.
• styles: ملفات CSS أو SCSS العامة.

ثاني حاجة: خلى كل Component في فولدر لوحده 🎨​

من الأخطاء الشائعة إنك تحط كل الـComponents في مجلد واحد.
الأفضل تخلي كل كومبوننت في فولدر خاص بيه ومعاه كل متعلقاته.
زي كده:

components/
|-- Button/
|-- Button.js
|-- Button.css
|-- Button.test.js

ده بيخلي الصيانة أسهل، خصوصًا لما المشروع يكبر وتبدأ تضيف Features جديدة.

تنظيم الصفحات (Pages) 🧭​

لو مشروعك كبير شوية، من الأفضل تعمل مجلد لكل صفحة أو Feature.
زي كده:

pages/
|-- Home/
|-- Home.js
|-- Home.css
|-- About/
|-- About.js
|-- About.css

كده كل صفحة عندها ملفاتها الخاصة، وده يخلي التنقل داخل المشروع أسهل جدًا.

استخدم ملفات index.js لتقليل الاستيرادات ✨​

بدل ما تعمل استيراد لكل ملف لوحده، استخدم ملف index.js في كل مجلد يجمعهم.

components/
|-- Navbar.js
|-- Footer.js
|-- index.js

محتوى index.js:

export { default as Navbar } from './Navbar';
export { default as Footer } from './Footer';

دلوقتي بدل ما تكتب:

import Navbar from './components/Navbar';
import Footer from './components/Footer';

هتكتب ببساطة:

import { Navbar, Footer } from './components';

ودي طريقة أنضف وأوضح خصوصًا لما يكون عندك عشرات الـComponents.

سَمّي كل الملفات بطريقة واحدة (PascalCase) 🧱​

خلي كل أسماء الكومبوننتات والفايلات تبدأ بحرف كبير زي كده 👇
UserProfile.js
ده بيخلي المشروع كله موحّد وسهل القراءة لأي حد.

مشروعك كبير؟ استخدم Feature-Based Structure 💼​

لو شغال على مشروع Enterprise أو ضخم، الأحسن تستخدم طريقة تقسيم بالـFeatures.
يعني كل Feature (زي Auth أو Dashboard) يبقى ليه مجلده الخاص بكل ملفاته.
زي المثال ده:

src/
|-- features/
|-- Auth/
|-- Login.js
|-- Register.js
|-- AuthContext.js
|-- Dashboard/
|-- Dashboard.js
|-- Dashboard.css
|-- Widgets/
|-- Widget1.js
|-- Widget2.js

الميزة هنا إن كل جزء من المشروع مستقل وسهل النقل أو التعديل عليه.
وده بيسهل جدًا الشغل في فرق التطوير الكبيرة 👨‍💻👩‍💻

نصايح إضافية لتنظيم مشروعك 💡​

• خلي كل الملفات اللي بتتعامل مع APIs في مجلد services.
• لو عندك أكواد Utility زي تنسيق أرقام أو تواريخ، حطها في utils.
• استخدم ESLint وPrettier عشان الكود يفضل منسق دايمًا.
• قسم الستايلات العامة عن الستايلات الخاصة بكل كومبوننت.
• لو بتستخدم TypeScript، اعمل مجلد خاص بـtypes لو محتاج.

كود عملي صغير لتنظيم الاستيرادات 👇​

import { Navbar, Footer } from './components';
import { useAuth } from './hooks';
import { getUserData } from './services/userService';
import './styles/global.css';

لاحظ إزاي الكود بقى أنضف وسهل تتبعه لما كل حاجة في مكانها الصح 💪

الخلاصة 🧾​

تنظيم الملفات مش رفاهية يا صديقي، دي خطوة أساسية بتوفرلك وقت كبير بعدين.
ولما تبدأ مشروع جديد، خليك دايمًا فاكر القواعد دي:

• ابدأ بتقسيم واضح للمجلدات.
• خلي كل Component في مكانه الخاص.
• استخدم index.js لتقليل الاستيرادات.
• ولو مشروعك كبير، استخدم هيكل Feature-Based.

بكده مشروعك هيبقى منظم، وسهل لأي حد يشتغل عليه بعدك.
وجرب التنظيم ده في مشروعك الجاي، وهتحس بالفرق بنفسك 😉