بدء React: المفاهيم والإعداد
ما React، ولماذا تهم واجهة المستخدم التصريحية، وكيف تعمل المقارنة التفاضلية؛ وإعداد سريع مع خادم تطوير؛ وبنية المجلدات؛ وأول تصيير باستخدام createRoot.
بدء React: المفاهيم والإعداد درس مجاني في React Academy على CoddyKit. هذا هو الدرس 1 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 3 دروس في المجموع.
ما هي React؟
React هي مكتبة لواجهة المستخدم تُستخدم لبناء التطبيقات من مكوّنات صغيرة قابلة لإعادة الاستخدام.
- فكّر باستخدام المكوّنات.
- صِف واجهة المستخدم لحالة معيّنة (تصريحيًا).
- تتولى React تنفيذ التحديثات بكفاءة.
العقلية التصريحية
يصف الكود التصريحي النتيجة؛ وتحسب React تغييرات DOM نيابةً عنك. أما الكود الإجرائي فيدير كل تحديث تفصيليًا.
المقارنة بكلمات بسيطة
تنشئ React شجرة DOM افتراضية خفيفة، وتقارنها بالشجرة السابقة لتطبيق الحد الأدنى من تحديثات DOM المركّزة.
إعداد المشروع
الإعداد:
- أنشئ تطبيقًا (مثل npm create vite@latest).
- ثبّت الاعتماديات (npm install).
- شغّل خادم التطوير (npm run dev).
بنية المجلدات
أساسيات المجلدات:
- يحتوي index.html على
div#root. - يُنشئ src/main.jsx نقطة البداية باستخدام
createRoot. - يعرّف src/App.jsx مكوّنك الأول.
مكوّنك الأول
التصيير الأول: ركّب الجذر وصيّر App()؛ انقر لرؤية التحديثات المعتمدة على الحالة.
<div id="root"></div>
اختبار الواجهة التصريحية
اختبار سريع: ما الفكرة الأساسية وراء واجهة React التصريحية؟
مراجعة
مراجعة: المكوّنات + التصيير التصريحي + المقارنة. أعدّ خادم تطوير وصيّر App() باستخدام createRoot.
الأسئلة الشائعة
هل درس «بدء React: المفاهيم والإعداد» مجاني؟
نعم — نص درس «بدء React: المفاهيم والإعداد» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 3 دروس في المجموع.
ماذا ستتعلم في «بدء React: المفاهيم والإعداد»؟
ما React، ولماذا تهم واجهة المستخدم التصريحية، وكيف تعمل المقارنة التفاضلية؛ وإعداد سريع مع خادم تطوير؛ وبنية المجلدات؛ وأول تصيير باستخدام createRoot. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟
لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 3.
كم من الوقت يستغرق درس «بدء React: المفاهيم والإعداد»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟
نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- بدء React: المفاهيم والإعداد
- إعداد المشروع: Vite والتخطيط وخادم التطوير
- المكوّن الأول والتصيير