React
ابنِ واجهات تفاعلية من مكوّنات قابلة لإعادة الاستخدام
JSX والمكوّنات والخصائص (props)، الحالة (state) والأحداث، الخطافات مثل useEffect وuseContext، والنماذج والقوائم — مع تشغيل كل مثال مباشرة.
- عدد الدروس: 28
- عدد الفصول: 4
- بالعربية والإنجليزية
تقدّمك
محتوى التوثيق
الدروس مرتّبة من الأساس إلى المتقدّم. اقرأها بالترتيب أو اقفز إلى ما تحتاجه.
الفصل 1
البداية
- 1مقدمة إلى ReactReact مكتبة JavaScript لبناء واجهات المستخدم من مكوّنات صغيرة قابلة لإعادة الاستخدام. تعرّف على أسلوبها التصريحي، وDOM الافتراضي، وتطبيقات الصفحة الواحدة، وكيف تشغّل أمثلتها هنا مباشرة.
- 2إنشاء مشروع React باستخدام Viteأنشئ مشروع React حقيقيًا على جهازك باستخدام Vite: ثبّت Node.js، ونفّذ الأمر npm create vite@latest، وتعرّف على ملفات المشروع، ثم شغّل خادم التطوير.
- 3أول مكوّن لكاكتب أول مكوّن React: دالة JavaScript تُرجع JSX. تعرّف على قاعدة تسمية المكوّنات، وكيف تستخدم مكوّنًا داخل آخر، وكيف تُصدَّر المكوّنات وتُستورد في المشاريع الحقيقية.
- 4صيغة JSXتتيح لك JSX كتابة وسوم تشبه HTML داخل JavaScript. تعلّم قواعدها: عنصر جذر واحد، وإغلاق كل وسم، وclassName، وأسماء الخصائص بأسلوب camelCase، وإدراج تعبيرات JavaScript بين الأقواس المعقوصة {}.
- 5عرض التطبيق (Rendering)تعرّف على كيفية ظهور تطبيق React في الصفحة: تربط createRoot() مكتبة React بعنصر HTML، وتعرض render() مكوّناتك، ويساعدك StrictMode على اكتشاف الأخطاء أثناء التطوير. واكتشف كيف تحدّث React ما تغيّر فقط.
الفصل 2
المكوّنات
- 6المكوّنات والتركيبالمكوّنات هي حجر البناء في كل تطبيق React. تعرّف على صيغتي كتابة المكوّنات، وكيف تبني صفحة كاملة بتركيب مكوّنات صغيرة، ومتى تقسّم الواجهة إلى مكوّنات، ولماذا يجب أن تكون المكوّنات نقية.
- 7الخصائص (Props)تتيح لك الخصائص (Props) تمرير البيانات من المكوّن الأب إلى المكوّن الابن، تمامًا كسمات HTML. تعلّم كيف تمرّرها وتقرؤها، وكيف تستخدم التفكيك والقيم الافتراضية، ولماذا تكون الخصائص للقراءة فقط.
- 8الخاصية childrenكل ما تضعه بين وسمي فتح المكوّن وإغلاقه يصل إليه في خاصية خاصة اسمها children. استخدمها لبناء مكوّنات تغليف مرنة مثل البطاقات والتنبيهات والنوافذ وتخطيطات الصفحات.
- 9العرض الشرطياعرض واجهة مختلفة بحسب الشروط. تعلّم if مع الإرجاع المبكر، وعامل الشرط الثلاثي ? :، والعامل المنطقي &&، وإرجاع null، وكيف تتجنب خطأ ظهور الرقم 0 الشهير.
- 10القوائم والمفاتيح (Keys)اعرض قوائم البيانات باستخدام دالة المصفوفات map()، ورشّحها باستخدام filter()، وأعطِ كل عنصر مفتاحًا key فريدًا وثابتًا لتتعرف React عليه. وشاهد بعينك ما الذي يحدث عند استخدام رقم الترتيب كمفتاح.
- 11تنسيق المكوّناتنسّق مكوّنات React باستخدام كائنات الأنماط المضمّنة، وأصناف CSS عبر className، ووحدات CSS (CSS Modules) التي تجعل أسماء الأصناف خاصة بكل مكوّن. وتعلّم الأنماط الشرطية ومتى تختار كل طريقة.
- 12التعامل مع الأحداثاستجب للنقرات والكتابة وإرسال النماذج باستخدام معالجات الأحداث. تعلّم كيف تمرّر الدالة دون استدعائها، وكيف تمرّر المعاملات، وتستخدم كائن الحدث، وتمنع السلوك الافتراضي، وتوقف انتشار الحدث، وتمرّر المعالجات كخصائص.
الفصل 3
الحالة والخطافات
- 13الحالة باستخدام useStateالحالة (State) هي ذاكرة المكوّن: بيانات تتغير مع الوقت فتتحدث الشاشة معها. تعلّم الخطاف useState، ولماذا لا تكفي المتغيرات العادية، ومعنى أن الحالة لقطة ثابتة، ودوال التحديث، وكيف تحدّث الكائنات والمصفوفات دون تعديلها مباشرة.
- 14النماذج والحقول المتحكَّم بهاابنِ النماذج بأسلوب React باستخدام الحقول المتحكَّم بها: يعرض الحقل القيمة المخزنة في الحالة، وكل تغيير فيه يحدّث الحالة. تعامل مع النصوص والقوائم المنسدلة ومربعات الاختيار، وأدِر حقولًا كثيرة بكائن واحد، وتحقق من البيانات قبل الإرسال.
- 15رفع الحالة (Lifting State Up)عندما يحتاج مكوّنان إلى البيانات نفسها، انقل الحالة إلى أقرب مكوّن أب مشترك بينهما، ثم مرّرها إليهما عبر الخصائص. تعلّم هذا النمط، ومبدأ المصدر الوحيد للحقيقة، وكيف يحدّث الابن حالة الأب عبر دوال الاستدعاء.
- 16التأثيرات باستخدام useEffectتتيح التأثيرات (Effects) للمكوّن أن يتزامن مع أشياء خارج React: المؤقتات، ونافذة المتصفح، والاشتراكات، وطلبات الشبكة. تعلّم متى تعمل التأثيرات، ومصفوفة الاعتماديات، ودوال التنظيف، والأخطاء الشائعة التي يجب تجنّبها.
- 17المراجع باستخدام useRefيعطيك useRef صندوقًا يتذكر قيمة بين مرات العرض دون أن يسبب إعادة العرض. استخدمه للوصول إلى عناصر الصفحة مباشرة، كالتركيز على حقل إدخال، ولتخزين قيم لا تظهر على الشاشة مثل معرّف المؤقت.
- 18السياق باستخدام useContextيتيح السياق (Context) للمكوّن الأب أن يشارك بيانات مع كل المكوّنات التي تحته مهما كان عمقها، دون تمرير الخصائص عبر كل طبقة. تعلّم createContext والموفّر (Provider) وuseContext، ومتى يكون السياق هو الأداة المناسبة.
- 19إدارة الحالة باستخدام useReducerعندما يكبر منطق الحالة انقله إلى دالة اختزال (Reducer): دالة نقية تستقبل الحالة الحالية وإجراءً، وتُرجع الحالة الجديدة. تعلّم useReducer وdispatch وكائنات الإجراءات، ومتى تختاره بدلًا من useState.
- 20الخطافات المخصصة (Custom Hooks)تتيح لك الخطافات المخصصة نقل المنطق الذي يستخدم الحالة والتأثيرات إلى دوال قابلة لإعادة الاستخدام تبدأ أسماؤها بالكلمة use. ابنِ useToggle وuseWindowWidth وuseCounter، وتعرّف على قواعدها، وعلى خطاف useLocalStorage للمشاريع الحقيقية.
- 21useMemo وuseCallbackيتذكر useMemo نتيجة عملية حسابية مكلفة، ويتذكر useCallback دالة بين مرات العرض. تعلّم كيف يعملان مع memo، وكيف ترى أثرهما بعينك، ولماذا لا تستخدمهما إلا عندما يكون لهما أثر حقيقي.
- 22جلب البيانات من الخادمحمّل البيانات من الخادم باستخدام useEffect، وتعامل دائمًا مع حالاتها الثلاث: التحميل والنجاح والخطأ. تدرّب بواجهة API محاكاة مبنية على Promise وsetTimeout، ثم شاهد النسخة الحقيقية باستخدام fetch، وتعرّف على مشكلة تسابق الطلبات.
الفصل 4
بناء التطبيقات
- 23التوجيه باستخدام React Routerأضف صفحات متعددة إلى تطبيق الصفحة الواحدة باستخدام React Router: ثبّت react-router-dom، وعرّف المسارات، وتنقّل بالمكوّنين Link وNavLink، واقرأ معاملات الرابط بـ useParams، وانتقل برمجيًا بـ useNavigate، وابنِ تخطيطات متداخلة بـ Outlet.
- 24تنظيم مشروع Reactنظّم مشروع React الذي يكبر يومًا بعد يوم ليبقى سهل التصفح: مجلدات للمكوّنات والصفحات والخطافات والسياق والخدمات، وهيكل مبني على الميزات للتطبيقات الكبيرة، وقواعد التسمية، والاختصارات ومتغيرات البيئة في Vite.
- 25React مع TypeScriptتضيف TypeScript الأنواع إلى كود React، فتكتشف الأخطاء أثناء الكتابة قبل التشغيل. أنشئ مشروع React وTypeScript باستخدام Vite، ثم حدّد أنواع الخصائص والأبناء والحالة والأحداث والمراجع ودوال الاختزال والمكوّنات العامة في ملفات .tsx.
- 26نصائح لتحسين الأداءحافظ على سرعة تطبيقات React: افهم أسباب إعادة العرض، وأبقِ الحالة قريبة من مكان استخدامها، ولا تخزّن ما يمكن حسابه، وحافظ على استجابة الواجهة بـ useDeferredValue وuseTransition، وقسّم الكود بـ lazy وSuspense، وقِس قبل أن تحسّن.
- 27مشروع: تطبيق قائمة المهاماجمع كل ما تعلمته وابنِ تطبيق مهام كاملًا: أضف المهام، وعلّمها كمنجزة، وعدّلها، واحذفها، ورشّحها، واعرض عدد المتبقي منها، وامسح المنجز. ثم تعرّف على تقسيمه إلى ملفات وحفظ المهام في مشروع حقيقي.
- 28الخطوات التالية بعد Reactأتقنت أساسيات React. راجع ما تعلمته، ثم تعرّف على خارطة طريقك القادمة: TypeScript وNext.js ومكتبات جلب البيانات وإدارة الحالة والتنسيق والاختبار والنشر، مع أفكار لمشاريع تضيفها إلى ملف أعمالك.