في هذا الدرس 6تصفّح المواضيع
تزدحم تطبيقات الويب المعاصرة بلوحات تحكم حية وفلاتر بحث فورية وتحديثات متزامنة تتحول سريعاً إلى شفرة معقدة عند إدارتها بالتعديل اليدوي المباشر لعناصر الصفحة. هنا تبرز مكتبة React مفتوحة المصدر بوصفها المكتبة الأشهر عالمياً لبناء واجهات المستخدم (User Interfaces) عبر تقسيم الشاشة إلى قطع صغيرة مستقلة قابلة لإعادة الاستخدام تُسمى المكونات (Components).
في معيار React الحديث المعتمد رسمياً في react.dev، يُبنى كل مكون كدالة JavaScript قياسية نقية تُعيد توصيفاً واضحاً لما يجب أن يظهر على الشاشة، بينما تتكفل المكتبة بمزامنة المتصفح تلقائياً.
function WelcomeBanner() {
return (
<section className="card">
<h2>Welcome to Modern React 18</h2>
<p>Declarative UI built with clean functions.</p>
</section>
);
}تستند قوة React وانتشارها القياسي إلى ثلاث ركائز هندسية متكاملة تجعل بناء الواجهات منظماً وسريعاً:
- معمارية المكونات المستقلة (Component Architecture): يُفصل كل زر وشريط تنقل وبطاقة منتج في دالة مستقلة يسهل اختبارها وإعادة توظيفها في عشرات الصفحات.
- صياغة JSX التعبيرية: امتداد نحوي مريح يتيح كتابة بنية العناصر بوضوح بصري يشبه
HTMLجنباً إلى جنب مع منطق العرض في ملف واحد متماسك. - التمثيل الافتراضي والمطابقة الذكية (Reconciliation): تحسب React التغييرات في الذاكرة أولاً ثم تُجري أصغر تعديل فعلي لازم على شجرة
DOMالحقيقية في المتصفح.
function FeatureList() {
return (
<div className="features">
<p>1. Reusable Functional Components</p>
<p>2. Expressive JSX Markup</p>
<p>3. Smart DOM Reconciliation</p>
</div>
);
}يمنحك إتقان React مزايا عملية مباشرة في سوق هندسة البرمجيات؛ فتدفق البيانات أحادي الاتجاه يجعل تتبع القيم واضحاً وخالياً من المفاجآت، واعتماد الدوال والخطافات الحديثة ألغى تعقيد الأصناف القديمة تماماً، فضلاً عن التوثيق الرسمي المتقن وأدوات الفحص المتقدمة والطلب العالمي الواسع في الشركات التقنية.
تقدم React أعلى قيمة هندسية عندما تتطلب الواجهة تفاعلاً مستمراً وتحديثات فورية دون إعادة تحميل الصفحة:
- تطبيقات الصفحة الواحدة (Single-Page Applications): مثل منصات التعليم التفاعلية ولوحات إدارة المشاريع وبوابات التحليل المالي التي يتنقل فيها المستخدم لحظياً.
- الوحدات التفاعلية المدمجة: إذ يمكن تركيب مكون React لحاسبة أسعار أو مصفي منتجات حي داخل عنصر
<div>وحيد في موقع قائم بالفعل.
function WorkspaceWidget() {
const activeCourses = 6;
return (
<aside className="widget">
<h3>CloseTag Interactive Studio</h3>
<p>Available Tracks: {activeCourses}</p>
</aside>
);
}يتكرر السؤال الهندسي حول الفرق بين مكتبة React والأطر الشاملة (Full Frameworks) مثل Angular. يأتي إطار Angular كمنظومة مغلقة تفرض نظام حقن الاعتماديات وموجهات قوالب خاصة وحزمة شبكة مدمجة منذ اللحظة الأولى، بينما تمنحك React نواة خفيفة ومرنة تعتمد على تعابير JavaScript القياسية مباشرة، ثم تضيف إليها مكتبة التوجيه React Router عند الحاجة فقط.
للانطلاق بثقة في بناء تطبيقات React، تأكد من إلمامك بوسوم HTML5 الدلالية، وتنسيقات CSS المرنة، وست مهارات أساسية في JavaScript ES6+: تعريف المتغيرات بـ const وlet، الدوال السهمية، التفكيك (Destructuring)، دوال map وfilter، معامل الانتشار ...، ونظام الوحدات import/export. يلخص الجدول التالي الفروق الجوهرية:
| وجه المقارنة | مكتبة React الحديثة | إطار عمل شامل مثل Angular |
|---|---|---|
| نطاق التخصص | طبقة واجهة مستخدم تصريحية مركزة وخفيفة | إطار متكامل يفرض هيكلة الشبكة والنماذج والحقن |
| أسلوب بناء المكونات | دوال JavaScript قياسية وخطافات Hooks | أصناف برمجية ومزخرفات وقوالب منفصلة |
| منطق العرض الشرطي والتكرار | تعابير اللغة القياسية داخل صياغة JSX | موجهات خاصة بالإطار مثل *ngFor و*ngIf |
| مرونة الدمج التدريجي | يعمل داخل عنصر واحد أو كتطبيق SPA كامل | مُصمم غالباً لبناء المشروع بالكامل من الصفر |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعرفت في هذا الدرس على مفهوم مكتبة React الحديثة وركائزها الثلاث المتمثلة في المكونات الدالية وصياغة JSX والمطابقة الذكية، وميزت المشاريع الأنسب لها والفارق المعماري بينها وبين الأطر الشاملة ومتطلبات الانطلاق فيها. الخطوة التالية: انتقل الآن إلى الدرس رقم 2 «الواجهة التصريحية ومعمارية المكونات في React» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Component المكون البرمجي
- دالة JavaScript مستقلة وقابلة لإعادة الاستخدام تعيد صياغة JSX تصف جزءاً محدداً من واجهة المستخدم.
- للمراجعة
- 02 Reconciliation المطابقة الذكية
- الخوارزمية التي تقارن بها React التمثيل السابق والجديد للواجهة لتطبيق أصغر تعديل لازم على المتصفح.
- للمراجعة
- 03 Declarative UI الواجهة التصريحية
- وصف الشكل المطلوب للواجهة بناءً على البيانات الحالية وترك خطوات تعديل عناصر المتصفح لمكتبة React.
- للمراجعة
- 04 Single-Page Application تطبيق الصفحة الواحدة
- تطبيق ويب يحمّل مستند HTML واحداً ويحدّث الشاشات ديناميكياً في المتصفح دون إعادة تحميل الصفحة كاملة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 UI UI
- User Interface
- الطبقة البصرية والتفاعلية التي يرى المستخدم من خلالها البيانات ويتفاعل مع عناصر التطبيق.
- للمراجعة
- 02 JSX JSX
- JavaScript XML
- امتداد نحوي للغة JavaScript يتيح كتابة بنية العناصر بأسلوب يشبه HTML داخل دوال المكونات.
- للمراجعة
- 03 DOM DOM
- Document Object Model
- شجرة كائنات المستند الحية في المتصفح والتي تتولى React تحديث العقد المتغيرة فيها بكفاءة.
- للمراجعة
- 04 SPA SPA
- Single-Page Application
- معمارية تطبيقات تعتمد تبديل المكونات وتحديثها لحظياً داخل المتصفح دون طلب صفحة كاملة في كل نقرة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افتح المثال الأول في محرر التجريب وعدّل عنوان الترحيب إلى اسم مشروعك الشخصي وراقب تحديث الواجهة الحي.
-
بدّل بين التبويبات الثلاثة في المختبر التفاعلي لملاحظة كيف يلغي المكون الدالي تكرار كتل HTML اليدوية.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي10 أسئلة تنتظرك ＋
ما الوظيفة الأساسية التي صُممت من أجلها مكتبة React؟
تتخصص مكتبة React في بناء واجهات المستخدم التفاعلية عبر مكونات دالية مستقلة وقابلة لإعادة الاستخدام.
يعتمد التوثيق الرسمي الحديث لمكتبة React بناء المكونات بالدوال والخطافات بدلاً من الأصناف القديمة.
صواب؛ فالمكونات الدالية والخطافات هي المعيار الحديث المعتمد رسمياً بنسبة 100% في react.dev.
ماذا تحقق آلية المطابقة الذكية Reconciliation عند تغير بيانات الواجهة في React؟
تقارن المطابقة الذكية شجرة الواجهة الجديدة بالسابقة في الذاكرة وتحدث العقد المتغيرة فقط في DOM.
ماذا تتيح لك صياغة JSX أن تكتب مباشرة داخل دالة المكون في React؟
تسمح صياغة JSX بكتابة بنية عناصر تشبه HTML بوضوح مع دمج تعابير JavaScript بداخلها.
لا يمكن استخدام React إلا إذا أعدت كتابة الموقع بأكمله كتطبيق صفحة واحدة من الصفر.
خطأ؛ إذ يمكن تركيب React داخل عنصر div واحد لإضافة أداة تفاعلية في صفحة قائمة أو بناء تطبيق كامل.
كيف تختلف مكتبة React معمارياً عن الأطر الشاملة الصارمة مثل Angular؟
تركز React على طبقة مكونات الواجهة بلغة JavaScript القياسية وتترك لك حرية اختيار مكتبات التوجيه والبيانات.
أي دالة مصفوفات قياسية في JavaScript الحديثة تُعد أساسية لتحويل البيانات إلى عناصر واجهة في React؟
تُستخدم دالة map لتحويل عناصر المصفوفة إلى مصفوفة جديدة من عناصر JSX بنقاء دون تعديل الأصل.
يُعد إتقان وحدات ES6 والدوال السهمية وتفكيك الكائنات من المتطلبات الأساسية قبل بناء مشاريع React.
صواب؛ إذ يعتمد كل ملف مكون في React يومياً على الاستيراد والتصدير والدوال السهمية والتفكيك.
أي نوع من المشاريع التالية يحقق أكبر استفادة هندسية من اعتماد مكتبة React؟
تحقق لوحات التحكم التفاعلية وتطبيقات الصفحة الواحدة الغنية بالتحديثات الحية أعلى استفادة من React.
ما النطاق الرسمي المعتمد للتوثيق الحديث لمكتبة React؟
يمثل موقع react.dev المرجع الرسمي المعتمد لتوثيق React الحديث المبني على الدوال والخطافات.