MASTRILO
العودة إلى الدورات
Frontend Engineeringمدفوع

React 19 Foundations Through Practice

كيف تعرض React الواجهة و تحدثها عند تغير البيانات؟ تتناول الدورة هذا السؤال بالتطبيق، من أول مكون إلى مشروع تفاعلي باستخدام React 19 و Vite.

JavaScriptJavaScriptReactReact
React 19 Foundations Through Practice
About This Course

عن الدورة

تبدأ الدورة ببناء مكونات بسيطة ثم تشرح كيف يعرض React الواجهة و يحدثها عند تغير البيانات. بعدها تتناول State و Effects و Actions و النماذج و حالات الانتظار. و تجمع الدروس الأخيرة هذه الأفكار في مشروع Learning Dashboard.

تستخدم أمثلة الدورة و تمارينها JavaScript و JSX مع React 19 و Vite. لا تتطلب الدورة معرفة TypeScript و لا تعتمد على إطار عمل إضافي مثل Next.js أو TanStack Start.

Learning Outcomes

ماهي مخرجات التعلم من هذه الدورة؟

فهم نموذج Renderingمراحل تحديث الواجهة في React من Trigger إلى Render ثم Commit و سبب ثبات قيمة State داخل كل Render.
تصميم Components و Stateتقسيم الواجهة إلى Components واضحة مع حفظ القيم الضرورية فقط في State و تحديد المكون المسؤول عنها.
استخدام Effects عند الحاجةالتمييز بين تفاعل المستخدم و العمل الذي يحتاج إلى Effect، مع بدء المزامنة مع الأنظمة الخارجية و تنظيفها عند الحاجة.
بناء تجارب Async و Formsالتعامل مع الانتظار و الأخطاء و نتائج الإرسال مع بقاء الواجهة مستجيبة و ظهور التغييرات المؤقتة قبل تأكيدها.
دمج المفاهيم في مشروعمشروع Learning Dashboard يجمع البحث و متابعة التقدم و النماذج و حالات الانتظار في تطبيق واحد باستخدام React و Vite فقط.
Requirements

مُتطلبات الدورة

معرفة HTML و CSS لبناء صفحة ثابتة.
معرفة JavaScript الحديثة بما فيها Functions و Arrays و Objects و Modules.
معرفة أساسية بمفاهيم Promises و async و await.
القدرة على تشغيل أوامر بسيطة في Terminal و فهم الأخطاء التي تظهر في Browser Console.
Target Audience

لمن هذه الدورة؟

هذه الدورة مناسبة لك إذا كنت:

من يريد تعلم React للمرة الأولى من نموذج ذهني واضح.
من يعرف أساسيات React لكنه لا يستطيع تفسير عمليات Rendering و تحديثات State.
من يريد فهم Effects و Actions قبل استخدام Framework أو مكتبة لإدارة State.

مكافأة إكمال الدورة. 100 XP. تُمنح المكافأة مرة واحدة فقط.عند إكمال الدورة لأول مرة إضافة إلى نقاط الدروس والأنشطة.

Curriculum

منهج الدورة

9 موضوع · 54 درس
لماذا يصعب تحديث الواجهة يدويا؟
مكافأة إكمال الدرس إضافة إلى نقاط أنشطته. 10 XP. تُمنح المكافأة مرة واحدة فقط.معاينة مجانية
كيف تظهر واجهة React في الصفحة؟
مكافأة إكمال الدرس إضافة إلى نقاط أنشطته. 10 XP. تُمنح المكافأة مرة واحدة فقط.معاينة مجانية
كيف يصف JSX الواجهة؟
مكافأة إكمال الدرس إضافة إلى نقاط أنشطته. 10 XP. تُمنح المكافأة مرة واحدة فقط.معاينة مجانية
الواجهة شجرة من المكونات
مكافأة إكمال الدرس إضافة إلى نقاط أنشطته. 10 XP. تُمنح المكافأة مرة واحدة فقط.معاينة مجانية
متى ننقل المكون إلى ملف مستقل؟
مكافأة إكمال الدرس إضافة إلى نقاط أنشطته. 10 XP. تُمنح المكافأة مرة واحدة فقط.معاينة مجانية
تمرير البيانات عبر Props
مكافأة إكمال الدرس إضافة إلى نقاط أنشطته. 10 XP. تُمنح المكافأة مرة واحدة فقط.معاينة مجانية
بناء بطاقة مرنة باستخدام Composition
مكافأة إكمال الدرس إضافة إلى نقاط أنشطته. 10 XP. تُمنح المكافأة مرة واحدة فقط.معاينة مجانية
Enrollment
$40
التقييم
لا توجد تقييمات بعد
عدد الدروس
54 درس
النوع
المفاهيم
الطلاب المسجلون
1
اختبارات
شهادة إتمام
-
آخر تحديث
أكتوبر 2026
اطلب شراء هذه الدورة

اطلب شراء الدورة وحدها عبر واتساب وأرسل بريد حسابك. بعد تأكيد الدفع، نرسل لك كود التفعيل.

Related Courses

دورات ذات صلة

React Design Patterns

مكافأة إكمال الدورة إضافة إلى نقاط الدروس والأنشطة. 100 XP. تُمنح المكافأة مرة واحدة فقط.

تجاوز مرحلة كتابة المكونات العشوائية إلى بناء واجهات React بهيكلة واضحة و قابلة للصيانة، عبر تعلم الـ Design Patterns التي يستخدمها المطورون لتنظيم المكونات (Component Organization)، مشاركة السلوك (Behavior Reusability) و إدارة تدفق البيانات (Data Flow Management) داخل التطبيقات الحقيقية.

12 درس0 ساعة
المفاهيم

Crafting Advanced React Components from Primitives

مكافأة إكمال الدورة إضافة إلى نقاط الدروس والأنشطة. 100 XP. تُمنح المكافأة مرة واحدة فقط.

انتقل من مجرد استخدام مكتبات المكونات إلى فهم كيفية تصميمها و بنائها من الداخل (Under the Hood)، عبر إعادة بناء مكونات مستوحاة من Radix UI و تطبيق أنماط التصميم المستخدمة في الأنظمة الحقيقية.

39 درس0 ساعة
التطبيق