كيفية تثبيت وتشغيل Vite و React على ويندوز لأول مرة

إذا كنت مطور ويب مبتدئ أو حتى محترف وتريد إعداد بيئة تطوير حديثة لمشاريع React باستخدام Vite، فأنت في المكان الصحيح. سنقوم بشرح كل شيء بالتفصيل من تثبيت الأدوات اللازمة حتى تشغيل مشروعك الأول بنجاح.

لماذا تستخدم Vite؟

قبل أن نبدأ، دعونا نعرف لماذا Vite هو الخيار الأفضل لمشاريع React الحديثة:

• أداء سريع: يعمل Vite بتقنية ES Module, مما يجعله أسرع بكثير من Webpack.
• تجربة تطوير سلسة: تحديثات فورية دون الحاجة لإعادة تحميل الصفحة.
• دعم حديث للمتصفحات: يعتمد على ميزات حديثة مثل ES Modules و HMR (Hot Module Replacement).
• إعداد سهل: لا تحتاج إلى ضبط ملفات معقدة مثل webpack.config.js.

1- تثبيت الأدوات الأساسية

• انتقل إلى الموقع الرسمي Node.js.
• قم بتنزيل الإصدار LTS (الإصدار طويل الدعم) لضمان الاستقرار.
• بعد التنزيل، قم بتثبيت Node.js عن طريق اتباع الخطوات الافتراضية.
• بعد التثبيت، تحقق مما إذا كان قد تم تثبيته بنجاح عن طريق فتح Command Prompt (cmd) أو PowerShell وتشغيل الأوامر التالية:

node -v
npm -v

سيعرض لك الإصدار المثبت من كل من Node.js و npm.

ب. تحميل وتثبيت VS Code

• انتقل إلى Visual Studio Code.
• قم بتنزيل الإصدار الخاص بنظام التشغيل Windows.
• اتبع تعليمات التثبيت واختر الإعدادات الافتراضية.
• بعد التثبيت، قم بفتح VS Code.

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

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

1 – افتح Command Prompt (cmd) أو PowerShell وانتقل إلى المجلد الذي ترغب في حفظ المشروع فيه، مثل C:\projects:

cd C:\projects

2 – قم بإنشاء مشروع جديد باستخدام Vite:

npm create vite@latest my-react-app

هنا my-react-app هو اسم المشروع. يمكنك تغييره إلى أي اسم تفضله.

3 – بعد تنفيذ الأمر، ستظهر لك قائمة لاختيار نوع المشروع. حدد:

• Framework: اختر React
• Variant: اختر JavaScript

4 – بعد إنشاء المشروع، انتقل إلى مجلد المشروع:

cd my-react-app

5 – قم بتثبيت التبعيات اللازمة:

npm install

6 – شغل المشروع باستخدام:

npm run dev

بعد تنفيذ الأمر، سيتم تشغيل خادم التطوير، وسيعطيك رابطًا مثل http://localhost:5173/. افتحه في المتصفح لرؤية مشروعك قيد التشغيل!

3- إعادة فتح المشروع لاحقًا

إذا أغلقت جهازك أو أغلقت VS Code، يمكنك العودة لمشروعك بسهولة باتباع الخطوات التالية:

1. افتح VS Code.
2. من قائمة File > Open Folder، اختر مجلد المشروع my-react-app.
3. بعد فتح المشروع، افتح Terminal داخل VS Code (Ctrl + ~).
4. انتقل إلى مجلد المشروع، إن لم تكن فيه بالفعل:

cd C:\projects\my-react-app

والأن يمكنك تشغيل المشروع مجددًا فقط بالأمر:

npm run dev

وتوجه للرابط: localhost:5173 لمعاينة المشروع.

4- نصائح وتحسينات إضافية

• استخدم Git لإدارة مشروعك: يمكنك استخدام GitHub لحفظ مشروعك ومشاركته.
• استخدم ESLint و Prettier لتحسين جودة الكود.
• جرّب TypeScript إذا كنت ترغب في تحسين أمان الكود والتعامل مع الأخطاء بسهولة.
• تعلم استخدام React Router لإضافة التنقل بين الصفحات بسهولة.

في النهاية نحب أن نقول لك تهانينا! 🎉 لقد قمت بإعداد بيئة تطوير كاملة لمشاريع React باستخدام Vite على Windows. الآن يمكنك البدء في بناء تطبيقات React الحديثة بأداء أسرع وتجربة تطوير سلسة.

إذا كنت ترغب في تطوير مشاريع احترافية، يمكنك زيارة موقع Octugen لمعرفة المزيد حول خدمات تطوير الويب لدينا.