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

شرح أداة Viteإنشاء مشروع ريأكت سريعبديل create-react-appتهيئة مشروع React بـ Viteخادم التطوير السريعكورس رياكت الحديث

الشرح

بعد أن عانى مطورو الويب لسنوات من البطء الشديد لأداة Create React App التقليدية (حيث كان بناء المشروع وتشغيله يستغرق دقائق طويلة بسبب تجميع الأكواد الضخمة يدوياً)، ظهرت أداة إنقاذ حديثة قلبت الموازين تُدعى Vite (وهي كلمة فرنسية تعني "سريع"، وتُنطق ڤيت).

أصبحت Vite هي المعيار الفعلي والحديث الذي تنصح به المنصات والمطورون المحترفون لبدء أي مشروع React حالياً.

1. لماذا Vite فائقة السرعة مقارنة بالطريقة القديمة؟

السر الهندسي يكمن في طريقة التعامل مع ملفات جافا سكريبت:

الطريقة القديمة (CRA): تقوم بفحص وربط وتجميع كافة ملفات وأكواد المشروع بالكامل (Bundle) قبل أن تسمح لك بفتح خادم التطوير ورؤية النتيجة في المتصفح.
الطريقة الحديثة (Vite): تعتمد على معمارية حديثة بالمتصفحات تُسمى Native ESM. هي لا تقوم بتجميع الأكواد مسبقاً، بل تطلق خادم التطوير فوراً في أجزاء من الثانية، وتطلب من المتصفح جلب الملف البرمجي الذي تحتاجه الشاشة الحالية فقط عند الطلب، مما يمنح المطور تجربة برمجية سريعة البرق.

2. فلسفة القوالب الخفيفة

عند إنشاء مشروع بـ Vite، لن تجد مجلد الحزم الضخم node_modules قد تم تحميله تلقائياً كما يحدث في الطريقة القديمة؛ بل يتم توليد ملفات الهيكل الأساسية خفيفة الوزن جداً، وتترك لك حرية كتابة أمر التثبيت اللاحق لجلب الحزم، مما يجعل عملية إنشاء القالب تتم خلال ثانيتين فقط!

خطوات العمل والتطبيق (Sequence)

1- إطلاق معالج إنشاء المشروع

ℹ️ معلومة

اكتب الاسم وحدد React ثم JavaScript من القائمة التفاعلية

قم بفتح موجه الأوامر (Terminal) واكتب الأمر التالي لبدء المعالج التفاعلي:

bash

1	npm create vite@latest my-fast-app
2

💡 نصيحة

(ستظهر لك خيارات في Terminal؛ تحرك بالأسهم واختر React، ثم اختر JavaScript).

2- الدخول إلى المجلد المنشأ

ℹ️ معلومة

تحرك داخل مسار مشروعك الجديد لتنفيذ بقية الأوامر

عد انتهاء المعالج التفاعلي، ادخل إلى المجلد عبر الأمر التالي:

bash

1	cd my-fast-app
2

3- تثبيت الاعتماديات والحزم

ℹ️ معلومة

هذه الخطوة إلزامية في Vite لجلب ملفات ريأكت الفعلية

الآن، قم بطلب تثبيت ملفات المكتبة محلياً على جهازك عبر كتابة الأمر القصير:

bash

1	npm install
2

تشغيل خادم التطوير السريع

ℹ️ معلومة

‫4.تشغيل خادم التطوير السريع:‏ستلاحظ أن الخادم يفتح فوراً في أجزاء من الثانية.

أطلق خادم المطورين المحلي المبتكر وعاين موقعك أونلاين عبر كتابة:

bash

1	npm run dev
2

الأكواد البرمجية البرمجية المتتالية في Terminal

إليك الأوامر البرمجية الأربعة بالترتيب داخل صندوق العمل لتطبيقها مباشرة في موجه الأوامر:

bash

1	# الخطوة 1: توليد قالب Vite التفاعلي الخفيف
2	npm create vite@latest my-fast-app
3
4	# الخطوة 2: الدخول إلى مسار المشروع
5	cd my-fast-app
6
7	# الخطوة 3: تثبيت حزم الاعتماديات (Dependencies)
8	npm install
9
10	# الخطوة 4: تشغيل خادم التطوير فائق السرعة
11	npm run dev

⚠️ تحذير

انتبه إلى أن الأمر التشغيلي للمشروع هنا هو npm run dev وليس npm start كالمعيار الكلاسيكي القديم، كما أن المنفذ الافتراضي (Port) الذي يفتحه لك المتصفح هو غالباً 5173 وليس 3000.

نصائح احترافية

—والأجمل من هذا كله، هو ميزة الـ HMR (Hot Module Replacement)؛ عندما تقوم بتعديل سطر كود برمي داخل مشروع Vite وحفظه، ستجد أن التغيير انعكس في المتصفح في نفس اللحظة بسرعة مذهلة دون الحاجة لإعادة إنعاش أو عمل Refresh كامل للصفحة، مما يحافظ على حالة التطبيق ويسرع إنتاجيتك بشكل مبهر!

الدرس السابق

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

الدرس التالي

بنية ملفات مجلد مشروع React

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

شرح أداة Viteإنشاء مشروع ريأكت سريعبديل create-react-appتهيئة مشروع React بـ Viteخادم التطوير السريعكورس رياكت الحديث

الشرح

أصبحت Vite هي المعيار الفعلي والحديث الذي تنصح به المنصات والمطورون المحترفون لبدء أي مشروع React حالياً.

1. لماذا Vite فائقة السرعة مقارنة بالطريقة القديمة؟

السر الهندسي يكمن في طريقة التعامل مع ملفات جافا سكريبت:

الطريقة القديمة (CRA): تقوم بفحص وربط وتجميع كافة ملفات وأكواد المشروع بالكامل (Bundle) قبل أن تسمح لك بفتح خادم التطوير ورؤية النتيجة في المتصفح.
الطريقة الحديثة (Vite): تعتمد على معمارية حديثة بالمتصفحات تُسمى Native ESM. هي لا تقوم بتجميع الأكواد مسبقاً، بل تطلق خادم التطوير فوراً في أجزاء من الثانية، وتطلب من المتصفح جلب الملف البرمجي الذي تحتاجه الشاشة الحالية فقط عند الطلب، مما يمنح المطور تجربة برمجية سريعة البرق.

2. فلسفة القوالب الخفيفة

خطوات العمل والتطبيق (Sequence)

1- إطلاق معالج إنشاء المشروع

ℹ️ معلومة

اكتب الاسم وحدد React ثم JavaScript من القائمة التفاعلية

قم بفتح موجه الأوامر (Terminal) واكتب الأمر التالي لبدء المعالج التفاعلي:

bash

1	npm create vite@latest my-fast-app
2

💡 نصيحة

(ستظهر لك خيارات في Terminal؛ تحرك بالأسهم واختر React، ثم اختر JavaScript).

2- الدخول إلى المجلد المنشأ

ℹ️ معلومة

تحرك داخل مسار مشروعك الجديد لتنفيذ بقية الأوامر

عد انتهاء المعالج التفاعلي، ادخل إلى المجلد عبر الأمر التالي:

bash

1	cd my-fast-app
2

3- تثبيت الاعتماديات والحزم

ℹ️ معلومة

هذه الخطوة إلزامية في Vite لجلب ملفات ريأكت الفعلية

الآن، قم بطلب تثبيت ملفات المكتبة محلياً على جهازك عبر كتابة الأمر القصير:

bash

1	npm install
2

تشغيل خادم التطوير السريع

ℹ️ معلومة

‫4.تشغيل خادم التطوير السريع:‏ستلاحظ أن الخادم يفتح فوراً في أجزاء من الثانية.

أطلق خادم المطورين المحلي المبتكر وعاين موقعك أونلاين عبر كتابة:

bash

1	npm run dev
2

الأكواد البرمجية البرمجية المتتالية في Terminal

إليك الأوامر البرمجية الأربعة بالترتيب داخل صندوق العمل لتطبيقها مباشرة في موجه الأوامر:

bash

1	# الخطوة 1: توليد قالب Vite التفاعلي الخفيف
2	npm create vite@latest my-fast-app
3
4	# الخطوة 2: الدخول إلى مسار المشروع
5	cd my-fast-app
6
7	# الخطوة 3: تثبيت حزم الاعتماديات (Dependencies)
8	npm install
9
10	# الخطوة 4: تشغيل خادم التطوير فائق السرعة
11	npm run dev

⚠️ تحذير

نصائح احترافية

—والأجمل من هذا كله، هو ميزة الـ HMR (Hot Module Replacement)؛ عندما تقوم بتعديل سطر كود برمي داخل مشروع Vite وحفظه، ستجد أن التغيير انعكس في المتصفح في نفس اللحظة بسرعة مذهلة دون الحاجة لإعادة إنعاش أو عمل Refresh كامل للصفحة، مما يحافظ على حالة التطبيق ويسرع إنتاجيتك بشكل مبهر!

الدرس السابق

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

الدرس التالي

بنية ملفات مجلد مشروع React