الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

كل شيء من أجل إعادة بناء واحد

الاسم: إليزابيث تروتر

نطاق المشروع

هذا rebuild of a former project يعزز تحديات نقاط نهاية API Mini السابقة في تطبيق ويب من 10 صفحات. كان تركيز هذا المشروع هو learn how to use React . تم نموذج هذا المشروع على Figma باستخدام mobile first design .

  • انقر هنا لزيارة النموذج الأولي Figma للجوال وسطح المكتب.
  • انقر هنا لزيارة المشروع الأصلي الذي تم الانتهاء منه مع الفانيليا جافا سكريبت.

ملحوظة

يجلب هذا التطبيق من Web API تعمل بكامل طاقتها قمت بإنشائها ونشرها على Azure . يمكن الوصول إليها من قبل التطبيقات الأخرى عبر HTTP.

  • انقر هنا لزيارة Web API Repo .

معاينة التطبيق

معاينة الهاتف المحمول

الشكل 1: معاينة الهاتف المحمول للصفحة الرئيسية والمستوى الأولين

مراجعة النظراء

الاسم: Zachary Dressel Date/الوقت: 2/9/24 3:55 PM التعليقات (S): المشروع على الفور لطلب استجمام رد الفعل ، يعمل كل شيء بشكل جيد للمستوى 2 الذي يعود إلى الوراء ، ويمكن أن يستخدم هذا المستوى 9 وصفًا بدلاً من إخراج الاسم. الموقع مستجيب تمامًا أيضًا ، بشكل عام مذهل!

حل القضايا:

  • ثابت المستوى 2 علة ✅ 2/9/24 4:55 مساءً

البدء في إنشاء تطبيق React

تم bootstrapped هذا المشروع مع إنشاء تطبيق React.

البرامج النصية المتاحة

في دليل المشروع ، يمكنك تشغيل:

npm start

يدير التطبيق في وضع التطوير.
افتح http: // localhost: 3000 لمشاهدته في متصفحك.

سيتم إعادة تحميل الصفحة عند إجراء تغييرات.
قد ترى أيضًا أي أخطاء في وحدة التحكم في وحدة التحكم.

npm test

يطلق عداء الاختبار في وضع الساعة التفاعلية.
انظر القسم حول إجراء الاختبارات لمزيد من المعلومات.

npm run build

يبني التطبيق للإنتاج إلى مجلد build .
تتفاعل حزمها بشكل صحيح في وضع الإنتاج وتحسن البناء للحصول على أفضل أداء.

تم تصنيع البناء ويتضمن أسماء الملفات التجزئة.
تطبيقك جاهز للنشر!

راجع القسم الخاص بالنشر لمزيد من المعلومات.

npm run eject

ملاحظة: هذه عملية في اتجاه واحد. بمجرد eject ، لا يمكنك العودة!

إذا لم تكن راضيًا عن أدوات الإنشاء وخيارات التكوين ، فيمكنك eject في أي وقت. سيقوم هذا الأمر بإزالة التبعية الفردية من مشروعك.

بدلاً من ذلك ، ستقوم بنسخ جميع ملفات التكوين والتبعيات المتعدية (WebPack ، Babel ، ESLINT ، إلخ) مباشرة في مشروعك حتى يكون لديك سيطرة كاملة عليها. ستظل جميع الأوامر باستثناء eject تعمل ، لكنها ستشير إلى البرامج النصية المنسوخة حتى تتمكن من تعديلها. في هذه المرحلة ، أنت وحدك.

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

يتعلم أكثر

يمكنك معرفة المزيد في وثائق تطبيق Create React.

لتعلم رد الفعل ، تحقق من وثائق رد الفعل.

تقسيم الكود

لقد انتقل هذا القسم هنا: https://facebook.github.io/create-react-app/docs/code-splitting

تحليل حجم الحزمة

لقد انتقل هذا القسم هنا: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

صنع تطبيق ويب تدريجي

انتقل هذا القسم هنا: https://facebook.github.io/create-react-app/docs/making-a-progression-web-app-app

التكوين المتقدم

لقد انتقل هذا القسم هنا: https://facebook.github.io/create-react-app/docs/advanced-configuration

النشر

انتقل هذا القسم هنا: https://facebook.github.io/create-react-app/docs/deployment

فشل npm run build في Minify

لقد انتقل هذا القسم هنا: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل