أفضل الممارسات وتنظيم المشروع

تنظيم المشروع

بنية شائعة وواضحة:

src/
  components/     ← reusable components (Button, Card)
  pages/          ← page components
  hooks/          ← service hooks (useUsers, useAuth)
  context/        ← context providers
  repositories/   ← Repository layer (UserRepository, ProductRepository)
    http.ts       ← HttpClient (الطبقة الوحيدة التي تستورد fetch/axios)
    protocols.ts  ← واجهات Repository
    implementations.ts ← تنفيذات Repository
  lib/            ← قاعدة مشتركة (react-base-repository.ts)
  utils/          ← helper functions
  App.tsx

قاعدة أساسية: المكوّنات لا تستدعي fetch أو axios مباشرة. المكوّن ← Hook ← Repository ← API. هذا الفصل يضمن سهولة الاختبار والتعديل.

1) مكوّنات صغيرة ومركّزة

🔑 كل مكوّن يفعل شيئًا واحدًا. إن كبر مكوّن (أكثر من ~150 سطرًا)، قسّمه إلى مكوّنات أصغر.

2) قواعد الخطّافات (Rules of Hooks)

// ✅ استدعِ الخطّافات في أعلى المكوّن دائمًا
function Good() {
  const [x, setX] = useState(0);
  useEffect(() => {}, []);
}

// ❌ لا تستدعها داخل شرط أو حلقة
function Bad() {
  if (cond) {
    const [x] = useState(0);   // خطأ!
  }
}

استدعِ الخطّافات في المستوى الأعلى فقط، وداخل مكوّنات React أو خطّافات مخصّصة فقط.

3) لا تعدّل الحالة مباشرةً

// ❌ خطأ
todos.push(newTodo);
setTodos(todos);

// ✅ صحيح: أنشئ نسخة جديدة
setTodos([...todos, newTodo]);
setUser({ ...user, name: "جديد" });

4) استخدم key ثابتًا في القوائم

{items.map((item) => (
  <li key={item.id}>{item.name}</li>   // id ثابت، لا الفهرس
))}

5) رفع الحالة عند الحاجة (Lifting State Up)

إن احتاج مكوّنان نفس البيانات، ضع الحالة في أقرب أب مشترك ومرّرها للأسفل.

6) افصل المنطق عن العرض

انقل المنطق المعقّد إلى خطّافات مخصّصة أو دوال مساعدة، وأبقِ JSX نظيفًا.

7) أسماء واضحة واصطلاحات

• مكوّنات بـ PascalCase (UserCard).
• خطّافات تبدأ بـ use.
• ملف لكل مكوّن باسمه.

الأخطاء الشائعة

• ❌ تعديل الحالة/الخصائص مباشرةً → استخدم نسخًا جديدة.
• ❌ استخدام الفهرس كـ key في قوائم متغيّرة → أخطاء عرض.
• ❌ مكوّنات ضخمة تفعل كل شيء → قسّمها.
• ❌ خرق قواعد الخطّافات (شرطية/متداخلة).

خلاصة

نظّم مشروعك بمجلّدات واضحة، واكتب مكوّنات صغيرة، واحترم قواعد الخطّافات، ولا تعدّل الحالة مباشرةً، واستخدم key ثابتًا، وارفع الحالة عند الحاجة. هذه عادات تصنع تطبيق React نظيفًا وقابلًا للصيانة.