Crea formularios fácilmente con React Hook Forms
Вставка
- Опубліковано 19 вер 2024
- En este vídeo vamos a revisar la librería React Hook Forms, una librería de hooks personalizados que nos permite crear formularios de una manera muy sencilla y efectiva.
👉 Conoce nuestras vacantes actuales de tecnología en bit.ly/talento...
Si quieres aprender más de programación, te dejamos por aquí otros Garaje Code Pills que seguro que te gustarán:
- useState Hook en 20 minutos: • useState Hook en 20 mi...
- useContext en 20 minutos: • useContext en 20 minutos
- useEffect en 20 minutos: • useEffect en 20 minutos
Aquí tienes el código por si quieres usarlo:
github.com/Gar...
Esta introducción a la librería React Hook Forms fue impartida por Mario Girón, Senior Full Stack Developer:
/ mariogironm
Si quieres estar al tanto de todo lo que hacemos, puedes inscribirte aquí 👇
garajedeideas....
----------
Garaje de Ideas es un estudio de Diseño, Tecnología y Data. En este canal encontrarás tutoriales, cursos y ejemplos prácticos paso a paso de desarrollo web y programación.
Podrás encontrar desde cursos de JavaScript, Node.js, D3.js, Vue3, Typescript, HTML, CSS, React... hasta cómo optimizar tu proceso de trabajo.
La explicación estuvo de maravilla. Estoy siguiendo un curso que compré en Udemy y me ha sido de gran ayuda. Lo que veo en el curso, luego lo busco en UA-cam para comprenderlo aún más. ¡Qué bueno que existan este tipo de contenidos!
Muchas Gracias no sabes cuanto me ayudaste gracias por tu tutorial único en todo UA-cam no hay como el tuyo ,tu video ilumino mi día ,semana y mes muy agradecido
Gracias a ti! Nos alegramos mucho de que nuestro contenido te sirva de ayuda :)
Excelente explicación, una de los mejores tutoriales que he visto en mis 18 años de carrera como desarrollador. Soy docente de matemática e informática. Saludos desde Venezuela
Estimado, en principio le felicito por la buena dicción y su facilidad para hacer llegar el mensaje. A veces menos es más. Y eso es justo lo que usted hace. Simple, al grano y con un lenguaje muy normal que hace que uno entienda con mucha facilidad. Excelente material!
Gracias por el feedback! Nos alegramos mucho de que nuestro contenido te sirva de ayuda :)
Muchas gracias hermano, eso era justo lo que estaba buscando una forma de manejar los formularios de manera que me permita tener control sobre el mismo en todo momento y acceder al valor que tienen sus campos, sin tener que hacer submit.
Me gusta mucho cómo explicas y además la rapidez con la que lo haces, no hay desperdicio de tiempo ni uno se duerme, soy tu fan.
¡Gracias! Nos alegramos mucho de que nuestros contenido te sirva de ayuda :)
Graciasss! Es importante no dormirse 😁
He conseguido entenderlo a la perfección, explicas todo correctamente.
Muchas gracias. Un saludo.
¡Gracias a ti! Nos alegramos mucho de que nuestros contenido te sirva de ayuda :)
Una excelente alternativa para crear formularios de forma muy rápida y eficiente, muchas gracias por compartir.
¡Excelente trabajo! y gran didáctica. Saludos cordiales desde Argentina, gracias por compartir
Muy buen trabajo, excelente explicación, saludos desde Generall Madariaga en la Pcia. de Buenos Aires República Argentina!!!
explicas muy bien, la manera en la que avanzas sobre el tema, los ejemplos, excelente! gracias por el contenido
🤯 Que gran explicación sobre el uso de esta librería, ¡muchas gracias!.
Señor, es usted una bestialidad de tifon crack master god!!! muchas gracias!
Cuanto agradezco haberme encontrado con Garaje de Ideas! Muy buen vídeo, gran explicación
Muchas gracias por la info. Directo al grano y muy bien explicado. De nuevo, muchas gracias
Te agradezco, me sirvió bastante este video ya que me dio una idea de como controlar diferentes formularios y tener acceso al state
Excelente, por aqui tienes a un nuevo subscritor. Gracias!
que bien explicas lo entendi todo rapido a los demas nada no saben explicar
muchas gracias, me sirvió mucho el video. saludos desde chile
Excelente explicación. Muchas gracias por compartir como funciona la creación de formularios con React Hoook Forms. Saludos desde Caracas-Venezuela.
Muchas gracias por la información, gran video
Este tutorial es hermoso, ahora puedo seguir con mi curso
Gracias por tu comentario y nos alegramos de que te haya servido de ayuda :D
bien .... seria bueno una segunda parte seguro -- gracias por el video
Excelente tutorial, me sirvió muchísimo. Gracias por compartir!
Muchas gracias, me ha ayudado mucho el video!
Excelente explicación, muy simple y claro... continua así... te estare apoyando.
excelente video
Kapo para explicar se me hizo muy sencillo entender.Saludos
GRACIAS POR ESTE BELLO VIDEO
Demasiado excelente! Mil gracias por este tipo de contenido. Like y suscrito!
Simple y conciso
muy muy bueno saludos desde argentina !!
Tremenda Utilidad. Gracias por el video.
Gracias por el vídeo. Conciso y bien explicado. Tenéis un suscriptor más.
Excelente video, gracias!
Que buen video, muchas gracias crack!
Saludos. Gracias por el tutorial. Me hace falta saber cual es el codigo para enviar a la base de dato en este caso. Gracias.
Gracias! muy util y estaremos por aqui ya que ha sido muy util su tiempo!!!
No conocia este hook pero se gano mi corazon jajaja. Gracias por explicarlo bien claro! Suscrito y like.
Genial, explicas de una manera muy sencilla y clara, lo capte muy rápido, gracias
Tremendo video!! Saludos desde Argentina
me encanta como explicas, muy fácil de entender!
que magnifico video
Ostras que videazo! Saludos desde Nicaragua
Gran explicacion
Muy buen tutorial, me llama la atencion la linea 17
const incluirTelefono = watch('incluirTelefono');
ya que se define como una constante y lo que entrega watch() varia
Muy buen vídeo! Muchas gracias por compartir este conocimiento! Un abrazo!!
¡Buenísimo! Gracias por hacer este vídeo, me hubiese gustado que explicaras como colocar la contraseña, pero ya eso lo investigaré por mi cuenta. Por cierto me he suscrito a tu canal, espero que puedas continuar publicando más contenido actualizado sobre React =) ¡Un saludo!
Mario eres un profesor excelente, gracias por compartir
Excelente la manera de explicar. Me ayudó mucho. Saludos
Me aportó mucho tu video. Gracias!
Muy bueno el vídeo! Me hubiese servido mucho que hubieras explicado también como trabajar con check box y switch
Excelente Hook muy bien explicado como siempre
muy buena explicación, gracias por aportar
MUY BUENO BUENISIMA EXPLICACION
Gracias
Muy bien ganado su like 👏
fue una pesadilla como no tenés idea joder, ahora la quiero dejar bonita y bueno que mejor que agregar esta lib!
Grande hermano, excelente explicación
Excelente aporte amigo, muy bien explicado!!!
Un groso, super clarisimo, gracias
Muy clara la explicación, muchas gracias !!!! =D
Que buen video, explicas muy muy bien, gracias por los conocimientos compartidos :D
Excelente y muy claro!
super genial! buen contenido!!! te felicito
Re buen video, ya me suscribí. Una consulta, como se podría hacer para vaciar los inputs una vez enviado los datos?
muchas gracias
Uff Excelente video , un suscriptor mas
buen video!
Wow! muchas Gracias!
Excelente! Mil gracias por la información. Te ganaste un nuevo Sub!
Una consulta. Si quiero validar 2 emails para que sean iguales. La función chequearía si value.email1 === value.email2 ??
Excelente video! Muchisimas gracias, solo tengo una duda ¿Como podriamos limpiar los campos al hacer el submit?
Geeeniaaal Muchas gracias!
Genial
Genial!!!
Gracias :3
Simplemente Perfecto XD
15:25 custom validation
Tremendo videazo, me suscribo! el único inconveniente que tengo y me pregunto si podrían ayudarme es que el mensaje de error aparece siempre, es decir debería de aparecer cuando se intenta enviar el formulario, pero en el estado actual, apenas escribes una letra aparece el mensaje y eso no quedaría bien... (El formulario funciona simplemente es un problema de estética mi problema)
como puedo comparar dos campo por ejemplo contraseñas que se a igual o no
Como podría precargar datos o rellenar los inputs, luego de realizar la consulta a un API
GRACIAS!!!!!
barvaro!
muy buenas tardes, excelente la expliación, estoy empezando en React pero me encuentro con una ncesidad, y es crear dentro de un formulario validado, 2 cajas de texto para ingresar valores numericos y una tercera para mostrar el resultado, alguien me pude dar una idea de como hacerlo, muchas gracias
👌
Esta increíble....!!!! En el onSubmit que create ya puedo hacer una petición con el data y enviarla a una url mediante fetch?
Hola Kreisler! Exacto, en el onSubmit podrías tomar todos los datos recogidos a través del formulario y enviarlos utilizando fetch o cualquier otra alternativa como por ejemplo axios
E usado el valor por defecto en el "hook useForm:" pero cuando hago esto las validaciones por ejemplo de campo vacío (required) no funciona, es decir no me aparece nada. Borro ese valor por defecto y funciona. Ni siquiera funciona cuando le doy al botón de enviar el formulario. Supongo que cuando tiene el valor por defecto ya se almacena y no hay vuelta. Voy a investigar para encontrar una solución.
Excelente video, e aprendido un montón. Es increíble como los errores me persiguen xd. Trate de escribir un poco mas en el comentario pero no me dejaba. tuve que recargar la página. Supongo que fue porque borre la cache del navegador (1h).
Muy bueno! Pero no entendí donde va el mothod y el action del form :/
Me imagino que la función en el evento submit del formulario llamada handleSubmit que viene del Hook y que a la vez ejecuta la función creada llamada onsubmit, ahí se usa alguna API como fetch, o httpsrequest o axios para hacer el envío de datos.
Ejemplos: const onSubmit = async (data) => {
try {
const response = await fetch('URL_DE_TU_API', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
});
if (response.ok) {
console.log('Datos enviados correctamente');
} else {
console.error('Error al enviar los datos');
}
} catch (error) {
console.error('Error en la solicitud:', error);
}
}; ya la función handleSubmit se encarga de gestionar los datos que se escriben en los elementos del formulario.
Hola buenas como se hace el envio al correo, hay algun video? gracias
Quisiera realizar una consulta, en la línea :{errors.nombre?.type === 'required' && El campo nombre es requerido} me aparece el siguiente error "Module parse failed: Unexpected token (369:21). You may need an appropriate loader to handle this file type." Hay alguna dependencia que no tenga instalada o se puede realizar de otra forma? Gracias y excelente video
Hola Leonel! Muchas gracias por tu comentario!
En cuanto al error que te sale, necesitaríamos ver directamente cómo te sale el error en el gestor de código. Tal cual nos lo comentas no podemos darte solución al problema 😅
Entonces si quiero recibir el valor del check debo estar manejandolo con un estado? o hay algun modo de que el mismo retorne un true o un false segun este activo o no?
Hola! Mediante el método watch que nos ofrece el hook podemos monitorizar el estado del check, pero si necesitas guardar el valor, deberías manejarlo a través del estado del componente.
@@Garajedeideas gracias ☺️!!
Hola, y donde configuras el correo al que quieres recibir la info?
Hola! En este caso necesitarías un server de backend como Node.js y Express que procese los datos enviados en el form y los envíe a tu correo. También puedes utilizar algún servicio de cloud para realizar el envío como EmailJS: www.emailjs.com/
Tengo un problema, al momento de utilizar formState errors, mi app se pone en blanco completamente. Alguien me podría ayudar?
Tengo una duda como se podrian pasar datos a nuestros inputs, es decir ya tener almacenada información en un estado y después pintar esa información en el formulario no logro encontrar la respuesta
Hola Hugo, para poder pasar datos por defecto al formulario en su creación hay que hacerlo a través de la definición del propio hook, algo así:
useForm({
defaultValues: { nombre: 'Mario', direccion: 'C Falsa 123', email: 'mario@gmail.com', edad: 23, pais: 'España' }
});
Buenisimo pero no me carga la pagina
👉 ¡En Garaje seguimos creciendo! Únete al equipo: bit.ly/talento-tech-GDI
alguien sabe como hacerlo funcionar con reactstrap ????
pero como lo hacemos funcional???
Hola Antonio, esta librería está enfocada a maquetar el formulario y su funcionalidad. Para realizar envíos del formulario habría que hacerlo a través de otra tecnología o sobre alguna aplicación de backend.
@@Garajedeideas Buen día!!! Muchas gracias por sus videos, me parecen muy claros. Siguiendo este hilo quisiera saber como se puede hacer un update de un registro utilizando este hook, Como se cargan los datos a los campos para editarlos? se puede usar useState?
Pero el chiste de los formularios es que se validen antes de presionar el botón submit, como la librería liveValidation
"adivino en principio no soy" HAHAHHAHA típico