تشريح ملفات مشروع Vite | إنشاء مشروع React حديث باستخدام أداة Vite

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

يضم مجلد مشروع Vite هيكلة واضحة خالية من الحشو الزائد:

index.html: مستند الصفحة الوحيد في جذر المشروع ويحتوي حاوية <div id="root"> واستدعاء ملف البداية.
package.json: يسجل حزمتي التشغيل الأساسيتين react وreact-dom وأوامر التشغيل.
vite.config.js: ملف إعداد خفيف يفعّل إضافة React الرسمية لدعم التحويل والتحديث السريع.
public/ مقابل src/: توضع الملفات الثابتة المباشرة كالأيقونة في public/، بينما توضع كافة المكونات والتنسيقات داخل src/.

الصف 2 كود برمجي

HTML

function FolderGuide() {
  return (
    <div className="guide">
      <h3>Vite Project Files</h3>
      <ul>
        <li>index.html — Host #root container</li>
        <li>src/main.jsx — React entry point</li>
        <li>src/App.jsx — Root UI component</li>
      </ul>
    </div>
  );
}

جرّب بنفسك

الصف 3 ملاحظة هامة

Vite Project Folder Anatomy تشريح ملفات مشروع Vite

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (إنشاء مشروع React حديث باستخدام أداة Vite)