React

واجهات تفاعلية قابلة للتركيب

React هي المكتبة المفضلة لبناء واجهات المستخدم. المكونات وJSX والحالة والـ hooks، ثم معالجة البيانات والأداء والبنية: من مكونك الأول وصولاً إلى أنماط الخبراء.

الأسس

مبتدئ - الأساسيات خطوة بخطوة

• لماذا React، أول مكوّن لك و JSXاكتشف ما هو React، اكتب أول مكوّن لك على الإطلاق، وتعلّم القواعد الأساسية لـ JSX.
• Props: تمرير البيانات إلى مكوّنتعلّم كيف تجعل مكوّناتك قابلة لإعادة الاستعمال بتمرير البيانات إليها عبر props.
• الحالة المحلية مع useStateامنح مكوّناتك ذاكرة بواسطة useState لتتمكّن من عرض قيم تتغيّر مع تفاعل المستخدم.
• الأحداث والتصيير الشرطيتفاعل مع أفعال المستخدم واعرض أو أخفِ العناصر بناءً على شروط.
• تصيير القوائم ودور الـ keysحوّل مصفوفة بيانات إلى قائمة عناصر على الشاشة بواسطة map، وميّز كل عنصر بواسطة keys.

التقدّم

متوسط - بناء مشاريع حقيقية

• النماذج المتحكم بهاتعلم كيفية التحكم بكل حقل من حقول النموذج من خلال حالة React لتتمكن من التحقق من البيانات وإرسالها بشكل موثوق.
• useEffect: التأثيرات والتبعيات والتنظيفزامِن مكوّناتك مع العالم الخارجي باستخدام useEffect، مع إتقان التبعيات والتنظيف.
• رفع الحالة ومشاركة البياناتضع كل جزء من الحالة في أقرب سلف مشترك لمشاركة البيانات بين عدة مكوّنات دون تكرارها.
• التركيب: children والتقسيم إلى مكوّناتابنِ مكوّنات حاوية قابلة لإعادة الاستخدام باستخدام الخاصية children، وقسّم شاشاتك إلى مسؤوليات واضحة.
• استدعاء واجهة API: fetch، التحميل، والأخطاءحمّل بيانات بعيدة باستخدام fetch داخل تأثير، مع نمذجة حالتَي التحميل والخطأ بشكل نظيف.

الإتقان المتقدّم

محترف - أنماط متقدّمة والأداء

• useReducer للحالة المعقدةنظّم الحالة المعقدة بمُخفّض نقي يجمع الانتقالات في مكان واحد ويستبعد التركيبات المستحيلة.
• Context: المشاركة دون prop drillingانقل البيانات دون prop drilling باستخدام context، مع إبقاء عمليات إعادة تصييره وحدوده تحت السيطرة.
• الخطّافات المخصصة: استخراج المنطق وإعادة استخدامهاستخرج المنطق ذا الحالة إلى خطّافات قابلة لإعادة الاستخدام والتركيب والاختبار.
• المذاكرة (Memoization): memo و useMemo و useCallbackتعلّم متى تُسرّع React.memo و useMemo و useCallback تطبيقك فعلاً، ومتى تُعقّده بلا طائل.
• useRef والتلاعب بالـ DOMتلاعب بالـ DOM واحتفظ بقيم النسخة باستخدام useRef، دون كسر نقاء التصيير.

الاحتراف

خبير - البنية والتفاصيل الداخلية والحالات الحدّية

• تحت الغطاء: التوفيق، التجميع، والعرض المتزامناكتشف كيف يوفّق Fiber بين الشجرة، ويجمّع التحديثات، ويجعل عمل العرض قابلاً للمقاطعة.
• Suspense وlazy وتقسيم الشيفرةأتقِن آلية التعليق، وتحميل المكوّنات الكسول، وتقسيم الحزمة.
• أنماط الخبراء: المكوّنات المركّبة، عكس التحكّمصمّم واجهات مكوّنات مرنة عبر المكوّنات المركّبة، ومختزل الحالة، والاختيار الصحيح بين render props والخطّافات.
• React الحديث: Server Components و use و useTransition و useOptimisticاستكشف مكوّنات الخادم، وقراءة الوعود بواسطة use، والتحديثات التفاؤلية في React 19.
• الجودة: Testing Library وStrictMode وProfilerاختبر السلوك بدلاً من التطبيق، واستثمر الاستدعاءات المزدوجة لـ StrictMode، وقِس عمليات العرض بواسطة Profiler.