دورة React

مقدمة في دورة React:

• كلمات الافتتاح.

• ما هو React وقليل عن تاريخ المكتبة.

• التأكيد على العمل مع نظام قاعدة الكود.

مكون React أساسي:

• تعلم ما هو JSX في React.

• كيفية كتابة مكون أولي بسيط.

• بناء مكون ببيانات ثابتة وفهم الأساسيات.

بناء قائمة ببيانات ديناميكية:

• بناء عناصر ديناميكياً.

• استخدام قدرات Array.prototype.map للبناء الديناميكي.

• استيراد وتصدير المكونات من ملف.

بناء جدول ببيانات ديناميكية:

• بنية الجدول ومكوناته في HTML.

• استخدام حلقة متداخلة لبناء جدول.

• استخدام دالة map بشكل متداخل.

• استخدام بيانات ديناميكية من ملف مستورد.

التنسيق باستخدام Style Object:

• فهم الفرق بين HTML و JSX.

• تعلم تنسيق العناصر على الصفحة.

• الممارسة العملية لبناء عناصر ديناميكية بطريقة تحديّة باستخدام الأنماط المتعلمة.

دمج ملفات CSS في React:

• إدماج عالم الأنماط كجزء لا يتجزأ من بناء المكونات.

• فهم ما هو className والفرق بين HTML و JSX.

• إدماج تمرين شامل لكل المادة المتعلمة حتى هذه النقطة في الدورة.

• التأكيد على قواعد CSS وكيفية دمجها في نظامنا المبني.

دمج الخصائص (Props) في المكونات:

• ما هي الخصائص (props) في React ومتى يتم استخدامها.

• بناء المكونات باستخدام الخصائص (props) والطرق الشائعة للكتابة.

• استخدام المكونات التي كتبناها في البناء الديناميكي.

بناء جدول باستخدام الخصائص Props:

• بناء جدول باستخدام الخصائص Props.

• إنشاء مكون ذكي في بناء الجدول.

• الجمع بين البناء الديناميكي مع مكونات متعددة باستخدام الخصائص Props والتنسيق باستخدام CSS.

استخدام الأحداث و useState:

• كيفية ربط أحداث من نوع onClick بالعناصر.

• ما هي المكونات الذكية ولماذا نحتاجها.

• ما هو الخطاف react من نوع useState وكيفية استخدامه.

• إنشاء شروط بوليانية ضمن JSX لمكون.

• ربط إنشاء الأحداث وتخزين الحالة لبناء مكونات React ذكية.

استخدام حدث onChange:

• كيفية إضافة مُدخل إلى الصفحة واستخدام useState لتخزين قيم المُدخل.

• بناء قائمة ديناميكية بيانات مُدخلة من المستخدم.

• شرح مُفصل للمصفوفات والفرق بين القيمة والمرجع.

• فهم كيفية العمل مع المصفوفات المخزنة في حالة المكون.

بناء جدول ديناميكي مع الأحداث:

• فهم كيفية دمج كل ما تم تعلمه حتى الآن لبناء جدول بشكل ديناميكي.

• استخدام useState لتخزين عدد من المدخلات.

• مثال على استخدام الحالة المعقدة مع مصفوفة من الكائنات.

استخدام الخطاف useEffect:

• ما هو الخطاف react من نوع useEffect وكيف ومتى يتم استخدامه.

• إجراء التواصل مع الخادم باستخدام fetch.

• عرض الطرق لتأمين الكود البرمجي لتجنب الأخطاء غير الضرورية.

• بناء مكون ذكي يجمع بين خطافي useState و useEffect.

مثال على استخدام useEffect في البحث من جهة الخادم:

• استكشاف استخدامات إضافية لـ useEffect.

• فهم كيف يؤثر دورة حياة المكون على تنفيذ الشيفرة لدينا.

• عرض مثال معقد لاستخدام useEffect.

استخدام مدخلات إضافية:

• ما هو مدخل checkbox وكيفية استخدامه.

• ما هو مدخل radio وكيفية استخدامه.

• ما هي مدخلات datetime و datetime-local ومتى يتم استخدامها.

بناء جدول من API مع تصفية النتائج:

• إجراء طلب API لجلب بيانات حول جدول.

• بناء الجدول بشكل ديناميكي.

• تعلم كيفية إجراء عمليات البحث من خلال تصفية النتائج الذكية.

• مناقشة هندسة الكود.

استخدام الفلاتر المتقدمة:

• بناء جدول يعرض معلومات حول الرحلات الجوية.

• توسيع استخدام الجدول بمكون صف ذكي.

• استخدام مدخلات لبناء فلاتر للجدول، باستخدام checkbox، datetime، ومدخلات نصية.

مكتبة Bulma للتصميم المتقدم:

• تعلم كيفية تضمين الأنماط الجاهزة.

• استخدام حزمة bulma لإضافة الألوان والأنماط إلى مشاريع React المبنية معًا.

• تضمين الأنماط في مكون موجود والمرور عبر توثيق المكتبة التي سوف نستخدمها.

الترتيب في JavaScript:

• تحسين مكون الجدول القائم وإضافة قدرات الترتيب إليه.

• فهم عميق لكيفية عمل الترتيبات على المصفوفات مع الأرقام، السلاسل النصية، والكائنات.

• رؤية كيفية التعامل مع الترتيب الخاص عندما لا يكون حقلنا مقارنة مباشرة.

قنوات الاتصال بين المكونات:

• تعلم كيف يمكن للمكون الفرعي أن يتواصل مع المكون الرئيسي.

• تطبيق تنسيق bulma على عدة مكونات.

• بناء مكون متعدد الاستخدامات يسمح لنا بتضمين علامات التبويب في التطبيق.

• رؤية أمثلة لاستخدام props من نوع function.

الخاتمة