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