الصفحة الرئيسية>موارد بناء الموقع>بيانات الموقع
تنزيل

تطبيق محفظة React-Portfolio

صفحة المحفظة الشخصية www.fdaviz.com تم إنشاؤها في React.

عملية البناء

  1. تم تثبيت تطبيق React الجديد باستخدام العقدة JS.

  2. تم ترحيل إصدار محفظة Vanillajs وترحيله إلى تطبيق React جديد.

  3. كان النهج الأول هو استخدام المكتبات لإنشاء الرسوم المتحركة لأن إنشاء بلدي كان يستغرق وقتًا طويلاً. لهذا السبب ، قررت استخدام مكتبات WOW.JS و AMATY.CSS.

  4. يستخدم الدعائم React لإدارة مراجع المكونات في التطبيق ومشاركة تفاصيل المكونات لإنشاء SmoothScroll Usign رمز الخاص بي.

  5. تستخدم معظم الصفحة Bootstrap ، باستثناء معرض Modal الذي يحتوي على رمز CSS3 Flex-Box الخاص بي.

  6. تم إنشاء وسيط مختلف لمشروع المعرض واستخدام معالجات الأحداث React ، يمكنني إظهار كل مشروع مشروط.

  7. يستخدم النموذج Formsfree.io لتقديم الواجهة الخلفية.

  8. لقد استخدمت صورًا من Unsplash وهي مجانية للاستخدام والرموز من Flaticon والتي هي أيضًا مجانية للاستخدام.

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

التحديات التي استغرقت بعض الوقت لحلها

  1. كان تطبيق WOW.JS + ANIMATE.CSS صعبًا في البداية ، ولكن يستحق ذلك. يستغرق الأمر بعض الوقت لجعله يعمل مع تطبيقك ، ومع ذلك يستغرق وقتًا أقل من بناء مكتباتك الخاصة.

  2. كانت مشاركة تفاصيل مكونات DOM مثل الارتفاع ، و OffsettOps ، وما إلى ذلك ، بين المكونات الأخرى أمرًا صعبًا بعض الشيء لأن React Refs كان على معرفات الحاويات الوالدين. استغرق ذلك وقتا طويلا لمعرفة ذلك.

  3. بعد استخدام bootstrap لفترة من الوقت ، اضطررت إلى تعلم بعض الحيل CSS3 مثل Flex-Box وكيفية استخدام @keyframes + الرسوم المتحركة.

تحديث NPMs

  1. تمت إزالة مكتبة Node-SASS (DEPRECATED) لاستخدام SASS لتوافق bootstrap.

خاتمة

شكرًا على زيارة Website الخاصة بمحفظة React-Portfolio ولأخذ الوقت لقراءة هذا!

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