Vite Setup إنشاء مشروع بـ Vite
آخر تحديث: 2026-11-03
Vite Setup إنشاء مشروع بـ Vite
Vite هو المولّد القياسي اليوم لمشاريع React: أمر واحد ينشئ بيئة تطوير مع إعادة تحميل فورية، وكلاهما أسرع بكثير في الإقلاع والبناء من إعداد CRA القديم. سواء كنت تتعلّم أو تُطلق منتجاً جديداً، فالبدء منه هو المسار الموصى به. والمشروع الناتج حزمة npm عادية، لذا تعمل كل أدوات المنظومة فوراً بلا إعداد إضافي.
| المجموعة | المفاهيم الأساسية |
|---|---|
| النوع | أدوات |
| منذ الإصدار | ال era السائد في React 18 / Vite 5 |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev # يشغّل خادم التطوير على http://localhost:5173⚙️ المعاملات
| --template react | يختار قالب React (JavaScript)؛ استخدم react-ts لمشروع بلغة TypeScript. |
|---|
القيمة المرجعة：لا قيمة معادة — هذه أداة توليد مشاريع: ما تنتجه هو مجلد مشروع محلي ومجموعة من سكربتات npm.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
بطاقة بخط ثابت تعرض أربعة أسطر بصيغة «اسم الملف —— الوصف»؛ الضغط على أي سطر يبرزه، ويعرض السطر السفلي «Currently selected: xxx»، محاكياً تصفّح بنية مجلدات مشروع Vite ومسؤولية كل ملف.💡 النقاط الأساسية
ℹ️ ملاحظة لم تعد create-react-app قيد الصيانة، فلا ينبغي اختيارها للمشاريع الجديدة؛ Vite هي الخيار الافتراضي في المجتمع اليوم.
💡 نصيحة يخدم npm run dev على المنفذ 5173 افتراضياً؛ غيّر server.port في vite.config.js لاستخدام منفذ آخر.
⚠️ تحذير يتطلب Vite إصدار Node.js 18 أو أحدث — شغّل node -v بعد التثبيت للتأكد.
🏷️ المزيد من المفاهيم الأساسية
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س هل ما زال بإمكاني استخدام create-react-app؟
ج تعمل، لكنها لم تعد موصى بها: الفريق الرسمي لا ي maintenu بنشاط، وهي بطيئة الإقلاع وتعتمد حزماً قديمة. استخدم Vite (أو إطاراً مثل Next.js) للمشاريع الجديدة.
س كيف أنشئ مشروع React باستخدام Vite؟
ج نفّذ npm create vite@latest my-project -- --template react، ثم cd إلى المجلد، وشغّل npm install وبعدها npm run dev.
س الصفحة لا تفتح بعد npm run dev — ماذا أفعل؟
ج اقرأ الخطأ في الطرفية أولاً: منفذ مشغول يعني تبديل المنفذ، وdependencies ناقصة تعني تشغيل npm install، وإصدار Node دون 18 يعني الترقية.
