في هذا الدرس 6تصفّح المواضيع
يُبنى المكون الدالي (Functional Component) في معيار React الحديث كدالة JavaScript قياسية تماماً تُعيد توصيف JSX يمثل جزءاً محدداً من واجهة المستخدم. لا تحتاج إلى وراثة أصناف معقدة أو تسجيل قوالب خاصة؛ بل تكتب تصريح دالة واضح مثل function CourseBadge() أو دالة سهمية محفوظة في ثابت const.
عندما ترسم React الشاشة، تستدعي دالة المكون وتقرأ هيكل العناصر المُعاد منها ثم تطابق شجرة DOM في المتصفح معه تلقائياً.
function CourseBadge() {
return (
<article className="rx-card">
<span className="rx-badge">Module 02</span>
<h3>Modern Functional Components</h3>
<p>Built with plain JavaScript functions.</p>
</article>
);
}يجب أن يبدأ اسم أي مكون في React بحرف إنجليزي كبير وفق نمط PascalCase مثل ProfileCard وSearchHeader وPrimaryButton. ليست هذه القاعدة مجرد ذوق تنسيقي، بل يعتمد عليها مترجم JSX للتفريق الحاسم بين عناصر المتصفح ومكوناتك:
- الوسوم التي تبدأ بحرف صغير مثل
<section>و<button>تُعامل كوسومHTMLمدمجة في المتصفح. - الوسوم التي تبدأ بحرف كبير مثل
<ProfileCard />تُترجم كاستدعاء مباشر لدالتك البرمجيةProfileCard.
function VerifiedTag() {
return <span className="rx-badge">Verified Lab</span>;
}
function LabHeader() {
return (
<header className="rx-card">
<VerifiedTag />
<h2>CloseTag React Studio</h2>
</header>
);
}عندما يُعيد المكون عنصراً قصيراً في سطر واحد، يمكنك كتابته بجوار كلمة return مباشرة. أما إذا امتدت عناصر JSX على عدة أسطر، فلا بد من إحاطتها بأقواس هلالية يبدأ قوسها المفتوح على نفس سطر return (.
إغفال هذه الأقواس وترك سطر return منفرداً يفعّل آلية الإدراج التلقائي للفاصلة المنقوطة (ASI) في محرك اللغة، فتتحول العبارة بصمت إلى return; وتُعيد القيمة undefined بدلاً من رسم عناصر الواجهة.
تتجلى القوة الهندسية للمكونات الدالية في التركيب وإعادة الاستخدام (Composition)؛ إذ تبني وحدات صغيرة متخصصة مثل StudioLogo وTrackSummary مرة واحدة، ثم تدرجها وتكررها بمرونة داخل مكون أب جامع مثل LearningPortal دون نسخ سطر تصميم واحد.
function TrackItem() {
return <div className="rx-card">JSX Lesson</div>;
}
function LearningPortal() {
return (
<main className="rx-stack">
<TrackItem />
<TrackItem />
</main>
);
}رغم أن المكون الأب يستدعي المكونات الأبناء داخل جملة return بشكل طبيعي، إياك أن تُعرّف دالة مكون داخل جسم دالة مكون آخر! فكتابة function ChildBadge() {} بداخل function ParentPanel() {} تنشئ دالة بعنوان ذاكرة جديد تماماً في كل مرة يُعاد فيها رسم الأب، مما يجبر React على هدم عناصر الابن في المتصفح وإعادة بنائها من الصفر وفقدان تركيز المؤشر.
القاعدة الذهبية الصارمة هي تعريف جميع دوال المكونات في المستوى الأعلى للملف.
function StatusPill() {
return <span className="rx-badge">Top-Level</span>;
}
function ServerPanel() {
return (
<section className="rx-card">
<StatusPill />
<p>Stable identity on every render.</p>
</section>
);
}متى تفصل جزءاً من الشاشة في مكون مستقل؟ طبّق مبدأ المسؤولية الواحدة (Single Responsibility Principle)؛ افصل القطعة في مكون خاص عندما تتكرر في أكثر من موضع مثل الأزرار والبطاقات والشارات، أو عندما يكبر قسم في الصفحة مثل شريط التنقل أو جدول الأسعار بحيث يصبح فصله أوضح للقراءة والصيانة، دون المبالغة بتغليف كل فقرة نصية مفردة. راجع المقارنة الهندسية التالية:
| معيار المقارنة | عنصر HTML المدمج | المكون الدالي في React |
|---|---|---|
| حالة الحرف الأول للوسم | يكتب بحروف صغيرة مثل <section> و<h2> | يبدأ وجوباً بحرف كبير PascalCase مثل <CourseCard /> |
| نطاق التعريف البرمجي | مدمج مسبقاً في محرك المتصفح القياسي | يُعرَّف كدالة JavaScript في المستوى الأعلى للملف |
| إرجاع الأسطر المتعددة | يُكتب مباشرة ضمن بنية العناصر المحيطة | يُحاط بأقواس هلالية return ( ... ) لمنع فخ الفاصلة |
| الدور المعماري بالواجهة | لبنة أولية خام في شجرة المستند | وحدة واجهة متكاملة قابلة للتركيب وإعادة الاستخدام |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
بنيت في هذا الدرس أول مكون دالي قياسي في React، وطبقت قاعدة التسمية بحرف كبير PascalCase وإحاطة الأسطر المتعددة بالأقواس الهلالية، وركّبت المكونات المتداخلة مع الالتزام بتعريفها دائماً في المستوى الأعلى للملف. الخطوة التالية: انتقل الآن إلى الدرس رقم 6 «تصدير واستيراد المكونات في React» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Functional Component المكون الدالي
- دالة JavaScript قياسية تبدأ بحرف كبير وتعيد صياغة JSX تصف وحدة واجهة قابلة لإعادة الاستخدام.
- للمراجعة
- 02 PascalCase نمط PascalCase
- أسلوب تسمية يبدأ فيه كل مقطع بحرف كبير دون فواصل مثل CourseCard، وهو إلزامي لتمييز مكونات React.
- للمراجعة
- 03 Component Composition تركيب المكونات
- بناء الشاشات المتكاملة عبر دمج وتداخل مكونات فرعية صغيرة متخصصة داخل مكون أب جامع.
- للمراجعة
- 04 Top-Level Declaration التعريف بالمستوى الأعلى
- كتابة دالة كل مكون في النطاق الجذري للملف خارج جسم أي مكون آخر للحفاظ على ثبات هويته وأدائه.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 JSX JSX
- JavaScript XML
- الامتداد النحوي الشبيه بـ HTML الذي تعيده دوال المكونات لوصف بنية الواجهة.
- للمراجعة
- 02 ASI ASI
- Automatic Semicolon Insertion
- آلية المحلل اللغوي في JavaScript التي تدرج فاصلة منقوطة تلقائياً بعد كلمة return المنفردة في السطر.
- للمراجعة
- 03 SRP SRP
- Single Responsibility Principle
- مبدأ هندسي ينص على أن يركز كل مكون على مسؤولية واحدة واضحة ليسهل اختباره وصيانته.
- للمراجعة
- 04 DOM DOM
- Document Object Model
- شجرة عناصر الصفحة في المتصفح التي تحدثها React استناداً إلى مخرجات دوال المكونات.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افتح المثال الأول في محرر التجريب وغيّر اسم الدالة ووسم العرض إلى StudioCard بصيغة PascalCase مع إضافة فقرة وصفية.
-
افتح مثال التركيب في محرر التجريب وأضف استدعاءً ثالثاً للمكون TrackItem مع إبقاء تعريف جميع الدوال في المستوى الأعلى للملف.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي10 أسئلة تنتظرك ＋
ما التعريف الدقيق للمكون الدالي في معيار React الحديث؟
المكون الدالي هو دالة JavaScript قياسية تعيد صياغة JSX تصف جزءاً من واجهة المستخدم.
لماذا يجب أن يبدأ اسم المكون في React بحرف كبير وفق نمط PascalCase؟
تعامل JSX الوسوم بالحروف الصغيرة كعناصر HTML مدمجة، بينما تعامل الأسماء بالحرف الكبير كدوال مكونات.
كتابة الوسم <courseCard /> بحرف أول صغير تستدعي الدالة courseCard() كمكون React بنجاح.
خطأ؛ فالبدء بحرف صغير يجعل React تعتبره وسم HTML غير معروف بدلاً من استدعاء دالة المكون.
ماذا يحدث إذا انتقلت إلى سطر جديد مباشرة بعد كلمة return دون فتح قوس هلالي؟
تدرج JavaScript فاصلة منقوطة تلقائياً فتعيد الدالة undefined بدلاً من عناصر JSX.
بمجرد تعريف المكون الدالي في المستوى الأعلى، يمكنك رسم عدة نسخ مستقلة منه داخل المكون الأب.
صواب؛ فإعادة استخدام المكون عدة مرات باستقلالية تامة هي جوهر معمارية المكونات في React.
لماذا يُحظر تماماً تعريف دالة مكون فرعي داخل جسم دالة مكون أب؟
لأن ذلك ينشئ مرجع دالة جديداً في كل تصيير فيجبر React على هدم عناصر الابن وإعادة بنائها بالكامل.
أين يجب تعريف دوال المكونات داخل ملف الوحدة البرمجية؟
تُعرَّف جميع دوال المكونات دائماً في المستوى الأعلى الجذري للملف.
تصلح كل من صيغة تصريح الدالة القياسية والدالة السهمية المسندة إلى ثابت بصيغة PascalCase لبناء مكون دالي صحيح.
صواب؛ فكلتا الصيغتين تنشئان دالة JavaScript قياسية تستطيع React استدعاءها ورسم مخرجاتها.
ما المبدأ الهندسي الأنسب لتحديد متى نقسّم المكون الكبير إلى مكونات أصغر؟
يرشدنا مبدأ المسؤولية الواحدة لفصل الأجزاء المتكررة أو الأقسام المستقلة في مكونات واضحة الغرض.
أي عبارة إرجاع التالية تعيد عناصر JSX متعددة الأسطر بأمان تام؟
فتح القوس الهلالي على نفس سطر return يمنع الإدراج التلقائي للفاصلة المنقوطة.