انا حالياً اتعلم Vite في ريأكت هل هو نفس الذي تم شرحه في الدورة

vite هو أداة تحزيم bundler للمشاريع، لكنها حديثة وسريعة وحاليًا يتم استخدامها في أغلب المشاريع، بينما في الدورة قمنا بإنشاء مشروع React عن طريق react-scripts والتي تستخدم في الخلفية webpack وهو أداة تحزيم أيضًا لكنها أقدم من vite وأقل استخدامًا حاليًا.

في الوقت الحالي تم الإنتقال إلى vite حيث أنّ react-scripts لم يُعد يتم تطويرها، من خلال vite يتم إنشاء المشروع بكل سهولة وأيضًا عملية التطوير سريعة من خلالها.

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

السلام عليكم ورحمة الله وبركاته،

في الدورة تم استخدام react-scripts لإنشاء مشاريع React، وهي تعتمد على أداة التحزيم webpack، التي كانت لفترة طويلة المعيار الرئيسي لإدارة وبناء تطبيقات React وهذه الطريقة تم استخدامها لأنها كانت الأكثر شيوعا وانتشارا عند إعداد المشاريع في السابق.

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

إن أغلب المشاريع والشروحات هنا في الدورة تركز على استخدام أداة Create React App لإنشاء مشاريع React والتي تستخدم react-scripts وليس Vite.

أن أداة Vite  هي أداة حديثة وسريعة لبناء تطبيقات React وواجهات الويب وتعتبر بديل حديث عن Create React App و  react-scripts وهي المسؤولة عن تحزيم الملفات.

ولكن لا يوجد إختلاف في إستخدام الأداتين لهذا يمكنك إستخدام vite بما أنها أحدث وأفضل من  react-scripts.

في الدورة استخدمنا أداة react-scripts وهي جزء من Create React App المعتمدة على Webpack لإعداد وتشغيل تطبيقات React، أما اليوم فتفضل غالبية المشاريع Vite لسرعته الفائقة في تشغيل الخادم وتجديد التغييرات بفضل وجود ال (Hot Module Replacement) عبر ES Modules وذلك من دون إعادة بناء الحزمة كاملة.

كما أن ملف التهيئة في Vite (vite.config.js) ظاهر ويسمح بإضافة الإضافات (plugins) وضبط الإعدادات مباشرة، بينما في CRA تظل أغلب الإعدادات مخفية داخل الحزمة ما يستلزم npm run eject للتخصيص.

يمكنك الاطلاع أكثر على هذه الميزات من خلال التوثيق الرسمي:

CRA: https://create-react-app.dev/docs/getting-started/ وVite: https://vitejs.dev/guide/)  

لذا يفضل تعلمها.

لدي مشكلة غريبة نوعاً ما عند استدعاء</Prayer> الذي قمت بأنشائه تختفي جميع العنصار

src.zip