التثبيت (Installation)
الدرس 2 من 21 · دورة TanStack Form الكاملة · 2 دقيقة و29 ثانية
الفيديو الأصلي باللغة الإنجليزية. إذا تعذّر تشغيله هنا، شاهده على موقع المؤلف. التفريغ النصي العربي الكامل أدناه.
[00:04] إذًا في هنا لديّ مشروع React مفتوح، وقد أُنشئ بكل بساطة باستخدام Vite، وقد ثُبِّت فيه shadcn أيضًا. لذا يمكنك استنساخ المستودع الذي سأوفّره إن شئت أن تُتابع معي، أو ربما أن تملك
[00:15] مشروع React خاصًا بك تحتاج إلى العمل عليه. لا يهم ذلك. وإذا شئت أيضًا أن تفعل هذا من الصفر، فيمكنك هنا أن تجد تعليمات في موقع shadcn عن كيفية إنشاء مشروع React مع Vite مع shadcn كذلك.
[00:29] هذا تقريبًا ما فعلتُه لإنشاء هذا المشروع، وأنت أيضًا لست مضطرًا لاستخدام shadcn، فاستخدام CSS فقط، لأنّنا سنرى لاحقًا كيفية دمج مكتبات المكوّنات (components) مثل هذه مع TanStack Form، ولكن ربما أنت
[00:43] تستخدم أيّ مكتبة مكوّنات أخرى، فهذا سيعمل كذلك أيضًا، ولكن في هنا لديّ هذا المكوّن app الذي يُعرض في صفحتنا الرئيسية هكذا، فلنبدأ العمل في هذا المكوّن، فلنثبّت أولًا TanStack Form، لذا نحن
[01:00] نحتاج إلى تثبيت بضعة حزم (packages)، فأولًا TanStack Form نفسه، وهو npm install @tanstack/react-form، أو بالطبع قد تستخدم شيئًا آخر غير npm. أنا أستخدم npm لذا سأقوم
[01:15] بتثبيته، وكذلك يزوّدنا TanStack Form ببعض أدوات التطوير (dev tools) التي يمكننا استخدامها من أجل تصيّد الأخطاء (debugging) في نموذجنا وما إلى ذلك. لذا يمكننا تثبيتها أيضًا بتثبيت @tanstack/react-devtools، وبالإضافة إلى ذلك يلزمنا أيضًا
[01:33] تثبيت @tanstack/react-form-devtools.
[01:36] وبعد إنجاز هذا يمكننا كذلك تثبيت @tanstack/react-form-devtools هكذا.
[01:44] والآن من أجل استخدام أدوات التطوير هذه يمكننا الذهاب إلى هنا، إلى ملف main.tsx لدينا.
[01:50] قد يكون هذا مختلفًا عندك إن أنشأت مشروعك بنفسك، غير أنّه في هنا عندما نصيّر مكوّن app هذا نحتاج أيضًا إلى تصيير TanStackDevtools. إذًا في هنا، TanStackDevtools، ثم نحتاج إلى تمرير إضافة
[02:05] النموذج (form plugin). إذًا في هنا، ضمن plugins، نحتاج إلى تمرير FormDevtoolsPlugin من @tanstack/react-form-devtools هكذا.
[02:15] ونحتاج إلى استدعاء هذه الدالة.
[02:20] وبتوفّر هذا ينبغي أن يكون لدينا هذه الأيقونة هنا التي ستعرض أدوات التطوير هذه. غير أنّه يمكننا الآن أن نبدأ وإنشاء نموذجنا الأول. إذًا