React/Topics
تثبيت React
تجربة React
تجربة React مباشرةً على الإنترنت أو إعداد بيئة تطوير محليّة خاصّة بك.
إضافة React إلى تطبيق جديد
إعداد تطبيق صفحة واحدة (single-page application) مع كل شيء تحتاجه من أجل سير عمل التطوير بسلاسة، بما في ذلك اكتشاف الأخطاء (linting)، والاختبار، وتحسينات الإنتاج، والمزيد من ذلك.
إضافة React إلى تطبيق موجود
لن تحتاج إلى إعادة كتابة تطبيقك للبدء باستخدام React. تشرح هذه الصفحة طريقة إضافة React إلى تطبيق موجود مسبقًا، مع إعداد خط بناء التطبيقات واستخدام إصدارات التطوير والإنتاج.
روابط شبكة توزيع المحتوى CDN
روابط شبكة توزيع المحتوى الخاصّة بمكتبة React للتطوير والإنتاج.
المفاهيم الأساسية
مثال أهلًا بالعالم في React
طريقة تنفيذ مثال أهلًا بالعالم في React، مع الحديث عن درجة المعرفة المفترضة في JavaScript للمتابعة في التوثيق.
مقدمة إلى JSX
أهميّة استخدام صياغة JSX وهي عبارة عن امتداد لصياغة JavaScript ، تُستخدَم مع React لوصف المظهر الذي ينبغي أن تكون عليه واجهة المستخدم.
تصيير العناصر
شرح تصيير العناصر إلى DOM وطريقة تحديثها، مع أخذ مثال عن تطبيق الساعة الموقوتة لفهم ذلك.
المكونات والخاصيات
تُتيح لنا المُكوِّنات (Components) تقسيم واجهة المستخدم إلى قطع مُستقِلَّة قابلة لإعادة الاستخدام، والتفكير بكل قطعة على انفراد. تقبل المكوّنات مُدخَلات المستخدم والتي تُدعى الخاصيّات props. تشرح هذه الصفحة الفرق بين مكوّنات الأصناف والدوال وطريقة استخراج وتركيب المكوّنات.
حالة ودورة حياة المكونات
تتحدّث هذه الصفحة عن حالة المكوّنات وأهميتها من خلال مثال عملي للساعة الموقوتة. مع شرح طريقة استخدام الحالة بشكل صحيح، ومقدمة إلى توابع دورة حياة المكوّنات.
معالجة الأحداث في React
الفرق بين معالجة الأحداث في React ومعالجتها في DOM، وطريقة تمرير وسائط إلى معالجات الأحداث.
التصيير الشرطي
بإمكانك في React إنشاء مُكوِّنات مميّزة تُغلِّف السلوك الذي تريده، ثم بعد ذلك تُصيِّر فقط أجزاء منها اعتمادًا على حالة تطبيقك. يعمل التصيير الشرطي في React بنفس الطريقة التي تعمل فيها التعابير الشرطيّة في JavaScript، حيث تستطيع استخدام مُعامِلات JavaScript مثل if أو المُعامِل الشرطي لإنشاء عناصر تُمثِّل الحالة الحاليّة، ثمّ تدع React تُحدِّث واجهة المستخدم لمُطابقتها.
القوائم والمفاتيح
طريقة تصيير مكوّنات متعددة، وأهميّة المفاتيح في معرفة العناصر التي تغيرت، أو أُضيفت، أو أُزيلت.
الحقول
طريقة استخدام الحقول (forms) في React والفرق بين طريقة تعريفها في HTML وطريقة تعريفها في React، مع الحديث عن مفهوم المكوّنات المضبوطة.
رفع الحالات المشتركة للمستوى الأعلى
طريقة رفع الحالة المشتركة بين المُكوِّنات مُتعدِّدة التي تعكس نفس البيانات المتغيّرة إلى أقرب عنصر أب مشترك لها، وذلك بتطبيق مثال عن آلة حاسبة تُحوِّل درجة الحرارة بين سيلزيوس وفهرنهايت.
الفرق بين التركيب والوراثة في React
أهمية استخدام التركيب في React وشرح هذا المفهوم وأفضليّة استخدامه على استخدام الوراثة.
أسلوب التفكير في React
أسلوب التفكير النموذجي أثناء بناء تطبيقات React وذلك بشرح بناء جدول بيانات منتجات قابل للبحث باستخدام React.
الدليل المتقدم
شرح JSX بالتفصيل
تشرح هذه الصفحة بالتفصيل صياغة JSX وطريقة التعامل مع الخاصيّات props عند استخدام هذه الصياغة واستخدام العناصر الأبناء في JSX.
التحقق من الأنواع الثابتة
استخدام أدوات التحقق من الأنواع الثابتة مثل Flow و TypeScript للتعرّف على بعض أنواع المشاكل قبل تنفيذ الشيفرة، وتحسين سير عمل المُطوِّر عن طريق إضافة ميّزات مثل الإكمال التلقائي.
التحقق من الأنواع باستخدام PropTypes
استخدام propTypes والتي هي أداة مُضمَّنة في React للتحقّق من الأنواع واكتشاف الأخطاء.