React / المكونات والحالة / الدرس 1

عرض React وإعداد قابل للتكرار

افهم المكونات أوصافا للواجهة وميز React عن أدوات استضافتها وحدد سياق التنفيذ.

وقت القراءة التقريبي: 3 دقيقةتاريخ مراجعة المحتوى 2026-10-25

في هذه الصفحة

أهداف الدرس

تصف React شجرة
المكون دالة لها قيود
ملاحظة النتائج الملتزم بها

تصف React شجرة

React مكتبة لوصف الواجهات بالمكونات. يحسب المكون وصفا من المدخلات وينسق العارض مثل React DOM إظهاره. يظل المتصفح مصدر دلالات HTML وتخطيط CSS والأحداث والإتاحة. لا توفر المكتبة تلقائيا التوجيه والنشر والمصادقة وقاعدة البيانات؛ قد ينسقها إطار ويملك نقطة الدخول. اختر البيئة عن قصد ولا تعتبر ملف المكون تطبيقا كاملا. ابدأ بتوقع الشجرة لمدخلات ثابتة قبل الحالة والاتصالات.

تحديد عقد المشروع المضيف

أمثلة المقرر وحدات App.jsx باستيرادات حزم وJSX. تحتاج مشروعا مراجع الإعداد بأداة تحويل وحزمتي react وreact-dom متوافقتين وحاوية HTML ونقطة تستخدم createRoot من react-dom/client، أو إطارا يوفر ذلك. لذلك توسم غير مستقلة التشغيل، ولا تعمل مباشرة كملف متصفح أو Node. يجمعها التحقق داخل مضيف محلي مصطنع دون CDN. بيئة الاختبار 18.3.1 وتدعم الإرشادات وثائق React 19 مع تمييز الميزات الأحدث.

المكون دالة لها قيود

يصدر المثال مكونا باسم كبير يعيد عنوانا وفقرة. يميز الاسم المكون من وسوم المضيف الصغيرة. يجب أن يكون العرض حسابا نقيا، فلا تعدل كائنا مشتركا أو تشترك بخدمة أو تكتب تخزينا فيه. قد تعيد React الحساب أو تتركه قبل الالتزام، لذلك لا يساوي عدد استدعاءاته أحداث التطبيق. ضع الأفعال في المعالجات والمزامنة الخارجية في Effects. العقد المفيد هو الواجهة الناتجة لا عدد الاستدعاءات.

jsx وحدة مكون — تتطلب مضيف React الموضح بالمقرر

export default function App() {
  return <main><h1>Workshop</h1><p>Build a meaningful interface.</p></main>;
}

الناتج المتوقع

Workshop
Build a meaningful interface.

يعيد المكون النقي بنية دلالية ويركبه المضيف عبر جذر React DOM الحديث.

تركيب أوصاف صغيرة

يعيد المثال استخدام Notice مرتين في موضعين مختلفين؛ لا ينشئ الاستخراج حالة مشتركة وحده. يعطي التركيب اسما لمسؤولية ويسمح للأب بوصف الصفحة بمستوى مفيد. لا تستخرج كل غلاف لزيادة العدد، بل حدد مدخلا ودورا. يجب أن تبقى DOM سليمة بعناوين ومعالم؛ فلا يعفي التجريد من HTML أو يصلح التداخل الخاطئ.

jsx وحدة مكون — تتطلب مضيف React الموضح بالمقرر

function Notice({ children }) { return <section>{children}</section>; }
export default function App() {
  return <main><h1>Notes</h1><Notice><h2>Prepare</h2><p>Read first.</p></Notice><Notice><h2>Practice</h2><p>Try locally.</p></Notice></main>;
}

الناتج المتوقع

Notes
Prepare
Read first.
Practice
Try locally.

ينتج الموضعان قسمين مستقلين بترتيب المصدر دون شبكة أو حالة.

ملاحظة النتائج الملتزم بها

افحص الصفحة وشجرة الإتاحة بعد الالتزام وتتبع المدخلات والحالة بالأدوات. لا تؤكد تحديث DOM فور root.render؛ استخدم تنسيق الاختبار المدعوم. تفحص Strict Mode التطويرية سلوكا يكشف نقص التنظيف أو عدم النقاء؛ فلا تعطلها لمجرد تكرر سجل. سجل الإصدار ووضع البناء والدخول والمصدر المصغر، ولا تغير الحزم حتى يثبت التعارض.

الأخطاء الشائعة وإصلاحها

يفشل JSX عند فتحه مباشرة

لماذا يحدث؟: يتطلب المصدر حزمًا وتحويل JSX.
كيف تصلحه؟: استخدم المضيف والبناء الموثقين.
كيف تتجنب تكراره؟: سجل سياق التنفيذ.

يعامل الاسم الصغير وسم مضيف

لماذا يحدث؟: لا يحدد JSX المكون المخصص.
كيف تصلحه؟: استخدم اسما كبيرا.
كيف تتجنب تكراره؟: راجع الاستيراد والاسم معا.

يكرر العرض عملا خارجيا

لماذا يحدث؟: ينفذ الحساب آثارا مباشرة.
كيف تصلحه؟: انقلها للمعالجات أو المزامنة المبررة.
كيف تتجنب تكراره؟: اختبر Strict Mode.

اختبر فهمك

1. ما دور React وما دور الموجه أو الإطار عندما يختار العنوان صفحة؟

اعرض الحل المشروح

تعرض React الشجرة المختارة ويفسر التوجيه التنقل وينسق التاريخ والبيانات والخادم بحسب التصميم. قد يبني الإطار هذه الأجزاء وينشرها. وثق الحدود ولا تنسبها كلها للمكتبة.

2. لماذا لا يعد سجل العرض عدادا موثوقا لأفعال المستخدم؟