إعداد بيئة React بالعربي: Node.js و Vite و VS Code

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

لماذا هذا مهم؟ لأن أغلب مشاكل المبتدئين تبدأ من بيئة غير مستقرة: إصدار Node.js غير مناسب، أو محرر غير مضبوط، أو مشروع تم إنشاؤه بطريقة قديمة. سنغلق هذه الثغرات من البداية.

ما الذي سنثبته ولماذا؟

• Node.js — لتشغيل أدوات React و npm.
• VS Code — محرر حديث مع إضافات React و JavaScript.
• Vite — أسرع طريقة لإنشاء مشروع React حديث.

الخطوة 1: تثبيت Node.js (النسخة LTS)

React تعتمد على Node.js و npm لإدارة الحزم وتشغيل السيرفر المحلي. اختر نسخة LTS لأنها الأكثر استقرارًا للمبتدئين والمشاريع التعليمية.

node -v
npm -v

إذا ظهر رقم إصدار لكل منهما، فأنت جاهز للانتقال للخطوة التالية.

الخطوة 2: تثبيت VS Code وتجهيزه لِـ React

VS Code هو المحرر الأكثر انتشارًا في مجتمع React، وسيساعدك على كتابة كود أنظف وأسرع. بعد التثبيت، جهّزه بهذه الإعدادات:

• فعّل ميزة حفظ تلقائي (Auto Save).
• ثبّت إضافة ESLint و Prettier لتوحيد التنسيق وتقليل الأخطاء.
• ثبّت إضافة Reactjs Code Snippets لتسريع كتابة المكوّنات.

الخطوة 3: إنشاء أول مشروع React باستخدام Vite

سنستخدم Vite لأنه أسرع في التشغيل والتجميع، ويعطيك تجربة تطوير حديثة وخفيفة. إذا كنت تسمع عن Create React App (CRA)، فهو خيار قديم نوعًا ما وسنذكره فقط للمقارنة.

الخيار 1: Vite (الموصى به)

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

الخيار 2: Create React App (للمعرفة فقط)

npx create-react-app my-react-app
cd my-react-app
npm start

كيف تتأكد أن كل شيء يعمل؟

بعد التشغيل ستظهر صفحة React الافتراضية على الرابط المحلي (غالبًا http://localhost:5173 في Vite). إذا رأيت شعار React أو صفحة البداية، فبيئة التطوير جاهزة 100%.

أخطاء شائعة وحلول سريعة

• npm غير معروف: Node.js غير مثبت أو المسار غير مضاف. أعد تثبيت Node.js ثم أعد تشغيل الجهاز.
• المنفذ مشغول: أغلق أي سيرفر آخر أو غيّر المنفذ.
• بطء في التثبيت: تأكد من اتصال الإنترنت واستعمل npm cache clean --force إذا لزم.

الأسئلة الشائعة — FAQ

ما هي المتطلبات لتشغيل React؟

تحتاج Node.js و npm بالإضافة إلى محرر كود مثل VS Code لإنشاء وتشغيل مشاريع React.

هل Vite أفضل من Create React App؟

Vite أسرع وأخف في التشغيل والبناء، بينما CRA حل قديم وسيتوقف كثير من المشاريع الجديدة عن استخدامه.

ما هي أقل مواصفات للجهاز لتشغيل React؟

أي جهاز حديث نسبيًا يعمل بنظام Windows أو macOS أو Linux مع 8GB RAM سيكون كافيًا للتعلّم وبناء مشاريع React صغيرة.

هل يمكن استخدام React بدون تثبيت Node.js؟

للتطوير المحلي ستحتاج Node.js لأن أدوات البناء والتشغيل تعتمد عليه، حتى لو كان التطبيق النهائي يعمل في المتصفح.

هل أحتاج TypeScript في البداية؟

ليس ضروريًا في البداية. ابدأ بـ JavaScript ثم انتقل إلى TypeScript عندما تتقن الأساسيات.

لماذا يظهر خطأ المنفذ 5173 مشغول؟

قد يكون لديك سيرفر آخر يعمل على نفس المنفذ. أغلقه أو شغّل Vite على منفذ آخر.

كم يستغرق تجهيز بيئة React لأول مرة؟

عادة بين 10 و 20 دقيقة حسب سرعة الإنترنت والجهاز.