Guía de Formik - Librería para Formularios en React

Подписаться 510 тыс.

Просмотров 63 тыс.

50% 1

En este video vamos a ver como trabajar con formik, la mejor librería para trabajar con formularios dentro de React.
🚀 Blog de Diseño Web:
www.falconmasters.com
⭐ Curso de Diseño Web desde Cero:
www.desarrolloweb.io/cursos/d...
⭐ Curso de PHP y MYSQL desde Cero:
www.desarrolloweb.io/cursos/p...
⭐ Curso de React y Firebase desde Cero:
www.desarrolloweb.io/cursos/r...
⭐ Curso de Bootstrap 5:
www.desarrolloweb.io/cursos/b...
⭐ Curso de Woocommerce:
www.desarrolloweb.io/cursos/t...
---
🔗 Código del Proyecto: github.com/falconmasters/form...
🔗 Formik: formik.org/
📄 Expresión Regular Nombre: /^[a-zA-ZÀ-ÿ\s]{1,40}$/
📄 Expresión Regular Correo: /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/
---
Redes Sociales:
📌 Twitter: / falconmasters
📌 Página de Facebook: / falconmasters

Наука

Опубликовано:

10 авг 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 130

@FalconMasters 2 года назад

Si te gusto el video dale manita arriba y no olvides suscribirte para mas tutoriales de desarrollo web!

@vanessamc3342 2 года назад

Puto amo como siempre ✌️😄

@FalconMasters 2 года назад

@@vanessamc3342 haha gracias !

@SandraPerez-tj6fj 2 года назад

Excelente video, y la explicación, estoy empezando a armar un formulario y realmente me sirve muchísimo.GRACIAS

@mperezguendulain 2 года назад

Muchísimas gracias Carlos, desde que vi tus primeros videos hace años supe que me tenía que suscribir. Muchas gracias por todo el apoyo!

@natachavergara412 2 года назад

Gracias por el tutorial, rápido, fácil y super entendible.

@victorga74_1 2 месяца назад

Gracias por la paciencia y la manera tan excelente de explicar. Saludos

@fidelp27 2 года назад

Excelente video! Muchas gracias por compartir. Súper claro todo

@JeyColon 2 года назад

Amigo eres un gran maestro, gracias por tanto. Un abrazo

@antonionavarrro 2 года назад

Excelente video, justo ahora estaba buscando algo sobre Formik 👍

@nivus97 2 года назад

Muy buen video, bien explicado, como siempre, gracias! 👏

@juliopaez9989 Год назад

Excelente Carlos, Gracias infinitas, fue un placer haber seguido el video, realmente me abrió la mente a posibilidades infinitas. Gracias, Gracias, Gracias

@vitalivs7249 Год назад

Gracias amigo, muy buena guía, explicas muy claro. Te ganaste un nuevo suscriptor.

@silvinaronzoni9573 Год назад

Excelente video....muchas gracias !!!

@edummorenolp 3 месяца назад

Una gran herramienta, y muy bien explicada. Gracias.

@camilarojasserantoni3241 2 года назад

que buen video! muchas gracias por la completisima explicación! ahora lo aplico en mi proyecto ;)

@MiguelRodriguez-ks1gs Год назад

Excelente tutorial... gracias por tu trabajo 🙂

@alelasgrutas 2 года назад

Muchas gracias ! muy bueno tu aporte.Saludos

@valentinewiggin9705 2 года назад

Muchísimas gracias por el video, excelente.

@sebastianacevedo8422 Год назад

Excelente!! te agradezco mucho este video!

@jfbj1792 2 года назад

Gran video. Gracias por el gran aporte 😀

@orlandocastaneda3169 Год назад

que pedaso de tutorial, excelente! yo tenia dudas que me adelante a buscar pero resulto que todas las resolvio a su tiempo jaja

@marcosmartilotta848 Год назад

Simplificando todo como siempre!

@SuperOskytar 2 года назад

Mejor tutorial de Formik que he visto

@juancaycho6711 2 года назад

Excelente tutorial, me sirvió bastante.

@axcha22 Год назад

Muchas gracias por el contenido, excelente video. Saludos:)

@borissinisterra6730 2 года назад

Muy buena explicación, eres un crack bro.

@mariasilviamorales5393 2 года назад

Excelente Video. Muchas gracias por todo lo que enseñás. Me fuiste de mucha ayuda. Voy a seguir viendo tus tutoriales para seguir aprendiendo.

@FalconMasters 2 года назад

Muchas gracias! Espero que aprendas mucho en todos ellos.

@davidespinoza1469 Год назад

Excelente, gracias!

@berlinjuan 2 года назад

exelente como siempre !!!!

@andersonenocsmorilloguzman9139 2 года назад

Gracias chulisimo Falcon..

@edgarlinanmedellin7153 2 года назад

Muy buen tutorial, aprendí demasiado y te ahorra mucho tiempo a comparación de la otra forma, pero me quedo una duda en el video donde realizas la validaciones usando estados y le das estilos con styled components,¿Como agregaríamos estilos cuando es validado o no, ya que antes importabas Input que era un styled-component y ahora usas Field?

@exequielfloresarriagada1825 2 года назад

Gran tutorial eres un Crack !!

@matiasask3774 2 года назад

Hola gracias por el contenido!. una pregunta, como manejas inputs como checkbox, radibutton y select en el caso que sea un formulario mas complejo? saludos

@AltoViajeBlog 2 года назад

Hola, por ahora funciona! Pero tengo algunas dudas. Cómo hago validaciones? Por ejemplo, siguiendo tu form, alguien podría mandar u poniendo un nombre o un mensaje con una sola letra, cómo hago para poner un minlength? Y la otra duda es cómo hago para que sea realmente funcional, o sea que pueda enviarlo a un servidor y me llegue a mi mail la información que envía el usuario? Muchas gracias!

@SrCR4ZY 2 года назад

Gracias falcon!!

@Deus-lo-Vuilt Год назад

Gracias por el video

@AngelUrbina-vt8ye Год назад

Muchas gracias!!!

@AndresRojas-tr9ir 2 года назад

Muy buen tutorial!

@ospcg 2 года назад

Me gusta el tema de vscode y el sonido de tu teclado, que usas en ambos casos? Buen video bro

@Hernanskate100 2 года назад

gran video gracias

@klaynospina9236 2 года назад

el video esta muy bueno una pregunta en temas laborales como se enviarian a un api?

@JorgePerez-hg9jt Год назад

Muchas gracias, una pregunta, si quisiera añadirle un estilo disbled al botón cuando alguno de los inputs no pasen la validación con qué propiedad podría validar ese estilo?

@EdwinHernandez-zw3ob 2 года назад

Demasiado bueno amigo

@compaluis51 Год назад

Genial FalconMaster !! Felicidades. Sólo faltaría la explicacion para datos adjuntos para calificar de excelente tu tema. Ya tengo todo listo pero ahora cómo lo envío ya en producción?. Saludos.

@josesantillan732 2 года назад

Te amo sos un genio

@qeqerevo 2 года назад

Buenisimo el video, no usar estados dentro de un componente es una gloria jajaj

@ntrpause Год назад

¡Gracias!

@jibleg 2 года назад

Excelente video. Solo falto implementar la validación usando Yup

@braianezequielrosales3982 2 года назад

Hola !! Cual es el theme de vscode que esta usando ?? Esta buenisimo.

@juanochando7146 2 года назад

gracias bro

@julialocamuz28 2 года назад

excelente.

@alejandromonroy8726 2 года назад

Un abrazo

@jeanchavez6048 2 года назад

luego los values de los inputs, los puedo usar como props para otro componente?

@GiancarloCarccamo 2 года назад

buen video

@maximilianosarmiento2451 Год назад

Hola, una consulta! como podría trabajarlo en caso de un textarea? lo intenté de la misma forma que los inputs, pero algo sale mal..

@santi_cendra_music Год назад

Buenas! consulta! Tengo una tabla y quiero que al apretar el boton edit ya me cargue como "initialvalues()" los datos del usuario en cada campo, la fino viene de un param... como se haria eso como algo asi (pero esto obvio que no va)-> value={formik.values.nombre&&dataEdit.nombre}

@yoanestradablanco1608 2 года назад

Exelenete he estado buscando una libreria que me ayudara a no hacer esto manualmente saludos y exito hermano voy a compara tu curso de udemy para apoyar

@FalconMasters 2 года назад

Me alegra que te sirviera y gracias por el apoyo lo aprecio mucho.

@darwinsinche294 2 года назад

Falcon, como puedo utilizar formik con componentes Antd, Syncfusion, Material UI, etc.

@tiagoae 2 года назад

crack!!

@victortrejo4517 Год назад

yo tengo una duda, tengo un formulario en el cual tengo que insertar el rfc ¿como le hago para que me muestre un dialog si el rfc ya existe en la base de datos?

@miguelvasquez9849 2 года назад

Por algún motivo, cuando instalo "formik", me empieza a salir un error en "eslint" que dice " 'name' is missing in props validation " cuando paso props a un componente como función. Pero ya probé y es cuando instalo "formik".

@tuhablasingles 2 года назад

Excelente video, si quisiera pasar el estado de otro componente por props como valor de uno de los fields se podria con formik ?

@juliopaez9989 Год назад

Me pasa idem con Formik, le paso por props el valor a los campos y se inicia la primera vez en blanco o siempre con los datos del registro anterior. No encuentro como hacer que se inicie con los datos del registro actual.

@diegoazocar506 2 года назад

Excelente video, muy buen trabajo. ¿Existe alguna forma que las validaciones de campo, como campos vacíos, largo de texto, etc lo haga automáticamente sin aplicar lógica?, esto facilitaría mucho las cosas. Algo así como laravel con "validate". Muchas gracias.

@ryan2000 2 года назад

Te recomiendo instalar Yup

@YohGar2854 2 года назад

Muy bueno el video pero como obtengo los valores de un campo mientras escribo, ósea capturar los valores de un campo mienta escribo

@jcruz30 2 года назад

podrías hacer tutorial uno para aprender implementar pasarelas de pago?

@ttvhuskyy3679 2 года назад

porque si pongo un console log de values dentro de la funcion de retorno siempre me imprime 3 veces los valores? {({ values, errors, touched, handleSubmit, handleChange, handleBlur }) => ( {/* */} {console.log(values)}

@mariacandelareynoso1337 Год назад

Epic!

@universodragonball9696 Год назад

yo los formularios los trabajo de esta manera: const [formData, setFormData] = useState(initialFormValue()); function initialFormValue() { return { nombre: "", precio: "" } } para la función que permite cambiar los valores: const onChange = e => { setFormData({ ...formData, [e.target.name]: e.target.value }); }; y el onChange lo mando llamar dentro del form en lugar de llamarlo en cada input

@josearmandozeballosduran7086 2 года назад

Amazing

@pablos.r1305 2 года назад

Excelente, fui el like número 1000 jeje

@FalconMasters 2 года назад

muchas gracias!

@NovatoWTF 2 года назад

Falcon, No te olvides enseñar de GRAPHQL EN EL BACKEND Y FRONTEND. TAMBIEN EN TIEMPO REAL.

@kevin101294 2 года назад

Por favor

@TheVERDOLAGA45 Год назад

Hola. ¿Cómo haría para realizar la opción de editar de un CRUD con axios para que me cargue los datos de la BD del registro a editar con FORMIK?

@pablohperez Год назад

Supongo que podrìas cargarlos en el initialValues del formik

@magalif.5737 3 месяца назад

Buenas Carlos, tenés planeado hacer un curso de Next js para subir a Udemy?

@FalconMasters 3 месяца назад

Si, pero no estoy seguro de cuando lo haré. Primero estoy trabajando en actualizar todos mis cursos.

@sanant8748 Год назад

Alguna guía ara intergralo con recaptcha?

@camilarojasserantoni3241 2 года назад

una duda, se puede integrar formik a react - bootstrap? para que visualmente quede agradable ? ahahaha (se que pusiste tus estilos pero con bootstrapn te facilita mucho el trabajo) saludos desde chile

@FalconMasters 2 года назад

Hola Camila, nunca lo he hecho pero seguro que se puede. React bootstrap solo aporta componentes, mientras que formik agrega la funcionalidad. No veo porque no se podrían juntar ambos.

@dennisfraile4529 2 года назад

Buen video, una pregunta se puede usar formik dentro de un modal ?

@FalconMasters 2 года назад

Si claro, sin problemas

@aVirusX 2 года назад

Hola FalconMaster, tengo una súper duda y quiero que me ayudes!, bueno es que quiero implementar en mi página web en el title mi marca pero cuando salga en el buscador, ejemplo: Campamentos libres - Mimarca, que salga en el buscador pero cuando entren a la web vean en el código no salga "´- Mimarca", no sé si me doy a entender, sé que lleva un código en el title para que aparezca Mimarca en el buscador pero no en el código Saludos!! y abrazos!!

@FalconMasters 2 года назад

Hola Danny, eso tiene que ver con SEO, yo no conozco mucho del tema asi que no podria decirte si hay alguna forma de hacerlo. Pero según entiendo el title de tu sitio tal como lo tienes en el código es como lo toma Google.

@nicolas3030 2 года назад

Debes usar Javascript para eso, document.title = variabledejacascript; saludos

@Manelike2000 2 года назад

Mi estimado, si adquiero tu curso, puedo terminarlo a mi ritmo o hay un plazo de semanas por cada sesión?? Quiero tomar tu curso de desarrollo web en Udemy para superarme en el mundo de la programación

@FalconMasters 2 года назад

Si, puedes seguir el curso a tu ritmo, una vez que lo adquieres es tuyo y se queda en tu cuenta de Udemy para siempre

@OmarMendozaKS 2 года назад

Cual es la fuente de letra que usas en VSC?, se lee perfecto

@FalconMasters 2 года назад

Utilizo estas: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Og8JpOhp8TQ.html

@angeljesuszorrillacuevas7654 Год назад

A mi no me borra el formulario con el resetForm, pq?

@lilajoha Год назад

38:24 como se hace la llamada a la api de whatsapp?

@AlanMartinez96 Год назад

Nice video bro ! I just have one thing to correct at the minute 27:10 when u say that the variable errores must be a declared as let. Remember that u r working with an object that has the property of being mutable. Therefore later when u add a new prop like errores.nombre = "anything" It doesn't matter if u declare the errores variable as const or let. Because u are not changing the value of the variable. You r just mutating it. Once again you've done a really good job on this video. These things are really useful for the community

@moisesvargasichpas4805 2 года назад

Que fuente utilizas master?

@FalconMasters 2 года назад

Utilizo estas: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Og8JpOhp8TQ.html

@kevinat71 2 года назад

que opinas de React Hook Form?

@Riczerq 2 года назад

Yo lo considero mucho más robusto que Formik.

@ntrpause Год назад

20:09 como se hace la seleecion de multicursores en mac?

@FalconMasters Год назад

No se como sea en mac, pero tiene que ser similar, Alt + Clic, o Command + Click, o shift + click.

@ntrpause Год назад

@@FalconMasters Gracias esta genial el video esta mejor que el curso que compre en udemy

@pablos.r1305 2 года назад

El código tira este error en la parte de las validaciones: En esta línea: errores.nombre = 'Por favor ingresa un nombre' Dice "La propiedad 'nombre' no existe en el tipo '{}'.ts(2339)" Alguien sabe cómo solucionarlo ?

@FalconMasters 2 года назад

Hola Pablo, revisa bien el código, lo mas seguro es que tengas algo mal.

@andresleyton8517 2 года назад

Estoy frenado con la conección de la API quien me puede ayudar

@virocumi 2 года назад

Estoy frenado con este error: Error: Objects are not valid as a React child (found: object with keys {nombre, correo}). If you meant to render a collection of children, use an array instead. Ayuda!!!!

@alexisantoniojimenezjoaqui6776 Год назад

tienes cursocompleto de react??? actualizado

@FalconMasters Год назад

Si, este es mi curso de React: www.udemy.com/course/react-desde-cero/?couponCode=43CAFEF7CAA1BAB844D8 Esta completo y actualizado.

@thedyslexicwebdev1654 8 месяцев назад

31:18 48:00 SELECT countries

@zeroes5237 2 года назад

mare, yo tarde casi 10 minutos en instalar react TS y copiar el código base -.-

@paquilloel Год назад

ya no aparece el código en Github...

@FalconMasters Год назад

Aquí lo tienes: github.com/falconmasters/formularios-react-formik

@pablomartinez6184 2 года назад

Instalé email js y formik me envía formularios vacíos en caso de que el usuario lo decida :(

@FalconMasters 2 года назад

Hola Pablo, lo único que podría decirte es que seguramente algo este mal en el código.

@mrgatsby039 2 года назад

Amigos alguien podría orientarme, como haría para direccionar hacia la pagina principal de mi aplicación web después de que el usuario se loguee?

@FalconMasters 2 года назад

Hola Leonardo, eso depende mucho de que lenguaje estés utilizando y si es del lado del cliente o del servidor.

@mrgatsby039 2 года назад

@@FalconMasters Si claro entiendo estoy usando node js y socket io del lado del servidor y Reactjs con peerjs, socket io-client en el frontend para modelar una app de video llamadas ya tengo mi app lista, pero mi problemática radica en como adicionarle un formulario de registro y de inicio de sesión a dicha aplicación web ya que no sabria como enrutarlos, y que luego de que el usuario pueda registrarse sea direccionado hacia la pagina principal de la app. Si alguien pudieras orientarme o ayudarme te lo agradecería una y mil veces. Saludos y por cierto muchas gracias por compartir tus conocimientos tu canal vale oro, mereces un millón de suscriptores.