خشبة منهج React — المسرح الحي · ١٣ إقليم · بلا مهلة الستار مرفوع
١٣ إقليماً بلا مهلة من الصفر بالكامل TypeScript

React — المسرح الذي يُعيد تمثيل نفسه

منهجٌ مكتفٍ ذاتياً، تدرسه وحدك. مستقلٌّ تماماً — لا يفترض أنك درست React من قبل، ولا يبني على أي منهجٍ آخر. من أول سطرٍ فيه نبني الألم الذي وُجد React ليحلّه، بأيدينا، قبل أن نكتب أي JSX.

لمن هذا المنهج

قبل أن تبدأ

تكتب TypeScript بفهمٍ — الأنواع، الواجهات، الجينيريكس. هذا مفترَضٌ ولا يُعاد شرحه هنا. لم تلمس React من قبل، أو لمسته سطحياً ولا تثق بما تعرفه؟ كلا الحالتين تناسب هذا المنهج — لا يفترض شيئاً، ويشتقّ كل مفهومٍ من مشكلةٍ حقيقية قبل حلّها.

الفكرة المركزية: المسرح الحي

React يحلّ مشكلةً واحدة: شاشةٌ يجب أن تبقى مطابقةً لبياناتٍ تتغيّر باستمرار، بلا أن تُمسك أنت بكل خيطٍ فيها يدوياً. أفضل استعارةٍ لهذا مسرحٌ حيّ:

المكوّن
ممثلٌ يعرف دوره (دالّة)
الـprops = السيناريو الذي يُسلَّم له (يقرؤه، لا يُعدّله)
الحالة
دفترُ ملاحظات الممثل الخاص (يملكه، وتعديله يستدعي عرضاً جديداً)
الرسم
عرضٌ واحد — لقطةٌ كاملة للمسرحية في تلك اللحظة بالذات
التصالح
ناقدٌ يقارن هذا العرض بالسابق، ولا يبني المسرح من الصفر —
يُحرّك فقط ما تغيّر فعلاً في الديكور (DOM)
الـHooks
طقوسٌ يمارسها الممثل خلف الكواليس بنفس الترتيب في كل عرض —
اطلب منه يغيّر الترتيب، ويختلط عليه من هو

هذه العدسة تلاحقك في المنهج كله. حين تسأل «ليش قواعد الهوكس صارمة هالقد؟» أو «ليش Context يُعيد رسم كل شي حتى لو يهمّه حرفٌ واحد؟» — الجواب دائماً في هذه الاستعارة، لأنها ليست زخرفاً؛ هي كيف React مبنيٌّ فعلاً من الداخل.

القرارات التي تشكّل عمق هذا المنهج

القرارالاختيارالأثر
نقطة البدايةصفرٌ مطلق — لا افتراض React سابقتبني الألم الأمري بيدك قبل أي JSX
الدواخل (fiber/hooks)نغوص فيهاقواعد الهوكس تُشتقّ من الآلية، لا تُحفظ كطقس
إدارة الحالةContext + hooks فقطتفهم حدود الأداة بدل حفظ بديلٍ جاهز
نظام المكوّناتheadless + variant API من الجذرتبني ورشة أزياء مصغّرة قبل أن تصدّق أنها سحر
التوجيهموجّهٌ يدوي أولاً، ثم مكتبة حقيقيةنفس نمط «الألم قبل الحل» على مشكلة جديدة
الأدواتESLint + Prettier من ملفٍّ فارغتفهم كل قاعدة قبل أن تفعّلها

الخريطة (مكشوفةٌ جزئياً)

ثلاثة عشر إقليماً. تبدأ من عبثٍ يدويٍّ بالـDOM، وتنتهي عند مشروعٍ صغيرٍ متكامل تُشغّله بأدواتك الخاصة. كل إقليم ينتهي ببذرة غموضٍ عن القادم — لا تُحرَق المفاجأة هنا.

(٠ الستار) → (١ الممثل/السيناريو) → (٢ دفتر الممثل: useState) │ (٣ خلف الكواليس: useEffect) │ (٤ فعلٌ أم تزامن؟) ─┬─ (٥ أدواتٌ إضافية) ─┬─ (٦ روتينات مخصّصة) └──────────┬──────────┘ (٧ مكبّر الصوت: Context) │ (٨ خريطة المسرح) ─┬─ (٩ ورشة الأزياء) ─┬─ (١٠ الجولة والحارس) └─────────┬──────────┘ (١١ تفتيش ما قبل العرض) │ (١٢ ليلة الافتتاح)

الأقاليم

الإقليم ٠٠
قبل أن يُرفع الستار
كيف تُبقي شاشةً مطابقةً لبياناتٍ تتغيّر، بلا فوضى؟
13 إقليمافتح
الإقليم ٠١
الممثل والسيناريو
ما الذي يملكه المكوّن، وما الذي يُسلَّم له فقط؟
13 إقليمافتح
الإقليم ٠٢
دفتر الممثل
الدالّة تُعاد من الصفر كل عرض — فأين "تعيش" الحالة؟
13 إقليمافتح
الإقليم ٠٣
طاقم خلف الكواليس
متى ينفّذ React كوداً "بعد" الرسم، ولماذا يشغّله مرّتين أحياناً؟
13 إقليمافتح
الإقليم ٠٤
فعلٌ أم تزامن؟
نقرة زر ليست كتغيّر بيانات — فلماذا نعاملهما بنفس الأداة؟
13 إقليمافتح
الإقليم ٠٥
أدواتٌ في جيب الممثل
ماذا لو أردت شيئاً "يتذكّر" بلا أن يُعيد الرسم؟
13 إقليمافتح
الإقليم ٠٦
روتينات مخصّصة
كيف تُغلِّف منطقاً كاملاً في اسمٍ واحدٍ قابلٍ لإعادة الاستخدام؟
13 إقليمافتح
الإقليم ٠٧
مكبّر الصوت العام
كيف يعرف مكوّنٌ بعيدٌ جداً بشيءٍ تغيّر بدون تمريره يدوياً عبر عشرة آباء؟
13 إقليمافتح
الإقليم ٠٨
خريطة المسرح
كيف تُقسّم مشروعاً كبيراً بين عدة أشخاص بلا تصادم؟
13 إقليمافتح
الإقليم ٠٩
ورشة الأزياء
كيف تضمن أن كل زرٍّ في التطبيق "يتصرّف" صح تلقائياً؟
13 إقليمافتح
الإقليم ١٠
خارطة الجولة والحارس
كيف تجعل رابط المتصفح نفسه "حالة" مشتركة قابلة للحفظ والمشاركة؟
13 إقليمافتح
الإقليم ١١
تفتيش ما قبل العرض
لماذا فحص الأنواع وحده لا يكفي؟ ماذا يفوته دائماً؟
13 إقليمافتح
الإقليم ١٢
ليلة الافتتاح
ماذا يحدث لو تصادفت كل الأقاليم مرّة واحدة في مشروعٍ واحد؟
13 إقليمافتح
ملحق
الشجرة + النماذج + المرجع
تُقرأ بعد إتمام الإقليم ١٢ — ما يبقى بعد أن تنسى التفاصيل.
appendixافتح

كيف تقرأ هذا المنهج

  1. النبذة — سطورٌ تضعك في السياق.
  2. اللغز المستفزّ — المشكلة قبل الحل. اقعد معها.
  3. ليش ثم كيف — الدافع والمقايضات أولاً، ثم الآلية الداخلية الفعلية.
  4. اللغز/البناء من الصفر — تبني اللبنة بيدك بقيود تمنع الحلول الجاهزة.
  5. الخلاصة — أين تتّصل العقدة الجديدة بالشجرة.
  6. الوصلة بمشروعك — فقرةٌ قصيرة للسياق فقط، لا واجب.
القاعدة الذهبية

لا تنزل لإقليمٍ قبل أن تكون قد بنيتَ لغز الذي قبله بيدك، لا قرأته فقط.