{"id":"l-rf-4-4","courseId":"react-fundamentals","lang":"ar","kind":"wrapup","summary":"راجع ما صار بإمكانك بناؤه باستخدام React، ووسّع Watchlist بتحدّيات ملموسة، واختر الموضوعات التالية التي تتعلّمها بترتيب يبني على هذه الدورة.","html":"

قبل ثمانية عشر درسًا كان لديك مجلد فارغ. والآن لديك تطبيق منشور مبني من components صغيرة، فيه state يعيش في مكان واحد، وقيم مشتقّة لا يمكن أن تنحرف، ونموذج بتحقّق حقيقي من المدخلات، وeffect يحفظ البيانات وينظّف خلفه، وأنماط لم تضطر إلى كتابتها يدويًا، ورابط. والأهم من ذلك أنك تعرف لماذا اتُّخذ كل قرار من هذه القرارات، وهذا ما يتيح لك اتّخاذها من جديد في تطبيق مختلف.

\n

ما الذي تستطيع فعله الآن

\n

عُد إلى الوعود الستة في صفحة الدورة، وطابق كل واحد منها مع شيء بنيته:

\n\n

اجعل Watchlist ملكك

\n

أسرع طريقة لترسيخ ما تعلّمته أن تواصل بناء التطبيق نفسه، من دون درس يرشدك. كل واحد من هذه لا يستخدم إلا ما تعلّمته:

\n
    \n
  1. الترتيب: قائمة منسدلة لـ «Newest first» و«Title A–Z». قطعة state جديدة واحدة، وقائمة مشتقّة واحدة.
    2. \n
  2. تعديل العنوان: انقر مرتين على عنوان ليتحوّل إلى حقل؛ Enter يحفظ، وEscape يلغي.
    3. \n
  3. البحث: حقل نصي يصفّي حسب العنوان أثناء الكتابة، مع فلتر الحالة معًا.
    4. \n
  4. التراجع عن الحذف: احتفظ بآخر فيلم محذوف واعرض زر «Undo» لبضع ثوانٍ. ستحتاج إلى مؤقّت داخل effect، مع دالة تنظيف.
    5. \n
  5. اختصار لوحة المفاتيح: اضغط «/» لنقل التركيز إلى حقل الإضافة، مع مستمع على window داخل effect، وref.
    6. \n
\n

ارفع كل ميزة على branch خاص بها، وافحص رابط المعاينة قبل الـ merge، تمامًا كما يفعل فريق حقيقي.

\n

ما الذي تتعلّمه بعد ذلك

\n

ترتيب يبني على هذه الدورة:

\n
    \n
  1. TypeScript. إضافة الأنواع إلى الـ props والـ state تلتقط فئة كاملة من الأخطاء قبل أن تشغّل أي شيء، ومعظم إعلانات وظائف React تتوقّعها. ابدأ مشروعًا بـ --template react-ts، أو حوّل Watchlist ملفًا ملفًا. ودورة أنماط TypeScript المتقدّمة تذهب أبعد بكثير حين ترتاح معها.
    2. \n
  2. الاختبارات. يتيح لك Vitest مع React Testing Library رسم component، والنقر عليه كما يفعل المستخدم، والتحقّق من النتيجة. والـ components الصغيرة لديك سهلة الاختبار أصلًا. راجع دورة اختبار تطبيقات JavaScript.
    3. \n
  3. مزيد من الـ hooks. useRef للوصول إلى الـ DOM ولقيم لا تُطلق render، وuseReducer حين يكبر منطق التحديث، وuseContext للبيانات التي تحتاجها components كثيرة. أمّا React Compiler، وهو خطوة بناء اختيارية، فيتولّى معظم الـ memoization، فتعلّم useMemo وmemo لكن لا تنثرهما في كل مكان.
    4. \n
  4. جلب البيانات. التطبيقات الحقيقية تحمّل البيانات من الخوادم. الجلب داخل effect يصلح للحالات البسيطة إن تعاملت مع حالات السباق؛ وفي ما هو أكثر من ذلك، استخدم TanStack Query، التي تتولّى عنك التخزين المؤقّت وحالات التحميل والأخطاء.
    5. \n
  5. التوجيه وأطر العمل. لعدّة صفحات، أضف React Router. وللـ server rendering وتحميل البيانات وReact Server Components، استخدم إطار عمل مثل Next.js أو وضع إطار العمل في React Router، كما يوصي توثيق React للتطبيقات الجديدة الكاملة.
    6. \n
\n\n

جئت إلى هنا لتبني واجهات تفاعلية باستخدام React. وقد بنيت واحدة ونشرتها. واصل البناء.

\n","toc":[{"id":"sec-1","text":"ما الذي تستطيع فعله الآن","level":2},{"id":"sec-2","text":"اجعل Watchlist ملكك","level":2},{"id":"sec-3","text":"ما الذي تتعلّمه بعد ذلك","level":2}],"takeaways":["الـ components والـ props والـ state والأحداث والـ effects هي جوهر React؛ وكل ما عداها يُبنى فوقها.","توسيع مشروعك الخاص بميزات جديدة هو أسرع طريقة لترسيخ هذه الدورة.","TypeScript والاختبارات هما المهارتان اللتان تغيّران أكثر من غيرهما نظرة أصحاب العمل إلى ملف أعمال مطوّر React مبتدئ.","لجلب البيانات وللتطبيقات متعدّدة الصفحات، استعن بأدوات راسخة مثل TanStack Query أو React Router أو إطار عمل، بدل أن تبني أدواتك الخاصة."],"further":[{"title":"React reference overview","url":"https://react.dev/reference/react"},{"title":"Creating a React App (frameworks)","url":"https://react.dev/learn/creating-a-react-app"},{"title":"React Compiler","url":"https://react.dev/learn/react-compiler"},{"title":"Getting Started with Vitest","url":"https://vitest.dev/guide/"}],"quiz":[{"q":"

تريد إضافة خيار «الترتيب حسب السنة» إلى Watchlist. بناءً على هذه الدورة، ما القرار التصميمي الأول الصحيح؟

","options":[{"text":"خزّن الترتيب المختار في الـ state، واحسب نسخة مرتّبة من الأفلام أثناء الـ render.","why":"صحيح. الترتيب المختار state حقيقي؛ أمّا القائمة المرتّبة فمشتقّة من الأفلام والترتيب، فلا ينبغي تخزينها."},{"text":"خزّن نسخة مرتّبة من الأفلام في الـ state وحدّثها بـ effect.","why":"هذا يكرّر قائمة الأفلام ويزامنها بـ effect، وهو بالضبط النمط الذي علّمتك الدورة تجنّبه."},{"text":"رتّب مصفوفة الأفلام في مكانها بـ sort قبل الـ render.","why":"الترتيب في المكان يعدّل الـ state. استخدم toSorted أو رتّب نسخة."}],"answer":0},{"q":"

يطلب إعلان وظيفة «React وTypeScript والاختبارات». أيّ خطوة تالية تضيف أكثر إلى مشروع Watchlist في ملف أعمالك؟

","options":[{"text":"إعادة كتابته بالـ class components لإظهار تنوّع خبرتك.","why":"الـ class components إرث قديم. وعرضها يوحي بمعرفة متقادمة بدل التنوّع."},{"text":"إضافة مزيد من مكتبات الحركة.","why":"اللمسات الجمالية مفيدة، لكنها لا تعالج المهارات التي يذكرها الإعلان."},{"text":"تحويله إلى TypeScript وإضافة بعض اختبارات الـ components باستخدام Vitest وReact Testing Library.","why":"صحيح. الـ props ذات الأنواع والاختبارات التي تمرّ بمسارات حقيقية هي ما يبحث عنه المراجعون في مشروع React لمطوّر مبتدئ."},{"text":"نقل كل الـ state إلى مكتبة store عامة.","why":"لا يحتاج Watchlist إلى store عام، وإضافته بلا سبب توحي بمعمارية منسوخة بلا فهم."}],"answer":2},{"q":"

فعّل فريقك React Compiler. ما الذي يتغيّر في الكود الذي تكتبه؟

","options":[{"text":"يجب أن تغلّف كل component بـ memo حتى يعمل المترجم.","why":"يقوم المترجم بهذا النوع من الـ memoization نيابةً عنك؛ وإضافته يدويًا هو بالضبط ما يجعله غير ضروري."},{"text":"تواصل كتابة components عادية تتبع قواعد React، ويضيف المترجم الـ memoization وقت البناء.","why":"صحيح. إنه خطوة بناء اختيارية. وما يعتمد عليه هو الـ components النقية والاستخدام الصحيح للـ hooks، وهو ما تمارسه أصلًا."},{"text":"لم يعد مسموحًا بالـ effects.","why":"الـ effects ما زالت موجودة، وما زالت للتزامن مع الأنظمة الخارجية. المترجم لا يزيل أي hook."}],"answer":1}],"exercise":{"kind":"choice","multiple":true,"options":["fetch-in-render","effect-no-deps","effect-ignore-flag","tanstack-query"],"correct":["effect-ignore-flag","tanstack-query"],"title":"جلب الملصقات بالطريقة الصحيحة","prompt":"

أول ميزة توسيعية لك: حين تفتح تفاصيل فيلم، يجلب Watchlist رابط ملصقه من API للأفلام، باستخدام عنوان الفيلم المحدَّد. ويستطيع المستخدم التنقّل بالنقر بسرعة من فيلم إلى آخر.

\n

اختر كل نهج سيعمل بشكل صحيح.

\n","hints":["كل ما في جسم الـ component يُنفَّذ في كل render.","إذا بدّل المستخدم الأفلام بسرعة، فسيكون هناك طلبان قيد التنفيذ. أيّهما يجب أن يفوز؟"],"explanation":"

الجلب تزامن مع نظام خارجي، لذا فمكان النسخة المكتوبة يدويًا هو effect مرتبط بالعنوان، مع دالة تنظيف تعلّم الطلب القديم على أنه منتهي الصلاحية. وإلا فقد تصل استجابة بطيئة للفيلم السابق أخيرًا وتكتب فوق الملصق. ومكتبة جلب بيانات مثل TanStack Query تتولّى ذلك، إضافةً إلى التخزين المؤقّت وحالات التحميل والأخطاء، ولهذا تستخدم معظم المشاريع الحقيقية واحدة. أمّا الجلب أثناء الـ render أو داخل effect بلا مصفوفة اعتماديات فيرسل طلبًا في كل render، وضبط الـ state من الاستجابة يُطلق render آخر وطلبًا آخر، ولا شيء يمنع استجابة أقدم من أن تفوز.

\n","checkLabels":{},"optionText":{"fetch-in-render":{"text":"استدعِ fetch في أعلى جسم الـ component، وsetPoster حين تكتمل.","why":"الجسم يُنفَّذ في كل render، فيرسل كل render (بما فيه الـ render الإضافي في StrictMode) طلبًا، وكل استجابة تضبط الـ state تسبّب render آخر وطلبًا آخر. يجب أن يبقى الـ render نقيًا."},"effect-no-deps":{"text":"اجلب داخل useEffect(() => { … }) بلا مصفوفة اعتماديات.","why":"من دون مصفوفة يعمل الـ effect بعد كل render، فكل استجابة تضبط الـ state تُطلق render آخر وطلبًا آخر، ولا شيء يمنع استجابة قديمة من الكتابة فوق الملصق الحالي."},"effect-ignore-flag":{"text":"اجلب داخل useEffect(…, [title])، مع دالة تنظيف تضبط ignore = true حتى لا تُحفظ استجابة قديمة.","why":"صحيح. يعيد الجلب فقط حين يتغيّر العنوان، ودالة التنظيف تمنع استجابة أقدم وأبطأ من الكتابة فوق الملصق الحالي."},"tanstack-query":{"text":"استخدم useQuery من TanStack Query مع العنوان داخل مفتاح الاستعلام.","why":"صحيح. تتتبّع المكتبة الطلبات لكل مفتاح، وتتجاهل القديمة منها، وتضيف التخزين المؤقّت وحالات التحميل والأخطاء نيابةً عنك."}}},"words":533,"readMinutes":3}