مشروع موجّه: بناء لوحة معلومات كوفيد باستخدام React

React.js هي مكتبة JavaScript تصريحية قائمة على المكوّنات لإنشاء واجهات مستخدم على الويب، بينما تُعد Chart.js مكتبة JavaScript متخصصة في إنشاء الرسوم البيانية وتصور البيانات. يمكن استخدام هذين الإطارين لتطوير تطبيقات تتصل بمصادر البيانات عبر واجهات برمجة التطبيقات (APIs)، ما يتيح بناء تجارب واجهة أمامية جذابة وتفاعلية. يركّز هذا المشروع الموجّه العملي (Hands-on) على دمج قدرات React.js وChart.js مع واجهات API لإنشاء تطبيق صفحة واحدة (Single-Page Application) ديناميكي يعرض البيانات على شكل لوحة معلومات (Dashboard). ستعتمد البيانات على واجهة برمجة التطبيقات الخاصة بـ COVID-19 Canada Open Data Working Group، حيث ستقوم بجلب البيانات ثم تنظيمها وعرضها بصريًا باستخدام مخططات مناسبة. هذا المشروع مناسب للمطورين الذين لديهم معرفة أساسية بـ JavaScript وخبرة أولية في HTML/CSS ويرغبون في صقل مهاراتهم في تطوير الواجهة الأمامية. خلال ساعة واحدة، ستبني تطبيق React من الصفر، وتتعلم كيفية كتابة JSX وفهمها، وإنشاء مكوّنات React وتنظيمها، واستخدام React Hooks لتخزين البيانات والتعامل مع عمليات العرض وإعادة العرض (renders/re-renders). كما ستتعرف على كيفية الاستفادة من مكتبات خارجية لتسريع عملية التطوير وتبسيطها، مع التركيز على بناء لوحة معلومات واضحة وسهلة الاستخدام لتصور بيانات كوفيد-19.

• تطوير تطبيق React من الصفر
• تطبيق وفهم صياغة JSX وتفسيرها
• وصف مكوّن React وإنشاؤه
• استخدام React Hooks لتخزين البيانات والتعامل مع عمليات العرض وإعادة العرض
• استخدام مكتبات خارجية لتبسيط التطوير وتسريعه

• متصفح ويب
• معرفة أساسية ببرمجة JavaScript
• معرفة أساسية بـ HTML وCSS