دروس React مع أمثلة تفاعلية
دروس مجانية في React 19: المكونات وJSX وprops والحالة والخطافات والأداء. كل مثال يعمل داخل الصفحة، فيمكنك تعديل الكود ومشاهدة المكوّن ووحدة التحكم يتغيران مباشرة.
ابدأ رحلة موجَّهة في Reactالبداية
- ما هي ReactReact مكتبة JavaScript لبناء واجهات المستخدم من مكوّنات. تصف ما يجب أن تعرضه الشاشة للبيانات الحالية، وتُبقي React الصفحة متزامنة عندما تتغير تلك البيانات.
- تثبيت Reactثبّت React بإنشاء مشروع باستخدام Vite: تحقق من Node.js، وشغّل أمر إنشاء واحدًا، وثبّت الاعتماديات وابدأ خادم التطوير. تتناول الصفحة أيضًا الملفات المولّدة والبناء للإنتاج وسبب إيقاف Create React App.
- JSXJSX امتداد لصيغة JavaScript يتيح لك كتابة ترميز شبيه بـ HTML داخل مكوّنات React. تعلّم قواعدها: عنصر جذر واحد، والوسوم المغلقة، وclassName، وأسماء السمات بنمط camelCase، والأقواس المعقوصة، والأنماط المضمّنة، والتعليقات، وما تتحول إليه عند الترجمة.
- المكونات في Reactمكوّن React دالة JavaScript تُرجع JSX. تعلّم كيف تكتب مكوّنات الدوال وتسمّيها، وتركّبها في شجرة، وتوزعها على ملفات، وتبقيها نقية، وكيف تختلف المكوّنات عن العناصر.
- Props في Reactprops هي مدخلات مكوّن React: قيم يمررها الأب إلى الابن كسمات في JSX. تعلّم كيف تمرر props وتفككها، وتضبط قيمًا افتراضية، وتمرر دوالًا، وتنشر props، ولماذا props للقراءة فقط.
- Children في Reactchildren هي الـ prop التي تحمل كل ما تضعه بين وسمي فتح المكوّن وإغلاقه. تعلّم كيف تبني بها مكوّنات مغلّفة ومكوّنات تخطيط، وتمرر عدة خانات كـ props مسماة، وتستخدم children كدالة، ومتى تكون واجهة Children الأداة الخاطئة.
- Fragment في Reactيجمع Fragment في React عدة عناصر في قيمة إرجاع واحدة دون إضافة عقدة إلى الصفحة. تعلّم الصيغة المختصرة <>...</>، ومتى تحتاج إلى <Fragment key>، ولماذا تهم الأجزاء داخل الجداول والقوائم.
- العرض الشرطي في Reactالعرض الشرطي في React هو JavaScript عادية: عبارة if أو معامل ثلاثي أو && يحدد أي JSX يُرجعها المكوّن. تعلّم كل نمط، والصفر الشارد الذي قد يطبعه &&، وإرجاع null، ولماذا إخفاء المكوّن ليس كعدم عرضه.
- القوائم والمفاتيح في Reactلعرض قائمة في React تستدعي map() على مصفوفة وتُرجع JSX لكل عنصر، مع إعطاء كل عنصر الـ prop المسماة key. تعلّم الترشيح ثم المرور، ومن أين ينبغي أن تأتي المفاتيح، ولماذا تخلط مفاتيح الفهرس العناصر عندما تتغير القائمة.
- الأحداث في Reactأحداث React هي props مثل onClick وonChange تأخذ دالة، تستدعيها React مع كائن حدث عندما يتصرف المستخدم. تعلّم كيف تمرر المعالج بدلًا من استدعائه، وتمرر الوسائط، وتقرأ e.target.value وe.key، وتمنع إعادة تحميل النماذج، وتوقف الانتشار.
- تنسيق React بـ CSSتنسّق مكوّنات React بـ className وCSS العادية، وبالـ prop المسماة style للقيم المحسوبة في JavaScript، وبـ CSS Modules لأسماء أصناف محصورة النطاق، أو بأصناف Tailwind الخدمية. تعلّم كل طريقة، والأصناف الشرطية، ومتى تستخدم أيًا منها.
الحالة والنماذج
- useStateيمنح useState المكوّن قيمة تبقى بعد إعادة العرض ودالة ضبط تعيد رسم الشاشة عندما تتغير القيمة. تعلّم الصيغة، ودوال التحديث، والكائنات والمصفوفات في الحالة، ولماذا تبدو القيمة قديمة مباشرة بعد ضبطها.
- تحديث المصفوفات والكائنات في Reactلتغيير مصفوفة أو كائن في حالة React، ابنِ واحدًا جديدًا ومرره إلى دالة الضبط. تعلّم كيف تضيف العناصر وتحذفها وتستبدلها وتدرجها وترتبها، وتحدّث الكائنات المتداخلة، ولماذا يترك تعديل الحالة مباشرة الشاشة دون تغيير.
- النماذج في Reactابنِ النماذج في React بحقول متحكم بها: الحقول النصية وtextarea وselect ومربعات الاختيار وأزرار الاختيار الدائرية، وكائن حالة واحد لحقول كثيرة، والإرسال بـ onSubmit، وعرض أخطاء التحقق، وإجراءات النماذج في React 19.
- المتحكم به وغير المتحكم به في Reactالحقل المتحكم به يأخذ قيمته من حالة React ولا يتغير إلا عبر onChange. والحقل غير المتحكم به يحتفظ بقيمته في DOM، وتقرؤها بمرجع أو بـ FormData. تعلّم الفرق والتحذيرات الشائعة ومتى تستخدم كلًا منهما.
- رفع الحالة في Reactرفع الحالة يعني نقل الحالة من مكوّنين إلى أقرب أب مشترك لهما، فيمرر القيمة ودالة ضبط إليهما كـ props. تعلّم متى ترفع الحالة، وكيف تفعل ذلك في ثلاث خطوات، ومتى تُبقي الحالة محلية بدلًا من ذلك.
- useReducerيخزن useReducer الحالة وينقل كل تحديث إلى دالة مختزل واحدة: ترسل إجراءً، فيُرجع المختزل الحالة التالية. تعلّم الصيغة، وكيف تكتب مختزلًا نقيًا، ومثال قائمة مهام، والتهيئة الكسولة، ومتى تختاره بدلًا من useState.
التأثيرات والمراجع
- useEffectيشغّل useEffect الكود بعد أن تحدّث React الشاشة، ليتزامن المكوّن مع شيء خارج React: مؤقت، أو اشتراك، أو مستمع أحداث. تعلّم الأشكال الثلاثة لمصفوفة الاعتماديات، ودالة التنظيف، والحلقات اللانهائية، ومتى لا تحتاج إلى تأثير أصلًا.
- جلب البيانات في Reactاجلب البيانات في React ببدء الطلب داخل useEffect، والاحتفاظ بالتحميل والخطأ والبيانات في الحالة، وتجاهل الردود التي تصل بعد تغيّر المدخلات. تتناول الصفحة async/await في التأثيرات وAbortController وحالات السباق ومتى تستخدم مكتبة بدلًا من ذلك.
- useRefيمنح useRef المكوّن صندوقًا، `{ current }`، يحتفظ بمحتواه بين مرات العرض دون أن يسبب عرضًا عندما تغيّره. استخدمه للوصول إلى عقدة DOM (التركيز، أو التمرير، أو القياس) أو لتخزين معرّف مؤقت أو أي قيمة لا تعرضها الشاشة.
- forwardRefيتيح forwardRef للمكوّن أن يأخذ مرجعًا من أبيه ويربطه بعقدة DOM بداخله. وفي React 19 تستقبل مكوّنات الدوال `ref` كـ prop عادية، فلم يعد الكود الجديد يحتاج إلى forwardRef. شاهد النسختين تعملان، مع useImperativeHandle وأنواع TypeScript.
- useLayoutEffectيعمل useLayoutEffect مثل useEffect لكنه يعمل مباشرة بعد أن تحدّث React الـ DOM وقبل أن يرسم المتصفح. استخدمه لقياس عنصر وضبط التخطيط دون وميض مرئي، واترك useEffect لكل ما عدا ذلك.
الخطافات والسياق
- الخطافات في Reactالخطاف دالة يبدأ اسمها بـ use تتيح للمكوّن استخدام ميزة من React مثل الحالة أو السياق أو المراجع أو التأثيرات. تعرّف على كل الخطافات المدمجة مجمّعة حسب الغرض، والقاعدتين اللتين يتبعهما كل خطاف، وكيف تكتب خطافك الخاص.
- useContextيقرأ useContext قيمة يوفرها مكوّن أب، فيحصل عليها مكوّن متداخل بعمق دون أن يمررها كل مكوّن بينهما كـ prop. تعلّم createContext والمزوّدين وتحديث السياق من ابن وكيف يؤثر السياق في إعادة العرض.
- Prop Drilling في ReactProp drilling هو تمرير prop عبر مكوّنات لا تستخدمها، فقط ليتمكن مكوّن أبعد في الأسفل من قراءتها. شاهده في مثال قابل للتشغيل، ولماذا يضر كلما كبر التطبيق، والحلول بالترتيب الذي تجربها به: التركيب، ثم السياق، ثم مكتبة حالة.
- الخطافات المخصصة في Reactالخطاف المخصص دالة يبدأ اسمها بـ use وتستدعي خطافات أخرى، لتتمكن عدة مكوّنات من إعادة استخدام المنطق ذي الحالة نفسه. ابنِ useToggle وuseLocalStorage وuseDebounce وuseWindowWidth، وتعلّم لماذا يحصل كل استدعاء على حالته الخاصة.
- قواعد الخطافات في Reactللخطافات قاعدتان: استدعِها في المستوى الأعلى من المكوّن، ولا تستدعها أبدًا داخل شروط أو حلقات أو دوال متداخلة، ولا تستدعها إلا من مكوّنات الدوال أو الخطافات المخصصة. تعلّم لماذا تحتاج React إلى ترتيب الاستدعاءات نفسه في كل عرض وكيف تصلح الأخطاء التي تظهر عندما يتغير.
- useIdيُرجع useId معرّفًا فريدًا وثابتًا لكل نسخة من المكوّن، لتشير التسمية والحقل وتلميح aria-describedby بعضها إلى بعض حتى عندما يظهر المكوّن مرات عديدة. تعلّم لماذا ينكسر Math.random والعدّادات مع العرض على الخادم، ولماذا لا يصلح useId لمفاتيح القوائم.
- useSyncExternalStoreيشترك useSyncExternalStore بمكوّن في بيانات تعيش خارج React، مثل وحدة مخزن صغيرة أو واجهة متصفح مثل navigator.onLine، ويعيد عرضه كلما تغيرت تلك البيانات. تعلّم subscribe وgetSnapshot، ولماذا يجب تخزين اللقطة مؤقتًا، وgetServerSnapshot.
العرض والأداء
- إعادة العرض في Reactيُعاد عرض مكوّن React عندما تتغير حالته، أو عندما يُعرض أبوه، أو عندما يتغير سياق يقرؤه. تعلّم الفرق بين العرض والإثبات، وما المقصود حقًا بـ DOM الافتراضي، وكيف توقف مرات العرض التي لا تحتاجها.
- useMemoيخزّن useMemo نتيجة عملية حسابية بين مرات العرض ولا يعيد حسابها إلا عندما تتغير اعتمادياتها. تعلّم الصيغة، وكيف تُبقي كائنًا ثابتًا لابن ملفوف بـ memo، ومتى لا يستحق useMemo العناء.
- useCallbackيُرجع useCallback الدالة نفسها بين مرات العرض حتى تتغير اعتمادياتها. ولا يفيد إلا عندما تُمرَّر تلك الدالة إلى ابن ملفوف بـ memo أو تُستخدم كاعتمادية لتأثير. تعلّم الصيغة، والفرق عن useMemo، والأخطاء التي تتجنبها.
- React.memoيغلّف memo مكوّنًا فتتخطى React إعادة عرضه عندما تكون props الخاصة به متساوية سطحيًا مع المرة السابقة. تعلّم متى يفيد، ولماذا تُبطله الكائنات والدوال الجديدة في props، وما الذي لا يوقفه.
- useTransitionيعلّم useTransition تحديث حالة كغير عاجل، لتتمكن React من إبقاء الصفحة سريعة الاستجابة بينما تعرض الجزء البطيء في الخلفية. تعلّم isPending وstartTransition والانتقالات غير المتزامنة في React 19، ولماذا ليس هذا تأخيرًا (debounce).
- useDeferredValueيعطيك useDeferredValue نسخة من قيمة يُسمح لها بالتأخر أثناء مرات العرض الثقيلة، فيبقى حقل الإدخال سريع الاستجابة بينما تلحق قائمة بطيئة. تعلّم كيف يعمل، والقيمة الابتدائية في React 19، وكيف يقارن بـ useTransition والتأخير (debounce).
- Suspense وlazy في Reactيعرض Suspense بديلًا ما دامت المكوّنات بداخله غير جاهزة، ويحمّل React.lazy كود المكوّن فقط عند عرضه أول مرة. تعلّم تقسيم الكود، والحدود المتداخلة، وSuspense مع use() في React 19، والتعامل مع الأخطاء.
React 19 ومواضيع متقدمة
- React 19أضافت React 19 الإجراءات (Actions) وuseActionState وuseOptimistic وuse وref كـ prop وبيانات المستند الوصفية، وأضافت 19.2 المكوّن Activity والخطاف useEffectEvent. شاهد كل ميزة تعمل، وما الذي حُذف، وكيف تُرقّي.
- useActionStateيغلّف useActionState إجراءً غير متزامن، ويحتفظ بالقيمة التي أرجعها آخر مرة، ويخبرك ما إذا كان ما زال يعمل. تعلّم التوقيع، وإجراءات النماذج، وإرجاع أخطاء التحقق، واستدعاءه خارج نموذج.
- useOptimisticيعرض useOptimistic النتيجة التي تتوقعها بينما ما زال إجراء غير متزامن يعمل، ثم يعود إلى الحالة الحقيقية عندما ينتهي، فيتراجع الطلب الفاشل من تلقاء نفسه. تعلّم الصيغة، وشكل المختزل، ولماذا يجب أن يعمل داخل إجراء.
- الخطاف use في Reactيقرأ use قيمة وعد أو سياق أثناء العرض. مع الوعد يعلّق المكوّن حتى تصل البيانات ويعرض بديل أقرب Suspense. وخلافًا للخطافات الأخرى، يمكن أن يعمل داخل عبارات if والحلقات.
- حدود الأخطاء في Reactحدود الأخطاء مكوّن يلتقط الأخطاء المرمية أثناء عرض المكوّنات بداخله ويعرض بديلًا بدلًا من شاشة فارغة. تعلّم ما تلتقطه، وكيف تكتبها كصنف، وكيف تعيد ضبطها، ومكتبة react-error-boundary.
- Portals في Reactيعرض createPortal جزءًا من مكوّن داخل عقدة DOM مختلفة، مثل document.body، بينما يبقى في المكان نفسه من شجرة React. استخدمه للنوافذ المنبثقة والتلميحات والقوائم التي يجب أن تفلت من overflow hidden وتراكب z-index.
- الوضع الصارم Strict ModeStrictMode مغلّف للتطوير فقط يعرض المكوّنات مرتين، ويشغّل عند التركيب إعداد التأثيرات ثم تنظيفها ثم إعدادها من جديد، ويحذّر من الواجهات المُهملة، فيظهر العرض غير النقي والتنظيف المفقود مبكرًا. ولا يفعل شيئًا في الإنتاج.
- دورة حياة المكون في Reactكل مكوّن React يُركَّب (يظهر)، ويتحدث (يُعرض من جديد)، ويُزال. تعلّم كيف ترتبط كل مرحلة بـ useEffect، وتوابع دورة الحياة في الأصناف وما يقابلها من الخطافات، ومرحلتي العرض والإثبات.
- مكونات الأصناف في Reactمكوّن الصنف صنف JavaScript يرث React.Component ويُرجع JSX من تابع render. تعلّم this.props وthis.state وsetState، وربط معالجات الأحداث، وتوابع دورة الحياة، وPureComponent، وكيف تحوّل صنفًا إلى مكوّن دالة.
المقارنات والمقابلات
- أسئلة مقابلات Reactنحو 30 سؤالًا من أسئلة مقابلات React من المستوى المبتدئ إلى المتقدم، لكل منها إجابة قصيرة يقبلها المقابِل، وكود حي للأسئلة التي يسهل رؤيتها أكثر من قراءتها.
- React vs AngularReact مكتبة واجهات تجمعها مع أدوات أخرى؛ وAngular إطار عمل كامل فيه التوجيه والنماذج وHTTP وحقن الاعتماديات مدمجة. قارن المكوّنات نفسها مكتوبة بالاثنين، جنبًا إلى جنب.
- React vs VueReact وVue كلاهما أداة JavaScript لبناء واجهات المستخدم من مكوّنات. ويختلفان في الترميز (JSX مقابل القوالب)، وفي طريقة الاستجابة للتغييرات (حالة غير قابلة للتعديل مع إعادة العرض مقابل مراجع تفاعلية قابلة للتعديل)، وفي مقدار ما هو رسمي من المنظومة.
- React مع TypeScriptكيف تحدد أنواع تطبيق React بـ TypeScript: props وchildren، وuseState مع الاتحادات وnull، وuseRef لعناصر DOM، ومعالجات الأحداث، والسياق، والمكوّنات العامة (generic)، وprops العناصر الأصلية.
