مرجع React

آخر تحديث: 2026-11-03

مرجع React

قائمة أبجدية بـ 80 عنصراً من React: المفاهيم الأساسية والعرض والحالة وأنماط المكونات والآثار الجانبية والأداء والتوجيه وإدارة الحالة والبيانات والهندسة والمنظومة، مع الصيغة وأمثلة قابلة للتشغيل ومحرر تفاعلي.

A
AbortController	AbortController واجهة أصلية في المتصفح: مرّر signal الخاص بها إلى fetch واستدعِ abort() لإ...
Action Design	الإجراء كائن عادي يصف ما حدث: نوعه هو الهوية، وهو عادةً ثابت بأحرف كبيرة، وحمولته تحمل الب...
B
BrowserRouter	BrowserRouter هي حاوية التوجيه في react-router-dom: تراقب العنوان وتوفّر الموقع الحالي لشج...
C
Callback Props	يمكن للـ props أن تحمل دوالاً إلى جانب البيانات. يستدعي الابن دالة الاستجابة التي مرّرها ا...
children	children خاصية خاصة: أي شيء يقع بين وسم فتح المكوّن ووسم إغلاقه يصبح تلقائياً props.childr...
Cleanup Function	دالة التنظيف هي التفكيك الذي يعيده الأثر: تعمل مرة قبل التشغيل التالي لنفس الأثر، ومرة أخر...
Component	المكوّن هو أصغر وحدة قابلة لإعادة الاستخدام في تطبيق React: دالة تستقبل props وتعيد JSX. و...
Component Tree	تتكوّن تطبيقات React من مكوّنات متداخلة تشكّل شجرة: المكوّن الجذر في الأعلى، وتذهب الأبناء...
Composition	يوصي React بالتراكب بدل الوراثة لإعادة استخدام المكوّنات: يمرّر الأب JSX داخل children أو ...
Conditional Rendering	لا يوجد وسم if في React: العرض المشروط يعني كتابة منطق JavaScript عادي — عبارات if وعوامل ...
Controlled Components	المكوّن الخاضع للرقابة هو الذي تقود قيمته حالة React: تُربط القيمة بالحالة، وتكتب onChange...
createContext	ينشئ createContext كائن Context يتيح للبيانات أن تعبر مستويات الشجرة دون تمرير props عبر ك...
CSS Modules	تحوّل وحدات CSS ملف CSS عاديًا إلى أنماط ذات نطاق محلي: وقت البناء يُترجَم كل اسم صنف إلى ...
Custom Hooks	الخطّاف المخصّص دالة عادية يبدأ اسمها بـ use، ويمكنها استدعاء خطافات أخرى في داخلها، فتحوّ...
D
Declarative UI	الواجهة التصريحية تعني أنك تصف فقط كيف يجب أن تبدو الواجهة في حالة معيّنة، بدل كتابة عمليا...
Default Props	حين لا يمرّر المكوّن الأب خاصية ما تكون قيمتها undefined، وقد تظهر الواجهة فارغة أو يُلقى ...
Dependency Array	تخبر مصفوفة الاعتماديات الأثر لمن يعمل: مصفوفة فارغة تشغّله مرة واحدة، وإدراج متغيّرات تجع...
Dynamic Forms	حين لا يكون عدد الحقول ثابتاً، قدّ العرض من مصفوفة محفوظة في الحالة: كل حقل يخزّن سجلاً وا...
E
Effect Pitfalls	تتركّز مزالق useEffect حول مصفوفة الاعتمادات: اعتماد ناقص يقرأ قيمة قديمة، واستدعاء setSta...
Entry File	ملف الدخول — وهو عادةً src/main.jsx — هو نقطة انطلاق تطبيق React: يركّب المكوّن الجذر على ...
ErrorBoundary	حد الخطأ شبكة أمان على مستوى المكوّن: يصطاد الأخطاء في شجرة الابن ويرسم واجهة بديلة بدل شا...
Event Handling	يربط React الأحداث بخصائص onXxx بصيغة camelCase الصغيرة مثل onClick وonChange، وقيمة هذه ا...
Event Parameters	تستقبل دالة معالجة الحدث كائن الحدث e وتستطيع قراءة قيم مثل target.value أو key منه. وحين ...
Event Types	تأتي أنواع الأحداث من @types/react: يُنمَّط onClick كـ MouseEvent<HTMLButtonElement> وonCh...
F
Filter & Sort Lists	لا تُعدّل تصفية القائمة وترتيبها تعديل المصفوفة الأصلية وقت العرض، بل تشتقّ مصفوفة جديدة ب...
Form Inputs	الحقول النصية ومربعات الاختيار والقوائم المنسدلة وحقول النص متعدد الأسطر تشترك جميعها في م...
Form Validation	جوهر التحقّق هو استخراج الأخطاء من الحالة: دالة تحقّق تحسب كائن أخطاء، ويُفحص الكائن كله م...
forwardRef	لا تتلقّى المكوّنات الدالية ref افتراضياً. و forwardRef يمرّر الـ ref الذي يمرّره الأب إلى...
Framer Motion	Framer Motion (المنشورة اليوم كحزمة motion) هي مكتبة الحركة الأشهر في React: صرّح بالحالة ...
Functional Updates	تمرير دالة إلى setState، مثل setCount(c => c + 1)، يعني حساب الحالة التالية من أحدث قيمة س...
G
Generic Components	تُتابع المكوّنات العامة النوع مع البيانات: تَرسم function List<T> مصفوفة نصوص بـ T=string ...
J
JSX	JSX هي امتداد نحوي لـ JavaScript يتيح لك كتابة بنية الواجهة مباشرة داخل ملف JS. تُترجَم في...
JSX vs HTML	يبدو JSX مثل HTML، لكن قواعد قليلة تختلف: تستخدم السمات camelCase الصغيرة، ويصبح class هو ...
K
key	الـ key هو هوية العنصر داخل قائمة معروضة. يعتمد عليه React لتمييز العناصر التي تغيّرت وتلك...
L
List Rendering	يعرض React القوائم عبر تحويل مصفوفة بـ map() إلى مجموعة من عناصر JSX: جهّز مصفوفة بيانات، ...
M
Multi-Step Forms	النموذج متعدّد الخطوات يساوي حالة خطوة واحدة، وعرضاً شرطياً للخطوة الحالية، وحالة نموذج وا...
N
NavLink	NavLink هو رابط يدرك حالة التنشيط: عندما يطابق العنوان الحالي خاصيته to، يضيف تلقائيًا اسم...
Nested Lists	حين تكون البيانات ببنية متعدّدة المستويات مثل تصنيفات تحتوي عناصر، تعرض قائمة متداخلة عبر ...
Nested Routes	تُعبّر المسارات المتداخلة عن «تخطيط + صفحات فرعية» كعنصري Route أب وابن: يحتوي Route أب عل...
Next.js App Router	موجّه App هو موجّه اصطلاح الملفات المُدخَل في Next.js 13+: كل مجلد تحت app/ يصبح مقطع URL ...
Next.js Data Fetching	في مكوّن خادمي من Next.js تستطيع انتظار fetch مباشرةً، ويتحكّم next.revalidate باستراتيجية...
Next.js Deploy	Vercel هو الخيار الأول لنشر Next.js — بلا أي إعداد، مع دعم ISR وتحسين الصور والدوال الحافي...
O
Object & Array State	يجب استبدال الحالة بكائن جديد أو مصفوفة جديدة قبل أن يلاحظ React أي تحديث: استخدم معامل ال...
P
preventDefault	تمنع e.preventDefault() الإجراء الافتراضي للمتصفح لحدث، وأبرزه إعادة تحميل الصفحة كاملة بس...
Props	الـ props هي البيانات التي يسلّمها المكوّن الأب إلى ابنه، وتتصرّف كوسائط دالة: للقراءة فقط...
ProtectedRoute	حارس المسار يفحص الصلاحيات قبل فتح الصفحة: لفّ المسار بـ ProtectedRoute، فإذا لم يكن الزائ...
Provider Pattern	يحزم نمط Provider البيانات وطرق تغييرها في مكوّن Provider حامل للحالة مع خطّاف مخصّص مقابل...
R
React DevTools	React DevTools هو امتداد المتصفح الرسمي الذي يتيح لك فحص شجرة المكوّنات كما تفحص DOM، وقرا...
React.lazy	React.lazy(() => import('./Page')) يحوّل مكوّنًا إلى حزمة تُنزَّل «عند الحاجة»، ويعرض Susp...
React.memo	تغليف المكوّن بـ React.memo يتيح له تخطّي إعادة العرض حين تبقى خصائصه متساوية في مقارنة سط...
Reducer Patterns	تحافظ بضعة أنماط شائعة على نظافة المُقلِّلات: التهيئة الكسولة عبر الوسيط الثالث، والتحديثا...
Redux Toolkit	Redux Toolkit (RTK) هو الأسلوب الموصى به رسميًا لكتابة Redux: يُنشئ createSlice مخفّضًا وأ...
Render Props	تعني render props تمرير JSX الذي تريد عرضه إلى مكوّن كـ prop دالة: يملك المكوّن المنطق وال...
Rendering Model	يحدّث React على خطوتين: ينفّذ أولاً دالة المكوّن لإنتاج JSX جديد (العرض)، ثم يلتزم الفروق ...
Rules of Hooks	تخضع الـ Hooks لقاعدتين صارمتين: استدعِها فقط في المستوى الأعلى من مكوّن function أو من Ho...
S
styled-components	styled-components هي المكتبة الرائدة في CSS-in-JS: تكتب CSS داخل JavaScript عبر القوالب ال...
T
Tailwind in React	Tailwind CSS إطار CSS ذرّي: يقسّم الأنماط إلى أصناف أدوات ذات غرض واحد تكتبها مباشرةً في c...
Three-State Fetching	كل طلب بيانات له ثلاث حالات: loading أثناء التنفيذ، وsuccess عند وصول البيانات، وerror عند...
Typed Props	في TypeScript تبني بـ interface أو type عقدًا للـ props: تُلتقط الأسماء الخاطئة والناقصة و...
U
UI Libraries	تأتي مكتبات مكوّنات React بنكهتين: مكتبات كاملة مثل Ant Design و MUI و shadcn/ui تعمل جاهز...
useCallback	يخزّن useCallback مرجع دالة: ما دامت الاعتماديات كما هي يعيد الدالة نفسها. وحين تسلّم دالة...
useContext	يأخذ useContext كائن Context أنشأه createContext ويعيد قيمة أقرب Provider فوقه، أو القيمة ...
useDebounce	يأخذ useDebounce قيمة تتغيّر بسرعة، مثل نص مربع بحث، ويعيد نسخة ثابتة منها بعد N مللي ثاني...
useEffect	‏useEffect هو البيت التصريحي للآثار الجانبية — جلب البيانات والاشتراكات والمؤقّتات والعمل ...
useFetch Pattern	اسحب منطق الطلب الثلاثي الحالات إلى Hook مخصّص useFetch(url): يستدعي المكوّن سطرًا واحدًا ...
useLocalStorage	يبقي useLocalStorage قراءات useState وكتابتها متزامنة مع localStorage: يقرأ القيمة المخزّن...
useMemo	يخزّن useMemo نتيجة عملية حسابية: ما دامت الاعتماديات كما هي يعيد النتيجة السابقة ويتخطّى ...
useMutation	يدير useMutation الحالة غير المتزامنة لعمليات الكتابة (POST وPUT وDELETE): تُطلق mutate ال...
useNavigate	يُعيد useNavigate دالة navigate: اذهب إلى الصفحة الرئيسية بعد تسجيل الدخول، عُد إلى القائم...
useParams	يُعيد useParams كائنًا بقطع المسار الديناميكية للمسار المطابق حاليًا: حين يُكتب المسار /us...
useQuery	يدير useQuery من TanStack Query كامل «دورة حياة الطلب + الذاكرة»: يُزيل التكرار تلقائيًا، ...
useReducer	يجمع useReducer سؤال «كيف تتغيّر الحالة؟» في دالة مُقلِّل خالقة واحدة: إرسال إجراء يستدعيه...
useRef	يعيد useRef حاوية بخاصية current: يبقي أي قيمة حيّة عبر العروض، والكتابة فيها لا تُطلق إعا...
useRef as Container	الـ ref ليس للـ DOM فقط: إنه صندوق ملاحظات يبقى حيّاً عبر العروض ويناسب بيانات مثل معرّفات...
useState	يضيف useState متغيّر حالة إلى مكوّن دالي: يعيد القيمة الحالية ودالة تحديث، وأي تغيّر يعيد ...
V
Virtual DOM	DOM الافتراضي هو شجرة خفيفة من كائنات JavaScript العادية يحتفظ بها React في الذاكرة لوصف ا...
Vite Setup	Vite هو المولّد القياسي اليوم لمشاريع React: أمر واحد ينشئ بيئة تطوير مع إعادة تحميل فورية...
Vitest + RTL	Vitest عدّاء اختبار سريع جدًا يشارك إعداده مع Vite، وReact Testing Library تتيح لك اختبار ...
W
When Not to Memo	‏memo و useMemo و useCallback ليست مجانية: فالمقارنة والتخزين يكلّفان شيئاً وتصبح الشيفرة ...
Z
Zustand	Zustand مكتبة حالة عامة بسيطة جدًا: تعرّف create متجرًا، وتستدعيه المكوّنات كـ Hook مخصّص،...

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن