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 تُحدِّث واجهة المستخدم لمُطابقتها.

القوائم والمفاتيح

طريقة تصيير مكوّنات متعددة، وأهميّة المفاتيح في معرفة العناصر التي تغيرت، أو أُضيفت، أو أُزيلت.

الحقول

رفع الحالات المشتركة للمستوى الأعلى

الفرق بين التركيب والوراثة في React

أسلوب التفكير في React

الدليل المتقدم

شرح JSX بالتفصيل

التحقق من الأنواع الثابتة

التحقق من الأنواع باستخدام PropTypes

استخدام المراجع مع DOM

المكونات غير المضبوطة

تحسين الأداء

React بدون ES6

React بدون JSX

المطابقة (Reconciliation)

استخدام السياق (Context) في React

استخدام الأجزاء (Fragments) في React

المداخل (Portals) في React

حدود الأخطاء

مكونات الويب

المكونات ذات الترتيب الأعلى

تمرير المراجع

خاصيات التصيير

تكامل React مع المكتبات الأخرى

سهولة الوصول

تقسيم الشيفرة

الوضع الصارم (Strict Mode)

مرجع إلى واجهة برمجة التطبيق (API) في React

واجهة برمجة التطبيق (API) ذات المستوى الأعلى في React

الصنف React.Component

الكائن ReactDOM

الكائن ReactDOMServer

عناصر DOM

الأحداث المصطنعة (Synthetic Events)

أدوات الاختبار

التصيير السطحي (Shallow Rendering)

مصير الاختبار (Test Renderer)

متطلبات بيئة JavaScript

الأسئلة الشائعة في React

المصطلحات

استخدام AJAX مع React

أسئلة حول Babel، و JSX، وخطوات بناء التطبيقات

تمرير الدوال إلى المكونات

حالة المكونات

التنسيق واستخدام CSS مع React

بنية ملفات المشروع

DOM الافتراضي والكائنات الداخلية

الدليل التطبيقي