إلى أين بعد ذلك

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

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

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

• الـ components والـ props والـ state: كل جزء من Watchlist، من MovieItem إلى App.
• بيئة عمل React 19 وVite: npm create vite@latest، وخادم التطوير، وnpm run build.
• الأحداث والنماذج والـ controlled inputs: نموذج إضافة الأفلام، مع التشذيب والتعطيل والمسح.
• الـ effects بالطريقة الصحيحة: عنوان التبويب وlocalStorage، وكل الأماكن التي لم تستخدم فيها effect.
• تركيب الشاشات من قطع صغيرة: Panel وMovieList والبقية، لكلٍّ منها بضعة props وعمل واضح.
• النشر إلى الإنتاج: deployment على Vercel مع روابط معاينة لكل branch.

اجعل Watchlist ملكك

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

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

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

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

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

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

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