التثبيت (Installation)

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

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

مستودع شيفرة هذا الدرس

الفرع: app-init

[00:00] هيا بنا نثبّت TanStack Router. وللقيام بذلك سأُنشئ مشروع React جديداً، لكن دون استخدام أي إطار عمل (framework)، ودون Next.js أو ما شابه. ما سأفعله هو أنّني

[00:13] أُنشئ مشروع React جديداً مع Vite فقط كأداة تجميع (bundler). يدعم TanStack Router عدّة أدوات تجميع (bundlers)، من بينها Vite الذي سنستخدمه. كما يدعم Webpack وES Build، وربما غيرها أيضاً.

[00:28] لكن سنستخدم Vite لإنشاء مشروع Vite جديداً. دعنا نضعه ربما على سطح المكتب.

[00:35] سأقوم بتشغيل npm create vite@latest. وسنحصل على قائمة خيارات. لذا فلنختر اسمًا. ليكن TanStack Router. ولنختر إطار عمل (framework). بالطبع سنستخدم React. بالمناسبة،

[00:53] كما ذكرنا، يدعم TanStack Router أيضًا Solid، لكن سنستخدم React هنا. فلنختر React. وبالمناسبة، في هذا المكان يمكننا اختيار قالب (template) يشتمل بالفعل على TanStack Router. لكنني

[01:07] لن أفعل ذلك لأنني أريد أن أُريك كيفية تثبيت TanStack Router من الصفر؛ إذا كنت مثلاً تستخدم TanStack Router في مشروع قائم. لذا سأقوم باختيار

[01:18] TypeScript. فلنختر TypeScript هنا، ويجب أن يُنشأ مشروعنا على سطح المكتب. لذا دعنا ننتقل إليه، ثم نشغّل npm install.

[01:29] وكذلك سأفتح هذا المشروع في محرر الشيفرة (code editor) الخاص بي. والآن مشروعي مفتوح في VS Code وقد ثبّتت الاعتماديات (dependencies). لكن الآن لنثبّت TanStack Router. وسأثبّت أيضًا Tailwind من أجل تنسيق سريع مع تقدّم الأمثلة على امتداد الفيديو.

[01:43] لذلك لتثبيت TanStack Router، نحتاج إلى تثبيت هذه الحزم (packages). سأقوم بـ npm install. وكما ترون ها هنا: @tanstack/react-router و @tanstack/react-router-devtools. نحتاج إلى تثبيت هذه الحزم، كما نحتاج إلى Vite plugin ضمن اعتماديات التطوير (dev dependencies). بعد الانتهاء، دعنا نثبّت أيضاً TanStack Router plugin كاعتماديات تطوير (dev dependency).

[01:59] React Router و @tanstack/react-router-devtools. نحتاج إلى تثبيت هذه الحزم، كما نحتاج إلى Vite plugin ضمن اعتماديات التطوير (dev dependencies). بعد الانتهاء، دعنا نثبّت أيضاً TanStack Router plugin كاعتماديات تطوير (dev dependency).

[02:17] لنقشه. ثم بالنسبة إلى Tailwind، سأضيف تثبيتًا إضافيًا هنا، وهو npm install tailwindcss و tailwindcss/vite. هذا كل ما نحتاجه. الآن سندخل إلى Vite config الخاص بنا هنا، و

[02:37] نحتاج إلى إنجاز بعض التعديلات. أولاً، نحتاج إلى استيراد إضافة Tailwind لـ Vite. فلندعم ذلك هنا. كما نحتاج إلى استيراد إضافة TanStack Router لـ Vite، ويمكن إنجاز ذلك by importing tanstackRouter from this import.

[02:54] وكذلك سأُغلق إكمالات Copilot، لأنني أعتقد أنّها ستكون مزعجة لك.

[03:02] بيد أن، ما نحتاج إلى فعله هو ببساطة استخدام هذه الإضافات في مصفوفة plugins لـ TanStack Router. يجب ضبطه قبل React. لذا هنا يمكن وضع TanStack Router هكذا.

[03:17] و يمكننا تمرير خيارات الآن. فلنمرّر فقط الهدف (target) الذي ستكون React. يمكن أن يكون Solid أيضاً. ثم نحتاج إلى إضافة Tailwind plugin لغرض استخدم Tailwind ضمن app. والآن ما الذي نحتاج إلى

[03:33] فعله هو فقط لغرض استخدم Tailwind، دعنا نفتح main styles index.tss هنا and استورد Tailwind هكذا.

[03:43] كذلك سأقوم ربما حذف بعض هذه الأنماط الافتراضية. دعنا حذف الكل لكن ربما احتفظ بـ أنماط الأزرار. على سبيل المثال، دعنا حذف هذا.

[03:57] نص H1 body.

[04:00] فقط حذف هذه واحتفظ بـ الأنماط الجذر، أنماط الأزرار وأنماط الوضع الداكن أو الوضع الفاتح أيضاً. يجب أن يكون تطبيقنا. دعنا جرّب تشغيله بـ npm run dev ودعنا جرّب فتحه في المتصفح. ونحن

[04:18] هناك خلل هنا. يمكن تجاهل هذا حالياً، لكن دعنا الآن نفتح هذا الرابط في المتصفح هكذا. والآن أصبح لدينا هذا التطبيق ويمكننا البدء بالعمل مع TanStack Router. في