بنك منسّق لأسئلة مقابلات الواجهة الأمامية مع إجاباتٍ قويّة موجزة — JavaScript واللغة، وHTML/CSS وسهولة الوصول، والمتصفّح والشبكة، والأداء ومؤشّرات الويب الأساسية، وReact (الخطّافات، العرض، الحالة)، وNext.js (مكوّنات الخادم، العرض، التخزين)، وأسئلة سلوكية وتصميمية — كلٌّ بـ'اعرض الإجابة' تختبر نفسك عليها، إضافةً إلى كيفية التعامل مع المقابلة نفسها.
مقدّمة عملية لـ Next.js وموجّه التطبيق (App Router) مع TypeScript — ما الذي يضيفه إطار React فوق React، والتوجيه القائم على الملفّات بالمجلّدات وpage.tsx، والتخطيطات والمسارات المتداخلة، ومكوّنات الخادم مقابل العميل، وجلب البيانات على الخادم، واستراتيجيات العرض (SSG/SSR/ISR)، والتنقّل بـ next/link وuseRouter، والملفّات الخاصّة (loading وerror وnot-found)، وواجهة Metadata لتحسين محرّكات البحث، ونظرة أولى على أفعال الخادم وnext/image — مع أخطاء شائعة وتمارين عملية.
دليل عملي لجلب البيانات في React مع TypeScript — حالات التحميل/الخطأ/النجاح التي يمرّ بها كل طلب، والجلب في useEffect مع التنظيف وAbortController، وتجنّب تسابق الطلبات، وتنميط الاستجابات، ومعالجة أخطاء HTTP كما يجب، واستخلاص خطّاف useFetch، والتعديلات وإعادة الجلب، ولماذا وُجدت مكتبة مثل TanStack Query (تخزين، إزالة تكرار، إعادة تحقّق) — مع أخطاء شائعة وتمارين عملية.
دليل عملي للتوجيه على جانب العميل في React مع React Router وTypeScript — ما الذي يفعله موجّه SPA، وإعداد المسارات، والتنقّل بـ Link وNavLink، والمسارات المتداخلة والتخطيطات بـ Outlet، ومعاملات المسار الديناميكية بـ useParams، وقراءة وكتابة سلاسل الاستعلام بـ useSearchParams، والتنقّل البرمجيّ بـ useNavigate، وإعادة التوجيه والمسارات المحميّة، ومعالجة 404، والتحميل الكسول للمسارات — مع أخطاء شائعة وتمارين عملية.
دليل عميق وعملي لخطّافات React مع TypeScript — قواعد الخطّافات، وuseState بعمق (التهيئة الكسولة، والتحديثات الدالّية، والحالة كلقطة)، وuseEffect ومصفوفة الاعتماديات (المزامنة مع الأنظمة الخارجية، والتنظيف، ومتى لا تحتاج أثرًا)، وuseRef للقيم وعُقد DOM، وuseMemo وuseCallback، وuseContext للحالة المشتركة، وuseReducer للحالة المعقّدة، وبناء خطّافاتك المخصّصة، والأخطاء الشائعة، مع تمارين عملية وحلولها.
دليل عميق وعملي لتصميم مكوّنات React وتنميط خصائصها بـ TypeScript — الخصائص كعقدٍ للقراءة فقط، وتنميطها بـ type مقابل interface، والقيم الاختيارية والافتراضية، وchildren وReact.ReactNode، وأنماط التركيب (الأغلفة والفتحات والمكوّنات المتخصّصة)، وتمرير الخصائص إلى DOM عبر rest وReact.ComponentProps، وخصائص الأنماط باتحادات مُميَّزة، وتنقيط الخصائص ولماذا يتفوّق التركيب على الضبط، والأخطاء الشائعة، مع تمارين عملية وحلولها.
دليل عملي شامل للنموذج الذهني الذي يحتاجه كل مطوّر واجهات أمامية في React — لماذا وُجدت React، والتفكير التصريحي (الواجهة = دالّة الحالة)، والمكوّنات وJSX، والخصائص المُنمَّطة بـ TypeScript وتدفّق البيانات باتجاه واحد، وعرض القوائم والمفاتيح، والعرض الشرطي، ومعالجة الأحداث، والحالة عبر useState، والتحديثات الثابتة، ونموذج إعادة العرض، والنقاء والتركيب، والأخطاء الشائعة، مع تمارين عملية وحلولها.