Formularios en React Hook: domina el manejo de formularios en React

1. Introducción al curso: Bienvenido a este curso sobre mastering react Hook forms. Soy Fazal, y estoy emocionado de ser una guía en este viaje en el que aprenderíamos cómo puedes manejar formas de manera efectiva en reaccionar Ahora, la gestión de formularios puede ser compleja y una tarea tediosa, y por eso estoy encantada presentarte para reaccionar Hook form, que es una herramienta que revoluciona A lo largo de este curso, exploraremos todo, desde formularios básicos hasta técnicas avanzadas de validación y haciendo que su manejo de formularios sea más ágil y efectivo. Cubrir muchas cosas como introducción a las formas en reaccionar. Hablaremos de formas de gancho de reacción, básico en el que cubriremos los aspectos esenciales de la gestión de formularios con react hook form y cómo funciona esta biblioteca llamada react Hook También entenderemos las técnicas de validación y cómo puede implementar validaciones robustas Aprenderemos sobre las mejoras en el rendimiento, y te puedo asegurar que al final de este curso, tendrás todas las herramientas y conocimientos para crear formas poderosas y fáciles de usar en reaccionar. Para quién es este curso? Por lo que este curso es perfecto para cualquiera que esté buscando elevar sus habilidades de reacción. Ahora bien, si eres principiante o alguien que está apuntando a profundizar tus conocimientos o gestión de formularios en reaccionar, para que todos puedan beneficiarse de este curso en particular Este curso es completamente manos a la obra, y sea lo que sea que estemos aprendiendo, lo estaremos aprendiendo echando un vistazo a ejemplos en real. Así que estoy súper emocionada de llevarte a este emocionante viaje. Espero que también estés emocionado, y te veré del otro lado. 2. Primeros pasos: formularios en React simplificados: Entonces ahora es el momento de que voy a hablar sobre los formularios y cómo se pueden administrar los datos del formulario en reaccionar. Entonces lo que vamos a hacer es que vamos a crear un formulario básico y aprenderemos sobre los meollos de la gestión de formularios o la gestión de datos con Formularios Entonces aquí tengo un proyecto de trigo de reacción muy simple, pueden ver, y es un código muy simple. El repetidor inicial, he hecho un poco de limpieza en la app JSX, como pueden ver, ¿bien? Y app.j6 se está renderizando en punto medio Jx por aquí con el modo estricto Cierra esto. Y aquí tengo un CSS, que es CSS muy básico. No es mucho. Estoy poniendo el margen a cero píxeles para todos, y luego para Dev estoy agregando flex la pantalla de flex justificando todo al centro. Todo bien. Así que voy a cerrar esto y nos centraremos en app.j6. Bien. Tengo el servidor funcionando y se puede ver la salida en el lado derecho. ¿Todo bien? Ahora, lo que voy a hacer es que voy a agregar un campo de entrada muy simple, y vamos a construir sobre eso. Todo bien. Entonces lo que haría aquí está aquí. ¿Bien? Diré formulario, o porque el campo de entrada tiene que estar dentro de la etiqueta Fm, ¿de acuerdo? Entonces esta es nuestra etiqueta Fm, bien. Y voy a decir en enviar por aquí, en someter, tenemos que presentarlo en alguna parte. ¿Bien? Entonces necesitamos tener una función que se encargue de la presentación. Pero por ahora, voy a mantener esto vacío y luego rellenaré ese lugar. Voy a añadir una etiqueta por aquí, bien. Y la etiqueta será nombre. Bien. Déjame ver si esto vaya. Voy a recibir un error. Entonces déjame agregar esa función también porque no vamos a ver la salida, así que voy a decir manejar enviar por aquí, enviar algo como esto. Y por aquí dentro del componente, voy a decir const, manejar submit, algo así, y voy a tener una función de flecha mt aquí, agregó Bien. Entonces no pasa nada a partir de ahora, ya que necesitamos definir la lógica de cómo funcionaría la sumisión. Bien. Ahora bien, esta etiqueta está ahí, ¿de acuerdo? Tenemos la etiqueta de cierre de etiqueta, y voy a agregar una entrada por aquí. Bien. Y voy a decir que la entrada es de tipo texto. ¿Bien? Entonces el tipo es texto por aquí, y voy a decir nombre es nombre por aquí. Bien. Entonces esto tiene comillas simples simples son mejores tener la consistencia por aquí. Este es el nombre. Voy a tener valor por aquí. Ahora ¿qué es el valor? Valor, necesitamos asignar. Bien, entonces voy a tener cero por aquí, algo como esto. Bien. Pero este no es el nombre real. Tenemos que vincularlo a algo o este si creamos. ¿Bien? Entonces voy a decir sobre el cambio, necesitamos tener manejar el cambio por aquí. ¿Bien? Entonces sobre el cambio, ¿qué pasa? Voy a mencionar eso también. ¿Bien? Ahora, voy a tener por aquí y voy a decir manejar el cambio. Algo así. Bien. Entonces aquí tengo, ya sabes, este campo que se ha agregado, ¿de acuerdo? Ahora lo que estoy haciendo es que estoy haciendo uso de este valor valor, lo que hace es que unirá el valor inicial por aquí. On change activará el evento onchange si hay algún cambio en este campo en particular, ¿de acuerdo? Y ahora mismo estoy enlazando como en el cambio, llamar a esta función particular manejar cambio. Y esta es una función que va a manejar el cambio por nosotros, ¿de acuerdo? Podemos tener algo de lógica por aquí, ¿de acuerdo? Entonces en el cambio de manejo, lo que puedo hacer es aceptar el objeto de evento de aquí. Bien. Y puedo decir que el registro de puntos de consola por aquí, ¿de acuerdo? Y puedo decir E punto objetivo valor punto. Bien. Y por aquí, si entro, bien, creo que esto debería estar bien ahora mismo. Déjame guardar esto. Déjame dirigirme a inspeccionar. Deberíamos ver el registro como y cuando estamos básicamente como y cuando estamos escribiendo. Entonces voy a hacer una actualización dura para que desaparezca todos los errores. Bien. Y sólo voy a decir, para que veas, estoy escribiendo cosas. ¡Uy! Entonces básicamente, esto tiene un valor de cero, básicamente. Entonces eso es un problema por aquí. Si comento esto, déjame comentarlo. Bien. Y ahora si escribo, bien, puedo decir que me encanta. Se puede ver reaccionar. Se puede ver cómo se está activando. Así que está imprimiendo todo cada vez que escribo en cada pulsación de tecla por aquí. ¿Bien? Entonces eso es lo que está pasando por aquí. Ahora valor por aquí que he comentado, bien, es un atributo para entrada que controla qué texto se muestra dentro del campo de entrada. ¿Bien? Entonces si lo vinculo a cero, si digo cero por aquí, verás cero por aquí, como estábamos viendo. Y normalmente el campo de valor suele usarse para vincular un campo en particular a una variable de estado. ¿Bien? Aún no tenemos una variable de estado creada, que vamos a estar creando en el momento, pero por eso se está usando value y lo he comentado hasta que tengamos el estado de variable que se está creando, ¿de acuerdo? Al cambiar por aquí, lo que hace es un manejador de eventos que rastrea el cambio en el campo de entrada Entonces, cada vez que el usuario ingresa o edita la entrada, se activa la función de cambio, lo que le permite actualizar el estado con el nuevo valor de entrada ¿Bien? Entonces aquí, ahora mismo, todavía no estamos jugando con Estado, pero lo que estamos haciendo está en el cambio, estamos viendo manejar el cambio, y esta función se activa cada vez que hay algún cambio en el campo de entrada. Y ¿qué estamos haciendo en manejar el cambio? Estamos aceptando el objeto evento, y estamos diciendo et target dot value, que nos está dando el valor que hay en el campo de texto, ¿bien? Entonces E básicamente representa el objeto de evento que se pasa a la función cuando ocurre el evento, y el evento puede ser cualquier cosa como hacer clic en un botón o escribir en un campo. Eso es algo básico en cuanto a cómo está funcionando este código hasta el momento. ¿Bien? Ahora, lo que vamos a hacer es que necesitamos atar todo a un estado. Entonces voy a decir const voy a decir datos de formulario. Entonces esto es stat que estoy creando y los datos del formulario básicamente me van a ayudar a almacenar los datos para todo el formulario. Entonces podría haber múltiples campos en el formulario. Ahora mismo estamos teniendo campo único. Podríamos tener múltiples campos, y podríamos tener o podríamos hacer uso de los datos del Formulario para almacenar todo. ¿Bien? Entonces voy a decir datos de formulario por aquí. Y lo que voy a hacer ahora es que voy a hacer uso del estado de uso por aquí, usar estado, algo así, y voy a inicializar esto a algo Bien. Entonces por aquí, voy a tener un objeto. Lo inicializaré para objetar, y haré uso de pares de valores clave Bien. Entonces esto estará vacío. El nombre estará vacío. Si mañana hay varios campos encima así que me aseguraré de actualizar este objeto por aquí. ¿Bien? Espero que esto tenga sentido. ¿Bien? Entonces este es el nombre de aquí, y lo tendré de esta manera. ¿Bien? Entonces esto me queda mejor. Bien. Así que sí, esto es datos de formulario por aquí, y ahora lo que tenemos que hacer es lo que yo haría, yo diría sobre el cambio de manejo, ¿de acuerdo? Estamos teniendo el valor por aquí, et valor objetivo, valor de punto objetivo. ¿Bien? Entonces lo que voy a hacer es llamaré set Form data. Porque en cada cambio, quiero asegurarme de que la variable de estado tenga los datos actualizados. Por aquí, voy a decir datos de formulario. Entonces deestructure primero los datos del formulario, cualesquiera que sean los datos que tenga, agregue eso ¿Bien? Y entonces lo que haces es agregar corchetes, haces e punto objetivo nombre de punto por aquí, bien y agregas dos puntos y dices E punto objetivo valor de punto. Vaya, valor. Bien, este tipo de sugerir no es bueno, pero punteó el valor de punto objetivo y voy a agregar por aquí. ¿Bien? Ahora bien, lo que hace esta función es o esta pieza de código hace está por aquí. Entonces esto queda claro cuando a esto se le llama cambio de mango. Siempre que cambies algo en el campo, se llama a cambio de mango. Pasa el objeto evento, que tiene los detalles de todo el evento, ¿verdad? Entonces, lo que estamos haciendo aquí es que estamos viendo datos de formulario establecidos. Bien, desestructurar los datos actuales del formulario. ¿Bien? Entonces con este operador de spread, estamos diciendo mantener los valores existentes datos del formulario, por lo que se propaga por sí mismo. ¿Bien? Y entonces estamos recibiendo el nombre del campo por aquí. Ahora nombre está por aquí si te desplazas hacia abajo, es nombre, derecho, que también es el atributo de aquí, ¿verdad? El atributo y esto deberían coincidir aquí. Nombre y este nombre deben coincidir con la clave de aquí, ¿verdad? Entonces esto es coincidente. Entonces estamos viendo E punto objetivo nombre de punto colon e punto objetivo valor de punto. ¿Bien? Entonces se convierte en el nombre colon, sea cual sea el valor que escribas, ¿de acuerdo? Y cuando se agrega esto, lo que sucede es el campo que ha cambiado porque este es un campo del que estamos hablando. El campo que ha cambiado será reemplazado dentro estos datos esparcidos por aquí. Eso es lo que va a pasar. Establecer datos del formulario siempre escogerá los datos más recientes que existen y actualizará el estado del formulario. Probemos esto si esto está funcionando bien. Voy a hacer duro refrescar. Bien. Y lo que voy a hacer es , bien, en realidad estamos haciendo uso de datos de formularios. ¿Bien? Lo que podemos hacer es por aquí, todavía no estamos haciendo uso del Estado. ¿Bien? Entonces lo que haríamos es que si te desplazas hacia abajo, no estamos viendo ningún tipo de error por aquí. Aquí en el valor. Déjame descomentar esto Ahora tenemos A estado, ¿verdad? Entonces puedo decir el nombre del punto de datos del formulario, algo así. Ahora estamos vinculando esto a una variable de estado, básicamente. Si actualizo, no ves ningún tipo de error, y puedes escribir. Entonces se puede decir prueba. Se puede ver todo entrando en la consola. Aquí, en lugar de imprimir el valor de punto objetivo de punto e punto, lo que podemos hacer es intentar imprimir datos de formulario punto Nombre por aquí. Bien. Vamos a hacer duro refrescar, y luego se puede decir prueba. Se puede ver cómo están entrando los datos actualizados. Bien, entonces esto es un paso atrás, escribimos T y T no ha entrado porque la actualización para T se está haciendo después de que se imprima el valor ¿Bien? Entonces, si mueves esta línea después de que estés actualizando el estado por aquí. Bien, entonces en ese caso, vas a ver lo último. ¿Bien? Entonces si digo prueba, ya se puede ver, vaya, sigue siendo lo mismo por aquí Bien, entonces es porque las actualizaciones son asincrónicas, ¿bien? Y en realidad estás en la misma función. Estás tratando de imprimirlo en la consola, ¿de acuerdo? Pero el estado se está actualizando perfectamente, ¿de acuerdo? No hay ningún problema como tal, así que por ahora me desharé de este registro de puntos de consola, ¿de acuerdo? Ahora, manejemos la sumisión por aquí. Bien. Entonces, ¿qué pasa cuando envías el formulario? Todo bien. Ahora cuando envíes el formulario, primero diremos E dot evitar default. Bien. Ahora, ¿qué es E por aquí? No estamos aceptando E, así que necesitamos aceptar al padre lo siento, necesitamos aceptar el parámetro de tipo E de nombre E, que es evento. Diré prevenir default, estamos haciendo esto porque no queremos el comportamiento predeterminado por aquí. Entonces, el comportamiento predeterminado al enviar en los navegadores es la página recargas. No quiero eso. ¿Bien? Así que simplemente voy a hacer consola dot log. Voy a decir datos de formulario enviados. Por aquí, y por aquí, datos de formulario, algo así. Bien, hiciste esto, y ahora, si te desplazas hacia abajo por aquí, bien, necesitamos agregar una forma por aquí para que la gente envíe el formulario. Entonces lo que voy a hacer es aquí al final, voy a tener un botón. Bien, voy a llamar a esto como botón enviar, y el tipo de este botón es enviar. ¿Bien? Algo así. Déjame refrescarme por aquí, S y refrescar. Todo bien. Y podemos ver nombre es me encanta reaccionar. ¿Bien? Déjame someterme. Se pueden ver los datos del formulario y se puede ver que la variable de estado está actualizada. Se puede ver nombre es me encanta reaccionar. Todo bien. Así que sí, está funcionando absolutamente bien, como puedes ver por aquí, ¿de acuerdo? ¿Cómo es este estado, qué es este estado? ¿ Qué hace este estado? Este estado está haciendo un seguimiento de los datos que existen en la forma, o y estamos haciendo uso del objeto, que consiste en pares de valores clave, ¿verdad? ¿Y cómo es hacer un seguimiento de los datos? Está realizando un seguimiento con la ayuda del cambio en el mango. Entonces, el cambio en el mango se activa en el evento de cambio, ¿de acuerdo? Entonces cada vez que hay algún cambio en el cuadro de entrada, se activa el cambio de mango, y básicamente está actualizando esta cosa por aquí. Básicamente se trata de actualizar los datos del formulario por aquí. Se puede ver. Y los datos del formulario siempre tendrán lo último con lo que sea que escribas estará ahí en los datos del formulario, ¿bien? Y luego está manejando la presentación. ¿Cómo se maneja el envío? Es cada vez que se golpea esto, se trata de prevenir default, y es simplemente imprimir el valor actualizado en los datos del formulario. Bien. Veamos cómo va a funcionar esto si tienes un campo más por aquí. Bien. Ahora bien, si tienes un campo más, déjame duplicar esto de aquí. Voy a tener esto. En vez de nombre ahora tengo correo electrónico por aquí, ¿de acuerdo? Y el tipo es correo electrónico. Bien. Diré correo electrónico. El nombre también es correo electrónico por aquí, formulario datos punto correo electrónico por aquí, y manejar el cambio es el mismo. ¿Bien? Formar datos punto email, así que necesitamos agregar un valor más por aquí, ¿verdad? Entonces voy a decir aquí. Diré coma y agregaré correo electrónico, algo así. Bien, esto está hecho, y lo haré de esta manera. Todo bien. Entonces esto está hecho, ¿verdad? Ahora también tengo correo electrónico. Ahora hagamos una actualización dura, y puedo escribir iOveract voy a decir john a rate Vaya, example.com. Déjame someterme. Momento que presento, verás el nombre es ove reaccionar, y el correo electrónico es jon a tasa example.com Espero que esto tenga sentido. Ahora bien, el número de campos que tienes, el número de atributos que vas a agregar en este objeto de estado por aquí, ¿de acuerdo? Entonces estos datos de este formulario harán el trabajo de manejar todos los datos del formulario por ti, ¿de acuerdo? Y estas dos funciones te ayudarán a administrar los datos, bien, cómo funciona el envío, cómo funciona el cambio, y todo. ¿Bien? Y la forma puede seguir creciendo de vez en cuando, ¿verdad? Entonces espero que hayas podido seguirlo, y espero que esto haya sido útil. 3. Resolución de problemas: errores comunes en formularios básicos de React: Entonces ahora es el momento de que empecemos a mejorar esta forma que hemos construido, ¿verdad? Y vamos a agregar algún tipo de validaciones en esta forma en particular, Porque, ya sabes, cuando estamos trabajando con formularios, las validaciones de formularios son comunes, y es posible que quieras validar los datos que el usuario está rellenando en los formularios, ¿verdad? usuario está rellenando en los formularios, Entonces eso es lo que vamos a hacer. Entonces lo que voy a hacer aquí es que voy a tener una función por aquí, definida, ¿de acuerdo? Voy a decir const, valide. Bien. Y así esta función de validar es una función de flecha por aquí y voy a tener la lógica dentro de esta función. Entonces lo que voy a hacer es que voy a hacerlo primero. Entonces la validación nos va a dar errores, y es posible que queramos hacer un seguimiento de los errores. Entonces primero, voy a decir const por aquí. Voy a crear un estado llamado errores, y voy a llamar a set errors. Bien. Ahora bien, esto nos va a ayudar a hacer un seguimiento de todos los errores que están pasando por aquí, ¿de acuerdo? Voy a inicializarlo para vaciar pares de valores clave, ¿de acuerdo Y dentro validar lo que voy a hacer es crear nuevos errores const, y voy a crear un objeto par de valores clave vacío, ¿de acuerdo? Todo bien. Y ahora lo que voy a hacer es decir si voy a ver los datos del formulario. Necesito verificar si el nombre es llenado por el usuario o no. Quiero hacer nombre como el obligatorio llenado. Entonces voy a decir datos de formulario nombre punto punto Trim. Bien. Si este valor no existe, entonces voy a añadir una exclamación Si este valor no existe, eso es lo que esta condición está comprobando. Diré nuevos errores nombre de punto, y diré que se requiere nombre. ¿Bien? Entonces voy a decir que se requiere nombre, algo así. Todo bien. Y lo que haría es devolvería nuevos errores. Bien. Entonces devolvería nuevos errores, ¿ verdad? Algo así. Entonces esta función, lo que hace es crear mensajes de error. Se trata de validar y crear mensajes de error y devolvernos el par de valores clave o debería decir Entonces aquí, lo que está sucediendo son nuevos errores nombre de punto. Entonces esto va a tener un atributo name con este mensaje. Pero nos está dando un objeto esencialmente con todos los mensajes de error, y la clave es básicamente el nombre del campo de aquí, que es el campo name. Entonces aquí puedes ver este es el campo de nombre. ¿Verdad? Ahora bien, lo que tenemos que hacer es que tenemos que activar esta validación por aquí. ¿Bien? Ahora bien, ¿cuándo debemos activar validar? Entonces veremos en manejar enviar. ¿Bien? Voy a decir const, errores de validación Bien, los errores de validación son iguales a validar, ¿de acuerdo? Algo así. Todo bien. Y voy a decir si voy a tener que verificar si los errores de validación tienen algún par de valores clave. Entonces voy a decir objeto enseñado claves. Entonces, si las claves de punto de objeto para errores de validación, bien. La longitud enseñada es mayor que cero aquí. Bien. Entonces lo que tenemos que hacer es decir realmente los errores establecidos. Bien, voy a establecer errores, y voy a decir errores de validación. Así. Bien. De lo contrario, lo que haremos es enviar el formulario, ¿verdad? Si no hay error de validación, entonces necesitamos enviar el formulario. Entonces, ¡Uy! Así que solo voy a tener esta cosa por aquí y voy a cortar esto y voy a mover esto dentro del bloque se porque el formulario solo necesita ser enviado cuando no hay errores de validación. ¿Bien? Algo así. Está hecho. Bien. Y si, creo que esto es todo. También necesitamos mostrar los mensajes de error. ¿Bien? Así que me desplazaré hacia abajo por aquí. Bien. Y aquí, justo al lado del nombre, ¿de acuerdo? Justo al lado de nombre en el cambio de manija. Bien, voy a tener algún código por aquí. Voy a decir errores tensos, nombre por aquí. Si los errores punto nombre, y voy a hacer uso de lógica y, y voy a decir span y voy terminar la etiqueta span por aquí y voy a decir errores, Tt, nombre, algo así. Bien. Entonces ahora si hay algún error, se mostrará por aquí, ¿de acuerdo? Entonces esto se muestra sólo si esto es cierto. Si los errores nombre de punto existen sólo entonces esto se muestra. De lo contrario, no se muestra. ¿Bien? Si presento esto, no estoy viendo nada en este momento. Entonces no está funcionando probablemente porque creo que he cometido un error por aquí en trim. Así que trim es básicamente una función. Extraño este preceso de ronda abierta y de cierre. Bien. Déjame refrescarme. Y si digo enviar, verás que se requiere nombre. Todo bien. Y se está mostrando de una manera rara porque literalmente no hay CSS que esté usando. Bien, CSS muy básico. Pero entiendes cómo funciona esto, ¿de acuerdo? Puede agregar CSS según su elección si lo desea. Todo bien. Entonces lo que puedo hacer es por aquí en lapso, puedo decir estilo por aquí, aquí mismo. Puedo decir dentro de esto, puedo decir color, correcto. Así. Bien, entonces puedes ver que ahora es de color rojo, ¿verdad? Y, sí, tienes los errores que se muestran, bien, por aquí. Para ajustar cosas en nueva línea o tener un salto de línea por aquí, lo que puedo hacer es después de renderizar el elemento span, puedo agregar una etiqueta de salto de línea por aquí así. Bien. Entonces esto asegurará que las cosas estén en la nueva línea, derecha, y el mensaje de error se muestre de esta manera. Pero puedes ver cómo se requiere nombre se entra, y puedo escribir. Puedo decir prueba, y puedo ver enviar. ¿Bien? Uy, sigue ahí. 1 segundo Déjame revisar. Entonces prueba. Esto está funcionando bien. Y si me deshago de esto, bien, esto no está ahí. Y entonces si tecleo, esto sigue ahí. Entonces esto no se está limpiando es porque los nuevos errores o el estado de error de aquí no se está borrando. Bien, entonces no estamos actualizando ya que tecleo los datos, ¿no? Entonces lo que tenemos que hacer es aquí en manejar el cambio, bien, ya que estamos escribiendo los datos o en manejar enviar. Bien, así que es mejor que me encargue de esto en el cambio de mango por aquí. Entonces aquí en manejar el cambio, lo que voy a hacer es crear un concepto por aquí. Bien, y voy a tener valor de nombre. Bien. Y voy a decir e punto objetivo. ¿Bien? Entonces lo que estoy haciendo es que estoy obteniendo el nombre del campo y el valor o donde está ocurriendo el cambio. ¿Bien? Eso es lo que estoy haciendo aquí con esto, ¿de acuerdo? Y luego después de que se hayan establecido los datos del formulario, voy a decir bien si hay algún valor para errores y nombre, Bien, donde está ocurriendo el cambio. Bien. Entonces en ese caso, digamos const nuevos errores, o y voy a desestructurar los existentes, bien. Reestructurar los existentes. Todo bien. Y entonces lo que podemos hacer es decir eliminar nuevos errores, y voy a decir nombre. Bien. Eso es un poco de manejo por aquí. ¿Bien? Y voy a decir set errors, y voy a establecer el nuevo objeto error, voy a decir nuevos errores. Así. Bien. Esto está hecho. Y ahora a medida que cambiemos, verás que se está borrando el error. ¿Bien? Si me deshago de esto y si digo enviar, se requiere nombre, y si digo me encanta reaccionar, el error se ha ido. Se puede ver lo dinámico que es esto. Bien. Puedes actualizar esto y mejorarlo para otros campos también. Pero para este campo único, también tenías tanto trabajo, ¿verdad? Así que puedes imaginar cómo las validaciones pueden llegar a ser complejas por aquí Bien. Entonces, el objetivo aquí de hacer todo esto y mostrártelo era mostrarte cómo se pueden construir formas reaccionan sin hacer uso de ningún tipo de biblioteca por aquí, como formas de gancho, ¿de acuerdo? Entonces, si estás manejando formularios por ti mismo en react, esto es todo lo que tendrás que hacer, ¿de acuerdo? Se puede ver como un formulario con sólo dos campos que tenía tanto que escribir. Hay muchas duplicaciones de código, ¿verdad? Entonces, para múltiples campos, la función de cambio de mango crecerá en tamaño, ¿verdad? Habrá mucho código ahí dentro. Para la validación, hay que agregar más validaciones, Entonces, por ejemplo, por aquí, estamos agregando validación en la función validate para name, ¿de acuerdo? También es necesario agregar validación similar para correos electrónicos. ¿Bien? Ahora, envía un correo electrónico si quieres agregar algún tipo de validación compleja, como quieres verificar, agregar la tasa y el formato de correo electrónico, tendrás que escribir todo eso. Bien. Entonces agregará mucha complejidad por aquí. Este método también crecerá, ¿bien? Y con muchos campos, imagina cómo se convertirá la re renderización, ¿ verdad? Se volverá complicado. Entonces sí, así que ese es el problema que quiero destacar por aquí. Bueno, un enfoque habría sido mostrarte directamente haciendo uso de formas de gancho de reacción y explicándote lo fácil que es usarlo, ¿de acuerdo? Pero yo quería pasar primero por la vía dura, ¿de acuerdo? Entiende esto primero en cuanto a cómo se están manejando las cosas en reaccionar usando JavaScript. Bien. Así que también estoy haciendo uso del código JavaScript y reacciono características como estados por aquí. ¿Bien? Cómo se están manejando las cosas en reaccionar usando JavaScript. Bien, eso necesitas entender primero. Sólo entonces entenderás la importancia. Entonces, si pasas por esto, solo entonces entenderás la importancia de hacer uso de formularios de gancho de reacción o alguna otra biblioteca, ¿verdad? Entonces eso es algo que quería destacar. Todo bien. Entonces espero que tengas una idea de cómo puedes hacer validaciones, manejar envíos y administrar los mensajes de error con react y mensajes de error con react 4. Libera el poder: profundiza en React Hook Form: Oye, ahí. Entonces ahora es el momento de que comencemos a hablar de reaccionar Hook formas. Entonces, si buscas en Google React Hook, serás llevado a esta página web, o encontrarás este enlace en google.com o cualquier motor de búsqueda favorito de tu elección Así reacthokfm.com. Este es el sitio web de aquí. Asegúrese de tomar nota de los guiones de aquí. ¿Bien? Ahora bien, esto es lo que vamos a usar aquí, y puedes ver que es una solución flexible, extensa, fácil de usar extensa, fácil de usar con validación para formularios de reacción. ¿Todo bien? Hay un montón de características que destacan por aquí. También tienen una versión de código sandbox por aquí para que edites y juegues, ¿de acuerdo? Y se pueden ver las características, aísla el render. Así que hay minimización de renderizado, ¿de acuerdo? Te suscribes, ¿de acuerdo? Por lo que el rendimiento es un aspecto importante de la experiencia del usuario. Así puedes suscribir campos de entrada individuales sin volver a renderizar todo el formulario, ¿bien? Entonces por aquí, es una cantidad rápida. Por lo que proporciona una gran cantidad de beneficios en comparación con la gestión de formularios tradicional y React. Y si vas a empezar, encontrarás algunos fragmentos de código por aquí. ¿Bien? Entonces puedes usarlo para JavaScript, mecanografiado, bien, dependiendo de tu requerimiento Todo bien. Así que seleccionaré JavaScript por aquí porque estás haciendo uso de react. Y aquí, puedes instalarlo de esta manera. Entonces es una biblioteca externa que estás usando y usando el administrador de paquetes de NPM, puedes instalarla en tu sistema y agregarla a tu proyecto aquí Bien. Ahora, aquí hay algunas cosas que debes tener en cuenta en cuanto a cómo funciona. Entonces lo primero es si tienes un formulario creado, Bien. Lo primero es que necesitas importar este gancho. Bien, necesitas agregar este gancho. Entonces necesitas obtener estas funciones dependiendo de lo que quieras, acuerdo? Así registrar la función. Hay diferentes funciones que obtienes del formulario de uso y el formulario uso que obtienes de la forma de gancho de reacción por aquí. Bien. Ahora, registrarse es algo que le permite registrar un elemento de entrada o cualquier tipo de elemento básicamente para reaccionar formas de gancho. Y cuando te registres, lo que pasa es la validación y todo se gestiona, incluso el envío se gestiona mediante formularios de gancho de reacción. ¿Bien? Entonces registrarse es una forma de decirle formularios de gancho de reacción que administren ese elemento en particular por usted dentro del formulario, ¿de acuerdo? También maneja el envío. Así que aquí tienes manejar enviar como puedes ver, y manejar enviar toma cualquier función de tu elección que pases en. ¿Bien? Entonces esta es una función que estamos pasando. Es la función de flecha. Y cualquiera que sea la función que pases se activa después de las validaciones y todo por las formas de aro de reacción ¿Bien? Y también, si ves por aquí, estás en este campo. Se puede ver el colon requerido verdadero. ¿Bien? Entonces, si quieres que este campo sea obligatorio, bien, entonces puedes haber requerido dos puntos verdaderos como el atributo de aquí, ¿de acuerdo? Y dice, incluir validación con requerido, bien, y otras reglas de validación HTML estándar, ¿de acuerdo? Y puedes mostrar los errores de esta manera. Todo bien. Se puede ver cómo se muestran los errores de ejemplo de errores requeridos. Entonces tienes acceso a errores por aquí. Bien. Entonces todo esto es atendido automáticamente, y si te desplazas hacia abajo por aquí, si vas a aplicar validación, puedes ver, estos son todos los campos de validación. Bien, puedes ver, estos son todos los campos de validación patrón requerido. Si quieres hacer algún tipo de coincidencia de patrones. Bien, si tienes algunas reglas de validación personalizadas, puedes hacerlo. Puedes tener mínimo y máximo para un valor aquí o para un campo por aquí. Todo esto, sin escribir gran parte de un código, solo tienes que especificar lo que quieres y todo lo demás está cuidado. Ahora imagina hacer esto en JavaScript Vanilla, ¿verdad? Sin usar formas de gancho de reacción. Bien, imagina hacer esto, ¿verdad? Entonces ya hicimos esto en una de estas aplicaciones de aquí que ves. Bien, entonces estoy manejando. Tengo este formulario por aquí, y estoy administrando todos los así que déjame a pantalla completa, y estoy manejando todos los errores y validaciones por aquí, mensajes de error por aquí usando estas funciones, Y, si, por solo dos campos, hay mucho código ahí, ¿verdad? Entonces lo que voy a hacer es que es una forma muy sencilla que ya tengo. Lo que voy a hacer es recortar esta forma para hacer uso de formas de gancho de reacción. Y cosas como validación y s aprenderán sobre todo eso por aquí, ¿de acuerdo? Entonces sí, eso es algo que vamos a cubrir. ¿Bien? Entonces lo que voy a hacer es, primero lo primero, necesitamos instalar formularios de gancho de reacción. Así que puedes copiar esto, ¿de acuerdo? Y ven aquí, dirígete a la terminal. Bien. Y puedes agregar esta cosa o ejecutar esto en el directorio raíz de tu proyecto. Ahora, una vez que hagas esto, habrá un poco de procesamiento dependiendo de tu conexión a Internet, velocidad y tu sistema, pero debería instalarse rápidamente. Voy a minimizar esto ahora. Y si vienes aquí a empaquetar a Jason, verás que se agregan formas de gancho de reacción. Así que déjeme por aquí. Se puede ver reaccionar en forma de gancho, ¿verdad? Por lo que esto se ha agregado a nuestra lista de dependencias. Todo bien. Y lo que ahora tenemos que hacer es que tenemos muchas funciones creadas al manejar cambio al enviar, validar y todo esto. No necesitamos todo esto. Voy a deshacerme de todo esto. ¿Bien? Yo sólo eliminaré todo esto. Voy a recortar este ejemplo por aquí, ¿de acuerdo? Al presentar, vamos a pasar algo, ¿de acuerdo? Valorar también no necesitamos. Por lo que este campo de entrada también se recortará por aquí. Bien. Bien. Entonces, en realidad, me desharé de todo esto. Entonces aquí. Bien, este va a ser un campo de entrada muy simple ahora, bien, entrada y vaya. Entonces creo que voy a tener un tanque de cierre automático. Voy a deshacerme de esto, ¿de acuerdo? Bien. Y voy a tener, hecho, dejarme hacer una cosa. Voy a tener el botón por aquí, ¿de acuerdo? O simplemente tengo las etiquetas. Voy a deshacerme de estos campos de entrada por aquí. ¿Bien? Sólo voy a tener las etiquetas. Bien, entonces tengo la etiqueta por aquí. Tengo la etiqueta por aquí. Bien, me estoy deshaciendo de todos los campos de entrada. Hay un botón de enviar, el cual es necesario para enviar el formulario. Eso es. Acabo de hacer mucha limpieza. Yo solo me desharé de la entrada también en la parte superior. Haremos insumos frescos cuando lo necesitemos, ¿de acuerdo? No necesito manejar enviar también, ¿de acuerdo? Ahora bien, esta es una forma que tengo versión de recorte bastante simple. Bien. Yo sólo voy a quitar esto. Aún no hay nada en la forma. No he agregado campos de entrada. ¿Bien? Ahora, primero lo primero, lo que vamos a hacer es que necesitamos hacer uso de la forma de gancho de reacción. Entonces voy a decir Import, usa el formulario por aquí. Puedes ver esta sugerencia. Utilice la forma de la forma del gancho de reacción. Así que solo seleccionaré esto y tendrás que Importar agregado. Bien. Ahora lo que vas a hacer es que necesitamos, voy a decir const Necesitamos registrarnos, y voy a decir usar formulario por aquí. Entonces usando este gancho, bien, necesito importar o necesito obtener estas dos funciones. Así que regístrate y yo diré manejar enviar, ¿de acuerdo? Entonces estas son las dos funciones o propiedades que puedes decir. Bien. Estas son las dos funciones a las que necesitas acceder, bien, desde el formulario de uso. Bien, y eso es lo que estamos haciendo por aquí. Entonces después de tener acceso a estas dos funciones como registrarse y manejar enviar, bien, hablaremos de ellas. Entonces, ¿qué es el registro? ¿Bien? ¿Por qué necesitas registrarte? Entonces Registrarse es una función que se proporciona dentro del formulario de uso gancho, que se proporciona para espiar reaccionar forma de gancho, y se utiliza para registrar los detalles que desea reaccionar forma de gancho para manejar. ¿Bien? Por ejemplo, si hay un campo de entrada, es posible que desee registrar ese campo en particular con forma de gancho de reacción. ¿Y por qué quieres registrarte? Porque quieres reaccionar hook form para gestionar la validación, sumisión, todo. Desea reaccionar en forma de gancho para realizar un seguimiento del cambio en cada campo de entrada y todo eso. Bien entonces por eso, querrías decirle reaccionar para formar eso, oye, maneja este campo en particular por mí, ¿verdad? ¿Cómo lo dirías? Eso lo haces con la ayuda de registrarte, por aquí. ¿Bien? Así que permítanme agregar un campo de entrada por aquí. Así que sólo voy a decir entrada por aquí, algo como esto. ¿Bien? Y voy a añadir una etiqueta de cierre automático. No necesito esto. Bien. Y por aquí, voy a decir, voy a añadir dos puntos lo siento, no dos puntos. Se trata de soportes redondos. Diré puntos gratis y me registraré. Bien. Y aquí, voy a pasar en Nombre, algo así. Así es como te registras. ¿Bien? Así que esto está hecho, ¿de acuerdo? Hemos agregado registro, y lo que ahora puede hacer es que tendremos una función on submit, así puedo decir const en submit submit, voy a hacer uso de la función de flecha por aquí Bien, algo como esto y voy a decir consola dot log. ¿Bien? Registro. Diré datos por aquí. ¿Bien? Entonces este es un formulario de datos que quiero iniciar sesión por aquí. Ahora, maneje enviar. Entonces tenemos que decirle a manejar enviar eso, oye, usa esta función para manejar enviar por mí. ¿Bien? Entonces lo que voy a hacer es que voy a venir aquí a formar, voy a decir manejar enviar Ups. Entonces 1 segundo. Diré al presentar, en primer lugar, al presentar. Bien. Y dirás manejar enviar y dirás en enviar, algo como esto. ¿Bien? Esto está hecho. ¿Bien? Ahora bien, lo que sucederá es siempre que ocurra el envío, ok, tendrás esta función activada con los datos. ¿Bien? Veamos si esto está pasando bien. ¿Bien? Se comprobará esto. Entonces iré a Consola. Voy a hacer duro o fresco. Voy a aclarar esto y voy a decir test submit. Puedes ver Nombre como prueba y cuántas líneas de código tuviste que escribir. ¿Bien? Sólo tenías que registrar esto. En primer lugar, antes de registrarse, había que hacer algunas tareas domésticas importando formularios de reactor. Tienes acceso a este registro y manejar enviar desde el formulario de uso, ¿de acuerdo? Y luego acabas de registrarte nombre, y ahora estás obteniendo los datos por aquí. ¿Bien? Ahora, el correo electrónico no está registrado, así que permítame agregar el correo electrónico por aquí también. ¿Bien? Entonces si digo correo electrónico, bien. Y esto es correo electrónico para mí, bien. Y si no registro este campo de entrada, no va a funcionar, pero necesito registrarme. Entonces voy a decir tres puntos, ¿cuál es la sintaxis? Veré el registro, y especificaré el correo electrónico por aquí. Voy a guardar esto. En el momento en que hagas esto, si refrescas, si te envío, verás el nombre y el correo electrónico como vacíos. ¿Bien? Ahora, cualesquiera que sean los cambios que ocurran, bien , prueba y A, verás que ambos aparecen en los datos. ¿Bien? Apenas estás haciendo nada. No estás administrando estados, no estás haciendo nada. ¿Bien? Acabas de decir reaccionar formas de gancho que, oye, registra esto y maneja esto por mí. ¿Bien? Ahora, react Hook form está haciendo todo por mí por ti, esencialmente. Tienes en enviar, estás diciendo manejar enviar. Este es el handle submit desde el formulario React Hook, y estás dando la función que necesita ser activada al sumisión, ¿de acuerdo? Porque podrías tener un envío personalizado o una forma personalizada de enviar datos, ¿verdad? Quizás quieras hacer una llamada EPI o algo así. Entonces después de todas las validaciones y todas están hechas, Bien, esta función se llama con los datos Todo bien. Entonces, para poner o resumir todo, ¿de acuerdo? Formulario de uso inicializa el manejo de formularios con forma de gancho de reacción ¿Bien? Eso es lo que hacemos. Regístrese, estamos haciendo uso para registrar los campos de entrada para la gestión de formularios. Handle submit hace el trabajo de manejar los envíos de formularios y recopilar los datos del formulario para nosotros. Y al enviar es una función personalizada que se activa en el envío de formularios, y hace un trabajo simple de registrar los datos del formulario. ¿Todo bien? Ahora bien, hay muchos beneficios de usar formas de gancho de reacción, bien. El primer beneficio que puedes ver de este código es menos código abreviado. No tienes que escribir mucho código para poner en marcha tus formularios. Menos código estándar, y tu componente también se ve simple, ¿verdad? Mejor rendimiento. Ahora, un mejor rendimiento significa que minimiza la re renderización en cada cambio de valor Entonces, si hay algún tipo de cambio de valor, si estás cambiando algo en el campo por aquí, ¿de acuerdo? En el manejo tradicional de formas y reaccionar, lo que sucede es que el componente se vuelve a renderizar. Pero en reaccionar a los formularios, el componente es que el formulario no se vuelve a renderizar cada vez que escribes en un campo, y esto hace que tu formulario sea más rápido, especialmente para aplicaciones grandes. Las validaciones se hacen más simples. Aún no hemos tocado las validaciones, pero Cosas como verificar si un campo está rellenado, o verificar si el correo electrónico es Todas estas validaciones estándar están incorporadas. Solo hay que agregar una palabra, y solo hay que decirle a las formas de gancho de reacción que, Oye, haz este tipo de validación, y eso es todo. Lo hace por ti, ¿verdad? No tienes que escribir las cosas manualmente para estas cosas estándar, ¿verdad? Entonces, en general, hace que el manejo de formularios sea muy fácil. Facilita recopilar datos de formularios, realizar un seguimiento de ellos y no es necesario actualizar manualmente State para cada campo de entrada como lo hace con los formularios de reacción regulares. Todo bien. Entonces, en definitiva, te hace la vida mucho más fácil. ¿Todo bien? Espero que estés impresionado con las formas React Hook, y, sí, exploraremos esto mucho. Y está siendo de uso común. Así que también verás esto en muchos proyectos. 5. Información en tiempo real: monitorea los valores de los formularios con React Hook Form: Oye, ahí. Entonces ahora es el momento de que comencemos a hablar de ver valores con formas de gancho de reacción. Ahora bien, ¿qué significa ver valores con formas de gancho de reacción? Entonces habrá escenarios en los que quieras hacer un seguimiento de qué valor está dando el usuario como insumo a medida que escribe, ¿verdad? Y quieres que sea quizás quieras que sea un poco en tiempo real, ¿verdad? Entonces aquí es donde entra en escena el reloj . Entonces, ¿qué es el reloj? Ver es una función, como se puede ver en el ejemplo de aquí, ¿de acuerdo? Se nos proporciona mediante el formulario React Hook, y usando esto, puedes ver cualquier valor, ¿de acuerdo? Ahora, siempre que registres un campo, bien, le das un nombre, ¿verdad? Entonces al momento de registrarte, dices registrar este campo, y este es el nombre del campo con el que quiero registrarlo. ¿Bien? Entonces aquí, en este ejemplo en la página web, se puede ver que el campo de entrada está registrado como nombre de ejemplo, ¿verdad? Entonces lo que haces es importar la función watch por aquí, y luego dices ver ejemplo. Ahora, cada vez que escriba algo en el registro por aquí en esta entrada de registro, esto se activará y watch tendrá el último valor de lo que esté haciendo. Entonces, básicamente es vigilar lo que está sucediendo con esa entrada y qué valor está entrando. Intentemos esto manos a la obra para obtener una mejor comprensión. Entonces voy a cambiar a nuestra aplicación. Tenemos esta sencilla aplicación donde estamos haciendo uso de formas de reacción. Un par de campos que estamos usando Input, name y input email. ¿Bien? Ahora, nombre está registrado con este nombre por aquí, y el correo electrónico está registrado con el nombre correo electrónico. ¿Todo bien? Ahora bien, ¿cómo vemos el valor? Entonces, lo primero, el paso uno es que nos ingresen reloj o agregamos vigilancia por aquí, ¿de acuerdo? Y luego por aquí, lo que podemos hacer es que puedo decir vigilar y por aquí, puedo decir nombre, algo así. Quiero ver nombre. Puedo asignar el valor de aquí a una variable o dejarme simplemente registrar el valor. Veamos qué pasa. ¿Bien? Entonces voy a decir Consola. Vaya, registro de puntos de consola por aquí, y algo como esto Bien. Déjame solo ahorrar. Se puede ver indefinido entrando. Bien. Ahora como iPanE puedes ver, ver siendo disparado Se puede ver ¿verdad? Se activa el reloj. Lo que sea que esté escribiendo , pueden ver, como la salida de aquí en la consola. Eso es reloj para ti, ¿verdad? Entonces este es el reloj. Ahora tienes un campo más por aquí, que es el correo electrónico, ¿verdad? Ahora, incluso si el correo electrónico está escrito, ¿de acuerdo? Estoy escribiendo el correo electrónico por aquí. Bien. Entonces no hay vigilancia para el correo electrónico por aquí, ¿verdad? Entonces es posible que desee agregar un reloj para correo electrónico también, y puede hacerlo usando la misma sintaxis, ¿verdad? Ahora bien, en lugar de tener el valor de name siendo logueado de esta manera, lo que recomendaría es que hagas uso del efecto de uso, use effect hook. Entonces lo que haría normalmente es comentarlo. Bien. Déjeme comentar esto. Yo diría que const vigilaba el nombre por aquí, ok. Y voy a asignar esto a ver y voy a decir nombre. Bien. Por lo que queremos hacer uso del efecto de uso. Diré const, mirado. Correo electrónico por aquí y voy a decir ver correo electrónico. Entonces estoy vigilando los dos campos ahora mismo. Yo quiero hacer eso. Lo que voy a hacer es hacer uso del efecto de uso. Ahora hay una razón por la que estoy usando use effect porque quiero mantener el registro del valor para los nombres separados de mi lógica de renderizado, justo aquí. Y usar el efecto de uso es una buena práctica para todo este tipo de efectos secundarios. Voy a hacer uso del efecto de uso. Esta es una sintaxis. Tengo una función de flecha por aquí, así, y tengo dependencia E así. O Esta es una sintaxis. Bien. Lo que vamos a hacer es por aquí dentro de esta lógica en particular, voy a decir log por aquí, log de consola, y voy a decir name value, name, y voy a decir nombre visto, algo así. Bien. Y voy a deshacerme de esto y aquí voy a decir nombre visto. Entonces, cada vez que cambia el nombre del reloj, este gancho de efecto de uso se ejecuta e imprime el valor del nombre del reloj. Puedes tener un gancho más como este, agrégalo por aquí. ¿Bien? Y esto podría vincularse al correo electrónico. Correo electrónico. Bien. Para que puedas decir correo visto, correo electrónico visto, algo así. Ahora, voy a refrescarme, puedes decir nombre como puedes decir me encanta, reacciona. Ves que el nombre se está imprimiendo por aquí. Correo electrónico, se puede decir correo electrónico en t example.com. Para que puedas ver cómo estás viendo los valores y si los envías, verás los datos que se están imprimiendo. Ahora bien, la pregunta es ¿qué está pasando? Bien. Entonces la pregunta en realidad es qué está pasando y por qué querrías hacer uso del reloj. ¿Cuáles son los casos de uso reales? ¿Bien? Lo primero, cuando estás registrando el campo con los formularios react hook, en realidad lo estás registrando usando un nombre, ¿verdad? El nombre de aquí es nombre y por aquí, nombre es correo electrónico. ¿Bien? Así que el formulario react hook identifica este campo como nombre y correo electrónico. Ahora cuando quieras ver los valores, puedes importar esto u obtener esta función desde la forma del reactor y podrás verla de esta manera. Ahora, cualquier tipo de cambio en el campo desencadenará esta actualización por aquí, y esto es completamente en tiempo real. ¿Bien? Ahora bien, si quieres mostrar estos campos, te recomiendo hacer uso de Effecto por aquí Porque eso separa la impresión de valores luego renderizando la lógica, ¿de acuerdo? Ahora bien, ¿por qué querrías hacer uso de esto? ¿Bien? Entonces, lo primero es la cosa número uno es la renderización condicional. Así podrás vigilar para renderizar condicionalmente partes de tu formulario en función de los valores ingresados por el usuario ¿Bien? Por ejemplo, mostrar u ocultar campos adicionales basados en la selección e. ¿Bien? Entonces este tipo de cosas, si hay diferentes tipos de campos por aquí. Entonces aquí estamos teniendo insumo. Si ha seleccionado por aquí o un menú desplegable o un botón de opción. Entonces puedes ver el valor en cuanto a lo que está sucediendo. Y dependiendo de lo que el usuario esté seleccionando ingresando, bien, puedes renderizar condicionalmente el formulario Y esto es tiempo muy real incluso antes de que se envíen los datos. ¿Correcto? Entonces este es un caso de uso. Validación en vivo, es posible que desee tener validación en vivo por aquí ya que el usuario está escribiendo el nombre, ¿de acuerdo? Y si va o intenta escribir un número, posible que quieras mostrar un mensaje de error de inmediato que, oye, el número no está permitido. Al igual que, el nombre no puede ser numérico. Entonces todo este tipo de validaciones en vivo lo puedes hacer o puedes mostrar pistas a medida que el usuario escribe Entonces, si el usuario está escribiendo un título, digamos, title es un campo. Y si tecleas un título muy largo, puedes tener una pista de que, oye, esto es más allá de diez personajes, bien, no se recomienda, algo así, ¿verdad? No es un error, sino una sugerencia a un usuario o una pista cómo puedes mejorar el título en tu forma, por ejemplo, ¿de acuerdo? Formas complejas. Entonces, si tiene algún tipo de formularios complejos, entonces watch se puede usar para formularios de varios pasos para monitorear y validar los datos en cada paso antes de continuar e incluso antes de que se envíe el formulario. Entonces estos son algunos de los casos de uso directo del reloj, ¿de acuerdo? Y creo que te puedes imaginar lo útil que es esto, ¿verdad? Y es súper útil porque es bastante eficiente en tiempo real, y es súper fácil de usar con un código mínimo. Literalmente hemos escrito mucho menos código, bien. Este código es literalmente para imprimir los valores, ¿de acuerdo? Esto no es necesario si no quieres imprimir, pero esto es literalmente lo que es. Bien, acabas de conseguir reloj y estás haciendo uso de la función de vigilancia por aquí, ¿verdad? Espero que esto sea útil. Y por aquí con US Effect, estos dos ganchos de efecto estadounidense están separados porque esto está activando al cambiar el nombre del reloj, y esto se está activando en el cambio de correo electrónico de vigilancia. Todo bien. Entonces espero que esto sea útil y espero que hayas podido seguirlo. 6. Experiencia de usuario perfecta: agrega validaciones en forma de hook en React: Entonces ahora es el momento de que comencemos a hablar de validaciones con forma de gancho de reacción Ahora bien, ¿cómo funciona la validación? Así que las validaciones funcionan de una manera muy sencilla con mucho menos código repetitivo Y se pueden especificar reglas de validación a la hora de definir los campos. Por ejemplo, aquí en mi pantalla, estoy en la página de Get Started de react Hook form, y por aquí se ve este ejemplo. Bien, este es el primer ejemplo que ves. Esto incluye una validación básica. Se puede ver. Por lo que dice, incluir la validación con reglas de validación HTML requeridas o cualquier otra norma. Y se puede ver cómo está incluyendo la validación. Está registrando primero el campo por aquí. ¿Bien? Y entonces está diciendo que requería verdad. ¿Bien? Ahora bien, lo que hace esto es que registra este campo y también le dice a React Hook form que, oye, este campo requiere un valor. Por lo tanto, el usuario no puede omitir este campo ni enviar el formulario sin pasar un valor para este campo. Bien. Ahora bien, si el campo no está rellenado , o, como, no se encuentra ningún valor por aquí, y si hay un error de validación, lo que sucede es que obtienes el objeto error, tienes acceso al objeto error, como puedes ver por aquí. ¿Bien? Ahora, este objeto de error es parte del formulario de uso Hook, y es una poderosa característica que se utiliza para administrar y mostrar los errores de validación para los campos de formulario. ¿Bien? Entonces este objeto va a realizar un seguimiento de cualquier error de validación que se produzca cuando el usuario complete el formulario, ¿de acuerdo? Y cada campo de formulario tendrá su propia entrada en el objeto errors, facilitando la identificación qué campo tiene un problema y cuál es ese problema. Bien. Ahora bien, ¿cómo funciona? Entonces, cuando el usuario envía el formulario. Así que aquí tengo registrado la validación como verdadera. Bien necesito requerido verdad, y tengo los errores por aquí, ¿de acuerdo? Ahora, cuando el usuario envía el formulario, el formulario react to comprueba los valores de entrada contra las reglas de validación que dijiste Entonces esta es una regla de validación que he establecido aquí en este ejemplo, ¿de acuerdo? Ahora, en este ejemplo, requerimos que este campo no esté vacío y el usuario envía un campo vacío Entonces se activa el error de validación y se actualiza el objeto de error de aquí, ¿de acuerdo? Y el mensaje de error de validación se está agregando aquí. ¿Bien? Y eso se está mostrando por aquí. ¿Puedes ver? Por lo tanto, se requieren errores punto ejemplo. Entonces, si esto tiene algún valor, entonces muestre este mensaje de error. Se puede ver cómo se está visualizando. ¿Bien? Entonces así es como puedes hacer uso de las validaciones por aquí. ¿Bien? Entonces déjame darte una idea por aquí ¿Bien? Ahora, voy a cambiar a nuestra base de código. Bien. Y aquí tenemos una forma muy sencilla. Estamos registrando dos campos por aquí. Bien. Y estos dos campos, lo que están haciendo es básicamente son campos de entrada como nombre y correo electrónico por aquí. ¿Bien? Ahora bien, lo que estaríamos haciendo es primero, yo vendría aquí. Al registrar el correo electrónico, lo siento, no correo electrónico, voy a registrar el nombre por aquí. Al hacer el registro, según la sintaxis de aquí, se puede ver la sintaxis. Al registrarte, pasas en un parámetro más con las reglas de validación, ¿verdad? Entonces simplemente voy a copiar esto. Bien. Puedes copiar esto desde aquí. Vienes por aquí y dentro de esto, puedes pegarlo. ¿Bien? Por lo que se requiere es cierto por aquí. ¿Bien? Ahora bien, una vez que esto es cierto, necesitas acceder al objeto error, ¿verdad? Entonces puedes decir estado de forma por aquí, estado de forma, cool in, y tendrás errores, algo así. ¿Bien? Entonces esto es algo que tenemos ahora, bien. Y ahora lo que puedes hacer es fuera de la etiqueta, bien puedes tener errores que se muestran. Errores enseñados, se puede decir nombre, Bien. Entonces nombre porque ¿qué es un nombre de campo? El nombre del campo es nombre. ¿Bien? Entonces puedes decir error nombre del punto, y voy a mostrar el mensaje por aquí. ¿Bien? Entonces puedo decir P, y puedo decir que se requiere nombre, algo así, ¿de acuerdo? Voy a guardar esto. Voy a darle a refrescar. ¿Bien? Si envías, verás que se requiere nombre, ¿verdad? ¿Qué hicimos para esto? Acabamos de agregar una propiedad que acabamos de tener acceso al objeto error, y estamos mostrando condicionalmente el mensaje de error Eso es. Eso es. Es así de simple y hace que el código estándar. Recorta el código estándar, ¿de acuerdo? Así que no tienes que escribir mucho código estándar por aquí Solo hay que decir lo que hay que hacer y se está cuidando todo lo demás. ¿Bien? Ahora ahora en este ejemplo, cómo funcionó es al momento de registrarse, decíamos, este es un campo que estamos registrando con el nombre nombre, ¿verdad? Entonces lo que pasó es que los errores se registran en este nombre por aquí, el nombre del campo. Entonces el nombre del campo es nombre, aquí el nombre del campo es correo electrónico. Bien. Entonces, en base a eso, los errores se están registrando por aquí, ¿de acuerdo? Y se están mostrando condicionalmente con la ayuda de lógica y operar por aquí ¿Bien? Ahora, así es como funciona, ¿de acuerdo? Ahora por aquí, en realidad estamos diciendo que se requiere verdad. Pero lo que puedes hacer se requiere true tiene un mensaje de error predeterminado por aquí, ¿verdad? Lo que puedes hacer es digamos error punto nombre punto mensaje. Veamos cuál es el mensaje que llegamos a ver. Para que veas que no vemos ninguna. Bien, en realidad necesito envolver esto. Así. ¿Bien? Entonces esto no existe, ¿de acuerdo? Ahora bien, lo que podemos hacer es aquí, en vez de decir: Bien, no es error. Son errores. Lo siento por eso. Bien. Entonces déjame refrescarme. Si me presento, ¿de acuerdo? No hay ningún mensaje de error que veas. ¿Bien? Ahora, puede establecer un mensaje de error personalizado aquí cuando se requiera registrarse. Entonces puedes decir que se requiere nombre, ¿de acuerdo? Y puedes salvar esto. En lugar de verdad, estás pasando el mensaje de error. Y si envías esto, verás que se mostrará el mensaje de error personalizado , ¿verdad? Entonces así es como también puedes hacer las cosas. Este es también un ejemplo en el que tú en vez de pasar verdadero, pasas en el propio mensaje de error y mostras los mensajes de error de esta manera. Todo bien. Entonces esta es una manera de hacer las cosas. Ahora, aparte de lo requerido, habrá escenarios en los que desea tipo de reglas adicionales o desea tener validaciones complejas Entonces, si vienes a la página web de React Hook Fm, aquí en el lado izquierdo, navegación, tienes que aplicar pestaña de validación. Haga clic en esto, y aquí verá una lista de todas las reglas de validación que se soportan. Se puede ver la longitud mínima, longitud máxima, todo esto, bien, se puede trabajar con. Se puede ver el nombre, o la longitud máxima es de 20. Longitud mínima que puedes establecer dependiendo de cómo quieras hacerlo. Bien. Así que aquí puedes entrar y aquí puedes decir requerido, ¿de acuerdo? Uh, se puede decir requerido, se requiere nombre, y puedo decir minlength, M length, y puedo decir longitud mínima de dos, por ejemplo, ¿de acuerdo? Y luego por aquí, voy a cambiar esto al valor booleano Voy a quitar el mensaje, y por aquí, voy a tener el mensaje como bien, voy a decir nombre es obligatorio y debe tener al menos dos caracteres. ¿Bien? Algo así. Voy a guardar esto. Y ahora, si refrescas, si puedes decir S, puedes ver que el nombre es obligatorio y debe tener al menos dos caracteres. Si vuelvo a escribir S, verás el formulario que se está enviando. Bien. Entonces sí, así es como funcionan las reglas de validación. Y sin esto, también, si no pones ningún tipo de nombre por aquí, verás que esta validación se activa, ¿verdad? Así que esto está funcionando absolutamente bien, ¿de acuerdo? También puedes hacer esto por correo electrónico, ¿de acuerdo? Se puede decir que requerido es cierto por aquí. Bien. Requerido es cierto, algo así. Bien. Y, vaya, así que esto tiene que ser precios dici Algo como esto, ¿de acuerdo? Y aquí, se puede decir, en lugar de errores nombre de punto, tendrá por aquí. Errores puntean correo electrónico, algo como esto. ¿Bien? Por lo que se requiere el correo electrónico, se puede decir. ¿Todo bien? Se requiere correo electrónico, y puedes deshacerte de esto y puedes guardarlo. Y ahora, también se requiere el correo electrónico. Se puede ver que se requiere nombre, se requiere correo electrónico. ¿Bien? También puedes agregar estilo CSS si lo deseas, bien. Pero así es como va a funcionar. Y tienes cosas adicionales como coincidencia de patrones. Bien, puedes hacer una coincidencia de patrones. Puedes ver por aquí, coincidencia de patrones en acción, puedes especificar el patrón que quieres hacer, y esto podría ser muy útil para los correos electrónicos. Bien. Entonces, si tienes un correo electrónico por aquí o patrón de correo electrónico con el que quieres validarlo, entonces también puedes ejecutarlo. Entonces lo que podemos hacer es por correo electrónico, podemos tener este tipo de patrón. Bien, entonces voy a venir aquí. Bien. He requerido correo electrónico por aquí. Bien. Requerido, he especificado a. Voy a decir patrón, algo así, voy a tener esto y voy a especificar este patrón. Voy a armar este patrón. Entonces este es un patrón que está ahí para la validación del correo electrónico. Bien, agregué este patrón. Puedes hacer algo normal de Google y obtener este tipo de patrón, bien, o compartiré este código con todos ustedes para Y si guardas esto, bien, déjame refrescarme. Si envío, se requiere correo electrónico. Escribo en esto, escribo en esto. Aún así, se requiere correo electrónico. Puedes ver el correo electrónico no es válido. Entonces si escribo esto, bien, correo electrónico aún no es válido. Puedo decir.com, y entonces debería funcionar probablemente. Se puede ver que el mensaje de error se fue. Entonces este correo tiene que ser válido, sólo entonces funcionará. Todo bien. Entonces este es un patrón de Javascript para validar correos electrónicos, y busco esto y tengo esto por aquí Entonces una cosa que quiero destacar para nombre por aquí, ves este mensaje completo que nombre no es nombre se requiere, y además debería ser de dos caracteres, ¿de acuerdo? Pero aquí, solo quiero destacar el mensaje de que deberían ser dos caracteres. Y si esto está vacío, entonces quiero resaltar como se requiere nombre. Bien. Entonces dependiendo de qué error esté cometiendo el usuario, quiero resaltar ese mensaje de error. Entonces eso también es posible. Te voy a mostrar cómo se puede hacer eso. Bien. Entonces por aquí, lo que voy a hacer es, solo voy a comentar esto por aquí. Bien. Voy a duplicar esto, ¿de acuerdo? Porque no quiero borrar esa. Quiero que tengas acceso a eso. Bien, ahora por aquí, tengo que registrarme. Bien. Ahora dentro de registro, estoy pasando requerido por aquí, requerido así. Bien. Requerido es cierto. La longitud mínima es de dos. ¿Bien? Ahora, te había dicho que en vez de ser requerido, lo que puedes hacer es que puedas pasar ya sabes que puedes pasar el mensaje por aquí, ¿de acuerdo? Espera un segundo. Me está dando un error. No sé por qué. 1 segundo. Vaya, me perdí los frenillos de cierre por Yo no copié eso. Todo bien. Eso está absolutamente bien. Ocurre. Ya sabes, yo sólo lo cerraré. Bien. Sí. Entonces, al usar required, puede especificar el mensaje de error. Entonces volveré a cambiar a ese método. Voy a decir nombre. ¡Uy! Diré que se requiere nombre, algo así. ¿Bien? Ahora bien, ¿cómo se especifica eso para la longitud? ¿Bien? Así que voy a tener esto por aquí. Voy a deshacerme de este mensaje. Diré error, tot, nombre punto mensaje, ¿de acuerdo? Ahora tengo esto. ¿Bien? Entonces no es error, son errores. Bien. Recuerda tener el nombre de objeto correcto por aquí. Bien. Ahora para esto, lo que puedo hacer es que pueda tener un par de valores clave nuevamente mencionado aquí, en lugar de dos para una longitud mínima por aquí. Bien. Cómo va a funcionar esto es que puedo decir longitud mínima. Voy a deshacerme de dos por aquí. Voy a añadir el pase rizado por aquí. Y voy a decir valor. Bien, hay una propiedad de valor, voy a decir 20. Bien. Y voy a decir mensaje por aquí. ¿Cuál es el mensaje que quieres tener, bien? Quiero tener mensaje como nombre debe tener al menos dos caracteres. Voy a copiar este mensaje. Diré que el nombre debe tener al menos dos caracteres. Hecho. Guarde esto. Ahora refrescar, y ahora escribe en a, voy a decir a en ate gmail.com No quiero ver ningún mensaje de error por correo electrónico. Entonces a@gmail.com, si me envío, verás que el nombre debe tener al menos dos caracteres, ¿verdad? Si elimino esto, se requiere nombre. El nombre debe tener al menos dos caracteres. Si escribo completamente y si presento, debería tener al menos dos caracteres. Vaya, hice esto 20. Lo siento. Voy a guardar esto otra vez. Si envío, verás los datos que se están enviando. Pero si se reduce esto, los nombres deben tener al menos dos caracteres. Si elimina esto, se requiere nombre. Se puede ver lo dinámico que es esto. Esta es otra forma de hacer las cosas, bien. Voy a alejar un poco, o simplemente voy a ir a pantalla completa. ¿Bien? Se puede ver nombre y mensaje. Déjenme llevar esto a la fila. Déjame traer el cierre por aquí. Bien, se puede ver cómo se estructura esto. Entonces te estás registrando por aquí, registrando el nombre. Estás diciendo requerido, se requiere nombre. ¿Bien? Por requerido, este es un mensaje que estás teniendo, ¿de acuerdo? Para longitud mínima, usted está diciendo que el valor es dos, pero quiero tener mensaje también. Entonces tienes esto pasado como un objeto, que es par de valores clave por aquí, bien, puedes ver, y ahora está tomando un objeto con múltiples reglas de validación. Register es en realidad tener el primer parámetro como el nombre del campo, ¿de acuerdo? El segundo parámetro es en realidad un objeto por aquí. Este es el objeto completo, yo. Entonces de esta collibrasa a esta collibrasa. Es todo el objeto que se está pasando para registrarse como segundo parámetro. Y dentro de esto, está esto también, longitud mínima, donde decimos valor es dos y nombre debe tener al menos dos caracteres. Cualquiera que sea el mensaje de error que entre, eso se muestra aquí. Y puedes ver lo dinámico que fue, ¿de acuerdo? Estas son todas las reglas estándar de la gente, ¿verdad? Longitud mínima, longitud máxima, todo lo que ves por aquí, longitud mínima, longitud máxima, bien, Min máx, patrón, ya sabes, validar. Por lo que esto es máximo y mínimo requerido. Todo esto es estándar, ¿verdad? ¿Por qué escribirías código para esto en tu aplicación en todos los campos de cada componente Entonces, si estás usando si estás construyendo una aplicación Farm heavy, imagina lo engorrosa que será para ¿Verdad? E imagina hacer uso de formas de gancho de reacción en una aplicación de forma pesada. Imagínate hacer eso, ¿de acuerdo? Por lo que brinda toda la flexibilidad. Puedes validar las cosas de esta manera, ¿de acuerdo? Incluso puedes validar las cosas de esta manera. ¿Bien? No quiero pasar en mensaje. Quiero tener un mensaje estándar para todas las reglas de validación. Eso se puede hacer. Te he enseñado cómo puedes hacer eso, ¿verdad? Entonces esa es la belleza de las formas React Hook. Es realmente una forma increíble de gestionar formularios en react. ¿Todo bien? Espero que estés disfrutando esto y espero que encuentres valioso todo el conocimiento que estás ganando con esta conferencia, ¿de acuerdo? Así que react Forms ha incorporado reglas de validación como longitud mínima, longitud máxima, todo lo que vemos por aquí, ¿de acuerdo? También puede tener funciones válidas personalizadas para lógica de validación compleja. Al igual que, si crees que necesitas algo más allá de esto, puedes escribir tus propias funciones. Bien. Pero eso es para más allá de esto, ¿verdad? Se puede hacer la gestión de errores a través del objeto de error. ¿Bien? Tienes acceso al objeto error y puedes jugar con el objeto error. Rendimiento, reaccionar a la forma está optimizado para el rendimiento, especialmente con formas más grandes. Todo bien. Entonces espero que esto les resulte útil y espero que esta sea información valiosa para todos ustedes. 7. La velocidad es importante: compara el rendimiento de formularios básicos y React Hook Form: Entonces, comparemos ahora el desempeño de forma normal o forma básica que no hace uso de formas de gancho de reacción. Entonces tengo el código para un formulario básico por aquí, y no estamos haciendo uso de formularios react hook por aquí. Todo bien. Entonces una cosa, se me olvidó quitar esta entrada. Entonces esta es la entrada para las formas de gancho de reacción. Entonces en esta forma particular, no estamos haciendo uso de reaccionar tomó formas, como dije. Es un formulario muy básico con correo electrónico, nombre, y estamos haciendo uso de on handle submit y on change event lesna por aquí, y el valor es como atado a este estado por Bien. Y tienes este enorme gancho de efecto para que podamos hacer un seguimiento de cuándo se renderiza realmente el formulario o cuántas veces se vuelve a renderizar, ¿verdad? Así que no estoy haciendo uso de la matriz de dependencia por aquí, y debido a que no estoy haciendo uso de la matriz de dependencia, esto se activará en cada re render. Y tengo esto en el cambio de mango, que es asegurarse de que el valor se actualice en los estados para cada cambio. Y tengo este manejador enviar para manejar el envío. Entonces ahora llegando a la compilación por aquí, si actualizo, verás el formulario básico renderizado dos veces, y esto es, por supuesto, por el modo estricto. ¿Bien? Entonces eso está absolutamente bien. Voy a acercar un poco. Bien. Ahora, voy a venir y teclear por aquí algo, así voy a decir que se puede ver, cada vez que un tipo en, me encanta reaccionar. Cada vez que escribo, se vuelve a renderizar el formulario. Así que se vuelve a renderizar 14 veces mientras escribí 14 caracteres. ¿Bien? Si escribo correo electrónico, se va a volver a renderizar de nuevo. Se puede ver. Y no es eficiente en el rendimiento. Si envío esto, bien, me sale un error, pero déjame eliminar esto y dejarme enviar. Se puede ver que los datos se envían pero después de una gran cantidad de renderizado. Por lo que esto no está optimizado para el rendimiento. Esto no es bueno. Hay mucho renderizado que está sucediendo, lo que se puede evitar. ¿Bien? Ahora bien, este mismo ejemplo, lo que podemos hacer es que podemos hacer uso de formas de gancho de reacción y reaccionar forma de gancho puede gestionar esto una manera muy efectiva y eficiente con un código mínimo. Entonces aquí estás escribiendo tanto código. Se pueden ver casi 50 líneas de código, pero esto se puede minimizar con formas de gancho de reacción. Ahora por aquí, he convertido este ejemplo en forma de gancho de reacción. Estoy haciendo uso del formulario de gancho de reacción por aquí, se puede ver, y muy menos código. Y aquí tengo dos campos, nombre y correo electrónico. Estoy registrando estos dos campos y tengo un gancho de efecto de uso sin una matriz de dependencia nuevamente para imprimir el formulario de gancho renderizado. Yo también tengo función de envío, que se está pasando de esta manera por aquí. Veamos cómo funciona el renderizado aquí. Si vengo por aquí, se puede ver reaccionar forma de gancho renderizado dos veces. Por supuesto, esto es por el modo estricto. Ahora si escribo, me encanta reaccionar. Bien. Se puede ver que no hay re renderizado que está sucediendo. ¿Bien? También puedes escribir correo electrónico, mail.com y puedes enviar los datos Se puede ver que no hubo ninguna re renderización que sucedió. Entonces esto es mucho más eficiente. React ok form minimiza el renderizado aquí. No vuelve a renderizar el componente, y ese es el beneficio de hacer uso de formas de gancho de reacción. Ahora bien, esta diferencia de renderizado importa mucho. Si está construyendo formularios grandes y complejos, formularios de incorporación complejos o formularios complejos en su solicitud y su solicitud es pesada Entonces esto importaría mucho a largo plazo, en donde si estás haciendo uso de la forma básica, antes que nada, tendrás mucho código reiterado. Sería difícil de manejar. Hay mucha re renderización, y el rendimiento no está optimizado, ¿verdad? Pero con las formas de gancho de reacción, se puede ver menos código. Bien, hay que escribir menos código. Una gran cantidad de código estándar se reduce, y react Hook form proporciona beneficios de rendimiento al reducir re renders innecesarios, haciéndolo más eficiente para el manejo de formularios, especialmente en su caso de uso donde está teniendo una aplicación más grande ¿Todo bien? Entonces espero que esto haya sido útil, esta demostración, y espero que esto les haya dado una buena claridad cuanto a la diferencia y la importancia de las formas básicas versus reaccionar. Y espero que adquieran conocimientos en cuanto a cómo reaccionan las formas son importantes y agregan valor. 8. Restablece y actualiza: domina la gestión del estado de formularios: Entonces ahora es el momento de que comencemos a hablar la funcionalidad de reinicio y ¿cómo se puede agregar la funcionalidad de reinicio usando formularios react Hook? Ahora, reset es una de las funcionalidades que quizás quieras ofrecer aquí. Entonces aquí en esta forma en particular, es posible que desee tener un botón de reinicio. Y también, una vez que se envían los datos, es posible que desee restablecer el formulario y posible que desee borrar todos los valores para que el usuario pueda comenzar con un nuevo envío si así lo desea. Todo bien. Entonces, ¿cómo harías eso? Entonces con react Hook form, es tan fácil como llamar a una función. Entonces, los formularios React Hook ofrecen esta función de reinicio que puedes agregar aquí, ¿de acuerdo? Y puedes hacer uso de ella. Todo bien. Entonces lo que voy a hacer es al presentar, estamos registrando los datos. ¿Bien? Entonces tengo esta forma muy sencilla, que tiene nombre nombre está registrado al reaccionar tomó forma con esta validación. Tienes correo electrónico por aquí, que está haciendo estas validaciones por aquí, y luego tienes errores también que estás mostrando, y tienes un botón que es Y estás manejando el envío de esta manera, solo estás registrando los datos. ¿Bien? Ahora en enviar, también deseo tener el reset, los datos a resetear porque lo que sucede ahora mismo es si someto, si digo A y si digo A en chmail.com, Bien, entonces puedo decir y voy a decir ABC. Esto no es restablecer la forma por aquí, ¿verdad? Entonces lo que puedes hacer por aquí es que reiniciaría el formulario. ¿Bien? Entonces lo que haría es agregar un par de pres rizados antes que nada ¿Bien? Esto está hecho. Y entonces aquí llamaría a esta función de reset. Diré reset. Y voy a decir, lo llamaré así. Bien. Y esto restablecería el formulario después del envío. Entonces lo que puedes hacer aquí es, bien, puedo decir prueba, y puedo decir prueba en mail.com Si digo enviar, borra todo el valor y restablece el Se puede ver que el envío está hecho y se borra el valor. ¿Bien? También puedes agregar un botón. Entonces aquí, se está agregando el botón, que se utiliza para enviar el formulario por aquí. Bien. Lo que puedes hacer aquí es que puedes crear un botón de reinicio. Se puede decir reset por aquí. El tipo es un botón, así que seleccionaré este. Diré botón. Y se puede decir al hacer clic por aquí, hacer clic, puede agregar la función de flecha y puede llamar al reset. Entonces puedes decir reset y puedes llamar a esto por aquí. Bien, algo así. Este es un botón de reinicio. Ahora bien, lo que pasaría es si tecleas algo, Bien. Vaya, lo siento. Entonces, si tecleas algo, puedes restablecer, ¿verdad? Si tecleas algo por aquí, cualquier cosa por aquí, quieres restablecer todo el formulario, tienes esta parte de reinicio. ¿Bien? Entonces esto es un beneficio de reiniciar por aquí. Es tan simple como hacer una llamada de función por aquí y borrar todos los valores. Puedes hacer la llamada a la función desde tu función Jascript aquí que estás definiendo, bien en la función submit, o incluso puedes hacerlo usando esto, en ClickList ahora Todo bien. Entonces espero que esto sea útil y espero que haya obtenido alguna información de esto. 9. Feedback personalizado: crea validaciones personalizadas en React Forms: Entonces ahora mismo, tengo una forma, que está haciendo uso de formas de gancho de reacción, y tengo un par de campos en la forma como esta es una forma. Tengo nombre, y tengo correo electrónico también por aquí. ¿Bien? Ahora bien, la validación que estoy usando por aquí es bastante simple. Como, necesito nombre para ser requerido, y el requisito de longitud mínima es de dos. Aquí, el correo debe ser requerido, y este es un patrón que quiero emparejar para saber si el correo electrónico es válido o no. ¿Bien? Entonces esta es una validación que ya tengo, ¿de acuerdo? Ahora bien, estas validaciones que estoy teniendo son validaciones comunes y estándar, Cuando estés construyendo formularios, habrá escenarios en los que quieras tener algún tipo de lógica de validación personalizada en tus campos de formulario que sea personalizada para tu aplicación. ¿Bien? Ahora, en ese caso particular, existe una opción llamada validar que le permite agregar dichos cheques personalizados a sus formularios. Ahora, por ejemplo, permítame darle un ejemplo aquí. Digamos que quiero que los usuarios que tengan nombre Edmin solo envíen este formulario Ahora bien, esta es una comprobación personalizada que es específica de mi aplicación, y no es algo común o genérico, ¿verdad? Entonces, ¿cómo agregarías eso por aquí? Entonces aquí es donde entra en imagen validar las opciones. Bien. Así validar opción toma función que devuelve true, y devuelve un mensaje de error si la validación cae. ¿Bien? Entonces true es retorno si pasa la validación. Todo bien. Ahora, veamos esto en acción. Entonces digamos en esta forma en particular, voy a tomar el mismo ejemplo donde un salario para comprobar si el usuario o el usuario está teniendo nombre como Edmin. Ahora bien, cómo puedes hacer uso de la opción de validar de aquí es que vienes a ingresar, dices por aquí y puedes decir validar, validar como la opción por aquí. Puedes tener par de valores clave, y puedes mencionar el nombre de la función aquí. ¿Bien? Entonces, ¿cuál es el nombre de la función? ¿Bien? Así podemos crear una función por aquí. Bien, puedo decir const validar nombre por aquí, y esta ganancia tiene valor como parámetro Puedes tener algo como esto, y luego puedes decir si valor. ¿Bien? Entonces puedes decir si el valor es igual a o admin. Bien, o si dices si el valor no es igual a Admin por aquí. Bien. Vaya, valoro no es igual a Admin, entonces lo que haces es regresar Solo se permite admin. Solo se permite admin, algo así. Bien. Dependiendo de tu requerimiento, puedes enviar el tipo de mensajes o puedes elaborar los mensajes dependiendo de qué requisito tengas, pero voy a guardar esto así que tengo esto creado ahora. Ahora, vienes aquí y dices nombre válido, algo así. Guarde esto. Vienes aquí y déjanos refrescarnos. Si vienes por aquí y si escribes AD, no estoy escribiendo Admin. Bien, y tengo un correo G válido. Bien. Correo electrónico válido por aquí. Si envio, verás que solo se permite admin. Bien. Si digo Admin por aquí, admin. Vaya, Admin y si digo enviar, verás que el error se ha ido y puedes enviar el formulario. ¿Todo bien? También puedes tener la lógica para decir que admin no está permitido, ¿bien? Por lo que es necesario revertir la condición. Admin no está permitido por aquí. ¿Bien? Y puedes revertir la condición, algo así. Si es igual a Admin, entonces no permita Admin. ¿Bien? Entonces si digo Admin por aquí, Bien. Todo bien. Admin no está permitido. Se puede ver. Todo bien. Entonces así es como funciona, bien. Y espero que tengas un giro de cómo funciona esto. Incluso puedes acortar esto como si no necesitaras esta función separada por aquí para estar ahí Bien. Entonces en lugar de eso, en lugar de escribir una función separada, lo que voy a hacer es en lugar de llamar a esta función aquí, bien, puedo decir por aquí, bien, puedo escribir una función por aquí misma de una manera taquigráfica Tengo este valor, bien. Haré uso de flecha. Diré que si el valor no es igual a Admin por aquí, ¿de acuerdo? Entonces en ese caso, escribes Admin no está permitido. Bien, algo como esto. Entonces esto funcionará de la misma manera. Todo bien. Puedes ver Admin no está permitido, derecho. Entonces esto volverá cierto. De lo contrario, devuelve este mensaje. ¿Bien? Entonces así es como funciona esta cosa por aquí y puedes deshacerte de esta función si es necesario. ¿Bien? Yo solo comentaré esto. Si vienes por aquí, ¿de acuerdo? Puedes decir admin por aquí y puedes intentar enviar. Puedes ver admin no está permitido. Todo bien. Y sí, esto está funcionando absolutamente bien. ¿Todo bien? Así que esto funciona, ¿de acuerdo? Y aquí, te había dado un ejemplo. ¿Bien? Entonces aquí lo que está pasando es aquí estamos pasando en el mensaje, ¿de acuerdo? Ahora, si no se encuentra el mensaje de puntos de errores, estás mostrando este mensaje personalizado. ¿Bien? Lo que puedes hacer es que puedes tener múltiples reglas de validación en esta única opción. Por ejemplo, aquí estás comprobando si el nombre de usuario es válido o si el nombre de usuario es admin o no, o si el nombre es válido o no. Lo siento, no el nombre es válido o no. Estás comprobando si el nombre es admin o no, ¿verdad? Si el nombre no es admin admin, en base a eso, estás mostrando este mensaje, ¿verdad? Entonces lo que puedes hacer es que puedes tener más por aquí, bien, no uno. ¿Bien? Entonces lo que puedo hacer es que puedo agregar esto puede ser una especie de objeto por aquí que podrías agregar, bien, y algo así. Bien. Y tú tienes por aquí. Entonces esto se puede nombrar ¿bien? Se puede decir que no admin Bien. Así. Y este es un cheque. Bien. Digamos que quiero agregar un cheque más, ¿no? Quiero agregar un cheque más, no es número, ¿de acuerdo? Entonces no quiero que los usuarios ingresen número en el campo. Entonces lo que puedo hacer es volver a decir valor. ¿Qué es un cheque? Voy a hacer así. Diré que es N N, es N por aquí. ¿Bien? Y voy a pasar en valor. Bien. Y voy a tener este mensaje por aquí. El nombre no puede ser número. ¿Bien? Y voy a terminar esto con una coma si es necesario ¿Bien? Entonces puedes terminar esto con la coma o no es necesario, en realidad, esta es la última Ahora, también quiero decirles que espero que tengan claro esta forma taquigráfica de hacer las cosas Entonces estamos haciendo uso de la expresión condicional por aquí, la condicional o, y puedes ver por aquí si el valor no es igual a admin, bien, comprueba si el valor no es igual a admin. ¿Bien? Y si la condición es verdadera, la expresión vuelve true. Entonces esta expresión volvería verdadera. Y si es falso, entonces esto sería devuelto. Bien. De manera tan similar, esto comprueba si esto es cierto, entonces esto sería cierto sería devuelto, y si es falso, entonces esto sería devuelto. Entonces aquí, puedes probar esto por aquí ingresando números por aquí. Se puede ver que el nombre es obligatorio y debe tener al menos dos caracteres de largo, ¿de acuerdo? Espera un minuto. En realidad puedo escribir ahora y puedo enviar. Bien. Me está dando un error por aquí, ¿ok? Y déjame comprobar cual es el error para que el error sea sencillo. Yo hice un error tipográfico por aquí. El, el último N es gorras por aquí, algo así. Uy. Lo siento. Así que el último N es gorras, algo así, ¿de acuerdo? Guarda esto y vienes aquí a refrescarte. Bien, y escribe tres, cuatro, ya ves, el nombre no puede ser un número. ¿Bien? Puedes agregar uno más, ¿de acuerdo? Puedes agregar uno más si así lo deseas. Puedes agregar tantos como quieras. ¿Bien? Todas estas son reglas de validación personalizadas. Si la regla es compleja y no está encajando aquí, puede agregar una función separada que verifique esto, algo así, y puede vincular esa función aquí. Bien. Entonces todo eso es posible por aquí, bien. Pero básicamente, quiero destacar así es una manera en la que puedes agregar lógica de validación personalizada, ¿bien? Y la opción de validar le permite realizar validaciones personalizadas detalladas más allá de simples comprobaciones Y esta característica es útil en escenarios donde las entradas necesitan formatos o condiciones específicas que no están cubiertas por cosas genéricas como longitud máxima requerida que existen por defecto en las formas de gancho de reacción. ¿Bien? Entonces, aparte de los predeterminados, las formas de gancho de reacción te brindan mucha flexibilidad para crear tus propias lógicas personalizadas también y eso también de una manera más limpia y ordenada Todo bien. Espero que esto sea útil y espero que ustedes sean capaces de seguir adelante. 10. Más allá de lo básico: implemente validaciones personalizadas sofisticadas: Entonces hablaremos un poco más sobre la opción de validar y aprenderemos cómo puedes agregar validaciones personalizadas que son un poco más complejas en tu aplicación, Hasta el momento, lo que hemos visto es con opción de validar, en realidad puedes agregar este tipo de validaciones, Puedes tener validaciones personalizadas que sean personalizadas para tu aplicación o dominio, Entonces aquí estamos comprobando si el usuario es admin o no, y aquí estamos comprobando si el usuario está ingresando número o no en el nombre. Ambos no deben ser permitidos y deben manejarse adecuadamente dependiendo qué condición establezca, ¿de acuerdo? Entonces tenemos las dos comprobaciones de condición por aquí. Habrá escenarios, en los que quizás quieras agregar más. Así que puedes agregar más cosas por aquí agregando coma al final y puedes seguir agregando más entradas aquí en la opción de validar Ahora, digamos que tienes un escenario en el que quieres realizar una validación asincrónica Ahora bien, ¿qué significa esta validación asincrónica? Entonces, la validación asincrónica significa que quieres hacer check con el back-end, Es posible que tenga un servidor backend, desee verificar algo en el back-end y luego mostrar el mensaje de error de validación al usuario. ¿Cómo harías eso? Entonces eso es posible con la ayuda de la opción de validación en sí, como validar la opción en sí misma. ¿Bien? Entonces digamos aquí en el escenario, tenemos nombre y correo electrónico. Digamos que quiero verificar nombre, Digamos que esto no es nombre, digamos que este es nombre de usuario y quiero verificar y validar esto con el back-end, ya sea que el nombre de usuario exista o no. Bien. Entonces, ¿cómo haría eso? ¿Bien? Entonces lo que puedes hacer es que puedes tener una función check o asincrónica por La comprobación asincrónica es lo que diría, ¿de acuerdo? Y usando eso, puedes realizar la validación asincrónica, Entonces déjame hacer eso. Bien. Entonces lo que haría es por aquí, vendría aquí. Bien, yo diría coma, yo diría, validar, y validar ya está agregado, así que voy a decir verificar nombre de usuario Bien. Y por aquí, yo diría valor o voy a decir valor por aquí. Bien. Y yo tendría lógica D. ¿Bien? Ahora, la lógica vendrá así por aquí. Bien. Pero esto ahora es hacer un cheque con el back end, ¿verdad? Entonces tendremos que marcar esto como sinc. Bien. Ahora déjame mostrarte cómo puedes hacer eso. Entonces digamos que tengo const, Bien tengo este valor Pollan existe, que estoy obteniendo de verificar si función de nombre de usuario por aquí. ¿Bien? Verifique si nombre de usuario, y está obteniendo valor como entrada. Ahora, ¿qué es verificar si nombre de usuario? ¿Bien? Así que déjame agregar check iff username por aquí ¿Bien? Ahora, por aquí, puedo decir función. Verifica que uso un nombre. Bien. ¿Cuál es el parámetro? Se acepta? Acepta el parámetro así que no quiero pasar parámetros en este momento. Bien voy a tener esto definido usando la función de flecha, así que voy a decir que es igual a, bien. Y espera un minuto. Engañé la sintaxis. Entonces voy a decir una sincronización. Comprueba si lo siento, no un fregadero. Engañé la sintaxis. Permítanme borrar esto. Bien. Entonces esto será const. Verifique si usa un nombre. Bien. Y voy a llamar a esto existir porque comprobar si el nombre de usuario existe suena mejor. ¿Bien? Entonces solo voy a reemplazar esto por aquí, verificar si el nombre de usuario existe. Bien. Y aquí, voy a marcar esto como función asincrónica, ¿de acuerdo? Y voy a pasar en nombre de usuario, así. ¿Bien? Porque el valor se está pasando por aquí, así que eso no es más que el nombre de usuario. Y tengo el cheque por aquí definido, ¿de acuerdo? Ahora lo que puedo hacer aquí es que puedo tener un cheque simulado en la parte de atrás. Puedo decir const existir. Bien. Y aquí podrías tener una llamada EPI que podrías hacer, ¿de acuerdo? Entonces aquí podrías tener el código para la llamada EPI, y eso podría devolver un resultado booleano O podrías procesarlo y obtener el valor booleano, ¿verdad? Así que totalmente depende de ti. Pero lo que puedo hacer por aquí es que en realidad puedes así que lo que haré aquí es simular la verificación de backend. Puedo decir que espere. Bien, y puedo decir una nueva promesa por aquí, ¿de acuerdo? Y voy a decir resolución por aquí. Bien. Entonces solo estoy creando una promesa. Voy a decir establecer tiempo de espera, y voy a decir resolver mil Estoy haciendo un retraso de 1,000 milisegundos por aquí, simulando un Y voy a decir regreso. Bien, voy a decir retorno, y puedes devolver un valor booleano por ¿Bien? Ahora bien, ¿qué valor booleano puedes devolver? Entonces lo que puedo hacer es que puedo por aquí tener una lista estática. Bien, entonces tendré una lista estática de nombres de usuario existentes. ¿Bien? Esta es una lista estática, y es una RA, diré Admin, diré usuario, uno, dos, tres, y puedo decir, puedes agregar uno más. Voy a seguir, algo como esto. Ahora se puede decir retorno, y puedo comprobar si existe. ¿Bien? Y lo siento, puedo devolver lo que voy a devolver, puedo decir nombre de usuario existente. Bien, dot incluye, voy a decir nombre de usuario por aquí. Entonces este es un nombre de usuario que estoy pasando. ¿Bien? Entonces lo que esto está haciendo es, tengo una lista estática de nombres de Por supuesto, este no será el caso en tu caso porque podrías hacer una llamada a la API backend aquí, ¿de acuerdo? Entonces lo que estoy haciendo es que estoy teniendo una lista inicial de nombres de usuario, bien, y estoy comprobando el nombre de usuario, como si el nombre de usuario que ha introducido el usuario existe en el nombre de usuario existente Si existe, estoy devolviendo ese valor de cheque. Ese es un resultado booleano que estoy regresando, ¿de acuerdo? Y antes de hacer esta comprobación, estoy simulando un retraso por aquí de mil milisegundos. Todo bien. Entonces esto es como una llamada API simulada por aquí, ¿verdad? Y aquí, como es un fregadero, voy a decir una espera porque está devolviendo una promesa por aquí. Y como esto es una espera, esto se convierte en un fregadero. ¿Correcto? Entonces espero que esto tenga sentido ahora en cuanto a lo que está pasando por aquí, ¿de acuerdo? Y por aquí, puedo decir retorno no igual a existir o se puede decir nombre de usuario ya tomado. ¿Bien? Entonces nombre de usuario ya tomado, algo así. Todo bien. Entonces tienes este tipo de mensaje siendo enviado. Guarde esto. Bien. Veamos cómo funciona esto. ¿Bien? Entonces voy a hacer un refresco. Entonces el nombre de usuario que tenemos es John, uno de los nombres de usuario, puedo hacer John. Puedo decir enviar. Puedes ver después de un poco, podrías ver el nombre de usuario ya tomado. Podría aumentar el retraso también. ¿Bien? Eso es posible. Puedo decir John uno y e a tasa gmail.com. Entonces como este nombre de usuario es único, funcionará. Bien, puedes ver que se envió. Bien. Entonces así es como funciona la validación asincrónica Y esto no es solo validación estática, sino que si quieres hacer algún tipo de comprobaciones o validaciones con el back-end, puedes hacerlo absolutamente, ¿verdad? Y ahora puedes imaginar lo poderoso que puede ser esto. ¿Bien? Entonces, si estás trabajando en un proyecto real, tienes EPI ejecutándose, necesitas validar algo llamando a algunos EPI, absolutamente puedes hacer eso, ¿ Incluso puedes hacer validaciones dependientes, ¿de acuerdo? Entonces validaciones dependientes, como te diré, digamos que tienes un campo de contraseña y un campo de contraseña confirmada, ¿ verdad Ahora bien, ahora lo que querrías hacer es cuando un usuario escribe la contraseña, quieres verificarla con el otro campo de contraseña, y si es incorrecta, posible que quieras activar un mensaje que la contraseña no coincide. Tal vez quieras hacer eso, ¿verdad? Entonces ese podría ser otro caso de uso por aquí. Entonces lo que haría es aquí, tengo una etiqueta. Esta es la segunda etiqueta después de esta etiqueta y después de este mensaje de error por aquí. ¿Bien? Lo que puedo hacer es aquí, puedo agregar una etiqueta. Bien, puedo decir etiqueta, algo así. Bien. Y puedo decir contraseña, así, y aquí puedo decir entrada por aquí. Bien. Y la entrada podría ser tipo contraseña. Bien, el tipo es la contraseña, y por aquí, yo diría, bien, por aquí. Yo diría registrarse registrar esto. ¿Bien? ¿Y cómo registrarías esto? Entonces registrarías esto como contraseña. Así que voy a mantener B pequeña contraseña por aquí. Bien. Y voy a decir lo requerido, tiene que ser requerido. ¿Bien? Puedo pasar en todo eso, campo requerido y validación requerida, pero no voy a hacer eso. ¿Bien? Yo sólo voy a mantener las cosas simples. ¿Bien? Entonces esto está hecho. Todo bien. O si quieres, solo voy a obtener la validación de aquí. Bien. Entonces sí, esta es la validación que voy a agregar aquí. Así que sí. Esto es. Bien. Y esto cierra lo requerido por aquí, registrado. El registro está cerrado. Bien, esto está cerrado, registro está cerrado, y luego tienes unas llaves cerradas ¿Bien? Y esto es todo. Estamos viendo un error por aquí. ¿De qué trata el error? Déjame ver. Entonces no necesito esta opción validada, así que me desharé de esto. Bien, voy a mantener las cosas simples. Bien. Esto es todo lo que necesito, bien. Así que más o menos. Bien. Y ahora, lo que puedo hacer es que pueda tener este campo duplicado. Bien. Entonces todo este campo lo duplica, y puedes tener una contraseña de confirmación por aquí, ¿verdad? Esto es confirmar. Bien. Y en lugar de escribir contraseña, esta es contraseña de tipo. En lugar de contraseña por aquí, puedo tener la contraseña de confirmación. Bien, algo como esto. Bien. Y tienes longitud mínima por aquí. Bien, me desharé de esta coma. Bien, longitud mínima. Ahora longitud mínima tras longitud mínima, lo que puedes hacer es aquí, puedes agregar una opción validada, para que puedas decir validar. Ahora bien, este campo de contraseña debe coincidir con la contraseña de confirmación debe coincidir con la contraseña, siempre. Entonces puedes decir valor, bien, flecha. Y se puede decir que el valor es igual a ver y Ups. El reloj no se importa, así que necesito importar, ver, ver, digo uh, no me está permitiendo ver y voy a decir contraseña. Entonces esto es ver la contraseña, y está devolviendo su valor, ¿de acuerdo? Y si esto es cierto, está bien. Si no lo es, entonces mandas un mensaje que es que las contraseñas no coinciden, ¿verdad? Contraseñas, no coinciden, algo así, ¿verdad? Esto está hecho. Tenemos que estar vigilados. Bien, así que aún no se ha agregado el reloj. Obtendremos un error, de lo contrario. Así que yo he hecho esto y tú puedes venir aquí. Bien. La forma no se ve tan bien. La forma no se ve tan bien. Pero déjame agregar algunas etiquetas BR y déjame alinear esto en un solo pro. Entonces después de cada etiqueta, agregaré la etiqueta BR. ¿Todo bien? Eso debería estar bien por ahora, estamos aprendiendo, ¿verdad? Entonces sí, tenemos el formulario listo. Bien. Puedes ver si presento, verás todas las validaciones desencadenadas, Bien. Y se puede decir prueba. Se puede decir A, al ritmo gmail.com. Contraseñas, se puede ver, uno, dos, tres, cuatro, Bien, uno, dos, tres, cuatro, cinco, seis. Bien, entré seis. Y por aquí, voy a introducir algún otro valor. ¿Bien? Y si digo que someta, ¿de acuerdo? Veamos qué pasa. Enviar no desencadenó nada. ¿Bien? Eso es raro. Todo bien. ¿Qué pasa? Déjame ver. Entonces la validación no se está activando tal vez porque no he agregado los mensajes de error de validación Bien, debería haber agregado eso. Entonces lo que voy a hacer es aquí después de la etiqueta, estás mostrando los mensajes de error, derecho. Entonces aquí después de la etiqueta, agregaría los mensajes de validación. Entonces errores, ordenar, confirmar contraseña. Bien. Este es un nombre de campo. Bien. Diré confirmar contraseña, algo así. Bien. Y por aquí también, justo después de la etiqueta, voy a añadir los mensajes de error. Entonces deberías ver el mensaje de error ahora las contraseñas no coinciden. Se puede ver cómo funciona. Entonces ahora si cambio esto a uno, dos, tres, cuatro, cinco, bien. Bien. Déjame ver. Cinco. Bien. ¿Escribí uno, dos, tres, cuatro, cinco, uno, dos, tres. Bien. Entonces déjame intentarlo de nuevo, uno, dos, tres, cuatro, cinco. Bien, aquí, uno, dos, tres, cuatro, cinco. Presento. Bien, puedes ver el mensaje de error de contraseña no se está activando. ¿Bien? Entonces está funcionando bien, bien. Y así es como puedes comparar o ver o crear validaciones que dependan de algún otro campo Entonces aquí, la validación del campo de confirmación de contraseña depende del campo de contraseña, ¿verdad? Entonces esto se conoce como validaciones dependientes es como lo llamo, ¿verdad Entonces se trata de eso. Y ahora una cosa más quiero mostrarte. Entonces ahora lo que está pasando es que si envías en ese momento, se activa la validación, ¿verdad? Habrá escenarios en los que quieras activar la validación al cambiar o cuando se está tecleando la cosa, ¿verdad Cuando el usuario esté rellenando el formulario. Entonces debería ser en tiempo real. Puedes hacer esa cosa en tiempo real con un pequeño cambio. Entonces lo que puedes hacer es que puedes venir aquí. Y cuando estás creando una instancia de formulario de uso por aquí, bien, aquí en forma de uso, puedes agregar un puedes agregar un CO prese, ok y aquí puedes especificar modo y puedes decir sobre cambio en cambio Se puede ver en bl había bastantes opciones, ¿de acuerdo? Bastantes opciones sobre desenfoque en cambio en enviar, voy a decir sobre cambio. Voy a guardar esto y ahora ver la magia, ¿verdad? Entonces aquí agregué. Se puede ver que el nombre es obligatorio y debe tener al menos dos caracteres de largo. Se puede ver. Bien. Afill en nombre, Bien, la validación está hecha A, al ritmo gmail.com. Bien. Contraseña. Bien, uno, dos, tres, cuatro, cinco. Bien, uno, dos, tres, cuatro, cinco. Bien. Se puede ver. Seis. Bien. Para que puedas ver cómo está funcionando el formulario en tiempo real ahora, y todo esto es por el único cambio. Agregué este par de valores clave por aquí como un objeto al crear el formulario, ¿verdad? Entonces espero que haya habido un buen aprendizaje por aquí sobre el manejo de formularios con react hook form, correcto. Espero que esto haya sido útil y espero que esto te dé la posibilidad de crear tus propios formularios una manera muy robusta con un rendimiento eficiente y muchas características al reducir mucho código repetitivo, Entonces eso es reaccionar formas de gancho para ti, y esas son las validaciones personalizadas para Espero que esto haya sido súper útil. 11. Conclusión del curso: Y eso nos lleva al final de este viaje transformador hacia el mundo de las formas de gancho de reacción Hemos profundizado en cómo reaccionar la forma de gancho puede cambiar las reglas del juego para administrar formularios en aplicaciones de reacción Hemos explorado muchas cosas cuando se trata de gestión de formularios en react. Hemos aprendido cómo puede abordar problemas comunes, y hemos visto el poder de reaccionar las formas de gancho. Entonces, solo para darte un recapitular de lo que hemos aprendido, hemos aprendido cómo puedes ver los valores cambiar dinámicamente, implementar validaciones, implementar validaciones, mejorar el rendimiento de tus aplicaciones de reacción Que tienen formas, por supuesto. Y también hemos comparado las formas básicas con la forma de gancho de reacción para que entiendas desde cero cómo reaccionar La forma de gancho puede cambiar las reglas del juego. Entonces espero que este curso te haya dado una perspectiva diferente de la gestión de formularios hacia el mundo de reaccionar. Pero recuerden, nuestra exploración no termina por aquí. El poder de reaccionar las formas Hook radica en su flexibilidad y capacidad para adaptarse a una amplia gama de tareas de manejo de formularios. Y te animo a que sigas experimentando, explorando y traspasando los límites de lo que es posible con esta herramienta en tus proyectos Estoy emocionado de ver cómo va a hacer uso de formularios de gancho de reacción en su proyecto porque esto va a potenciar su proceso de administración de formularios Y recuerde, la innovación y la eficiencia se trata de adoptar nuevas herramientas y técnicas, y reaccionar La forma Hook ahora es una parte vital de su kit de herramientas de reacción Gracias por formar parte de este curso y gracias por ser un grupo de aprendiz tan comprometido Espero que este curso no solo te haya equipado con nuevas habilidades, sino que también te haya inspirado a pensar en el manejo de formularios desde una perspectiva completamente diferente. Con esta clase, encontrarás un proyecto de clase que podrás completar y presentarlo en la sección de proyectos. Feliz aprendizaje, deseándote todo lo mejor.