Component أساسيات المكوّن
آخر تحديث: 2026-11-03
Component أساسيات المكوّن
المكوّن هو أصغر وحدة قابلة لإعادة الاستخدام في تطبيق React: دالة تستقبل props وتعيد JSX. وبعد تقسيم الواجهة إلى مكوّنات، يمكن تطوير كل جزء واختباره وإعادة استخدامه وحده، ويُبنى صفحة كاملة من تلك القطع كما تُبنى من لبنات البناء. ولأن كل مكوّن دالة عادية، لا حاجة لتعلّم صيغة الأصناف قبل البدء.
| المجموعة | المفاهيم الأساسية |
|---|---|
| النوع | نمط |
| منذ الإصدار | أقدم إصدارات React |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
function Welcome({ name }) { // المكوّن = دالة تُعيد JSX؛ يجب أن يبدأ الاسم بحرف كبير
return <h1>Hello, {name}</h1>
}
<Welcome name="Alice" /> // يُستخدم تماماً كوسم HTML⚙️ المعاملات
| props | كائن البيانات الذي يمرّره المكوّن الأب؛ تميل المكوّنات إلى تفكيكه مباشرة ويجب أن تعامله على أنه للقراءة فقط. |
|---|
القيمة المرجعة：دالة المكوّن تعيد جزءاً من JSX (أو null) يصف ما يجب أن يعرضه ذلك المكوّن.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
تحت العنوان «Component reuse demo» تظهر ثلاث تحيات — Hello, Alice! و Hello, Bob! و Hello, React Learner! — أي أن المكوّن نفسه عُرض ثلاث مرات بخصائص مختلفة.💡 النقاط الأساسية
⚠️ تحذير يجب أن تبدأ أسماء المكوّنات بحرف كبير: فوسم بحرف صغير يتعامل معه React كعنصر HTML عادي.
💡 نصيحة لا تعرّف مكوّناً داخل مكوّن آخر — كل عرض ينشئ نوع مكوّن جديداً ويعيد بناء الشجرة الفرعية بالكامل، لذا انقله إلى النطاق الخارجي.
ℹ️ ملاحظة React الحديث يستخدم المكوّنات الدالية فقط؛ أما المكوّنات الصنفية فتبقى في الأكواد القديمة ويمكن لل نموذجيَن أن يتعايشا.
🏷️ المزيد من المفاهيم الأساسية
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س لماذا يجب أن تبدأ أسماء مكوّنات React بحرف كبير؟
ج مترجم JSX يقرّر بالحرف الأول: <div> يترجم إلى وسم نصي، و<Welcome> يترجم إلى مرجع مكوّن، فالاسم الذي يبدأ بحرف صغير يُعامل كعنصر HTML أصلي.
س هل يمكن لملف واحد أن يحتوي على عدة مكوّنات؟
ج نعم، وضع بضع مكوّنات صغيرة مترابطة في ملف واحد أمر شائع. والاصطلاح: مكوّن رئيسي واحد لكل ملف، مع بقاء المساعدات الصغيرة في الملف نفسه.
س ما الفرق بين المكوّنات الدالية والمكوّنات الصنفية؟
ج تستخدم المكوّنات الصنفية صيغة class وطرق دورة الحياة، بينما تدير المكوّنات الدالية الحالة والآثار الجانبية عبر الخطافات. والمكوّنات الدالية هي الخيار الموصى به للمشاريع الجديدة.
