Reacciona los ganchos de manera más fácil (con el router de reacción v6, Axios, validación de formas y accesos directos )

1. Introducción: Bienvenido a la clase de gancho de React. En esta clase, aprenderás todos los Hooks de React en un lenguaje sencillo y fácil que cualquiera pueda entender. Entonces, antes que nada, veremos qué son los ganchos y por qué lo necesitamos. Después de eso, comenzaremos con el gancho más útil, que se usa. Y algunos ganchos más como efecto de uso, contextos de uso y así sucesivamente. Además, veremos la biblioteca de acceso para obtener datos de API, manejo de palmas, una validación y mucho más. Después de completar esta clase, te daré un proyecto, que es el rastreador de precios de criptomonedas. Obtendrás toda la instrucción en sección de proyectos. Estoy muy emocionada con esta clase y espero que tú también lo estés. Entonces comencemos. 2. ¿Qué son los ganchos?: Antes de sumergirnos en usted gancho, vamos a entender primero, ¿qué es ganchos? Si ya lo sabes, puedes saltarte esta parte y saltar directamente sobre ti gancho. Entonces, ¿qué son los ganchos? Los ganchos son las funciones para usar algunos predicadores de reacción en componentes funcionales. En otras palabras, podemos decir que los ganchos son funciones que hacen que los componentes funcionales funcionen como componente de clase. Sé que esto suena complicado, pero no lo es. Entendamos con una historia. Antes de reaccionar lanzaron ganchos. Solo hay una forma de usar métodos de estado y ciclo mediante el uso de los componentes de clase. Ahora, los desarrolladores tuvieron algunos problemas con los componentes de vidrio. Así que tómate un tiempo para desarrollar funciones especiales que podamos usar en componentes funcionales y que las funciones especiales se denominen ganchos. Entonces creo que ahora entiendes qué es React Hooks, que son funciones que hacen que los componentes funcionales funcionen componentes de clase en vivo. Comencemos con nuestro primer gancho, que se usa. 3. Gancho más importante - useState: ¿ Qué se utiliza? Se utiliza gancho es una función para agregar estado en el componente funcional. Ahora se podría preguntar ¿qué es el estado? Entonces el estado no es más que solo valores o variables de tu componente. En otras palabras, todas las variables en su componente se denominan como estado del componente. Siempre que quieras crear una variable, entonces tienes que usar tu gancho, simple como eso. Entendamos con el ejemplo. Aquí, tengo nueva aplicación React y eliminé todos los archivos innecesarios de esta. Entonces primero, permítanme crear un componente funcional mediante el uso de un FCE. Esta es la imagen para crear los componentes funcionales. Pero es necesario instalar este ESL y reaccionar extensión primero. Me encantó esta extensión. Impulsa mi productividad en React. Ahora aquí voy a crear un contador simple, muestra el valor del contador y un botón llamado en Grecia. Cuando hacemos clic en este botón, el valor del contador aumentará en uno. Ahora bien, aquí es donde quiero mostrar el valor del contador. Necesitamos estado. Y aquí es donde usamos, lo usamos ganchos. Para usar cualquier gancho. En primer lugar, necesitamos importar eso de biblioteca React, aquí mismo, tú. De acuerdo, aquí te vamos a llamar función estatal. Y le damos a nuestro contador valor inicial como 0. Ahora esta función va a devolver una matriz. Entonces consolidémonos. Ver. Esta zona cuenta con dos elementos. El primer elemento es nuestro valor original, que es 0, y el segundo elemento es una función. Así que vamos a hacer este primer elemento en la contra-variable y se muestra aquí mediante el uso de corchetes. Guarda los cambios, y echa un vistazo, obtenemos nuestro mostrador. Ahora el segundo elemento de esta matriz devuelve una función. Mediante el uso de esta función, podemos actualizar nuestros valores de estado. Así que vamos a almacenar este elemento en la variable llamada contador de estado. Ahora cualquiera que sea el valor que pasemos en esta función será el valor de esta variable de contador. Déjame mostrarte eso. Aquí. Queremos aumentar el contador en uno. Cuando hacemos clic en este botón, Añadir función en OnClick aumentar contador. Ahora necesitamos definir esta función. Y dentro de esta función escribimos set counter. Cuál es el valor conocido, que es contador más uno. Guárdalo y echa un vistazo. ver, funciona. Y cuando refrescamos la página, vuelve a empezar con 0, que pasamos en esa función de tu estado. Ahora aquí nuestro código se ve un poco feo. Por lo que siempre usamos el atajo para estas tres líneas, que se llama Editar reestructuración. Por lo que aquí en el lugar de LA, agregar corchetes. Y dentro de eso, a la derecha, el nombre de la variable post, que es contador, y luego escribir nombre de la función, que es el contador de conjunto. Ahora bien, no necesitamos estas dos líneas. Funciona igual que antes. Y nuestro código se ve limpio. Y puedes usar múltiples ganchos que en un solo componente. Ahora, veamos cómo podemos usar el estado estadounidense para obtener valor de la entrada. Así que vamos a crear una entrada con un texto de tipo. Aquí, necesitamos manejar el evento onchange. Y pasamos a la exploración una función de flecha. Y usamos el valor de punto objetivo para actualizar la variable de estado. Por lo que tipo lo usó aquí. Y aquí, podemos dar nuestro valor inicial variable, en este caso cadena vacía. Ahora cada vez que cambia el valor de este campo de entrada, llamamos a la función setName y al valor de punto objetivo de punto e bajo. Llamamos a setName y pasamos este valor. Ahora vamos a cambiar nuestra etiqueta a nombre de variable, ha clicado. Contador de tiempos variables, guarda los cambios y echa un vistazo. Aquí, tenemos cuadro de texto y cuando escribimos nombre oro, Es inmediatamente actualizaciones aquí y también contador actualizaciones onclick. Ahora vamos a ver cómo usar usted hook cuando tenemos el objeto como variable de estado. Así que aquí creamos dos variables de estado que son contador y nombre. Ahora podemos hacer lo mismo con una variable de estado, que es objeto. Así que crea nuevo usted y pasa objeto como contador de valor inicial a 0 y nombre2 cadena vacía. Ahora defina su nombre mediante el uso editar detalles de reestructuración y establecer detalles. Ahora borre estas dos líneas. No los necesitamos. En lugar de escribir nombre, ¿verdad? Detalles nombre del punto y detalles contador de puntos. Aquí en función de contador de aumento, elimino esto y adivina ¿qué debemos tener que agregar? ¿Verdad? Tenemos que agregar la función set details para actualizar ese valor del contador. Por lo que escribo Detalles del Sitio. Y recuerda, sea cual sea el valor que pases dentro de esta función, se actualizará con el valor original. Así contador de objetos, Carlin detalla contador de puntos más uno. Guárdalo y echa un vistazo. Sí, funciona. Pero hay un gran problema que no tenemos nuestro elemento de nombre dentro de este objeto. Déjame mostrarte eso. Por lo que simplemente escribo aquí los detalles de console.log y lo guardo. Ahora refrescar la página y ver cómo dos elementos en objeto. Ahora cuando hago clic en este botón incrementado, el elemento name se elimina de nuestro objeto. Entonces, ¿por qué sucede eso? Sucede porque pasamos directamente el objeto sin agregar otros valores antiguos. Entonces la solución es, primero agregamos todos los demás valores de ese nombre de objeto aquí y simplemente actualizamos ese elemento contador con un nuevo valor. Por lo que dentro de la función de detalles, podemos pasar otra función y esa función puede devolver el valor anterior de nuestras variables de estado. No te confundas sólo por ver esto. Por lo que estos anteriores es igual que esta variable de detalles. Déjame mostrarte que mi consola lo y agregar algún texto aquí. ver, obtenemos todos los valores al dar clic en este botón con error porque no podemos escribir consola dentro de la disfunción. Entonces quita eso. Y ahora usamos el operador spread mediante el uso de tres puntos anteriores. Esto sumará todos los valores anteriores de la variable de estado. Ahora reemplazamos contador con el valor antiguo, que es contador de puntos anterior más uno. Guarda los cambios y echa un vistazo. Verlo funciona perfectamente con el elemento name. Así que cada vez que se trabaja con un objeto o una matriz, primero tenemos que añadir todos los valores anteriores mediante este método y luego actualizar lo que queremos actualizar. Recapitulemos lo que aprendimos. Entonces usted se utiliza para crear variables de estado en componentes funcionales. Por lo que para usar usted hook, necesitamos primero importar eso y usarlo dentro del componente funcional. Aquí, puede pasar cualquier tipo de datos como booleano, número, texto, objeto en cualquier cosa, y luego almacenarlo mediante el uso de la reestructuración de AddEdge. La primera variable es su valor actual. Y el segundo es la función para nuestra cría ese valor. Tan simple como eso. Algunas personas pueden confundirse un poco aquí. Y también me confundí cuando te aprendí quién por primera vez. Pero con la práctica, aprendí este concepto y lo uso en mis proyectos. 4. Maneje entradas múltiples (atajos): Veamos cómo manejar múltiples entradas que son simples en el manejador en React, es muy útil cuando tienes múltiples campos de entrada, como formulario de registro. En el tutorial del USDA, vemos cómo manejar uno o dos campos de formulario. Pero imagina si tienes cinco a seis campos y creas una variable de estado para cada entrada, y eso hace que nuestro código sea desordenado y difícil de manejar. Así que vamos a ver cómo manejar múltiples entradas usando una sola función OnChange. Aquí tenemos el componente de prensa F. Y este componente, quiero tomar datos de usuario como nombre, correo electrónico, contraseña, y dirección. Entonces vamos a crear forma. Sé que algunos desarrolladores no usan esta etiqueta de formulario y crean directamente elementos de entrada, pero no es una buena práctica. Ahora dentro de este formulario, quiero etiqueta S3 y pase nombre de entrada tipo texto. Ahora duplico este código tres veces más usando C Plus Plus flecha abajo y cambio segunda píldora como e-mail y tipo a correo electrónico. Siguiente para contraseña y contraseña de tipo. Y el último es dirección. Y para eso necesitamos área de texto. Entonces elimino esta etiqueta de entrada y creo un área de texto. Y al final necesitamos un botón, escriba submit, y nómbralo submit form. Ahora guarda los cambios y echa un vistazo. Ves, obtenemos nuestro formulario con todas las pastillas. Ahora en la lección anterior, creamos entradas variables de estado individual. Y luego en el onchange, establecemos ese valor a nuestra variable de estado. Pero en este método, creamos solo una variable de estado para todos los campos de entrada. Tan rápido, te importo de la biblioteca React. Y en nuestro componente funcional, lo usamos y lo desestructuramos como detalles y detalles del conjunto. Ahora quiero pasar un objeto y ese objeto, tenemos múltiples campos como nombre y su valor inicial como cadena vacía, E-mail, cadena vacía, contraseña, cadena vacía. Y último, dirección cadena vacía. Ahora vamos a crear nuestra función de cambio de mango. Y llamaremos a esta función en cada evento de entradas onchange. Por lo que aquí escribo en cambio y pase la función de cambio de mango. Ahora copia esto y pega en todos los campos. Así que cada vez que tecleemos cualquiera de estos campos, sólo se ejecutará esta función. Ahora, paso más importante, y sin este paso, Nuestro, este método no funcionará. Entonces el paso es que tenemos que agregar todos los nombres de las píldoras como su atributo de nombre de entrada de nuestro objeto de estado. Déjame mostrarte esto. Así que para la entrada de nombre, queremos almacenar su valor de entrada en esta propiedad de nombre. Por lo que añadimos nombre atributo igual a nombre. Ahora para el correo electrónico, queremos establecer este valor de correo electrónico en esta propiedad de correo electrónico. Añadimos en email input name attribute al email. Ahora para contraseña, se le pasará nombre igual a contraseña y dirección de puerto. Pasamos nombre igual a dirección. Asegúrate de escribir mismo nombre que escribes en ese objeto. Ahora, dentro de esta función de cambio de mango, escribimos nuestra lógica principal. Entonces uso esta e como objeto de evento para todas estas pastillas. Y vamos a consola dot target. Guárdalo y echa un vistazo. Ves, cuando escribimos nuestra entrada de nombre, obtenemos esta entrada de nombre. Y cuando escribimos otra entrada, obtenemos esa entrada. Entonces nuestra lógica es cuando escribimos en campo de entrada, obtenemos ese nombre de archivo de entrada y valor. Y con ese nombre, que será el mismo que nuestras propiedades de objetos de detalles, sustituimos su valor por valor actual. Sé que esto suena complicado, pero no lo es. A ver esto. Y después de eso son todas las dudas se aclararán. Creo una variable de nombre para el nombre de punto objetivo de punto E y una variable de valor para el valor de punto objetivo de punto E. Y vamos a consolar ambas variables. C. Obtenemos FullName y su valor cuando escribimos en estos campos de entrada. Ahora solo tenemos que establecer este valor dentro de nuestra variable de estado. Deja que haga su nombre. Por lo que los detalles del lado derecho. Y en la función callback, pasamos parámetro anterior, ¿qué valor anterior? Entonces, en primer lugar, volvemos Es todos los valores anteriores mediante el uso del operador spread. Ahora tenemos que actualizar la propiedad con este valor. Así que sabemos que podemos acceder a la propiedad del objeto mediante el uso de corchete y pasar esta variable de nombre dentro ella y dos puntos su valor. Entonces si escribimos algo dentro de la entrada de correo electrónico, entonces primero esto devolverá todas las propiedades anteriores. Y luego encontramos el correo electrónico de propiedad y reemplazamos su valor con ese símbolo de valor de campo de correo electrónico como ese. Vamos a des-solo esta variable de datos y veamos si obtenemos valores no lo son. Así que guarda los cambios y echa un vistazo. ver, cuando actualizamos cualquier campo, obtenemos su valor en nuestro objeto estatal. Ahora podemos hacer que este código incluso se ordene mediante el uso de destrucción de objetos. Entonces escribo E dot target y usando la estructuración de datos de objeto, almacenamos nombre y valor en una variable. Entonces estas dos líneas, igual que esta línea. Por lo que elimino estas dos líneas. Ahora quiero consultar este objeto Detalles al dar clic en el botón de enviar. Por lo que creo una nueva función llamada manejar enviar y armas de fuego todos estos detalles objeto. Ahora en el formulario tag onsubmit event, llamamos a esta función. Ahora guarda los cambios y echa un vistazo. Déjame escribir todos los detalles. Y luego hago clic en el botón de enviar. ver, por sólo 1 segundo, está impreso. Y luego nuestro formulario se reprime porque es el comportamiento predeterminado de la forma. Siempre que enviemos el formulario, esta función se ejecutará y luego reprime la página. Entonces tenemos que parar esto. Usamos este e como objeto de evento y escribimos E punto prevenir la función predeterminada. Esto evitará el comportamiento predeterminado de las palmas. Así que guarda los cambios y echa un vistazo. ver, obtenemos detalles en consola. En tu proyecto. Puedellamar a la API en esta función y enviar todos los detalles al servidor. Entonces espero que les guste este método. Si tienes alguna confusión. Fue este tutorial una vez más. Y trata de aplicar este método en tu proyecto que despejará tus dudas. 5. useEffect en profundidad: El uso de la clavija se utiliza para realizar efectos secundarios en nuestro componente. Entonces, ¿qué son los efectos secundarios? Efectos secundarios, nuestras acciones que se realizan con el mundo exterior. Realizamos un efecto secundario cuando necesitamos llegar fuera de los componentes de React y hacer algo. Qué ejemplo, recuperar datos de API, actualizar directamente el DOM en el que usamos documento o objeto ventana, y funciones de temporizador como setTimeout o set interval. Estos son los efectos secundarios más comunes en React. Por lo que para realizar cualquier tipo de efectos secundarios, necesitamos usar, usar efecto Hooke. Veamos un ejemplo. Aquí. Creé una variable de estado y su valor aumentará en una. Cuando hacemos clic en este botón para usar cualquier gancho, primero necesitamos importar datos de la biblioteca React. Entonces escribo aquí, uso efecto, y ahora podemos usarlo en componente funcional. Entonces usa un vector excepto dos argumentos. Callback, que es una función en la que escribimos nuestra lógica de efectos secundarios. Esta función se ejecuta siempre que algo en este componente. Y segundo, las dependencias, que es un área de variables y es un argumento opcional. En términos simples, el primer argumento es qué ejecutar, y el segundo es cuándo correr. El efecto de usuario se ejecuta en cada render, lo que significa que cuando el conteo cambia o cuando eso sucede, podemos controlarlo por dependencias. Si está familiarizado con los componentes de clase, efecto de uso es una combinación de componente montó, actualización de datos de componentes y componente se montará. Vamos a ver variación de ganchos de efecto de uso que son sólo tres variación del vector de usuario. En primer lugar, úsalo sin ninguna dependencia. Segundo, efecto de usuario con una matriz vacía, y tercer usuario con variables. Veamos primera variación del gancho vectorial de usuario. ¿ Verdad? Utilícelo y pase solo la función de devolución de llamada. Y en esa función, quiero actualizar nuestro título web con este mismo método. Así que a la derecha, título de punto del documento es igual a dos en backticks, dólar cuenta nuevos mensajes y guárdalo. Refresca la página y ve siempre que este componente se renderice, usa si x r1 y nuestro título se actualiza con nuestro mensaje. Ahora cuando algo cambia este componente significa que hacemos clic en este botón y se ejecuta utilizar un libro vectorial titulado cambio con contador. Por lo tanto, cuando usamos user back to hook sin ninguna dependencia, use effect se ejecutará cada cambio en ese componente. En este caso, es componente de app porque tendríamos efecto de ideas en el componente app. Ahora vamos a ver efecto de uso con una matriz vacía. Entonces, en este mismo ejemplo, pasamos una matriz vacía dependencias de hecho del usuario final. Y vamos a ver qué pasó. Así que guárdalo y echa un vistazo, actualiza la página, y nos vemos si Exelon cuando componente render. Ahora, cuando damos clic en este botón, lo que significa que contador va a cambiar, pero el título no está operando en ese cambio. Cuando pasemos un vacío a las independencias, el efecto de uso correrá sólo una vez. Cuando nuestro componente se renderizará por primera vez. Después de eso, nunca huiremos. Es útil cuando solíamos recuperar datos de API o servidor que recuperarán datos cuando el componente se renderice por primera vez. A propósito de nosotros hicimos gancho está disponible en la descripción. Ahora veamos la última variación del efecto de usuario, que es qué variables. Entonces, para entender este concepto, creo otro nombre de variable de estado o el botón Cuenta que aumentará lo contrarrestado por Phi. Ahora quiero cambiar de título cuando solo cambiamos otro estado de conteo o que necesitamos pasar otra variable de conteo en esa dependencia LA. Y cambio esta variable de conteo con otra cuenta. Guarde los cambios y eche un vistazo, actualice la página y vea que funciona perfectamente en Render. Ahora cuando hago clic en esta otra variable de estado de conteo, título se está actualizando con esta cinta. Pero cuando hacemos clic en este viejo botón, no funcionará porque pasamos nuestra nueva matriz de independencia variable. Así que úsalo sólo se ejecuta cuando estas variables de estado valor va a cambiar y se puede pasar más variables mediante el uso de coma. Ahora la parte final de este gancho de efecto de uso es la función de limpieza. Y es poco confuso para los principiantes. Vamos a entender con otro ejemplo. Para que todos puedan entender. Aquí he usado función setIntervala llamada temporizador de cuenta atrás. Ese intervalo no se detendrá a menos que utilicemos la función clear interval. Si estamos configurando el estado usando setIntervala y ese efecto secundario no se limpia cuando nuestros componentes en montículos, o ya no vamos a usarlo, el estado se destruye con el componente, pero la función de intervalo de comercio seguirá funcionando. Y eso hace que nuestras aplicaciones lentas y de bajo rendimiento. Por lo que es importante limpiar estas funciones. Así que para usar la función de limpieza, necesitamos ejecutar la función escrita en efecto de uso. Déjame mostrarte eso aquí. En este uso, si lo hiciera, habría escrito la función de flecha. Y dentro de esta función, yoduro claro intervalo y pasar el nombre de la variable de función setIntervala, que es timer. Ahora se llamará a la función de limpieza cuando se desmonta el componente. Es difícil de ver en este ejemplo, creé un contador y luego actualizo ese contador en ButtonClicked por uno. Ahora creo una nueva función vectorial de usuario que cuenta la dependencia y escribo console.log alrededor del efecto con la variable count. Entonces cuando la variable de conteo cambiará, el usuario corre y ahora escribo función de retorno. Dentro de esta función, simplemente consola dot log clean up. También con variable de conteo. Sólo estamos teniendo la idea cuándo funcionará la función de limpieza. Así que guarda los cambios y echa un vistazo, actualiza la página, y está trabajando en post render. Ahora cada vez que estos usan, si pudiera ejecutar, de nuevo, toda la función de limpieza se ejecutará en pausa, y luego se ejecutará esta función de devolución de llamada. Veamos esta diapositiva. Aquí, se trata de render propuesto. Y cuando hacemos clic en este botón incrementado, lo que significa que este usuario se ejecutará en la medida en que se ejecutará la limpieza con valor 0. Y luego la función de devolución de llamada imprime para el valor uno. Ahora de nuevo, hacemos clic en este botón era función de limpieza anterior se ejecutará y luego llamaremos a fondo. Por lo que la función de limpieza no es necesaria en todos los casos. Solo se requiere en unos pocos casos, como cuando necesita detener un efecto secundario repetido cuando su componente se monta. Tan simple como eso. Vamos a recapitular. Lo que aprendimos. Yo uso efecto se utiliza para realizar efectos secundarios como parchear la manipulación de datos con documento y ventana. Eventos de temporizador como setIntervala y setTimeout. Úsalo. Acepte dos argumentos. El costo es por función de devolución de llamada y el segundo es para dependencias, que es opcional en términos simples, qué ejecutar y cuándo ejecutar. Hay tres variaciones de uso si hago frente sin dependencias, lo que significa que se ejecuta con post render y también ejecutar en cualquier cosa cambia en ese componente. Segundo, con una matriz vacía, lo que significa que solo se ejecuta en post render y es útil para parchear datos. En tercer lugar, el estado y los apoyos, lo que significa que se ejecuta en post render. Y entonces cualquier variable que pasemos independencias cambia. Se ejecutará simple como eso. Los tiempos de espera, las suscripciones, el oyente de eventos y otros efectos que ya no son necesarios deben eliminarse con la ayuda de la función de limpieza. 6. Datos de anotaciones usando AXIOS: En este tutorial, vamos a aprender qué son las ICO, por qué necesitábamos cómo pasar datos usando algunos errores para evitar. Y mi truco favorito para usar axiomas en React, básicamente tutorial completo sobre z OS. Entonces no perdamos el tiempo y empecemos. Entonces, en primer lugar, ¿qué es Axiomas? Axiom es un paquete utilizado para hacer una solicitud HTTP desde el navegador una manera fácil y mejor parche en JavaScript, podemos decir axiomas es la versión actualizada del mismo porque XES proporcionan mejores instalaciones haciendo HTTP, casi el 70% de los usuarios usan x iguales para realizar solicitudes HTTP para back-end como NodeJS. Estas son algunas de las ventajas de usar z OS en React. Si utilizas el método Bayes, primero tenemos que pasar los datos al formato JSON y luego podemos usarlo. Pero SEOs es por defecto utilizar el formato jason, lo que significa que X años convierte automáticamente los datos en formato JSON cuando obtenemos datos del servidor. Y es por eso que necesitamos usar solo un método entonces. Y eso hace que nuestro código sea limpio y fácil de entender. Seo's proporciona todo tipo de métodos HTTP como GET, post, PUT, elite, y muchos más. Podemos hacerlo mejor en el manejo mediante el uso de x años. Entonces eso es mucho para las teorías. Ahora, veamos cómo usar XES en reactante. Entonces aquí creo una nueva aplicación React y elimino todos los archivos innecesarios. Ahora dirígete a los daños y.com. Esta es una de mis API favoritas para las pruebas. Aquí podemos leer su documentación si así lo desea. Ahora desplácese hacia abajo hasta Recursos. Y aquí puedes ver diferentes datos como detalles del producto, guardias, usuarios, post, etc. así que abrí este enlace de producto. Ahora es posible que no veas estos datos en formato JSON como este, porque estoy usando estos formato JSON o extensión. Esta es una herramienta muy útil para ver los datos de JSON en el navegador. Lo vas a instalar desde Chrome Web Store. Aquí podemos obtener los datos ficticios de los productos de esta API. Usamos XES para llamar a la API y mostrar esos datos usando el método de mapa. Entonces, antes que nada, abrir los ceros de nuevo como en NPM, y ver que tiene 2.4 millones de descargas semanales, lo cual es una locura. Entonces copiemos este comando npm y peguémoslo en VS Code Terminal y golpeemos Enter. Por lo que se instala con éxito. Podemos verificarlo mediante paquete.json archivo C. Obtenemos x años independencias. Ahora cierro este archivo y en app.js, mientras que importo ejes va de x igual paquete. Por lo que podemos usar ceros en este componente. Aquí, quiero pasar datos sobre componentes render primera vez contra los que necesitamos, ¿verdad? Es efecto usado. Por lo que escribo efecto de uso. Y el primer argumento es la función de devolución de llamada. Y el segundo argumento es una matriz de dependencias. Entonces solo quería pasar datos una vez. Cuando los componentes se renderizan, paso una matriz vacía sin ninguna dependencia. Ahora, en la función de devolución de llamada, obtenemos datos de API. Supongamos derecho, x punto aquí escribimos método como GET, post, PUT, delete. Entonces lo escribo. Ahora en este paréntesis, pasamos API. Entonces copio esta API y la pego aquí. Ahora mismo que el método fetch. Los usamos y usamos la función de flecha y pasamos la respuesta como parámetro. Y luego consola esta variable de respuesta para sólo ver lo que obtenemos. Así que guarda los cambios y echa un vistazo. Entonces obtenemos un objeto con config, data, código de estado, etc. Así que en el objeto de datos, obtenemos los productos. Así que tenemos que almacenar esta matriz en la variable de estado. Así que de vuelta a VS Code, y en la parte superior, creo una variable de estado llamada products y paso una matriz vacía como valor inicial e importo usted hook desde React. Ahora en esto entonces usamos productos secundarios y pasamos response.data dot products. Ahora obtenemos el valor de este producto en la variable del producto. En el escrito, mostramos el nombre del producto y su precio. Por lo que entre corchetes, productos mapa de puntos. Y dentro de esto, pasamos la función de devolución de llamada y pasamos parámetros como producto para un producto e índice individual. Olvídate del valor de índice de este producto actual y devuelve la etiqueta h3. Y por dentro pasamos entre corchetes, producto punto título y dólar, producto punto precio. Y pasamos el índice como valor clave. Ahora guarda los cambios y echa un vistazo. Mira, obtenemos nombres de productos con su precio. Puedes agregar tus estilos y hacerlos más frescos. Por ahora, estoy de acuerdo con estos azulejos porque estamos aprendiendo axiomas. Y ese es nuestro enfoque principal. Por lo que verás lo fácil y sencillo de hacer una solicitud HTTP. Ahora, si quieres hacer una solicitud de post, tienes que simplemente encadenar este método a post y genes que 0.48. Y luego si queremos enviar datos, puedes pasar esa variable como segundo parámetro después de la API, simple como eso. Te daré todo tipo de métodos, ejemplos en mi XES Ultimate Guide. Se puede descargar desde el cuadro de descripción. Ahora veamos cómo podemos realizar el manejo de errores usando z OS. Entonces después de estos diez método, escribimos el método de efectivo. Este método sólo se ejecutará cuando algo salió mal. En este entonces método, podemos decir que si ocurre algún error sólo entonces y entonces se ejecutará el método de estos chicos. Por lo que pasamos el error como parámetro y consola esta variable de error. Ahora guárdalo y echa un vistazo. Entonces no obtenemos nada en consola porque no hay error. Ahora hago un error tipográfico en esta ortografía API. Ahora guarda los cambios y echa un vistazo. Ver, aquí obtenemos objeto de error con código de error, mensaje de error, etc. Ahora mostraremos el mensaje de error en el navegador. Por lo que creamos otra variable de estado llamada error y pasamos cadena vacía como valor predeterminado. Ahora en la jaula, establece error, mensaje de error e imprime este error en el navegador. Aquí, podemos establecer condiciones como si un error no es igual a una cadena vacía, solo entonces y luego error de impresión. Así que guarda los cambios y echa un vistazo. ver, obtenemos un mensaje de error. Y si elimino el error tipográfico, entonces no mostrará un mensaje de error. Ahora déjame mostrarte mi truco para usar axiomas. Por lo que aquí puedes ver tenemos que escribir la URL completa de nuestra API cuando la llamamos. En el mundo real, tienes el mismo origen para todas tus API en un solo proyecto. Entonces soy muy perezoso en escribir código duplicado. No es una buena práctica. Entonces hago una variable reutilizable y la uso en mi proyecto. Entonces hagamos un nuevo archivo llamado XES dot js. Y en este archivo, introduzco x años. Ahora crea una nueva variable llamada instancia. Puedes llamarlo como quieras. No importa. Y exportar por defecto esta variable. Aquí, escribo X años dot create. Y en esta función de creación, podemos pasar un objeto. Y en ese objeto agregamos URL base. Y en coma invertida, obtuve esta URL base y la pego aquí. Ahora guarda los cambios. Y en nuestro componente de app, elimino este SEOs e importe nuestros nuevos axiomas del archivo ceros dot js. Ahora guarda los cambios y echa un vistazo. Funciona igual que antes. Entonces ahora no necesitamos escribir esa URL base una y otra vez. Pero recuerda que tienes que importar X años de nuestra nueva x equivale a cinco. Si tu paquete importado de axiomas originales, entonces tienes que escribir el punto final con URL base. Entonces si obtienes un error en este método justo desde donde importas X años. Ahora, última y última parte, XES con asíncrono esperan, que lo hace súper cool. Entonces la espera asíncrona es la mejor manera de manejar promesas en JavaScript. Déjame explicarte que insertas en nuestro componente de app, creo una nueva función para productos de parche, función de datos obtener productos. Y dentro de esta función, queremos usar esperar respuesta. Por lo que tenemos que añadir la función asíncrona, y sólo entonces podemos utilizar esperar dentro de esta función. Entonces bien, de ocho ceros punto obtener productos y almacenar este valor en una variable llamada respuesta y consola esa respuesta. Entonces, básicamente, cuando llamemos a esta función más esta API llamará y hasta que obtengamos datos, no se ejecutará. Siguiente línea. Ahora comento estos axiomas desde la música y llamo a nuestra nueva función dentro de ella. Ahora guarda los cambios y echa un vistazo. Obtenemos el mismo objeto que nos metemos entonces método. Así que vamos a establecer productos, datos de puntos de respuesta, productos de punto, y obtenemos datos impresos en nuestro navegador. Ahora algunos de ustedes podrían preguntarse, ¿cómo podemos manejar el error en este asunto? Entonces la solución es que tenemos que usar el método try and catch. Por lo que escribo seco y selecciono la segunda sugerencia. Y eso generará, intentará atrapar repetitivo. Ahora en seco, escribimos toda nuestra lógica y nos comprometemos. Escribimos código para manejo de errores. Muevo estas tres líneas dentro, intento bloquear y enganchar. Dije sumador y uso este mensaje de error. Entonces si conseguimos sumador en este try block sólo entonces y entonces este boceto se ejecutará. De lo contrario, JavaScript ignorará esto para. Ahora, Hagamos dipolo de nuevo. Guarde los cambios. Échale un vistazo, a ver, nos dan víboras en la parte superior y funciona bien. Entonces volvamos al código VS. Y ver esta postal se ve un poco confusa y nuestro nuevo código se ve bastante limpio y fácil de entender. Así que intenta usar asíncrono esperar con x años. Hará una buena impresión en tu jefe y en tu cliente también. Si deseas una revisión rápida sobre los SCO, vas a descargar mi guía de axiomas definitivos desde el cuadro de descripción. En esa guía, escribo todos los ejemplos de diferentes métodos y casos de uso. Y como bono, obtienes cómo usar XES con espera asíncrona. 7. useContext: Lo que se utiliza contexto. Use context hook se usa para administrar datos globales en la aplicación React, como estado global, Equipo , Servicios, configuración de usuarios, etc. Vamos a entender por qué necesitamos usar contextos hook. Entonces aquí hay una situación. Imagina que creas una aplicación con este tipo de estructura de componentes. Por lo que el componente principal es app, y luego tiene para componentes secundarios. Y los componentes j tienen también algún componente genético. Entonces es como una jerarquía de componentes. Ahora, imagina que tenemos detalles de usuario, este componente de aplicación, y necesitamos detalles de usuario en esta sola publicación. Si usas accesorios para compartir esos detalles, primero tenemos que pasar en el componente principal, luego pasar en feed, luego seguir post. Y luego obtenemos los detalles del usuario en un solo componente de post. Por lo que es muy molesto y difícil de mantener. Los contextos de uso nos ayudarán a crear datos globales para nuestra aplicación React. Y no tenemos que pasar esos datos por todos estos componentes. Empezamos a acceder a esos datos en todo el componente que necesitábamos. Ahora veamos cómo crear contextos. Por lo que para crear contextos en React se requieren tres sencillos pasos. En primer lugar, crear el contexto, segundo, proporcionar el contexto, y tercero, consumir el contexto. Entonces comencemos con el paso número uno, creando los contextos. Estamos creando el estado global para el registro de usuarios en ambas funciones de creación de contextos de la biblioteca React. Esta función se utiliza para crear contextos. Ahora justo antes de tu componente funcional, crea contexto y almacena eso en una variable llamada contextos de inicio de sesión, puedes tomar lo que quieras. Ahora para el paso número dos, que está proporcionando el contexto. Entonces, después de crear el contexto, necesitamos definir en qué componentes queremos acceder a estos contextos. Por lo que de nuevo, en esa jerarquía, si desea pasar datos a un solo componente de publicación, solo necesitamos proporcionar los datos al componente principal y que puedan ser accesibles en todos sus componentes secundarios. Entonces en nuestro ejemplo, queremos acceder a esos datos en componente principal. Y tiene componente secundario sola publicación, contextos de inicio de sesión derecho proveedor de puntos, y agregar componente de deuda entre estos contextos proveedor, sea cual sea el componente que pase entre este proveedor, él y su hijo puede acceder a estos contextos valor. Ahora podemos pasar valor mediante el uso de atributo value. Así que a la derecha, el valor es igual a entre corchetes, simplemente paso por aquí. Ahora veamos cómo acceder a esta variable dentro de nuestro componente de publicación única. Así que abre ese componente en que quieres usar esa variable. Para utilizar la variable de contextos de inicio de sesión, necesitamos utilizar, utilizar contextos gancho. Contextos de uso tan importantes gancho de la biblioteca React. Y dentro de este componente funcional, correcto, use contextos. Y acepta un argumento, que es que los contextos de inicio de sesión. Por lo que necesitamos importar esos contextos de inicio de sesión desde nuestro componente de aplicación. Así que primero exportemos eso desde el componente de aplicación, y luego importemos contextos de inicio de sesión desde el componente de aplicación. Ahora pasa este contexto de inicio de sesión dentro del gancho de contexto de Estados Unidos. Y almacenamos este valor en una variable llamada login. Entonces vamos a consolarlo, guardemos los cambios y echemos un vistazo. ver, logramos pasar. Entonces sea cual sea el valor que pase en este proveedor de contexto, un exceso de ese valor mediante el uso de contextos de uso gancho. Si entiendes estos tres pasos, enhorabuena, entiendes el uso contextos gancho. Vamos a recapitular rápidamente lo que aprendimos. contextos de uso se utilizan para administrar datos globales en React. Por lo que no necesitamos pasar esos datos a través de apoyos desde el primer componente padre hasta el último componente hijo. Si queremos pasar datos solo para componente hijo, entonces puedes usar accesorios. No uses contextos en todas partes. Solo úsalo cuando lo necesites. Ahora para usar contextos de uso, solo tienes que seguir tres pasos. En primer lugar, crear el contexto, utilizando crear contexto y dar nombre a esos contextos como hicimos contextos de inicio de sesión. Ahora segunda unidad para decidir qué componentes pueden acceder a estos contextos con el uso de contextos punto, proveedor, y pasar otros componentes entre esta etiqueta de proveedor en atributo de valor, pasar valor dentro de corchetes rizados. Y último paso, necesitas importar esos contextos de tu archivo y pasar ese contexto dentro de ti usa contextos, engancharlo y almacenarlo en variable, simple como eso. Ahora verás que nuestro componente de app se ve un poco feo, pero es sencillo. Contextos. Imagina si tenemos phi o seis contextos, entonces simplemente no te gusta codificar en ese proyecto. Y si estás trabajando para una empresa, tampoco les gusta el código desorganizado. Entonces hagamos una estructura organizada para crear contextos. Entonces, antes que nada, creo una nueva carpeta en la carpeta fuente llamada contextos. Creamos todos los contextos aquí en esta carpeta. Ahora crea un nuevo archivo en esa carpeta llamado contextos de inicio de sesión proporcionado ab.js. Y en este archivo, guardamos nuestra vieja lógica de contextos de inicio de sesión. Entonces primero, creo una imagen usando un FCE. Ahora solo copio estos contextos de creación desde el componente de aplicación y lo pego aquí. Ahora a cambio, tenemos que establecer proveedor. Por lo tanto, agregue contextos de inicio de sesión proveedor de puntos, y proveedor de deuda interior Tenemos que pasar todos los niños, justo en apoyos niños y pasar a los niños dentro de proveedor. Ahora dar un atributo de valor en proveedor. Y quiero pasar valor de fecha para estos contextos. Por lo que creo detalles de usuario y paso valor predeterminado true. Se puede pasar cualquier tipo de datos y pasar esa variable de estado en valor. Ahora de vuelta a nuestro componente de aplicación, Un importante que los contextos de inicio de sesión proveedor y reemplazar proveedor con contextos de inicio de sesión proveedor. Porque pasamos niños dentro proveedor de deuda y eliminamos cosas innecesarias de este componente. Ahora, último y último paso, los genes estos contextos transitan de la app a nuestros contextos. Es menos proveedor de contextos de inicio de sesión. Y eso es todo. Organizamos ese feo código en código organizado. 8. useRef: Entonces, ¿qué es usuario? El usuario F nos permite acceder a elementos DOM y también para crear variables mutables que no volverán a renderizar el componente. Estos son dos casos de uso más comunes de usuario si gancho. Déjame mostrarte cómo crear una variable mutable. Entonces en este ejemplo, creé un campo de entrada y evento onchange, actualizo este estado de nombre con el valor de entrada actual y visualizo el nombre aquí. Ahora, imagina que queremos contar cuántos vendedores suceden cuando ingresamos el nombre. Cuando enseño esto a mis alumnos, me preguntaron por qué no podemos usar, lo usaron para esto. Y creo que podrías tener la misma pregunta. Entonces veamos esto en vivo. Por qué no usamos usted gancho lo que el recuento rinde. Así que primero, creo una variable de estado más y el nombre dado cuenta y paso 0 como el valor por defecto. Ahora en efecto de uso, actualizaré el conteo por uno para cada render. Yoduro dijo Contar anterior, función de flecha, anterior más uno. Y después de nombre, voy a mostrar la variable de conteo. Ahora guárdalo. Échale un vistazo. Ver, el conteo se actualiza constantemente porque cuando este componente se renderiza, actualizará la variable de descuento por uno. Y debido a que esa variable de estado se actualiza, el componente se renderiza una y otra vez. Entonces estamos atrapados en un bucle infinito porque usamos fecha. Entonces vamos a resolver esto con un gancho de aplicación de usuario. Así que elimino esta variable de estado y uso efecto e importe al usuario f de la biblioteca React. Ahora bien, usuario f. y aquí podemos dar un valor por defecto mismo que usted indica. Ahora, esta función devuelve un objeto con una propiedad que es actual. Así que vamos a almacenarlo en un recuento de variables. Y vamos a consolar esta variable c, Obtenemos objeto con una propiedad actual. Podemos actualizar o mostrar este valor mediante el uso de count dot current property aquí, right, count dark current y guardar los cambios. Ahora vamos a actualizar este valor cuando el componente renderizado, a la derecha, use un recuento de mascotas es igual a contar corriente de punto más uno. Guárdalo y echa un vistazo. Cuando escribimos la caja de entrada, conteo se está actualizando por uno. Así que el primer caso de uso del usuario F es crear una variable mutable sin causar re-renderizado. Ahora, veamos el segundo caso de uso de la aplicación de usuario, que está accediendo a los elementos DOM. En React, podemos agregar un atributo href al elemento, acceder directamente a él. Entendamos con el ejemplo. Por lo que aquí tenemos una caja de entrada y botón. Al dar clic en este botón, esta función se ejecutará. Ahora, quiero cambiar el ancho de esta entrada. Cuando pinchamos en este botón. Podemos hacer eso en Vanilla JavaScript usando document.getElementById o por nombre de clase. Pero en React, no necesitamos hacer eso. Usamos directamente, usamos rep y obtenemos ese elemento en variable. Déjame mostrarte eso. Hasta ahora lo más importante, use rep, hook y write user y almacene eso en variable. Ahora dale a esta entrada una propiedad que f es igual al elemento de entrada, que es el nombre de nuestra variable ref. Ahora vamos a consultar valor actual C. Obtenemos ese input llene el inmueble actual. Ahora voy a cambiar esta entrada con 2300 píxeles. Entonces como estamos haciendo vanilla JavaScript, ¿verdad? Elemento de entrada corriente de punto, estilo de punto, ancho de punto igual a 300 píxeles. Aquí, la corriente de punto de elemento de entrada es nuestra píldora de entrada. Así que guárdalo y echa un vistazo. Véase, cuando hacemos clic en este botón, el ancho de entrada se incrementa a 300 píxeles. Ahora centrémonos en esta entrada cuando pinchemos en este botón. Entonces volvamos al código VS. Y en la misma función, tengo que añadir, ¿adivina qué? ¿ Verdad? Elemento de entrada punto corriente punto pocus. Así que guarda los cambios y echa un vistazo. Cuando hacemos clic en este botón, el ancho de entrada aumentará y la entrada está en foco. Es lo mismo que hacemos en Vanilla JavaScript, solo para usar input element dot current. Y después de eso, puedes acceder a todos los métodos de JavaScript para el elemento. Ahora algunos de ustedes podrían preguntarse, ¿cómo podemos saber qué métodos podemos utilizar con los elementos y cómo podemos recordarlo? Entonces la respuesta es, no tienes que recordar ningún nombre de método. Déjame mostrarte mi truco para ver todos los métodos que podemos usar con los elementos. Aquí. Simplemente elimina esta propiedad actual y guárdala. Ahora en la consola, se puede ver este objeto elemento de entrada con la propiedad actual. Ahora haga clic en esta pequeña flecha, y nuevamente haga clic en esta flecha. Aquí puedes ver todos los métodos que podemos aplicar sobre este elemento. Qué ejemplo queremos aplicar estilo. Así que desplácese hacia abajo hasta la parte inferior y haga clic en este icono para ver más propiedad. Aquí se puede ver la propiedad de estilo. Da clic en él y podrás ver todos los estilos de propiedad, simple como eso. Entonces recapitulemos lo que aprendimos. uso de rep es permitirnos crear variables mutables que no causen re render. Y es muy útil acceder a elementos DOM sin escribir document.getElementById o por nombre de clase. Entonces aquí está la sintaxis del gancho de aplicación de usuario. Aquí podemos pasar el valor por defecto de esta variable, y es opcional. Esta variable tiene un objeto, y ese objeto contiene sólo una propiedad que es actual. Si queremos acceder o actualizar, tenemos que usar corriente de punto variable. También podemos acceder a los elementos mediante el uso de su atributo app. Recuerda mi truco, con ayuda de consola, podemos ver todos los métodos. 9. useReducer: Entonces, ¿de qué sirve? El reductor. Reducer se utiliza para administrar el estado en nuestra aplicación React. En otras palabras, usar reductor funciona como una declaración está destinada a. Ahora se podría preguntar, ¿qué es la gestión estatal? Por lo que la gestión estatal se utiliza para administrar todos los estados de aplicación de una manera más sencilla. Para escribir carbón simple y limpio para todos los estados y utilizar siempre el gancho reductor de usuario cuando se tiene una gran cantidad de estados y métodos para manejar. Entonces vamos a entender usar reductor con el ejemplo. Aquí, creé una simple aplicación de contador usando los EE.UU. hizo gancho. Por lo que tenemos una variable de contador y dos botones, aumentar y disminuir. Por lo que cuando hacemos clic en el botón de aumento, el conteo aumentó en uno. Y si pinchamos en grados beta1, conteo disminuyó en uno. Ejemplo muy sencillo. Ahora vamos a aplicar reductor de uso en este ejemplo. Entonces, antes que nada, déjame limpiar esta variable de estado. Ahora, importante usar la librería React hook reductor en componente funcional, ¿verdad? Use reductor. Reducer acepta dos argumentos. El primero es la función reductor, que gestionará todos los estados. Y el segundo es nuestro estado por defecto. Por ahora, olvídate de esta función reductora. Esto lo veremos después de la explicación. Ahora, primero definamos nuestro estado predeterminado. Entonces voy a crear un objeto en el que podamos definir nuestros todos los estados. Entonces escribe estado inicial igual a objeto. No contaremos variable. Entonces cuenta colon 0. Ahora pasa aquí este estado inicial. Este reductor de usuario devuelve una matriz igual que lo hiciste hook, que significa que el primer elemento devolverá el estado actual, y el segundo elemento devolverá una función que nos ayudará a actualizar ese estado. Entonces usemos la reestructuración aditiva. almacenar esta variable, llamamos elemento post como estado. Y el segundo es despacho. Es el nombre más común para usar reductor. Si queremos tomar otro nombre, ustedes van a tomar eso. Depende totalmente de ti. Ahora, definamos nuestra función reductora, que es la parte más importante de nosotros, reducir nuestro gancho. Entonces dentro de esta función, escribiremos nuestra propia lógica para este reductor de usuario. La función reductor tiene dos parámetros. El primer parámetro es el estado, lo que significa dónde se encuentra actualmente nuestra aplicación. Y el segundo parámetro es la acción, que significa qué acción tenemos que realizar. Ejemplo, aumento, disminución, etc. Sé que esto es un poco confuso. Pero después de completar el ejemplo pull, lo entenderás correctamente. Ahora esta función devolverá el estado actualizado. Entonces por ahora, solo estoy devolviendo el objeto con conteo y conteo actual, que es este conteo de puntos de estado más uno. Ahora para llamar a esta función, utilizaremos la función de despacho. Aquí. En función de recuento de aumento. Yo sólo llamo a despacho y no paso nada dentro de él. Ahora estoy borrando este conteo de conjuntos, y aquí escribo conteo de puntos de estado. Ahora guarda los cambios y echa un vistazo. Ver, cuando hacemos clic en este botón de aumento, el conteo se incrementa en uno. Ahora veamos cómo llamar a diferentes acciones como aumentar y disminuir. Entonces primero pasamos objeto en función de despacho con tipo propiedad colon en Grecia. Ahora tenemos que manejar este tipo en esta función reductora. Entonces bloqueemos este parámetro de acción para que sepamos qué podemos guardar los cambios y echar un vistazo. Al dar clic en este botón incrementado, obtenemos objeto con la propiedad. Así que sea lo que pase en esta función spread, podemos acceder a ella por este parámetro de acción. Entonces usemos un cambio de marchas para gestionar acciones diferentes, diferentes. Se puede utilizar si más, si. Pero me gusta el caso del interruptor, cierto, dulce. Y pasa aquí, exón tipo punto y dentro de él, ¿no? Primer caso, que es incremento en estos. Yo había escrito esto. Ahora para el segundo caso, que se disminuye, se reescribe mismo conteo pero menos uno. Y por fin, pasamos un caso por defecto y devolvemos el mismo estado. Entonces si pasamos cualquier otro tipo excepto aumento y disminución, este valor por defecto se ejecutará en función de conteo disminuido. Escribimos, adivina qué, ¿no? Despacho en tipo de objeto, disminuye, guarda los cambios y echa un vistazo. ver, está funcionando bien. Entonces recapitulemos lo que aprendimos. El reductor de uso se utiliza para administrar estados complejos en la aplicación React. Entonces aquí está la sintaxis del gancho reductor de usuario. Se necesitan dos argumentos. El primero es la función reductora, en la que escribimos nuestra propia lógica. Y el segundo argumento es el estado inicial, que es objeto de todas las variables. Ahora este gancho devuelve una matriz con dos elementos. Por lo que usamos agregado es estructurar. primer elemento es para el exceso de estado actual, reducir nuestro estado inicial. Y segundo elemento se despacha actualizando esa recta, simple como esa. Ahora redefinido función reductor, que tiene dos parámetros. El primero se usa para acceder al estado actual, y el segundo es una acción reducida para obtener acciones diferentes, diferentes. lo que pase en esta función dispersa, podemos acceder a ella en función reductor por este parámetro de acción. Y luego con el uso del caso del interruptor, podemos realizar diferentes tareas. Eso es todo. Ahora bien, en este ejemplo, cometí pequeño error al usar type in string. Por lo que tenemos que ocuparnos de sus errores ortográficos en dos lugares distintos. Entonces en lugar de esto, podemos crear un objeto con acción de nombre. Y siempre usamos todas las mayúsculas para este objeto de acción. Entonces cada vez que vemos eso, sabemos que es para reductor. Entonces en este objeto, primero, creo Aumentar, Aumentar, y disminuir o disminuir. Ahora en exhibiciones, lo reemplazo con acciones que aumentan y disminuyen en dispersos. También reescribe el aumento de acción y los grados de puntos de acción. Por lo que ahora no hay posibilidades de errores ortográficos. Y si queremos cambiar por nombre, podemos actualizar directamente en este objeto y en otros lugares, se actualiza automáticamente. Ahora, quiero cortar estas tres variables y pegarlas al final de este componente. Por lo que nuestro código se ve limpio y fácil de leer. 10. useLayoutEffect: Entonces, ¿qué se usa? ¿Efecto Layout? Utilizan el efecto de diseño funciona exactamente igual que el efecto Hughes, pero la diferencia es cuando se ejecuta. Entonces usa el hecho corre después de que el domo esté impreso en el navegador. Pero por lo general el efecto hacia fuera corre antes de que el domo se imprima en el navegador. Así que cada vez que queremos ejecutar código antes de que se imprima la cúpula, como queremos medir la altura, el ancho, o cualquier cosa relacionada con el diseño de un elemento . Podemos utilizar el efecto de diseño de uso. Y corre sincrónicamente, lo que significa que ejecuta la primera línea y sólo se mueve a segunda línea si se completa la ejecución de primera línea. El caso de uso más común del efecto de diseño de uso es obtener la dimensión del diseño. Y por eso se usa su nombre. Efecto Layout. Déjame mostrarte cuándo corre. Entonces, en este ejemplo, hay un botón de toggle se conmuta este texto y un efecto de uso con palanca de dependencia. Este usuario se ejecutará cuando este estado de toggle cambie e imprimir utiliza efecto en la consola. Primero, importo un enorme efecto de diseño de la biblioteca React, y ahora duplico este código y reemplazo el efecto de uso con el efecto de diseño de uso. Ahora guarda los cambios y echa un vistazo. Vea cuando el componente se renderiza, ambos hook se ejecutarán. Ahora cuando hago clic en este botón de toggle, otra vez, ambos hook correrán. Pero concéntrate aquí. efecto de diseño de uso siempre se ejecuta primero. Ahora crees que es porque lo escribimos antes de declarar. Por lo que me muevo uso efecto de diseño después del uso de gancho vectorial y echar un vistazo, ver, usar efecto de diseño siempre se ejecutará post. Por lo que el flujo de trabajo es clostridia calcular todos estos componentes y luego usar efecto en capas se ejecutará, luego reaccionará imprime todos los elementos en el domo. Y al fin use se ejecutará un vector. Pero este proceso es muy rápido. Por eso lo podemos ver en vivo. El noventa y nueve por ciento de tiempo. Usamos, usamos efecto en nuestro proyecto. Si el proyecto no está funcionando como queremos, solo entonces intentamos usar efecto layout. Ahora, veamos el caso de uso más común, obviamente fuera efecto. En el mismo ejemplo. Quiero obtener la dimensión de este texto y luego añadimos relleno superior tanto como su altura. Entonces, para acceder a los elementos DOM, ¿qué debemos tener que usar? ¿ Verdad? Es usuario. Entonces creo un usuario, código F y VS, ref de uso auto importante de React. Y por eso me encanta esta ESL y extensión. Es una gran herramienta de productividad. Lo que los desarrolladores de React. Ahora almacenamos este usuario tenemos en constante llamada text wrap y pasamos el atributo href a este texto. Ahora, primero intentamos usar, usar efecto y comentar este efecto de uso de diseño. Así que en efecto de uso, reescritura, impuesto ref punto corriente, punto, obtener cliente delimitador en racked. Mediante el uso de esta función, podemos obtener toda la dimensión de este elemento. Déjame mostrarte muy rápido. Entonces, en primer lugar, almacene esta dimensión invariable. Ahora consolidemos y echemos un vistazo. Y obtenemos, porque tenemos que agregar una condición para comprobar si este ajuste de texto no es nulo. Sólo entonces tenemos que ejecutar este código. Así que a la derecha, si x ref punto actual no es igual a nulo y mover este código dentro de él. Guarda los cambios y echa un vistazo. Mira, obtenemos el objeto de dimensión con todas las propiedades. Ahora quiero agregar relleno superior para este texto tanto como su altura. Por lo tanto, escriba x ref punto actual estilo de punto relleno de punto superior igual a invectiva dólar dimensión altura de punto. Arréglalo, y guárdalo. Mira, cuando hacemos clic en este botón de palanca, publicamos aquí este texto, y luego se mueve hacia abajo. Ver en cámara lenta. Ahora este es el problema con el efecto estadounidense. Vemos esta fricción en la salida. Ahora reemplazo el efecto de la u con el efecto de diseño de uso. Guarda los cambios y echa un vistazo. Ves, no vimos esa fricción porque efecto de diseño de uso corre antes del domo impreso. Entoncesvamos a recapitular. Efecto de diseño de uso. efecto de diseño de uso es el mismo que el gancho de efecto de usuario. Pero la única diferencia es cuando ejecutan el flujo de trabajo es la posteridad. Calculo todas las mutaciones, luego uso el efecto de diseño se ejecutará, y luego volver a agregar impresiones de todos los elementos en DOM. Y después de ese uso, el efecto correrá. Y la segunda diferencia es que el efecto de diseño de uso es sincrónico y el efecto de uso es asíncrono. Por lo que 99 por ciento de tiempo usamos efecto de usuario en nuestro proyecto. Pero si ese efecto de uso no funcionará correctamente, solo entonces usamos el efecto de diseño de uso. Y te muestro el efecto de diseño de abuso de casos de uso más común . 11. useMemo: Qué se utiliza memo. Use memo hook se usa para aplicar memoización y reaccionar. ¿ Qué es la memorización? memorización es una técnica para mejorar el rendimiento del código. Y es útil evitar costosos cálculos en cada render cuando el valor devuelto no va a cambiar. Vamos a entender cuál es el ejemplo. Entonces en este ejemplo, creo dos variables de estado, número, y ese número es para la entrada. Y pasar ese número en esta costosa función, que declaré después del componente. Básicamente esta función devolverá el mismo número. Pero después de ejecutar este bucle no deseado, que creé solo para explicación, en el mundo real, puede ser cualquier cálculo largo o cualquier cosa que tome más tiempo y luego almacenar su valor de retorno en el cálculo variable. Ahora este estado oscuro es para alternar el modo oscuro y claro. Y de acuerdo con esta variable oscura, cambiamos el color de fondo y el color del texto. Déjame mostrarte. Entonces cada vez que aumentemos el valor de esta entrada, esa costosa función se ejecutará y devuelve un nuevo valor en el cálculo e imprimirlo aquí. Y cuando haga clic en este botón de alternar, el color de fondo y el color del texto cambiarán. Ahora enfócate en este cálculo. Siempre que cambiamos este número, estamos llamando a esa costosa función y consola se inició este bucle, pero tarda 0.5 o 0.3 segundos de retraso para la actualización. Eso es debido a nuestra función de bajo costo de bucle no deseado. Pero cuando hacemos clic en este botón de alternar, también toma algunos segundos actualizar el tema. Y consola UC. Nuevamente, arrancó Prince loop y por eso pegamos a este equipo de intervalo de retardo. Entonces cuando hacemos clic en el botón de toggle, reacciona es volver a renderizar el componente. En primer lugar, esta línea se ejecutará y llama a esta costosa función. Y eso requiere trabajo extra. Y no podemos alternar de inmediato al equipo. Entonces la solución es, solo ejecutaremos esta función cuando se cambie este número. Entonces usamos el gancho de memo de uso para eso. Y la buena noticia es que usar memos sintaxis es la misma que Hughes effect hook. Tan rápido, importé usar memo de biblioteca React y agregarlo en componente funcional. Use memo tomará dos argumentos. El primero es para la función de devolución de llamada, y el segundo es para las dependencias. Así que cada vez que cualquier variable de esta dependencia va a cambiar, sólo entonces y entonces esta función de devolución de llamada se ejecutará. Por lo que paso número en esta dependencia LA. Y dentro de esta función de devolución de llamada, llamamos a esta costosa función y pasamos el número como parámetro. Ahora piensas ¿cuál es la diferencia entre user y use memo? Usar efecto y usar memo es el mismo. Pero la diferencia está en usuario, podemos devolver el valor y podemos almacenarlo en una variable. Tenemos que crear una variable de estado más. Y luego con la función de valor establecido, podemos actualizar la deuda. Pero en uso memo, podemos devolver el valor y podemos almacenar este valor en una variable. Por lo que guardo este valor en el cálculo de mamíferos. Ahora quito esta línea y en el lugar del cálculo, llamamos cálculo memo. Ahora guarda los cambios y echa un vistazo. Cuando cambiamos el número, tarda unos segundos. Y eso es obvio porque añadimos bucle no deseado. Pero cuando hacemos clic en este botón de palanca, No está tomando los segundos extra. Y podemos alternar temas de inmediato. Y esta técnica mejora el rendimiento de nuestra aplicación, que es cosa muy importante en el mundo actual. Recapitulemos lo que aprendimos. Use memo se utiliza para mejorar el rendimiento de nuestra aplicación React. Podemos dejar de ejecutar funciones no deseadas al volver a renderizar. Entonces aquí está la sintaxis del gancho memo usado. Se necesitan dos argumentos. El primero es la función de devolución de llamada, que devolverá el valor. Y aquí almacenaremos este valor en variable. Ahora el segundo argumento es la matriz de dependencias, en la que podemos agregar variables cuando esta variable va a cambiar, sólo entonces y entonces se ejecutará esta devolución de llamada. Con esta variable. Imprimimos el valor de retorno. Realizamos todos los efectos secundarios en efecto de uso Hooke y todas las funciones caras, cálculo en uso memo hook, simple como eso. 12. useCallback: Lo que se utiliza callback. uso de devolución de llamada se utiliza para devolver la función memo wise. Y también es útil para evitar que se recreen funciones en el renderizado. Sé que esto suena un poco confuso, pero no lo es. Entendamos con el ejemplo. Entonces en este ejemplo, creo dos variables de estado. primero es el número para la entrada de números, y el segundo es para el equipo de palanca. Y según eso, nuestro color de fondo y el color del texto cambiarán. Ahora tenemos una función llamada calcular tabla, y devuelve las primeras cinco filas de ese número estable. En el mundo real, puede ser cualquier cosa como llamar a API. Ahora aquí creé un componente simple llamado una tabla de impresión para imprimir la tabla. Y paso esta función como utilería. Entonces en este componente, creo filas de estado y en el icono de usuario resuelvo esta línea y paso esta función de tabla de cálculo. Función Insertar filas. De modo que los valores de Eddie se sentaron en filas variable. Y luego imprimir la matriz de esta fila utilizando este método de mapa, simple como eso. Veamos esta diapositiva. Aquí. Tenemos un número de entrada. Y después de eso, imprimo esta tabla usando el componente bring table. Y por fin tenemos el botón de toggle va a alternar equipo. Por lo que cuando hacemos clic en el botón de alternar, el tema cambiará. Cuando cambiamos de número, vemos que es tabla a continuación. Ahora, les mostraré el problema. En primer lugar, déjame abrir la consola y refrescar la página. ver cuando traigo doble componente se renderizará por primera vez la consola esta tabla de impresión se ejecuta. Ahora cambié el número y esa función de tabla de calcular va a cambiar. Y es leer e imprimir componente de tabla terminó nuevo consola esta tabla de impresión se ejecuta, que está funcionando bien. Ahora cuando lo vuelvo a conectar, consulta este imprimible corre, lo que significa que el componente imprimible se vuelve a renderizar. Y si cambiamos el equipo, y ese es el tema de rendimiento porque cuando cambiemos cualquier estado en este componente, esta función se recalculará. Y aunque nuestro número sea el mismo, devolverá el mismo valor con las cosas soviéticas de nueva instancia, es un nuevo resultado. Y luego vuelve a enviar el componente imprimible. Ahora tenemos que detener esta recreación de funciones no deseadas. Y por eso usamos, usamos gancho de devolución de llamada. Y la buena noticia es que el uso callback es exactamente lo mismo que usan memo hook. Entonces esa es una pequeña diferencia en el uso de devolución de llamada y uso memo hook. Así que el uso de memoria devuelve el valor de memorizar y el uso de devolución de llamada devuelve una memoria es la función simple como eso. Así que antes que nada, importé uso llamado de vuelta desde React y agrego aquí, use callback. Ahora acepta dos parámetros, como use memo y use effect. El primero es la función de devolución de llamada, y el segundo es Dependencias. Dependencias, escribo número. En callback, simplemente copio y pego esta declaración de retorno. Ahora podemos almacenar esta función en una variable llamada calcular tabla. Y elimino estas viejas funciones. Entonces aquí, si usamos memo, obtenemos sólo este valor en esta variable. Pero si usamos el uso de devolución de llamada, entonces obtenemos esta función completa en esta variable. Y si queremos ejecutar esta función, tenemos que escribir así. Así que cada vez que cambiemos el número, sólo entonces y entonces se ejecutará esta función. Ahora guarda los cambios y echa un vistazo. Cuando aumentamos número. Se puede resolver esta tabla de impresión se ejecuta. Y ahora hago clic en el botón de alternar. No consolará esta tabla de impresión se ejecuta. Por lo que solucionamos este problema con la ayuda de usar callback. Ahora, podemos pasar valor como parámetro en esta función. Por ejemplo, paso a escuchar, guardo eso en variable de valor y puedes usarlo en esta función. Yo creo una nueva variable, nu número igual a número más valor. Y en lugar de este número, pasamos nuevo número. Entonces obtenemos el doble del número original más dos. Depende de ti cómo puedes usar este parámetro. Recuerda, cualquier memo de uso, puedes hacer eso. Ahora, recapitulemos lo que aprendimos. Por lo que el uso de devolución de llamada se utiliza para devolver la función de memorizar y mejorar el rendimiento de nuestra aplicación React. Usar la sintaxis de devoluciones de llamada es la misma que el gancho memo usado, pero el uso de memoria devuelve el valor de memorizar y usar devolución de llamada devuelve algún MY es la función, y luego usar devolución de llamada, podemos pasar valor como pero en uso memo, podemos hacer así de simple como eso. Espero que entiendas usar callback, hook y diferencia entre usar callback y use memo. 13. Ganchos personalizados (useFetch): Entonces, ¿qué es el gancho personalizado? Los ganchos personalizados son básicamente funciones reutilizables en pueblos simples. Ganchos personalizados en tus propios ganchos que creas para tu propio uso. Y puedes usarlos varias veces en tu proyecto. Por ejemplo, tienes alguna lógica en la que usas uno o varios ganchos de React Hooks integrados. Y necesitas usar esa lógica varias veces en tu proyecto. Entonces, en lugar de escribir la misma lógica larga en cada lugar, creas tu propio gancho o función, que es un gancho personalizado. Y lo usas igual que nosotros usamos otros ganchos de compilación de React, tan simple como eso. Vamos a crear uno de los ganchos personalizados más útiles para obtener datos de API. Me encanta esta costumbre porque la uso mucho en mis proyectos. Entonces aquí creo un ejemplo sencillo en el que llamamos API o detalles de usuarios aleatorios y mostramos sus nombres con el ID. Entonces, en primer lugar, creo una variable de estado llamada respuestas y paso una matriz vacía como su valor inicial. Después de eso, uso uso gancho de efecto con dependencias MDMA. Por lo que se ejecuta sólo cuando el componente se renderiza por primera vez. En efecto de Estados Unidos, paso datos de esta API y los convierto a formato JSON, y luego configuro esos datos dentro de las respuestas. Y después de todo eso, visualizo esos datos usando el método del mapa. Ahora, imagina que quieres obtener datos de la intención de API a 12 componentes. Por lo que hay que escribir este código en todos esos componentes, lo cual no es una buena práctica en React. Por lo que vamos a crear gancho personalizado para la obtención de datos. Entonces, antes que nada, creo una carpeta, ganchos personalizados. Almacenaremos todos nuestros hooks personalizados en esa carpeta para organizar nuestro código, lo cual es una buena práctica para los desarrolladores. En esta carpeta, creamos un nuevo archivo llamado use fetch NodeJS. Siempre comienza tu nombre de gancho personalizado con una palabra clave de uso, que es una convención común. Ahora escribo agregar un FCE para repetitivo funcional mediante el uso esta ESL y la extensión de reacción. Así que antes que nada, obtuve esta fecha y uso un vector de este componente y pegué en uso parche e importación de usuario y uso datos de la biblioteca de React. Ahora aceptamos un parámetro en esta función llamado URL. Usamos esta variable URL en el lugar de API. Así que cada vez que usamos, usamos phage, solo tenemos que pasar API en esta función. Aquí, reescribe esta variable de estado de respuestas, y guárdala. Ahora de vuelta a nuestro componente de app. Y acabamos de tratar de usar phage y reaccionar deuda de Auto Import desde nuestra carpeta de ganchos personalizados. Entonces en este utilizado para su función, podemos pasar cualquier API y podemos almacenar ese valor en variable de datos. Y por fin, llegar a estas respuestas con variable de datos. Ahora lo quito, lo uso y lo usé desde aquí. No los necesitamos. Ahora guarda los cambios y echa un vistazo. Obtenemos nuestros datos. Creamos con éxito nuestro post y costumbre más útil espero que puedas ver se llaman looks neat and clean. Entonces este es sólo un ejemplo. Ahora, depende de ti cómo usar tu lógica para diferentes casos de uso. Así que trata de pensar y aplicar tu lógica y crear ganchos personalizados que te ayudarán en tus futuros proyectos. Recapitulemos lo que aprendimos. Los ganchos personalizados son tu lógica, que creaste como función reutilizable. Y en eso, puedes usar múltiples hooks y crear algo que te ayudará a saltarte tareas repetidas en tu proyecto. Además, puedes simplemente usar esos ganchos personalizados en tus diferentes proyectos. 14. Validación de formas con FORMIK y YUP: En el video de hoy, vamos a ver la validación de formularios, que es tema muy importante en React. Por lo pronto. Manejo de formularios, utilizamos fórmico y para Validación de formularios, utilizamos la biblioteca Yup porque hizo que la validación de formularios fuera mucho más fácil. Yo estoy muy emocionada por eso y espero que tú también lo estés. Entonces comencemos. En primer lugar, veremos cómo manejar nuestra propia forma utilizando pandemia. En primer lugar, vamos a instalar la biblioteca open up terminal mediante el uso de Control plus back take para Windows y Command Plus back tick para Mac y escribir npm instalado para mí. O si estás usando Yan, entonces escribe Yan, agrega fórmico y presiona Enter. Ahora cierra la terminal, no la necesitamos. Y vamos a crear la forma básica primero. Así que creo formulario y le doy un formulario de registro de nombre de clase. Ahora vamos a agregar etiqueta o nombre y ruta aquí. Y un tipo de entrada, texto y nombre es igual a nombre. Ahora duplico estas dos líneas tres veces más. Así que segunda etiqueta para el correo electrónico y también tipo de entrada al correo electrónico y nombre al correo electrónico también. A continuación, quiero una etiqueta para contraseña, tipo de entrada a passer y nombre, también contraseña y último nivel o país y contraseña. Tipo de entrada a contraseña y nombre para ver contraseña. Y por último, agregamos tipo de botón, enviamos, guardamos los cambios, y echamos un vistazo. ver, nos sale este poema limpio y algunos estilos básicos. Entonces tengo Guam se ve bien. También puedes obtener este estilo de palma simplemente copiando y pegando el código CSS en tu archivo. Ahora manejemos este formulario usando la biblioteca de patrones. Así que en primer lugar, importo usado para hacer la función de la formación de estos uso bombardeo es básicamente un ganchos personalizados. Gestión de estados y manejo de eventos. No te confundas. Basta con ver esta una vez y son todas las dudas van a resolver. Entonces en nuestro componente se derivó, usamos fórmico y pasamos objeto. La primera propiedad de este objeto son los valores iniciales de nuestro poema. Entonces aquí tenemos que pasar cuatro valores porque queremos manejar este poro entradas. Por lo que creamos una nueva variable fuera de esta función para nuestros valores iniciales. Y escribimos objeto. Ahora presta atención aquí. Tenemos que usar este mismo nombre exacto medida que pasamos nuestros nombres de entrada. Así que la primera propiedad es nombre, porque aquí pasamos nombre cadena vacía. A continuación tenemos correo electrónico, cadena vacía, luego tenemos contraseña, cadena vacía. Y la última. Adivina de qué manera, ¿no? Correcto. Es la contraseña porque pasamos última entrada llamada ver contraseña y también cadena vacía. Ahora aquí pasamos nuestros valores iniciales. Entonces en el objeto JavaScript, si el nombre de la propiedad y el nombre de la variable de valor es el mismo, entonces podemos eliminar esta variable de valor. Entonces elimino esto y funciona igual. Entonces es por eso que creo variable con el mismo nombre. Ahora en este objeto, tenemos que pasar una propiedad más, que es onsubmit. Aquí pasamos la función de flecha y podemos acceder a valores de nuestro formulario e imprimir estos valores en consola. Registre y presione Tab. Y obtenemos console.log. Estos son pequeños trucos que te ayudarán a escribir código rápido. Por lo que pasamos valores. Ahora, vamos a almacenar esto en una variable llamada fórmico. Y vamos a consolar esta variable de formación y ver lo que obtenemos guardados los cambios, y echar un vistazo, ver esta forma de variable, valores, errores y un montón de otros métodos como manejado, blur, handle, change, manejar, enviar, etc. Usemos estos métodos. Voy a estructurar este objeto porque no quiero escribir valores de punto fórmico y cambio de manejador de punto fórmico porque hará que nuestro código sea desordenado. Entonces primero, queremos valores que almacenen todos los valores de esta forma. A continuación, queremos manejar el desenfoque, manejar el cambio y manejar el envío. Todas estas son funciones predefinidas. Entonces no necesitamos definir ninguno de ellos. Y es por eso que el fórmico es tan popular para el manejo de formularios. No es necesario que escribas todas estas funciones. Ahora, en nuestra forma, se me pasa valor para este nombre de entrada, que es valor nombre punto. A continuación, quiero agregar el evento onblur, que se ejecuta cuando vivimos caja de entrada. Aquí, simplemente pasamos manejar blur. Y por último añado onchange y pase cambio de mango. Ahora simplemente copio estos tres atributos y lo pego en todas las etiquetas de entrada. Sólo tenemos que cambiar estos valores. Por lo que aquí escribo correo electrónico. Siguiente analizador, y último ver analizador. Ahora último evento que se maneja submit in form tag, añadimos nuevo atributo en submit and pass handle submit method y eliminamos esta línea. Guarda los cambios y echa un vistazo. Rellenemos el formulario y pinchemos en el botón Enviar. Ves, obtenemos todos los valores de las pastillas. Por lo que en esta función onsubmit, podemos escribir nuestra lógica de Enviar formulario. Qué tan simple y fácil se vuelve el manejo de formas usando el conformado. Y también nuestro código se ve muy limpio y fácil de entender. Ahora, veamos cómo validar este formulario usando bus de biblioteca. Instalemos la librería open terminal y escribamos npm install yup y pulsamos Enter. Por lo que la biblioteca yup nos ayudará a validar valores de nuestra píldora de entrada y errores de retorno. Y luego con la ayuda del pobre de mí, mostraremos el error tan simple como eso. Entonces vamos a cerrar esta terminal. Ahora vamos a crear nuestra validación Schema post mediante el uso de la biblioteca Yup esquema JSON válido es básicamente condiciones que comprobamos realizar la validación. Para eso, creo una nueva carpeta en SRC llamada esquemas. Y en esta carpeta, creo un nuevo archivo llamado index.js. Te explicaré más adelante por qué creo un archivo con nombre index.js. Entonces en este archivo, primero, importo todo como yup de tu biblioteca. Ahora creo una variable llamada esquema de registro. Puedes llamarlo como quieras escuchar. Usamos yup dot object y dentro de él, pasamos nuestro objeto de validación. Tan rápido agrego nombre. Asegúrate de usar el mismo nombre que mencionamos en nuestros valores iniciales. Así que añadir nombre, Garland, yup, cadena de punto, que vamos a comprobar nuestro valor introducido es cadena o no. Entonces punto significa tres, lo que significa mínimo tres caracteres necesarios. Y se requiere último punto, lo que asegurará que este proyecto de ley no se vacíe. Si queremos saber de dónde estoy escribiendo estos métodos, puedes consultar la documentación de yup en NPM. Ahora agregamos nuestro siguiente campo llamado email. Y otra vez fue rechazar cadena. Entonces tenemos método de correo electrónico para validar dirección de correo electrónico. Y se requiere la última. Ahora, una cosa más aquí, en casi todas las funciones, podemos pasar nuestro mensaje de error personalizado, que queremos mostrar en nuestro formulario. Por ejemplo, en esta función requerida, quiero por favor ingrese su nombre. Ahora. Lo mismo en esta función de correo electrónico. Deseo por favor ingrese validar correo electrónico. Y luego requerido escribo, por favor ingrese su correo electrónico. Ahora nuestra próxima factura es contraseña. Primero, vuelva a comprobar la cadena. Ahora aquí, puedes agregar una condición relacionada a tu elección, mínimo seis, máximo 15. Pero te sugiero que uses expresión regular para la validación. Se puede buscar en Google y Google exploración o contraseña. Y les entrego este enlace de expresión regular en cuadro de descripción. Se puede copiar de eso. Aquí tenemos expresión regular para contraseña. Entonces copia eso. Y en nuestro archivo de esquema, creo una nueva variable llamada contraseña rechazos y la pego aquí. Ahora aquí agregamos un método más llamado coincidencias. Y primer argumento es que nuestra contraseña rechaza. Después pasamos nuestro mensaje de error. Por favor ingrese una contraseña válida. Y por último, pasamos función requerida con mensaje. Por favor ingrese su contraseña. Ahora, última propiedad, que es C password, colon, yup dot string. Ahora tenemos que revisar esta contraseña C, igual que esta contraseña. Entonces para eso, tenemos otro método llamado una profundización fue a la expresión es LA. Y para obtener estos valor de contraseña, escribimos yep dot ref, luego pasamos nuestro nombre de archivo, que es contraseña. Y segundo argumento es nuestro mensaje de error, que es contraseña, no coinciden. Y por último, agregamos función requerida con mensaje. Por favor ingrese confirmar contraseña. Ahora exportamos este esquema de nuestro archivo y lo guardamos. Ahora o componente. Primero importamos ese esquema de registro de la carpeta de esquema. Y aquí no tenemos que escribir este archivo de índice porque React toma el archivo index.js como archivo predeterminado si solo escribimos el nombre de la carpeta. Y por eso nombré a este archivo como index.js. Ahora, en este uso fórmico, tenemos una propiedad para validar ese esquema, Esquema de validación. Y aquí pasamos esquema de registro. Ahora obtenemos todos los errores en adultos variable. Entonces vamos a añadir esto aquí. Y pistolas todos estos errores. Guarda los cambios y echa un vistazo. Ver Poniente tenemos objeto vacío. Ahora hago clic en el botón de enviar y z, nos sale esto todos los errores. Ahora escribo nombre y veo que nuestro error de nombre se ha ido. Ahora vamos a agregar correo electrónico y contraseña. Una letra mayúscula, una letra pequeña, un número y un carácter especial c. Nuestro error de contraseña también se ha ido. Ahora vamos a agregar contraseña diferente. Por lo que obtenemos esta contraseña, no coinciden error. Y si escribimos la misma contraseña, entonces todos los errores se han ido. Por lo que conseguimos sumadores en consola. Y ahora tenemos que demostrar esos errores en nuestra forma. Por error de visualización, agrego un DU y le doy un nombre de clase en nuestro contenedor. Y en eso, mostraremos nuestro error. Ahora simplemente agrego una condición, que es si los errores nombre de punto está disponible, luego mostrar el error. Utilizo párrafo con error de formulario ClassName, y luego imprimo errores nombre punto, guardar los cambios y echar un vistazo. Ahora no escribo nada y doy clic en el botón Enviar. ver, obtenemos nuestro error de nombre. Pero un pequeño error aquí, que es cuando ni siquiera tocamos entrada de nombre y escribimos ningún otro campo, también obtenemos el error, que no es bueno. Arreglemos esto, este uso Wyoming tiene una propiedad más que nos llama. Entonces consolaremos esto, guardemos los cambios y echemos un vistazo. Primero, obtenemos objeto vacío. Ahora hago clic en este campo de correo electrónico y no pasa nada. Pero cuando dejamos ese campo de entrada, luego correo electrónico, agregaremos en este objeto. Ahora estamos en campo de contraseña. Y cuando salimos de este proyecto de ley haciendo clic en otra pastilla o pulsando Tab, entonces obtenemos contraseña en este objeto. Entonces en nuestra palma agrego otra condición, este nombre de punto y n. ahora guarda los cambios y echa un vistazo. Ahora hago clic en este campo de correo electrónico y luego entrada Leptis, entonces no obtenemos ese error de nombre. Si damos clic en el botón Enviar o vivimos esa entrada de nombre en blanco, solo entonces y luego obtenemos este error. Entonces copiemos este contenedor de error y peguémoslo después de todas las píldoras de entrada. Ahora por correo electrónico, cambiamos dirección, correo electrónico. Este e-mail. Y los errores cerebral puntean el correo electrónico. Qué contraseña cambiamos errores dot password, hace dot password e imprime errores dot password. Y último para confirmar contraseña. Cambiamos de época. Ver contraseña, no ve contraseña y errores de impresión punto c. contraseña. Y quito estas consolas, guardo los cambios y echo un vistazo. Ahora da clic en el botón de enviar y obtenemos todo el nombre de Aarón y z, obtenemos diferente error. Y escribo tres o más caracteres. Ya se ha ido. Entonces siento todas las pastillas. Y luego da clic en el botón de enviar y obtenemos todos los valores en consola. Ahora podemos borrar todas las pastillas de entrada después de enviar el formulario. Por lo que en onsubmit propiedad, tenemos método de acciones. Y después de la consola, escribimos excelencia dot reset, form. Guárdalo y echa un vistazo. Siento todos los detalles. Y cuando hago clic en el botón de enviar, son todos los campos de entrada se aclaran. Ahora, podemos hacer esta soldadura fría usando uno hacer componentes, que es el segundo método para manejar la palma usando comic. Importo para mi componente de forma y construcción. Ahora solo selecciono el formulario de extracción y presiono Control más Shift plus P en Windows y comando plus más P en Mac. Y escribir, envolver enter y derecho. Y pulsa enter. Ahora pasamos valores iniciales iguales a dos valores iniciales. Bueno escucha, esquema es igual a esquema de registro. Y para onsubmit, creamos nueva función llamada onsubmit y copiamos este código y lo pegamos aquí. Por lo que pasamos a presentar iguales a en Presentar. Ahora este bombardeo usa el método render props para renderizar el poema. Entonces escribimos corchetes y tenemos indicaciones, función de flecha, y movemos nuestra palma dentro de ella. Entonces estas sondas tiene todos los métodos que llegamos aquí. Entonces lo destruiremos después de todos los cambios. Sé que suena complicado, pero no lo es. Después de completar este tutorial, lo entenderás correctamente. Ahora, reemplacemos nuestra etiqueta de formulario. ¿ Qué componente de forma? Asegúrate de actualizar la etiqueta de cierre también. Ahora quita esto onsubmit. No lo necesitamos. Por lo que ahora tenemos componente fallido, que es la sustitución de nuestros campos de entrada. Entonces escribo aquí, pasaremos tipo igual a texto y nombre igual a nombre. Y cerrar este componente de campo. Asegúrate de escribir el mismo nombre que pasamos en los valores iniciales. Este componente de campo funciona igual que este campo de entrada. No necesitamos pasar estos tres atributos. Forma lo hace por sí mismo. Y ese es el poder de formar. Aquí, puedes pasar tantos atributos que quieras pasar en un campo de entrada. Por ejemplo, el marcador de posición es igual a ingresar tu nombre, guardar los cambios y echar un vistazo. ver, obtenemos InputField, igual que esta entrada de nombre. Así que vamos a eliminar nuestra píldora de entrada y también eliminar este marcador de posición. No lo quiero. Ahora copio este componente de campo y lo reemplazo con todos los campos de entrada. Ahora para correo electrónico, paso tipo a correo electrónico y nombre. Correo electrónico. Ahora para contraseña, tipo de paso alto a contraseña y nombre, también contraseña y confirmar contraseña. Paso tipo a contraseña y nombre, ver contraseña. Ahora paso final, tenemos que deestructurar en Rs, entra la píldora de estos prompts. Entonces escribo prueba de coma de objeto. Ahora quita esto usado para hacer y también quita usado para omega de importante. Guarda los cambios y echa un vistazo. Funciona igual que antes. Puedes usar el método que quieras. Depende totalmente de ti. Aquí. Puede agregar caja de Jack y otras entradas utilizando esta propiedad de campo. Si quisiéramos saber cómo hacer eso, puedes leer documentación en formato. Aquí. En la sección de ejemplo, obtendrás los ejemplos de todos los tipos de formulario. 15. BONO: Enrutador de reacción v6: En este tutorial, vamos a ver el router React desde cero. Entonces no perdamos el tiempo y empecemos. Aquí, creo esta nueva aplicación React usando la aplicación NP x Create React, y luego elimino todos los archivos innecesarios. Ahora primero instalamos la biblioteca de enrutadores React, abrimos terminal presionando Control plus bacteria y tipo npm instalamos el router React abajo. Si está utilizando Yan, entonces escriba Yan tenía el domo del router React y golpeó Enter. Por lo que usamos React router dom o creando diferentes rutas en nuestra aplicación. Básicamente, estamos definiendo en qué camino, qué componentes deben mostrarse. Por ejemplo, estamos haciendo una solicitud de www dot code plus u.com. Entonces queremos mostrar componente de casa. Y si solicitamos www dot code bless you.com, se trata menos, entonces queremos mostrar sobre componente. Ahora veamos la implementación. Entonces, antes que nada, si quieres usar React router dom en tu proyecto, cómo agarrar plena obligación con un componente. Entonces ya sabes qué componente de app importamos algunos componentes del router React, dom, ¿verdad? Enrutador del navegador como Router, y envuelva nuestro JSX con este componente de enrutador. Recuerda, sin este router React no funcionará. Ahora para definirlo a cabo, Tenemos dos componentes más. Rutas tan importantes, que se utiliza para definir en qué parte quieres mostrar son todas las rutas. Te lo explicaré en un segundo. Y otra ruta, que se usa para definir nuestro nombre de enrutamiento real y detalles de componentes. Agreguemos nuestro componente de rutas antes del router React versión seis, estas rutas se conocen como switch. Ahora dentro de ella, le sumamos nuestra ruta. Ahora tenemos que pasar dos indicaciones aquí. El primero es malo, y entre estas comillas dobles, escribimos nuestro nombre de ruta. Entonces para casa, sumamos solo forwards menos. Sabemos que cuando solo escribimos google.com o cualquiera de la página web y agregamos ligaduras de expresión. Italia dido va en la página principal de ese sitio web. Entonces por eso escribimos solo barra hacia adelante aquí. Y luego tenemos elemento igual a dos entre corchetes. Añadimos nuestros componentes. Primero, vamos a crear algunas páginas. Por lo que creo nueva carpeta en SRC llamado páginas. En esta carpeta creamos un archivo llamado home dot js y escribimos RFC para React repetitivo y agregamos aquí homepage. Ahora crea un nuevo archivo llamado perfilado o JS, y usa esta boilerplate y también reemplaza la página de perfil de texto. Y creamos una última página con nombre users.js. Añade repetitivo y reemplaza la página del usuario de texto. Ahora de vuelta a nuestro componente de app. Y en elemento, agrego nuestro componente de casa y cierro esto. Ahora, duplica esta línea dos veces más. 19 es la ruta que es menos perfil y pasar nuestro componente de perfil. Y por fin, pero barra los usuarios y sesga nuestro componente de usuarios. Guarda los cambios y echa un vistazo. Mira, esta es nuestra página de inicio. Ahora en URL, pasé menos perfil y obtenemos página de perfil. O si pasamos menos usuarios, entonces obtenemos página de usuarios. Ahora vamos a crear una página más llamada northbound dot js. Y añadimos repetitivo y escribimos 404 página no encontrada. Resolveremos esta página cuando alguien pase otra cosa, pero que no definimos. Así que volvemos al componente de app y añadimos otra ruta y ruta para iniciar un componente de elemento no encontrado. Entonces es básicamente significa que si pasamos cualquier otro camino que no sea de estos caminos, entonces mostrar este componente no encontrado. Y asegúrate de que siempre escribo estas rutas no encontradas al final de todas las rutas. A veces se mete la pata con los demás. Si lo declaramos en la parte superior, guarda los cambios, y echa un vistazo. Si pasamos por aquí otra cosa, entonces obtenemos esta página hacia el norte. Ahora vamos a ver alguna propiedad más útil de React router dom. Vamos a crear una simple barra de navegación. Déjenme cerrar estos otros archivos. Por lo que creo una nueva carpeta llamada componentes. En eso creo un nuevo archivo llamado cercano ab.js. Ahora escribe en AFC y presiona Enter. Ahora elimino estos y no agrego ninguna etiqueta con la clase cercana. Y dentro de ella, creamos una etiqueta, un aditivo a homepage, que es menos. Y autobús a casa aquí. Ahora duplica esta línea dos veces más. Y segundo pero para perfilar y montar perfil aquí. Ahora, el último camino es para usuarios y usuarios adecuados. Ahora guarda esto. Y en nuestro componente de aplicaciones, agregamos nuestro componente Navbar en la parte superior de las rutas. Entonces esta barra ahora se fija en la parte superior. Y debajo de eso vemos todas las rutas. Entonces no necesitamos agregar ahora, pero en todos los componentes, guarda los cambios y echa un vistazo. ver, obtenemos todos los enlaces. Ahora cuando hacemos clic en cualquiera de estos enlaces hacia fuera a ese camino. Pero, ¿puedes ver que nuestra aplicación se reprime? No queríamos, ¿verdad? Entonces para eso, tenemos un componente en React router dom, cual está vinculado en el componente Navbar. Importamos enlace desde el router React, dom, y eliminamos esta una etiqueta y enlace derecho a. Ahora aquí escribimos ruta que es para sin valor, igual que con este perfil. Y lo mismo ocurre con estos usuarios. Guárdalo y echa un vistazo. Ver, ahora cuando hacemos clic en este enlace, nuestra página no se reprime y el enrutamiento funciona sin problemas. Ahora podemos hacer esto más bueno resaltando la ruta actual. Agrego algunos estilos básicos a nuestro efecto Nerva y hover en una etiqueta. Puedes copiar los estilos desde mi repositorio de GitHub. Ahora quiero hacer enlaces de ruta actuales fondo a negro y cambiar su color de fuente. Por lo que necesitamos saber cuál es el enlace activo aquí. Para eso, tenemos un componente que ahora es enlace. Este enlace es la versión avanzada de este componente de enlace. Importareso. Y ahora selecciono un enlace y presiono control más D en Windows y Command plus d en Mac. Con eso, creamos cursor múltiple y reemplazamos este enlace con enlace de navegación. Ahora este mordisquear nos da la clase activa agregada en nuestros enlaces. Guarda los cambios y echa un vistazo. Ahora haga clic derecho en cualquiera de estos enlaces y vaya a Inspeccionar. Ver ahora enlace en clase activa al enlace de nuestros usuarios. Si cambiamos a perfil, entonces se elimina la clase activa del enlace de usuarios y luego se agrega a la creación de perfiles. Ahora de nuevo a la barra de uñas archivo CSS y añadir espacio navbar, un punto activo, y entre corchetes, añadir fondo, color y color a f, f, e, 400. Agendas. Échale un vistazo. ver, obtenemos este bonito enlace activo. Ahora tenemos algunos ganchos importantes lo cual es muy útil en nuestra aplicación. El primero se utiliza navegar. En versión anterior del router React. A este gancho se le conoce como historia de Estados Unidos. Entonces en este componente de perfil, creo un botón llamado C, otros usuarios. Por lo que cuando alguien haga clic en este botón, se debe redirigir en el espacio de usuario que hemos utilizado gancho de navegación. Tan importante, usa navegar desde React, router, dom. Y en nuestro componente, primero escribimos usar navegar y almacenar su variable de valor llamada navegar. Ahora creo nueva función llamada redirigir a los usuarios. Y entre corchetes, escribimos navegar. Y pasamos nuestro camino aquí, que es slash a los usuarios. Y si no escribes estas cuatro palabras menos de lo que redirija a paga ruta anidada, que será de perfil de los usuarios de barra diagonal. Si queremos leer directamente a otra página, a continuación, añadir una barra diagonal antes de la ruta. Ahora en evento button onclick, pasamos este render a la función de usuarios, guardamos los cambios y echamos un vistazo. ver, funciona. Ahora por último, hemos usado params hook. lo que en este ejemplo, tenemos la ruta de nuestro usuario en la que podemos mostrar todos los detalles o perfiles de los usuarios. Entonces si alguien da clic en un usuario en particular, entonces tenemos que mostrar que los usuarios se vende al por menor en otra página. Entonces una ruta se convierte en la última del usuario, que es el ID de usuario. Ahora pasamos datos de los usuarios del backend mediante el uso de este ID. Entonces, ¿cómo podemos definir esta ruta que creo nueva ruta? Pero dos usuarios, es menos de dos puntos ID de usuario. Y para elemento, Vamos a crear una nueva página. Por lo tanto, crea un nuevo archivo en páginas llamadas detalles del usuario. Y escribe nuestro AFC y guárdalo. Ahora de vuelta al componente app. Aquí pasamos el componente de detalles del usuario. Entonces, si alguien redirige a los usuarios solamente, entonces hace que estos usuarios sean componentes. Y si alguien reorienta a los usuarios menos algo, entonces renueva el componente de detalles del usuario, simple como eso. Ahora veamos cómo pasar este ID de usuario en ese componente. Así que vaya al componente de detalles del usuario. Y aquí encarné, uso params de la cúpula del router React. Ahora en componente, a la derecha, usa params y guárdalo en una variable llamada parámetros. Estos parámetros tienen todos los valores de nuestros parámetros de ruta. Consolemos a estos asistentes de ventas y echemos un vistazo. ver, cuando redirigimos a usuarios menos uno, obtenemos UserID a uno. Para que podamos desestructurarlo y escribir ID de usuario. Recuerda, esta es exactamente la misma variable que pasamos en nuestra ruta. Y muestro aquí los detalles del usuario de ID de usuario. David, y echa un vistazo. Ves, obtenemos nuestra identificación Ahora podemos pasar datos de tu back-end usando este ID. Por lo que espero que entiendas React router dom. Si queremos saber eso a fondo, vas a revisar su documentación. El enlace está abajo en la descripción. Si tienes algunas dudas, puedes preguntarme y te veo en el siguiente tutorial. Adiós.