مقدمة

الدرس 1 من 34 · دورة TanStack Router الكاملة · 2 دقيقة و45 ثانية

الفيديو الأصلي باللغة الإنجليزية. إذا تعذّر تشغيله هنا، شاهده على موقع المؤلف. التفريغ النصي العربي الكامل أدناه.

[00:02] في هذا الدرس نستعرض TanStack Router. إن TanStack Router هو موجّه (router) يمكن

استخدامه لبناء تطبيقات React وSolid. وما يميّز TanStack Router خصوصًا أنه آمنُ الأنواع (type-safe) بالكامل (100%). لذا إذا ألقينا نظرة:

[00:15] حيث يوفّر تقريبًا نفس الميزات (features) التي تجدها في أي موجّه آخر مثل

Next.js أو React Router. فهناك تخطيطات متداخلة (nested layouts) ومجموعات تخطيط (layout groups). كما يوفّر التوجيه المبني على الملفات (file-based routing)، وتحميل البيانات بالتوازي (parallel data loading)،

[00:29] والجلب المسبق (prefetching) وما شابه. مع ذلك، نمتلك دعم TypeScript المُستنتَج

(inferred) بنسبة 100%.

[00:35] كل ما سنقوم به والمتعلق بالتنقّل سيكون آمنًا للأنواع (type-safe) بالكامل (100%).

كما توجد ميزات مثل الذاكرة المؤقتة المدمجة (built-in caching). سنلقي نظرة على ذلك. ويمكنك دمجه مع TanStack Query. كما يوفّر الكثير من الميزات المريحة عند التعامل مع معلمات البحث (search parameters). فيمكننا مثلًا التحقق من معلمات البحث.

[00:47] كما في التحقق من معلمات البحث (search parameters).

[00:56] يمكننا أيضًا جعل معلمات البحث آمنة الأنواع (type-safe) ويمكننا التعامل معها

بسهولة شديدة. وسنستعرض كل ذلك. كما توجد ميزات أخرى مثل السياق (context) حيث يمكن تمرير بعض الحالة (state) التي ستُشارَك عبر مسارات متعددة. يمكن استخدامه في المصادقة (authentication) مثلًا لمشاركة بيانات المصادقة من أجل حماية بعض المسارات. كما توجد ميزات أخرى مثل دوال التحميل (loading functions) أو دوال المُحمِّل (loader functions) التي يمكن استخدامها لتحميل البيانات داخل مساراتنا. ويمكننا أيضًا بثّ البيانات (stream data).

[01:08] يمكننا تمرير بعض السياق، بعضَ الحالة (state) التي ستُشارَك عبر مسارات متعدّدة. يمكن

استخدامه في المصادقة مثلًا، لمشاركة بيانات المصادقة من أجل حماية مسارات معينة. كما توجد ميزات أخرى مثل دوال التحميل (loading

[01:23] يمكننا فعل الكثير. فلنتوقف عن الكلام كثيرًا ولنبدأ. وكل هذه الميزات ستظهر

[01:36] أثناء تقدمنا في الفيديو. لكن ما تحتاج معرفته هو أن TanStack Router ليس إطار عمل

(full stack framework). فهو غير مخصص ليُستخدم كإطار عمل متكامل (full stack framework). غير أنه مصمَّم بحيث يمكن ترقيته إلى إطار عمل متكامل، وفي الواقع فهو يشغّل إطار العمل

[01:52] المتكامل الخاص بـ TanStack وهو TanStack Start الذي هو حاليًا في مرحلة بيتا (beta).

هذا يستخدم React Router للتوجيه، وإذا كنت مهتمًا بتعلم TanStack Start في مرحلة ما، فسيتعين عليك أن تكون مألوفًا مع TanStack Router. لذا قد يكون هذا الفيديو مفيدًا لك.

[02:06] وكذلك هنا، إن كنت مهتمًا، يمكنك إيجاد جدول مقارنة بين مختلف موجّهات React

الشهيرة. فنحن لدينا TanStack Router، ولدينا React Router، ولدينا الموجّه الذي يأتي مع Next.js. يمكنك إلقاء نظرة على ذلك. قد يساعدك في تحديد الموجّه الذي تستخدمه إذا كنت تعمل على مشروع جديد.

[02:20] ومع ذلك، لنبدأ على الفور بإنشاء تطبيق جديد

[02:35] واستخدام TanStack Router داخله.

[02:40] [تصفيق] [موسيقى]