المكوّن الأول والتصيير
اكتب دالة المكوّن الأول، وصيّرها في DOM باستخدام createRoot، وشاهد إعادة التحميل السريع أثناء العمل.
المكوّن الأول والتصيير درس مجاني في React Academy على CoddyKit. هذا هو الدرس 3 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 3 دروس في المجموع.
نظرة عامة
الهدف: اكتب مكوّن React الأول، واربطه باستخدام createRoot، وتحقق من إعادة التحميل السريع.
المكوّنات الدالية
مكوّن React هو مجرد دالة تُرجع JSX. مثال: function App() { return <h1>Hi</h1> }.
التركيب باستخدام createRoot
استخدم ReactDOM.createRoot مع document.getElementById("root")، ثم استدعِ root.render(<App/>).
عرض توضيحي للترميز
التصيير الأول: اربط App وانقر لرؤية تحديثات الحالة.
<div id="root"></div>
أساسيات إعادة التحميل السريع
إعادة التحميل السريع: احفظ ملفًا؛ فيعيد خادم التطوير بناء التطبيق وتتحدث الواجهة دون فقدان الحالة.
نصائح للتطبيقات الأولى
نصائح:
- حافظ على صغر حجم المكوّنات.
- استخدم أسماء واضحة مثل App.
- تحقق من وحدة التحكم بحثًا عن الأخطاء إذا فشل التصيير.
اختبار إنشاء الجذر
مراجعة
مراجعة: عرّف App()، واربطه باستخدام createRoot، واستفد من إعادة التحميل السريع للحصول على ملاحظات فورية.
الأسئلة الشائعة
هل درس «المكوّن الأول والتصيير» مجاني؟
نعم — نص درس «المكوّن الأول والتصيير» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 3 دروس في المجموع.
ماذا ستتعلم في «المكوّن الأول والتصيير»؟
اكتب دالة المكوّن الأول، وصيّرها في DOM باستخدام createRoot، وشاهد إعادة التحميل السريع أثناء العمل. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟
لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 3.
كم من الوقت يستغرق درس «المكوّن الأول والتصيير»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟
نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- بدء React: المفاهيم والإعداد
- إعداد المشروع: Vite والتخطيط وخادم التطوير
- المكوّن الأول والتصيير