Reactإنشاء مشروع React باستخدام Vite

ما هي Vite

Vite هي أداة مفتوحة المصدر يمكن استخدامها لإنشاء و تشغيل تطبيقات الويب بشكل سريع جداً مقارنةً بالطرق التقليدية لفعل ذلك.

المميز في هذه الأداة أنه أثناء إنشاء المشاريع بها فإنها تتيح لك إمكانية تحديد إطار العمل أو المكتبة التي تريد بناء المشروع بها و تتيح لك أيضاً تحديد ما إن كنت تريد كتابة الكود بواسطة لغة جافاسكربت أو بواسطة لغة تايب سكربت.

إنشاء مشروع React باستعمال Vite

فيما يلي سنقوم بإنشاء مشروع بواسطة الأداة Vite، بعدها سنحدد خصائص المشروع، و في النهاية سنقوم بتشغيله.

1- إنشاء مشروع جديد

قم بتنفيذ الأمر التالي في موجّه الأوامر لإنشاء مشروع جديد بواسطة الأداة Vite.

npm create vite@latest

2- تحديد خصائص المشروع

بعد تنفيذ الأمر السابق سيُطلب منك إدخال إسم للمشروع، ثم تحديد إطار العمل الذي تريد استعماله فيه، ثم تحديد لغة البرمجة التي تريد كتابة الكود بها.
أدخل demo-app كإسم له، ثم اختر مكتبة React، ثم لغة JavaScript تباعاً كما يلي.

3- الدخول لمجلد المشروع

قم بتنفيذ الأمر التالي للدخول إلى مجلد المشروع.

cd demo-app

4- تحميل مكتبات المشروع

قم بتنفيذ الأمر لتحميل و تضمين جميع المكتبات التي يحتاجها المشروع بشكل تلقائي من النت.

npm install

5- تشغيل المشروع

قم بتنفيذ الأمر التالي لتشغيل المشروع بواسطة الخادم NodeJs.

npm run dev

6- إستعراض المشروع في المتصفح

لاستعرض المشروع في المتصفح لديك ثلاث خيارات:

• يمكنك كتابة الحرف o في موجّه الأوامر ثم النقر على الزر Enter.
• يمكنك نسخ الرابط الذي تم تشغيل المشروع فيه و لصقه في المتصفح.
• يمكنك إبقاء إصبعك على الزر Ctrl ثم النقر على الرابط الذي يظهر لك في موجّه الأوامر.

النتيجة

بنية مشروع React المبني بواسطة Vite

إذا نظرت لملفات المشروع، ستجد أنه يحتوي على الملفات التقليدية التي تراها في مشاريع React بالإضافة إلى ملف إسمه vite.config.js و الذي يمكنك من خلاله تعديل أي خصائص متعلقة بالأداة Vite.

demo-app
├── node_modules
├── public
│   └── vite.svg
├── src
│   ├── App.css
│   ├── App.jsx
│   ├── index.css
│   ├── main.jsx
├── index.html
├── package.json
├── vite.config.js
└── README.md

تصدير مشروعك React المبني بواسطة Vite

في حال أردت إنشاء نسخة من المشروع يمكن إستضافتها على خادم بحيث يستطيع المستخدمين تجربتها يمكنك تنفيذ الأمر التالي.

npm run build