مقدمة

الدرس 1 من 21 · دورة TanStack Form الكاملة · 2 دقيقة و44 ثانية

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

[00:02] اليوم سنلقي نظرةً على TanStack Form الذي هو مكتبة TanStack لإدارة الاستمارات (forms). فـ TanStack Form يوفّر نهجًا قويًّا ومرنًا لإدارة الاستمارات. وهو آمنُ الأنواع (type-safe) تمامًا، ويمكنك استخدامه

[00:13] مع أيّ مكتبة مكوّنات (component library)، ويمكنك أيضًا استخدامه مع أيّ إطار عمل (framework). فهو إذن مرنٌ إلى حدٍّ كبير. ففي الواقع، إذا ألقيتَ نظرةً هنا على الوثائق (documentation)، فستلاحظ أنه لا يدعم React فحسب، بل ستجد عددًا كثيرًا من إطارات العمل التي

[00:26] يدعمها هنا. في هذا الفيديو سنستخدم React، لأنّه ما يألفه معظمكم على الأرجح. غير أنّه يمكنك استخدامه مع أيٍّ من هذه المكتبات كذلك. فـ TanStack Form يزوّدنا بواجهاتٍ برمجية (APIs)

[00:39] للقيام بأشياء مثل — ربّما — التحقّق من الصحة (validation)، ومعالجة الأخطاء (error handling)، وما إلى ذلك. غير أنّ هذه الواجهات البرمجية مرنةٌ إلى حدٍّ كبير. فيمكننا — على سبيل المثال — أن نختار متى نُجري التحقّق من الصحة بالضبط: ربّما عند الإرسال أي onSubmit، وعند التغيير أي onChange، وعند فقدان التركيز أي onBlur، وما شابه ذلك. ولدينا أيضًا

[00:53] مرونةٌ في عرض مكوّنات واجهة المستخدم (UI components) لدينا، وحقول الإدخال (inputs) وما شابه ذلك، باستخدام هذه الواجهات البرمجية. فلنلقِ نظرةً هنا على مثالٍ سريعٍ جدًا قبل أن نتعمّق أكثر في TanStack Form. فمثلًا، هنا لَدَينا استمارة. نُعرِّف استمارةً

[01:07] باستخدام خُطّاف useForm هذا. لدينا قيمنا الافتراضية (default values)، ولدينا دالةُ ردّ نداء (callback) للإرسال أي onSubmit، وعندما نعرض استمارتنا فنحن ببساطةٍ نستخدم بعضَ المكوّنات (components) داخل هذه الاستمارة التي ننشئها هنا، وفي هذه المكوّنات نُحدِّد كيفية

[01:21] التحقّق من هذه الاستمارة، وما إلى ذلك. فمثلًا، هنا لَدَينا استمارتنا، ولدينا هنا حقل (field)، وفي هذا الحقل لَدَينا كائنُ validators حيث نُجري عملياتَ التحقّق لدينا. يمكننا إجراء تحقّقنا عند التغيير أي onChange. ويمكننا فعل ذلك أيضًا

[01:35] عند الإرسال أي onSubmit، وعند فقدان التركيز أي onBlur، وما شابه ذلك. ويمكننا أيضًا إجراء تحقّقٍ غير متزامن (async validation) كذلك. سنلقي نظرةً على ذلك بالتفصيل، لكن هذا مجرد استعراضٍ سريعٍ فحسب. ثم — في الأبناء (children) لهذا المكوّن — نعرض واجهة المستخدم لدينا. وهنا

[01:49] مثلًا نعرض حقلَ إدخال (input)، وتسمية (label)، وما إلى ذلك. لكن بالطبع يمكن أن يكون هذا حقلَ إدخالٍ قادمًا من مكتبة مكوّنات (component library) إن كنتَ تستخدم نوعًا من مكتبات المكوّنات.

[01:59] ويمكننا الحصول على كلّ ما يتعلّق بحقلنا عبر هذا الحقل الذي نحصل عليه هنا في هذه الدالة. وسنمتلك قيمةَ الحقل.

[02:08] وسنمتلك دوالَّ ردّ نداء نحتاج إلى تمريرها إلى onBlur وonChange. وسنمتلك معلوماتٍ متعلّقةً بالأخطاء كي نتمكّن من عرض الأخطاء وما شابه ذلك. لكن حين تنظر إلى هذا، فقد تظنّ أنّ هذا ربّما كثيرٌ جدًا

[02:20] من الشيفرة (code) لكتابتها لاستمارةٍ بسيطةٍ جدًا.

[02:23] غير أنّه في نهاية الفيديو سنرى طريقةً يوفّرها TanStack Form كي نتجنّب كتابة الكثير من الشيفرة القالبية (boilerplate)، ونجعل استماراتنا سهلةَ الاستخدام جدًا، وقابلةً للتركيب (composable) جدًا كذلك.

[02:35] فلنبدأ إذًا مع TanStack Form.