نموذج بداية قوي لتطوير الويب الحديث

أصبح إنشاء تطبيقات React أمرًا سهلاً باستخدام React with Vite On Steroids – قالب أولي لإنشاء تطبيقات React عالية الأداء بسهولة.

ماذا يوجد بالداخل؟

هذا القالب مليء بالميزات المصممة لتبسيط عملية التطوير الخاصة بك:

• Vite: أداة البناء فائقة السرعة التي تضمن التطور السريع وبناء الإنتاج الأمثل.
• React: مكتبة جافا سكريبت الشهيرة لبناء واجهات المستخدم.
• TypeScript: أضف أمان الكتابة والأدوات المحسنة إلى JavaScript.
• Tailwind CSS: إطار عمل CSS أول فائدة لإنشاء تصميمات مذهلة دون كتابة CSS مخصص.
• ESLint: حافظ على قاعدة التعليمات البرمجية الخاصة بك نظيفة ومتسقة مع قواعد الفحص القابلة للتوصيل.
• Prettier: منسق الأكواد البرمجية الذي يفرض تصميمًا متسقًا عبر مشروعك.
• Vitest: إطار عمل اختبار الوحدة فائق السرعة مع منهج Vite الأصلي.
• مكتبة الاختبار: أدوات اختبار بسيطة وكاملة تشجع ممارسات الاختبار الجيدة.
• الكاتب المسرحي: إطار اختبار شامل ومتعدد الاستخدامات يدعم متصفحات متعددة.
• Husky: قم بأتمتة خطافات Git الخاصة بك، مثل خطافات الالتزام المسبق، لضمان جودة التعليمات البرمجية قبل وصولها إلى المستودع.

ابدء

المتطلبات الأساسية

قبل الغوص، تأكد من تثبيت ما يلي:

• Node.js (الإصدار 20.x أو أعلى)
• الغزل (أو npm أو pnpm)

تثبيت

ابدأ مشروعك بهذه الخطوات البسيطة:

1. استنساخ المستودع:

   git clone https://github.com/RicardoGEsteves/react-with-vite-on-steroids.git
   cd react-with-vite-on-steroids

1. تثبيت التبعيات:

   yarn

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

هل أنت مستعد لبدء البرمجة؟ قم بتدوير خادم التطوير باستخدام:

yarn dev

بناء للإنتاج

عندما تكون جاهزًا للنشر، أنشئ نسخة إنتاجية باستخدام:

yarn build

تشغيل الاختبارات

يأتي هذا القالب مزودًا بأدوات اختبار مدمجة لضمان عمل التعليمات البرمجية الخاصة بك كما هو متوقع.

• اختبارات الوحدة مع Vitest:

  yarn test

• التحقق من تغطية الاختبار:

  yarn coverage

• الاختبارات الشاملة مع الكاتب المسرحي:

  • تشغيل كافة الاختبارات:

  yarn playwright test
  

  • وضع واجهة المستخدم التفاعلية:

  yarn playwright test --ui
  

  • تشغيل الاختبارات فقط على Desktop Chrome:

  yarn playwright test --project=chromium
  

  • تشغيل الاختبارات في ملف محدد:

  yarn playwright test example
  

  • وضع التصحيح:

  yarn playwright test --debug
  

  • إنشاء الاختبارات تلقائيًا باستخدام Codegen:

  yarn playwright codegen
  

التصفية والتنسيق

الحفاظ على جودة التعليمات البرمجية واتساقها مع هذه الأوامر:

• رمز الكود:

  yarn lint

• إصلاح أخطاء الفحص:

  yarn lint:fix

• تنسيق الكود:

  yarn format

رخصة

هذا المشروع مرخص بموجب ترخيص MIT. لمزيد من التفاصيل، راجع ملف الترخيص.

شكر وتقدير

شكرًا جزيلاً للمطورين والمجتمعات التي تقف وراء هذه الأدوات الرائعة:

• Vite
• التفاعل
• TypeScript
• Tailwind CSS
• ESLint
• أجمل
• الزيارة
• مكتبة الاختبارات
• الكاتب المسرحي
• أجش

راجع القالب @RicardoGEsteves

لديك الكثير على موقع الويب الخاص بي على https://www.ricardogesteves.com

تابعني @ricardogesteves
X(تويتر)

ريكاردو جيستيفز (ريكاردو إستيفيس) · جيثب

مطور مكدس كامل | شغوف بإنشاء تجارب مستخدم بديهية ومؤثرة | مقرها في لشبونة، البرتغال ؟؟ - ريكاردو جيستيفز

github.com