مشاريع React

نتجاوز في هذه الدورة المفاهيم النظرية ونتعمق معًا لبناء تطبيقات واقعية من بيئة العمل الحقيقية من خلال ثلاثة مشاريع تم تخطيطها بعناية، مما يُكسبك خبرة عملية ويعزز فهمك لمكتبة ريأكت ReactJS؛ ويساعدك على المنافسة في سوق العمل بين باقي المبرمجين.

ما الذي ستتعلمه في هذه الدورة؟

Integrate with Third-Party APIs: ستستخدم واجهات برمجة التطبيقات لتشغيل تطبيقاتك ببيانات حقيقية، مثل موجز الأخبار.

State Management: ستتعلم كيفية إدارة حالة التطبيق المعقدة بشكل فعال، مما يضمن تجربة سلسة وسريعة الاستجابة للمستخدم.

Responsive Designs: ستصمم تطبيقات تتكيف بسلاسة مع أي جهاز، وتوفر تجربة متسقة عبر جميع الأنظمة.

Advanced UI Features: ستستخدم وظيفة السحب والإفلات والرسوم المتحركة المخصصة لبناء واجهات جذابة وتفاعلية.

Design Libraries: ستستخدم المكتبات الشهيرة مثل Material UI وBootstrap لتبسيط عملية التطوير وتحقيق نتائج احترافية.

مارس أفضل ممارسات تجربة المستخدم UX: ستضع أفضل الممارسات في الاعتبار لمعالجة الأخطاء وإدارة حالة التحميل، لضمان نهج يرتكز على المستخدم.

Code optimization: ستكتب كودًا نظيفًا وقابلًا للصيانة يتوافق مع معايير الصناعة وأفضل الممارسات.

ستقوم في هذه الدورة بتصميم وإنشاء المشاريع التالية بنفسك:

 News Feed App: ستقوم في هذا المشروع بتطوير تطبيق موجز أخبار ديناميكي يعرض الأخبار الرائجة عبر فئات مختلفة. ستستخدم واجهات برمجة التطبيقات الخارجية 3rd party API، مميزات الترقيم والتصفية (pagination and filtering). كل هذا من خلال مراعاة التصميم المتجاوب (Responsive Design) واستخدام أفضل ممارسات تجربة المستخدم (UX) لإنشاء واجهة تطبيق سهلة الاستخدام.

Around the World:  ستقوم في هذا المشروع بتحدي مهاراتك في لغة جافا سكريبت ومكتبة ريأكت لتبني بنفسك موقع ويب ديناميكي يعرض معلومات عن دول مختلفة حول العالم، مع إمكانية بحث المستخدم عن الدول وفلترتها حسب المنطقة أو القارة للوصول إلى دول محددة، وأيضًا الضغط على الدولة لرؤية المزيد من المعلومات التفصيلية عنها في صفحة منفصلة. ستقوم أيضًا بتنفيذ color theme switcher يسمح للمستخدمين باختيار نمطهم المفضل، بجانب دمج واجهة برمجة التطبيقات (API)، وتصميم واجهة مستخدم متجاوبة (Responsive design) وأيضًا استخدام أدوات مهمة مثل Tailwind وreact router وreact-select وeslint وvite وغيرهم. 

اشترك في الدورة الآن، واحترف مكتبة ReactJS!