React • المستوى الأول • الدرس 3

إعادة استخدام المكونات وتنظيم الأكواد

أهداف الدرس العلمية

تجزئة وتجميع المكونات لبناء واجهة كاملة.
فهم شجرة المكونات (Component Tree) وكيفية ترتيبها.
إنشاء مكونات مستقلة قابلة لإعادة الاستخدام.
استدعاء مكونات متعددة داخل مكون رئيسي واحد.

1. شجرة المكونات (Component Tree)

في React، تُبنى التطبيقات من مكونات صغيرة مترابطة. المكون الرئيسي (مثل App) يستدعي مكونات فرعية (مثل Header و Content) لبناء واجهة كاملة. هذه البنية تُشبه الشجرة، ومن هنا جاء اسم "شجرة المكونات".

javascript

function App() {
  return (
    <div>
      <Header />
      <Content />
      <Footer />
    </div>
  );
}

2. لماذا نُجزّئ المكونات؟

تجزئة المكونات تمنحك فوائد عديدة:

🔄 إعادة الاستخدام

اكتب المكون مرة، استخدمه في عدة أماكن.

🛠️ سهولة الصيانة

تعديل مكوّن واحد يؤثر على كل استخداماته.

🧪 سهولة الاختبار

كل مكوّن يُختبر بشكل مستقل.

👥 تعاون أفضل

كل مطور يعمل على مكوناته المستقلة.

التطبيق العملي المباشر

تحدي الدرس الثالث: تجميع المكونات

قم بالتعديل على الكود في المحرر أدناه:

استدعِ المكون <Footer /> في نهاية تطبيق App بعد <Content />.

⏳ جارٍ تحميل المحرر التفاعلي...

الدرس السابق الانتقال للدرس الرابع