filmov
tv
React Hook Form Pro | Crea formularios complejos y dinámicos en React

Показать описание
En este vídeo, seguiremos con la guía de React Hook Form, y aquí principalmente nos enfocaremos en el uso de librerías de componentes externos de UI como Shadcn y entre otros. Especificamente este caso usaremos react-select para manejar selects y lo conectaremos con el formulario
🔹 ¿Qué aprenderás en este tutorial?
✅ Integración de React Select (SingleSelect y MultiSelect) con Controller de React Hook Form.
✅ Campos dinámicos usando useFieldArray para agregar, eliminar y modificar entradas dinámicamente.
✅ Validación de esquemas con Zod para asegurar que los datos del formulario sean correctos.
✅ Componentes reutilizables como InputCampaign, InputIcon, y selects personalizados.
✅ Cómo mostrar la data ingresada en el formulario y detalles finales para pulir tu aplicación.
📍 Repositorio de Github:
_________________________
00:00:00 Introducción + demostración
00:06:00 Configuración del proyecto
00:08:50 Creación del esquema de validación - Zod
00:25:02 Creación del componente InputCampaign
00:31:10 Uso del componente InputCampaign
00:35:08 Componente InputIcon
00:39:44 Uso del componente InputIcon
00:46:25 Componente MultiSelect con React Select
00:56:31 Componente SingleSelect con React Select
01:01:38 Uso de los componentes Select
01:11:47 Campos dinámicos con useFieldArray
01:19:30 Mostrar data y Detalles finales
_________________________
Links usados:
📌React Hook Form
📌Zod
📌ZodResolver
📌React Select
📣 Si tienes alguna duda, pregunta o comentario y necesitas contactarme directo puedes escribirme aquí 💯:
🔹 ¿Qué aprenderás en este tutorial?
✅ Integración de React Select (SingleSelect y MultiSelect) con Controller de React Hook Form.
✅ Campos dinámicos usando useFieldArray para agregar, eliminar y modificar entradas dinámicamente.
✅ Validación de esquemas con Zod para asegurar que los datos del formulario sean correctos.
✅ Componentes reutilizables como InputCampaign, InputIcon, y selects personalizados.
✅ Cómo mostrar la data ingresada en el formulario y detalles finales para pulir tu aplicación.
📍 Repositorio de Github:
_________________________
00:00:00 Introducción + demostración
00:06:00 Configuración del proyecto
00:08:50 Creación del esquema de validación - Zod
00:25:02 Creación del componente InputCampaign
00:31:10 Uso del componente InputCampaign
00:35:08 Componente InputIcon
00:39:44 Uso del componente InputIcon
00:46:25 Componente MultiSelect con React Select
00:56:31 Componente SingleSelect con React Select
01:01:38 Uso de los componentes Select
01:11:47 Campos dinámicos con useFieldArray
01:19:30 Mostrar data y Detalles finales
_________________________
Links usados:
📌React Hook Form
📌Zod
📌ZodResolver
📌React Select
📣 Si tienes alguna duda, pregunta o comentario y necesitas contactarme directo puedes escribirme aquí 💯: