كيفية إنشاء تطبيق React باستخدام Vite: دليل خطوة بخطوة

أصبح إنشاء تطبيق React أسهل وأسرع بفضل Vite، وهي أداة بناء واجهة أمامية حديثة قدمها مبتكر Vue.js Evan You في عام 2020. تشتهر Vite بسرعتها وكفاءتها، مما يجعلها بديلاً ممتازًا لـ Create React App (CRA) من خلال تقليل الوقت اللازم لبدء تشغيل خوادم التطوير وتطبيق تحديثات التعليمات البرمجية بشكل كبير. في هذا الدليل، سنتناول كل خطوة لمساعدتك في إعداد تطبيق React باستخدام Vite، من إعداد بيئتك إلى إطلاق مشروعك الأول.

 

لماذا تستخدم Vite لتطوير React؟

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

ما هو فيتي؟

Vite، الذي طوره إيفان يو (مبتكر Vue.js)، هو أداة بناء حديثة مصممة لتحسين تطوير الواجهة الأمامية. يشتق اسم "Vite" من الكلمة الفرنسية التي تعني "سريع"، وهو ما يتماشى مع هدفه الأساسي المتمثل في تسريع عملية التطوير والبناء. يستفيد Vite من وحدات ES الأصلية في المتصفح أثناء التطوير، مما يسمح ببناء أسرع وأوقات تحديث أسرع مقارنة بالحزم التقليدية. تجعل هذه الكفاءة Vite خيارًا ممتازًا للمطورين الذين يتطلعون إلى تبسيط تجربة التطوير في أطر عمل JavaScript مثل React.

 

المتطلبات الأساسية لإعداد Vite

قبل إعداد Vite، تأكد من أن نظامك يلبي المتطلبات التالية. هذه المتطلبات الأساسية ضرورية لعملية تثبيت وتطوير سلسة.

 

Node.js وnpm

يعتمد Vite على Node.js وnpm (Node Package Manager) لتثبيت الحزم وتشغيل نصوص التطوير. لاستخدام Vite، تحتاج إلى إصدار Node.js 18.x أو أحدث وإصدار npm متوافق. إليك كيفية التحقق مما إذا كان لديك الإصدارات الصحيحة المثبتة:

التحقق من إصدار Node.js

افتح المحطة الطرفية الخاصة بك واكتب الأمر التالي:
سحق
العقدة -v

يقوم هذا الأمر بإرجاع الإصدار المثبت من Node.js، والذي يجب أن يكون 18.x أو أعلى.

التحقق من إصدار npm

بعد ذلك، قم بالتحقق من إصدار npm عن طريق تشغيل:
سحق
npm -v

يعرض هذا الأمر إصدار npm المثبت. إذا كانت الإصدارات لديك قديمة، فيمكنك تنزيل أحدث إصدارات Node.js وnpm من موقع Node.js الرسمي.

إذا لم يتم تثبيت Node.js وnpm، أو إذا كنت بحاجة إلى تحديثهما، فيمكنك تثبيتهما أو ترقيتهما من خلال مستودع NodeSource (لنظام Linux) أو عن طريق تنزيل برنامج التثبيت مباشرة من الموقع الرسمي.

 

معرفة أساسية بسطر الأوامر

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

• التنقل بين الدلائل:أوامر مثل قرص مضغوط لتغيير الدلائل و ل س لإدراج الملفات.
• أوامر التشغيل:سوف تحتاج إلى تشغيل أوامر npm مثل تثبيت npm و تشغيل npm dev.

إذا كنت جديدًا على سطر الأوامر، فقد يكون من المفيد مراجعة بعض أوامر المحطة الطرفية الأساسية قبل المتابعة.

 

محرر الكود

يوصى بشدة باستخدام محرر أكواد، مثل Visual Studio Code (VS Code)، لإدارة ملفات المشروع وتحريرها. يوفر VS Code العديد من الميزات المفيدة:

• تمييز بناء الجملة:يساعد على جعل الكود الخاص بك أكثر قابلية للقراءة.
• محطة متكاملة:يسمح لك بتشغيل أوامر المحطة الطرفية مباشرة داخل المحرر.
• الإضافاتيحتوي VS Code على ملحقات لـ JavaScript وReact وVite توفر اقتراحات للكود والتحقق من الأخطاء وأدوات إضافية.

تتضمن المحررات الشائعة الأخرى Sublime Text وAtom وWebStorm، لكن VS Code مناسب بشكل خاص لمشاريع JavaScript وReact. يمكنك تنزيله من موقع VS Code على الويب.

 

إعداد Vite لمشروع React الخاص بك: المتطلبات الأساسية والتحضير

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

 

الخطوة 1: تثبيت Node.js وnpm (إذا لم يكن مثبتًا)

لاستخدام Vite، تحتاج إلى إصدار Node.js 18.x أو أحدث مع npm. إذا كان لديك بالفعل Node.js مثبتًا ولكنه قديم، فاتبع الخطوات التالية لإزالة الإصدار القديم وتثبيت الإصدار الأحدث.

إزالة إصدارات Node.js الحالية (اختياري)

إذا تم بالفعل تثبيت إصدار قديم من Node.js أو npm، فقم بإزالته لتجنب مشكلات التوافق.
سحق
sudo apt إزالة nodejs npm

sudo apt الإزالة التلقائية

تؤدي هذه الخطوة إلى مسح أي تثبيتات قديمة لـ Node.js أو npm، مما يضمن إعدادًا نظيفًا لـ Vite.

إضافة مستودع NodeSource

يوفر هذا المستودع أحدث إصدارات Node.js وnpm للتثبيت.
سحق
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash –

تثبيت Node.js وnpm

سحق
sudo apt install -y nodejs npm

يقوم هذا بتثبيت الإصدار الحالي من Node.js (18.x) وnpm، مما يضمن التوافق مع Vite.

التحقق من التثبيت

بعد التثبيت، تأكد من تثبيت Node.js وnpm بشكل صحيح عن طريق تشغيل:
سحق
العقدة -v

npm -v

يجب أن ترى أرقام الإصدارات التي تؤكد أن Node.js وnpm جاهزان للاستخدام.

 

الخطوة 2: تثبيت Vite عالميًا

الآن بعد إعداد Node.js وnpm، يمكنك تثبيت Vite عالميًا. يتيح لك هذا إنشاء مشاريع Vite جديدة بسهولة من أي دليل.

قم بتشغيل أمر التثبيت العالمي

سحق
sudo npm install -g create-vite

يقوم هذا الأمر بتثبيت Vite عالميًا، مما يوفر أمرًا واحدًا لتهيئة مشاريع Vite بسرعة. يؤدي تثبيت Vite عالميًا إلى تبسيط إنشاء المشروع وإعداده.

 

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

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

قم بتشغيل أمر إنشاء Vite

سحق
إنشاء تطبيق npm vite@latest my-app

يستبدل تطبيقي باستخدام اسم المشروع المطلوب. يقوم هذا الأمر بتشغيل مشروع Vite، وسيرشدك Vite خلال بعض مطالبات الإعداد.

اتبع إرشادات الإعداد:

• اسم المشروع:اختر اسمًا لدليل المشروع الخاص بك (على سبيل المثال، "my-app").
• اختيار الإطار:حدد "React" من قائمة الأطر.
• متغير:اختر بين JavaScript وTypeScript بناءً على تفضيلاتك.

بمجرد اكتمال العملية، سيقوم Vite بإنشاء مجلد مشروع يحتوي على جميع الملفات المطلوبة وهيكل قياسي.

 

الخطوة 4: انتقل إلى مجلد المشروع الخاص بك

بعد إعداد المشروع، انتقل إلى دليل المشروع الذي تم إنشاؤه حديثًا لبدء العمل معه.

تغيير إلى دليل المشروع

سحق
قرص مضغوط تطبيقي

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

 

الخطوة 5: تثبيت تبعيات المشروع

قبل تشغيل المشروع، قم بتثبيت جميع التبعيات المطلوبة. وتشمل هذه المكتبات والحزم اللازمة لتشغيل المشروع.

قم بتشغيل أمر التثبيت

سحق
تثبيت npm

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

 

الخطوة 6: بدء تشغيل خادم التطوير

الآن بعد اكتمال الإعداد وتثبيت التبعيات، ابدأ تشغيل خادم تطوير Vite. يتيح لك هذا الخادم رؤية تطبيقك على الهواء مباشرة وتطبيق تغييرات الكود على الفور.

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

سحق
تشغيل npm dev

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

قد ترى أيضًا خيارات الشبكة ومعلومات إضافية، اعتمادًا على إصدار Vite الخاص بك.

 

الخطوة 7: عرض تطبيق React الخاص بك في المتصفح

مع تشغيل خادم التطوير، يمكنك الآن عرض تطبيق React الخاص بك في متصفح الويب.

افتح عنوان URL المحلي في متصفحك:

• افتح متصفح الويب المفضل لديك.
• انتقل إلى عنوان URL الموضح في المحطة الطرفية، عادةً http://localhost:5173/.

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

 

نظرة عامة على هيكل مشروع Vite

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

 

الفهرس.html

• هذا الملف هو ملف HTML الرئيسي لتطبيقك. وهو بمثابة نقطة دخول للمتصفح لتحميل تطبيق React.
• يقوم Vite بحقن وحدات JavaScript هنا، حتى يتمكن تطبيقك من الوصول إلى البرامج النصية والأصول الضرورية.
• على عكس الإعدادات التقليدية، فإن Vite's الفهرس.html يقع في جذر المشروع، مما يسهل تحميل الوحدات النمطية ويحافظ على إعداداتك نظيفة.

 

src/main.jsx

• هذه هي نقطة الدخول لتطبيق React الخاص بك، حيث يتم تهيئة التطبيق.
• ستجد داخل هذا الملف كودًا يعرض شجرة مكونات React على DOM، ويربط عادةً تطبيقك بجذر قسم في الفهرس.html.
• هذا هو أول ملف JavaScript يقوم Vite بمعالجته وتجميعه، مما يجعله ضروريًا لهيكل التطبيق وتسلسل التحميل.

 

المصدر/التطبيق.jsx

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

 

ملف vite.config.js

• ملف التكوين الخاص بـ Vite، الموجود في جذر المشروع.
• يتيح لك هذا الملف تخصيص سلوك Vite وإعداداته، مثل تحديد خيارات البناء، أو إضافة المكونات الإضافية، أو إعداد تكوينات الوكيل.
• في حين تم تصميم Vite للعمل بدون تكوين ثقيل، ملف vite.config.js يمنحك المرونة لضبط الإعدادات مع نمو مشروعك.

 

الملفات والدلائل الإضافية

على الرغم من أن هذه الملفات الأساسية ضرورية، فقد تواجه أدلة وملفات إضافية أثناء توسيع مشروعك، بما في ذلك:

• عام/:مجلد لتخزين الأصول الثابتة مثل الصور أو الخطوط أو الأيقونات. يتم تقديم هذه الملفات مباشرة دون الحاجة إلى استيرادات خاصة.
• المصدر/:المجلد الرئيسي لجميع أكواد مصدر التطبيق. جنبًا إلى جنب مع main.jsx و تطبيق.jsxيحتوي هذا المجلد على مكونات React أخرى أو وظائف مساعدة أو موفري سياق أثناء تطوير تطبيقك.

يساعدك هذا الهيكل المنظم على إبقاء ملفات مشروعك في متناول اليد وقابلة للإدارة، حتى تتمكن من التركيز على بناء مكونات وميزات تطبيقك دون القلق بشأن الإعداد أو التكوينات المكثفة.

 

مزايا استخدام Vite بدلاً من Create React App

يمكن أن يؤدي التبديل من Create React App (CRA) إلى Vite إلى تحقيق العديد من الفوائد المتعلقة بالأداء والإنتاجية. تم تصميم Vite للسرعة والكفاءة، مما يمنح المطورين تجربة تطوير أكثر استجابة. فيما يلي نظرة أعمق على مزايا استخدام Vite بدلاً من CRA:

 

بناء أسرع

يقلل Vite بشكل كبير من أوقات البناء من خلال التعامل مع الوحدات النمطية بشكل مختلف عن CRA. وإليك الطريقة:

• تجميع الوحدات مسبقًا:يقوم Vite بتجميع التبعيات مسبقًا باستخدام إسبويلد، وهو عبارة عن حزمة سريعة مُحسَّنة لـ JavaScript. تعمل هذه الحزمة المسبقة على تسريع وقت التحميل الأولي من خلال تنظيم وتجميع التبعيات بشكل أكثر فعالية.
• بناء جملة وحدة ES:يستخدم Vite عمليات استيراد وحدات ES في المتصفح أثناء التطوير، وبالتالي يتم تحميل الملفات المطلوبة للعرض الحالي فقط. يتجاوز هذا الإعداد الحاجة إلى تجميع التطبيق بالكامل في كل تغيير، مما يؤدي إلى أوقات بدء أسرع.
• التحميل البطيء من أجل التطوير:يقوم Vite بتحميل الوحدات النمطية فقط عندما تكون مطلوبة، مما يقلل من عبء العمل على خادم التطوير الخاص بك ويؤدي إلى إعادة تحميل أسرع. على عكس CRA، لا يقوم Vite بإعادة تجميع قاعدة التعليمات البرمجية بالكامل بعد كل تغيير، مما يقلل من وقت الانتظار.

تجعل هذه التحسينات من Vite خيارًا ممتازًا للمشاريع التي تكون فيها حلقات التغذية الراجعة السريعة وسرعات البناء ضرورية.

 

استبدال الوحدة الساخنة بكفاءة (HMR)

تعد ميزة Hot Module Replacement (HMR) ميزة تقوم بتحديث الوحدات في الوقت الفعلي أثناء تحريرها، دون الحاجة إلى إعادة تحميل الصفحة بالكامل. يعد نظام HMR الخاص بشركة Vite أكثر كفاءة من نظام CRA، مما يوفر العديد من الفوائد:

• إعادة التحميل الانتقائي:يقوم نظام HMR الخاص بـ Vite بتحديث الوحدات النمطية التي تتغير فقط، بدلاً من إعادة تحميل التطبيق بالكامل. على سبيل المثال، إذا قمت بتحرير ملف CSS أو أحد المكونات، يقوم Vite بإعادة تحميل هذا الملف أو الوحدة النمطية المحددة فقط.
• ردود فعل أسرع على التغييرات:يتيح إعادة التحميل الانتقائي هذا للمطورين رؤية التغييرات على الفور تقريبًا، مما يحسن الإنتاجية ويوفر الوقت.
• الحفاظ على حالة التطبيق:نظرًا لأنه يتم استبدال الوحدات الضرورية فقط، فإن HMR من Vite يحافظ على حالة تطبيقك أثناء التطوير. وهذا يعني أنه يمكنك الاستمرار في الاختبار دون الحاجة إلى إعادة تعيين أي بيانات أو تكوينات.

مع HMR الخاص بـ Vite، أصبح التطوير أكثر كفاءة لأن التغييرات تنعكس على الفور، مما يعزز تجربة الترميز.

 

تجربة تطوير خفيفة الوزن

تم تصميم Vite لتوفير إعداد بسيط ومُحسَّن يزيل التعقيد غير الضروري، مما يجعل بدء المشروع أسهل وأسرع. وإليك السبب وراء تقديم Vite لتجربة أخف من CRA:

• الحد الأدنى من التكوين:لا يتطلب Vite أي تكوين للبدء، ويتم التعامل مع معظم الإعدادات الشائعة تلقائيًا. غالبًا ما يتطلب CRA تكوينات مخصصة أو تبعيات إضافية لميزات مثل تقسيم التعليمات البرمجية أو التجميع المتقدم، لكن Vite يبسط هذه العملية.
• أحجام حزم أصغر:يؤدي التجميع المحسّن من Vite إلى أحجام حزم أصغر في الإنتاج، مما يحسن الأداء عند نشر تطبيقك.
• الإعداد السريع:إن إعداد مشروع Vite أمر بسيط وسريع. فباستخدام بضعة أوامر فقط، تكون جاهزًا لبدء الترميز دون الحاجة إلى الملفات والبرامج النصية الإضافية التي يتضمنها CRA في بعض الأحيان.
• نظام المكونات الإضافية المرن:نظام المكونات الإضافية في Vite قوي وسهل الاستخدام، مما يسمح لك بإضافة وظائف دون تضخيم الإعداد. المكونات الإضافية في Vite متوافقة أيضًا مع Rollup، وهو برنامج شهير يعمل على توسيع الخيارات لتخصيص البناء الخاص بك دون المساس بالسرعة.

يتيح هذا النهج خفيف الوزن للمطورين التركيز بشكل أكبر على الترميز وأقل على إدارة التكوين، مما يؤدي إلى بيئة تطوير أسرع وأنظف.

 

كن شريكًا مع Mobian لبناء حلول تطبيقات الهاتف المحمول المخصصة لك

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

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

تواصل معنا مع Mobian لمناقشة مشروعك واستكشاف كيفية تحويل فكرة التطبيق الخاصة بك إلى حقيقة. معًا، يمكننا إنشاء تطبيق يهيئ عملك للمستقبل.

اصنع مستقبلك معًا مع Mobian - مطور تطبيقات الهاتف المحمول الموثوق به.

 

خاتمة

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