El curso definitivo de React 2025: crea 3 proyectos del mundo real

1. Introducción a la clase magistral de React: Bienvenido al curso Ultimate React. En este curso, vamos a aprender a reaccionar desde su base a conceptos más avanzados. Entonces comenzaremos con cómo funciona reaccionar. Por qué reaccionar es tan popular entender Bb y JSX, construir componentes, agregar eventos, variables de estado, ganchos importantes, acceder al almacenamiento local, reaccionar modo calle, filtrar y cortocircuitar datos, buscar con autorizgons, enrutamiento y navegación utilizando más popular Después de eso, también veremos llamar a las API, manejar errores, mostrar la funcionalidad del cargador, administrar y validar el formulario, paginación, desplazamiento infinito, autenticación y autorización de usuarios con token web JSON, lo cual es muy importante, llamar a APIs protegidas, crear los contextos, y mucho más Si eres un principiante absoluto para reaccionar, es posible que no conozcas estos conceptos. Entonces déjame mostrarte la implementación de estos conceptos. Mediante el uso de estos conceptos, construiremos tres aplicaciones de reacción del mundo real. La primera es la aplicación de administrador de tareas, y podemos decir que es de dificultad a básica. En esta aplicación, el usuario puede gestionar su tarea diaria. Entonces mediante el uso de este formulario, podemos agregar tarea con la selección de las etiquetas, y según el estado, se mostrará aquí. Y además, podemos eliminar esta tarea de nuestra aplicación, por lo que puede ser el mejor proyecto para principiantes. Ahora déjame mostrarte nuestro segundo proyecto, que es la aplicación de películas. Lo asombroso este proyecto es que estos datos son reales, que estamos obteniendo de otro sitio web. También desde aquí, podemos filtrar nuestra lista de películas y la podemos abreviar por fecha y calificación y también ascendente y descendente. Podemos decir que es de nivel de dificultad a intermedio. Ahora déjame mostrarte nuestro tercer proyecto. Este proyecto es muy emocionante. Por lo que vamos a construir una aplicación de comercio electrónico que se ve así. Se puede ver lo hermoso que se ve esto. En este proyecto, implementaremos muchos conceptos avanzados como enrutamiento, llamada a una API, desplazamiento infinito, cortocircuitando productos por precio o calificación, búsqueda de productos con sugerencias de auto, autenticación, como registrarse, iniciar sesión y cerrar sesión, administrar nuestro carrito de compras y mucho más Y después de completar este proyecto, te mostraré el proceso de despliegue de la aplicación react. Ahora podrías preguntar ¿quién soy yo? Soy ingeniero de software y además enseño programación en lenguaje fácil de explicar usando mi canal de YouTube. Dios te bendiga y con mis cursos en línea. Además, te voy a dar muchos consejos y trucos que te ayudarán mucho para crear mejores aplicaciones de reacción. Después de completar este curso, escribirás código de reacción con más confianza y utilizando las mejores técnicas. Sé que estás emocionado de aprender y construir aplicaciones de reacción rápida. Así que vamos a saltar y sumergirnos en este curso. 2. ¿Qué es React?: Bienvenido a la primera sección del curso ultimate react. Ahora antes de que empecemos a aprender a reaccionar, entendamos adecuadamente qué es reaccionar. React es una biblioteca JavaScript de código abierto utilizada para construir aplicaciones front-end. En palabras simples, con react, podemos crear aplicaciones front-end rápidas y mejores. React fue creado por Facebook en 2011, actualmente, es la biblioteca front-end de JavaScript más popular y más utilizada. Además, hay otras bibliotecas JavaScript como Angular y view, pero no son tan mejores como React. Si buscas trabajo como front-end o desarrollador full Stack, debes saber cómo crear una aplicación mejor y rápida con react. Podrías preguntar, ¿qué tiene de especial reaccionar? ¿Por qué reaccionar es tan popular? Antes de que se creara react, cuando nuestra página web se cargaba en un navegador, nuestro navegador crea una estructura similar a un árbol con nuestro código STML Esta estructura de árbol se llama Modelo de objetos de documento o en resumen dom. Ahora, al usar esta fatalidad en JavaScript, podemos agregar varias funcionalidades para nuestra aplicación Ocultar la barra lateral al hacer clic en el botón, manejo de entradas de formulario, etcétera Así que aquí está el ejemplo de ocultar la barra lateral en el evento de clic de botón. Este es el código de Vanilla JavaScript, lo que significa código JavaScript puro sin usar ninguna herramienta externa. Ahora imagina si creamos aplicaciones a gran escala como Instagram o Amazon con JavaScript Vanilla. Y ¿cuántas líneas de código necesitamos escribir? Incluso si logramos escribir ese código largo, nuestro código se volverá desordenado y difícil de administrar Ahora, en ese momento, reacciona viene en la imagen. Con react, no necesitamos preocuparnos por escribir código Javascript Vanilla. En lugar de eso, dividiremos nuestra aplicación en un pequeño trozo de código. Esta pequeña pieza de código se llama componentes y luego react se encargará de escribir código simple para crear y actualizar dom. Los componentes se utilizan para escribir código reutilizable y mejor organizado. Déjame explicarte con el ejemplo. Entonces aquí tenemos nuestro Proyecto tres, que es la aplicación de comercio electrónico. Aquí podemos ver que tenemos New Bar, y en el lado derecho de la barra Neb, tenemos un par de enlaces para diferentes páginas Entonces podemos crear por separado el componente Nabar, y en ese componente, también podemos agregar componente para estos enlaces, y luego podemos reutilizarlo varias veces para los enlaces de Ny Bar Ahora en la página de productos, tenemos barra lateral y aquí tenemos la lista de productos, así creamos otros dos componentes, barra lateral y lista de productos. Ahora en esta lista de productos, tenemos un par de tarjetas de producto, por lo que podemos definir otro componente para tarjeta de producto y luego reutilizarlo varias veces en esta lista de productos. Así que construimos todos estos componentes individualmente y luego los combinamos para construir nuestra página. Al crear pequeños componentes, podemos administrar fácilmente nuestro código y nuestra aplicación también funciona rápidamente. Además, con react, podemos crear una aplicación de una sola página, lo que significa que nuestra aplicación se carga solo una vez, y luego todas las páginas vienen sin recargar toda la página, y eso hará que nuestra aplicación sea casi 50% más rápida que las aplicaciones SDML CSS y JavaScript normales Ahora otra razón por la que reaccionar es tan rápido es reaccionar tiene función dom virtual. Ahora bien, este es el tema por que muchos desarrolladores se confunden, pero es realmente sencillo. Entonces déjame explicarte con un ejemplo. Imagina que tienes un rompecabezas en tu mesa. Es una hermosa imagen de paisaje, y contiene muchas piezas de rompecabezas que encajan entre sí para formar la imagen completa. Cada pieza del rompecabezas representa una parte diferente de tu página web, como un encabezado, una barra lateral o una sección de contenido principal. Ahora digamos que tienes un asistente mágico llamado Virtual puzzle solver Este asistente tiene una copia exacta de tu jigopuzzle, pero es virtual, no real Ahora, siempre que quieras hacer un cambio en tu rompecabezas, describes los cambios en tu solucionador de rompecabezas virtual En lugar de manipular directamente las verdaderas piezas del rompecabezas. Por ejemplo, podrías decir, Oye, solucionador virtual de rompecabezas, quiero mover la pieza azul de la esquina inferior derecha a la esquina superior izquierda En lugar de mover físicamente la pieza del rompecabezas sobre la mesa real, tu asistente rápidamente mira su propia copia. Después descubre los cambios necesarios y te indica a la derecha, quita la pieza azul de abajo a la derecha y agrégalo en la parte superior izquierda. Ahora haces esos cambios en el rompecabezas real basado en las instrucciones de tu asistente. El beneficio es que tu solucionador virtual de rompecabezas puede identificar rápidamente qué piezas necesitas mover para completar la imagen actualizada sin que reordenes manualmente cada En este ejemplo, el verdadero JigsoPuzzle representa la verdadera fatalidad y el solucionador de rompecabezas virtual representa la cúpula virtual en react Ahora apliquemos este concepto a Rax Virtual doom. Entonces, cuando construyes una página web con react, mantiene una representación virtual de tu página web, y se llama como Virtual Dom. Siempre que quieras actualizar tu página web, describes los cambios en el dom virtual en lugar de modificar directamente la fatalidad real Reax Virtual doom compara de manera eficiente el nuevo dom virtual con el anterior Igual que tu solucionador de rompecabezas virtual, identificando rápidamente qué PC de rompecabezas necesitan moverse en su propio rompecabezas Después de eso, react sabe exactamente qué parte del Dom real necesita cambiar a mese el nuevo dom virtual. Al utilizar este enfoque dom virtual, react optimice el proceso de actualización de la fatalidad real, lo que significa que solo aplica los cambios necesarios, haciendo que su página web sea más eficiente y receptiva, especialmente cuando hay actualizaciones frecuentes o interacciones sucediendo En resumen, el solucionador de rompecabezas virtual hace que la actualización del rompecabezas real sea más manejable, DX Virtual doom hace que actualizar el verdadero doom sea más suave y eficiente, y también mejora el rendimiento y la experiencia de usuario hace que la actualización del rompecabezas real sea más manejable, DX Virtual doom hace que actualizar el verdadero doom sea más suave y eficiente, y también mejora el rendimiento y la experiencia de usuario para su aplicación web. Entonces eso es todo por la teoría. Por ahora, no te preocupes por todos estos. Entenderás estos conceptos cuando creamos múltiples proyectos. 3. Configurar el entorno de desarrollo: Vamos a establecer un entorno de desarrollo para este curso. Entonces, antes que nada, necesitamos el nodo JS. Una cosa que quiero especificar, solo estamos usando una parte del nodo JS, que es NPM llamado como Node Package Manager Este NPM se utiliza para instalar aplicaciones de reacción y algunas características adicionales Dirígete a nodjs.org y descarga la última versión estable de NodeJS Haga clic en ocho, y comenzará la descarga. Y tengo una sugerencia si ya tienes NodeJS instalado en tu sistema, entonces por favor quita esa versión e instala la última versión de node Ahora abre esta configuración y da clic en siguiente. Acepta los términos siguiente, otra vez, siguiente, siguiente, siguiente e instala. Y vea que se inicia el proceso de instalación. Y ya está hecho. Así que instalamos con éxito nodejs en nuestro sistema. Ahora, verifiquemos esto. Así que abra el símbolo del sistema en Windows, o si usted es Mguser entonces abra el terminal y escriba el nodo V, y presione Enter Si instalas con éxito nodejs, entonces verás esta versión Si obtienes algo nodo no es reconocido como un comando interno o externo, entonces tienes que instalar nodo nuevamente. Después de eso, escribe NPM y presiona Enter. Y también conseguimos esta versión, preciosa. Ahora lo siguiente que necesitamos para este curso es Vscde, que es uno de los mejores editores de código y casi el 95% de los desarrolladores utilizan Así que dirígete a code.visualstudio.com e instálalo . Es extremadamente fácil. Abra el código VS y para que nuestra experiencia de codificación sea buena, instalaremos algunas extensiones. Ve a este panel externo y primero buscamos siete React Snippets e instalamos esta extensión Esta es una de las mejores extensiones para escribir código React JS rápido. Después de eso, tenemos otra extensión genial llamada más bonita Esta es la extensión que cada desarrollador usa en el código Vas. Prettier formateará tu código de manera muy organizada. Instale esta extensión. Bonito. Ahora tenemos que hacer poco ajustes para la instalación de más guapa En la sección de instalación, desplácese hacia abajo por la sección del formateador predeterminado y copie esta primera línea de código Ahora abre ajustes y en la esquina superior derecha, abre configuración, perros y archivo y pasa esta línea al final. Guarde este archivo. Ahora volvamos a la configuración y el formato de búsqueda al guardar. Incapaz de esto y hecho. Ahora, una cosa más, muchos alumnos piden mi tema de código VS. Buscar AU e instalar esta extensión de tema. Ahora haga clic en estos ajustes y vaya al tema de código y configúrelo en frontera AU, y eso es todo. Nuestro entorno está listo. Ahora en la siguiente lección, crearemos nuestra primera aplicación de reacción. 4. Crea aplicaciones en React: Entonces, hay dos formas de crear aplicaciones de reacción. Primero, podemos usar la aplicación Create React, o podemos usar la blanca. La aplicación Create React es la antigua y lleva más tiempo crearla. Utilizaremos el blanco para crear las nuevas aplicaciones de reacción. Entonces, antes que nada, crea una carpeta en la que quieras practicar react y abre esa carpeta en el comando prom. Y si eres usuario de Mc, entonces abre carpeta interminal ahora escribe NPM, crea, blanco, a más tardar directo, y presiona Enter para continuar, escribir Y, y presiona Ahora escribe aquí el nombre de tu solicitud. Escribo la primera aplicación y presiono Enter. Ahora aquí, necesitamos seleccionar el marco. Entonces seleccionamos reaccionar y presionamos Enter. Ahora aquí, podemos seleccionar Ja Script o TypeScript. No te preocupes por eso. seleccione el guión Ja y presione Enter. En solo segundo, nuestra aplicación está lista. Esto crea una plantilla básica de reacción, por lo que no necesitamos crear una aplicación de reacción desde cero. Este comando nos dará una plantilla de reacción rápida. Ahora aquí, necesitamos escribir estos tres comandos. Entonces primero, tenemos que ir dentro nuestra aplicación escribiendo CD, presionar tabulador y presionar Enter. Ahora escribe NPM, instala y presiona Enter. Este comando instalará todos los paquetes que sean necesarios para crear una aplicación react como webpack, que se utiliza para agrupar diferentes archivos en un solo archivo Otro paquete importante es la Biblia. Este paquete se utiliza para convertir JSX, que es el código JavaScript moderno que dice código JML Entonces la Biblia convierte ese JSX en código JavaScript simple, que los navegadores pueden entender No te preocupes, te lo mostraré en esta sección. Ahora simplemente escribe código, punto, y presiona Enter. Este comando abrirá la carpeta Curen en código VS. Podemos cerrar esta terminal. No necesitamos esto. Ahora para ejecutar esta aplicación de reacción en nuestro sistema, abrimos terminal presionando Control más Peptic o Command más BTI, y escribimos NPM run dive y golpeamos Este comando llevará algún tiempo y aquí obtenemos nuestro enlace de aplicación de host local. Mantenga presionado Control o comando y haga clic en este enlace. Se abrirá nuestra aplicación en nuestro navegador. Entonces así es como se veía react Starter Pack y ver que se está ejecutando en Local host 5173 Así que creamos con éxito nuestra aplicación React. Ahora en la siguiente lección, escribiremos primer código en nuestra aplicación react. 5. Entendemos la plantilla de React: En primer lugar, vamos a entender lo que obtenemos en esta plantilla de reacción. Primero, obtenemos carpeta no módulos. En esta carpeta, tenemos todos los paquetes instalados para nuestra aplicación. Sin estos módulos de nodo, podemos ejecutar nuestra aplicación react, pero no te preocupes, ni siquiera tocamos esta carpeta. La parte divertida es que cuando creo de dos a tres proyectos en react, ni siquiera sé qué hace esta carpeta de módulos de nodo. I SOT, módulos de nodo es la carpeta donde se alojan todos nuestros paquetes de instalación y bibliotecas. A continuación, tenemos la carpeta pública. Esta carpeta pública contiene activos estáticos que se sirven directamente al cliente. Por ejemplo, aquí tenemos blanco tot SVG, que es nuestro icono fab. Déjame mostrarte. Aquí en nuestra pestaña de navegador, podemos ver nuestro ícono fab. Después de eso, tenemos la carpeta SRC, que significa carpeta fuente Esta es la carpeta en la que pasamos nuestro casi todo el tiempo para escribir código. Aquí, primero tenemos la carpeta ASES. En esta carpeta, pondremos todas nuestras imágenes, íconos, estanques, etcétera, que vamos a utilizar en nuestros componentes A continuación, tenemos un montón de archivos. El primero es app dot JSX, que es el componente raíz de nuestra aplicación, lo que significa que este es el punto de partida de nuestra cadena de componentes Tenga en cuenta que este Jx es la extensión del componente de reacción. Es casi similar a los perros. Veremos la diferencia en las próximas lecciones. Por ahora, abramos esto y veamos cómo se ven los componentes. Todos los componentes reaccionan tienen esta estructura básica. En la parte superior, importamos algunos archivos como otros componentes, archivos CSS, o importamos objetos de paquetes o logotipos, imágenes y todo. Después de eso, tenemos una función que tiene el mismo nombre que nuestro nombre de componente. En este caso, esta es la app. Ahora bien, esta función siempre devuelve algo que se ve similar. Marcado HTML. Pero tenga en cuenta que este no es el marcado DML original. Esto se llama JSX, que significa JavaScript XML. Entonces usando este JSX, podemos escribir código STML y JavaScript juntos, y este es el corazón de reaccionar Entonces esta es la parte que decide cómo se ve nuestro sitio web, y esta salida de código es esta, lo que estamos viendo en nuestro navegador. Y también la sintaxis JSX es similar al marcado STML. Así que podemos escribir fácilmente código en JavaScript en menos código. Y al final en cada componente, exportamos ese componente como predeterminado, para que podamos usarlo en otro archivo o componente. Ahora, como dijiste antes, Weblelibrary, toma este código JSX y conviértelo en sencillo código JavaScript que nuestro navegador Después de eso, tenemos el archivo CSS de punto de aplicación, que se utiliza para darle estilo al archivo JSX punto de aplicación Markup Y también que ingresamos en la parte superior del componente de la aplicación. A continuación, tenemos el archivo principal punto JSX, que es el archivo más importante de react Este es el archivo que conecta nuestros componentes con nuestro archivo HTML de punto índice, que tenemos aquí. No te preocupes, es lo mismo que tenemos nuestro archivo STML. Este es el archivo HTML principal que se ejecuta en nuestro navegador. Déjame mostrarte. Cambio aquí este título a mi primera app de reacción. Guarde este archivo, y en navegador, vea, aquí obtenemos nuestro título actualizado. Y además, no necesitamos refrescar nuestra página como SDML. React automáticamente vuelve a cargar nuestra aplicación cuando guardamos nuestro archivo, y esto es muy genial Ahora con eso, tenemos el ícono F, que vemos anteriormente. Ahora, desplácese hacia abajo hasta la sección del cuerpo y vea, aquí solo tenemos dos etiquetas. El primero es DU con una raíz de ID. Esta es la etiqueta principal en que se mostrarán todos los componentes. Déjame mostrarte. En nuestro navegador, haga clic derecho en la página y vaya a Inspeccionar. Aquí puedes ver que tenemos nuestro Du con ID root y dentro de este tenemos nuestro componente app. Ahora después de eso, tenemos la etiqueta Script, y aquí enlazamos nuestro archivo JSX principal Veamos rápidamente cómo se ve el código dentro del archivo JSX de punto principal En la parte superior, tenemos algunas importaciones. Ahora después de eso, tenemos líneas de código mediante las cuales podemos conectar nuestro componente de aplicación que Du que tienen ID root. Entonces tenemos react Dom, que importamos de react Dom client, y eso tiene un método, crear root. Y dentro de esto, apunta la raíz por documento punto Obtener elemento por ID. Después de eso, esta variable raíz tiene un método llamado render, y dentro de este, pasamos el componente que queremos mostrar en esa raíz Du. No te preocupes por esto. En la siguiente lección, escribiremos todo este código desde cero. Ahora después de la carpeta fuente, tenemos Getting nor file en el que podemos definir qué archivos o carpeta no se subirán en Github. A continuación, tenemos el archivo paquete punto GSN, que tiene toda la información acerca de nuestra aplicación Puedes ver aquí nombre, versión, y en esta matriz de dependencias, tenemos un montón de paquetes los cuales se instalan con la instalación, y también tenemos su versión Si en el futuro, perdimos nuestra carpeta nor models, entonces mediante el uso de este paquete punto archivo GSN, podemos recrear nuestros módulos de nodo Ahora también tenemos scripts, que son tarjetas de ordenación para estos comandos. Por ejemplo, anteriormente, usamos NPM run Dao para ejecutar nuestra aplicación Entonces internamente, eso ejecuta este comando react script Dav. Después de eso, tenemos paquetes log dot jSn, que se usa esencialmente para bloquear la dependencia a un Vos y número específicos Y por fin, tenemos white dot confit js file, que es el objeto de configuración de nuestra aplicación Por ahora, no necesitamos preocuparnos por estos otros archivos. Principalmente, nuestro enfoque está en cómo construir aplicaciones rápidas y de mejor reacción. 6. Escribe código desde cero: Ahora escribamos código desde cero. La razón por la que quiero que escribas código desde cero es porque quiero mostrarte cómo reaccionan los componentes se conectan al elemento raíz. En primer lugar, elimine la carpeta fuente completa, construiremos desde cero. Ahora creamos una nueva carpeta llamada SRC y dentro de esta, creamos un nuevo archivo llamado main dot Jx ¿Recuerdas lo que hace este archivo principal Jx? ¿Escribir? Declarará el componente raíz, o podremos ver lo que queremos mostrar en esta DU con ID root. Ahora en la parte superior, importamos algunos objetos de la biblioteca y usando esos objetos, podemos conectar nuestra aplicación con el archivo DML índice Primero, importar objeto react de la biblioteca react. Si no estás familiarizado con esta importación o algún concepto de JavaScript, entonces no te preocupes escribe este código mientras escribo porque en la siguiente sección, entendemos todos los conceptos útiles de JavaScript que estamos usando en react. A continuación, importamos react Dom, del cliente react Dom. Ahora en la siguiente línea, creamos una variable, const Nuevamente, esto es ES six da script feature, y te lo mostraré en la siguiente sección. Así const y dale tu nombre de variable. Digamos mi primer elemento. Puedes llevarte lo que quieras. Depende totalmente de ti. Igual a, aquí escribimos H una etiqueta. Este es mi primer elemento. Y cierra la etiqueta H one. Tenga en cuenta que esto no es un marcado SDML. Se trata de JSX, que se parece SDML porque no agregamos ningún JavaScript Ahora después de eso, mostraremos este elemento en nuestra raíz D. Entonces reaccionamos, Dom, punto, creamos root. Y dentro de este método, tenemos que apuntar a nuestra DU con root ID. Así documento punto obtener elemento por ID, y pasar aquí root en códigos dobles. Y por fin, tenemos que declarar qué elemento o componente queremos mostrar. Entonces escribimos punto, render, y dentro de esto, pasamos nuestro elemento, mi primer elemento. Guarda los cambios y echa un vistazo. Ver, aquí nos llega nuestro texto. Este es mi primer elemento. Ahora, verifiquemos que esto está dentro de nuestro RoOTT o no. Entonces pierna derecha en el texto e ir a inspeccionar. Y se puede ver que está en nuestra raíz debido, así que está funcionando. Enhorabuena, creaste tu primera app de reacción. Ahora aquí agregamos este elemento. Pero en la aplicación real react, agregaremos aquí nuestro componente app. No te preocupes por eso. Te prometo que te sentirás cómodo con reaccionar pronto y no intentes entender todos los temas de una sola vez. Porque con la práctica, entenderás cada tema. 7. Sección 02 Refrescador de JavaScript ES7: Bienvenido a la segunda sección del curso ultimate react. En esta sección, vamos a ver algunos de los temas importantes de Javascript que usamos mucho en reaccionar. Comenzamos con War, fue su let W su sintaxis Cs ArwFuncton, accediendo a las propiedades del objeto en diferentes métodos Después de eso, veremos desestructurar objetos. Entonces métodos como mapa y filtro, operador de propagación, operador ternario, módulos y mucho más Algunos de estos conceptos quizás ya conozcas, pero mira esta sección como un repaso. Confías en tus conocimientos de Javascript, entonces puedes saltarte esta sección. Depende totalmente de ti. El objetivo de esta sección es prepararte con todos los conceptos necesarios de JavaScript, cuales se utilizan en react. Para que puedas aprender a reaccionar fácilmente sin preocuparte por los conceptos modernos de JavaScript y poner tu cien por ciento de foco en aprender a reaccionar. 8. var, let y const: A t y const, estas tres palabras clave se utilizan para definir variables en JavaScript. Latin Const es nuevas características en JavaScript moderno. La mayoría de los desarrolladores usan Let y const en lugar de usar War Entendamos la diferencia entre et const y War necesaria En nuestro proyecto anterior, que creamos en primera sección, openmin dot archivo JSX, y aquí eliminamos todo primera pregunta es qué está mal con la guerra que necesitamos usar nuevas funciones para la declaración. Entonces defino aquí una función llamada print loop, y dentro de esta función, usamos simple for loop. Primero, definimos variable, I es igual a cero. Entonces ponemos condición yo menos de tres, y por fin, yo más más. Y dentro de este bucle, queremos imprimir esto valoro. Entonces consola dot log I. Ahora, al final, llamamos a esta función de bucle de impresión. Di los cambios y echa un vistazo. Mira, aquí tenemos cero, uno y dos. Perfecto. Ahora, déjame mostrarte cuál es el problema con la guerra. Entonces aquí, después de este bucle de otoño, nos deslizamos la consola I. ¿ Puedes adivinar cómo será nuestra salida? Déjame mostrarte. Guarde los cambios y C, aquí obtenemos este valor I, que es tres. Así que aquí queremos definir la variable I para sólo este bucle for. En otros lenguajes de programación, variable solo debe ser accesible para el bloque en el que se definió, y eso se denomina alcance. R no es una variable de alcance de bloque. Es la variable de alcance funcional, lo que significa que podemos acceder a esta variable I dentro de toda esta función. Ahora imagina que siempre tenemos que llegar a un nuevo nombre de variable. Entonces para resolver este problema en variable ESC Oxcope usando dos palabras clave, let y const Entonces simplemente pasamos aquí dejemos en el lugar de la guerra, guardemos los cambios y echemos un vistazo. Ver, aquí nos sale error, yo no está definido. Entonces ahora, esta variable I solo es accesible dentro de este bucle de cuatro. Podemos decir que este bloque alcance. Usamos war cuando queremos acceder a la variable en función completa, pero eso es raro. La mayoría de las veces, usamos late o const cuando queremos acceder a esa variable solo dentro del bloque de código en el que definieron Ahora se podría pensar, ¿cuál es la diferencia entre late y const Aquí, esta const significa constante. Constante significa que no podemos cambiarlo. Déjame mostrarte. Eliminemos este código, y aquí definimos dos variables. El primero con lat, X es igual a diez, y el segundo con const, Y es igual a diez Ahora podemos reasignar el valor de la variable que declaramos con retraso Aquí, podemos hacer X es igual a 20, pero no podemos reasignar el valor de la variable que declaramos con const, así que no podemos escribir Y es igual a Nos va a dar error. Y tomar. Ver, aquí obtenemos asignación de error de tipo a variable constante. Entonces, si queremos querer cambiar su valor, entonces usamos const y si quieres cambiar su valor, entonces usaremos tarde Entonces, para recapitular, no use la palabra clave War porque tiene alcance funcional y prefiere usar la palabra clave Cs antes de tarde Úselo solo en la palabra clave cuando desee reasignar la 9. Función de flecha: Entonces, ¿qué es la función de flecha? La función de error es otra forma de definir la función JavaScript. En otras palabras, podemos escribir función JavaScript de manera sencilla y fácil. Esta es una característica muy útil de Javascript cuando estamos trabajando en temas avanzados. Agrego nuestro código anterior en carpeta fuente si quieres revisar los conceptos. Aquí definimos la función llamada decir hola. Dentro de esta función, simplemente consola dot log, y queremos imprimir este Hola mundo JavaScript. Definimos esta función con la palabra clave function. Ahora veamos cómo crear la misma función usando la función de flecha. Entonces para definir la función de flecha, antes que nada, tenemos que usar let o const Pero en la mayoría de los casos, usamos const porque no queremos reasignar esa función Aquí escribimos nuestro nombre de función. Digamos, crear iguales a ahora usamos paréntesis para la función, y luego usamos igual y mayor que, que construyen esta flecha Y luego agregamos corchetes Ci para agregar bloque Cd para esta función de flecha. Dentro de esto, escribimos consola dot log. Hola mundo JavaScript. Ahora, llamemos a esta función. Aquí, podemos llamar a la función de flecha por su nombre, igual que llamamos a nuestra función normal. Los cambios y echar un vistazo. Abre Consola y mira aquí obtenemos el mismo resultado. Entonces ambas funciones son iguales. Esta sintaxis de la función de flecha nos ayudará para Javascript avanzado. Déjame mostrarte mi truco para recordar la sintaxis de esta función de flecha cuando empecé a aprender Javascript. Entonces tenemos nuestra función decir hola. Ahora, elimine esta palabra clave de función y juegue const. Luego entre nombre de función y paréntesis, agregamos iguales a, y entre los paréntesis y corchetes C agregamos flecha, simple Ahora bien, si en el bloque de código de función de flecha, solo tenemos una línea, entonces podemos eliminar estos corchetes. Vamos a eliminar estos Guardar los cambios y ver lo simple y fácil de definir la función. Ahora, ¿pueden ustedes? ¿Cómo podemos agregar argumentos en la función de flecha? Cierto, es la misma manera que pasamos en función normal. Entonces agregamos aquí, idioma, y dentro de esta consola, mostramos este parámetro de idioma. Ahora cuando llamamos a esta función, pasamos aquí, digamos reaccionar. Guarde los cambios, y vea, obtenemos hola Javascript mundo reaccionar. 10. Acceso a los objetos: Hablemos un poco de objetos. Entonces sabemos que el objeto es un par de valores clave. En otras palabras, el objeto JavaScript es una colección de valor con nombre. Quizás lo sepas todo sobre esto, pero solo quiero asegurarme para ti de que los conceptos fundamentales de Javascript son correctos. Lo siento mucho por eso si lo sabes. Solo mira esta lección como un repaso. Entonces aquí, uso const porque no quiero reasignar este objeto con otro valor Entonces const usuario es igual a entre corchetes C, definimos datos en par de valores clave Entonces el primero es el nombre de Halley. Por cierto, este es mi nombre favorito. Y otra propiedad, digamos, envía un correo electrónico y se establece en Halley 07 en el gmail.com rojo ¿Me puede decir cómo podemos acceder a esta propiedad? Correcto, podemos usar el nombre de punto de usuario o el correo electrónico de punto de usuario. Así que simplemente consolamos el nombre de punto de usuario de registro de punto. Guarda esto y mira aquí conseguimos Harley muy fácil. Ahora, déjame mostrarte otra opción para acceder al valor del objeto. Entonces en el lugar de este nombre de punto, usamos corchetes y en códigos dobles, pasamos nuestro nombre de propiedad. Ver, aquí conseguimos Autoización también. Veamos, enviemos un correo electrónico, guardemos los cambios y echemos un vistazo. Consulta aquí recibimos nuestro correo electrónico. Usaremos el método de corchetes en alguna parte de react. Entonces por eso agrego esta lección. 11. Desestructuración de objetos: Ahora bien, otro concepto de Javascript que utilizó mucho en react es la desestructuración de objetos Veamos de qué se trata. Así que imagina que tenemos un objeto llamado usuario wtorsUser detalles como nombre a SAM y correo electrónico a SAM email@gmail.com y país En este código, queremos extraer el valor de la propiedad de este objeto. Digamos nombre o correo electrónico o país. Para eso, escribimos const name es igual al nombre de punto de usuario. A continuación, escribimos const email igual al email punto del usuario. Y por fin, escribimos contras país igual al usuario punto país. Y después de eso, simplemente imprimimos estos valores. Así consola dot log, nombre, correo electrónico, país. Guarda los cambios y echa un vistazo. Mira aquí obtenemos estos valores. Ahora el problema con este código es el número de líneas. Imagina que tenemos de cinco a diez propiedades entonces tenemos que declarar de cinco a diez variables diferentes, y esa no es la mejor práctica. Para resolver este problema, tenemos desestructuración de objetos. Comento este código anterior y escribo aquí, const Ahora aquí tenemos que usar ulipacket es igual a nuestro nombre de objeto que Ahora piensa lo que tenemos que escribir en este corchetes Cali. Tenemos que escribir aquí solo nuestros nombres de variables que queremos extraer de este objeto. Escribimos nombre, correo electrónico, país, y eso es todo. Este código de una sola línea funciona igual que estas tres líneas de código. Verifiquemos esto. Guarde los cambios y vea que funciona igual que antes. Se puede ver lo sencillo que es con la desestructuración de objetos. Ahora podrías preguntar, ¿ tenemos que agregar siempre todas las propiedades en el Calibacket y la respuesta es no Solo tenemos que agregar esos nombres de propiedades, que queremos extraer. Por ejemplo, si queremos acceder solo a nombre y correo electrónico, entonces podemos eliminar esta variable de país. Ahora bien, ¿y si queremos cambiar este nombre de variable name por digamos nombre de usuario? Entonces para eso, tenemos que agregar aquí dos puntos y después de eso, agregamos nombre de usuario. Verifiquemos que esto funcione o no. Cambia tu nombre por nombre de usuario, guarda los cambios y echa un vistazo. Verás, está funcionando. A esto lo llamamos como destructuración de objetos. 12. Método de mapa: Ahora en esta lección, veremos el método map para array. Este es uno de los métodos de matriz más utilizados en la aplicación react. En react, usaremos el método map para mostrar la lista de datos. Por ejemplo, imagina que estamos trabajando en proyecto de comercio electrónico. Ahora, en ese proyecto, tenemos variedad de productos que queremos mostrar. Aquí utilizamos el método de mapa para mostrar cada producto. No te preocupes, solo di esto y entenderás esto. Creamos aquí nuevos productos matriz es igual a aquí agregamos el producto uno, producto coma dos y el producto coma tres Ahora queremos mostrar cada artículo de la lista de productos así. Entonces podemos hacer eso usando el método MP. Así que escribimos aquí los productos dot MAP. Ahora en este método map, tenemos que pasar una función de devolución que se ejecuta para cada elemento Así que definamos la función aquí. Ahora bien, ¿cómo podemos obtener el valor de cada elemento en esta función? Obtenemos cada valor de elemento usando el primer parámetro en esta función. Digamos artículo o producto. Se puede usar nombre descriptivo. Ahora, simplemente regresamos en códigos dobles, listamos la etiqueta del artículo. Ahora ¿qué queremos agregar aquí? Sí, este producto. Así que agrega plus producto, plus, y agregamos en códigos dobles, elemento de lista de cierre. Recuerda que este método map devuelve una nueva matriz. No va a cambiar la matriz anterior. Así que vamos a almacenar esta nueva matriz en la variable llamada elementos de visualización. Y después de eso, simplemente consolamos los elementos de visualización del registro de puntos. Guarda los cambios y echa un vistazo. Ver, obtenemos una variedad de elementos de la lista. Así que siempre recordemos lo que sea que regresemos de esta función, se agregará en nueva matriz. Y esta función se ejecuta para cada ítem, simple como eso. Ahora bien, este código se ve un poco largo, así que podemos usar la sintaxis de la función de flecha, eliminar la palabra clave de función y agregar aquí flecha. Ahora incluso podemos simplificar este código porque en esta función, solo tenemos una línea que está escrita. Por lo que eliminamos esto escrito y también podemos quitar los soportes Car. Ver ahora nuestro código parece fácil de leer. Verifiquemos estos trabajos o no. Guarda los cambios y echa un vistazo. Ver, funciona igual que antes. Ahora aquí, esto se ve un poco feo. En lugar de usar estos códigos dobles, podemos usar literales de plantilla Esto es muy sencillo y útil. Eliminamos toda esta declaración y agregamos aquí backticks dentro de estos, escribimos nuestro elemento de lista de apertura y elemento de lista de cierre En el centro de las etiquetas, tenemos que añadir este único producto. Entonces en los literales de plantilla, si queremos agregar variable, entonces tenemos que usar corchetes Dollar y Cali Y dentro de estos, podemos acceder a este producto variable. Guarda los cambios y echa un vistazo. Ver, de nuevo, obtenemos el mismo resultado. Entonces depende totalmente de ti qué sintaxis quieres usar. Ahora en la siguiente lección, veremos otro método array, que es filter. 13. Método de filtro: Veamos método de filtro, que se utiliza para filtrar matriz. En palabras simples, filter se usa para eliminar elementos de la matriz existente y siempre devolverá una nueva matriz. En nuestro ejemplo anterior de comercio electrónico, imagina que tenemos que agregar funcionalidad de búsqueda para nombres de productos. Mediante el uso de este método de filtro, podemos filtrar la matriz existente de acuerdo a nuestra elección. Déjame mostrarte a lo que me refiero. Estoy quitando el código anterior, pero para su referencia, lo agregaré en una carpeta separada, que pueda obtenerlo para revisión. Entonces aquí creamos una nueva matriz llamada edades iguales a en paquete cuadrado, cinco, 23, 14, 30 y 21. Simplemente consolemos el registro de puntos de esta matriz. Ahora, digamos que queremos filtrar bordes que son 18 plus. Escribimos filtro de puntos de edades. Ahora dentro de esto, pasamos función, igual que hicimos en el método map. Podemos definir la función, o también podemos usar la sintaxis de la función de flecha. ¿Cómo podemos obtener cada elemento del array en esta función? Derecha, sin pasar por la variable en el primer parámetro. Añadimos aquí variable llamada edad. En esta era, obtenemos cada elemento de esta matriz. Primero, llegamos aquí cinco, luego obtenemos 23 y luego 14 y 30 y 21. Ahora en esta función, tenemos que devolver condición. Digamos, mayores de 18 años. Qué elemento pasa esta condición, ese elemento agregará en nueva matriz. Entonces primero, ese método de filtro, verifica condición para f, que no pasará esta condición que el método de filtro no haga nada. Después comprueba condición para 23, que pasará esta condición, por lo que agregará una nueva matriz. Después de ese 14, que no pasará. Después de ese 30, que pasará esta condición, por lo que agregará 30 y luego también agregará 21. Ahora, este método de filtro siempre devuelve una nueva matriz. Almacenemos eso en variable llamada adultos, al final, vamos a consola dot log estos adultos. Guarda los cambios y mira aquí obtenemos 23, 30 y 21. Aquí también podemos eliminar esta devolución y llamar a los corchetes. Ver se ve más sencillo. Solo recuerda que qué elemento pasa esta condición que agregamos innu array, simple como eso Ahora, digamos de esta matriz, queremos eliminar este 30. Aquí pasamos la edad no equivale a 30. Guarda esto y ve sin 30, obtenemos todos los elementos. Entonces así es como usamos el método de filtro para filtrar los datos. 14. Operador de spread: Ahora, otra característica útil del JavaScript moderno es el operador spread. Así que aquí creamos una matriz llamada matriz uno, y agregamos aquí uno, dos, tres y cuatro. Ahora, después de eso, definimos otra matriz llamada array two. Y agregamos aquí siete, ocho, nueve y diez. ¿Cómo podemos combinar estas dos matrices en una sola matriz? Entonces, para combinar esta matriz, creamos un nuevo número constante igual a matriz de un punto. Aquí utilizamos el método concat, que se utiliza para combinar dos o múltiples matrices Y dentro de este método concat, pasamos nuestro segundo array, que es array two Veamos qué obtenemos. Consola dot log esta matriz de números. Guarda los cambios y echa un vistazo. Vea, combinamos con éxito estas dos matrices. Ahora, déjame darte un poco de ejercicio. Aquí queremos agregar números faltantes entre estas dos matrices. Entonces nuestra salida debería verse así de uno a diez en orden. Pausa esta lección e intenta agregar cinco y seis entre estas matrices. Ahora, también trato de resolver esto con otro método. Si tienes tu método, entonces puedes posarlo en la sección de preguntas y respuestas Así que creamos una nueva matriz con cinco y seis. Y en el método concat, agregamos esa matriz antes de array two Y con eso, obtenemos nuestro resultado. Ahora, déjame mostrarte la forma moderna de hacerlo. Así que comentamos esta línea y escribimos const numbers equals to now here we create array, y dentro de esto, primero, necesitamos obtener todos los valores de array one Entonces escribimos punto, punto, punto, que se llama operador spread, y luego agregamos nuestro nombre de matriz, que es array one. Esta expresión devolverá todos los valores de esta matriz uno. Ahora, después de eso, queremos agregar array two. Así que escribimos de nuevo operador spread array dos. Guarda esto y echa un vistazo. Ver, aquí obtenemos esto ambos array combinados. Ahora podrías preguntar, queremos sumar cinco y seis entre estos. Entonces para eso, no necesitamos crear ninguna nueva matriz como lo hicimos antes. Entonces donde queremos agregar nuestros elementos, simplemente podemos escribirlo en ese lugar. Si queremos agregar algo al principio o al final, también podemos simplemente hacerlo, guardar los genes y echar un vistazo. Mira, aquí tenemos cinco y seis. Se puede ver mediante el uso del operador de propagación, no necesitamos preocuparnos por nada. Simplemente escriba punto, punto, punto, un nombre de matriz, y obtenemos todos los valores de esa matriz. Tan simple como eso. También podemos usar el operador spread con objetos. Entonces aquí definimos el objeto constante uno. Y dentro de esto, agregamos nombre a la metanfetamina. Y después de eso, definimos otro objeto constante dos. Y dentro de esto, añadimos hobby para matrizar la enseñanza y el aprendizaje. Ahora queremos combinar estos dos objetos. Entonces definimos constante, digamos usuario es igual a dos. Ahora aquí tenemos que usar objetos porque queremos obtener nuevo objeto, y lo que escribimos aquí, escribimos, operador spread, objeto uno, operador com spread, objeto dos. Y después de esto, simplemente consultemos dot log este objeto de usuario. Guarda los cambios y echa un vistazo. Ver, aquí combinamos dos objetos. Ahora como hacemos en array, también podemos agregar más propiedades en este objeto. Agregamos aquí, digamos, YouTube para codificar plus. Guarde esto y vea, aquí obtenemos nuestra propiedad. Se puede ver lo sencillo que es combinar matrices y objetos usando el operador spread. Es por eso que el operador de spread es muy útil. 15. Operadores ternarios: Entonces en esta lección, aprenderemos sobre operador ternario u operador condicional Por su nombre, puedes adivinar para qué se utilizará. Derecha, se utiliza para agregar condición. En palabras simples, operador ternario son la forma de atajo para escribir la condición Is Entonces aquí hay una sintaxis de operador ternario. En la primera posición, tenemos nuestra condición. Después de eso, tenemos signo de interrogación, lo que básicamente significa si y entonces tenemos verdadera expresión, que se ejecutará si condición es verdadera. Y entonces tenemos columna, que significa se, y si condición es falsa, entonces esta falsa expresión se ejecutará. Entonces yo palabras simples, si la condición es verdadera, entonces se ejecutará la primera expresión, se ejecutará la segunda expresión. Veamos esto prácticamente. Eliminemos este código, y simplemente creamos una variable usando const Mx igual a 50 Ahora, después de eso, queremos agregar condición. Si max es mayor a 35, entonces queremos regresar, pasar, lo contrario volvemos, fallamos. Por lo que escribimos nuestra condición en la primera posición, que es max mayor que 35. Agregamos signo de interrogación, y adherimos cadena, que queremos devolver. Entonces en códigos, pase, y después de eso, agregamos dos puntos, y agregamos aquí cadena en códigos, fallamos. Ahora aquí estamos regresando cadena de esta expresión, así que tenemos que almacenar eso en variable. Digamos resultado. Y al final, simplemente consola dot log este resultado. Guarda los cambios y echa un vistazo. Ver, aquí conseguimos pase porque nuestro máximo es mayor a 35. Ahora bien, si cambiamos nuestro máximo a 30, guarda esto y mira aquí conseguimos fallar. Así se puede ver lo sencillo que es usar operadores ternarios si tenemos expresión de una sola línea Si tenemos que escribir el mismo código en condición ELs, entonces tenemos que escribirlo de esta manera. Entonces primero, declaramos variable resultado. Después agregamos eLS condición para llenar este resultado. Vea aquí usamos let porque queremos reasignar ese valor de variable De todos modos, puede ver cómo el operador ternario reduce las líneas de código para agregar condición de EFL Esa es la belleza de las características modernas de JavaScript. Esta función de flecha Los operadores Dinari son pequeñas cosas que aumentarán tu velocidad para escribir código y reducirán las líneas de código Desarrollador inteligente no es quien escribe más número de líneas. Desarrollador inteligente es quien puede escribir código en menor número de líneas, pero aún así funciona mejor que el código incorrecto. 16. Módulos en JavaScript: Los módulos son uno de los conceptos más importantes del JavaScript moderno utilizado en react, o podemos decir que react funciona en módulos. Entonces comencemos con lo que es módulo. El módulo es un archivo que contiene código para realizar una tarea específica. Puede contener variables, objetos, función, y así sucesivamente. Entonces a medida que nuestra aplicación crece, tenemos que escribir miles de líneas de código. Pero en lugar de poner todo en un solo archivo, podemos dividir nuestro código en archivos separados por su funcionalidad, que podemos llamar como módulos. Y mediante el uso de estos módulos, podemos hacer que nuestro código esté organizado y sea súper fácil de administrar. Veamos esto prácticamente. Así que vamos a eliminar este código anterior, y simplemente creamos una función llamada post para nuestra aplicación. Por ahora solo imagina que esta función devolverá la parte UI de un solo post. En esta función, escribimos consola dot log. Esto es post. Ahora, después de eso, creamos una función más llamada feed para mostrar múltiples post dentro de esta función, primero escribimos consola dot log. Esto es feed y después de eso, llamamos aquí esta función de publicación. Como imaginamos esta función post devuelve la interfaz de usuario post, y esta función feeled devolverá el post múltiple Simplemente llamamos a esta función de publicación varias veces. Sé que esto es un poco confuso, pero no te preocupes por esto. Al final de esta lección, todo esto tiene sentido. Veamos lo que conseguimos aquí. Entonces, al final, llamamos a esta función de feed, guardamos los cambios y echamos un vistazo. Mira, primero llegamos hasta aquí, esto es feed, y después de eso, tenemos múltiples publicaciones. Ahora bien, esta es solo una parte de nuestra aplicación. Tenemos más funciones o podemos decir más partes, entonces administrar este código no será fácil. Entonces podemos dividir este código en múltiples partes llamadas módulos, y luego podemos administrar fácilmente nuestro código, y también podemos reutilizar ese código en diferentes aplicaciones. Así que cortamos esta función post desde aquí y en nuestra carpeta fuente, creamos un nuevo archivo llamado post dot jsx, y esto también se llama módulo post Y dentro de este archivo, solo pegamos esta función post. Ahora podríamos tener dudas, ¿cómo podemos usar esta función post en nuestro archivo principal punto JSX Porque actualmente podemos acceder a esta función post solo en el archivo postjsx En primer lugar, tenemos que hacer pública esta función para que podamos acceder a esta función en otros módulos. Para eso, al principio, simplemente agregamos teclado de exportación. Ahora como exportamos, podemos acceder a esta función de publicación en cualquier archivo. Entonces en archivo principal o JSX, tenemos que importar esa función Entonces en la parte superior, escribimos corchetes Cali de importación, y en estos corchetes CL, tenemos que agregar nuestro nombre de función que queremos importar. En nuestro caso, es post a partir de ahora en códigos, tenemos que escribir la ruta de los módulos de los que queremos importar. Entonces escribimos punto o punto y barra. Esto se refiere a la carpeta actual y vea, aquí obtenemos las sugerencias. Selecciona post y listo. Tenga en cuenta que aquí también podemos escribir post punto archivo GSX si tenemos post punto TXT o cualquier otro archivo post con otras extensiones, pero eso es raro Por lo que siempre no escribimos esta extensión punto GSX. Guarda los cambios y echa un vistazo. Ver, funciona igual que antes. Creamos con éxito nuestro primer módulo. Ahora, déjame darte un pequeño reto divertido. Aquí creamos el módulo post. Tienes que crear un módulo de alimentación separado de este archivo Gx de punto principal y llamar a esa función de alimentación en este archivo JSX de punto principal Sé que puedes hacer eso. Sólo pruébalo un poco. Entonces, pausa esta lección y después de eso, mira esta solución. Espero que resuelvas este ejercicio. Si no puedes completar este ejercicio, no te preocupes. Ahora puedes aprender que todos estamos aquí para aprender. Pero lo importante es que al menos intentas resolver eso. Así que date crédito por eso. Así que antes que nada, en punto principal Jx cinco, cortamos esta función de feed con la sentencia import porque estamos usando la función post solo dentro de esta función feed Y creamos un nuevo archivo llamado feed dot JSX, y dentro de este archivo, pegamos esta función de feed Ahora para que esta función sea accesible en otros archivos, tenemos que exportar esta. Guarda esto, y en archivo principal JSX en la parte superior, importamos corchetes Cali y lo que pasamos dentro de este Escribir nombre de función o variable a la que queremos acceder. Entonces agregamos feed de códigos, period, slash, y seleccionamos feed Guarda los cambios y echa un vistazo. Ver funciona igual que antes. Así podrás ver cómo dividimos o dividimos nuestro código en múltiples archivos llamados módulos. Y si aprendes este sistema de módulos, entonces podrás entender fácilmente los componentes de reacción. Ahora en la siguiente lección, veremos una forma poco diferente de exportar e importar módulos, que usamos mucho en la próxima sección. 17. Exportar como predeterminado: Ahora en la lección anterior, definimos módulos y los exportamos para hacerlos accesibles para otros módulos. Ahora imagina que tenemos una función más en este módulo de feed llamada otra función. Y dentro de esto, simplemente consola dot log Otra función. Ahora para exportar esta función, agregamos aquí la palabra clave export, guardamos esto y en el archivo Jx punto principal, también podemos importar esa otra función Aquí, eliminamos este feed de Importar y solo presionamos Control más espacio en Windows o Comando más espacio en Mac para abrir la lista de sugerencias. Ahora aquí podemos ver la lista de objetos o funciones exportados. D es que llamamos como nombre de exportación, lo que significa que mediante el uso del nombre de la variable, podemos importarlos. Pero hay otra forma de exportar, que es exportar por defecto. Así que alimento el archivo JSX punto, quiero hacer esta función de feed, que es la función principal de este módulo de feed, exportar eso por defecto Entonces, para que la exportación sea predeterminada, solo agregamos export default en el lugar de exportación. Tan simple como eso. Podría pensarse, cuál es la diferencia entre esta exportación y la exportación por defecto. La única diferencia está en el estado de importación. Déjame mostrarte a lo que me refiero. Guarda este archivo y en el archivo principal Jx en el lugar de los corchetes, nos adherimos directamente feed, y eso es todo Aquí podemos darle cualquier nombre a esa función. Esta es la única diferencia. Ahora bien, si queremos importar también otra función desde el módulo feed, entonces también podemos importar usando comma brackets y aquí podemos importar todos nuestros llamados export from feed module Ahora podría preguntarse ¿por qué necesitamos aprender este default de exportación? Porque en react, también veremos esta exportación predeterminada para exportar todos los componentes. No quiero que confundas buscando otra sintaxis de exportación Ahora en este archivo GXS de punto de alimentación, esta exportación predeterminada se ve un poco fea Podemos eliminar esto en la parte inferior, agregamos export default, y aquí pasamos nuestro nombre de objeto o variable, que queremos exportar, que es feed. Y también podemos eliminar esta exportación y después de la exportación por defecto, escribimos export y en object, pasamos nuestro nombre de función o variable, simple como eso. Para resumir para la exportación predeterminada, nuestra declaración de importación se ve así. Y para la exportación con nombre, nuestra declaración de importación se ve así. Sólo tenemos que usar brackets Cal. Eso es todo sobre módulos y exportaciones. Enhorabuena. Ahora estás completamente listo para aprender a reaccionar Jazz. Si continuamente estás viendo este curso, toma un descanso de cinco a diez minutos de tu pantalla y toma un poco de aire fresco, y te veo en la siguiente sección. 18. Sección 03 Conceptos básicos de React: Bienvenido a la sección básica de reaccionar. En esta sección, aprenderás algunos de los conceptos básicos que son muy importantes en reaccionar. Comenzamos con la construcción de componentes, entendiendo JAX y web, agregando elementos, agregando expresión Javascript, atributos, eventos Después de eso, el concepto más importante de reaccionar, que es estado y también uno de los anzuelo más utilizados estado usado. Manejo de entradas, lista de mapeo y mucho más. Estoy muy entusiasmado con esta sección y espero que ustedes también, porque usando estos conceptos, vamos a construir nuestra primera aplicación en la siguiente sección. Entonces hagámoslo. 19. Configurar un nuevo proyecto: Primero que nada, creemos una aplicación completamente nueva, que vamos a utilizar en nuestro primer proyecto. Así que abre el símbolo del sistema o terminal en tu carpeta en la que quieres crear esta aplicación. Y ¿recuerdas cómo crear una aplicación de reacción? Escribir usando NPM, crear blanco a más tardar en rojo? Ahora escribe el nombre de nuestra aplicación, que es la pista de tareas y presiona Enter. Asegúrate de que siempre escribimos nombre de nuestra aplicación en minúsculas y sin ningún guion bajo De lo contrario, nos dará error. Ahora aquí seleccionamos la aplicación de reacción, y después de eso, seleccionamos la variante de JavaScript. Bueno. Ahora, ejecutemos estos tres comandos. Entonces, antes que nada, tenemos que cambiar directorio por CD y presionar Tab dos veces. Ahora instalemos todos los paquetes y la biblioteca usando NPM Install. Y ya está hecho. Ahora, abramos este nuevo proyecto en código VS. Entonces escribimos periodo de espacio de código. Esto abrirá código VS en este directorio. Cerremos este símbolo del sistema. No necesitamos esto. Genial. Ahora verifiquemos que configuramos con éxito nuestra aplicación o no. Abra la terminal usando Control más Batak o Comando más Bata y simplemente escriba NPM run DV y presione Enter Verás, obtenemos esta plantilla de reacción, y eso significa que configuramos con éxito nuestra aplicación. 20. Crea tu propio componente: Ahora en esta lección, construiremos nuestro primer componente de reacción. Para recapitular rápidamente, el componente es una pieza de código reutilizable que solía definir cierta parte de la interfaz de usuario Aquí en la carpeta fuente, creamos una nueva carpeta llamada components. En esta carpeta, almacenamos todos los componentes de nuestra aplicación excepto nuestro componente raíz, que es este componente de aplicación. Ahora en esta carpeta, creamos un nuevo archivo llamado card dot JSX o Js ahora podrías tener duda, ¿cuál es la diferencia entre JSX y extensión JS En primer lugar, podemos escribir cualquier extensión porque ambas funcionan igual. Pero generalmente, usamos extensión JSX porque cuando nuestra aplicación crezca, posible que tengamos que escribir algún código JavaScript. En ese momento, esta extensión JSX te dirá qué archivo es componente trasero y qué archivo es solo código JavaScript Vanilla. Además, cuando usamos dot JSX, nuestro editor de código puede darnos un mejor servicio como sugerencias de sintaxis, verificación de errores y otras características Se utiliza para escribir código JSX. Pero algunos desarrolladores también usan la extensión dot js, y si estás trabajando en un solo proyecto con múltiples desarrolladores, entonces tienes que usar la misma extensión que ya están usando. Entonces aquí usamos dot JSX. Estos son los pequeños detalles que muchos desarrolladores experimentados desconocen y al entrevistador gusta hacer este tipo de preguntas Por lo que puede anotar este punto. Y una cosa más, escribir siempre nombre del componente con mayúscula. De lo contrario, no funcionará en el navegador. Te diré razón en la próxima lección. Ahora en este componente en la parte superior, tenemos que importar react desde el paquete react. Después de eso, tenemos que definir aquí función o clase, que devolverá JSX Entonces estos son dos tipos de componentes de reacción, componentes funcionales y componentes de clase. Los componentes de clase son poco antiguos para el tiempo actual porque para implementar componentes de clase, tenemos que aprender algunos de los conceptos avanzados de JavaScript. Y además, el componente de clase es poco complejo que el componente funcional. Cuando Facebook se desarrolló, reaccionar por primera vez, son sólo un tipo de componente que es componente de clase. Pero a medida que reacciona se desarrolla, tenía componentes funcionales y eso hace reaccionar muy simple y fácil. Actualmente, casi todos los desarrolladores cambian a componente funcional y por eso decido crear discurso usando componentes funcionales. Aquí definimos función con el mismo nombre de nuestro componente, que es tarjeta. Y dentro de esta función, simplemente devolveremos H una etiqueta con texto, digamos, componente de tarjeta. Tenga en cuenta que también podemos crear una función mediante el uso de la sintaxis de la función R, y eso es todo. Creamos nuestro primer componente de reacción. Se puede ver lo sencillo que es crear un componente de reacción. Simplemente tenemos que importar react de la biblioteca react, y después de eso, una función con nombre de componente y devolver el elemento que queremos mostrar. Ahora bien, verifiquemos estos trabajos o no. Como sabemos, tenemos que agregar este componente en el método de render de archivos principal o JSX Entonces para eso, tenemos que exportar esta función de tarjeta desde este componente de tarjeta. Recordamos cómo exportamos la función desde el módulo a la derecha mediante el uso de la palabra clave Exportar. Lo estás haciendo muy bien. Así que escribe la exportación, y esta función de tarjeta es nuestro método principal. Así podemos exportar default y escribir aquí la tarjeta de nombre de la función. Guarda esto, y ahora tenemos que importar esta función de tarjeta en el archivo principal dot sx. Entonces aquí, después de esta entrada de la aplicación, importamos la tarjeta de, y en códigos, tenemos que pasar nuestra ruta de archivo. Así tarjeta de componentes de periodo. Ahora en el lugar de este componente de aplicación, simplemente pasamos componente de tarjeta. Guarde este archivo y eche un vistazo. Ver, aquí obtenemos nuestra etiqueta H one con texto. Entonces esto es realmente, muy simple de crear componentes en react. Si estás un poco confundido, no te preocupes con la práctica, dominarás reaccionar. Cuando empecé a aprender a reaccionar, también estaba confundida, pero seguí aprendiendo y lo más importante practicando. Ahora aquí, tengo un truco de atajo para crear la estructura básica de los componentes en tan solo 1 segundo. Asegúrate de instalar la extensión ES seven react Nippet Esto es necesario para eso. Entonces eliminamos este código completo y solo escribimos aquí RAFCE que significa reaccionar componente de función de flecha con exportar y presionar tab Ver, aquí obtenemos la repetitiva para componentes react. Al usar estos, no necesitamos escribir manualmente esta función de importación, y exportar declaraciones una y otra vez. Tapa de alabanza para un solo cursor y aquí mismo componente de tarjeta. Usa los cambios y echa un vistazo. Ver, funciona igual. Ahora podrías preguntarte, ¿por qué no te muestro este tipo de corte al principio? Entonces la razón es que quiero explicarte la estructura completa de crear componentes. Si primero te muestro este truco, entonces no puedes entender los componentes correctamente. Y apuesto a que entiendes muy bien crear componente. Ahora, déjame hacerte un poco de ejercicio. Tener que crear otro componente rea llamado create todo. A cambio etiquetas simples, crea nuevo todo a partir de aquí en H una etiqueta. Seguro que puedes completar este ejercicio. 21. Solución de este ejercicio: Ahora, antes de comenzar nuestra siguiente lección, déjame mostrarte la solución del ejercicio anterior realmente rápido. Entonces en esta carpeta de componentes, creamos un nuevo archivo llamado createdo dot Y dentro de este componente, escribimos RAA, CE y paso de prensa, y nuestro componente está listo Ahora presiona Escape y en el lugar de esta D, escribimos h one tag y creamos nuevo todo desde aquí. Guarde estos y en main dot jsx pile, importamos create to do, y también podemos ver sugerencias aquí Seleccione la sugerencia, y esto importará nuestro componente de nuestra carpeta. Ahora, simplemente pasamos aquí, creamos para hacer. Guarde los cambios y vea, aquí obtenemos nuestro componente create to do. Si no puedes completar este ejercicio, entonces tampoco te preocupes. Se puede volver a ver la lección anterior. Está bien. No hay presión en absoluto. 22. Cómo funcionan JSX y Babel: Ahora en la lección anterior, creamos nuestro componente y también escribimos código que se ve igual que el código HTML. Pero como te dije antes, esto no es código HTML. Se trata de JSX, que es un código moderno para escribir STML y JavaScript juntos. Esto lo hemos visto en sección, pero eso es solo una pequeña introducción. Ahora, vamos a entender cómo funciona internamente. Entonces, como ya sabrás, nuestro navegador no puede entender el código JSX, pero puede entender el código JavaScript Vanilla. Tenemos que convertir nuestro código JSX en código JavaScript Vanilla, para que nuestro navegador pueda entenderlo. Para eso, necesitamos un compilador llamado Babble. Convertirá nuestro código JSX en código JavaScript simple, que los navegadores pueden entender y renderizar Déjame mostrarte eso prácticamente. En nuestro navegador, abre una nueva pestaña y dirígete a Bblejs dot IO Y ve a esta sección de escritura. Así que aquí podemos escribir nuestro código JavaScript moderno, y Babble convertirá ese código en código JavaScript que los navegadores puedan entender Así que aquí simplemente escribimos const encabezado es igual a H una etiqueta Y pasa aquí cadena. Esto es JSX. Y mira, aquí tenemos este código. Entonces JSX convertir en esta función JSX. Ahora el primer argumento de este método es H uno, que es nuestro tipo de elemento. Y el segundo argumento es el objeto que tienen propiedad llamada hijos. Básicamente, los niños es lo que pasamos dentro de nuestro elemento. Ahora aquí, también podemos pasar atributo class equals a main heading y ver aquí obtenemos la propiedad class en este objeto. Para los desarrolladores, escribir código usando JSX es más simple y fácil en lugar de escribir este código JavaScript vainilla. Entonces, en resumen, siempre usamos JSX para nuestros componentes, y Webble compilará nuestro código en esta función JSX Y esa es la razón por la que no tenemos que importar obligatoriamente la biblioteca react en la parte superior. Pero antes de la actualización de React 18, necesitamos importar react en la parte superior. Ahora se podría pensar, ¿cómo podemos ver el antiguo método de reaccionar punto crear elemento? Entonces aquí, en esta opción, tenemos tiempo de ejecución de reacción. Por defecto, se establece en automático, que es esta función JSX, y podemos cambiarla a clásica Y mira aquí obtenemos este viejo método de transformar JSS en código JAScript usando el método read dot create element Si quieres leer más sobre este tema, entonces puedes leer este artículo. Adjuntaré enlace de documentación oficial. Así es como funcionan JSX y Babel en la aplicación de reacción. 23. Agregar elementos en componentes: Ahora en esta lección, agregaremos algunos elementos en nuestro componente. Entonces después de esta etiqueta de encabezado, queremos agregar un botón. Entonces agregamos botón llamado en la tarea. Ahora aquí obtenemos error en nuestra expresión JSX. Vamos a sobre esto y veamos que obtenemos la expresión JSX debe tener un elemento padre Ahora podrías pensar por qué. Así que en la lección anterior, te muestro la expresión JSX se convierte en función JSX runtime Y también, hemos visto el método reatt create element. En este método ambos, aquí sólo podemos especificar un elemento. Entonces, si escribimos múltiples elementos en JSX, nos confundiremos qué elemento debe elegir Entonces en JSX, siempre agregamos elementos en un elemento padre. Entonces agregamos aquí Du y movemos nuestro código entre este dado. Guarde los cambios y vea formato más bonito de nuestro código de manera estructurada Entonces es por eso que a los desarrolladores les encanta tanto más guapa y más guapa también agregan este paréntesis Eso se debe a la inserción automática de punto y coma de JavaScript. Por ejemplo, si solo tenemos retorno y nada más en esa línea, entonces JavaScript automáticamente pone punto y coma aquí. Déjame mostrarte. Trasladamos nuestro JSX a la siguiente línea. Ahora bien, si guardamos este archivo, vea el anuncio de Ja script aquí Sami Colin por eso, estas próximas líneas nunca serán ejecutadas Por eso anuncio más bonito aquí paréntesis, guarda los cambios y echa Ver aquí obtenemos rumbo y botón. Inspeccionemos ocho para que podamos ver también el marcado. Aquí en la raíz du, obtenemos nuestro du y dentro de este du tenemos nuestros elementos. Ahora a veces no queremos agregar este div no deseado para cada componente react. Veamos otro método para agregar múltiples elementos. En react, tenemos un método llamado fragment. Este fragmento se utiliza para agregar elemento padre en nuestro JSX, pero no devolverá ningún componente de interfaz de usuario en el navegador Déjame mostrarte a lo que me refiero. Entonces en el lugar de este Du escribimos react dot fragment. Ahora bien, si te preguntas cómo cambio estos textos de apertura y cierre juntos, es porque estoy usando esta extensión de etiqueta autoem También puedes instalar esta extensión o aumentar tu velocidad de escritura. Y aquí están la extensión de instalación actual que utilicé, así que también puedes revisarlas. Este tema de icono de material es para el tema de Con. Eso me gusta mucho. Ahora volvamos a nuestro tema, agregue el fragmento de reacción como elemento padre. Guarda los cambios y echa un vistazo. Ver, en la inspección, tenemos aquí sólo nuestros dos elementos sin que no deseado debido. Ahora también, hay un atajo más y un método fácil para agregar fragmentos de reacción. Simplemente podemos eliminar este fragmento de punto de reacción, y eso es todo. Estas etiquetas vacías también son obras de la misma manera que los fragmentos de reacción. Guarde los cambios y vea que funciona igual. 24. Expresión JavaScript en JSX: Entonces, en la lección anterior, teníamos múltiples elementos SDML en nuestro JSX Ahora, veamos cómo agregar una expresión o código Javascript a JSX Entonces, en lugar de mostrar este texto, queremos mostrar el número total de tareas como esta. Ahora bien, este cero está codificado duro, pero queremos mostrar el número real de tareas dinámicamente. Así que solo para demo antes de nuestra declaración escrita, creamos una variable llamada tarea igual a, digamos, cinco. Ahora bien, ¿cómo podemos mostrar esta variable de tarea en el lugar de este número codificado? Y la respuesta es muy sencilla. Así que quita este número y adhiere los corchetes Cully. Y entre estos corchetes cul, podemos agregar cualquier expresión JavaScript válida. Entonces agregamos aquí variable tarea, guardamos los cambios, y vemos aquí obtenemos cinco. Cambiemos esta tarea a cero, y también podemos agregar texto al principio o después de este ci corchetes. Guarda esto y mira, aquí obtenemos tarea cero. Entonces entre estos corchetes cul, podemos escribir cualquier expresión Javascript. Esta expresión debe devolver un valor que se mostrará en la deposición. Por ejemplo, si escribimos aquí solo verdadero y guardamos esto no obtenemos nada. Entonces si no queremos mostrar nada, entonces por qué escribimos aquí esa expresión en JSX Entonces por eso te estoy diciendo que agregues expresión, que devuelve un valor, o incluso podemos llamar a función, que puede devolver un valor. Entonces después de esta tarea, creamos una función, llamada tarea de conteo, función de error, y dentro de esta, devolvemos esta variable de tarea. Y en el lugar de esta tarea, llamamos función de tarea de conteo. Guarda los cambios y echa un vistazo. Mira, aquí volvemos a poner cero. Ahora hagamos este núcleo poco interesante como ejercicio. Entonces en esta función, cuando esta variable de tarea se establece en cero, queremos mostrar un mensaje, ninguna tarea disponible, de lo contrario, es el número de tarea actual. Esto es realmente bastante simple. Espero que puedas hacer eso. Consejos, podemos eliminar este texto de tarea y devolver cadena completa de esta función. Así que dedique algún tiempo a este ejercicio, y después de eso, podrás ver la solución. Entonces, antes que nada, en esta función, agregamos condición si tarea es igual a cero, luego devolvemos ninguna tarea disponible. Y de lo contrario devolvemos cadena usando cadena de plantilla. Si no lo sabes en la cadena de plantilla, podemos acceder a la variable con cadena. Solo ve esto, agregamos acti, tarea, dos puntos, y para acceder a la variable, agregamos corchetes dólar y tarea Ahora, eliminemos esta tarea de Jx. No necesitamos eso. Di adentro y echa un vistazo. Ver, aquí no tenemos ninguna tarea disponible. Y si cambiamos nuestra tarea a dos, y vemos que llegamos aquí tarea, también. Se puede ver lo sencillo que es. Sé que completaste este ejercicio, o al menos trataste de resolverlo. Así que toma crédito por eso. Ahora, déjame mostrarte plataforma de atajo para escribir este mismo código. Entonces comento este código y en el lugar de usar Is, utilizamos operadores ternarios, que hemos visto en sección anterior Entonces escribe retorno, y primero, agregamos condición, tarea es igual a cero. Ahora agrega signo de interrogación para true y regresa aquí, no hay tarea disponible. Después de eso, colon para caídas, y volver aquí ticks, tarea, colon, dólar, corchetes ci, tarea. Guarde esto y vea que funciona igual que antes. Podemos probarlo cambiando su valor a cero. Y vea que no tenemos ninguna tarea disponible. 25. Establecer atributos en elementos: Ahora, veamos cómo podemos agregar atributos en estos elementos. Es realmente simple. hacer lo mismo que hacemos en SDML Por ejemplo, queremos agregar aquí propiedad de valor para este botón. Así que simplemente agregamos aquí el valor es igual a al botón de tarea. Ahora hagamos que este botón se deshabilite dinámicamente. Entonces en nuestra función, definimos una nueva variable llamada Ocultar botón, igual a true. Ahora, cuando esta variable de botón de altura se establece en true, deshabilitamos nuestro botón at task. Así que aquí escribimos desactivar igual a ahora a exceso de variable, agregamos llaves y pasamos aquí botón Ocultar. Guarde esto y vea que nuestro botón está deshabilitado. Y si establecemos nuestra variable en falls, entonces nuestro botón es incapaz. Así es como usamos atributos simples y dinámicos dentro de los elementos. Ahora, déjeme hacerle una pregunta. ¿Cómo podemos pasar el atributo de clase para los elementos? Se podría decir que la clase es igual a dos, y aquí pasamos el nombre de la clase, pero eso nos dará una advertencia. Guardemos estos y abramos Consola. Ver, aquí nos llega esta advertencia clase de propiedad dom inválida, y también nos da sugerencia, ¿Quiso decir nombre de clase? Yo JSX, tenemos que usar el atributo de nombre de clase en lugar de usar clase simple. Pero, ¿por qué? Entonces como te dije antes, esta expresión JSX convierte en simple objeto Javascript, y en ese objeto, si usamos atributo class y en JavaScript, class keyword ya reservada Entonces es por eso que en react, usamos el nombre de clase en el lugar del atributo class. Ahora, otro atributo importante y diferente son los estilos, que solían especificar un estilo en línea para un elemento. Entonces en llanos TML, escribimos algo como esto Estilo es igual a, y en códigos dobles, escribimos nuestros estilos, digamos, de color a rojo. Guarda esto y C, obtenemos aquí error, que dice que tenemos que usar aquí valores, no una cadena. En JSX, tenemos que establecer este atributo de estilo como un objeto de script Ja simple , que contiene estilos En la parte superior, creamos un objeto llamado styles equals to object. Ahora tenemos que pasar todas las propiedades CSS en notación de case camel, lo que significa excepto primera letra, cada primera letra de nueva palabra es mayúscula. Por ejemplo, si quieres agregar color de fondo, entonces escribimos fondo y nueva palabra que es color que C y pasamos valor a rojo. Sé que esto es un poco confuso, pero no te preocupes 99% de tiempo, ni siquiera usamos estos estilos en línea. Ahora, pasemos este objeto de estilos en este atributo de estilo. Para eso, agregamos aquí corchetes Cali porque estamos agregando JavaScript y agregamos aquí el objeto Styles. Guarda los cambios y echa un vistazo. Mira, aquí tenemos este fondo rojo. Ahora bien, algunos desarrolladores no definen este objeto por separado. Lo agregan directamente en las llaves. Déjame mostrarte. Entonces cortamos este objeto de aquí y lo pegamos en este objeto de estilos. Entonces estos dos primeros Calibackets son para acceder a JavaScript y por estilo, tenemos que pasar objeto, que es otro Calibacket que hace que estos estilos en línea sean muy confusos y Y es por eso que generalmente no usamos estilos inline en JSX. Así que vamos a eliminar estos estilos en línea y también eliminar estos estilos variables. 26. Eventos en React: Ahora hablemos de cómo podemos definir o manejar eventos en react. Por lo que manejar eventos en react es muy similar al manejo de eventos en STML Primero que nada, limpiemos nuestro componente, así eliminamos esta constante, aceptamos esta tarea, y también eliminamos esta función y eliminamos este H un elemento. Y entre estos, pasamos tarea calibracets tarea, y también eliminamos esta propiedad de deshabilitar Perfecto. Ahora, como le dije a Liu, todos reaccionan elementos como eventos basados en eventos SGML Por ejemplo, aquí queremos agregar evento click sobre esto en el botón Tarea. Entonces aquí tenemos al click también tenemos en el doble clic. Agregar aquí en clic evento es igual a y entre corchetes C. Ahora, ¿me pueden decir por qué estamos agregando aquí corchetes ci? Es porque tenemos que agregar aquí expresión JavaScript. En este caso, agregaremos la función que se ejecuta en este botón clic. Ahora en react, tenemos popular convención de nomenclatura para el manejo de eventos Creamos todos los eventos métodos name, start with handle. Con solo mirar el nombre de la función o método, podemos decir que esto es para manejar este evento. Así que aquí creamos la función llamada handleClick. Si estamos manejando doble clic, entonces este nombre será handle Double click. Un aviso que la mayoría de las veces usamos la notación CamelCase. Así que maneja la función de flecha de clic, y dentro de esta función, simplemente consola de registro de puntos en la tarea. Ahora tenemos que pasar esta referencia de función en este evento on click. Así que aquí mismo, maneje clic. Guarda los cambios y echa un vistazo. Haga clic en este botón y vea que estamos recibiendo en el mensaje de la tarea. Ahora, asegúrate de que no llamamos a esta función porque si llamamos a esa función aquí, entonces solo se ejecutará cuando estos componentes se renderizen en el navegador. Ahora en esta función, queremos incrementar una serie de tareas Entonces para eso, antes que nada, tenemos que hacer esto constante a t porque queremos reasignar su valor Y en nuestra función, aquí simplemente escribimos tarea más plus. Guarda los cambios y echa un vistazo. Haga clic en el botón Tarea, y podrá ver que los recuentos de tareas no se están actualizando en la página, pero estamos recibiendo esto en el mensaje de tarea. Significa que la función está funcionando bien. Así que vamos a comprobar que esta tarea el valor está aumentando o no. Entonces después de este mensaje, agregamos coma y agregamos variable de tarea Guarda esto y reprime esta página. Da click en el botón y podrás ver que los valores van en aumento, pero no se reflejará en la página web, y ese es el tema de la siguiente lección. No. 27. Qué es el Estado: Entonces, en la lección anterior, vimos que el valor de nuestra tarea va en aumento, pero no se está actualizando sobre dom. Entonces, cuando queremos mostrar algo de cambio en nuestro dom, entonces podemos definir que la variable u objeto o matriz es la variable JavaScript normal. Entonces para mostrar el cambio en dom, tenemos estado en reaccionar. Este estado nos permite administrar y mostrar los datos cambiantes en nuestra aplicación. Entonces, cuando definimos nuestra variable como variable normal de Javascript, entonces reaccionar no reflejará esos cambios si cambiamos ese valor de variable. Pero si definimos nuestra variable como estado, entonces reaccionar reflejará que los cambios si cambiamos ese valor variable. Entonces en palabras simples, el estado se usa para decir reaccionar lo que esta variable, y si cambia, entonces reflexiona ese cambio en el dom. Entonces como sabemos, react tiene dom virtual. Cuando cambiamos el estado de un componente, reaccionamos obtenemos este nuevo componente y comparamos este nuevo componente con el componente antiguo y luego solo reflejamos esos cambios en el dom real. Tan simple como eso. Estado es concepto muy importante de reaccionar, y muchos desarrolladores principiantes luchan con este concepto, pero no te preocupes, todas tus dudas se aclararán cuando veas esto prácticamente. Ahora podría preguntarse, ¿cómo podemos definir una variable como estado? Entonces para definir variable como un estado en componente funcional, cómo usar un gancho. Pero antes de usar el gancho, entendamos qué es el gancho. 28. Introducción a los Hooks en React: Entonces, ¿qué son los ganchos? Los ganchos son las funciones para usar algunas características de reacción en componentes funcionales. En otras palabras, podemos decir que los ganchos son funciones que hacen que los componentes funcionales funcionen como componentes de clase. Sé que esto suena un poco complicado, pero no lo es. Entendamos con esta historia. Antes de que reaccione los ganchos lanzados, solo hay una manera de usar los métodos de estado y ciclo mediante el uso de los componentes de clase. Los desarrolladores tuvieron algunos problemas con los componentes de clase, como la clase son un poco difíciles, especialmente para aquellos que recién comenzaron a reaccionar. Confundir con esta palabra clave, y tenemos que escribir todo boilerplate y otra vez cuando creamos un nuevo componente Así que reaccionar lleva algún tiempo desarrollar funciones especiales. Podemos usar en componente funcional y que las funciones especiales se llaman como ganchos. Entonces creo que ahora entiendes lo que es react hooks, que son funciones que hacen que los componentes funcionales funcionen como componentes de clase. Y hoy en día, los ganchos son un concepto muy importante de reaccionar, que todo desarrollador de reaccionar necesita aprender. Ahora en la siguiente lección, veremos el primer gancho que se utiliza para definir la variable como un estado. 29. useHook de estado: Ahora definamos esta tarea como la variable de estado. Para definir estado, tenemos un gancho llamado estado de uso, y este es uno de los ganchos más importantes y más utilizados en react. Entonces, para usar cualquier hook, primero, necesitamos importar ese hook de la biblioteca react. Un nombre de todos los ganchos comienza con el uso del prefijo. Todas esas funciones que comienzan con el uso son react hooks. En la parte superior, después de esta reacción, agregamos coma y entre corchetes Ci importamos estado de uso Ahora en nuestro componente funcional, llamamos a este gancho usado. Dentro de esto, tenemos que pasar el valor por defecto de la variable, que es cero porque queremos establecer tarea como cero. Ahora, esta función devolverá una matriz. Vamos a almacenar eso en la variable llamada count array. Después de eso, simplemente consultemos dot log esta matriz de conteo para ver qué hay dentro de esta matriz. Guarda los cambios y echa un vistazo. Ver, esta matriz tiene dos elementos. El primer elemento es nuestro valor original, que es cero, y el segundo elemento es una función. Déjame mostrarte. Así que antes que nada, almacenamos primer elemento, count array index zero en variable llamada count. Y ahora vamos a mostrar esta variable Tate en la página web. Entonces aquí, no estoy quitando esta variable normal porque quiero mostrarte la diferencia. Entonces duplicamos esta línea presionando tamizar más alterar, más flecha hacia abajo en Windows y Saft más Opson más flecha abajo Estos son pequeños trigs que aumentarán tu velocidad general Ahora en el lugar de esta variable de tarea, aquí agregamos conteo. Guarda esto y mira esto ambos se ven igual. Ahora veamos cómo podemos actualizar este valor de estado de conteo. Entonces, para actualizar el valor del estado, tenemos función como segundo elemento en este estado de uso. Así que volvamos al código VS, y almacenamos este recuento en un segundo elemento, en la variable llamada set count. Esta es la convención de nomenclatura común para el estado. Entonces valor del estado, llamamos a un nombre de variable normal y función que puede establecer el valor de esa variable, habíamos establecido prefijo para ese nombre de función. Por ejemplo, contar, establecer conteo, cargar, establecer carga, etcétera Cualquiera que sea el valor que pasemos en esta función set count, será el valor de esta variable count. Déjame mostrarte a lo que me refiero. Entonces aquí queremos aumentar este conteo uno cuando hacemos clic en esto en el botón Tarea. Entonces escribimos set count, y dentro de esto, queremos valor actual, que es count y más uno. Entonces cuando hacemos clic en este botón, primero, obtendrá el valor actual de count y luego agregará uno en él, y esta función set count establecerá este valor, que es cero más uno como este conteo, simple como. Guarda los cambios y echa un vistazo. Haga clic en este botón y vea que el estado de conteo está aumentando en uno, pero la variable de tarea sigue siendo la misma, y también las tareas siempre se quedan a una. ¿Por qué? Porque cuando cualquier cambio de estado en nuestro componente, componentes enteros se renderizan o podemos decir ejecutar de nuevo. Y es por eso que la tarea siempre es quedarse en uno. No te preocupes. Entenderemos esa representación en detalle en la próxima sección. Otra cosa, si actualizamos la página, este recuento vuelve a comenzar con cero porque aquí establecemos el valor predeterminado como cero. Si pasamos aquí cinco, entonces al refrescar, llegamos aquí cinco. Así que ahora vamos a eliminar esta variable de tarea y también eliminar esta etiqueta actuan Ahora aquí nuestro código se ve un poco feo porque podemos ver para crear una variable de estado, tenemos que escribir tres líneas de código. Imagínese si tenemos de tres a cuatro variables de estado, entonces qué lío se ve nuestro código. Hagamos este código más corto usando la desestructuración de matrices. Déjame mostrarte. Comento estas tres líneas y escribimos aquí use state, y dentro de éstas, pasamos valor por defecto a cero. Almacenemos esto en variable y en el lugar de nombre de variable, agregamos corchetes y dentro de eso, primero, escribimos el nombre de la primera variable, que es count y luego escribimos el nombre de la función, que es set count. Esta sola línea funciona igual que estas tres líneas, y eso hará que nuestro código sea limpio y fácil de mantener. Vamos a recapitular este uso tt hook. Se usa tt para crear variables de estado en componente funcional. Para usar el gancho usado, primero necesitamos importarlo y usarlo dentro del componente funcional. Aquí podemos pasar cualquier tipo de datos como booleanos, número, texto, objeto, array, cualquier cosa, y luego almacenarlos usando la desestructuración de matrices La primera variable es su valor actual, y la segunda variable es la función para actualizar ese valor. Tan simple como eso. Sé que algunas personas se confunden un poco aquí. También me confundió cuando supe que lo usé gancho por primera vez. Pero con la práctica, aprendí este concepto y lo uso en mis proyectos. 30. Manejo de entradas de usuario: Ahora, muchas veces en nuestra aplicación, tenemos que tomar la entrada de los usuarios. Por ejemplo, el usuario rellena el formulario Long o el usuario escribe algo en la barra de búsqueda, entonces necesitamos obtener ese valor de entrada en nuestro componente. Así que vamos a crear una entrada con el tipo de texto. Ahora, cuando escribimos algo en este cuadro de entrada, queremos mostrar ese valor. Entonces para eso, nos adherimos onchange event, que se ejecuta cada vez algo cambió en ese cuadro de entrada Igual que lo hacemos en Vanda Javascript. Entonces, en este evento de cambio, teníamos una función llamada handle change. Ahora, definamos esta función. Así const, manejar el cambio es igual a, aquí usamos la función de flecha Ahora en esto, queremos Consultar punto log valor de entrada actual. Para ello, tenemos que pasar aquí objeto de evento, y este objeto de evento contiene diversa información sobre ese campo de entrada. Así que escribe CLG pcsle dot log y agrega aquí el valor del punto objetivo del punto del evento Esta expresión devolverá el valor actual de ese cuadro de entrada. Guarda los cambios y echa un vistazo, escribe algo y mira aquí obtenemos estos valores, así que está funcionando. Ahora queremos mostrar este texto actual en nuestra página web. Entonces, ¿puedes adivinar qué vamos a dejar que te dé una pequeña pista Este valor actual está cambiando, y necesitamos mostrar esos cambios. ¿Podemos usar variables normales? No, entonces ¿qué vamos a utilizar? Correcto, usamos estado de uso. Ahora, antes de usar us state, eliminemos estas tres líneas de código. Eso no queremos. Y también, eliminamos esta tarea plus plus y console dot log de la función HandleClick Ahora aquí está la única cosa más. Siempre definimos nuestro gancho de estado de uso en la parte superior de nuestro componente de función, por lo que podemos usar ese estado en toda la función. Entonces llamamos aquí use state, y dentro de esto, pasamos nuestro valor predeterminado. Y para la entrada, queremos configurarlo en cadena vacía. Ahora, vamos a almacenar esto en variable, y usamos aquí la reestructuración de matrices, input y set input. Ahora en esta función de cambio de mango en el lugar de esta consola dot log, escribimos set input function, simple como set. Ahora al final, vamos a mostrar la entrada actual. Así que agrega otra h una etiqueta e ingresa a la entrada Ci Brackets. Guarda los cambios y echa un vistazo, escribe algo aquí y mira de inmediato estamos obteniendo el valor actual. Entonces así es como obtenemos el valor de las entradas en react. Aquí, tengo un pequeño bono para ti, y esa es la forma abreviada de escribir esta línea de estado de uso. Entonces solo escribe el estado de uso. Si no estás obteniendo esto, entonces instala esa extensión ES seven, que te dije que instalaras al inicio de este curso. Seleccione eso y vea aquí obtenemos plantilla para el estado de uso. Aquí obtenemos múltiples cursor, que va a cambiar este nombre ambos. Así que escribe entrada y presiona tabulador. Esto automáticamente escribirá set input en camel case y pasará aquí el valor predeterminado, cadena vacía, y presione escape, y nuestra nueva variable de estado está lista. Esta es la belleza de des extension. Entonces espero que te guste este truco. Ahora en la siguiente lección, veremos cómo mostrar la lista y reaccionar. 31. Listas de mapeo: Ahora veamos cómo podemos mostrar la lista de matrices en react. Por ejemplo, aquí creamos una matriz llamada tarea, y por ahora, solo agregamos aquí la Tarea uno, tarea dos y la tarea tres. Ahora aquí tenemos que mostrar cada tarea en nuestra página web así. Agregamos una lista desordenada, y dentro de esta, agregamos tres elementos de la lista Tenemos que hacer eso usando el método map. Entonces aquí, tenemos que agregar calibrackets, porque vamos a agregar aquí expresión JavaScript. Entonces tarea punto MAP y dentro de esto, obtenemos cada función de flecha de tarea, y ahora simplemente volvemos aquí JSX, que es elemento de lista Déjame explicarte lo que está pasando aquí. Entonces, cuando usamos el método map en esta única tarea, primero obtenemos esta tarea una. Así que tenemos que mostrar esta cadena de tareas aquí entre este elemento JSX Así que de nuevo, usamos corchetes cul para acceder a la expresión Javascript dentro de JSX, y pasamos aquí esta tarea. Tan simple como eso. Ahora, agreguemos aquí nuestra lista debajo, y dentro de esta, moveremos los elementos de nuestra lista. Guarda los cambios y echa un vistazo. Mira aquí obtenemos este listado con todos los artículos. Si tienes dudas sobre el método de mapa, entonces puedes volver a ver lección del método MP en actualización de JavaScript. Ahora, aquí hay un pequeño tema. En nuestra consola, obtenemos este error. Cada niño en una lista debe tener un elemento clave único. La razón por la que estamos recibiendo estos errores porque necesitamos identificar de manera única cada elemento de esta lista porque si algo cambió en alguno de este elemento de la lista en dom virtual react necesita identificar rápidamente qué elemento cambió, y de acuerdo con eso, react necesita actualizar el dom real. Así que volvamos al código VS, y siempre recordemos cuando usamos el método MP en react, necesitamos pasar clave única para devolver el elemento. Entonces escribimos aquí clave, y aquí tenemos que pasar un valor dinámico único, que es esta cadena de tareas. Entonces simplemente pasamos esta tarea. Aquí estamos usando esta cadena de tareas, pero en la aplicación del mundo real, tenemos cada objeto de tarea con un ID único, y en ese momento, pasamos el ID de punto de tarea. No te preocupes por eso. Eso también lo veremos en las próximas secciones. Y también tenga en cuenta que esta clave solo debería tener que ser única en esta lista actual. No significa que no puedas volver a mostrar esta lista en esta aplicación, ¿de acuerdo? Guarde los cambios y actualice la página y vea que el error se ha ido. Así es como mapeamos la lista en reaccionar. Entonces enhorabuena. Ejecutas con éxito los conceptos básicos de reaccionar. Ahora usando estos conceptos, vamos a construir nuestro primer proyecto. Estoy muy entusiasmado con esto y espero que tú también lo estés. Entonces nos vemos en la siguiente sección. 32. Sección 04: crea tu primer proyecto en React: Bienvenido a la sección cuatro del curso ultimate react. En esta sección, vamos a crear nuestro primer diseño de aplicación react en el que veremos cómo piensa el desarrollador antes de comenzar a desarrollar la aplicación y cómo decidir qué componentes crear en nuestro proyecto. En esta sección, no agregaremos ninguna funcionalidad a nuestro proyecto. Solo nos enfocaremos en crear componentes y UIP. Estoy muy entusiasmado con este proyecto y espero que tú también, porque este tipo de proyecto es un gran punto de partida para cualquier principiante de reaccionar. Entonces, vamos a sumergirnos en este proyecto. 33. Descripción y planificación del proyecto: En primer lugar, permítanme darles una visión general rápida de este proyecto llamado como tarea Track. Es un nombre bonito, ¿verdad? El objetivo básico de esta aplicación es menos tarea. Entonces así es como se ve nuestra aplicación cuando no tenemos tarea. Después de eso, para agregar una tarea, escribimos la tarea en este cuadro de entrada. Después seleccionamos las etiquetas que queramos, y también podemos deseleccionarlas, y luego mediante este desplegable, seleccionamos la categoría de tarea a hacer o terminada Y luego agregamos tarea. Y en el momento en que hacemos clic en esto en el botón Tarea, sin refrescar la página, nuestra tarea se muestra aquí. Incluso podemos agregar múltiples tareas, y si no las necesitamos, entonces podemos eliminar esta tarea individual. Entonces este es un proyecto bastante bueno y agradable, que también puedes agregar a tu CV o portafolio. Ahora, antes de comenzar a construir cualquier proyecto, personalmente me gusta planear el proceso de creación del proyecto. Y con un plan, podemos ahorrar mucho tiempo y esfuerzo. Ese es el secreto por qué creo proyectos rápido y sin escribir, uso código. Está completamente bien si no quieres seguir este proceso, o puedes hacer tu propio proceso. Entonces déjame decirte cómo pienso en crear el proyecto at. En primer lugar, crearemos la parte SDML y CSS de la aplicación, lo que significa cómo se ve nuestra aplicación sin ninguna funcionalidad Ahora, después de que nuestro diseño esté listo, luego pasamos a la parte de funcionalidad, lo que significa que si hacemos clic en Ettask entonces la tarea agregará en las secciones o eliminará tarea, etcétera Aquí también podemos definir algunos componentes. Por ejemplo, aquí tenemos este diseño tecnológico igual para muchos lugares, y ese es el único componente. Después de eso, tenemos el componente de tarjeta única. El esqueleto de todas las cartas son iguales. Solo tenemos que cambiar los detalles, y ese es nuestro otro componente. Después de eso, tenemos el mismo diseño para estas tres secciones. Lo mismo, tenemos que simplemente cambiar los datos dentro de eso, pero el esqueleto es el mismo, que es otro componente. Entonces así es como podemos adivinar los componentes para el proyecto Rag Pero no te preocupes por eso. También podemos averiguarlo mientras construimos el diseño de nuestro proyecto. Solo hay que encontrar algún diseño y nosotros podemos hacerlo como componente. Se pueden ver los componentes con solo mirar el diseño porque practico en tantos proyectos de reacción, y con la práctica, también lo harás. Así que no te preocupes por estas cosas comencemos a construir nuestro primer proyecto. 34. Crea el diseño del sitio web: Entonces, antes que nada, crearemos el layout básico, o podemos decir esqueleto de nuestra aplicación. Por lo que nuestra página web se divide en dos secciones, la cabecera y la principal. Y en la sección principal, tenemos tres subsecciones Así que vamos a crear este diseño. Así que volvamos al código VS, y antes que nada, restableceremos todo el CSS predefinido, todos los elementos porque sabemos que algún margen y relleno ya están agregados por el navegador a algunos elementos. Tenemos que quitar eso. En el archivo CSS de punto índice, eliminamos todos los estilos predefinidos y agregamos estrella para todos los elementos dentro de este primero, establecemos el margen a cero padding a cero. Y el tamaño de la caja al borde de la caja. Todos estos son conceptos CSS que creo que ya conoces. Guarda este archivo, y después de eso, en el archivo app dot JSX, que es nuestro componente raíz, eliminamos todo el código, y escribimos RAFC para agregar el código boilerplate En el archivo JSX de punto de aplicación, agregaremos nuestros componentes de aplicaciones porque este es el punto de entrada principal para la jerarquía de componentes de aplicaciones Ahora, antes que nada, en esta DU agregamos una etiqueta de encabezado para nuestra selección de encabezado. Y darle un encabezado de subrayado de aplicación de nombre de clase. Recuerda, tenemos que usar el nombre de la clase en el lugar de clase. A, aquí estoy usando SNACCse para escribir todas las clases CSS. Puedes usar lo que quieras. Después de eso, agregamos una etiqueta principal para nuestra sección principal y pasamos nombre de la clase al guión bajo de la aplicación principal Ahora dentro de esta sección principal, queremos agregar tres secciones. Entonces escribimos una sección y agregamos la columna de tarea de nombre de clase, y duplicamos esta puntuación dos veces más. Entonces en este dado, agregamos aquí el nombre de la clase a la aplicación, y eso es todo. Ahora agreguemos CSS para este diseño. En la parte superior, importamos códigos periodos para la carpeta actual, y app dot CSS. Este es un paso que casi todos los desarrolladores principiantes o incluso experimentados se olvidaron de agregar. Antes de agregar CSS a cualquier componente, por favor asegúrese de ingresar ese archivo CSS en la parte superior del componente porque sin eso, nuestro CSS no se aplicará. Guarde este archivo, y ahora vamos a abrir el archivo CSS de punto de la aplicación. Y vamos a quitar todas estas fichas. No necesitamos esto. Y en la parte superior, nosotros en app, y dentro de ella, tenemos que simplemente dividirla en secciones. Entonces para eso, usamos cred así que escribimos display para gradar y gradar filas de plantilla porque queremos definir filas de 150 píxeles para sección de encabezado y auto para sección principal Guarde este archivo, y veamos qué obtenemos. Oh, lo siento, olvidamos agregar nuestro componente de aplicación como componente raíz. Así que en archivo principal JSX en el lugar de este crear para hacer escribimos app y además eliminamos estas dos importaciones Ya no lo necesitamos. Guarda los inges y aquí obtenemos solo encabezado porque no agregamos nada en nuestra etiqueta principal Así que volvamos al código VS. Y en la sección de columna de tareas, teníamos la Sección uno. Después de eso, sección dos. Y la sección tres. Guarda los cambios y mira, aquí obtenemos estas tres secciones en la sección principal. Ahora queremos mostrar esta sección de tareas una por una en columna. Entonces para eso, usaremos lino. En el archivo CSS de punto de aplicación, nosotros en app subrayamos main dentro de estos, escribimos display flag para applyFlexBX, y también para establecer Después de eso, establecemos justificar el contenido para espaciar de manera uniforme para alinear estas secciones. Y también agregamos algo de relleno a 20 píxeles para arriba abajo y 8% para derecha e izquierda. Guarda los cambios y echa un vistazo. Ver, aquí obtenemos nuestra sección en el centro. Verifiquemos eso usando Inspeccionar. Por lo tanto, haga clic derecho sobre esta sección y vaya a inspeccionar. Consulta aquí nuestra sección está en el centro. Ahora queremos que esta sección sea lo suficientemente grande para que cubran el espacio. Entonces agregamos nueva columna de tarea de clase y definimos ancho a 333 3%. Por ahora, agreguemos color de fondo al tomate. Y por fin, agregamos algo de margen a 20 píxeles. Guarda los cambios y echa un vistazo. Consulta aquí nuestra sección cubre el ancho. Ahora en la siguiente lección, construiremos nuestro formulario de encabezado. 35. Crea un componente de formulario de tareas: Entonces como sabemos que reaccionar funciona en enfoque basado en componentes. Y aquí, en nuestra aplicación, no creamos ningún componente. Entonces comencemos con nuestro primer componente para nuestro formulario de tareas. Antes de eso, eliminemos estos dos componentes. No los necesitamos. Y creamos un nuevo componente llamado taskfm JSX. Bueno. Ahora, dime qué hacemos primero en componente. Derecha. Teníamos calderería usando RAFC Ahora abra el archivo JSX de la aplicación. Pon esta etiqueta de encabezado y pegarla en nuestro componente de formulario de tarea. Ahora en el lugar de este texto de encabezado, primero, queremos agregar formulario. Y dentro de este formulario, primero, agregamos input con type text y le damos un nombre de clase a task underscore input, y también placeholder para ingresar a tu Ahora, después de eso, tenemos que agregar etiqueta DV con nombre de clase al formulario de subrayado de tarea, subrayado inferior, línea de subrayado Después de eso, tenemos que agregar un par de botones de etiqueta. Entonces agregamos botón con etiqueta de nombre de clase. Y dentro de esto, pasamos HTML. Ahora vamos a duplicar esta línea tres veces más y cambiamos este texto a CSS. Después de eso, Ja guión. Y reaccionar. Voy un poco más rápido por esta parte de diseño y CSS porque esta es nuestra simple STML y CSS Creo que ya sabes de esos estilos. Te puedo dar todos los estilos, pero eso no es justo porque si estás trabajando en react, también tienes que escribir STML y CSS Entonces después de eso, tuvimos entrada seleccionada para menú desplegable y agregar el nombre de la clase al estado de subrayado de la tarea Y dentro de estos, agregamos una etiqueta de opción con el valor a todo y mostramos etiquetas a todo. Segunda opción valor a hacer, y pasar aquí también haciendo. Y tercera opción valor a hecho, y aquí también hecho. Y por fin, agregamos botón con tipo submate nombre de clase a tarea subrayado submate y escribimos aquí más en tarea. Guarde este archivo. Y ahora vamos a mostrar este componente en componente app. Así que una aplicación dot archivo JSX, y simplemente agregamos aquí soporte de ángulo, formulario de tarea, y el código C VS auto sugiere este componente Seleccione esto y presione Enter o tab y vea nuestro componente autoimportado en la parte superior Ahora, asegúrate de cerrar esta etiqueta de componente. De lo contrario, obtendremos un error de compilación. Podemos utilizar aquí elemento de cierre automático. Bien, guarda los cambios y echa un vistazo. Ver, aquí obtenemos nuestro formulario. Ahora en la siguiente lección, agregamos estilos para este componente de formulario. 36. Agregar estilos para el componente de formulario: Yo así que agreguemos estilos para este componente de formulario. Entonces para agregar estilos, aquí creamos un nuevo archivo llamado taskform dot css Ahora podría preguntarse ¿por qué necesitamos crear un archivo separado para este componente? ¿Podemos agregar los estilos en app dot archivo CSS? Y la respuesta es sí. Podemos agregar estilos en el archivo CSS punto app, y eso es lo que hacen algunos desarrolladores, pero ese no es un enfoque correcto porque actualmente tenemos un solo componente, pero imagínese si tenemos cinco a diez componentes y agregamos nuestros todos los estilos en un mismo archivo, para cambiar los estilos particulares, tenemos que encontrar el CSS en ese único archivo, y eso va a ser duro y también estresante. Entonces es por eso que definimos estilos de cada componente en un archivo CSS separado. Así que vamos ante todo, importar códigos periodos taskfm punto CSS Guarde estos y vamos a los estilos en este archivo. En primer lugar, queremos mover toda esta forma al centro. Agregamos encabezado de subrayado de app y dentro de este, primero configuramos mostrar dos banderas y alinear elementos al centro, lo que establecerá nuestro formulario verticalmente centro y justificará el contenido para que también centre, lo que establecerá nuestro formulario horizontalmente al centro Por fin añadimos fondo de agua a un pixel sólido tiene DC DC DC. Guarda esto y echa un vistazo. C, nuestra forma está en el centro. Ahora, agreguemos estilos para este cuadro de entrada. Así que la tarea de punto subrayado entrada. Y en corchetes de Gully, tamaño de fuente a 20 píxeles, peso de fuente a 500, color de fondo tiene F 9f9f9, color a agua negra a un píxel, sólido y color a un DF E tres, E seis Después de eso, el radio del agua a cinco píxeles, relleno a ocho píxeles y 12 píxeles, margen inferior a 15 píxeles y el ancho al 100%. Guarde esto y vea cómo está lista la entrada. Ahora queremos que esta forma sea grande. Entonces aquí agregamos encabezado de subrayado de aplicación de puntos, corchete angular , forma objetivo, y dentro de esto, establecemos su ancho en digamos 40% Guarde esto y vea que nuestro ancho de forma es bueno ahora. Ahora, vamos a establecer estilos para las etiquetas. Pero antes de eso, necesitamos separar estas etiquetas con este menú desplegable y agregar el botón Tarea. Entonces en el componente de formulario de tarea, envolvemos todas estas etiquetas con etiqueta Dv y envolvemos otra parte con otra div. Guarde este archivo, y en el archivo CSS taskfm, agregamos la línea de fondo del Formulario de Tareas Y dentro de los corchetes cul, solo agregamos DF y C, sugiere banderas de visualización Estos son pequeños trucos que aprendí con la experiencia de crear muchas aplicaciones. Después de eso, agregamos elementos de alineación al centro y justificamos el contenido al espacio entre ellos. Vi esto y vea nuestras etiquetas, y estas dos están separadas. Ahora, vamos a establecer estilo para las etiquetas. Entonces escribimos etiqueta y entre corchetes cur, primero agregamos tamaño de fuente a 14 píxeles peso de fuente a 500, color de fondo, dos tiene F nueve, F nueve, F nueve, borde, un píxel, sólido tiene DFE tres, E seis, radio de borde a cinco píxeles, después de eso, agregando dos píxeles para arriba abajo y diez píxeles para izquierda derecha, margen derecho a diez píxeles y cursor a puntero Guarda los genes y echa un vistazo. Ver, aquí obtenemos nuestros estilos de texto. Ahora vamos a configurar CSS para desplegable. Entonces hacemos tarea subrayado estado. Dentro de esto, agregamos tamaño de fuente a 16 píxeles peso de fuente a 500 wer a un píxel, sólido tiene 999 radio Bader a cinco píxeles Después de eso, ancho a 120 píxeles alto a 40 píxeles y relleno a cero y cinco píxeles. Guarde esto y vea un menú desplegable también está listo. Ahora, último estilo para este botón de envío. Así que vuelve al código VS y escribe punto Tarea subrayado enviar. Y dentro de este pasado un tamaño a 16 píxeles, un peso a 500, color de fondo, dos tiene 64 57f9 Color a blanco, que es tiene F, radio de agua a cinco píxeles, altura a 40 píxeles. Después de eso, el relleno a tres píxeles entretiene píxel, margen izquierdo a diez píxeles, borde a ninguno y cursor a puntero Se trata de estilos muy básicos. No quiero perder tu precioso tiempo explicando estos estilos. Si hay algunos estilos importantes, entonces seguramente te lo explicaré. Guarda los cambios y toma un aquí nos acercamos un poco y vemos ahora nuestra forma se ve bastante bien. Sólo una cosa. Quiero cambiar este color de marcador de posición porque se ve un poco oscuro Así que volvamos a acado. Y después de este estilo de entrada, agregamos la entrada de subrayado de tarea de punto , dos puntos, marcador Y dentro de los corchetes culi, agregamos color a un 686868 Guarda las chinges y echa un vistazo. Ver ahora se ve bien. 37. Crea un componente de etiqueta: Entonces en la lección anterior, creamos nuestro componente de formulario, y en ese componente, podemos ver que tenemos esta etiqueta de botón, que estamos usando varias veces. Y también, cuando creamos la tarjeta de tareas, también usaremos ese botón de etiqueta. Por lo que es mejor almacenar una sola etiqueta en diferentes componentes. Entonces copiemos esta etiqueta de un solo botón. Y en esta carpeta de componentes, creamos un nuevo componente llamado tag dot Jx write RAFC for Ahora aquí, simplemente orinamos ese botón. Ahora, a medida que creamos un nuevo componente para esta etiqueta, también vamos a crear un archivo separado para su CSS. Creamos otro archivo llamado tag dot css, y como sabemos, antes de escribir CSS, necesitamos importarlo en este componente. Importar etiqueta de periodo punto CSS. Guarde este archivo. Bueno. Ahora abra el archivo CSS taskfmt Y cortamos este estilo de texto desde aquí, guardamos esto y lo pegamos en nuestro archivo css tag dot. Guarde esto. Ahora, agreguemos este componente de etiqueta en el componente tarea en el lugar de los botones de etiqueta. Entonces escribimos corchete angular, etiquetamos y seleccionamos la sugerencia automática. Será componente de etiqueta de entrada automática. Ahora, podemos eliminar todos estos botones y duplicar este componente tecnológico tres veces más. Guarda los cambios y echa un vistazo. Mira, aquí tenemos este botón de cuatro etiquetas STML. Ahora podría preguntarse, ¿cómo podemos cambiar el texto del botón? Y ese es el tema de la siguiente lección. 38. Props en React: Ahora veamos cómo podemos cambiar el nombre de este botón de etiqueta. Entonces para eso, tenemos concepto de utilería en reaccionar. Entonces, antes que nada, ¿qué es el utilería? Props significa propiedades, y props son argumentos que se pasan a los componentes de reacción En palabras simples, los props se utilizan para pasar variables en componentes de reacción Veamos esto prácticamente. Ahora, antes que nada, vamos a cerrar todos los archivos por enlace derecho en el nombre del archivo y seleccionar cerrar todos. Ahora vamos a abrir nuestro componente de formulario de tarea. Si se preguntan cómo estoy abriendo estos archivos, así que solo presione Control más P o Comando más P y aquí mismo, nombre de archivo que queremos abrir y presionar Enter. Mira, sin usar mouse, podemos abrir los archivos, y estos son pequeños hacks de productividad que usan los desarrolladores. Ahora aquí queremos pasar diferente nombre de etiqueta para este componente de etiqueta. Así que aquí como agregamos atributos en elementos SDML, aquí también podemos agregar atributos en componente Entonces pasamos nombre igual a, y aquí queremos pasar nombre de etiqueta. Entonces agregamos códigos, y dentro de estos, agregamos SDML. Aquí, quiero aclarar una cosa. Podemos darle cualquier nombre a este atributo. Está totalmente en nosotros. Por ejemplo, aquí podemos pasar nombre de etiqueta o cualquier cosa. Y al usar este nombre de atributo, accederemos a este valor en ese componente. Sé que esto es un poco confuso, pero no te preocupes mira esta lección completa y todas tus dudas se sienten claras. Por ahora, vamos a comentar estas otras tres etiquetas, seleccionarlas y presionar Control más barra o Comando más barra diagonal Aquí pasamos nuestro atributo. Ahora veamos cómo podemos acceder a este valor de atributo dentro de nuestro componente. Guarde este archivo y abra el archivo JSX de punto de etiqueta. Para acceder al valor props, simplemente podemos pasar aquí props como parámetro en esta función componente Este props es objeto, que contiene todos los valores de atributo que establecemos en componente tecnológico Así que simplemente consolamos puntales de registro de puntos y agregamos aquí apoyos. Guarda los cambios y echa un vistazo. Abra la consola, y vea, aquí obtenemos este objeto, que tienen la propiedad tag name y su valor. Ahora, vamos a imprimir este valor para nuestro botón de etiqueta. Entonces aquí en el lugar de este HTML, agregamos corchetes porque estamos escribiendo expresión JavaScript, y dentro de esto, escribimos props dot tag Name Guardar pandillas y ver, aquí tenemos SGML Ahora agreguemos otras tres etiquetas. Así que volvamos a nuestro componente y eliminamos comentario de las etiquetas usando Control plus slash o Command plus slash Y aquí pasamos nombre de etiqueta a CSS. Después de eso, etiquete el nombre a JavaScript, y en el apellido de la etiqueta a Ra guarde los cambios y eche un vistazo. Mira, aquí obtenemos estas etiquetas con diferente nombre de etiqueta, y así es como pasamos atributos para componentes. Recapitulemos rápidamente todo sobre los apoyos. Props es una forma de pasar datos del componente padre a un componente hijo En nuestro caso, formulario de tarea es nuestro componente padre y etiqueta que está dentro de este componente padre, lo llamamos un componente hijo, y queremos pasar datos de taskfm a componente de etiqueta Simplemente pasamos atributo de nombre de etiqueta, y aquí pasamos valor de cadena. Pero también podemos pasar arrays, objetos o incluso funciones en los props Después de eso, para acceder al valor de estos props, agregamos el parámetro props en esta función componente y obtenemos nuestros datos en este componente hijo, simple como 39. Crea un componente de lista de tareas: Ahora vamos a construir cada columna de la lista de salida. Aquí podemos ver que en nuestro diseño, estas tres columnas entre sí. Apenas tenemos que cambiar el título de la columna y de Imoge. Pero la estructura de todas estas columnas es la misma. Podemos construir un componente para la columna y luego reutilizar ese componente. Así es como debemos pensar cuando estamos trabajando en reaccionar porque reaccionar se basa en la estructura de los componentes. Vamos a crear un nuevo componente llamado tarea Columna punto JSX. Dentro de esto, agregamos boilerplate y en app archivo JSX, simplemente cortamos esta sección de columna de tareas y la pegamos en nuestro componente de columna de tareas Ahora, antes que nada, en esta columna, queremos agregar título. Así que creamos tiene que etiquetar, y escribimos para hacer. Ahora, como sabemos, tenemos aquí imagen. Entonces abre la carpeta de recursos, y dentro de esta, tenemos la carpeta Activos. Ahora simplemente arrastra todas las imágenes de esta carpeta y suéltala en nuestra carpeta de activos del proyecto. Ahora veamos cómo podemos agregar imagen en reaccionar porque es un poco diferente a lo que hacemos en SDML Entonces agregamos etiqueta de imagen a esta etiqueta ST, y aquí no podemos agregar ruta de imagen relativa. No va a funcionar. Entonces, para agregar cualquier imagen, ya sea JPG, PNG, o incluso SVG, primero, necesitamos importar esa imagen en la parte superior. Como sabemos, react use bundler como webpag para agrupar todo el código y activos que se utilizan en la Y cuando ingresamos archivo de imagen en nuestro componente, entonces bundler sabe incluir la imagen en el paquete Entonces es por eso que necesitamos importar imagen. Entonces escribimos en la parte superior, Importamos todo desde aquí vamos una carpeta arriba activos e importamos dshit dot directo PNG Ahora en esta fuente de imagen, agregamos calibracets y agregamos nuestro todo Ahora podría preguntarse ¿qué hay dentro de este Studo? Así que esto no es más que un camino de nuestra imagen que se coloca por bulto. Déjame mostrarte. Entonces antes de regresar, simplemente consultamos dot log este Studo guardar los cambios y echar un vistazo Oh, parece masivo. Entonces, antes que nada, vamos a eliminar esta consola de utilería. Abra el archivo tag dot jsx y elimine esta línea de registro de puntos de consola Guarde los cambios y no obtenemos nada porque necesitamos agregar nuestro componente de columna de tareas en nuestro componente de aplicación. Volver al código VS y en nuestro componente de aplicación, agregamos componente de columna de tareas y vemos en Import works. Guarda los cambios y echa un vistazo y mira aquí estamos en el camino de nuestra imagen. Además, podemos agregar directamente URL en la fuente, pero así es como agregamos imágenes locales en react. Ahora agreguemos estilo para esta imagen y título. Entonces en esta etiqueta de imagen, agregamos el nombre de la clase al icono de la columna de tareas. Y también, para este encabezado, agregamos el nombre de la clase al encabezado de columna de tarea. Guarde este archivo, y vamos a crear un archivo separado para nuestros estilos de columna de tareas llamados taskcolumn dot CSS La razón por la que siempre le damos el mismo nombre nuestro nombre de componente porque con solo mirar el nombre del archivo, podemos saber que este archivo contiene CSS de este componente de columna de tareas. Entonces, primero que nada, importemos el archivo CSS de punto de columna de tareas en la parte superior de nuestro componente. Guarde esto. Y ahora agreguemos algo de CSS. Entonces, antes que nada, queremos que nuestra imagen sea pequeña. Entonces escribimos icono de columna de tareas. Y dentro de esto, escribimos ancho a margen de 30 píxeles escribir a cinco píxeles. Estos y nuestro icono se ve perfecto. Pero este texto e icono no está verticalmente al centro. Y también, vamos a quitar este fondo de tomate. Nosotros en el encabezado de columna de tareas, y dentro de estos corchetes Cully, agregamos display dos flags y alineamos elementos al centro Guarde esto y eliminemos ese fondo de tomate del archivo CSS de punto de aplicación. Así que abre ese archivo y elimina esta propiedad de fondo. Guarda los cambios y echa un vistazo. Ver ahora nuestro título se ve bien. Ahora, reemplacemos estas dos secciones con nuestro componente de columna de tareas. Así que dirígete a app dot archivo GSX y eliminamos estas dos secciones Y simplemente agregue dos componentes de columna de tareas más. Di los cambios y echa un vistazo. Verás, obtenemos tres secciones. Ahora, aquí hay un pequeño ejercicio para ti. Simplemente, necesitamos cambiar el título de estas dos columnas. No te preocupes por cambiar esta imagen. Sólo trata de cambiar estos encabezamientos. 40. Solución de este ejercicio: Entonces espero que resuelvas este ejercicio. Y si no puedes resolver esto, entonces no te preocupes al menos intentas eso. Y eso es lo importante. Ahora, veamos la solución de este ejercicio. Así que aquí, tenemos que usar props porque queremos pasar datos del componente padre al componente hijo Entonces pasamos aquí props, título a Tudó segundo, título a hacer y último título a Guarde este archivo y accedamos a estos apoyos en el componente de columna de tareas En esta función componente, pasamos props como parámetro, y simplemente reemplazamos este todo con colli brackets y props Así que vamos a quitar esta consola. No necesitamos eso, guarda los cambios y echa un vistazo. Verás, obtenemos títulos. Entonces ahora creo que tienes un claro entendimiento de cómo usar los apoyos. Ahora veamos cómo podemos cambiar estos íconos. Para eso, también utilizamos utilería. Déjame decirte la lógica. Primero, ingresamos las tres imágenes en este componente de la aplicación. Eso lo pasaremos como un utilería. En la parte superior, primero importamos para hacer icono de periodos activos y directo heat dot PNG. Después de eso, importar haciendo icono de activos y resplandeciente punto estrella PNG Por fin importamos De icono de activos y marca de verificación botón punto PNG. Ahora, pasemos estos íconos usando props. Aquí escribimos icono es igual y usamos corchetes. ¿Me puedes decir por qué escribir? Porque estamos escribiendo la expresión JavaScript, y pasamos a hacer icono. Del mismo modo, con equivale a hacer Con después de eso, con es igual a icono hecho. Guarde este archivo. Y en el componente de columna de tareas en el lugar de este todo, simplemente escribimos props punto C. Guarda a las pandillas y echa un vistazo Mira, aquí obtenemos estos íconos. Se puede ver lo sencillo que es reaccionar. Al principio, casi todos los desarrolladores asustados por reaccionar, incluso yo asusté de reaccionar. Pero con la práctica y la creación de más aplicación, aprendemos a reaccionar rápido. Así que no te preocupes por eso. Simplemente practica tus habilidades, y con eso, también dominarás reaccionar. Aquí en nuestro componente, podemos ver siempre que queramos acceder a algún props, tenemos que escribir aquí props dot title y props dot Pero eso se ve un poco feo. Entonces podemos usar la reestructuración de objetos para eso. Así que aquí escribimos cons objeto es igual a props. Y dentro de este objeto, simplemente pasamos aquí nuestros nombres de propiedad, título e icono. O incluso podemos simplificarlos agregando directamente este objeto en el lugar de estos apoyos, esto ambos funcionan igual Entonces lo más común, usamos este método, eliminamos estas líneas, y también en el lugar de este puntal icono de punto, escribimos icono, y también aquí, escribimos título Guarda los cambios, y funciona igual que antes. Ahora en la siguiente lección, construimos nuestra última parte de la interfaz de usuario, que es la tarjeta de tareas. 41. Crear un componente de TarkCard: Así que vamos a construir un nuevo componente llamado Tascardt JSX. Y además, creamos un nuevo archivo CSS llamado Tascard dot CSS Ahora, en nuestro componente de tarjeta de tareas, agreguemos un boilerplate para este componente usando RAFC y en la parte superior, simplemente importamos el archivo CSS de Taskcard Así que no tenemos que preocuparnos por eso. Ahora, agreguemos elementos para esta tarjeta. Entonces en el lugar de esta DU, podemos escribir un artículo con tarjeta de tareas con nombre de clase. También puedes usar DU, pero me gusta usar etiquetas semánticas Ahora dentro de esto, primero creamos un párrafo para agregar detalles de tarea y nombre de clase al texto de subrayado de tarea Y dentro de estos, simplemente escribimos este es texto de muestra. Ahora en la siguiente línea, necesitamos texto en el lado izquierdo y botón de borrar en el lado derecho. Así que creamos uno debido aquí con tarjeta de tarea de nombre de clase, línea de fondo. Y dentro de esto, agregamos dos DUO más con nombre de clase, etiquetas de tarjeta de tareas y segundo, nombre de clase con eliminación de tareas. Ahora en el primer du agregamos nuestro componente tecnológico, vea qué entrada no funciona. Entonces, en la parte superior, ingresamos componente tecnológico desde el módulo de etiquetas. Y agreguemos este componente en nuestra tarjeta. Ahora simplemente pasamos aquí los apoyos de nombre para digamos DML. Duplicemos esta etiqueta y cambiemos el nombre a CSS. Hecho. Ahora vamos a agregar imagen en esta tarea eliminar. Y para agregar imagen en la parte superior, tenemos que importar imagen. Importar, eliminar icono de ir una carpeta hacia arriba activos y eliminar punto PNG. Y en la fuente de la imagen, pasamos corchetes, eliminar icono, y también nombre de clase para eliminar icono. Guarde este archivo, y ahora agreguemos este componente a la columna de tareas. Entonces uno de componente de columna de tareas. Entonces aquí, después de nuestro encabezado, agregamos componente de tarjeta de tareas, y C ahora a Import works. Guarda los cambios y echa un vistazo. E, aquí obtenemos nuestros elementos. Ahora, agreguemos estilos para esta tarjeta. Entonces nuestra tarjeta parece una tarjeta real. Así que en la tarjeta de tareas punto archivo CSS, escribimos tarjeta de tareas. Y en los corchetes cur primero agregamos ancho al 100% de altura media a 100 píxeles, borde a un píxel, sólido tiene DC DC A continuación, el radio del borde a diez píxeles. Relleno a 15 píxeles y margen a 15 píxeles para parte superior e inferior y cero para la izquierda y la derecha. Después de eso, teníamos estilos para texto. Entonces escribimos texto de Tarea de punto. Y en los paquetes cli, teníamos tamaño de fuente 18 píxeles Peso de fuente a 600 margen inferior a 15 píxeles. Guarda los ins y no veo ninguna diferencia por este ícono gigante. Así que agreguemos estilos para eso. Entonces agregamos tarea subrayado eliminar. Y dentro de esto, escribimos ancho a 35 píxeles de alto a 35 píxeles. Radio de agua 100% para hacerlo círculo completo. Ahora queremos establecer el icono de eliminación en el centro de este para agregar banderas de visualización, alinear elementos al centro, justificar el contenido, también centro, cursor a puntero, y la transición a 0.3 segundos está dentro y fuera. Esto es para agregar poca animación suave. Ahora, agreguemos el efecto Hover para el fondo del icono. Así punto tarea subrayado dLate columna, hover y sólo queremos cambiar el color de fondo dos tiene IB, IB, Ib Ahora, después de eso, hagamos que nuestro icono sea pequeño. Así que el icono de eliminación de puntos. Y dentro de esto, agregamos ancho 220 píxeles. Guarda los cambios y echa un vistazo. Bien. Ahora aquí necesitamos hacer estos dos divs en una sola línea y colocarlos esquina izquierda y derecha Así que volvamos al código VS, agregamos aquí tarea de punto, tarjeta, línea de fondo. Dentro de esto escribimos display a flags, alineamos elementos al centro y justificamos el contenido al espacio entre ellos. Guarde esto y vea que obtenemos nuestra tarjeta. Ahora déjame mostrarte un pequeño truco que usé mucho. Actualmente, este icono de eliminar se ve demasiado oscuro. En el icono de eliminar CSS, agregamos opacidad al 50% También agregamos aquí transición todo 0.3 segundo está adentro hacia afuera. Y después de estos, agregamos tarea de punto, delt, call on hover, space, dot tilt, icon, y hacemos opacidad al 80% porque queremos aumentar esta opacidad de icono cuando alguien incluso se cierne Di los cambios y echa un vistazo. Ver ahora nuestro auto se ve bien. Ahora, desde la siguiente sección, estamos empezando a agregar funcionalidad para esta aplicación, que es el propósito principal de este curso. Sé que escribo poco CSS rápido, pero eso es porque estamos aquí para aprender a reaccionar. Si en el curso de reaccionar, aprendemos CSS, entonces a algunos de ustedes tal vez no les guste eso. Y además, estoy escribiendo este CSS primero porque practico esta aplicación antes de grabar este curso. Así que no confundas con eso. Y si continuamente estás viendo este curso, entonces por favor tómate un descanso de diez a 15 minutos y toma un poco de aire fresco. Te veo en la siguiente sección. 42. Sección 05: agrega funcionalidad en Project 1: Bienvenido a la Sección cinco del curso de reacción definitiva. En esta sección, completaremos nuestro primer proyecto, que es la aplicación de pista Sask Entendemos lo básico de la funcionalidad, manejo de formularios, selección de etiquetas, y luego agregar tarea por su propiedad, implementar funcionalidad delete, y además aprenderemos segundo gancho más importante de react, que es el efecto de uso. Después de completar esta sección, su confianza en la creación de la aplicación React aumentará. Estoy muy entusiasmado con esto y espero que tú también lo estés. Entonces, vamos a sumergirnos en esta sección. 43. Formulario de manija: Ahora, antes de comenzar a agregar funcionalidad en nuestra aplicación, antes que nada, entendamos la lógica de esta aplicación. Así que aquí, primero, creamos una serie de tareas que tienen todas las tareas. Ahora, cada tarea es el objeto con tres propiedades. Primero, la tarea misma después de eso, tenemos estatus de tarea, que puede hacer, hacer o hacer. Y tercero, tenemos textos, que es la matriz de texto seleccionado. Entonces, cuando el usuario agrega nueva tarea, agregamos nuevo objeto de tarea con estas tres propiedades, y luego los mostraremos en la columna de tareas, simple como eso. Entonces antes que nada, vamos a manejar esta forma. Manejar el formulario significa que aquí tenemos que obtener valores de entrada del usuario como el texto, estado de la tarea y el texto seleccionado. Si no tenemos estos detalles, entonces ¿cómo podemos almacenar esos detalles? Entonces, cuando un componente de formulario de tarea, ¿recuerdas lo que usaremos para obtener la entrada del usuario? Derecha, se usa gancho estatal. Aquí en la parte superior, ingresamos useTaTehok y dentro de nuestro componente, en la parte superior, creamos la variable de estado llamada tarea y establecemos tarea Como valor predeterminado, pasamos aquí cadena vacía. Ahora cuando algo cambia en nuestra entrada, simplemente establecemos ese valor en este estado de tarea. Entonces aquí pasamos evento llamado al cambio. Y dentro de este evento, tenemos event object, error function, y aquí simplemente llamamos set task. Ahora como sabemos que cualquiera que sea el valor pasemos en esta función de tarea establecida, será el valor de nuestro estado de tarea, et valor de punto objetivo. Ahora, verifiquemos que estamos consiguiendo nuestra tarea o no. Simplemente consola dot log esta tarea. Guarde los genes y eche un vistazo, escriba algo en este cuadro de texto y vea que estamos obteniendo el valor de entrada Ahora en el lugar de escribir esta expresión aquí, podemos escribirla en función separada. Entonces pasamos aquí, nombre de la función, manejar el cambio de tarea. Y dentro de esto, pasamos este objeto de evento. Ahora, definamos esta función. Así que const manejar el cambio de tarea es igual a aquí obtenemos nuestro objeto de evento, que pasamos de aquí, función de flecha, y dentro de esto, establecemos tarea al valor de punto objetivo del evento Guarda los cambios y mira, funciona igual que antes. Podemos escribir este código en ambos métodos. Ahora aquí, incluso podemos hacer que este código sea más corto. En el lugar de esta expresión en react, podemos pasar directamente nuestro nombre de función, que es manejar el cambio de tarea. Esto funciona igual. Pero recuerda, tenemos que usar aquí la sintaxis de la función de flecha. De lo contrario, esto no obtendrá el objeto de evento. Obtenemos el valor de nuestro insumo. Ahora veamos cómo podemos obtener el valor de este desplegable. Entonces como hacemos para este insumo, mismo hacemos con ese desplegable. Entonces, antes que nada, creamos una variable de estado más para almacenar el valor del estado actual. Entonces declaramos y pasamos aquí estado y establecemos estado y como valor predeterminado, pasamos aquí para hacer porque por defecto, si los usuarios no seleccionan ningún valor, entonces agregamos estado a hacer. Ahora en esta etiqueta de selección, agregamos aquí evento llamado al cambio. Y dentro de esto, pasamos nueva referencia de función, manejamos el cambio de estado. Ahora, definamos también esta función. También podemos duplicar esta función, y en el lugar de este nombre, escribimos nuestro nuevo nombre de función, manejar el cambio de estado. Y en el lugar de esta tarea establecida, escribimos set status, y eso es todo. Verifiquemos que funcione o no. Entonces aquí también agregamos status en la consola, guardamos los cambios y echamos un vistazo, escribimos algo, y podemos ver por defecto, llegamos a hacer como status. Ahora, cambiemos el valor de desplegable y veamos aquí obtenemos ese valor. Entonces está funcionando. Ahora aquí hay un problema único. Como podemos ver para cada valor, tenemos que crear aquí variables de estado y también tenemos que definir función separada para manejar el cambio, y eso es mucho trabajo. Podrías preguntar, ¿hay algún truco de atajo para eso? La respuesta es sí. Hay un pequeño truco que vemos en la siguiente lección. 44. Truco de atajos para manejar los formularios: Por lo que actualmente en nuestro formulario, solo tenemos dos rellenos de formulario. Pero imagínese si tenemos de cinco a seis rellenos, y crea una variable de estado para cada entrada, y eso hace que nuestro código sea desordenado y difícil de administrar Entonces veamos cómo manejar múltiples entradas usando la función single on change. En la lección anterior, creamos variables de estado individuales para rellenos de formularios. Y luego en cada función de cambio de mango, establecemos ese valor a nuestra variable de estado. Pero en este método, creamos solo una variable de estado para todos los rellenos de entrada. Déjame mostrarte. Comentemos este código, y en la parte superior, creamos una nueva variable de estado llamada datos de tarea y establecemos datos de tareas. Y ahora como valor predeterminado, pasamos aquí objeto. Y en ese objeto, tenemos múltiples propiedades en par de valores clave. Entonces agregamos tarea a cadena vacía y estado a todo. Ahora vamos a crear una nueva función, manejar el cambio es igual a la función de error. Y llamaremos a esta función en cada entrada sobre evento de cambio. Entonces en nuestro campo de entrada, escribimos aquí manejar el cambio. Ahora simplemente copiemos este evento de cambio y lo peguemos en nuestra etiqueta select. Así que cada vez que escribimos o cambiamos el valor en cualquiera de estos campos, solo se ejecutará esta función de cambio de mango. Ahora, paso más importante y sin este paso, este método no funcionará. Entonces el paso es que tenemos que agregar todas las propiedades como su atributo name desde nuestro objeto state. Déjame mostrarte a lo que me refiero. Entonces, para nuestra entrada de tareas, queremos almacenar su valor de entrada en esta propiedad de tarea. Entonces, en nuestra etiqueta de entrada, agregamos aquí el atributo name equals to task. Ahora para nuestro menú desplegable de estado, queremos establecer su valor en esta propiedad de estado. Entonces agregamos en este atributo select field name al status. Asegúrese de que escribimos el mismo nombre que escribimos en el objeto de datos de tarea. Ahora, dentro de esta función de cambio de mango, escribimos nuestra lógica principal. Así que aquí pasamos esta E como objeto de evento para todos estos rellenos, y vamos a simplemente consola dot log este objetivo de punto E. Guarda los cambios y echa un vistazo. Ver, cuando escribimos entrada de tarea, obtenemos esta entrada de tarea, y cuando seleccionamos el valor del menú desplegable, obtenemos esa etiqueta de selección Nuestra lógica principal es cuando escribimos campo de formulario, primero obtenemos ese nombre y valor de campo y con ese nombre, que será el mismo que nuestra propiedad de datos de tarea, reemplazamos su valor por valor actual. Sé que esto suena un poco complicado, pero no lo es. Veamos esto y después de eso, tus todas tus salidas se sienten claras. Creamos aquí la variable de nombre es igual a e punto objetivo punto Nombre. Y creamos otro valor variable igual a e punto objetivo punto Valor. Y vamos a consolar ambas variables. Di los cambios y echa un vistazo. Ver, obtenemos el nombre de relleno y su valor cuando escribimos los rellenos de entrada. Ahora, solo tenemos que establecer este valor dentro nuestra variable de estado relacionada con su nombre de propiedad. Así que escribimos aquí establecer datos de tareas, y obtenemos aquí los valores anteriores por este parámetro anterior. Este valor anterior es el mismo que nuestro valor de datos de tarea actual. Ahora en esta función de flecha, devolvemos objeto En primer lugar, devolvemos todo el valor anterior usando el operador spread. Ahora solo necesitamos actualizar campo con su valor. Entonces, lo que sea que volvamos de esta función de devolución de llamada, ese será el valor de nuestra variable de estado Ahora aquí sabemos que podemos acceder a propiedad del objeto usando corchete y pasar esta variable de nombre dentro ocho y Colm su valor. Ahora bien, si escribimos algo dentro de la entrada de tarea, entonces primero, esto devolverá todas las propiedades anteriores, y luego encontraremos la tarea de propiedad y reemplazaremos su valor con el valor llenado de tarea. Tan simple como eso. Vamos a Consultar punto registrar esta variable de datos de tarea y ver si obtenemos valores o no. Guarda los ginges y echa un vistazo. E, cuando actualizamos cualquier campo, obtenemos su valor en nuestro objeto de estado, por lo que está funcionando. Ahora podemos hacer que este código sea aún más corto mediante el uso de la reestructuración de objetos. Entonces escribimos e punto objetivo, y al usar Reestructuración de objetos obtenemos una variable de nombre y valor Entonces estas dos líneas son iguales que este código de una línea. Entonces quitamos estas dos líneas. Ahora queremos consolar este objeto de datos de tarea cuando hacemos clic en el botón Al enviar tarea. Así que creamos aquí una nueva función llamada handle submit. Y dentro de esta función, simplemente movemos esta consola. Ahora en la etiqueta de formulario, pasamos el evento de envío y pasamos aquí manejar la función de envío. Ahora podrías preguntar, ¿podemos pasar esa función en caso onclick de este botón Y la respuesta es sí. También puedes pasar esta función en el evento on click. Pero, ¿por qué pasamos esa función en el someto? El motivo es cuando alguien escribe en el cuadro de entrada y luego presiona Enter y también cuando alguien haga clic en el botón Enviar, en ambos casos, se ejecutará esta función handle submit. Solo pasamos esa función en evento tlk, entonces solo funcionará en botón click Guardar los cambios y echar un vistazo, escribir alguna tarea Y seleccione el valor desplegable y haga clic en consumar. Ver, por sólo un segundo, obtenemos el valor, pero después de eso, nuestra página se actualiza porque es el comportamiento predeterminado de form Así que cada vez que enviemos el formulario, esta función handle submit se ejecutará y luego se refrescará la página. Tenemos que parar esto. Por lo que adherimos esta E como objeto de evento. Y escribir E prevenir Predeterminado. Esta función evitará el comportamiento predeterminado del formulario. Guarda los cambios y echa un vistazo. Rellena este formulario y mira aquí obtenemos estos datos. Recapitulemos rápidamente este truco. En primer lugar, en el lugar de crear el estado de uso múltiple, creamos una sola variable de estado, que es objeto. Y en ese objeto, agregaremos el nombre de las propiedades y el valor por defecto. Ahora olvidando el nombre del campo de formulario, pasaremos nombre propiedad exactamente igual que este nombre de propiedades de objeto. Después de eso, pasaremos una sola función para todos los campos de formulario en evento cambiado. Dentro de esta función, primero, obtenemos name y value atributo de event object, y luego reemplazamos el valor actual de nuestro objeto de datos de tarea, simple como eso. Así es como administramos múltiples campos de formulario en reaccionar usando el método de acceso directo. Se puede ver con sólo usar dos líneas de código, podemos establecer valores en nuestro objeto. 45. Modo estricto en React: Ahora, déjame mostrarte algo interesante. Simplemente aquí duplicamos datos de tareas de disconsol y los movemos afuera en nuestro componente Ahora una de las preguntas que más surgen que todos reaccionan los principiantes me preguntan es cuando hacemos el registro de puntos de consola, ¿por qué estamos viendo todos los datos dos veces? ¿Deberíamos hacer algo mal? Y cuando estaba aprendiendo a reaccionar por primera vez, también hice la misma pregunta. La respuesta es no. No estás haciendo nada malo. Está sucediendo por el modo de reacción. En nuestro proyecto, abra el archivo principal JSX. Aquí podemos ver reaccionar envolver nuestra aplicación con este componente de modo stric react Por ahora, comentemos este componente de modo ric. Guarda los cambios y echa un vistazo y mira aquí obtenemos nuestros datos una vez. Entonces es firme. Eso es por el modo reaccionar calle. Pero por qué necesitamos este modo de calle. Así que react Street Mode es una herramienta proporcionada por react que ayuda a los desarrolladores a escribir código de mejor calidad al resaltar los problemas potenciales durante el desarrollo. Cuando envolvemos nuestra aplicación con react dot Street Mode, activa comprobaciones y advertencias adicionales que te ayudarán a identificar el problema antes de que causen problemas en la producción. Por ejemplo, comprobará si hay APIs y componentes de reacción no soportados o en desuso, guardará actualizaciones rectas, re renders potencialmente innecesarios, y por eso renderizará nuestra aplicación Por lo que es mejor habilitar el modo calle para nuestra aplicación. Eliminemos estos comandos y habilitemos el modo calle para nuestra aplicación. Guarda los cambios y echa un vistazo. Ver, de nuevo, obtenemos dos objetos de datos. Entonces reacciono 18, el modo street está activado por defecto y react renderiza cada componente dos veces. Entonces así es como funciona el modo estricto en el proceso de desarrollo. Cuando implementamos nuestra aplicación para producción, el modo calle no se agregará y eso renderizará nuestros componentes solo una vez. Así que no te preocupes por eso. También eliminemos nuestra línea Consultar registro. En la siguiente lección, veremos la implementación de la selección de impuestos. 46. Selección de etiquetas: Ahora vamos a implementar la funcionalidad de selección de etiquetas. Pero antes de eso, eliminemos este código de comentario. Ahora, en nuestra variable de datos de tarea, agregamos otra propiedad llamada tags y pasamos array vacío como valor predeterminado. Cuando seleccionemos cualquier etiqueta, agregaremos esa etiqueta a esta matriz. Y si esa etiqueta ya está en esta matriz, entonces eliminaremos esa etiqueta simple como esa. Y este es mi truco para implementar cualquier lógica en la programación. Debería darte este truco, déjame darte. El truco es, siempre que queramos agregar alguna funcionalidad, describir esa funcionalidad en lenguaje humano, y eso es todo. Así es como se puede descifrar la lógica de cualquier funcionalidad. Así que antes que nada, aquí creamos una nueva función llamada select tag, error function, y esta función se ejecutará cuando hagamos clic en alguna de las etiquetas. Así que tenemos que pasar función dentro de este componente de etiqueta. ¿Podemos hacer eso? Mediante el uso de utilería. Aquí, simplemente pasamos accesorios llamados select tag y pasamos aquí nuestro nombre de función que es select tag Aquí estamos usando el mismo nombre de propiedad que nuestro nombre de función porque no necesitamos preocuparnos por dar el nuevo nombre. Puedes escribir aquí cualquier nombre. Depende totalmente de ti. Ahora, copiemos esto y peguémoslo para todos los componentes de etiquetas. Guarda esto, ahora vamos a abrir este componente de etiqueta. Y aquí en el prop, podemos desestructurar objeto y llegar aquí nombre de etiqueta y etiqueta Celac Ahora, vamos a eliminar estos apoyos y también aquí pasamos el evento click y simplemente pasamos la etiqueta Celac Y eso es todo. Nuestra función SellacTag se ejecutará en este clic de Estag Ahora escribamos nuestra lógica para la función sectag. En primer lugar, la pregunta es, ¿cómo podemos obtener la etiqueta seleccionada actual? Porque sin saber el nombre de la etiqueta, ¿cómo podemos escribir alguna lógica? Entonces, en el componente tecnológico, podemos pasar este nombre de etiqueta como argumento de esta función de tecnología selecta. Pero no podemos llamar a esta función aquí porque entonces nuestra función se ejecutará sólo una vez. Entonces para resolver ese problema, podemos pasar aquí error de función y dentro de esto, podemos llamar a la función selecteg y pasar el nombre de la etiqueta como argumento Guarda este archivo y en el componente de formulario de tarea, obtenemos aquí la etiqueta como parámetro, y simplemente consulta log esta etiqueta, guarda los Gengs y echa un vistazo Ver, cuando hacemos clic en este botón de etiqueta, obtenemos este nombre de etiqueta. Pero nuestro formulario también se envía porque estamos obteniendo el objeto de datos de tarea aquí. ¿Ves? Entonces vamos a resolver eso. Así que abre el componente de etiqueta. Tenemos que simplemente pasar aquí botón tipo a botón. Porque en todos los navegadores, excepto Internet Explorer, tipo de botón predeterminado es enviar, y es por eso que nuestro formulario se envía. Guarde estos y vea, ahora solo obtenemos el nombre de la etiqueta. Ahora nuestra siguiente tarea es que queremos almacenar esta etiqueta en una matriz de texto. Entonces en función de etiqueta de asiento, antes que nada, escribimos si condición, y aquí queremos verificar. Nuestra etiqueta ya está disponible en matriz fiscal o no. Entonces escribimos etiquetas de punto de datos de tareas. Ahora aquí usamos algún método, y dentro de él, obtenemos aquí cada ítem, función de flecha, y tenemos que pasar aquí condición, item es igual a Eg. Explícale esta expresión. El método sum devolverá valor verdadero o falso. Estamos comprobando aquí cada elemento de nuestra matriz de etiquetas de punto de datos de tareas, y aquí lo comparamos con un nombre de etiqueta. Por ejemplo, seleccionamos etiqueta STML, entonces esta expresión comprobará cada valor de estas etiquetas, y si STML está disponible en esa matriz, entonces devolverá true, de lo contrario false, simple como Lo que haremos si la etiqueta ya está disponible, eliminaremos esa etiqueta de esa matriz. Entonces escribimos datos de tarea punto texto, punto Filtro. Ahora, también en esto, obtenemos cada función de flecha de elemento, y pasamos aquí condición, item not equals to tag. Ahora, como sabemos, este método de filtro obtendrá elementos que pasarán esta condición y devolverán una nueva matriz. Así que almacenamos eso en variables llamadas etiquetas de filtro. Ahora tenemos que actualizar nuestro valor de texto por estas nuevas etiquetas de filtro. Entonces escribimos los datos de la tarea establecida. Primero obtenemos aquí el valor anterior, función de error, y dentro de él, volvemos aquí objeto, y primero, agregamos todos los valores anteriores usando el operador spread. Y simplemente sobrescribimos etiquetas para filtrar etiquetas. Ahora agregamos la condición Ls, lo que significa que nuestra etiqueta no está disponible en esta matriz de texto, podemos agregar directamente esa etiqueta en nuestra matriz. Escribimos los datos de la tarea de conjunto dentro de este, obtenemos el valor anterior, función de flecha, y aquí devolvemos objeto, y aquí agregamos todos los valores anteriores usando el operador spread. Porque sin eso, nuestra tarea y estatus también serán reemplazados. Después de eso, sobrescribimos etiquetas y aquí pasamos nuestra etiqueta actual Ahora veamos si esto funciona o no. Así que simplemente consola dot log, tagdata dot tex, guarda los cambios y echa un vistazo Selecciona cualquier etiqueta y verás que obtenemos esa etiqueta aquí. Ahora, de nuevo, da clic en esa etiqueta. Se ha ido. Ahora aquí hay un error de un solo. Seleccione una etiqueta y luego seleccione otra etiqueta. Puedes ver que nuestra etiqueta anterior se ha ido. Entonces, ¿por qué sucede esto, encontremos eso? Entonces aquí en la condición de, reemplazamos directamente el valor de las etiquetas con la etiqueta actual, y es por eso que nuestra vieja etiqueta la reemplazamos por una nueva etiqueta. Aquí, también usamos etiquetas de punto anteriores del operador de propagación, que tiene todas las etiquetas antiguas y simplemente agregamos una nueva etiqueta al final. Intencionalmente cometo este error porque quiero mostrarles la importancia de estos valores anteriores. Guarda los cambios y echa un vistazo. Seleccione las etiquetas y vea que está funcionando. 47. Mostrar la etiqueta seleccionada en la UI: Ahora, cuando seleccionamos nuestra etiqueta, no podemos mostrar ningún efecto en nuestra página, y esa es la mala experiencia de usuario. Entonces, para mostrar la etiqueta seleccionada, solo necesitamos verificar si esa etiqueta está disponible en nuestra matriz de etiquetas o no. Aquí creamos una nueva función llamada Jack tag arrow function. Ahora dentro de esto, simplemente queremos devolver verdadero o falso para la etiqueta. ¿Recuerdas qué método usamos para verificar? Ya lo hemos hecho en la función de etiqueta Sylac, que está usando algún método Simplemente regresamos aquí datos de tareas etiquetas de puntos puntos. Dentro de él, obtenemos cada función de flecha de elemento y comprobamos que el elemento es igual a nuestra etiqueta, y obtenemos esa etiqueta del parámetro. Ahora pasamos este valor verdadero y falso para cada etiqueta. Así que desplázate hasta el componente tecnológico. Pasamos aquí uno más props llamado selected, y aquí llamamos check tag function Y dentro de esto, pasamos nuestro nombre de etiqueta en códigos dobles. Tenga en cuenta que escribimos el mismo nombre que pasamos en nombre de etiqueta. Guarde este archivo, y en el componente tecnológico, obtenemos aquí los apoyos seleccionados Ahora usando estos probs seleccionados, podemos agregar el efecto seleccionado Aquí, usaremos estilos en línea porque queremos establecer un color diferente para el CSS SDML, JavaScript y la etiqueta react Para ello, creamos una variable llamada estilo de etiqueta y declaramos que como objeto y dentro de este objeto, nosotros en par de valores clave. Déjame mostrarte. Primero, pasamos SDML y aquí como valor, pasamos objeto con propiedad de color de fondo Y valor a un FD a 821. Ahora podrías preguntar por qué añadimos aquí objeto. La razón es que sabemos que en estilos inline, tenemos que pasar objeto de estilo. Entonces podemos agregar directamente este objeto por nombre de etiqueta. Ahora, agreguemos estilos para otras etiquetas. Duplica este par de valores clave cuatro veces más, y aquí agregamos CSS y cambiamos color de fondo a un 15 d4c8 Ahora para JavaScript, cambiamos el color de fondo dos tiene FF D uno, dos C, y para reaccionar color de fondo, dos tiene para C, DA FC. Tenga en cuenta que tenemos el mismo nombre de etiqueta que pasamos en el nombre de la etiqueta props De lo contrario, no va a funcionar. Ahora podrías pensar por qué agregamos un par de valor clave más. Este último para el fondo predeterminado para las etiquetas no seleccionadas. Entonces agregamos color de fondo predeterminado a tiene F 9f9f9. Ahora, agreguemos estilos según las condiciones. Agregamos aquí el estilo es igual a corchetes Coli porque estamos agregando la expresión Javascript, que es si se selecciona es true, agregamos el textil textyle y en corchete cuadrado, pasamos nombre de etiqueta De lo contrario, agregamos punto textil default. Tan simple como eso. Guarda los cambios y echa un vistazo. Ver, cuando seleccionemos la etiqueta, su color de fondo cambiará y después de eso, volverá a la normalidad. Ahora con otras etiquetas, no vemos estos estilos porque no pasamos los apoyos seleccionados para ellos. Así que volvamos al componente de formulario de tarea, aquí seleccionamos los apoyos seleccionados y los copiamos de aquí y lo pegamos aquí, y cambiamos el nombre de la etiqueta a CSS Ahora, lo mismo que hacemos para JavaScript, y también hacemos lo mismo para reaccionar. Ver los cambios y echar un vistazo. Mira ahora nuestras etiquetas tienen este efecto seleccionado. Sé que este objeto de estilo inline te está confundiendo. Pero si revisas este código, lo entenderás correctamente. Después de eso, verás lo sencillo que es implementar esta funcionalidad de selección. Solo tienes que pensar en el idioma del día a día y no estás buscando todo en Google. Si intentas algo y tienes existencias, entonces usa eso como herramienta. Ahora, aquí tenemos todos los detalles sobre la tarea en esta variable de datos de tarea. Entonces, en la siguiente lección, veremos ¿cómo podemos mostrar esa tarea en nuestra sección? 48. Visualización de las tarjetas de tareas: Ahora, agreguemos nuestra funcionalidad principal de esta aplicación, que es agregar tarea. Sin esa característica, nuestra aplicación no es útil. Entonces aquí vamos a almacenar toda nuestra tarea en una sola matriz, y mediante el uso de la propiedad status, las mostraremos en cada sección. Hacemos esa matriz como una variable de estado porque cuando agregamos la tarea o eliminamos la tarea, queremos ver los cambios en nuestro domo. Ahora la pregunta es, en qué parte de nuestra aplicación necesitamos esa matriz. En primer lugar, necesitamos acceder a esa función de conjunto de matrices en nuestro componente de formulario de tarea porque cuando enviemos nuestra tarea, queremos agregarla en esta matriz. Y después de eso, necesitamos mostrar ese estado de matriz en este componente de columna de tareas. Entonces necesitamos la matriz de tareas en estos dos componentes, taskfm y task column Así que tenemos que crear esa variable de estado en este componente app. Entonces podemos pasar eso como un utilería en estos dos componentes. Entonces en la parte superior, importamos use state de la biblioteca react. Y en el componente, nos escribimos Estado y pasamos nombre de variable, tarea, y set task. Y pasamos mt array como valor predeterminado. Ahora, pasemos esta función de tarea establecida como un props en este componente de formulario de tarea Este archivo y mantenga el control o comando y simplemente haga clic en el nombre del componente. Nos llevará a ese archivo componente. Ahora aquí en el parámetro, desestructuramos los apoyos. Sé que en este componente, no necesitamos eso, pero esa es una buena práctica que nos ayuda en el futuro. Entonces aquí obtenemos set task, y en la función handle submit, estableceremos nuestros datos de tarea en la función set task. Entonces en la parte inferior, escribimos set task. Ahora aquí también, obtenemos los primeros valores anteriores, función de flecha y retornamos aquí array, y primero agregamos todos los valores anteriores usando el operador spread. Y después de eso, simplemente agregamos objeto de datos de tarea, y eso es todo. Ahora, alejemos un poco mi código VS con Control y menos o Comando y menos. Guarde este archivo y verifiquemos lo que obtenemos. Así que volvamos al archivo JSX punto de la aplicación y simplemente consola punto log Tasktask guardar los cambios y echar un vistazo Escribe esto y podemos ver que estamos obteniendo matriz de texto. Así que vamos a limpiar esta consola. Abra el componente de formulario de tarea, y aquí eliminamos esta línea de texto de consola. Guarde esto y refresquemos la página. Esto es quemadura de tareas, seleccionamos etiquetas, y seleccionamos estado a hacer y damos clic en Attask Ver, aquí obtenemos esta tarea. Ahora, agreguemos una tarea más. Etiquetas de estado para realizar una tarea. Verás, entiendo eso también. Entonces eso está funcionando. Ahora, vamos a mostrar esas tareas en esta columna. En el componente app aquí en este componente de columna de tareas, pasamos la primera tarea como props, y después de eso, tenemos que filtrar esas tareas por estado Por ejemplo, si el estado está haciendo, entonces solo mostramos la tarea que el estado está haciendo. Entonces pasamos aquí el estado es igual a a. Ahora copiemos estos dos apoyos y pasemos aquí en esta columna de tareas Y simplemente cambiamos de estado a hacer y aquí también, pegamos estos accesorios y cambiamos estado a hecho Guarde estos. Ahora en el componente de columna de tareas, simplemente desestructuramos aquí tarea y estado Ahora en el lugar de esta tarjeta de tareas estática, nos adherimos calibraket task dot Map Aquí obtenemos cada tarea y también índice, y simplemente agregamos aquí condición, estado del punto de la tarea es igual a este estado y componente de tarea puritano y dentro de él, pasamos atributo clave para cada ítem único, que es nuestro índice Este operador final final solo lo hará para la expresión verdadera. Entonces solo si esta condición es verdadera, entonces devolvemos este componente de tarjeta de tareas. De lo contrario, no conseguimos nada, guardamos los cambios y echamos un vistazo. Mira, aquí tenemos dos tarjetas. Uno en hacer y otro en hacer. Ahora solo tenemos que cambiar estos detalles dentro de esta tarjeta. Entonces, para mostrar estos detalles en nuestro componente de tarjeta, tenemos que pasarlos usando props Así que aquí estamos en el título es igual a tarea punto Tarea. Después de eso, las etiquetas son iguales al texto de punto de tarea. Guarde este archivo. Y ahora vamos a mostrar estos dos valores en nuestra tarjeta. Entonces, en el componente de tarjeta, desestructuramos los apoyos aquí y obtenemos el título y Ahora, en el lugar de este texto, escribimos título, y en el lugar de este texto, estamos en Corchetes Cul y texto punto Método Mapa Aquí obtenemos cada etiqueta y también índice para pasarla a Key. O función, y volvemos aquí componente de etiqueta, y pasamos clave a índice y nombre de etiqueta a etiqueta. Guarda los cambios y echa un vistazo. Ver, aquí obtenemos estos detalles y etiquetas. Ahora, lo último, queremos mostrar etiquetas coloridas. Entonces, ¿recuerdas que hemos seleccionado propiedad? Y con eso, podemos agregar etiquetas coloridas. Déjame mostrarte. Entonces aquí pasamos iguales seleccionados a true, y eso es todo. Guarda los cambios y echa un vistazo. Ver ahora nuestra tarjeta se ve muy bien. Además, si queremos pasar cualquier valor de props a true todo el tiempo, podemos escribir solo ese nombre de prop Igual que escribimos el atributo de desactivación en HTML. Guarde esto y vea que funciona igual que antes. 49. Eliminar una tarea única: Ahora, antes de comenzar a implementar la funcionalidad de eliminación, arreglemos esta cosita en nuestro formulario. Entonces, cuando añadimos nuestra tarea, estos viejos detalles aún están aquí. Entonces, si el usuario quiere agregar otra etiqueta, entonces primero tiene que diseccionar las etiquetas, y esa no es una buena experiencia de usuario Entonces, cuando creas sitio web para cualquier cliente, también tienes que pensarte a ti mismo como el usuario de esa aplicación y averiguar qué problemas o errores están disponibles en tu aplicación. En el componente de formulario de tarea, queremos restablecer este formulario después de establecer nuestros datos de tarea en la función set task. Básicamente, estamos restableciendo este objeto de datos de tarea al valor predeterminado Entonces escribimos set task data, y dentro de esto, simplemente copiamos este objeto predeterminado y lo pegamos aquí, y eso es todo. Di los cambios y echa un vistazo. Envíe el formulario y vea que nuestro texto se restablece, pero este cuadro de texto y este menú desplegable siguen siendo los mismos. ¿Por qué sucede eso? Vamos a averiguarlo. Entonces aquí, en este elemento de entrada, no estamos vinculando el valor de nuestra tarea a este valor de entrada. Déjame mostrarte a lo que me refiero. Así que aquí, cuando algo cambiemos en esta entrada, ese valor de entrada agregará en nuestra propiedad de tarea de punto de datos de tarea. Pero cuando cambiamos nuestra propiedad de tarea de punto de datos de tarea, entonces cómo reaccionar cambiará el valor de entrada. No hicimos nada por eso. No te preocupes. Esto es muy sencillo. Para eso, simplemente agregamos aquí atributo de valor y en paréntesis CL, tarea de punto de datos de tarea. Además, en esta selección, pasamos atributo value equals to task data dot status. Es por eso que necesitamos agregar valor a la propiedad para que funcione en ambos sentidos. Guarda los cambios y echa un vistazo. Escriba la etiqueta de selección de tarea y también seleccione el estado y envíe el formulario y vea que nuestro formulario se restablece correctamente. Ahora, veamos cómo podemos eliminar tarea desde aquí. Así que volvamos a nuestro componente de aplicación, aquí creamos la función, que manejará la funcionalidad de eliminación. Ahora bien, ¿cómo podemos eliminar una tarea específica? Entonces aquí sabemos que cada elemento de tarea tiene su índice único. Entonces pasamos aquí índice de tareas. Ahora dentro de estos, usamos el método filter, así tarea dot Filter, aquí obtenemos cada tarea, y en segundo parámetro, función de error de índice, y aquí pasamos nuestra condición. Solo queremos tomar esa tarea, cuyo índice no es igual al índice de tareas. Ahora sabemos que este método de filtro devuelve una nueva matriz. Así que simplemente almacenamos eso en la variable llamada nueva tarea. Y después de eso, establecemos esta nueva tarea en la función set task. Nuestra función delete está lista, solo tenemos que hacer que esa función se ejecute en nuestro evento delete click. Así pasamos nuevos apoyos en estos tres componentes de columna de tareas, aquí y mantén pulsada alt u opción y pulsamos aquí y aquí Eso creará múltiples cursor, y simplemente escribimos aquí, handle delete equals to handle delete. Y presiona Escape. Guarde este archivo y ahora abra este componente de columna de tareas, y aquí obtenemos manejar eliminar props y simplemente pasarlo en este componente de tarjeta de tareas Manejar el retardo es igual a manejar la eliminación. Y también pasamos index equals a index porque necesitamos pasar ese índice en esta función handle delete. Y podemos ver que aquí estamos pasando sondas anidadas, que es esta función handle delete Guarde este archivo, y ahora en el componente de tarjeta de tareas en los probs, obtenemos handle delete and index Ahora en este DU, pasamos aquí evento llamado al click. Y aquí pasamos manejarlo función. Ahora tenemos que pasar el valor del índice en esta función manejarlo. De lo contrario, nuestra funcionalidad dite no funcionará. Entonces, ¿cómo podemos hacer eso? Derecha, simplemente pasamos aquí la función de flecha, guardamos los cambios, y echamos un vistazo. Da clic en el icono Eliminar y podrás ver qué tan suave ha ido esa tarea. Entonces así de sencillo implementar la funcionalidad de eliminación. Ahora, aquí puede que tenga una pregunta por qué creamos la función de eliminación en nuestro componente de aplicación. Podemos crear eso en componente de tarea. Sí, también podemos crear función de eliminación de mango en el componente de tarjeta de tareas. Pero aquí se puede ver este mango Delit función necesita fecha de tarea y también establecer la función de tarea Creamos la función handle delete en el componente de tarjeta de tareas, entonces tenemos que pasar esta tarea y establecer tarea tanto como los props, y si creamos handle delat en componente app, que tienen ambas variables, entonces tenemos que pasar solo la función handle t como props. Entonces esa es la razón. 50. Fundamentos del usoGancho de efecto: Entonces, primero entendamos qué es el efecto de uso. El efecto de uso se utiliza para realizar efectos secundarios en nuestro componente. Entonces, ¿qué son los efectos secundarios? Los efectos secundarios son acciones que se realizan con el mundo exterior. Realizamos un efecto secundario cuando necesitamos llegar fuera de nuestros componentes de reacción para hacer algo. Por ejemplo, la obtención de datos de API actualiza directamente el domo en el que usamos el documento o el objeto Window o función timer como set timeout o set interval Estos son los efectos secundarios más comunes en reaccionar. Entonces, para realizar cualquier tipo de efectos secundarios, necesitamos usar el gancho de efecto de uso. No te preocupes por esta teoría. Digamos esto prácticamente. Entonces, para usar cualquier hook, necesitamos primero ingresar ese gancho desde la biblioteca react. Así que escribimos aquí use effect, y ahora podemos usarlo en el componente de función. Nosotros nos llamamos efecto gancho, que acepta dos argumentos. Primero, la función callback, que es una función en la que escribimos nuestra lógica de efectos secundarios Esta función se ejecutará siempre que algo cambie en todo este componente. Y el segundo argumento son las dependencias, que es una matriz de variables, y es un argumento opcional En términos simples, el primer argumento es qué ejecutar y el segundo es cuándo correr. Usa ejecuciones de efectos en cada renderizado, lo que significa cuando cambia el conteo, o ocurre ender, lo que desencadena otro efecto. Pero podemos controlarlo por dependencias. Si está familiarizado con los componentes de clase, use effect es la combinación de componente montó, componente hizo actualización y componente desmontó El efecto de uso tiene tres variaciones. No te preocupes. Veremos cada variación en los detalles en la próxima sección. Pero actualmente, déjenme decirles en muy breve. Entonces primero, usa el efecto sin ninguna dependencia. Entonces, si no pasamos ninguna dependencia, esta función de devolución de llamada se ejecutará cada vez que algo cambie en nuestro componente En segundo lugar, use el efecto con matriz vacía. Entonces, si solo pasamos una matriz vacía, esta función de devolución de llamada se ejecutará solo una vez cuando nuestros componentes se rindan por el tiempo Y tercero, usar efecto con variables. Entonces, por ejemplo, si pasamos una variable de tarea, entonces cuando esta tarea cambia de estado, sólo entonces se ejecuta esta función de devolución de llamada, y eso es lo que queremos hacer aquí Dentro de esta función de devolución de llamada, escribimos el artículo de conjunto de puntos de almacenamiento local Ahora en el primer parámetro, pasamos nuestro nombre de variable que es tarea. Y en el segundo parámetro, pasamos nuestra matriz de tareas. Pero aquí, tenemos que convertir esta matriz en formato de cadena porque el almacenamiento local solo puede almacenar cadenas como valores. Si almacenamos directamente la matriz como un valor, entonces la convertirá automáticamente en cadena, pero entonces no podemos acceder a esa letra como una matriz. Así que usamos aquí Json cadena de puntos método UPI. Y pasa nuestra matriz de tareas aquí. Esta función también convertirá nuestra matriz en el formato de cadena. La única diferencia es que podemos convertir esa cadena en matriz nuevamente y usarla, guardar los cambios y echar un vistazo, enviar una tarea, y obtenemos la tarea aquí. Ahora, veamos que también se está almacenando en almacenamiento local o no. Abre almacenamiento local, y aquí vemos nuestra nueva tarea. Ahora si agregamos otra tarea, vea que nuestro almacenamiento local se actualiza. Ahora, como sabemos, almacenamos nuestra matriz en cadena. Así que cuando obtenemos esa matriz, tenemos que convertir eso de nuevo en matriz. Así que volvamos a nuestro componente app y en el lugar de esta matriz vacía, pasamos json dot pars, y dentro de este, pasamos este antiguo valor de tarea Esta función convertirá nuestra cadena en array. Guarde los cambios y actualice la página. Ver, no perdemos nuestra tarea, eliminamos una tarea y también tratamos de actualizar la página. Ver, también obtenemos tarea actualizada, por lo que está funcionando correctamente. Ahora, aquí hay un pequeño bicho. Abra el almacenamiento local, y si eliminamos esta matriz de tareas de aquí, y después de eso, actualizamos esta página. Ver, aquí obtenemos este error porque no podemos encontrar tarea en almacenamiento local. Entonces para resolver eso, pasamos aquí u operador. Aquí matriz vacía. Si esta expresión devuelve null, entonces toma una matriz vacía como valor predeterminado. Guarda los ings y echa un vistazo. Ahora nuestra aplicación funciona bien. 51. Agregar fuentes personalizadas: Ahora nuestro proyecto está casi terminado. Añado aquí alguna tarea para demo. Ahora solo necesitamos cambiar nuestros estilos de fuente para nuestra aplicación. Por lo tanto, hay dos formas más populares agregar fuentes en la aplicación react. primera es que tenemos un archivo de fuente sin conexión en nuestro sistema, y también podemos usar CD y Link para agregar fuentes. Veamos la forma más fácil, que es usar CD y Link. Veremos el método offline más adelante en este curso. No te preocupes por eso. Entonces en este proyecto, vamos a agregar fuente Montserrat. Así que dirígete a Navegador, abre una nueva pestaña y busca una vez que estés en Google font. Abre este enlace de publicación. Ahora en este sitio web, obtenemos mucha fuente gratis. Además, tenemos otra página web, Font Squirrel. Puedes usar lo que quieras. Depende totalmente de ti. Aquí, podemos seleccionar diferentes estilos de fuente que queremos usar. Así que selecciona 400, 500, 600, 708 cien. Ahora en esta sección, tenemos opción, simplemente seleccione la sección Importar y copiar esta declaración de importación y en nuestro archivo CSS de punto índice en la parte superior, pegamos este CD y Enlace. Bueno. Ahora de nuevo al navegador y desplácese hacia abajo y copie este CSS para esta familia de fuentes. Y en nuestro archivo CSS index dot, agregamos aquí estilos para body, y dentro de él, pegamos nuestra familia de fuentes. Guarda este archivo y mira, obtenemos nuestros estilos y fuentes. Ahora nuestra aplicación se ve realmente increíble. 52. Cierre del proyecto 01: Enhorabuena. Completas con éxito tu primer proyecto en react. Sé que aprendes mucho de esto, y además puedes ver que no es realmente difícil construir una aplicación en react. Es realmente simple. Tienes que aprender la funcionalidad y las características de react. No te preocupes por aprender todos los conceptos de una sola vez porque eso te abrumará Entonces aprende algunas características y practícalo, luego otra vez, aprende algunas características y vuelve a practicarlo. práctica es la clave del éxito, y ese debe ser nuestro foco principal. Quieres volver a practicar este proyecto completo, entonces puedes hacerlo. De esa manera podrás aprender más sobre reaccionar, y si te sientes cómodo para seguir adelante, entonces puedes continuar con este curso. Depende totalmente de ti. A diferentes personas les gustan los diferentes enfoques. Muchas gracias por construir este proyecto. Sé que su confianza en reaccionar se incrementa, nos vemos en la siguiente sección. 53. [Opcional] Función de arrastrar y soltar en React: Dragon RopFeature es una característica muy útil para dar más flexibilidad a los usuarios de tu sitio web, y además se ve tan genial Podemos mover esta tarjeta de tareas arriba y hacia abajo en el mismo estado de tarea, o también podemos cambiar el estado, que puede estar haciendo o hecho. Entonces en este tutorial, veremos cómo implementar la función Dragon rob en react. Son muchas las bibliotecas para eso, pero no soy un gran fan de usar esas bibliotecas. En su lugar, podemos crear función Dragon rob usando eventos de caída de SDMLPi Es muy sencillo. No te preocupes por eso. Mira este tutorial completo y todas tus dudas se sienten claras. Entonces, sin perder tiempo, comencemos a implementar la función de caída de Dragon en esta aplicación de reacción para hacer. Entonces déjame preguntarte una cosa. Lo que está pasando en la función de Dragon rob. No pienses en escribir código, piensa en cómo sucede Dragon rob en la vida real. Estamos agarrando una cosa y la colocamos en algún otro lugar Sencillo. Supongamos que tenemos lista de tareas y las dividimos en dos categorías para hacer y hacer, y también las organizamos en orden de prioridad, lo que significa qué tarea queremos hacer primero, y luego segundo , tercero, etcétera, y también podemos hacer múltiples tareas al mismo tiempo Ahora supongamos que queremos mover el segundo para hacer tarea a la lista de hacer, pero a la segunda prioridad. Otros detalles que necesitamos aquí. Piénsalo. Entonces , lo primero necesitamos es qué tarea estamos moviendo. También, necesitamos en qué categoría estamos poniendo esa tarea para hacer o hacer. También, necesitamos en qué posición estamos colocando esa tarea. En este caso, ese es el segundo. Y eso es todo, simplemente trasladamos esta tarea a esta categoría y posición, simple como eso. En esta aplicación, tenemos tres categorías, pero la función de dragon rob seguirá siendo la misma. Así que dividí la característica de dragon rob en tres pasos. Primero, debemos saber qué tarjeta estamos moviendo. Segundo, creamos un área de lanzamiento donde podemos colocar nuestra tarjeta porque no queremos colocar nuestra tarjeta en toda nuestra aplicación, así que crearemos un área de lanzamiento para eso. Y última parte, función de escritura para soltar tarea a posición y cambiar el estado si nos movemos a otro estado. Empecemos con el paso número uno, saber qué tarjeta estamos moviendo. Actualmente, en nuestra aplicación, nuestra tarjeta no es arrastrable Primero y ante todo, tenemos que hacerlos arrastrables. Entonces en esta aplicación, para cada columna, creé este componente de columna de tareas que reutilizamos, y para cada tarjeta de tareas, tenemos componente de tarjeta de tareas. Entonces tenemos que hacer que este componente de tarjeta de tareas sea rastreable. Ahora para que nuestra tarjeta de tareas sea rastreable, tenemos el atributo SML phi rastreable a true o solo podemos escribir Guarde esto, y ahora podemos ver ahora podemos mover nuestro componente de tarjeta de tareas. Ahora aquí queremos saber qué tarjeta estamos moviendo. Entonces necesitamos algo único para cada tarjeta como ID de tarea, pero no tenemos ID en nuestra lista de tareas. No te preocupes. También podemos utilizar aquí este índice, que también es único para cada tarea. Ahora para almacenar ese índice de tarjetas arrastrando, tenemos que crear una variable de estado local porque podemos seleccionar cualquier tarjeta, y nuestro valor de tarjeta de arrastre también cambiará Ahora la pregunta es dónde creamos esa variable de estado tragable, donde necesitamos el estado de la tarjeta a dos aguas Entonces, en nuestro componente de aplicación, tenemos nuestro estado de tarea, y también en el componente de la aplicación, necesitamos el índice de la tarjeta a dos aguas, para que podamos modificar nuestra lista de tareas actual Entonces después de este estado de tarea, creamos una nueva variable de estado llamada tarjeta activa conjunto de tarjetas activas. Como valor predeterminado, lo establecemos en null, lo que significa que ninguna tarjeta está arrastrando Ahora, cuando empezamos a arrastrar cualquier tarjeta, almacenamos ese valor de índice de tarjeta en este estado activo de tarjeta Y cuando el arrastre termine, nuevamente hacemos que este valor de tarjeta activo sea nulo. Ahora para establecer la tarjeta activa a este índice de tarjeta de tareas, necesitamos establecer la función de tarjeta activa en componente de tarjeta de tareas, y cómo podemos hacerlo. Justo mediante el uso de utilería. Así que de vuelta al componente app, movemos nuestro cursor hacia aquí, mantendremos presionado Alt u opción, y también hacemos clic para estos dos componentes de columna de tareas. Al mantener Alt u opción, podemos crear múltiples cursores Pasamos nuevo prop, set active card equals to set active card. Presione escape para la edición de múltiples cursor de salida. Guarda esto y en el componente de columna de tareas, primero, obtenemos tarjeta stactiva en utilería y también la pasamos en el componente de tarjeta de tareas, tarjeta estectiva equivale a carta Guarde esto, y en el componente de tarjeta de tareas, finalmente, obtenemos la función de tarjeta cetactive Ahora en la etiqueta del artículo o si tienes debido entonces en esa etiqueta, eventos de etiqueta ddt sdmlpi Aquí necesitamos al inicio de arrastre porque cuando empezamos a arrastrar esta tarjeta de tareas esa vez establecemos la tarjeta activa al índice de la tarjeta actual, que es este índice Así que la función de flecha y simplemente setctive tarjeta al índice. Además, cuando nuestro arrastre haya terminado, queremos establecer null a tarjeta activa. Entonces agregamos otro evento en función de flecha de arrastre, configuramos la tarjeta activa en null. Guarde los cambios. Y para la degustación, vamos a imprimir tarjeta activa. En el componente de aplicación en la parte inferior de la etiqueta principal, agregamos H una etiqueta y simplemente imprimimos aquí tarjeta activa. Guarda los cambios y echa un vistazo. Arrastre una tarjeta. Mira aquí obtenemos el índice de la tarea, y en el momento en que dejamos caer nuestra tarjeta, mira, ya no está. Ahora aquí cuando estamos arrastrando nuestra tarjeta de tareas, podemos resaltar nuestra tarjeta seleccionada para una mejor experiencia de usuario Entonces en el archivo CSS de punto de la tarjeta de tareas, después del estilo de la tarjeta de tareas, agregamos tarjeta de tareas, dos puntos activos y dentro de este, primero establecemos la opacidad a 0.7 y bordeamos a un píxel, sólido tiene 111, que es negro Y también para la tarjeta de tareas, establecemos el cursor para agarrar. Guarda esto y mira ahora conseguimos estos mosaicos. Entonces nuestro primer paso está hecho. Ahora el segundo paso, que es crear área de caída significa donde podemos dejar caer nuestra tarjeta activa. Podemos trapar nuestra tarjeta en dos lugares. Después de cada tarjeta o antes de nuestra lista de tareas, que es el lugar entre este encabezado de estado de tarea y la lista de primera tarea. Entonces estos son los lugares donde podemos colocar cualquier tarjeta. Así que cuando arrastramos nuestra tarjeta en ese lugar, podemos mostrar algo como soltar aquí o simple caja. Déjame mostrarte cómo crear eso. Es realmente simple. Entonces en nuestra carpeta de componentes, creamos un nuevo componente llamado drop area dot JSX Estamos creando un componente separado para mostrar el área de colocación porque podemos usar ese mismo componente varias veces. Aquí agregamos código repetitivo usando RAFC en el lugar de este vencimiento, podemos agregar etiqueta de sección, y aquí escribimos drop Guarde esto y mostremos este componente de área de caída después de cada tarjeta. Entonces aquí, en el componente de columna de tareas, aquí podemos ver que estamos mapeando todas las tareas en la columna. Entonces, después de este componente de tarjeta de tareas, agregamos nuestro componente de área de colocación. Ahora aquí obtenemos error de tiempo de ejecución porque aquí estamos volviendo a los componentes. Entonces para resolverlos, podemos envolver ambos componentes con react dot fragment. Y mueva este fragmento de cierre después de soltar componente de área. Y aquí, tenemos que pasar key equals a index en react dot fragment porque aquí estamos mapeando lista. Ver los cambios y echar un vistazo. Ver, después de cada tarjeta de tareas, obtenemos caer aquí componente. Ahora también necesitamos este componente de área de caída aquí en la parte superior de la lista. Así que volvamos al código VS. Aquí antes de este mapa de tareas, agregamos área de caída. Guarda los cambios y echa un vistazo. Mira, aquí tenemos esta zona de caída. Hagamos estos estilos un poco mejores porque aquí creo que es cuestión de margen. Así que abra la columna de tarea punto Cssle y para este encabezado, agregue margen inferior a 15 píxeles, guarde esto, y también en el archivo CSS Tascard En lugar de este margen, establecemos el margen inferior en 15 píxeles. Guarde esto, y ahora se ve poco bonito. Ahora vamos a darle estilo a esta sección de área de caída. Así que volvamos al componente de área de caída aquí, le damos a este componente nombre de clase para soltar área de subrayado Ahora para CSS, me gusta crear un archivo CSS separado, drop area dot CSS. Aquí tuvimos área de caída y dentro de este ancho 200% de altura a 100 píxeles, color a tiene CC CC CC, borde a un píxel tiene CC CC CC, wer radio a diez píxeles, relleno, 15 píxeles y margen inferior, también 15 píxeles Ahora para aplicar estos mosaicos a nuestro componente de área de caída, necesitamos importar este archivo en la parte superior. Así que importar punto slash drop area dot css. Esto lo olvidé mucho cuando empecé a aprender reaccionan. Guarda los cambios y echa un vistazo. Mira, así es como se ve. Ahora por defecto, no queremos mostrar esta área de caída. Solo queremos mostrar cuando arrastramos nuestra tarjeta de tareas en el área de colocación. Para eso, necesitamos crear una variable de estado local en el componente de área de caída. Entonces estado y darle un nombre, mostrar drop, set, show drop, y por defecto, hacemos su valor a falls. Ahora bien, la lógica simple es cuando arrastramos nuestra carta sobre esta sección, entonces hacemos que este estado sea verdadero. Y cuando arrastremos de esta sección, haremos que el estado caiga, lo que significa no mostrar. Entonces en la etiqueta de sección, tenemos otro evento llamado al arrastrar la función Enter arrow y establecer show drop en True. Y agregamos otro evento al arrastrar la función de flecha Liu y simplemente llamamos set showdrop a lo que nos cae Además, para este nombre de clase, podemos agregar condición. Entonces aquí, agregamos corchetes C. Si showdrop es true, entonces agregamos drop area class, lo contrario agregamos hide underscore drop Guarde los cambios, y en el archivo CSS de punto de área de caída, hay que agregar algunos estilos más. Entonces en el área de caída, agregamos opacidad a uno y también transitamos a todos 0.2 segundos está dentro y fuera. Y en el punto inferior Hyde subrayado superior, simplemente establecemos la opacidad a cero Entonces los cambios y echarle un vistazo. Arrastre una tarjeta y simplemente sobre un área de colocación. Mira lo hermoso que se ve esto. Entonces aquí también se hace nuestro segundo paso. Ahora solo necesitamos saber en qué posición estamos dejando caer nuestra tarjeta. Y luego, según eso, escribimos función para actualizar nuestra lista de tareas. Ahora, primero, ¿cómo podemos saber en qué columna estamos dejando caer la tarea? Entonces en la columna de tareas, previamente pasé status, para que podamos usar ese estado, y también olvidando la posición que tenemos aquí índice. Entonces, si quieres agregar nuestra tarea junto a esta tarea, entonces nuestro nuevo índice será índice más uno. No te confundas. Te lo mostraré en tan solo un minuto. Entonces, en el componente app, creamos una nueva función llamada on drop. Y en el parámetro, obtenemos status, que es en qué columna, estamos dejando caer nuestra tarea. Y también, obtendremos índice, o podemos decir posición, que es la posición de dejar caer tarea. Por ahora, simplemente Consol dot log Ti dólar tarjeta activa va a colocar en el estado del dólar y en la posición índice dólar El lugar del índice, me gustaría darle a este parámetro nombre a la posición. Creo que eso es más exacto. Ahora tenemos que llamar a esta función cuando dejamos caer nuestra tarjeta en área de caída porque ahí es cuando queremos hacer cambios en nuestra tarea. Entonces pasamos esta función como apoyos en estas tres columnas de tareas Creo que por error, doy por escrito nombre de función Seleccione esto y presione F dos y renombrar el nombre de la función. Guarde este archivo, en el componente de columna de tareas, primero, nos metemos en drop como props y simplemente pasamos esa función on drop como props en este componente de área de caída Además, para la función de caída, tenemos que pasar el estado es igual a estado. A necesitamos índice, que es índice más uno porque queremos colocar esa tarjeta después de esta tarjeta de tareas. Ahora en vez de pasar estos tres problemas, podemos hacer algo así En los accesorios on drop, podemos pasar la función de devolución y simplemente llamamos aquí en la función drop Y primer parámetro, pasamos status, que es este estado de columna de tarea. Y luego pasamos índice más uno. Si te confundes con este método, entonces puedes pasar por separado tres accesorios, y en el componente de área de caída, tienes que llamar simplemente así Vamos a guardar este archivo, y en el componente de área de caída, obtenemos la función de caída. Ahora, en esta sección, tenemos otro evento llamado on drop, que se ejecutará cuando metamos algo en esta sección. Así que aquí pasamos la función de devolución de llamada, y primero, simplemente llamamos a esta función on drop sin parámetro porque ya pasamos ese parámetro en props anteriores Y también aquí tenemos que ocultar el área de caída después de dejar caer la tarjeta. Así que el conjunto debe caer a las caídas. Guarde esto. Y si hacemos arrastrar y soltar en cualquier área de caída, no obtenemos ni mensaje de consola porque tenemos que evitar el comportamiento predeterminado de on drag over evento. Agregamos aquí en drag over, obtenemos aquí la función de error de evento, event dot prevent default. Guarda esto, y ahora si volvemos a arrastrar y soltar la tarea, entonces obtenemos nuestro mensaje de consola, cuál va a jugar a hacer en la posición tres, porque este índice de primera tarjeta puede ser dos, pero no importa. Entonces estamos obteniendo nuestros datos necesarios y también la posición. Ahora bien, si arrastramos y soltamos nuestra tarjeta al principio de la lista, aquí obtenemos el error. En drop no es función porque no pasamos la función drop como accesorios en esta área de caída Entonces simplemente copio estos en drop props desde abajo y simplemente los pego aquí Ahora bien, ¿ me puede decir qué propiedad necesitamos cambiar aquí? Bien, solo necesitamos cambiar el índice porque el estatus va a ser el mismo. Entonces, ¿en qué posición se encuentra esta zona de caída? Simplemente, está en cero porque en array, índice cero es la primera posición. Aquí están los cambios y échale un vistazo. Ahora nos llega el mensaje de la consola, tenemos el estado activo de la tarjeta y la posición. Ahora solo necesitamos escribir lógica para reorganizar nuestra tarea en función de caída En primer lugar, verificamos condición si la tarjeta activa es igual a nula o la tarjeta activa es igual a indefinida. Entonces simplemente regresamos de este punto. Después de eso, simplemente escojamos tarea, queremos movernos. Entonces const tarea para mover iguales a tarea, y obtenemos guardia activa Después de eso, para actualizar nuestra lista de tareas, primero, tenemos que eliminar la tarjeta técnica actual de nuestra lista de tareas Tarea dot Filter, aquí obtenemos cada tarea y además obtenemos la función flecha índice, y aquí pasamos condición index not equals to active card. Este método de filtro eliminará nuestra tarjeta activa actual de esta lista de tareas y devolverá la matriz de tareas actualizada. Así podemos almacenar esa matriz en la variable llamada tarea actualizada. Ahora solo tenemos que colocar nuestra tarea para movernos en nuestra posición caída. Entonces podemos usar un método de empalme como este, tarea actualizada empalme punto. Ahora en el primer parámetro, escribimos donde queremos colocar nuestro nuevo ítem. En nuestro caso, se almacena en posición. Después de eso, escribimos cero, lo que básicamente significa cero elementos eliminados. Y en el tercer parámetro, podemos pasar nuestro objeto o artículo, que queremos almacenar en esta posición. Entonces agrego aquí objeto, y en primer lugar, esparzco todas las propiedades de tarea a mover objeto, y después de eso, simplemente podemos cambiar la propiedad status a este parámetro status. Ahora, como sabemos, hemos actualizado la lista de tareas, por lo que simplemente podemos establecer tarea en tarea actualizada. Además, desde la parte inferior, eliminemos esta etiqueta h one, que está mostrando tarjeta activa. Guarda los cambios y echa un vistazo. Ver, ahora podemos mover nuestra tarea de una lista a otra, y también podemos moverlas en lista simple. Entonces eso es todo para este tutorial. Este es un tutorial largo, pero espero que veas Dragon drop no es tanto difícil. Tenemos que hacer proceso paso a paso. 54. Sección 06 Proyecto 02: MovieManiac: Bienvenido a la Sección seis del curso definitivo de React. En esta sección, vamos a empezar a construir nuestro proyecto también, que es película Maniac puede ver lo genial que se ve y los detalles de la película vienen de otro sitio web. También podemos filtrar estas películas por su calificación, y después de eso, también podemos ordenarlas por fecha de lanzamiento o calificación, ascendente y descendente. El objetivo de este proyecto es aprender llamadas EPI, filtrado y características de clasificación que se utilizan en muchas aplicaciones del mundo real Sepa que está entusiasmado con este proyecto, así que vamos a sumergirnos en este proyecto. 55. Configurar el proyecto y el estilo de diseño: Empecemos por crear el nuevo proyecto. Así que abre tu carpeta de proyecto de reacción y abre el símbolo del sistema o terminal en esa carpeta. Ahora, ¿puedes decirme qué comando usaremos para crear una nueva aplicación? Escribe NPM, crea blanco, airea, lo último y presiona Enter Ahora aquí escribimos nuestro nombre de proyecto película Maniac, y pulsamos Enter Ahora, selecciona el framework, que es react, y después de eso, selecciona variante, que es JavaScript y pulsa Enter. Ahora sólo necesitamos ejecutar estos tres comandos. Entonces, antes que nada, entra en esta carpeta con CD y presiona tabulador, selecciona la carpeta Maniac de película Ahora vamos a instalar todas las dependencias. Entonces NPM instala, y presiona Enter. Tomará algún tiempo. Entonces, hasta entonces, planeemos nuestra aplicación. Entonces, antes que nada, podemos dividir nuestro diseño de aplicación en dos secciones. Primero uno es Nevar y el segundo es esta lista de películas. Ahora, definamos los componentes que podemos crear para esta aplicación. Una cosa quiero aclarar que este proceso de planeación no es el plan absoluto. Es sólo un punto de partida rápido. Podemos agregar o eliminar componentes dependiendo de nuestras necesidades. Entonces primero, podemos separar este componente de Naba. Después de eso, podemos crear componentes para esta tarjeta de película. Después de eso, en esta sección de exhibición, tenemos tres secciones más, que son la sección popular mejor valorada y próxima. Pero se puede ver estructura básica de toda la sección son iguales. Todos tienen encabezados, filtros, cortocircuitos y lista de tarjetas de películas Así que también podemos crear un componente reutilizable para eso, y creo que eso es todo lo que necesitamos. Ahora vamos a revisar nuestras dependencias instaladas o no. Y sí, está instalado. Entonces abramos este proyecto en código VS por punto de espacio de código, y presionemos Enter. Bueno. Ahora podemos cerrar esta terminal. No lo necesitamos. Y además, cerramos nuestra carpeta. Ahora, asegurémonos de que nuestro proyecto esté funcionando o no. Así que abre terminal por Control más Batak o Comando más Batak y escribe NPM ejecuta DO y Una cosa más, si quieres detener esta aplicación, presiona Control más C o Comando más C para eso. Ahora mantenga presionado Control o comando y haga clic en esta URL de host local. Y está funcionando. Ahora, vamos a crear un diseño básico para nuestra aplicación. Así que abra el archivo JSX punto de aplicación, y eliminamos todo el código de aquí y creamos componente funcional con RAF CE Ahora, antes que nada, le damos a esta clase el nombre es igual a app. Y dentro de este Du queremos crear primero NaBR escribimos aquí Naw tag y le damos un nombre de clase Na Bar aquí escribimos contenido de Navbar Después de eso, creamos nuestra sección principal de nuestra aplicación, y dentro de estas, simplemente escribimos contenido principal. Guarde estos y veamos qué obtenemos. Ver, aquí obtenemos ambas secciones. Ahora, vamos a establecer estilo para cada uno de ellos. Pero antes de eso, necesitamos eliminar algunos estilos básicos. En el archivo CSS de punto índice, eliminamos todos los estilos, y en la parte superior, escribimos calibackets estrella y escribimos cero C, escribirá margen cero. Después de eso, B cero, y obtenemos el relleno cero y el tamaño de la caja al borde de la caja. Estos son los trucos que aprendí trabajando en múltiples proyectos. Pero ojalá tenga los trucos al principio, y por eso te estoy dando estos trucos temprano. Ahora, después de eso, agregamos estilos para body y cambiemos nuestro color de fondo a tiene 101010 Y color a FFF, que es blanco. Guarde este archivo. Ahora agreguemos CSS para nuestro diseño. Así que en nuestro archivo CSS punto app, eliminamos todos los estilos y app y dentro de estos corchetes cul, escribimos display to grid template rows to grid to 80 pixel and auto Entonces la altura de la primera sección es de 80%, y la altura de la segunda sección está en auto. Ya lo sabes bien, y eso es todo lo que necesitamos para la maquetación. Guarde este archivo y eche un vistazo. No conseguimos nuestros grandes estilos. ¿Me puede decir cuál es la razón? ¿Correcto? No importamos archivo CSS de punto de aplicación en nuestro componente de aplicación, y eso es lo que muchos desarrolladores olvidaron hacer. Así que escribimos Import period slash app dot css, guardamos los cambios y echamos un vistazo Mira, obtenemos nuestros estilos. Ahora en la siguiente lección, crearemos nuestra sección Navbar 56. Agregar fuentes personalizadas: Ahora, agreguemos fuente para esta aplicación. Entonces como te dije, tenemos dos formas de agregar fuente en nuestra aplicación react. En primer proyecto, vimos cómo agregar fuente usando CDN Link. Ahora veamos cómo agregar fuente sin conexión. Entonces nuevamente, vamos a usar MonstFont porque esa es mi fuente favorita Así que en nuestro navegador, abrimos una nueva pestaña, y buscamos en Monsaet Google fonts y abrimos este primer Enlace Ahora aquí en la parte superior, tenemos opción Descargar familia. Haga clic en eso y vea Descarga iniciada. Abramos esto en carpeta Descargar y simplemente descomprimirlo desde aquí Ahora vamos a abrir MonsttFolder. Y aquí tenemos este tipo de estructura de carpetas. En esta carpeta estática, tenemos todos los pesos de fuente individualmente. Ahora volvamos a esta carpeta, y aquí tenemos los dos archivos de fuente completos que contiene todo el peso de la fuente. Aquí, no queremos cursiva, queremos fuente regular. Pero el tamaño de esta fuente es bastante grande. Podemos ver que es de 218 KV, que es el tamaño grande para archivos de fuentes. Puede convertir este archivo de fuente en un archivo de fuente de tamaño pequeño. Entonces en el navegador en Nueva Pestaña, buscamos TTF, que es nuestro formato de archivo actual a W FF dos, que es el archivo de fuente más popular para los navegadores web Abre este sitio web de Cloud Convert, y aquí tenemos que seleccionar nuestra fuente. Seleccione la fuente Monster At, ábrala y haga clic en C Convertir. Tomará poco tiempo. Y haz clic en Descargar. Ahora en nuestra carpeta Descargas, podemos ver que el tamaño del archivo se reduce a 82.8 KB, que es casi de 60 a 70% reducido Aquí, renombramos este archivo a Monsratt WFF. Ahora, vamos a comprobar que este formato telefónico está funcionando para todos los navegadores o no. Así que dirígete a caniuse.com, y en la parte superior, buscamos WFF dos Y mira, está funcionando en casi todos los navegadores. Más específico, 97% navegador soporta esta fuente. Así que volvamos al código VS, y en nuestra carpeta assets, creamos una nueva carpeta llamada fonts, y en esa carpeta, simplemente arrastramos y suelta esta fuente. Ahora, veamos cómo podemos aplicar esta fuente en nuestra aplicación. Abra el archivo css de punto índice. Aquí en la parte superior, definimos nuestra fuente. Así que solo escribe en la fase de fuente, y selecciona esta sugerencia automática. Ahora aquí tenemos dos propiedades. La primera es la familia de fuentes, y aquí pasamos nuestro nombre de fuente, que queremos usar. Así podemos escribir aquí fuente importada o cualquier cosa. Por simplicidad, solo escribo Montserrat. En la URL, tenemos que pasar ruta de nuestro archivo de fuente. Entonces en códigos dobles, escribimos periodo slash, tenemos activos En eso, tenemos fuentes, y aquí tenemos nuestra fuente. Ahora, en nuestro cuerpo, agregamos la familia de fuentes a Monseret Sanserif. Recuerda, sea cual sea el nombre que pasemos en esta familia de fuentes, el mismo nombre tenemos que pasar aquí. De lo contrario, no funcionará. Guarda los genes y echa un vistazo. Ver, tenemos respuesta en la fuente. Entonces así es como agregamos fuentes offline en nuestra aplicación. Pero en mi humilde opinión, si es posible, tratar de usar el enlace CDN para agregar fuentes Solo te muestro esto porque algunos clientes quieren agregar su propia fuente para su proyecto. Y así es como puedes agregar estas fuentes. 57. Crear componentes de barra de navegación: Así que vamos a crear nuestra sección Navbar. Ahora bien, este tipo de barra N es muy común en muchas aplicaciones, y además no queremos complicar nuestro componente de aplicaciones. Así podemos definir nuestro Nabar en el componente separado. Entonces en nuestra carpeta fuente, creamos una nueva carpeta llamada components, y dentro de estos, creamos una carpeta más llamada Nabar Dentro de esta carpeta NaBR, creamos el archivo JSX navbar También creamos Navbar punto css archivo. Ahora vamos a crear boilerplate en nuestro componente Nabar y en la parte superior, importamos period Navbar dot css file y guardamos este archivo Ahora volvemos al componente F, conseguimos esta etiqueta Nab y en el lugar de eso, agregamos nuestro componente NaBR y vemos cómo importar obras Guarde este archivo ahora de nuevo a nuestro componente en el lugar de esta DU, pegamos nuestra etiqueta NAO Ahora, agreguemos todos los elementos para nuestro Navar. Entonces, antes que nada, agregamos una etiqueta H una, y escribimos aquí el nombre de nuestra aplicación, que es película Maniac Ahora para agregar tres enlaces, creamos un Du y le damos un nombre de clase, NaBR, enlaces de subrayado Déjame mostrarte un atajo para crear esto. Escribe punto y aquí agregamos nuestro nombre de clase tintas de subrayado NaBR y pestaña de cabeza Verás, obtenemos DV con ese nombre de clase. Esto se llama T que nos ayuda a escribir código primero. Ahora dentro de estos enlaces de Nebar, creamos una etiqueta de anclaje, y escribimos popular aquí Ahora, después de eso, queremos agregar Imoge para eso. Así que en nuestra carpeta de recursos, que descargaste previamente. Y en eso, tenemos proyecto a carpeta, y dentro de él, tenemos carpeta Activos. Ahora arrastra todas estas imágenes a nuestra carpeta de activos. Bueno. Ahora en nuestro componente Number en la parte superior, importamos fuego de aquí vamos dos conjuntos de carpetas y fire dot png. Ahora importemos dos imágenes más para los enlaces mejor calificados y próximos. Duplica este enlace dos veces más y primero cambiamos este fuego a estrella e imagen a punto estrella resplandeciente PNG para último, importar fiesta de fiesta de party phase dot PNG Ahora para agregar estas imágenes, agregamos etiqueta de imagen y pasamos aquí, fuego, y en Alt fire Imoge y también nombre de clase a NabarUnderscore Imoge Ahora vamos a duplicar esta etiqueta de ancla dos veces más y cambiamos el nombre del enlace a mejor valorado e imagen a estrella y lt a estrella Imoge último enlace a próximo e imagen a fiesta y lt a imagen de fase de fiesta Guarde los cambios, y obtenemos aquí error. Podemos ver que es un camino que no está disponible. Entonces aquí en nuestra fase de despedida, tenemos que corregir la ortografía Guarda los cambios y ve, obtenemos nuestros elementos. Ahora, agreguemos estilos para ellos. Entonces, antes que nada, separamos este nombre de aplicación y estos enlaces. Entonces en navbar dot css file, escribimos Navbar, y entre llaves, agregamos display dos flags líneas de pedido al centro, justifican el contenido al espacio entre relleno a cero para parte superior inferior y 30 píxeles para la izquierda y la derecha. Y boto inferior a un píxel, sólido tiene E seis, E seis, E seis Guarde esto y vea que están separados. Ahora después de este NaBR, teníamos el soporte angular Nab, H uno, y en los corchetes del barranco, un tamaño a 30 píxeles y el color dos tiene Ahora, después de eso, agregamos estilos para nuestras etiquetas nga. Así que puntear los enlaces de subrayado NaBR, ángulo, objetivo V, A, y dentro de los corchetes culi, en la visualización a banderas, alinear elementos al centro, tamaño de fuente a 20 píxeles peso de fuente a 500, color a blanco, decoración de texto a ninguno, y relleno a cero y Di estos Niza. Esto se ve bien. Ahora, hagamos pequeño a este Imoge. Entonces agregamos aquí punto nabarUnderscore, Imo g, y en corchetes Coli, agregamos ancho a 25 píxeles, alto a 25 píxeles y margen izquierdo a Guarda los cambios y echa un vistazo. Se ve bien, pero no tenemos nuestros enlaces en fila. Entonces, inspeccionemos esto y veamos aquí nos olvidamos de agregar banderas de visualización para los enlaces de Nevar debido En nuestro archivo CSS, aquí agregamos puntos NBR Underscore Links, y en corchetes Guri, escribimos display to flags y alineamos elementos Guarda los cambios y echa un vistazo. Mira ahora nuestro Nabar luce perfecto. Sé que voy un poco más rápido para SDML y CSS parte porque ya lo sabes 58. Crear un componente MovieList: Ahora, construyamos nuestro componente de lista de películas. Así que creamos una nueva carpeta en la carpeta de componentes llamada Movie List. Y dentro de esta carpeta, creamos un nuevo archivo llamado movilest dot CSS, y también movilest dot y también movilest Ahora agreguemos nuestro código boilerplate por RAFC y en la parte superior, importamos period slash Movist Entonces no nos preocupamos por eso. Ahora, en el lugar de esta DU, agregamos sección y agregamos nombre de clase, lista de subrayado de película Ahora en esta sección, tenemos dos partes. Uno es para nuestra línea de encabezado, que contiene encabezado del último filtro y clasificación y la segunda parte es la lista de autos de películas. Agregamos una etiqueta de encabezado y le damos un nombre de clase, encabezado de lista de películas. Ahora, dentro de esto, primero agregamos a etiquetar y agregamos nombre de clase, encabezado de lista de películas. Ahora, dentro de esto, agregamos nuestro título, que es popular. Y después de eso, queremos agregar a Imoge. Entonces agregamos etiqueta de imagen, y en fuente, pasamos fuego Alt para disparar Imoge y pasamos nombre de clase a Navar subrayado Imog que agregamos Ahora tenemos que importar este fuego Imoge en la parte superior. Importar fuego de aquí vamos dos carpetas arriba activos y aquí conseguimos fire dot png. Vamos a agregar D para nuestro filtro y cortocircuito y darle un nombre de clase MovistFSFS para filtro y cortocircuitado. Ahora, primero, quiero agregar uno desordenado, y dentro de este, agregaremos elemento filtrante Entonces escribimos al punto MV filtro de subrayado, corchete angular, punto, filtro de subrayado de película, elemento de subrayado, multiplicamos por tres, y Ver, aquí obtenemos este código. Este es el poder de Emet. Ahora pasamos aquí ocho estrellas más, siete estrellas más, y seis estrellas más. Ahora, después de esta lista, tenemos que agregar dos cuadros desplegables. Entonces agregamos select dot MV underscore shorting. Y dentro de esto, queremos tres opciones. Ahora para la primera opción, pasamos sort by, que es default, dating, y rating. Ahora podemos simplemente duplicar esta etiqueta de selección, y aquí solo queremos dos opciones. Entonces podemos eliminar esta opción, y aquí escribimos ascendente, y por fin, tenemos descendente. Guarde los cambios, y no obtenemos nada porque olvidamos agregar componente de lista de películas en nuestro componente de aplicación. Entonces en el componente app en el lugar de este contenido principal, agregamos componente de lista de películas. Guarda los cambios y echa un vistazo. Ver, aquí obtenemos nuestros elementos. Ahora, agreguemos estilos para ellos. Así que en mover el archivo CSS de punto ilst, agregamos la lista de subrayado de película de puntos Y en los corchetes, agregamos relleno a diez píxeles para arriba abajo y 30 píxeles para izquierda derecha. Después de eso, establecemos display a flags, Alan items to center, justifique el contenido al espacio entre porque queremos separar encabezado con filtro y ordenar. Después de eso, agregamos margen inferior a cinco píxeles. Ahora agregamos estilos para nuestro encabezado, así que punteamos el encabezado Movist Y en los clipackets agregamos display dos flags, líneas de pedido al centro y tamaño de fuente 226 pixel El color dos tiene refranes FFE 400 y aquí no conseguimos nuestros estilos. Así que vamos a comprobar esto. En nuestro componente de lista de películas, aquí podemos ver que tenemos que agregar estilo para encabezado de lista de películas. En nuestro archivo CSS, cambiamos esta clase de lista de películas a clase de encabezado de lista de películas. Decir los cambios y ver, separamos estas dos partes. Ahora, aquí sé el tamaño de la fuente un poco pequeño. Puedes aumentarlos por tus necesidades. Ahora, vamos a establecer estilos para este filtro y desplegemos. Así que volvamos al código VS, y agregamos aquí la película es FS. Y en los corchetes Cali, agregamos display para marcar líneas de pedido al centro. Ahora aquí hay una cosa. Estamos repitiendo estas dos líneas muchas veces en nuestra aplicación. Ver aquí, aquí, y también usamos en Nabar archivo CSS. Así que vamos a crear clases separadas para estas dos líneas. Así que corta estas dos líneas y abre el archivo CSS de punto índice. Al final, agregamos nueva clase, Alinear subrayado centro, y dentro de ella, pegaremos nuestros estilos Ahora, siempre que queramos agregar estos dos estilos, simplemente podemos agregar esta clase Align Center a ese elemento, y así es como se hace Telvin CS Guarde este archivo, y en el archivo CSS de punto lista de películas, tenemos que agregar la clase Align Center para estos dos elementos. Entonces quitamos estas dos líneas de aquí. Y también eliminar este estilo de clase. Guarde esto. Y en el componente de lista de películas, primero, agregamos Alinear Centro antes de encabezado, y también agregamos Alinear Centro antes de este encabezado. También, para este día y también antes de esta película filtro de subrayado Guarde los cambios, y esto está funcionando bien. Ahora, volvemos a la lista de películas punto archivo CSS, agregamos película de punto, filtro, estilo de lista a nan, un tamaño a 16 píxeles. Ahora agregamos película de puntos, elemento de filtro. Y en los calibrados, agregamos relleno a cinco píxeles y diez píxeles y cursor a puntero Ahora después de eso, agregamos estilo para nuestro menú desplegable. Así que puntear película en cortocircuito y dentro de estos corchetes cul, agregamos border to monja, outline to Alsan Border radius to five pixel font size to 16 pixel font weight to 500, font family to inherit, so it can use Después de eso, altura a 30 píxeles, sumando a cero y cinco píxeles y margen a cero y diez píxeles. Guarda los cambios y echa un vistazo. Mira, obtenemos nuestros estilos. Ahora, por fin, solo quiero mostrar este filtro seleccionado para que el usuario pueda ver qué filtro ha seleccionado. Entonces en componente movilizado, en este ítem de lista, agregamos una clase más llamada active Cambiaremos esta clase activa por filtro activo. Guarda este archivo, y en el archivo CSS, después de este filtro de película IAM, agregamos mover el filtro m punto Activa los corchetes y dentro de este Boer inferior a un píxel sólido tiene E seis, E seis, E seis y peso de fuente a 500 Guarda los cambios y echa un vistazo. Mira, esto se ve hermoso. Ahora, después de esta etiqueta de encabezado, creamos una du más con nombre de clase, tarjetas de subrayado de película En este du, agregaremos todas nuestras tarjetas de películas. Entonces, en la siguiente lección, crearemos este componente de tarjeta de película. 59. Creación de componentes de MovieCard: Ahora, construyamos nuestro último componente que es el componente de tarjeta de película. Así que en la carpeta lista de películas, creamos un nuevo archivo llamado movecard dot CSS, y creamos otro archivo llamado movicardt La razón por la que creamos este componente en MovilistFolder, porque la tarjeta de película es parte del componente de cine También puedes crear una carpeta separada para eso. Depende totalmente de ti. Ahora agreguemos código estándar, y en la parte superior, simplemente importamos el archivo CSS de punto movecard de barra de período Bonito. Ahora en este componente, devolvemos la etiqueta de anclaje porque cuando alguien haga clic en la tarjeta de película, entonces abriremos ese enlace, y le damos nombre de clase a la tarjeta de guión bajo de película Ahora en esta etiqueta de ancla, queremos agregar nuestro póster de película. Así que agrega Etiqueta de imagen y agrega el nombre de la clase al póster de guión bajo de película Ahora busquemos algún póster ficticio para temporal. Entonces, en nuestro navegador, abra una nueva pestaña y busque la imagen del póster de la película, y seleccione cualquiera de ellos imagen y enlace derecho en la imagen y copie la dirección de la imagen. Ahora volvemos al código VS y pega este enlace en la fuente, y en Alt agregamos póster de película. Guarda los cambios, y nuevamente no obtenemos nada porque nuevamente olvidamos agregar este componente de tarjeta de película en nuestro componente de lista de películas. Así que en mover el componente Lista, agregamos aquí componente de tarjeta de película. Guardar cambios, y C, obtenemos nuestro post. Ahora, en nuestra aplicación, cuando colocamos el mouse sobre la tarjeta de la película, queremos mostrar algunos detalles sobre la película como el nombre, fecha de lanzamiento, la calificación y una pequeña descripción Entonces después de este póster, agregaremos una DU con nombre de clase, detalles de guión bajo de película Después de eso, agregamos S tres etiquetas por nombre de película y agregamos nombre de clase para mover detalles de guión bajo, encabezado de guión bajo Y dentro de estos, escribimos el nombre de la película. Ahora, después de eso, agregamos un día con nombre de clase, fecha de guión bajo de película, tasa de subrayado Y dentro de esto, primero agregamos un párrafo en el que mostramos la fecha de estreno de la película, y después de eso, otro párrafo para mostrar calificación. Ahora en el lado derecho de esta clasificación, queremos mostrar el icono de estrella. Entonces agregamos etiqueta de imagen, fuente a estrella, Alt al ícono de calificación y le damos un nombre de clase a subrayado de tarjeta Imoge Ahora tenemos que importar este icono estrella. En la parte superior, importamos estrella de. Aquí vamos a carpetas arriba activos barra estrella punto png. Bueno. Ahora al final, queremos mostrar una pequeña descripción. Después de este dU agregamos otra etiqueta de párrafo y le damos un nombre de clase a película bajo descripción escocés Dentro de esto, agregamos texto Dummi, BLR 15 y presionamos El ging es y echa un vistazo. Verás, obtenemos nuestros elementos feos. Entonces en la siguiente lección, los haremos hermosos. 60. Estilizar el componente MovieCard: Así que agreguemos rápidamente estilos para el componente de tarjeta de película. En primer lugar, cierro todos los demás expedientes. Ahora en la tarjeta de película dot archivo CSS, dot movie Card. Y entre corchetes, agregamos ancho a 200 píxeles, alto a 300 píxeles, margen a 15 píxeles, desbordamiento al radio de agua oculto a diez píxeles, color a blanco. Y caja de sombra a cero píxel, tres píxeles, ocho píxeles para desenfoque, RGBA, cero, cero, cero, 0.25 Ahora, después de eso, agregamos póster de película de punto y dentro de él con 200% y altura 200% Di los cambios y mira, no conseguimos nuestros estilos. Averiguemos el tema. Así que haga clic derecho sobre nuestra tarjeta y vaya a inspeccionar. Seleccione esta etiqueta de anclaje y vea aquí nuestro ancho y alto no se aplican. Y nos está sugiriendo que intentemos establecer la visualización a algo distinto a en línea porque si nuestro elemento se establece en línea, entonces eso impedirá la propiedad width. Pero hay otra manera de resolver esto. Podemos hacer nuestras tarjetas de películas debido a las banderas. Así que en el archivo CSS de puntos de lista de movimiento, agregamos tarjetas de película de puntos. Y dentro de esto, escribimos exhibición a banderas. Envoltura flexible para envolver y justificar el contenido para espaciar uniformemente. Establezca los cambios y vea, obtenemos nuestra tarjeta aquí. Ahora tenemos que mostrar nuestra sección de detalles de películas. Entonces aquí necesitamos usar posición absoluta. Entonces, antes que nada, en el archivo CSS de la tarjeta de película, hacemos nuestro elemento de tarjeta de película, que es nuestro elemento padre de estos detalles de la película y establecemos su posición en relativa. Y después de eso, en la parte inferior, agregamos detalles de película de puntos, y dentro de estos, agregamos posición a top absoluto a cero. Ancho 100%, alto a 100% y relleno de diez píxeles. Di esto, y aquí tenemos los detalles de esta película. Ahora, vamos a colocar este texto en mosaico. Así que volvamos a nuestro archivo CSS y agregamos aquí los detalles de la película de punto agregando y dentro este un tamaño a 16 píxeles y color dos tiene FFE 400 Después de eso, agregamos película de puntos, fecha, tasa, y dentro de los corchetes scur, mostrar para marcar, alinear elementos al centro Oh, perdón, ya creamos clase para esto. Entonces eliminamos estos dos estilos, y agregamos justificar contenido al espacio entre tamaño de fuente a 12 píxeles peso de fuente a 500 margen a cinco píxeles para arriba abajo y cero para izquierda derecha y color tiene FF E 400. Ahora, vamos en el componente de tarjeta de cine primero agregue la clase Align Center antes de esta clase, lo contrario, la olvidaremos. Guarde este archivo y vuelva a nuestro archivo CSS. Ahora, después de eso, teníamos la tarjeta de puntos Imog y dentro de esta, establecíamos el ancho en 20 píxeles, altura en 20 píxeles y el margen izquierdo en cinco Y por fin, nosotros en ME Underscore descripción, y en ella tamaño de fuente a 12 Excel y estilo de fuente a Italia Di los cambios y echa un vistazo. Mira, aquí tenemos nuestros estilos, pero necesitamos hacer algunos cambios. Primero, queremos agregar poco fondo para estos detalles se así que un texto se vea claro y también queremos colocarlo en la parte inferior. Así que volvamos a Vacde y aquí en la clase de detalles de la película, agregamos imagen de fondo al gradiente lineal, y dentro de él, pasamos dos colores para degradado Entonces RGBA, 00, cero, cero, RGBA, 00, cero, uno Estos dos son de color negro, pero primero uno con opacidad cero y el segundo con una opacidad Después de eso, teníamos display to flags, flag direction to column y justificar contenido para terminar. Schans y tomar un al. Ver ahora nuestros detalles se ven muy claros, y ese es el poder del gradiente. Ahora aquí, no me sale ningún efecto para esta fecha y línea tarifaria. Entonces veamos qué hicimos mal. Volver a nuestro componente de tarjeta de película. Aquí podemos ver que tenemos nombre de clase, subrayado de película, fecha, tasa de subrayado Probablemente me equivoque en esta ortografía. Inspeccionemos nuestra tarjeta y veamos el DU y veamos. Aquí no estamos obteniendo estilos para eso. Así que volvamos a nuestro archivo CSS, y corrijo nuestro nombre de clase, vea los cambios y eche un vistazo. Ver, obtenemos nuestros datos correctamente. Ahora queremos mostrar estos detalles solo cuando coloquemos esta tarjeta, y también queremos hacerla grande cuando flotemos y también queremos hacerla grande cuando flotemos Entonces en la parte superior, agregamos esa tarjeta de película llamada Hover Effect y dentro de esto, simplemente agregamos transform a escala 1.08 Ahora en los estilos de detalle de película, agregue una propiedad más, opacidad a cero por defecto Y cuando hoo nuestra tarjeta de película, entonces pondremos su opacidad en una Así que dot movie card, call and hoover dot MVE Y dentro de esta opacidad a uno. Tan simple como eso. Di pandillas y échale un vistazo. Mira, aquí conseguimos lo que queremos. Ahora bien, este efecto es muy repentino. Queremos que esto sea suave. Entonces, en nuestros estilos de tarjeta de película, tuvimos una transición a todos 0.2 segundos está adentro hacia afuera. Y también, lo mismo aplicamos a los detalles de la película. Di los cambios y echa un vistazo. Ver, aquí obtenemos efecto suave. Entonces aquí tenemos todos los componentes listos con estilos. Ahora solo necesitamos agregar funcionalidad a nuestro proyecto. Si continuamente estás viendo este curso, entonces tómate un descanso de diez a 15 minutos y toma un poco de aire fresco. Cuida tus ojos, y te veo en la siguiente lección. 61. Qué es una API: Antes de comenzar a llamar a una API, entendamos qué es EPI API significa interfaz de programación de aplicaciones, y es una forma para dos programas se comuniquen entre sí. Entendamos esto con el ejemplo. Aquí hay un restaurante. Estamos sentados en la mesa uno y queremos pedir algo de comida. En este caso, ¿qué vamos a hacer? No vamos directamente a la cocina y pedimos nuestra comida al chef. En lugar de eso, llamaremos a un mesero. Mesero tomará nuestro pedido y luego se lo dará a la cocina Después de eso, la cocina comienza a hacer proceso de nuestro pedido y darle comida al mesero. Y luego mesero entregará la comida a nuestra mesa. Entonces aquí, el mesero es como mensajero que toma nuestra solicitud y pasa la solicitud a nuestro destino Y luego recibirá el mensaje de respuesta del destino y nos lo devolverá. Así que imagina esta mesa en que estamos sentados es nuestra aplicación front-end. Queremos obtener algunos datos sobre la ropa, por lo que llamaremos a API, que es nuestro mesero y enviaremos solicitudes para comer Ahora, API transferirá esa solicitud al servidor o base de datos, que es nuestra cocina, y ese servidor o base de datos compartirá la respuesta, que son los datos que queremos, y la API entregará los datos de respuesta a nuestro front-end. Entonces ahora entiendes lo que es API, EPI es una forma para dos programas se comuniquen entre sí Déjame explicarte con otro ejemplo del mundo real. Entonces probablemente visites el sitio web que reserva los boletos de avión, derecho. Entonces en esa aplicación, digamos Emirates escribimos nuestra ciudad de salida. Digamos Londres y lugar al que llegar, digamos Mumbai. Y ingresamos nuestras fechas tipo de asiento, y buscamos los vuelos, y mostrará detalles para vuelos. Eso es posible gracias a la API. Llamamos una API, y esa API obtendrá estos datos del servidor y nos dará esos datos. Tan simple como eso. Aquí hay una cosa. Como estamos utilizando este sitio emirato, solo estamos obteniendo los detalles del vuelo de los vuelos emiratos. Pero hay algunos sitios web en los que busca los detalles de los vuelos y devolverán múltiples vuelos con múltiples compañías aéreas. ¿Cómo es eso posible? Muchas empresas lanzan su API para uso público, y nosotros llamamos a esa API como API pública. Mediante el uso de esta API pública, podemos acceder a sus datos. Ahora como los datos están abiertos públicamente, la empresa tiene que usar alguna protección. Y para la protección, muchas API públicas tienen su clave API. Entonces, cuando nuestro front-end envía solicitudes a API, front-end necesita enviar ApiKey con esa solicitud Después de eso, API pasará esa solicitud al servidor, y antes de tomar la solicitud, el servidor solicitará a APIKe para acceder a los datos Entonces nuestra API pasa nuestra ApiKey al servidor, servidor verifica esa clave si es auténtica, solo entonces el servidor devolverá los datos De lo contrario, el servidor devuelve error, acceso denegado. Tan simple como eso. Ahora podría preguntarse, ¿cómo podemos obtener ApiKey si queremos acceder a API pública Para obtener la clave API, tenemos que registrarnos en su sitio web, qué empresas proporcionan la API, y nos enviarán ApiKey En la siguiente lección, obtendremos nuestros datos ApiKey para películas 62. Generar la clave de API: Entonces en nuestro proyecto maniaco cinematográfico, vamos a utilizar API pública de TMDB para obtener los datos de las No estamos creando la API aquí. Solo estamos usando la API pública. La razón por la que quiero enseñarte API pública es hoy en día, es característica muy común de la aplicación. Por ejemplo, alguna aplicación, por lo que la información meteorológica y lo que están usando solo API pública de otra compañía. Al usar API pública, puedes hacer que tu aplicación sea más útil. Y también, si estás solicitando trabajo de desarrollador React, entonces al mirar tu proyecto, entrevistador también sabe que también puedes usar APIs públicas Entonces veamos cómo podemos obtener la clave API TMDB. Así que dirígete al sitio web de TMDB y ve a más Opción y opción API abierta Aquí podemos ver esta opción de enlace API para registrarse en ApiKey Abra eso, y aquí podrá ver requiere una cuenta de usuario TMW para solicitar una ApiKey Entonces, consigamos nuestra ApiKey. Así que haz clic en unirse a TMW Link y rellena este formulario con tus datos Nombre de usuario Cb 24, Escriba su contraseña. De nuevo, escribe confirma contraseña e ingresa tu cuenta de correo electrónico rea y haz clic en registrarte. Ahora tenemos que verificar nuestra cuenta de correo electrónico. Así que abre tu correo electrónico y abre el correo de TMW y haz clic en Activar mi cuenta Ahora podemos cerrar esto. Ahora podemos iniciar sesión en nuestra cuenta. Así que escribe tu contraseña aquí y haz clic en Iniciar sesión. Ver, redireccionamos a nuestro panel de control. Ahora aquí podemos ver que tenemos que solicitar la clave API. Así que haz clic aquí y selecciona desarrollador. Y acepta este acuerdo. Puedes leer eso si quieres. Ahora tenemos que rellenar este último formulario para APIke. Sé que este es un proceso poco largo, pero nos están dando datos útiles, y este proceso es muy común para obtener APIke de cualquier compañía como Google o Facebook En primer lugar, seleccione el tipo de uso, nombre de la aplicación personal a la película Maniac, URL de la aplicación al host local Columna 5173 resumen de la aplicación a la película Miniac es la aplicación que tan popular, mejor valorada y próximos Ahora después de eso, escriba su nombre, apellido, número de teléfono, dirección uno, dirección dos, ciudad, estado, código postal, y al final, haga clic en enviar, y tenemos que escribir dirección incorrecta. Ahora, haga clic en enviar y vea aquí obtenemos con éxito nuestra clave API. Ahora veamos cómo podemos obtener API. Así que abre este enlace de documentación y aquí tenemos que ir a la sección de referencia de API. Y en esta documentación, explican todos y cada uno de los endpoints de su API Pero solo queremos obtener API de película. Así que desplázate hacia abajo en esta sección y ve a la sección detallada de la película. Ahora aquí obtenemos esta popular API mejor calificada y próxima. Entonces abramos popular ahora en el lado derecho, podemos ver los detalles sobre esa API. Tenga en cuenta que aquí nuestro método SDTP es GT. Discutiremos estos métodos SDTP en próximas secciones en las que veremos cómo podemos llamar a nuestra API privada Por ahora, solo recuerda, método GET está acostumbrado a obtener los datos de la API, así de simple como eso. Ahora no te preocupes ahora solo copia esta API desde aquí y en nuestra nueva pestaña, abrimos esa API. Consulta aquí devuelve un error llamado clave API no válida, y se te debe otorgar una clave válida. Básicamente, se está pidiendo clave API. De vuelta a nuestra pestaña de configuración de M API, aquí podemos ver que tenemos esta muestra de API, así que simplemente copiamos este signo de interrogación y la variable de clave API. Ahora en nuestro TRL, pasamos esa ApiKey como cadena Squery Y mira aquí estamos obteniendo los datos de películas populares. Si te preguntas cómo puedes ver tus datos en este hermoso formato, entonces tienes que instalar una extensión de Chrome llamada JSON Viewer Pro. Entonces enhorabuena. Creas tu primera clave API. 63. Llamada a API con el método Fetch: Ahora, veamos cómo podemos llamar a esta API en nuestra aplicación usando el método Fetch Confía en mí, es realmente simple y fácil. Ahora, antes de llamar a API, tenemos que decidir en qué componente necesitamos llamar API. Entonces necesitamos datos de películas en nuestro componente de lista de películas, y usando esos datos, los mostraremos en tarjetas de películas. Ahora aquí queremos llamar a API cuando este componente se rinda. ¿Recuerdas qué gancho usaremos para ejecutar la lógica en el render de componentes? Derecha, usaremos gancho de efecto. Ahora, como ya les dije, el efecto de uso se usa para tres variaciones diferentes. Aquí necesitamos segunda variedad, que es pasar matriz vacía en array dependencias porque queremos llamar solo a API una vez cuando este componente de lista de películas obtiene rendición. Así que vamos a escribir aquí use effect y presione tab. C, se importa automáticamente en la parte superior. Ahora en efecto, sabemos que tenemos que pasar dos argumentos. La primera es para la función de devolución de llamada, que es la función que queremos ejecutar, y la segunda es la matriz de dependencias Aquí pasamos matriz vacía. Sencillo. Ahora en esta función de devolución de llamada, escribiremos nuestra lógica para llamar a API Entonces, para llamar a API, estamos usando el método fetch Si ya trabajaste en JavaScript, entonces ya conoces este concepto. Y si no conoces el método fetch, no te preocupes, mira esto y lo entenderás Entonces aquí agregamos el método fetch. Ahora en esta función en la primera posición, tenemos que escribir nuestra URL API. Volver al navegador, y aquí copiamos nuestra URL API. Y en nuestro método patch, en códigos dobles, lo pegaremos. Ahora bien, esta expresión devuelve una promesa. Básicamente, promesa significa que obtendremos el resultado en el futuro, no de inmediato. El resultado pueden ser nuestros datos, o si algo salió mal, obtendremos un error, pero definitivamente obtenemos cualquier cosa. Déjame mostrarte a lo que me refiero. Así que vamos a almacenar esto en la variable llamada respuesta. Y después de eso, simplemente consola dot log esta respuesta. Guarda los genes y echa un vistazo. Abre Consola y mira aquí nos prometemos. Si ampliamos esta promesa, aquí conseguimos que se cumpla el estado de promesa porque esta API está funcionando. Y en este resultado de promesa, obtenemos una respuesta de API. Y en este cuerpo de respuesta, obtendremos nuestros datos y otros detalles sobre la llamada API. Para manejar las promesas de JavaScript, tenemos dos métodos, luego method y acing wait. No te preocupes. Veremos ambos uno por uno. Entonces, antes que nada, eliminemos esta variable de respuesta y también consola dot log. Y después de este método fetch, agregamos punto DN Ahora en este método diez, tenemos que pasar la función de devolución Y aquí obtenemos nuestra respuesta como función de flecha de parámetro. Y ahora vamos a simplemente consola dot log esta respuesta. Guarda esto y echa un vistazo. Ver, aquí obtenemos un montón de propiedades relacionadas con nuestra llamada API, como status, URL, body. Este organismo tiene todos nuestros datos. Ahora se podría pensar, ¿por qué no podemos ver eso? Es porque tenemos que convertir esos datos en formato JSN Entonces en el lugar de esta respuesta, escribimos response dot JSON. Guarde esto y vea que nuevamente nos prometemos aquí. Y en este resultado de promesa, obtenemos los datos de nuestras películas. Para acceder a estos datos, tenemos que devolver response dot json desde esta función. Y por eso, conseguimos otra promesa. Ahora, nuevamente usamos entonces el método para manejar esa promesa. Y dentro de esto, escribimos función callback y obtenemos aquí los datos como parámetro, y simplemente consultamos dot log estos datos Guarda esto y echa un vistazo. Verás, obtenemos datos de películas en estos resultados, así que está funcionando. Ahora bien, este método de parche con dos métodos que se ve un poco feo. Veamos el segundo método de manejo de la promesa. Eliminemos estos dos métodos que. No los necesitamos. Ahora antes de este método de parche, agregamos una espera, lo que significa que nuestro código esperará a que esta promesa complete la ejecución. No conoces estos conceptos, entonces te recomiendo encarecidamente ver Fetch Method y Aync Rona Java Script Estos son conceptos realmente muy importantes. Ahora para usar esperar, tenemos que hacer nuestra función asíncrona Entonces aquí, después de nuestro efecto de uso, crearemos una nueva función llamada Fetch movies Ahora para hacer esta función asíncrona, tenemos que pasar una palabra clave antes de este Ahora vamos a mover nuestro método fetch a esta función. Bueno. Ahora sabemos que esta expresión devuelve respuesta. Así que vamos a almacenar eso en la variable llamada respuesta. Y después de eso, simplemente consultamos o registramos esa respuesta. Ahora, no olvides llamar a nuestra función de películas de parche en nuestro efecto de uso. Guarda los genes y echa un vistazo. Refresca la página y verás que obtenemos la misma respuesta que obtenemos en nuestro primer método entonces. Entonces tenemos que convertir esa respuesta en formato JSON. Así que escribimos aquí respuesta punto JSON. Y esto volverá de nuevo, prometo. Entonces volveremos a escribir aquí wait, y vamos a almacenar esos datos JSN en variable llamada data Y al final, vamos a la consola dot registrar estos datos. Guarda los genes y echa un vistazo. Mira aquí obtenemos nuestros datos. Y al usar acing esperar, nuestro código se ve limpio. Así que siempre que queramos mostrar los datos de la llamada API, seguiremos este método. Si tienes poca confusión, entonces no te preocupes con la práctica, tu confusión desaparecerá. Y agregué una sección completa, especialmente para llamar a API. Así que no te preocupes por eso. 64. Ejercicio para MovieCard: Ahora es el momento de poco ejercicio. Entonces, en la lección anterior, obtenemos los datos de nuestras películas. Ahora, hay que mostrar los datos en múltiples tarjetas. Aquí hay algunas propiedades que tienes que usar. La pista es, tienes que usar UTT Hook por alguna razón. Así que dedique algo de tiempo y trate de resolver este ejercicio. Y después de eso, ven y mira la solución. 65. Solución para este ejercicio: Entonces veamos la solución de este ejercicio. Espero que intentes resolver eso. Entonces, antes que nada, en la parte superior, crearemos una variable de estado para almacenar los datos de esta película. Entonces escribe el estado de uso y presiona tabulador, voy a importar el uso en la parte superior. Y ahora escribe usa fragmentos de estado, películas y películas de set Y como valor por defecto, pasamos array vacío. Ahora en el lugar de este registro de puntos de consola, simplemente usamos películas de conjunto y almacenamos aquí los resultados de puntos de datos porque estamos obteniendo una matriz de películas en el resultado de puntos de datos. Ahora, vamos a mostrar estas películas en nuestro componente de tarjeta de películas. Así que aquí estamos en culibackets, películas punto MAPA. Y dentro de esto, obtenemos un solo elemento de película, función de flecha, y devolvemos componente de tarjeta de película. Ahora recuerdas cada vez que usamos el método map, tenemos que pasar el valor uni como clave. Agregamos clave y pasamos aquí mover el ID de punto, que es único para cada película. Ahora, aquí tenemos que pasar los detalles de cada película, que queremos mostrar en nuestro componente de tarjeta de películas. En el lugar de pasar cada detalle individualmente, podemos pasar todo el objeto en una variable. Déjame mostrarte a lo que me refiero. Simplemente pasamos aquí, película equivale a, y pasamos aquí cada elemento de película. Guarde este archivo y abra el componente de tarjeta de película. Y aquí podemos desestructurar nuestros apoyos cinematográficos. Ahora, antes que nada, vamos a mostrar todo el texto. Entonces en el lugar de este nombre de película, escribimos move dot título de subrayado original En el lugar de esta fecha, fecha subrayado de estreno de película Calificación para mover tasa de puntos, promedio de subrayado. Y descripción de la película para mover visión general de puntos. Guarda esto y mira aquí obtenemos nuestros datos. Pero esta descripción de la película es muy larga. Entonces, primero resolvamos esto. Si resuelves este ejercicio a este punto, créeme, lo estás haciendo realmente genial. Entonces hay muchas maneras de hacerlo. Simplemente agregamos aquí método de corte de punto y pasamos cero y 100 y después de eso, más en códigos dobles punto punto punto punto. Entonces, básicamente, la función slice solo mostrará las primeras cien letras, y después de eso, mostramos tres puntos. Guarde estos y vea que obtenemos esta bonita descripción. Ahora, cambiemos nuestro cartel. Así que ve a la pestaña de configuración y abre la documentación de la API TMDB y aquí en la sección de imágenes, abrimos este paso básico Aquí mencionan cómo podemos agregar imágenes path. Así que simplemente copia esta URL de imagen, y en el lugar de nuestra imagen codificada, agregamos corchetes Cully, backticks y simplemente pegamos aquí esa Ahora en esta URL, solo necesitamos cambiar esta ID de imagen. Por lo que eliminamos esta ID de imagen y también eliminamos una barra diagonal y simplemente agregamos corchetes de dólar Cali, movemos punto Poster Subrayado PAT. La razón por la que eliminamos esa barra diagonal porque ya está disponible en la variable de ruta de guion bajo póster Guarda los cambios y echa un vistazo. Mira, aquí tenemos nuestros carteles de películas. Queremos abrir la página oficial de esa película en el sitio web de TMW cuando hacemos clic en Tarjeta de película Así que aquí en nuestra etiqueta de anclaje en HRF, agregamos de nuevo llaves, backticks, y aquí pasamos HTTP como Colmlaww película db.org slash MovLaTlar c Queremos abrir este enlace en Nueva Pestaña. Agregamos aquí, objetivo es igual a subrayado en blanco. Guarda los cambios y echa un vistazo. Da click en cualquiera de las tarjetas y verás que se abrirá en Nueva Pestaña. Perfecto. Aquí, completamos nuestra parte básica de esta aplicación. Espero que sea una experiencia divertida y de aprendizaje para ti. Si tienes dudas, puedes preguntar en la sección de preguntas y respuestas. Ahora en la siguiente sección, comenzaremos a implementar características de filtro y cortocircuito 66. Sección 07: funciones de filtrado, clasificación y modo oscuro: Bienvenido a la Sección s del curso Ultimate React. En esta sección, vamos a ver cómo podemos implementar el filtrado, la clasificación y una funcionalidad bonus, lo que hará que nuestra aplicación se destaque entre la multitud, que es la característica de modo oscuro y claro. Estoy muy entusiasmado con esto y espero que tú también lo estés. Entonces comencemos esto. 67. Filtro vs. clasificación: Antes de comenzar a implementar filtro y la funcionalidad corta, permítanme aclarar la diferencia básica entre el filtro y las características cortas. Así que usamos la funcionalidad de filtro para filtrar algunos datos. Por ejemplo, en nuestra aplicación, si hacemos clic en la calificación de ocho estrellas más, entonces solo deben mostrar aquellos registros cuya calificación sea superior a ocho estrellas. Entonces estamos filtrando otros datos de películas. Ahora, por otro lado, el cortocircuito es para organizar los datos Ejemplo, en nuestra aplicación, si seleccionamos filmados por fecha, entonces tenemos que reorganizar los datos de nuestras películas para que la funcionalidad esté siempre arreglando los datos en el orden No eliminará ningún dato, y eso es lo que llamamos cortocircuitos. Entonces, en palabras simples, filtrado es que estamos guardando solo datos útiles, y el cortocircuito es que estamos manteniendo los datos en algún orden La razón por la que te explico esta es esta explicación te ayudará a entender e implementar claramente la lógica. 68. Implementación de la función de filtro: Entonces antes de comenzar a escribir lógica para el filtro, primero, necesitamos obtener el filtro seleccionado actual. Entonces, después de este estado de película, creamos un estado de uso más y le damos un nombre, calificación media y una calificación media establecida. Y como valor por defecto, pasamos cero. Ahora lo que queremos hacer es cuando hacemos clic en este ítem de la lista, entonces estableceremos nuestra calificación media a esa tasa. Es realmente simple. Déjame mostrarte. Entonces haz clic aquí, y si tienes Windows, mantén presionado Alt o si tienes Mac, luego mantén presionado Opción. Y ahora da click aquí y aquí. Mediante el uso de estos, podemos crear múltiples cursor, y agregamos aquí al evento clic, flecha, función de filtro de mango. Presione SCA para eliminar múltiples cursor y simplemente pase aquí clasificando ocho, siete y seis Ahora definamos esta función. Podemos minimizar otras funciones como esta. Esta técnica siempre uso cuando escribo más líneas de código. Ahora, después de esta función, const handle filter, y aquí obtenemos rate, arrow function, y dentro de esta primera establecemos la calificación Min a esta tasa Ahora bien, ¿recuerdas qué método usaremos para filtrar datos? Bien, es método de filtro. Eso ya lo sabes. Bonito. Así que simplemente escribimos películas dot Filter. Y dentro de esto, obtenemos cada función de error de película, y aquí tenemos que pasar condición. Mover punto voto subrayado promedio mayor o igual a la tasa. Tan simple como eso. Ahora, este método de filtro devolverá una nueva matriz. Así que almacenamos eso en la variable llamada filtro. Y ahora podemos configurar películas y pasar aquí película filtrada. Guarda los cambios y echa un vistazo. Ahora antes de que revisemos nuestra funcionalidad, noto en esta película los detalles, no obtenemos calificación. Entonces arreglemos esto. Abra el componente de tarjeta de película y desplácese hacia abajo hasta los detalles de la película. Aquí tenemos que cambiar esta tasa promedio para votar promedio. Guarda los cambios y mira, aquí obtenemos nuestra calificación. Ahora, haga clic en Filtro. Digamos siete y veamos que está funcionando. Ahora, da clic en ocho, y también está funcionando. Pero aquí hay un error importante. De nuevo, haga clic en siete o seis. No va a funcionar. Déjame explicarte lo que está pasando aquí. Entonces, cuando seleccionamos calificación siete más, esta función de filtro de mango se ejecutará. Dentro de esto, nuestro estado de tasa media se actualizará con siete. Después de eso, este método de filtro filtrará películas y configuramos esas películas en esta función de película establecida. Ahora bien, si haces clic en calificar seis más, entonces este método de filtro filtrará solo los datos previamente filtrados, que todos son siete más calificación en lugar de usar nuestras 20 películas originales, y ese es el problema. Vamos a resolver esto. La solución es que originalmente configuraremos todas las películas en esta variable de estado de película desde API y después de eso, no tocaremos esa matriz. Creará una variable de estado más y almacenará nuestras películas en esa variable. Y cuando queramos filtrar nuestros datos, obtendremos datos de nuestro estado original de película y luego almacenaremos nuestros datos de filtro en nuestra nueva variable de estado. Sé que esto es un poco confuso, pero solo ve esto y lo entenderás. Entonces aquí creamos una variable de estado más y le damos un nombre filtrar películas y establecer películas de filtro. Y como valor predeterminado, pasaremos array vacío. En primer lugar, tenemos que llenar estas matrices de películas de filtro cuando llamamos a nuestra API. Entonces duplicamos la línea set movies y pasamos aquí set filter movies. Entonces estas películas filtrantes y películas son ambas iguales. Ahora, en la función de filtro de Handel en el lugar de las películas del set, habíamos establecido películas de filtro Entonces no estamos metiendo con la matriz de películas originales. En cambio, solo lo estamos usando para almacenar datos originales. Ahora en la parte inferior, tenemos que usar películas de filtro en el lugar de la matriz de películas. Di los cambios y echa un vistazo. Seleccione siete, luego ocho, luego seis, y C. Ahora está funcionando correctamente. Ahora, si seleccionamos el filtro seis, entonces si volvemos a hacer clic en ese filtro, queremos mostrar todas nuestras películas. Vamos a implementar esto. Aquí en la función de filtro de mango, agregue si la tasa de condición es igual a la clasificación media. Y dentro de esto, primero, estableceremos la calificación media a default, que es cero, y después de eso, estableceremos películas de filtro a nuestras películas originales. Y de lo contrario atropellaremos esta lógica. Tan simple como eso. Guarda los cambios y echa un vistazo. Haga clic en la calificación ocho, y nuevamente, haga clic en la calificación ocho. Verás, recuperamos los datos. Entonces está funcionando ahora. Ahora, aquí hay un último cambio. Queremos mostrar el filtro seleccionado actual. Así que volvamos al código VS, y en el lugar de esta clase de cadena, agregamos corchetes Ci, y aquí agregamos condición quiero decir calificación igual a ocho. Si es cierto, entonces volveremos a clases, elemento de filtro de película y active else devolvemos solo elemento de filtro de película. Vamos a copiar esta expresión y pegarla para estos dos filtros. Y solo cámbiate aquí siete y seis. Di los cambios y echa un vistazo. Ver, aquí obtenemos esta línea de filtro activa. Se puede ver lo sencillo que es implementar la función de filtro. Ahora, aquí en nuestro filtro de películas, este es un proceso repetible Así podremos separar nuestro componente de película de filtro y eso lo haremos en la siguiente lección. 69. Crea una sección de filtro resuable: Entonces, en lugar de simplemente poner este elemento de la lista en un componente separado, pondremos toda esta lista sin ordenar en el nuevo componente Cortemos esto y en nuestra carpeta de lista de películas, creamos un nuevo componente llamado grupo de filtros punto JSX Ahora aquí agregamos nuestro repetitivo y simplemente devolvemos nuestra lista debajo Ahora en este componente, necesitamos estas dos propiedades, Min escritura y manejar la función de filtro. Entonces, ¿cómo podemos conseguirlo? ¿Verdad? Al usar props, puedes ver que reaccionar es muy sencillo Guarde este archivo y vuelva a nuestro componente de lista de películas. Y aquí agregamos componente de grupo de filtros. Ahora dentro de esto, pasamos calificación de hombre, equivale a calificación media. Y para el filtro de mango, pasamos apoyos en la camarilla de clasificación es igual a manejar el Puedes ver aquí estamos usando estos nombres relacionados porque esa es la mejor práctica para desarrollador, y podemos trabajar mejor con otros desarrolladores también. Guarde esto. Y ahora en el componente de grupo de filtros, en los probs, lo desestructuramos y obtenemos aquí calificación media y en calificación clic Ahora, reemplacemos esta función de filtro de mango, presione Control más D o Comando más D para seleccionar exactamente el mismo código, y solo escriba aquí en calificación, haga clic. Guarda los cambios y echa un vistazo. Ver que sigue funcionando. Ahora, una cosa más quiero cambiar en este componente de grupo de filtros. Entonces hoy, solo queremos mostrar tres filtros. Mañana, si decidimos que queremos agregar cinco más cuatro más o nueve estrellas más, entonces tenemos que duplicar varias veces este elemento de la lista, y esa es la mala práctica. Así que podemos usar array para eso. Entonces un componente de lista de películas y agregamos aquí uno más props llamados ratings es igual a en corchetes Cali, agregamos array, y dentro de estos, agregamos ocho, siete y seis Entonces, si quieres agregar o eliminar un valor de filtro, entonces simplemente podemos hacerlo usando esta matriz de clasificación. Guarde este archivo y vuelva a filtrar el componente del grupo en la parte superior obtenemos calificaciones. Ahora, después de nuestra lista de nombres, agregamos Calibrackets, calificaciones Llegamos aquí la función de error de tasa única, y devolvemos esta etiqueta de elemento de lista. Ahora, en el lugar de este ocho codificado duro, agregamos tasa aquí, también tasa y aquí también tasa de corchetes Ci. Ahora, aquí nos falta una cosa en el método de mapa. ¿Me lo puedes decir? Derecha. Es propiedad clave. Entonces pasamos clave igual a tasa O. Aquí, nuestras tarifas son únicas, y por eso podemos pasarla como clave. De lo contrario, agregaremos índice. Ahora, eliminemos estos dos elementos de la lista. No los necesitamos, guardarlos y ver qué tan limpio se ve nuestro código usando este método de matriz. 70. Manejo de la selección de ordenación: Veamos cómo manejar la selección de clasificación. Entonces, antes que nada, aquí tenemos que crear una variable de estado para almacenar los detalles de clasificación. Así que el estado le da una toma de nombre y establece el tipo. Ahora como valor por defecto, pasamos aquí objeto. Este objeto tiene dos propiedades. El primero es comprar y lo configuramos a default y order a ASC, lo que significa ascendente En esta primera propiedad de compra, podemos agregar shot by date o shot by rating. Y en orden, almacenamos ascendentes y descendentes. En nuestra primera etiqueta de selección, pasamos nombre para comprar, primer valor a default. Segundo valor para liberar fecha de subrayado y tercer valor para votar promedio Ahora en la segunda etiqueta de selección, pasamos nombre a pedido, primer valor a ASC y segundo valor a DSC, que es descendente Ahora se podría pensar por qué pasamos sólo estos valores. No te preocupes por eso. Te lo explicaré más adelante. Por ahora, solo nos enfocamos en manejar esta selección. ¿Recuerdas cómo manejamos múltiples entradas usando la misma función? Apliquemos ese truco aquí. Pasamos aquí un evento, un cambio equivale a manejar corto. Y valor a tiro punto comprar. Y también para este selecto, pasamos el mismo evento de cambio para manejar Corto. Y valor a orden de punto corto. Ahora definamos rápidamente esta función de mango corto. Después de esta función de filtro de mango, definimos nueva función llamada handle short equals to here we get event object, arrow function. En esta función, primero, obtendremos el nombre y valor de la entrada actual. Así C objeto, nombre valor es igual a E objetivo. Y después de eso, llamamos set sort. Primero, obtenemos el valor anterior, la función de flecha. Y aquí simplemente devolvemos objeto. Y en eso sumamos valores anteriores usando operador spread, y después de eso, entre corchetes, nombre Callan valor, simple como eso Ahora incluso podemos hacer que este código sea más corto. Entonces yo de la función, queremos devolver objeto, entonces podemos eliminar este retorno y también eliminar el corchete C y envolver nuestro objeto entre paréntesis porque si dirigimos a las corchetes, entonces nuestro código entiende que los corchetes ci es bloque de código Ahora, veamos que obtenemos nuestro valor en esta variable corta o no. Así que simplemente consultamos dot log este corto, guardamos los cambios y echamos un vistazo. Abra Console y seleccione la fecha de este menú desplegable y vea que está establecida para la fecha de lanzamiento. Después de eso, seleccionamos descendente, y aquí también lo obtenemos. Ahora, aquí hay un pequeño tema. Siempre que queramos ver el estado de alguno de nuestros componentes, entonces tenemos que consultar o registrar esa variable de estado, lo cual es poco aburrido. En la siguiente lección, usaremos herramienta de depuración para la aplicación react 71. Depuración de aplicaciones React: Entonces, para depurar la aplicación react, utilizaremos la extensión de navegador más popular llamada React Developer Tools Así que abre una nueva pestaña en tu navegador y busca Chrome Web Store. Abre el primer enlace. Y en este cuadro de búsqueda, escribimos React Developer Tools. Si estás usando otro navegador, puedes buscar directamente en extensión Google React Developer Tools para ese navegador. Se puede ver esta extensión descargada por 4 millones de usuarios, por lo que es bastante popular. Ahora da clic en AtTucROM y dale permiso para agregar. Bueno. Se agrega. Ahora cierra esta pestaña. No lo necesitamos. Vamos a abrir Herramientas para desarrolladores. Y en esta lista, aquí puedes ver la opción llamada componentes. Abre eso. Entonces este es nuestro árbol de componentes de aplicación. Puedes ver aquí obtenemos nuestro componente app, que es nuestro componente raíz. Después de eso, tenemos a Nabar y después de eso, lista de películas, y en la lista de películas, tenemos grupo de filtros y montón de componente de tarjeta de película Ahora aquí podemos ver estado de todos los componentes seleccionándolos. Entonces seleccionamos componente de lista de películas. Aquí podemos ver sección de gancho, y este es nuestro estado corto. Si cambiamos nuestro valor corto, vea, podemos ver aquí ese valor. Y aquí también podemos ver lista de películas. Ahora bien, si queremos ver el código snipit de este componente, luego haga clic en este icono de código y vea aquí obtenemos nuestro código Ahora volvemos a los componentes Puñalada. Ahora bien, si tenemos una estructura t compleja, entonces también podemos buscar nuestro componente en este cuadro de búsqueda. Entonces, en general, las herramientas de desarrollador de reaccionar son una herramienta muy útil para depurar y comprender las aplicaciones de reacción Podemos ver los componentry, state, props, y mucho más Y al usar estos, podemos identificar y solucionar fácilmente el problema en nuestra aplicación. 72. Implementar la función de ordenación: Ahora, implementemos la función de clasificación en nuestra aplicación. Por lo tanto, hay muchas formas diferentes implementar la función de cortocircuito Entonces aquí vamos a usar una biblioteca externa llamada LdSH Es una biblioteca muy popular en JavaScript para el manejo de objetos y array. Entonces abre terminal, y en la nueva terminal, escribimos NPM I dash Zi corto para Instalar. Y si quieres usar exactamente la misma versión, que estoy usando, puedes escribir aireo 4.17 0.21 y Verlo instalado. Vamos a minimizar este bien terminal. Ahora para usar cualquier biblioteca, tenemos que importar esa biblioteca desde su paquete. Entonces en la parte superior, escribimos guión bajo de importación de guión bajo. Aquí, también puedes escribir Low dash o cualquier otro nombre, pero este es el nombre más común que a los desarrolladores les gusta usar. Ahora se podría pensar, por qué escribo importaciones a veces aquí y a veces por debajo de esta lista. Entonces siempre que quiera importar algo de los paquetes, luego los importo en la parte superior. Y si quiero importar cualquier cosa desde componentes locales, imágenes, físicamente, lo que creamos en carpeta fuente, importo en esta segunda lista. Al hacer esto, podemos ver fácilmente qué paquetes estamos usando y qué componentes estamos usando. También puedes separarlo o puedes escribir todas las entradas juntas. Depende totalmente de ti. Pero hagas lo que hagas, haz lo mismo en todos los componentes. Ahora vamos a centrarnos en la función de clasificación. Y una cosa que quiero contarles sobre react es react ejecuta actualización de estado de manera sincrónica, lo que significa que si cambiamos nuestro estado corto en esta función, entonces react no actualizará ese estado inmediatamente. Déjame mostrarte a lo que me refiero. Así que aquí establecemos métodos de clasificación cortos a los actuales seleccionados. Simplemente movamos este registro de puntos de consola aquí. Di los cambios y echa un vistazo. Cambia algo en el desplegable y mira, aquí tenemos nuestro viejo tiro recto. Si volvemos a cambiar este tiro a tasa, C, obtenemos estado previo. Entonces eso está claro, reaccionar no es actualizar el estado de inmediato. Pero, ¿por qué reaccionar funciona así? Déjame explicarte. Entonces cuando en react, una función se ejecuta, reacciona primero, deja que toda la función se ejecute. Y si hay múltiples actualizaciones de estado, las apilará en fila y luego las ejecutará una por una. Después de completar esta ejecución completa de la función, ya que si reaccionan inmediatamente actualizar un estado, entonces eso trae re render no deseado para ese componente completo, y eso no es algo bueno. Es por eso que react ejecuta comandos de cambio de estado después de completar la ejecución completa de la función. Así que podemos escribir nuestra lógica de clasificación en esta función de ordenación de mango. Necesitamos usar algo que se ejecute automáticamente cuando nuestro estado corto cambie. ¿Conoces algo parecido, que ya usamos? ¿Correcto? Se usa efecto gancho. Después de este gancho de efecto de uso, agregamos otro gancho de efecto de uso. Y como sabemos, el primer argumento es nuestra función de devolución de llamada y segundo argumento es la matriz de dependencias, y en esta matriz, pasamos nuestro estado corto Ahora dentro de esta devolución de llamada, agregamos una condición I corto B no es igual a default No queremos abreviar nada para el estado predeterminado. Dentro de esto, escribimos guión bajo, que es nuestro orden de punto bajo Este método se utiliza para cortocircuitos y cambiar el orden a ascendente o descendente ambos en la misma función Entonces, en la primera posición, tenemos que pasar nuestra matriz actual que queremos abreviar, que es filtrar películas porque puede ser posible que filtremos películas solo siete estrellas más, y luego queremos abreviar eso. Ahora en el segundo parámetro, tenemos que pasar array y dentro de este, tenemos que pasar la propiedad por la que queremos abreviar. Entonces SOT punto B. Y dentro de estos, también podemos pasar múltiples propiedades. Ahora en el tercer parámetro, tenemos que pasar, de nuevo, array, y dentro de este, tenemos que pasar ASC para ascendente o DSC para descendente, y almacenamos ese valor en orden de punto de ordenación Solo recuerda al primer parámetro, pasamos nuestra matriz que queremos filmar. En el segundo parámetro, pasamos array de propiedades por las que vamos a filmar. En nuestro caso, puede ser fecha de lanzamiento o promedio de voto que están disponibles en la matriz de películas. Y por último en el tercer parámetro, pasamos ascendente o descendente, simple como eso. Ahora, esta expresión devuelve una nueva matriz. Así que almacenamos eso en variables llamadas películas cortocircuitadas. Y después de eso, establecemos películas de filtro dos películas ordenadas. Tan simple como eso. Además, de nuestra función, eliminamos este registro de puntos de consola. No lo queremos. Guarda los cambios y echa un vistazo. Cierra nuestra consola, actualiza la página. Establezca nuestra clasificación a la fecha y vea que está cambiando. Ahora cambia el orden a descendente y ve que también está funcionando. Para que puedas ver lo sencillo que es implementar la clasificación usando este paquete de cargas. Si no quieres usar esa biblioteca, puedes escribir lógica de cortocircuito por ti mismo así. Está totalmente bien. Pero en mi humilde opinión, esta biblioteca de carga funciona mejor para nosotros. Yo personalmente lo usé en muchos proyectos de clientes. 73. Agregar interruptor para el modo de luz oscura: Ahora veamos cómo podemos agregar interruptor de modo oscuro y luz en nuestro proyecto. Entonces creo este switch para mi proyecto cliente usando tu STML y CSS Entonces en la carpeta de recursos, abre nuestra carpeta del proyecto dos, y aquí obtenemos esta carpeta de componentes de modo oscuro. Así que simplemente arrastra esta carpeta a nuestra carpeta de componentes. Y eso es todo. Así es como puedes usar otros componentes del proyecto en tu proyecto. Ese es el poder de crear componentes separados. Ahora, veamos qué hay dentro de este componente. Entonces componente de modo oscuro, y aquí podemos ver que tenemos una entrada con casilla de verificación tipo, y después de eso, tenemos etiqueta, y en eso, agregué dos que es componente, sol y luna Déjame mostrarte cómo se ve esto. Así que presione Control más P o Comando más B y busque el componente Navar Ahora, en la parte superior, tenemos que importar componente de modo oscuro de la carpeta de modo oscuro, y agregamos este componente de modo oscuro antes de nuestros enlaces de navegación. Guarda los cambios y echa un vistazo. Aquí nos sale algún error. Abramos Consola y veamos aquí obtenemos este error. Esto se debe a que el blanco no soporta esta importación de componentes react, al usar esto, podemos importar SVG como componente. Para solucionar este problema, tenemos que usar librería llamada White plug in svgrnPmitPlug en SVGR SVGR Bueno, minimizador terminal y punto blanco abierto config punto JSNFle Ahora, aquí en la parte superior, ingresamos SVGR desde el plugin blanco, ds SVGR Y en esta matriz de plugins, después de esto reaccionar, llamamos a esta función. Guarda los cambios y echa un vistazo. Mira lo hermoso que se ve este interruptor. Puedes usar cualquier interruptor o diseño para esto. Depende totalmente de ti y también puedes modificar este CSS de modo oscuro. Ahora, aquí en la carpeta modo oscuro, podemos ver que tenemos dos Swigs Podemos colocarlos en nuestra AsssFolder para que nuestro proyecto se organice mejor Seleccione estos dos Swiges y muévalos a la carpeta Activos Y de pronto nos sale este error, que dice que SVG no se encuentra en la ubicación actual porque lo movimos. Entonces tenemos que cambiar nuestra ruta SVG. Entonces aquí vamos dos carpetas arriba, SATs y sun dot SVG Lo mismo hacemos eso por este camino también. Lunar punto SVG. Guarda esto y vuelve a funcionar. Ahora la razón por la que te doy este switch de modo oscuro listo para usar porque es puro basado en STML y CSS Si te explico todas y cada una de las partes de STML y CSS, entonces mucha gente se deja espolear por eso porque estamos aquí para aprender Además, te voy a dar el enlace de Ts tutorial en el que podrás ver cómo crear este switch desde cero. 74. Implementación del modo oscuro: Antes de comenzar a implementar la funcionalidad del modo oscuro, primero entendamos la lógica de cambiar el tema. Básicamente, solo estamos cambiando los colores de nuestro sitio web. Tan simple como eso. No estamos agregando ningún elemento ni cambiando el tamaño de los elementos. Nada. Estamos cambiando los colores de nuestra aplicación. Entonces, la mejor solución para esta característica es que definimos variables CSS para cada color en nuestro sitio web para tema oscuro por defecto. Y cuando los usuarios cambian el tema a luz, reemplazamos esas todas las variables valor de color, simples como así en este componente de modo oscuro, primero creamos una función llamada set dark theme. Y en esta función, quiero agregar un atributo al elemento body. Así documentar selector de consulta de punto y pasar aquí cuerpo. Atributo de conjunto de puntos, y aquí pasamos el nombre del atributo, que es la coma del tema de datos, y establecemos en oscuro Entonces, al usar esta propiedad, obtendremos nuestro estado temático. Ahora dupliquemos esta función y cambiemos nombre de esta función para establecer tema ligero y el valor del atributo a light. Ahora llamemos aquí a una de estas funciones. Digamos establecer tema oscuro y ver si está funcionando o no. Guarda los cambios y echa un vistazo. Haga clic derecho en la página y vaya a inspeccionar. En la etiqueta body, puedes ver aquí conseguimos que tema de datos se oscurezca, así que está funcionando. Ahora queremos alternarlos en cambio de este togal así que escribimos una nueva función llamada Tgal theme, y obtenemos aquí event object, error Y antes que nada, verificamos si la verificación punto objetivo del evento es verdadera. Entonces llamamos set dark theme function, se llamamos función de tema satelital. Ahora queremos pasar esta función en esta entrada sobre evento de cambio. Entonces nosotros en el cambio es igual al tema togal. Guarda los cambios y echa un vistazo. Mira, cuando alternemos este tema, va a cambiar aquí. Ahora, cambiemos en CSS. Así pan índice punto CSS archivo. En primer lugar, en la parte superior, utilizamos raíz de columna. Y dentro de estos, declaramos todas las variables de color para tema oscuro de la aplicación porque queremos establecer el tema oscuro por defecto. Así que escribe doble guión y escribe el nombre de la variable. Digamos que el fondo del subrayado del cuerpo, y el valor dos tiene 101010 A continuación, tenemos doble guión, color de subrayado de cuerpo y valor a blanco Y siguiente doble guión agregando color y valor de subrayado a un FFE 400 Si estás trabajando en otro proyecto, entonces tienes que agregar todos los colores en estas variables que quieras cambiar. Ahora, definamos las variables de color para el tema ligero. Entonces tenemos que apuntar aquí los datos hay tema igual a la luz. Quieres iluminar el tema por defecto, entonces tienes que agregar colores claros del tema en esta raíz, y en esta condición, tienes que agregar oscuro. Ahora, dentro de estos, definimos doble guión, fondo de subrayado de cuerpo y valor a blanco Asegúrese de usar también el mismo nombre de variable para el tema claro, por lo que reemplazará estas variables de tema oscuro. A continuación, tenemos el color de subrayado del cuerpo de doble guión. Valor a negro, y por último guión doble encabezado guión bajo, color, también negro Ahora tenemos que reemplazar todos los colores en nuestros archivos CSS con estas variables. Entonces aquí, en el cuerpo, cambiamos este valor de color de fondo a variable, y en eso, pasamos nombre de variable, guión doble, fondo de subrayado de cuerpo Color a variable, doble guión, color de subrayado del cuerpo. Guarde este archivo. Ahora, reemplacemos los colores a variable en otros archivos CSS. Así panabar punto archivo CSS. Aquí podemos cambiar este color de encabezado a color variable, doble guión, encabezado, subrayado Y también, cambiamos este color de enlace a color variable, doble guión, subrayado de cuerpo. Guarde este archivo. Y ahora vamos a comprobar lista de películas punto archivo CSS. Aquí tenemos que cambiar esta lista de películas encabezamiento color a variable, doble guión, encabezado subrayado color Podrías pensar por qué no estamos cambiando este color de borde porque no queremos cambiar su color cuando cambiamos el tema y eso es todo lo que queremos cambiar. Di los cambios y echa un vistazo. Mira, aquí obtenemos tema oscuro y si es a gal obtenemos tema ligero. Pero por defecto, este deslizador está en modo de luz. En el componente de modo oscuro en nuestra entrada de casilla de verificación, pasamos una propiedad más llamada default check equals a true Guarda los cambios y ve que está en modo oscuro, así que está funcionando. Pero este tema cambiante es muy repentino. Agreguemos poca transición, así será suave. Así que aquí en el índice ese archivo CSS, en nuestros todos los estilos agregamos transición a todos 0.3 segundos está dentro y fuera. Guarda los cambios y echa un vistazo. Verás, obtenemos esta transición de modo. Aquí hay una cosa. Si refrescamos esta página , por defecto, comenzará con tema oscuro. Pero queremos que nuestra aplicación recuerde si usas un tema togal para iluminar, luego al refrescar, permanecerá en el tema ligero Entonces tenemos que guardar esa configuración en almacenamiento local, jabón y componente de modo oscuro. Y en este conjunto función de tema oscuro, agregamos aquí el artículo de conjunto de puntos de almacenamiento local al tema seleccionado y valoramos a oscuro. Ahora copia esta línea y pegarla en función de tema satelital y cambia su valor a luz. Ahora, después de eso, creamos la variable llamada tema seleccionado y obtenemos aquí nuestro tema almacenado. Punto de almacenamiento local obtener artículo, y pasamos aquí este nombre que se selecciona tema. Luego agregamos condición si el tema seleccionado es igual a la luz, luego llamamos a esta función de tema de luz establecida. De lo contrario, por defecto, comenzará con tema oscuro. Así que agregamos y simplemente llamamos aquí establecer función de tema oscuro. Guarda los cambios y echa un vistazo. Establecer tema en modo luz y ver, ahora refrescamos la página, seguimos en modo luz. Pero aquí, tenemos que arreglar este botón togal. Entonces, en nuestra etiqueta de entrada, simplemente agregamos el atributo predeterminado comprobado, tema seleccionado, no es igual a la luz. Entonces, si nuestro tema seleccionado es cadena vacía o modo oscuro, el control deslizante permanecerá en modo oscuro. Guarde los cambios y vea ahora nuestro switch Togal está funcionando bien Para que puedas modificar este código de acuerdo a tus necesidades. Pero la lógica del modo oscuro seguirá siendo la misma. 75. Hacer que el componente MovieList sea reutilizable: Ahora actualmente nuestro componente de lista de películas es estático. Queremos que sea reutilizable, lo que significa que podemos pasar el nombre del encabezado, ícono y llamaremos a diferentes API para las mejores películas relacionadas y las próximas películas. Entonces hagámoslo. Déjame mostrarte mi trigonómetro que utilicé para saber qué datos queremos pasar por utilería Así que en el componente de lista de movimiento , en primer lugar, queremos cambiar esta API. Así que volvamos a la documentación de la API de TMDB. Abre la API de película mejor valorada, y aquí podemos ver que es la misma URL API, que usamos para películas populares. Solo tenemos que reemplazar popular con el mejor guión bajo calificado Y para las próximas películas, solo tenemos que pasar próximas. Desestructuramos los apoyos aquí y primero agregamos tipo, que puede ser popular, mejor calificado o próximo Cambiamos los códigos dobles con ticks traseros y en el lugar de este popular, pasamos corchetes de dólar cul, tipo Ahora a continuación, queremos cambiar este título dinámicamente. Pasamos aquí Culibackets y pasamos aquí título. También cambiamos este Imoge pasamos aquí Imoge. Y también cambiamos esta t con ticks, dólar, corchetes colli, icono de Imoge, y eso es todo Vamos a agregar estas propiedades en utilería. Así título e Imoge. Entonces esto es muy claro. Solo tenemos que pasar estas tres propiedades como utilería. Ahora en la parte superior, podemos eliminar esta imagen inbot. Eso no queremos. Guarde este archivo y vuelva a nuestro componente de aplicación. En este componente de lista de películas, pasamos aquí tipo igual a título popular a popular e iMogetFR vamos a importar este Imoge En la parte superior, importar fuego de activos de barra de periodo y punto de fuego png También importemos apegarnos a Imoges. Así que importa estrella de periodo, activos, resplandeciente punto estrella PNG Y por fin, parte importadora de periodo, separación de activos, pasado PNG Déjame verificar la ortografía. Sí, es correcto. Ahora agreguemos adhiérase a la lista de películas para las mejores calificadas y próximas. Así que duplica este componente dos veces más , y por un segundo, cambia el tipo a la calificación de subrayado superior, título a la mejor valorada y la imagen a la estrella Y para tercer tipo a próximo título a próximo e Imagen a fiesta. Guarda los cambios y echa un vistazo. Ver, tenemos tres secciones diferentes para películas. Ahora, en la parte superior, tenemos enlaces de Neva que no están haciendo nada Entonces, cuando hacemos clic en el Enlace mejor calificado, entonces nuestra página debe desplazarse a la sección mejor calificada. Y si hacemos clic en el siguiente enlace, entonces nuestra página debería desplazarse a la siguiente sección. Implementar eso. Es muy sencillo. Entonces en nuestro componente de lista de películas, ya tenemos type props, así podemos pasar el tipo como el ID de esta sección de lista de películas Y ese es el poder de crear componentes reutilizables. Se puede ver en comparación con la aplicación SDML, CSS y JavaScript, podemos hacer que nuestro front-end sea rápido y muy dinámico Guarde este archivo y abra el componente NBR. Y en el primer enlace, pasamos como populares. Y para el segundo enlace, pasamos tiene el mejor guión bajo calificado Y en el último enlace, pasamos como próximo. Guardar búsqueda y Gs y echar un vistazo. Haga clic en el enlace mejor calificado y C nuestra página desplácese en la sección mejor valorada. Ahora, si hacemos clic en próximo nuestra página desplácese a la siguiente sección. Pero esto es pergamino muy repentino. Hagamos esto más realista. Así juego de palabras índice punto css archivo. Aquí agregamos estilos para etiqueta SDML, llaves, comportamientos de desplazamiento para suavizar. Y eso es todo. Sí, no necesitamos hacer otra cosa. Guarde los ings y tome un. haga clic en un enlace y vea, obtenemos este efecto de desplazamiento suave Y también, nuestras características de filtro y cortocircuito funcionan bien con componentes individuales Por lo que esta aplicación se ve muy simple, pero tiene muchas características del mundo real que harán que nuestra aplicación sea moderna y fácil de usar. Entonces enhorabuena. Aquí se completa nuestro proyecto para filmar maníaco. Se puede ver que reaccionar es muy fácil y sencillo de usar. Solo tienes que dominar algunos conceptos básicos como componentes, estado, props y algunos métodos RM, y estás listo para comenzar Y una cosa más, ver solo curso no te ayudará a crear aplicación por tu cuenta. Tienes que codificar junto conmigo, o puedes ver una lección y luego escribir código por tu cuenta. Por este método, entenderás reaccionar mejor, y tu construcción lógica también se refinará con el tiempo. Si tienes algunas dudas, entonces puedes preguntarme en la sección de preguntas y respuestas Me encanta responder a tus preguntas, y te veo en la siguiente sección. 76. Sección 08 Enrutamiento en React: Bienvenido a la Sección ocho del curso de reacción definitiva. En esta sección, vamos a aprender sobre el ruteo, que es el concepto muy importante de reaccionar. Si vas a trabajar en algún gran proyecto de reacción, entonces definitivamente necesitas agregar enrutamiento de reacción en tu proyecto. Veremos múltiples rutas, enrutamiento de un solo paso, parámetros de ruta, cadena de consulta, enrutamiento anidado, navegación y mucho más Después de completar esta sección, tiene una sólida comprensión de cómo funciona el enrutamiento en React. Entonces comencemos esta sección. 77. Configurar el proyecto: Ahora, vamos a montar nuestro nuevo proyecto porque no queremos estropearlo también, y tampoco aprendemos todos los conceptos de enrutamiento en ese proyecto. Después de enterarnos de eso, agregaremos enrutamiento en nuestro proyecto también. Entonces, en la carpeta de recursos, obtienes una carpeta llamada plantilla de enrutamiento. Abre esa carpeta y ábrela en código VS. Así que anteriormente, estamos construyendo nuestro proyecto desde cero. Ahora bien, esta es la forma en que puedes usar otros proyectos de React y empezar a trabajar en ellos. Entonces abrimos nuestra terminal presionando Control más backtick o Comando más backtick Y simplemente aquí mismo, NPM ejecuta Dow y golpeó Enter Y aquí nos llega este mensaje. El blanco no se reconoce como un comando interno o externo. ¿Por qué nos llega este mensaje? La razón es que no tenemos módulos de nodo en este proyecto. Ahora bien, ¿cómo podemos agregar módulos de nodo? Al usar la instalación de NPM y presionar Enter. Este comando ejecutará todos los paquetes y bibliotecas que usamos en nuestro proyecto. En otras palabras, instalará todas las dependencias con versiones disponibles en nuestro archivo sn de paquetes Y es por eso que el paquete JSNFle es más importante que Ahora podemos ejecutar NPM ejecutar Dov. Lo siento, aquí hago un error tipográfico. Déjame que NPM dirija Dow. Abre esta URL y mira aquí obtenemos nuestra aplicación. Veamos qué agrego en esta aplicación. Entonces, en el componente de la aplicación, tenemos NaBR en la parte superior y una etiqueta principal para nuestra aplicación En esta etiqueta principal, queremos realizar todo el ruteo. Ahora veamos qué hay dentro de este NaBR. Puedes ver que este NaBR tiene solo una lista de pedidos con cuatro elementos de la lista Y dentro de estos, tenemos simple etiqueta de anclaje con HF y mencionamos diferentes enlaces aquí. 78. Agrega enrutamiento para aplicaciones React: Ahora, antes de implementar el enrutamiento, primero entendamos qué es el enrutamiento. Entonces aquí tenemos un par de etiquetas de anclaje. Si hacemos clic en alguno de los enlaces, redireccionaremos a ese enlace. Ver, en URL, tenemos host local, llame al 5173 barra Entonces, cuando estamos en la URL de los artículos, queremos mostrar la página del artículo, y eso llamaremos enrutamiento en palabras simples. Si hacemos clic en Enlace de Productos, queremos mostrar la página de productos. Esta es una característica muy común de cualquier sitio web. En nuestros dos proyectos, no agregamos ruteo porque nuestra aplicación solo tiene una página. Pero si creamos otro proyecto y necesitamos agregar otras páginas, entonces necesitamos enrutamiento. Entonces, como sabemos, react es la biblioteca Ja Script, y no tiene ninguna característica para implementar la funcionalidad de enrutamiento. Para agregar enrutamiento en nuestra aplicación, usaremos una biblioteca externa llamada React Router Dom. Esta es una de las bibliotecas más populares para manejar el enrutamiento. Así que abre terminal y agrega nuevo terminal y escribe NPM install, React router Dom Si quieres instalar la misma versión que estoy usando, entonces puedes agregar aquí a la tasa 6.11 0.1 y golpear Enter Entonces, si en el futuro reaccionan Router Dom se actualiza de manera importante aún puedes seguir este código. Ahora para agregar enrutamiento en nuestra aplicación, antes que nada, tenemos que envolver nuestra aplicación con un componente de enrutador de navegador disponible en el paquete react Router Dom. Así penmin dot archivo JSX, y en la parte superior, importamos Browser router de react Router Que no estoy escribiendo el nombre completo, solo estoy escribiendo la primera letra de esa biblioteca, RRD, y le pego Enter Ahora, antes de nuestro componente de aplicación, teníamos el componente del enrutador del navegador y movíamos esta etiqueta de cierre después del componente de la aplicación. Este componente de enrutador de navegador es muy importante porque sin eso, el enrutamiento no funcionará. También este componente mantiene un registro de URL actual y navegación de nuestra historia. No te preocupes. Veremos esa historia en próximas lecciones. Por ahora, solo recuerda que sin este enrutador de navegador, nuestro enrutamiento no funcionará. Guarde este archivo y vuelva a nuestro componente de aplicación. Aquí definiremos nuestro ruteo. Entonces, antes que nada, agregamos aquí un componente llamado ruta. Mediante el uso de estos, podemos definir en qué página qué componente debe mostrar. No te preocupes, mira esto. Entonces, antes que nada, queremos definir nuestro componente de hogar, y aquí agregamos nuestro camino que es el hogar. Entonces solo agregamos aquí barra diagonal Ahora, qué componente queremos mostrar Queremos mostrar este componente para el hogar. Entonces agregamos atributo element equals to en corchetes CL, agregamos componente home. Aquí podemos ver que la importación automática no está funcionando. Entonces aquí, tenemos una extensión más para eso. Abra el panel de extensión y busque Auto Import y abra esta segunda extensión. Anote este nombre, hay que instalar esta misma extensión. Cerremos esta pestaña de extensión, y nuevamente, aquí mismo, a casa. Ver, ahora obtenemos Entrada automática. Por lo que esta línea de ruta le dirá a nuestra aplicación si la URL del navegador es esta ruta, luego mostrará este elemento. Tan simple como eso, guarda los cambios y echa un vistazo. Abre Consola, y aquí nos sale el error. Una ruta es sólo para ser utilizada como elemento hijo de rutas. Por favor, envuelva su ruta en nuestras rutas. Por lo que claramente dice para envolver nuestro componente de ruta con el componente rutas. Entonces en la parte superior, importamos rutas después de esta ruta. Y antes de nuestra ruta, agregamos componente de rutas. Mueve esta etiqueta de cierre después de esta ruta, guarda las pulgadas y echa un vistazo. A, aquí obtenemos nuestro componente home en la página de índice de nuestra aplicación. Ahora vamos a establecer otras rutas. Duplicar este componente de ruta tres veces más. Por primera vez, cambiamos la ruta para reducir productos y elemento a componente de productos Vea lo que Import está funcionando correctamente. Trayectoria a artículos y componente de elemento a artículos. Y en el último camino a slash admin y elemento al componente admin Guarda los cambios y echa un vistazo. Ver, primero estamos en casa. Ahora haga clic en Enlace de Productos. Obtenemos productos, artículos y administración. Entonces está funcionando bien. Ahora podría preguntarse ¿por qué definimos nuestras rutas solo aquí? ¿Podemos definir rutas en otro lugar? Sí, podemos definir nuestras rutas en cualquier lugar donde queramos mostrar el enrutamiento. Ejemplo, creamos un sitio web de comercio electrónico, y queremos agregar enrutamiento en ese proyecto. Este sitio web tiene diferentes secciones como Navbar en la parte superior, pie de página en la parte inferior, panel lateral izquierdo para mostrar nuevos productos y una sección principal Ahora en el Navbar, tenemos un par de enlaces como móviles, laptops, relojes, ropa, etcétera. Cuando hacemos clic en cualquiera de estos enlaces, necesitamos abrir esa página en esta sección principal. Otras partes del sitio web permanecerán iguales. Apenas esta sección principal se cambia. Entonces dentro de esta sección principal, tenemos que definir nuestras rutas y eso exactamente lo hicimos en nuestro proyecto de ruteo. En definitiva, solo recuerda que en qué parte definimos rutas, solo esa parte cambiará cuando redireccionemos a otra página. 79. Agregar página no encontrada: Ahora en nuestra aplicación, el usuario quiere redirigir en URL como perfil de slash Entonces si nuestro proyecto no tiene página de perfil, puedes ver aquí no obtenemos nada, lo cual está bien. Pero queremos mostrar la página de 40, cuatro no encontrados cuando el usuario redirecciona a la página, que no está definida en nuestras rutas. Entonces veamos cómo podemos hacer eso. Entonces después de esto todas las rutas, agregamos un componente de ruta más. Y pasamos camino igual a estrella, que significa cualquier camino que no esté disponible en estas otras rutas, y pasamos elemento a componente no encontrado. Ahora, veamos qué hay dentro de este componente no encontrado. Ver, solo agrego etiqueta con 404, página no encontrada texto, y agrego color al rojo. Así que volvamos a nuestro componente de app, guarda los cambios y echa un vistazo. Ver, aquí obtenemos 404, página no encontrada mensaje. Puede agregar estilos personalizados a esta página no encontrada. Depende totalmente de ti. Ahora, si vamos a la página principal, obtenemos nuestro hogar, y si redireccionamos a cualquier otra URL, digamos ABC, entonces obtenemos 404, página no encontrada. 80. Crea una aplicación de una sola página: Ahora en nuestra implementación, tenemos poco problema. Si te das cuenta, cuando hacemos clic en algún enlace, toda nuestra página se actualiza. Déjame mostrarte. Abra las herramientas para desarrolladores y vaya a NetworkTab. Ahora da click en Anink y mira aquí estamos haciendo esta solicitud 21 Pero sabemos que react envuelve todo el código en un archivo bundle, y luego el navegador buscará ese código de acuerdo a su necesidad No necesitamos enviar paquete completo para cada página. Ejemplo, si usamos YouTube, sitio web de YouTube se cargará solo por tiempo. Después de eso, si abrimos un video, entonces solo cargará la parte necesaria, pero no se vuelve a actualizar Este tipo de aplicación se denomina como aplicación de una sola página. Así que hagamos de nuestra aplicación aplicación de una sola página, que es las características más comunes de cualquier sitio web moderno. Entonces para eso, abrimos nuestro componente Nebr y en el lugar de esta etiqueta de anclaje, agregamos un componente llamado Link, que obtenemos de react router doom Verlo autoiputado en la parte superior. También reemplacemos estas etiquetas de anclaje con este componente de enlace. Ahora, en el lugar de este HRF, este componente de enlace tiene que atribuir Seleccione este hf y presione Control más D o Comando más D y reemplace este HRF por dos Sin estos dos atributos, este componente de enlace no funcionará. Guarda los cambios y echa un vistazo. Ahora haga clic en cualquier Enlace y vea que no estamos haciendo todo SGTPRquest y además nuestros sitios web no se refrescan cada vez Para que puedas ver lo sencillo que es hacer de nuestra aplicación aplicación de una sola página. Solo tenemos que usar el componente Link en el lugar de los enlaces de anclaje. En ocasiones queremos destacar el enlace de ruta actual, lo que significa que si estamos en la página de productos, entonces resaltaremos su enlace, así el usuario sabrá en qué página está actualmente. Es realmente simple. Reemplazar este componente de enlace por otro componente llamado Navink vamos a eliminar este enlace Importar No lo necesitamos. Guarda los genes y echa un vistazo. Funciona igual que antes. Ahora déjame mostrarte algo genial. Inspeccione este enlace y vea si seleccionamos enlace de productos, obtenemos aquí clase activa. Entonces, cualquiera que sea el enlace seleccionado, componente New Bar agregará clase activa a ese enlace Entonces, al usar CSS, podemos cambiar su estilo. Así que en nuestro archivo CSS de punto navbar, nosotros en punto Navbar, lista, punto ancla Active Cali Brackets, fuente weet a 500 y color a Guarda los cambios y te galec. Ver, aquí conseguimos nuestro enlace de artículos resaltado. puede ver lo suave que funciona, y esa es la potencia de react router dom. 81. Parámetros de ruta (useParams): Ahora, a veces en nuestra aplicación, necesitamos usar parámetros de ruta. Déjame experi con el ejemplo. Entonces aquí tenemos nuestro componente de productos. Ahora vamos a establecer algunos enlaces en este componente. Entonces después de esta etiqueta AHT, agregamos una lista desordenada, y dentro de esta, necesitamos a Li, y dentro de esta, necesitamos componente de enlace Y aquí pasamos atributo dos es igual a dos en productos de códigos dobles. Queremos tres aliadas con enlace dentro. Entonces envolvemos esta etiqueta de ancla de Ali, enlazamos con paréntesis y multiplicamos por tres y presionamos tabulador Verás, obtenemos este MT. Sé que esto es un poco complicado, pero es solo un momento de práctica. En el momento en que te aburras de escribir código repetido, intentarás usar MET y atajos para eso. Pasemos aquí el producto uno, presione la pestaña, el producto dos, la pestaña y el producto. Ahora queremos agregar en este link path ID para cada producto uno, barra dos y tres Entonces si abrimos productos s uno, lo que significa que queremos ver el producto que tiene ID uno, o cualquier parámetro que pasemos aquí. Esta es la estructura común del ruteo, y esto se llama como parámetros de ruta. Al usar este ID, obtendremos detalles sobre ese producto en particular y mostraremos esos detalles en nuestra página web Guarda los cambios y echa un vistazo. Ir a la página de productos, y aquí obtenemos error. Así que abra Consola y vea, aquí obtenemos tinta no está definida. Así que volvamos al código VS, y aquí importamos este componente de enlace. Guarda los cambios y echa un vistazo. Dé click en el producto uno, y vea, aquí obtenemos 404 página no encontrada porque olvidamos agregar ruta para este enlace. Así que volvamos al componente app, y aquí después de esta ruta de productos, agregamos una ruta más para slash products, slash colon, y ahora aquí agregaremos nuestro nombre de parámetro de ruta Digamos ID. Tenga en cuenta que solo estamos pasando aquí un parámetro de ruta porque solo necesitamos uno. Pero también podemos pasar tanto parámetro de ruta que queramos. Solo recuerda si queremos agregar parámetro de ruta, entonces tenemos que usar dos puntos al principio. De lo contrario, no va a funcionar. Ahora elemento es igual a aquí agregamos componente de producto único. Guarda los cambios y echa un vistazo. Haga clic en cualquier enlace de producto y vea que redireccionamos a un solo componente de producto. Entonces está funcionando. Ahora podría preguntarse, ¿cuál es el propósito de este parámetro de ruta? Estamos recibiendo la misma página para cada producto. Déjame mostrarte eso. Una tarea es que queremos obtener este ID en este único componente de producto. Entonces, en un solo componente de producto, y para obtener el parámetro route desde URL, tenemos un gancho en react router dom Entonces en la parte superior, ingresamos parámetros de uso de react router dom. Params representan parámetros. Ahora en nuestro componente funcional, llamamos a este use params hook y este gancho devuelve automáticamente el objeto de parámetros de ruta, y eso es todo No necesitamos hacer otra cosa. Almacenemos estos en variables llamadas params. Y después de eso, simplemente consola dot log estos params. Guarda los cambios y echa un vistazo. Abra la consola. Y vea aquí obtenemos parámetros de ruta en objeto. Recuerde, este nombre de propiedad es el mismo que describimos en nuestra ruta aquí. Ahora, en la aplicación del mundo real, al usar este ID, podemos recuperar datos de nuestro back end y también hacer muchas más cosas Por ahora, simplemente mostremos este ID aquí. Entonces desestructuramos este objeto y obtenemos aquí ID. Ahora quita esta consola y vamos a imprimir este ID después de este encabezado. Guarda los cambios y echa un vistazo. ver si vamos al producto dos, obtenemos un solo producto dos. Y si vamos al producto tres, obtenemos un solo producto tres. Entonces eso es todo acerca de los parámetros de ruta. 82. Cadena de consulta: Ahora, vamos a tipo de parámetro URL, que es squary string De datos, queremos pasar con nuestra solicitud de URL. Déjenme darles un ejemplo. Así que aquí página. Imagina que tenemos lista de artículos y queremos abreviar ese artículo por fecha y categoría a electrónica. Estos son los datos que queremos pasar en nuestra URL. Entonces aquí pasamos en la URL, el interrogación, y después de eso, lo que pase aquí va como cadena de consulta, y podemos obtener esas variables en nuestro componente de artículo. Otro ejemplo más común de cadena de consulta es la búsqueda. Que si algo en YouTube. Observe los cambios de URL en los resultados, interrogación, y aquí obtenemos la cadena de consulta. Si causamos URL y la pegamos en otra pestaña, obtenemos el mismo resultado de búsqueda. Entonces ese es el trabajo de query string. Así que volvamos a nuestro ejemplo, queremos pasar aquí a query string. Primero, escribimos nuestro nombre de variable, corto por igual a ahora sin ningún código, pasamos aquí nuestro valor. Digamos fecha. Ahora para pasar el segundo parámetro, usamos la categoría persona igual a la electrónica. Ahora, veamos cómo aquí. Sé que esto es un poco aburrido, pero estos conceptos son muy importantes cuando estamos trabajando en cualquier componente de artículo abierto grande, y en la parte superior, necesitamos importar un gancho para obtener parámetros de cadena de consulta. Utilice la búsqueda PeramsrRouter doom. Este uso de parámetros de búsqueda es muy similar a nuestro gancho de estado de uso A este gancho lo llamamos aquí en nuestra función. Y rezar con dos artículos. Así que almacenamos eso en variable y usando R desestructuración, adherimos parámetros de búsqueda, búsqueda de conjunto de comas Puedes ver que es muy similar a usar Ahora en esta primera propiedad, parámetros de cadena. Y mediante el uso de los parámetros de búsqueda establecidos, podemos establecer parámetros de cadena de consulta Veamos primero los parámetros de búsqueda. Este parámetro de búsqueda tiene un método llamado GT. Y entre paréntesis, tenemos que pasar nuestro nombre de variable. Digamos corto B. Asegúrese de que escribimos el mismo nombre de variable que pasamos en cadena de consulta, y los almacenamos en la variable llamada sort B. Ahora, vamos a duplicar esta línea usando guardado más lt más flecha abajo. Más opción más flecha hacia abajo y cambiar esta toma por categoría. Ahora, vamos a imprimir esto aquí. Entonces corchetes cul, disparados por, y después de eso, categoría de corchetes cul Ver los cambios y echar un vistazo. Mira, aquí obtenemos estas dos variables de cadena de consulta. Ahora, veamos cómo podemos usar set search perms para establecer parámetros de cadena de consulta Después de esta etiqueta AT, creamos un botón llamado shot B views. Y también, pasamos aquí al click y dentro de él, pasamos función, handle, short, B. Ahora, vamos a definir esta función. Así que const manejar disparado por. Función de flecha, y aquí usamos establecer perms de búsqueda y aquí necesitamos pasar las variables de cadena de consulta en par de valores clave Ordenar por y valorar a las vistas. Cualquiera que sea el objeto que pasemos aquí, se establecerá como cadena de consulta. Guarda los cambios y echa un vistazo. Da click en este botón y vemos en la URL, obtenemos cadena de consulta a corto B es igual a vistas, pero nuestra categoría se ha ido. En este objeto, agregamos una categoría clave más y un valor a esta variable de categoría. Y como sabemos, si clave y valor igual, entonces podemos eliminar esto. Guarde los cambios y eche un vistazo. Regrese a nuestra página y nuevamente haga clic en este botón. Ver, aquí tenemos nuestra cadena de consulta. Se puede ver lo sencillo que es. 83. Enrutamiento anidado: Ahora imaginemos esta página de administración como panel de administración del sitio web. En esta página, el Administrador puede ver todos los detalles de ventas y todos los detalles de los vendedores. Entonces admin componente en esto, queremos agregar dos componentes de enlace. Así que underlysed dentro de él, necesitamos a Ali y dentro de él, necesitamos link component con atributos dos iguales a admin, y envolvemos este componente Ali y link con paréntesis ahora para el primer link, agregamos ventas y Link también slash Sales Segundo enlace vendedores y vendedores y asegúrese importar el componente de enlace de React Router doom Guarda los cambios y echa un vistazo. Si hacemos clic en el enlace de ventas, nos redirigirá a Admin Salespage Pero aquí conseguimos página no encontrada. Aquí no queremos abrir nueva página. En lugar de eso, queremos mostrar la página de ventas dentro de este panel de administración. Algo se ve así. Hacemos clic en la página de ventas, luego la página de ventas se abrirá debajo de este panel de administración. Y si abrimos la página del vendedor, entonces esa página también se muestra aquí. Así que imagina que estos cuatro eslabones son nuestra barra horizontal, y estos dos enlaces son nuestra barra lateral. Este ruteo se denomina enrutamiento anidado. Entonces veamos cómo podemos agregar enrutamiento anidado. Así que el componente de la aplicación ahora para definir el enrutamiento anidado, necesitamos envolver nuestras rutas anidadas en ruta Entonces, en el lugar de esta etiqueta de cierre automático, agregamos una etiqueta de cierre separada ahora entre estas, necesitamos definir nuestra ruta anidada Entonces agregamos otro camino de ruta. Aquí pasamos nuestro camino de ruta anidado. Entonces si quieres definir slash admin slash sales, entonces aquí, solo necesitamos escribir ventas porque slash admine Ahora elemento a componente de ventas. Ahora vamos a duplicar este código, y en el lugar de las ventas, pasamos elemento vendedores a vendedores también vendedores. Guarda los inges y echa un vistazo. Ahora si hacemos clic en el enlace de ventas, no obtenemos la página de error 404, y además obtenemos este panel de administración en ambas páginas. Ahora bien, por qué no obtenemos nuestro componente de ventas y vendedores. Entonces para eso, necesitamos seguir un paso más. Entonces admin componente en el que queremos mostrar este NasdaRouting. Y aquí tenemos un componente que especifica en qué punto queremos mostrar el enrutamiento NASDA Así que en la parte superior, entramos salida de react Enrutador doom. Y donde queremos mostrar nuestro enrutamiento anidado justo después de estos dos enlaces Entonces aquí agregamos nuestro componente outlet y eso es todo. Guarda los cambios y echa un vistazo. Ver, aquí obtenemos nuestras páginas. Ambas páginas están funcionando bien. Entonces, recapitulemos esta lección. Entonces, para definir el enrutamiento anidado, envolveremos nuestras subpáginas con el componente principal de ruta En este caso, se agrega ahora, lo que pase en este elemento se mostrará en esta página ambas. Si no pasamos aquí este elemento, entonces no veremos ese elemento en estas páginas. Esto se llama enrutamiento SAD porque estamos mostrando una página dentro de otra página. Y para mostrar el enrutamiento SAD, necesitamos pasar outlet en este componente admin, simple como eso. Además, este enrutamiento anidado no es muy común para la aplicación React Sólo que a veces necesitamos eso, no te preocupes por eso. Ahora aquí nuestro componente de aplicación se ve un poco feo debido a esto todo el enrutamiento. Así que vamos a almacenar este enrutamiento en un componente separado. Entonces cortamos todo este enrutamiento, y en nuestra carpeta fuente, creamos un nuevo componente llamado routing dot GSX Agregamos código estándar, y en el lugar de esta DU, pegamos nuestras rutas Ahora, también cortemos todas las entradas del componente de la aplicación excepto este Nabriput y péguela en el componente de enrutamiento Además, cortemos este componente de rutas y rutas desde aquí y peguémoslo en nuestro componente de enrutamiento. Guarde este archivo y vuelva a nuestro componente de aplicación. Agreguemos aquí todos los componentes de ruteo. Guarde esto y vea ahora nuestro componente de aplicación se ve limpio. 84. Navegación programática: Veamos otra característica importante del ruteo, que es la navegación. Así que imagina cuando el usuario visita esta página del panel de administración, queremos comprobar si el rol de usuario es admin o no. Entonces aquí, antes que nada, cierro todos los demás archivos, y aquí definimos un objeto llamado usuario es igual a objeto y paso aquí rol de propiedad y valor a digamos usuario. Esto es solo por ejemplo de navegación. Después de eso, podemos pasar tu condición como si el rol de punto de usuario no es igual a Admin, entonces redireccionaremos este usuario a la página principal o a la página de inicio de sesión. Entonces, para navegar, tenemos un componente llamado Navigate. Entonces en la parte superior, importamos Navigate desde un enrutador doom. Y en este blog de I, simplemente devolvemos este componente de navegación. Y dentro de este componente, agregamos atributo a la ruta de inicio igual, y eso es todo. Asegúrate de devolver este componente de navegación porque cuando estoy grabando esta lección, olvidé devolverla y perdí mucho tiempo para encontrar este error. Guarda los cambios y echa un vistazo. Intenta abrir el panel de administración y verás que redirigimos directamente a la página principal. Ahora hay una forma más de navegar. Entonces aquí, cuando vayamos a la página de un solo producto, queremos agregar aquí botón volver atrás. Abra un solo componente de producto. Primero, agregamos aquí botón llamado volver atrás y agregar aquí evento al clic es igual a handleba Ahora, definamos esta función. Así const, handleba, función flecha. Y dentro de esto, escribimos nuestra lógica de navegación. A esto se le llama como navegación programática. Entonces para eso, necesitamos usar un gancho llamado use Navigate. Entonces en la parte superior, introducimos uso Navigate hook ahora, dentro de este componente, llamamos a este gancho, y este gancho nos da función de navegar Así que almacenamos esa invariable generalmente llamada como Navigate. Y dentro de esta función de manillar, simplemente llamamos a esta función de navegación Y dentro de esto, tenemos que pasar nuestro camino. Entonces aquí solo pasamos menos uno. Si queremos navegar a una página específica, entonces podemos escribir algo como esto. Artículos de Slash. Ahora, cambiemos esto a menos uno, guardemos los cambios y echemos un vistazo. Ver, cuando hacemos clic en este botón, nos dirigimos a nuestra página anterior. Entonces así es como podemos navegar a diferentes páginas en nuestras características importantes de react router dom. Si quieres conocer más sobre esa biblioteca, entonces puedes leer su documentación. Pero para crear aplicaciones modernas de reacción. Si tienes algunas dudas, entonces puedes preguntarme en la sección de preguntas y respuestas, y perdón por estos estilos de proyecto de enrutamiento porque quiero que entiendas conceptos importantes de enrutamiento sin preocuparte por estilos y looks de aplicación Los desarrolladores no lo saben, así que siéntete libre de hacer preguntas al respecto. 85. Ejercicio para enrutar: Ahora es el momento de hacer ejercicio de ruteo. Entonces en nuestro proyecto anterior de películas, no tenemos enrutamiento. Entonces tu primera tarea es enrutar en este proyecto. La ruta debería ser así. En la página principal, por defecto mostraremos la lista de películas populares. Ahora, cuando hagamos clic en las películas mejor calificadas, redireccionaremos a Route mejor valoradas, y si hacemos clic en el siguiente enlace, entonces redireccionaremos a la página siguiente, y los datos próximos se mostrarán. En la barra de navegación, también se puede ver la ruta activa. Ahora, después de eso, tu segunda tarea es cuando hacemos clic en cualquier tarjeta de película, redireccionará a movie slash su ID No te preocupes por esa página. Tienes que mostrar el ID de la película en esa página. Sin estilos, nada. Sólo texto simple. Simplemente practicando el ruteo aquí. Si quieres agregar este proyecto a tu portafolio, entonces asegúrate de duplicar este proyecto y luego completar este ejercicio con código duplicado. Así que dedique de 15 a 20 minutos en este ejercicio y siéntase libre volver a ver estas lecciones de parte particular Está completamente bien. El objetivo de este ejercicio es pasar por conceptos básicos de ruteo. Entonces nos vemos después de completar este ejercicio. 86. Agregar enrutamiento a Project 02: Espero que intentes resolver este ejercicio porque tratar de resolver este ejercicio indica que realmente quieres aprender a reaccionar. Entonces, si siquiera lo intentas, entonces apreciarte por eso. Ahora, veamos la solución de nuestro ejercicio de ruteo. Entonces antes que nada, no voy a interrumpir nuestro viejo proyecto. En lugar de eso, crearemos proyecto duplicado. Así que copia esto todos los archivos, excepto los módulos de nodo y paquete dot log dot archivo GCN Y en nuestra carpeta de proyectos, creamos una nueva carpeta llamada ejercicio de enrutamiento. Y dentro de él, pegamos nuestros archivos. Ahora, abramos esto en código VS. Bueno. Antes que nada, instalemos todas nuestras dependencias del proyecto. Abre la terminal y escribe aquí, instala NPM y presiona Enter ¿Qué va a hacer este comando? Escribir. Es para agregar e instalar la carpeta de módulos de nodo. Después de eso, necesitamos instalar una biblioteca más para el enrutamiento, que es react router dom. Escriba NPM install, reaccione el enrutador dom y presione Enter. Tomará algún tiempo, bien. Y al final, vamos a ejecutar esta aplicación con NPM ejecutar Dow Y abre este enlace en nuestro navegador. Verás, está funcionando. Ahora, comencemos con agregar enrutamiento. En primer lugar, tenemos que decidir en qué parte queremos mostrar el enrutamiento. Entonces necesitamos agregar enrutamiento después de nuestro componente NaBR. Pero antes de eso, necesitamos envolver toda nuestra aplicación con el componente del enrutador del navegador. Entonces, en el archivo JSX punto principal, importamos el componente del enrutador del navegador de Rag Router doom, y envolvamos nuestro componente de aplicación con este componente de enrutador de navegador Guarde este archivo y definamos nuestras rutas. En el componente app en la parte superior, importamos rutas y rutas desde Rag Router dom Ahora aquí, después de este componente numérico, es mejor agregar la etiqueta principal, y en esa etiqueta, agregaremos enrutamiento. Entonces, antes que nada, agregamos el componente de rutas, y dentro de estos, agregamos nuestro componente de ruta. Voy un poco más rápido porque ya vemos estos en esta sección. Entonces en este componente de ruta, tenemos path, y primero definimos path para quien, que podemos agregar un elemento forward las para aquí simplemente cortamos este componente de lista de películas con título popular y lo pasamos aquí. Ahora, definamos otra ruta, y establecemos path two slash top underscore rated y element a esta lista de películas con el componente mejor calificado Y por fin, definimos otra ruta con camino próximo y elemento a esta lista de películas con próximo componente. Físicamente, estamos diciendo en este camino, mostrar este elemento. React no me importa que estemos renderizando el mismo componente o no. Guarda los cambios y echa un vistazo. Ver, en la página principal, solo obtenemos lista de películas populares. Ahora cambiamos nuestra URL a la calificación de subrayado superior y vemos que obtenemos el componente mejor calificado, por lo que está funcionando Ahora, resaltemos estos enlaces de Navbar. Así que abra el componente Nu Bar y en el lugar de esta etiqueta de anclaje. ¿Qué componente agregaremos? Bien, es componente Nowlin, y vea que está autoiputado Ahora también reemplace esto por New Link, y también este último. Después de eso, en el lugar de este todo HRF, agregamos al atributo, seleccionamos HF y usando edición multi cursor, reemplazamos este todo HRF por dos Ahora para el primer enlace, pasamos HomeLink, que es slash hacia adelante En segundo lugar, agregamos slash top underscore calificado, y para el último enlace agregamos slash Guarda los genes y echa un vistazo. Si hacemos clic en este popular, obtenemos título popular. Y si vamos a los más valorados, obtenemos aquí el título mejor calificado, pero las películas no están cambiando. Así que arreglemos esto muy rápido. Entonces, en nuestro componente de lista de películas, estamos buscando datos en este gancho de efecto de uso Y como sabemos, este gancho de efecto de uso se ejecutará solo una vez cuando ese componente se renderiza. Y en nuestro caso, este componente obtiene datos de API cuando estamos en la página popular Pero si cambiamos nuestra página a la mejor valorada, solo están cambiando el título del tipo y las propiedades de los emoji. Y es por eso que este efecto de uso nunca volverá a correr. Entonces para resolver este problema, tenemos que ejecutar este gancho de efecto de uso cuando este tipo de props está cambiando Así que aquí simplemente pasamos la matriz de independencia de tipo. Si estás un poco confundido, entonces no te preocupes. En la siguiente sección, veremos estos conceptos en detalle. Guarda los cambios y echa un vistazo. Mira ahora nuestras películas están cambiando según su tipo. Ahora, vamos a inspeccionar este enlace. Y aquí podemos ver clase activa. Entonces solo necesitamos agregar CSS para esta clase activa. Entonces un archivo CSS de punto Nabar. Y después de esto Naba links ancla, añadimos Nabarlink bracket angle bracket, anchor dot Active Y en paréntesis Gali, agregamos el peso de la fuente a 700 Ver los cambios y echar un vistazo. Ver, aquí obtenemos tinta resaltada. Se puede ver lo sencillo que es agregar enrutamiento. Muchos desarrolladores se lo pusieron muy duro porque intentan hacer todo en un solo paso, pero siempre tratan de hacer cualquier implementación paso a paso. 87. Definir parámetros de ruta para una sola película: Ahora aquí, cuando hacemos clic en alguna de esta tarjeta, no queremos abrir TMW Link En lugar de eso, queremos abrir otra página en nuestro sitio web, que puede mostrar los detalles de nuestra película. Entonces cambiemos primero este enlace. Abra el componente de tarjeta de película. Y en la parte superior, importamos componente Link del router React Dom. Ahora en el lugar de esta etiqueta de anclaje, agregamos componente de enlace y podemos eliminar este atributo de destino. No lo necesitamos en el lugar de este HF, agregamos dos atributos. Además, elimine esta URL base de DMD. Solo mantenemos la identificación de la película de slash, guardamos los cambios y echamos un vistazo Haga clic en cualquier tarjeta de película y vea, redireccionamos a la película slash movie ID Entonces nuestra media tarea está hecha. Ahora solo queremos mostrar esta identificación de película en esta página. Pero antes de esto, tenemos que definir esta ruta de página. Entonces componente app, y aquí en la parte inferior, agregamos un componente de ruta más. Camino igual a ahora lo que pasamos por aquí? Escribir columna de slash de película. Y aquí agregamos nuestro nombre de variable, ID o ID de película. Creo que eso es más específico. Ahora, elemento, aquí queremos agregar nuevo componente. Así que en nuestra carpeta de componentes, en nuestra carpeta de lista de películas, creamos un nuevo componente llamado single movie dot jsx Ahora, agreguemos aquí nuestro código estándar. Bonito. Guarda este archivo en nuestra ruta. Agregamos componente de película única y trabajos de importación automática. Puedes ver lo rápido que podemos escribir nuestro código usando la extensión de importación automática. Guarda los cambios y mira aquí obtenemos componente de película única, así que está funcionando. Ahora, simplemente mostremos esta identificación de película así que ¿recuerdas lo que usaremos para eso? ¿Correcto? Utilizamos el uso PeramsHok de react router dom Así que volvamos al componente de película única en el componente funcional, agregamos usar perams y seleccionamos esta sugerencia y obtendrá entrada automática Aquí llamamos a este gancho, y esto devolverá los parámetros de ruta objeto. Así que vamos a almacenar estos en variable, llamar params, o incluso podemos desestructurar esto y agregar aquí ID de película porque en nuestra ruta, definimos nuestro nombre de variable de ruta a ID de película Ahora en el lugar de esta DU, agregamos a etiquetar y aquí mismo, películas individuales entre corchetes, ID de película, y eso es todo. Guarda los cambios y echa un vistazo. Ver, aquí obtenemos nuestra identificación. Espero que ya estén claras todas sus dudas relacionadas con el ruteo. Siempre hay actualizaciones o sintaxis diferente para escribir código, pero los conceptos centrales nunca cambiarán, y eso es lo que quiero enseñarte. Una vez que tus conceptos básicos estén claros, podrás aprender nuevos conceptos y sintaxis rápidamente. Si continuamente estás viendo este curso, por favor date un pequeño descanso y toma poco de aire fresco y te veré en la siguiente sección. 88. Sección 09 Llamada a una API: Bienvenidos a la Sección nueve del curso de reacción definitiva. Entonces, como sabemos, react se utiliza para construir front y parte de nuestra aplicación. En el mundo real, también tenemos backend, que ejecuta lógica y almacena datos en base de datos y también se utiliza para la autenticación Si quieres trabajar solo como desarrollador de react, no necesitas aprender backend como no Js, jango o asp.net Pero necesitas aprender cómo podemos conectar nuestra aplicación de reacción con backend Y eso es lo que vamos a aprender en esta sección. Entonces, vamos a sumergirnos en esto. 89. useEffect Hook en detalle: Antes de comenzar a llamar a un EPI, primero, entendamos adecuadamente qué es use effect hook y cómo podemos usarlo Por lo que SiluuseFect se utiliza para realizar efectos secundarios en nuestro componente Los efectos secundarios son acciones que se realizan con fuera del mundo. Realizamos un efecto secundario para llegar fuera de nuestros componentes de reacción para hacer algo. Por ejemplo, recuperar datos de API, almacenar datos en el almacenamiento local, que vemos en Project one, actualiza directamente la función domo y temporizador como set timeout o set interval Estos son los efectos secundarios más comunes en reaccionar. Entonces, para realizar cualquier tipo de efectos secundarios, necesitamos usar el efecto Hook. Ahora veamos cómo funciona este efecto de uso. En esta sección, usaremos nuestro proyecto de enrutamiento anterior porque crear un nuevo proyecto para cada sección es poco tedioso Entonces aquí, en este componente de vendedor, primero, importamos el efecto de uso de react, y después de eso, llamamos a este efecto de uso en nuestro componente funcional. Ahora bien, como saben, este efecto de uso hooks toma dos argumentos. La primera es la función Colbek en la que realizamos nuestros efectos secundarios, y después de eso, tenemos array de dependencias Por ahora, no pasemos esta matriz de dependencias y dentro de esta función callback, simplemente escribimos consola dot log component mount Guarde este archivo y eche un vistazo. Abre Consola y ve a la página de administración. Ver, redireccionamos a la página principal porque tenemos que establecer un rol de usuario para admin. Entonces en el componente admin, cambiamos este rol a admin. Guarde estos y ahora intente abrir la página de administración y vaya a la página del vendedor. Aquí podemos ver que obtenemos montaje de componentes. Obtenemos esta consola dos veces por el modo de reacción, que ya les dije antes. Modo React Stit, renderiza nuestro componente dos veces en proceso de desarrollo Ahora bien, este efecto de uso se ejecutará en cada montura y se volverá a renderizar. Pero primero entendamos cuándo nuestros componentes se montan o renderizan. Entonces, el montaje de componentes es cuando nuestro componente se muestra por primera vez en nuestro navegador. Ahora, después de que nuestro componente se monte en nuestro navegador, si algo cambia o actualiza en ese componente, provocará render. Entonces, si aquí no pasamos ninguna dependencia, esta función Colvec se ejecutará en el montaje de componentes y rerender, lo que significa cuando algo cambia en el componente del vendedor, así de simple como eso Entonces digamos esto en vivo. Aquí, no tenemos nada que ver re render. Primero, agregamos aquí fragmentos de reacción porque vamos a agregar múltiples elementos. Ahora agreguemos un cuadro de entrada para manejar su valor, creamos una variable de estado llamada name y set name y pasamos cadena vacía como valor predeterminado. Esto lo hemos hecho muchas veces, bien. Ahora aquí pasamos evento sin cambios, y aquí obtenemos el objeto del evento, función de flecha y el nombre del conjunto a su valor actual. Entonces, ¿cómo podemos obtener el valor actual? ¿Verdad? Mediante el uso de evento punto objetivo valor de punto. Sencillo. Guarda los cambios y echa un vistazo, actualiza esta página, y aquí podemos ver que obtenemos montaje de componentes, ahora escribimos algo en esta entrada y ya puedes ver, volvemos a obtener montaje de componentes. Ahora otra vez, si escribimos algo y C, obtenemos el montaje de componentes una vez más. Déjame explicarte lo que está pasando aquí. Después de que nuestro componente se monte, escribimos en este cuadro de entrada, que cambiará este nombre de estado en nuestro componente y eso provocará render y por eso, nuestro efecto de uso se ejecutará. Siempre que queramos ejecutar algún código en mount y render usamos use effect sin ninguna dependencia. Ahora en esta siguiente lección, veremos otras dos variedades de uso efecto gancho. 90. Dependencias de usoEfecto: Así que en la lección anterior, vemos cómo podemos ejecutar la función en mount y re render. Ahora, a veces queremos ejecutar nuestra función de devolución de llamada solo una vez cuando nuestro componente se monta o se muestra en el navegador Es realmente simple y fácil. Simplemente tenemos que pasar aquí las dependencias array como array vacío, guardar los cambios y tomar un see, aquí obtenemos el primer montaje de componentes de tiempo Después de eso, si cambiamos algo en nuestro componente, ese efecto de uso no se ejecutará. Al usar esta dependencia ETR, obtendremos datos de API porque solo queremos festejar datos una vez, lo que ya hicimos en nuestro proyecto también, ¿verdad? Otro ejemplo, supongamos que llamamos a una API, que devolverá el número de notificación, para que podamos cambiar el título de nuestra página web acuerdo a ese número. Primero, almacenamos el número de notificación de dominio a cinco y después de eso, aquí escribimos el título del punto del documento es igual a en CTI, agregamos corchetes de dólar C, notificación, y después de eso, nuevas notificaciones Guarda los cambios y echa un vistazo. Ver, aquí obtenemos título de notificación personalizado. Esta es la cantidad de aplicaciones reaccionan que muestran el título dinámico. Ahora supongamos que en el lugar de esta notificación, queremos mostrar este estado de nombre. Aquí, escribimos nombre y dólar corchetes Cali. Aquí agregamos nombre, guardamos los cambios y echamos un vistazo. Fresca la página y mira aquí solo obtenemos el texto del nombre porque actualmente nuestro nombre es cadena vacía. Pero si escribimos algo en esta entrada, no obtenemos ese nombre en nuestro título porque este efecto de uso se ejecutará solo una vez debido a esta matriz vacía. Pero aquí queremos ejecutarlo cada vez que cambiara esta variable de nombre. Así que aquí acabamos de pasar variable de nombre en esta matriz de dependencias También puede pasar aquí múltiples variables, guardar los cambios y echar un vistazo. Puedes ver ahora nuestro título tiene nombre actualizado, así es como funcionan las dependencias en efecto de uso 91. useEffect cleanup function: Ahora veamos el último e importante concepto de uso efecto Hook. Así que a veces necesitamos agregar la función de limpieza para eliminar los efectos secundarios Por ejemplo, aquí sólo estamos actualizando el título. Ahora imagina aquí estamos suscribiéndonos a la sala de chat, y si nos movemos a otra página, queremos darnos de baja a esa sala de chat Entonces, para cancelar la suscripción de la sala, necesitamos usar la función de limpieza Conocer este ejemplo es un poco difícil de entender. Déjame simplificarte para ti. Imagina que este es nuestro componente de chat en el que las personas están charlando. Cuando dos personas están conversando, ambas personas necesitan suscribirse o conectarse a la misma identificación de habitación. Debido a eso, ambas personas están recibiendo el mensaje inmediatamente en su pantalla. Pero si una persona salió de la sala de chat, entonces tenemos que darse de baja o desconectarnos de esa sala para que esa persona no reciba mensaje en su pantalla En la mayoría de los casos, no necesitamos usar la función más limpia a veces tenemos que hacerlo, y por eso quiero mostrarte esto. Así que aquí, vamos a eliminar este código no deseado, y de nuevo agregamos consola dot log component mount. Y al final de nuestra función de devolución de llamada, queremos agregar la función de limpieza. Entonces aquí devolvemos una función. Y en esta función, podemos escribir nuestra lógica de función de limpieza Esta función de limpieza se ejecutará cuando nuestro componente se desmonte o se retire de Así que aquí simplemente escribimos consola punto log componente desmontar Guarda los cambios y echa un vistazo. Refresca la página, y aquí podemos ver primero, obtenemos el montaje de componentes, luego el desmonte de componentes, y nuevamente el montaje de componentes Como te dije, por el modo react street, nuestro componente se renderiza dos veces. Entonces primero, se montará, luego reaccionará en modo calle, quitará ese componente, y es por eso que llegamos aquí componente desmontar Y después de eso, nuestro componente vuelve a montarlo. Ahora, si vas a cualquier otra página, aquí conseguimos de nuevo desmontar componente porque nuestro componente se eliminó de nuestra pantalla Entonces así es como funciona la función de limpieza . No te preocupes por eso. Solo usaremos la función más limpia apenas una vez en nuestra aplicación. Entonces, para recapitular rápidamente, usefect se utiliza para realizar efectos secundarios en El efecto US tiene dos parámetros, primero, función de devolución de llamada y segundo, matriz de dependencias, que es opcional Por matriz de dependencias, el efecto de uso tiene tres variaciones. El primero es sin ninguna dependencia, que ejecuta esta función de devolución en mount y cada re render El segundo es el array vacío, que ejecuta esta función de Calbeck solo en mount y el último es array de dependencias con variables, que ejecuta esta función de Calbeck en render y también cuando alguna de estas variables cambiará Una cosa más, a medida que agregamos gancho de estado de uso múltiple en nuestro componente, también podemos agregar gancho de efecto de uso múltiple en nuestro componente, así de simple como eso. No repito este efecto de uso gancho muchas veces, pero solo quiero asegurarme de que tengas los fundamentos correctos de uso efecto gancho Y también, quiero explicar mount, rerender, y unmount, que llamó como ciclo de vida de los componentes Entonces aprendes ambos conceptos usando una sola lección. 92. Fundamentos de las solicitudes HTTP: Ahora antes de llamar a API, veamos qué es SDDPRquest Entonces como conocemos a nuestro cliente, o podemos decir si nuestro navegador quiere algunos recursos, por lo que solicitará servidor usando Internet. Esta solicitud se llama como SDDPRquest. Entonces, en palabras simples, este SDDPRquest se trabaja como un puente entre clientes y servidores Ahora, cuando el servidor recibe SDDPRquest, devolverá algunos recursos, que el cliente solicita Ejemplo, anteriormente configuramos STDPRquest para obtener los datos de la película Entonces el servidor TMDB toma nuestra STDPRquest y luego nos envía Ahora bien, hay algunos métodos que describen qué tipo de tarea queremos realizar. Entonces primero, tenemos Get request, que se utiliza para obtener datos del servidor Ya vimos esto bien. A continuación, tenemos post request, que se utiliza para enviar datos al servidor, como formulario de registro o formulario de inicio de sesión. A continuación, hemos puesto petición, que se utiliza para sustituir los datos en el servidor. Después de eso, tenemos solicitud de parche, que se utiliza para actualizar datos específicos en el servidor. Ahora podrías preguntar, ¿cuál es la diferencia entre put y patch? Por ejemplo, tenemos servidor el cual tiene información sobre diez libros. Ahora bien, si queremos reemplazar este libro con nuevos detalles del libro, entonces usamos put request. Pero si queremos actualizar unos detalles específicos del libro, como queremos actualizar su precio, aquí no estamos reemplazando todos los detalles del libro, sino que solo estamos cambiando la parte específica de los detalles de este libro. Entonces en este caso de uso, utilizamos el método patch. Y por último, tenemos el método delete, que se utiliza para eliminar un dato específico. Ya estamos haciendo esta solicitud cuando estamos utilizando algún sitio web, y usamos Get request muchas veces al día. Por ejemplo, abrimos sitio web udemy.com. Aquí estamos enviando solicitud para obtener página web del servidor, para que el servidor devuelva esta página web como respuesta. Aquí estamos usando GetRquest sin saberlo. Ahora en la siguiente lección, enviaremos Obtener solicitud para obtener datos del servidor. 93. Recupera datos de vendedores: Ahora comencemos con obtener datos de API. Sé que ya lo sabes, pero quiero revisarte y además sin obtener datos, ¿cómo podemos realizar la funcionalidad de actualización o eliminación? Obtengamos rápidamente datos de API. Aquí usaremos API falsa, que funcionará igual que la API original, que obtendrás del desarrollador de Bend. Dirígete a Jason placeholder.typicod.com. Esta API está construida para probar y aprender a llamar a una API. Rodar hasta el fondo, y aquí podemos ver diferentes tipos de datos, post, comentarios, fotos, hacer, etcétera Vamos a utilizar los datos de este usuario. Abrimos estos y aquí podemos ver que obtenemos estos diferentes datos de usuarios. Consideraremos a estos usuarios como vendedores para nuestro proyecto. Copia este APIURL y vuelve al código VS. No necesitamos este efecto de uso, y agreguemos el efecto de uso desde cero. Así que usa efecto, función de devolución de llamada, y aquí lo que agregamos matriz de dependencias con variables o sin dependencia Correcto, agregaremos array vacío como dependencias porque solo queremos obtener datos una vez de API Ahora dentro de esta función de devolución de llamada, llamaremos a nuestra API para obtener datos Ahora, anteriormente, usamos método fetch para llamar a API en nuestro segundo proyecto Pero ahora usaremos la biblioteca más popular para llamar a API en react, que es XOS Entonces abre terminal y agrega nueva terminal, y aquí mismo, NPM instala AXOS y presiona Enter No te preocupes por Axios. Es más fácil de usar que el método fetch. Ahora en la parte superior, ingresamos Axios desde el paquete Axios. Ahora en nuestro uso efecto gancho, escribimos Axios punto Ahora aquí, tenemos que agregar nuestro método SDTP, que es get para obtener los datos Ahora dentro de esta función, tenemos que agregar nuestra API en códigos, igual que hicimos en el método fetch Ahora esta expresión devuelve una promesa. Entonces para manejar, prometer, lo que podemos usar, escribir. Podemos usar entonces método o acing esperar. Aquí escribimos entonces y obtenemos aquí respuesta, función flecha, y simplemente consultamos dot log esta respuesta. Guarda los ginges y echa un vistazo. Abra la consola. Ver, aquí obtenemos esta respuesta de API. Veamos esta solicitud con más detalles. Entonces aquí abrimos pestaña Red. Por ahora, no obtenemos ninguna solicitud. Refresca esta página, y podremos ver un montón de solicitudes de documentos y guiones. Pero sólo queremos ver la solicitud de búsqueda. Entonces aquí seleccionamos Filtrar, fetch o XHR, que significa XML SDDPRquest aquí obtenemos dos usuarios que solicitan debido Aquí podemos ver el código de estado a 200, lo que significa tamaño exitoso de nuestra solicitud, y tenemos tiempo para completar esa solicitud. Estos son detalles sobre esta solicitud específica de STTP. Veamos qué hay dentro de esto. Aquí podemos ver los encabezados de esta solicitud SDTP. Entonces cada solicitud SDTP y respuesta dividida en secciones, encabezado en el que definimos metadatos, y en el cuerpo, definimos u obtenemos los datos Así que aquí podemos ver algunos detalles generales del encabezado sobre nuestro SDDPRquest Podemos ver aquí URL, método, código de estado, dirección remota, que es la dirección IP del cliente. Ahora, después de eso, tenemos encabezados de respuesta que servidor envía con respuesta. La mayoría de las veces, no necesitamos preocuparnos por eso, y por fin, tenemos encabezado de solicitud. Además, no nos preocupamos por eso. Ahora en la pestaña de vista previa, tenemos la vista previa de nuestros datos. Y en esta pestaña de respuesta, obtenemos nuestros datos de manera estructurada. Ahora, volvamos a Consola. Y aquí podemos ver en este objeto de respuesta, estamos obteniendo estos datos de configuración en los que obtenemos nuestros datos, encabezados por solicitud de XOS status 200, que es para éxito y texto de estado La mayoría de las veces, sólo estamos tratando con estos datos. Así que vamos a mostrar esta lista de datos en la página de nuestro vendedor. Entonces para mostrar los datos, tenemos que almacenarlos en un estado. Así que creamos una variable de estado llamada sellers y set sellers y pasamos aquí matriz vacía. Ahora, en el lugar de este registro de puntos de consola, pasamos la función Setsellers, y dentro de esta, pasamos los datos de punto de respuesta Ahora, simplemente mostremos que los vendedores. Entonces en corchetes Ci, vendedores puntean Mapa, aquí conseguimos a cada vendedor y devolvemos una etiqueta de párrafo y pasamos aquí el nombre del punto del vendedor. Y como sabemos, para el método de mapa, tenemos que añadir también atributo clave. Así que la clave es igual al ID de punto del vendedor, que es único para cada vendedor. Ver los cambios y echar un vistazo. Ver, aquí obtenemos el nombre de este vendedor. Se puede ver usando axios, no necesitamos hacer un paso adicional, cual hicimos en el método fetch Espero que todas sus dudas sobre el método G sean ahora claras. 94. Agregar indicador de carga: Ahora, cuando enviamos solicitudes al servidor, tomará algún tiempo como medio segundo o menos. Pero a veces si nuestros datos son grandes, o la conexión a Internet del usuario es lenta, entonces tenemos que mostrar el indicador de carga en nuestra página web. Entonces en la parte superior, aquí creamos una variable de estado llamada ioading y establecemos Iloading Como valor predeterminado, pasamos false. Ahora en nuestro gancho de efecto de uso, antes de comenzar a parchear los datos, configuramos se está cargando a true Y después de obtener nuestros datos, que está en este método entonces, agregamos aquí bloque de código, y en nueva línea, configuramos loading a false. Tan simple como eso. Ahora, antes de nuestro método de mapa, podemos agregar culipracket y agregar aquí condición si su carga Entonces mostramos aquí la etiqueta ST, y en el interior, agregamos cargando texto. Guarda los cambios y echa un vistazo. Refresca la página y mira aquí obtenemos cargando etiquetas solo por milisegundos porque mi conexión a Internet es rápida y además el tamaño de los datos es pequeño Ahora, hagamos que nuestro Internet sea lento. Entonces en la pestaña de redes, aquí en este trotonado podemos seleccionar rápido tres G, lento tres G, también Así que vamos a seleccionar lento tres G y reprimir la página. Puedes ver aquí obtenemos este texto de carga, por lo que está funcionando bien. Ahora a veces queremos mostrar indicador de carga para toda la página. Por ejemplo, aquí mostramos datos y también tenemos entrada S etiqueta tres. Solo queremos mostrar el cargador cuando los datos del vendedor se están volviendo rápidos. Pero a veces queremos mostrar el cargador para toda la página. Para eso, simplemente agregamos si condición antes de esta escrita y condición es la misma Si la carga es verdadera, entonces devolvemos esta etiqueta ST con carga Guarda los cambios y echa un vistazo. Refresca la página y mira aquí obtenemos este texto de carga para toda esta página de centros de administración. Por ahora, no lo necesitamos. Entonces, eliminemos esta condición if y guardemos este archivo. Ahora agreguemos rápidamente spinner de carga en el lugar de este texto de carga. Así que dirígete a cargar dot IO slash CSS. A partir de aquí, tenemos 12 cargadores básicos de CSS gratuitos en SDML y CSS puros Supongamos que queremos mostrar este cargador. Da click en él, y aquí obtenemos el marcado SDML en la parte inferior y los estilos CSS en la parte superior Copia este marcado STM, y en la carpeta components, creamos una carpeta más llamada Common y dentro de éstas, crearemos un nuevo componente específico para loader La razón por la que agregamos este cargador en esta carpeta común es que este cargador no es específico solo de la página de administración. Podemos usar loader en diferentes páginas. Depende totalmente de nosotros. Primero, aquí agregamos boilerplate y pegamos aquí, nuestro marcado SDML Y en el lugar de esta clase, agregaremos el nombre de la clase. Ahora en la parte superior, vamos a importar CSS cargador de archivos CSS punto. Y para eso, creamos un nuevo archivo en carpeta común, loader dot Css. Ahora de vuelta al navegador, copia estos estilos desde aquí y péguelos en el archivo css de punto loader. Ahora podemos ver actualmente nuestro color cargador es el blanco. Podemos cambiarlo a partir de aquí. Cambiemos a un CD CD CD, que es de tipo gris de color. Guarde este archivo y también guarde este componente cargador. Y ahora vamos a mostrar este cargador. El lugar de este texto de carga. Retire esto y agregue aquí el componente del cargador. Guarda los cambios y echa un vistazo y mira aquí estamos obteniendo este cargador después de esta entrada. Vamos a moverlo en la nueva línea. Entonces aquí simplemente podemos envolver esta cargadora con Du. Guarde los cambios y vea, aquí obtenemos cargador en nueva línea. Esto se ve bastante bien. 95. Manejo de errores: Cuando estamos trabajando con API, es importante manejar errores porque si los usuarios han desaparecido la conexión a Internet o intentan obtener datos no deseados, tenemos que mostrarles error. Ahora, antes de esto, aquí noto algo. En lugar de envolver este componente cargador en Dieu, podemos agregar elemento cargador JSX Así que el componente de cargador de pluma, y aquí envolvemos este dado con otro du. Guarde este archivo y vuelva al componente del vendedor. Aquí después de este estado de carga, agregamos una variable de estado de uso más llamada errores y establecemos errores. Y aquí pasamos cadena vacía como valor predeterminado. Ahora, como sabrás cuando estamos trabajando con promesas, podemos usar el método catch para el manejo de errores. Déjame mostrarte. Así que después de este método entonces, agregamos el método de caché, y aquí obtenemos el objeto de error, función de error, y vamos simplemente a la consola de registro de punto de este objeto de error. Básicamente, cuando tenemos error en esta promesa o en este método entonces, obtenemos ese error en este objeto de error. Entonces hagamos un error tipográfico aquí en API, guardemos los cambios y echemos un vistazo Abra la consola, y vea, obtenemos objeto de error con un montón de detalles. En esta propiedad message, obtenemos el mensaje de error, y en esta respuesta, obtenemos el mensaje de error del servidor. Actualmente, esta API de JCNPlaceholder no está enviando ningún mensaje, pero si tenemos nuestra propia API, entonces puede devolver nuestro mensaje de error personalizado Vamos a mostrar este mensaje en nuestra pantalla. Aquí, añadimos cod blog, primero, queremos establecer está cargando a caídas porque incluso si obtenemos error, todavía queremos hacer carga a caídas, y por fin, establecemos errores a mensaje de punto de error. Ahora, agreguemos condición después de este cargador. Si hay errores disponibles, entonces volvemos énfasis etiqueta, y aquí simplemente mostramos errores variable. Guarda los cambios y echa un vistazo. Ver, aquí estamos recibiendo este error. Ahora, eliminemos Tipo de la URL API, guardemos este archivo, y veamos aquí obtenemos nuestros datos. Entonces está funcionando bien. puede ver lo sencillo que es mostrar el cargador y los errores con la llamada API. Solo necesitamos entender lo básico. 96. Promete con async wait: Ahora, veamos rápidamente cómo podemos manejar promesa y los errores con una sincronización aguardan. Entonces, por ahora, comento este código, y después de nuestro efecto de uso, creamos una nueva función llamada fetch sellers, función de error Y dentro de esto, agregamos esta expresión desde aquí. Y también en la parte superior, agregamos set está cargando a true. Ahora, como sabemos, esta expresión devuelve nuestra promesa. Entonces agregamos aquí wait y para usar wait, tenemos que hacer nuestra función asincrónica Ahora, vamos a almacenar este valor en la variable llamada respuesta. Y después de eso, simplemente copiamos nuestro código de entonces método y lo pegamos aquí. Ahora, llamemos a esta función en uso efecto. Guarda los cambios y echa un vistazo. Verás, está funcionando. Ahora veamos cómo podemos manejar el error. Entonces para manejar el error en como espera, tenemos que usar try and catch block. Así que escribimos try catch y seleccionamos esta sugerencia y vemos que obtenemos este bloque try y cache. Este es el poder de la extensión ES siete. Ahora vamos a mover este código en Try block y mover este conjunto es cargando fuera de este bloque. Ahora en el bloque catch, simplemente copiamos el código de este método catch. Cambiamos este nombre de atributo de error a error. Entonces, en palabras simples, si algo salió mal en este bloque seco, entonces este bloque de boceto se ejecutará hagamos un error tipográfico aquí, digamos los cambios, y reprimamos la página Ver, aquí nos sale este error. Así es como manejamos los errores y prometemos en Awit asincrónico. Pero aquí podemos comparar este código tanto. Podemos ver que nuestro código anterior parece más mantenible y más organizado que este ávido asincrónico En nuestro proyecto de película maníaco, errores, y por eso nuestro código se ve más sencillo con un zincavt Entonces, para el resto de esta sección, utilizaremos este método de banda. Puedes usar lo que quieras depende totalmente de ti. 97. Agregar un nuevo vendedor: Ahora, veamos cómo podemos agregar o crear nuevos datos de vendedores. Entonces antes que nada, después de esta entrada, agregamos un botón llamado Ed seller. También agregamos aquí en clic evento y pasamos aquí nombre de función, agregamos vendedor. Ahora definamos esta función add seller. Entonces const, agrega vendedor, función de flecha, y dentro de esta función, primero, tenemos que crear nuevo objeto vendedor Entonces const, nuevo vendedor equivale a objetar. Y antes que nada, tenemos que pasar nombre y nos fijamos a este estado de nombre. Aquí clave y valor, ambos nombres son iguales, así que podemos eliminar estos. Aquí, también tenemos que agregar ID porque estamos agregando este ID como clave en nuestra lista. Así que aquí establecemos ID para vendedores array dot Length más uno. Ahora hay dos formas de manejar datos en el sitio web mientras enviamos o actualizamos datos usando API. Primero, podemos actualizar nuestros datos o UI en el navegador. Después de eso, podemos llamar a API para agregar o actualizar esos datos. Este método se llama como actualización optimista. Ahora, hay una segunda forma en la que primero llamamos API para agregar o actualizar los datos, y después de eso, actualizaremos nuestra interfaz de usuario. Este segundo método se llama como actualización pesimista. Casi todos los sitios web modernos utilizan un enfoque optimista porque es rápido y más fácil usar en comparación con el enfoque pesimista Ejemplo, piensa en el sitio web de redes sociales. Si te gusta una publicación, debe mostrar inmediatamente el like. Si usamos un enfoque pesimista, entonces el navegador llama a API para agregar como en esa publicación y después de eso, se mostrará al usuario, cuál es más rápido Por supuesto, optimista. Aquí, también utilizamos un enfoque optimista. Antes de llamar a API, configuramos vendedores para hacer arreglos aquí, primero agregamos datos de vendedores usando el operador de propagación, y después de eso, agregamos nuestro nuevo objeto de vendedor. O podemos agregar este nuevo objeto vendedor al principio. Creo que eso es más beneficioso. Guarda los cambios y echa un vistazo. Escribe el nombre aquí y haz clic en agregar vendedor. Ver, aquí conseguimos nuevo vendedor, así que está funcionando. Ahora, llamemos a API para agregar o crear nuevos datos. Así que usamos aquí axios punto post método para crear los nuevos datos Ahora vamos a copiar esta API de nuestra función fetch y pasamos esta API aquí Ahora, después de eso, en segundo parámetro, tenemos que pasar nuestro nuevo objeto vendedor porque ese objeto queremos agregar. Tenga en cuenta que esta API de publicación no usará nuestro ID porque ID siempre es generado por el back-end. Pero aquí, estamos usando ID en K, y por eso agregamos este ID en nuestro objeto. Te voy a mostrar eso en sólo un segundo. Entonces como sabemos, esta expresión devuelve una promesa. Entonces agregamos método, y aquí obtenemos respuesta y la respuesta tenemos los nuevos datos de usuario que obtenemos del servidor. Dentro de esto, agregamos vendedores de conjuntos y aquí primero, agregamos estos datos de punto de respuesta, y después de eso, agregaremos aquí vendedores antiguos usando operador de spread. Guarda los cambios y echa un vistazo. Escribe aquí nombre y haz clic en agregar vendedor. En el panel Red, podemos ver aquí nueva solicitud. Veamos esto. Y aquí en encabezado, tenemos URL de solicitud, método de solicitud para publicar, y código de estado a 201, que se utiliza para los datos creados con éxito. Ahora veamos la carga útil que enviamos con API y en la vista previa, obtenemos user object, que devuelve esta API. Recuerda que esta API de marcador de posición JSON es un backend falso para solo aprender Siempre devolverá nuevo objeto de usuario con ID 11. Déjame mostrarte. De nuevo, haga clic en el vendedor del anuncio. Aquí en la carga útil, vemos ID 12, que estamos enviando y en vista previa, podemos ver que obtenemos ID 11. No importa cuántos registros enviemos, siempre devolverá objeto con ID 11, y es por eso que obtenemos error en Console. Niños con la misma clave 11. Ahora en esta API, tenemos que tener que manejar nuestro error. Entonces para eso, lo que usamos, correcto, usamos el método catch. Aquí obtenemos error object, y primero, establecemos errores a error dot Message. Y después de eso, necesitamos restablecer nuestra lista de vendedores a la lista anterior. Por ejemplo, aquí agregamos nuevo vendedor. Ahora, antes de llamar a esta API, estamos configurando a ese nuevo vendedor en nuestra lista. Pero si por alguna razón, obtenemos error o nos desconectamos, entonces tenemos que restaurar nuestra lista. Así que establece vendedores y aquí pasamos la matriz directa de nuestro vendedor. Guarda los cambios y echa un vistazo. En NetworkTab hacemos que nuestro sitio web fuera de línea ahora agregue nombre y haga clic en Agregar vendedor Ver, por sólo un segundo, vemos nuestro nombre, pero después de eso, restauramos nuestra lista a lista anterior porque tenemos error de red. Entonces así es como hacemos post request. Se puede ver lo sencillo que es. 98. Eliminar al vendedor: Ahora veamos cómo podemos eliminar vendedor individual de nuestra lista. Entonces, antes que nada, tenemos que agregar el botón de eliminar para cada nombre de vendedor. Pero antes de eso, pongamos nuestra aplicación en ningún enlace de acelerador. Ahora, aquí en nuestra función de mapa, envolvemos esta etiqueta de párrafo con Du y al final, agregamos botón llamado Eliminar. Guarda esto y obtenemos botón para cada vendedor. Pero esto se ve un poco feo. En lugar de mostrar en Du, podemos usar tab aquí. Antes de esta lista, agregamos tabla y dentro de ella, queremos te body. Ahora movamos nuestra lista dentro de este cuerpo de té y en el lugar de este du agregamos TR para tableow Y envolvemos esto tanto en etiqueta TD. Entonces agregamos múltiples cursor usando Alter plus click u Option plus click y agregamos aquí TD y vamos a mover esta etiqueta TD de cierre al final. Y por fin, tenemos que agregar clave a nuestra etiqueta padre, que está dentro de esta etiqueta TR. Los cambios y echar un vistazo. Ver, aquí obtenemos botón de borrar en una línea y con el mismo espacio. Pero aquí, tenemos este acolchado extra. Entonces en nuestra etiqueta TD, eliminamos esta etiqueta de párrafo. No lo queremos. Guarda esto y mira, obtenemos lista perfecta. Ahora, agreguemos la funcionalidad retrasada. Entonces aquí en este botón, agregamos al hacer clic evento y pasar aquí, eliminar función vendedor. Pero aquí, necesitamos pasar el ID de vendedor actual porque al usarlo, eliminamos a nuestro vendedor. Entonces, ¿cómo podemos pasar eso? Derecha, agregamos aquí la función de flecha, y después de eso, podemos pasar aquí el ID del punto del vendedor. Tan simple como eso. Ahora, vamos a definir esta función, eliminar vendedor. Aquí obtenemos ID y función de flecha. Aquí, primero tenemos que mostrar el cambio de la interfaz de usuario y después de eso, llamaremos a API para eliminar. Puedes pausar esta lección y comenzar a hacerlo por tu cuenta, o puedes seguir adelante. Ahora, como sabemos, utilizamos el método de filtro para eliminar. Vendedores dot Filtro. Dentro de esto, obtenemos a cada vendedor y aquí pasamos condición como ID, no es igual a ID. Ahora bien, este método de filtro devolverá una nueva matriz, por lo que podemos pasarlas directamente a la función set sellers. Envolvemos esto con paréntesis y addre set sellers. Ahora, llamemos a API fall delay task. Nuestra API debería verse así. Si queremos eliminar vendedor que tiene idFi entonces al final de esta API, agregaremos pi Axios punto Delight. Aquí agregamos esta API en vectis y al final, agregamos slash Dollar Calipacket y aquí agregamos este Ahora, después de eliminar esto, no queremos hacer nada porque ya eliminamos ese objeto de nuestra lista, así que no necesitamos entonces método, sino que necesitamos método cach para o manejo Entonces podemos copiar este método de captura de función de vendedor de anuncios y simplemente pegarlo aquí. Entonces, si tenemos algún error, entonces restaurará la lista de ese vendedor. Guarda los cambios y echa un vistazo. Haga clic en eliminar y vea que se eliminó de aquí. Y además, en la pestaña Red, tenemos una solicitud, y en su encabezado, tenemos método para eliminar, y podemos ver en respuesta, no obtenemos nada. Ahora verifiquemos el manejo de errores. Entonces agregamos aquí uno Typo, guardamos este archivo y damos clic en eliminar A, obtenemos error, y nuestra lista también se restaura. Por lo que también está funcionando. Ahora antes de que nos olvidamos de eliminar este error tipográfico, corrijamos esto 99. Ejercicio para llamar a API: Ahora es el momento de poco ejercicio. Entonces a medida que añadimos la funcionalidad Eliminar, quiero que agregues funcionalidad de actualización. Entonces, para cada vendedor, tenemos Actualizar patrón, y cuando hagamos clic en eso, cambiaremos el nombre del vendedor a nombre más actualizado al final. Tan simple como eso. Déjame darte una pequeña pista. Nuestra expresión Axios se ve así. Usamos tu método de parche porque solo estamos cambiando un detalle. Ahora este vendedor actualizado es el objeto vendedor en que actualizamos el nombre del vendedor actual. Entonces quiero que pruebes este ejercicio porque practicar por tu cuenta te hará mejor desarrollador. Así que pruébalo y luego mira la solución. 100. Solución Actualización del vendedor: Ahora, veamos la solución de este ejercicio. En primer lugar, agreguemos el botón Actualizar para cada vendedor. Entonces antes de este botón de borrar, teníamos una etiqueta TD, y dentro de esta etiqueta, agregamos un botón llamado Actualizar. Ahora, pasemos también el evento OnClick y pase aquí la función llamada vendedor de actualización Y aquí queremos pasar identificación. Así que la función de flecha y passar vendedor punto ID. Ahora, definamos esta función de vendedor de actualización. Así que const update vendedor es igual a aquí obtenemos ID, función de flecha Ahora dentro de esta función, primer lugar, crear objeto vendedor actualizado. Entonces const, vendedor actualizado equivale a objetar. Ahora aquí queremos agregar todos los demás detalles sobre vendedor actual. Entonces en el lugar de esta identificación, necesitamos los detalles completos del vendedor. Por lo que cambiamos este ID de punto de vendedor a vendedor, que es el objeto vendedor actual. Ahora vamos a conseguir el objeto vendedor aquí. Así que ahora aquí podemos agregar detalles completos del vendedor mediante el uso del operador de spread. Y después de eso, reemplazaremos nombre. Así nombre dos vendedor punto nombre, que es el nombre actual más en el espacio de códigos dobles actualizado. Ahora hemos actualizado el objeto vendedor, pero tenemos que reemplazar nuestros viejos detalles de vendedor con estos nuevos detalles en nuestra matriz de vendedores. No te confundas, mira esto. Así que aquí agregamos vendedores punto Mapa. Y dentro de esto, obtenemos cada función de flecha de vendedor, y aquí pasamos condición si como ID de punto es igual a ID de punto de vendedor, que estamos actualizando. Si es cierto, entonces devolvemos este objeto vendedor actualizado. De lo contrario escribimos sobre el mismo objeto vendedor. Tan simple como eso. Ahora, vamos a guardar esta matriz como nuestros vendedores. Así que envuelve esta matriz con paréntesis y agregamos aquí set sellers Si está confundido con este uso directo, entonces puede almacenar esta matriz en una variable separada y luego pasarla en vendedores de conjuntos. Depende totalmente de ti. Guarda los cambios y toma clic en Actualizar y mira aquí obtenemos este nombre actualizado, lo que significa que está funcionando. Entonces nuestra media tarea está hecha, y ahora solo tenemos que llamar a API. Así que aquí agregamos Axios y usamos el método patch y pasamos aquí nuestra API Así que vamos a copiar esto de la función de eliminar vendedor y pegarlo aquí. Ahora en el lugar de esta identificación, nosotros en el vendedor punto ID. Y en el segundo parámetro, pasamos a nuestro vendedor actualizado. Ahora, después de completar esta llamada a la API, de nuevo, no queremos hacer nada, así que no necesitamos entonces método, sino que necesitamos método de caché. Entonces copiemos este método de captura. Y pégalo aquí. Guarda los cambios y echa un vistazo. Da clic en Actualizar, y está funcionando. Podemos ver en respuesta, obtenemos nombre actualizado del servidor. Ahora vamos a comprobar si hay errores. Entonces hacemos aquí error tipográfico y guardamos esto. Haga clic en Actualizar y vea aquí obtenemos error y nuestra lista restaurada con datos antiguos. Por lo que también está funcionando. Ahora podemos eliminar este error tipográfico. 101. Crea una variable axios para solicitudes HTTP: Así que aquí, en nuestra aplicación, siempre que estemos haciendo solicitud de API, cada vez que tengamos que escribir nuestra URL completa, así podemos definir nuestra URL base para esta aplicación. Y después de eso, sólo tenemos que escribir usuarios. Déjame mostrarte a lo que me refiero. Entonces en esta carpeta fuente, creamos una nueva carpeta llamada Utils Dentro de esta carpeta, creamos un nuevo archivo llamado API ds client dot js para hacer sddprQuest Entonces dentro de estos, primero, ingresamos Xos desde XOS Después de eso, escribimos Xos dot create ahora en esta función, tenemos que pasar nuestro objeto de configuración Y en este objeto, tenemos propiedad URL base. Y aquí, podemos pasar nuestra URL base. Así que volvamos al componente de nuestro vendedor y copia esta URL base, que es la misma en todas las API y pégala aquí. Si estás trabajando en un proyecto diferente, entonces tienes que pasar aquí estás de vuelta y URL. Aquí, también podemos pasar nuestros encabezados API, que queremos enviar con nuestra solicitud API. Nuevamente, depende de API. Ahora, esto devolverá instancia para llamar a API. Exportemos esto por defecto. Guarda este archivo, y ahora cuando queremos hacer una solicitud de API con XOS, simplemente ingresamos esta instancia y hacemos lo mismo que hacemos con XOS originales Así que volvamos al componente del vendedor, y en lugar de importar Axios originales, importamos cliente API desde aquí vamos dos carpetas arriba, Utils y API Ahora en el lugar de los Axios, utilizamos cliente API Así que presiona Control más D o Comando más D varias veces y agrega aquí cliente API. Ahora en lugar de URL completa, solo pasamos aquí usuarios. Así que se esta URL base y con la edición de múltiples cursor, elimine esta URL base. Guarde esto y vea que funciona igual que antes. Entonces este cliente API funcionará igual que Axios, pero no necesitamos pasar baseURL para todas las Y debido a características como esta, mayoría de los desarrolladores prefiere usar Axios en lugar del método patch Estos son los conceptos básicos de llamar a una API manejando errores y display loader. A medida que reaccione va creciendo, muchas bibliotecas entrarán en esta imagen, pero los conceptos básicos de llamar a una API seguirán siendo los mismos. Por lo que seleccionar una biblioteca depende completamente de ti. 102. Sección 10: aplicación de comercio electrónico del proyecto 03: Bienvenido a la Sección diez del curso Ultimate react. A partir de esta sección, vamos a construir nuestro tercer proyecto, que es la aplicación de comercio electrónico. En este proyecto, traté de cubrir todos los conceptos importantes, útiles y avanzados que necesitas aplicar en la aplicación del mundo real. Entonces este va a ser un proyecto importante en tu cartera. Puedes ver una hermosa landing page de este sitio web. Después de eso, tenemos enrutamiento y nos llevan a la página de productos. Aquí obtenemos toda la lista de productos con función de desplazamiento infinito Desde arriba, también podemos ordenar nuestros productos por precio y calificación. En el sideware tenemos un par de categorías, y aquí obtenemos productos solo de esa categoría Ahora si hacemos clic en cualquier ficha de producto, obtenemos una página de producto detallada, cual tiene este selector de imágenes, y también aquí podemos agregar artículo a nuestra tarjeta con la cantidad de cantidad que queramos. Y la parte hermosa es que este sitio web es dinámico, lo que significa que todos estos datos provienen de Ben real que creé para este proyecto. Ahora en el momento en que agregamos artículo a tarjeta en el Nebr podemos ver aquí obtenemos una serie de artículos en nuestra tarjeta Ahora en la página de la tarjeta, obtenemos el detalle de la tarjeta en esta sencilla tabla. A partir de aquí, también podemos cambiar la cantidad de artículos. Con ese cambio, esta tabla de facturas se actualizará y obtenemos el costo final en la parte inferior. Podemos verificar nuestro pedido y nuestro CAT se vaciará, y podemos ver los detalles de nuestro pedido en la página Mi pedido. Por lo que es un proyecto importante, pero no difícil porque vamos a completar este proyecto paso a paso. Muchos desarrolladores se sienten grandes proyectos difíciles porque tratan de construir todas las cosas de una sola vez. Y por eso se sienten sencillo proyecto difícil. Entonces en este proyecto, también intentaremos construir primero nuestra UI, y después de eso, conectaremos nuestra aplicación con el nodo JS back end. Entonces estoy muy entusiasmado con este proyecto y espero que tú también lo estés. Entonces, vamos a sumergirnos en esto. 103. Configurar el proyecto y el estilo de diseño: Empecemos con el nuevo proyecto de frase. Así que abre tu carpeta en la que quieres trabajar abre terminal o símbolo del sistema en esa carpeta. Y aquí mismo, NPM, crea el blanco, a más tardar en rojo, y presiona Enter Ahora aquí agregamos nuestro nombre de proyecto, que es tarjeta Wish. Puedes usar lo que quieras. A mí me gusta este nombre. Ahora selecciona el framework que es react, y aquí tenemos que seleccionar el idioma, que es JavaScript. Entremos en ese proyecto por CD, Cartwis y golpeemos Ahora escribe NPM install para instalar todos los paquetes. Bueno. Esta carpeta en nuestro código VS. Así que código punto. Cerremos esta terminal. No lo necesitamos y además cerramos esta carpeta. Ahora, verifiquemos que nuestro proyecto está funcionando o no. Así que abre el terminal por Control más BT o Command más BT y escribe NPM run Down. Presione Control o comando y haga clic en este enlace, y está funcionando correctamente. Ahora, vamos a algunos estilos básicos y maquetación para nuestro proyecto. Entonces tenemos dos secciones en nuestra aplicación. La primera es, por supuesto, Navbar, y la segunda es la sección principal para el ruteo Así que aquí, vamos a abrir el componente de la aplicación, y antes que nada, vamos a eliminar todo el código, y simplemente añadir aquí código estándar. Ahora, definamos el diseño de nuestro sitio web. Entonces, antes que nada, agregaremos aquí el nombre de la clase a la aplicación. Ahora dentro de esto, tenemos para NaBR, agregar etiqueta Nau y pasar aquí Ahora a continuación, agregamos la etiqueta principal y dentro de esta, realizaremos todo el enrutamiento. Ahora agreguemos estilos para este diseño. En la parte superior, importamos period slash app dot CSS file. Guarde este archivo y abra el archivo css de punto de la aplicación. Eliminemos todos los estilos de aquí y agreguemos la aplicación dot. Queremos definir nuestra aplicación en fila. Así que usamos aquí display para gradar y calificar filas de plantilla a un píxel para la primera sección y Auto para nuestra sección principal. Los cambios y C, obtenemos nuestro layout en el medio. Así que vamos a eliminar los estilos predeterminados, que agregamos a nuestro proyecto. Así que abre el archivo CSS de punto índice, y vamos a eliminar todos estos mosaicos. No lo necesitamos. En primer lugar, teníamos corchetes star ci, margin to zero padding to zero, y size box to border box. Ahora, en el cuerpo, agregamos tamaño de fuente a 16 píxeles, color de fondo dos tiene F seis, FFA Guarda los cambios y echa un vistazo. Mira, aquí tenemos nuestro diseño, pero nuestra fuente se ve un poco fea. Vamos a agregar rápidamente fuente, abrir el sitio web de Google Fonts, y ya hemos seleccionado nuestra fuente, que usamos en proyecto anterior. Vaya a la sección Importar, copie esta CDN de Importación En nuestro archivo CSS índice en la parte superior, pegamos ese enlace CDN Ahora para aplicar la fuente, copiamos la familia de fuentes y la pegamos en nuestro estilo de cuerpo. Guarda los cambios y echa un vistazo. Ahora nuestra fuente se ve bien. 104. Crear componentes de barra de navegación: Ahora construyamos nuestro Navbar. Entonces, en lugar de escribir todo el código en el componente de la aplicación, crearemos un componente separado para nuestra barra de navegación Así que vamos a cortar esta Navbar desde aquí y en la carpeta fuente, creamos una nueva carpeta llamada components Dentro de esta carpeta, creamos una nueva carpeta más llamada Navbar Y dentro de esto, creamos un nuevo archivo llamado navbar dot JSX, y también creamos un archivo más para navbar Ahora en nuestro componente, digamos código estándar. Y en la parte superior, no olvides importar periodos slash navbar dot css file Ahora, antes que nada, vamos a marcar para nuestro componente Navbar Para que podamos dividir nuestro Nabar en secciones. El primero queda parte de nuestro Nabar que tiene nombre de nuestro sitio web y un cuadro de entrada con botón de búsqueda La segunda parte es que tenemos múltiples enlaces. Entonces en el lugar de esto debido, pegamos nuestra etiqueta NOW y le damos un nombre de clase a Navbar Ahora dentro de esta etiqueta, teníamos dos cuotas, una para el lado izquierdo y otra para el lado derecho Ahora en el primer du agregamos H una etiqueta y pasamos aquí el nombre de la clase al encabezado de subrayado NaBR Y aquí agregamos nuestro nombre de sitio web Carrito Deseo. Ahora, después de este H uno, agregamos un formulario con nombre de clase, formulario de subrayado NaBR Te diré más adelante por qué agregamos aquí formulario. Ahora, en este formulario, agregamos una entrada con texto tipo, y también agregamos nombre de clase a subrayado Navbar y marcador de posición para buscar marcador de posición para Y después de eso, agregaremos un botón con tipo submit y le daremos un nombre de clase, botón de subrayado de búsqueda, y aquí mismo, buscar Y eso es todo lo que queremos sumar en nuestra primera parte de NaBR. Añadiremos segunda parte, que tienen enlaces en la siguiente lección. Guarda los cambios y echa un vistazo. No obtenemos nada porque olvidamos agregar nuestro componente Nabar en nuestro componente de aplicación Entonces, en el componente app, agregamos aquí Nueva barra, y la importación automática funciona. Guarda los cambios y echa un vistazo. Mira aquí obtenemos nuestros elementos. Ahora agreguemos estilos para estos elementos. Entonces en el archivo CSS de punto Navbar, agregamos Navbar, y en corchetes Ci, primero, estableceremos display para marcar, alinear elementos al centro y justificar el contenido al espacio Por estos, nuestras dos partes se separan una de la otra. Ahora relleno a cero y 40 píxeles y color de fondo a blanco. Después de eso, teníamos encabezado de subrayado de punto Nebr, corchetes colli, margen derecho a 20 píxeles y tamaño de fuente a Guarde esto y vea aquí obtenemos nuestro rumbo. Ahora tenemos que mover esta forma en la misma línea. Entonces para eso, también tenemos que usar display flex y alinear elementos al centro. Así que vamos a hacer una clase separada para estas dos propiedades porque va a utilizar mucho en nuestra aplicación. Así que corta estas dos líneas, y en el archivo CSS de punto índice en la parte inferior, agregamos nueva clase llamada Align Center y dtiles pasados dentro de este Guarde este archivo y agreguemos esta clase primero antes nueva clase y también para este primer nombre de clase debido para alinear el centro. Guarde estos y vuelva al archivo css de Nabart. Ahora vamos a establecer estilos para nuestra forma. Sot NebruerScore formulario. Y en corchetes CL, agregamos ancho a 450 píxeles, altura a 40 píxeles, Bader a un píxel, sólido tiene CD CD CD radio de agua a cinco píxeles y relleno a tres píxeles Después de eso, tuvimos barra de búsqueda de puntos, búsqueda de subrayado, corchetes Cali, y dentro de estos, agregamos banderas a uno porque queremos que nuestra entrada cubra todo el espacio disponible en nuestro formulario Entonces para eso, también tenemos que agregar la clase Align Center a nuestro formulario. Guarde esto y vuelva a nuestro archivo CSS. Aquí agregamos altura al 100%, relleno a cero y siete píxeles, un tamaño a 20 píxeles, un peso a 500, borde a ninguno y también contorno a ninguno. Guarda los cambios y echa un vistazo. Déjame alejarme al 100% y ver que se ve bien. Ahora, agreguemos estilo para este botón de búsqueda. Entonces agregamos botón de subrayado de búsqueda, corchetes Ci, altura 200%, relleno a cero y tamaño de fuente de diez píxeles a 20 píxeles, peso de fuente a 500, Wer a ninguno, radio de borde a cinco Color redondo a tiene 64, 57f9. Color a blanco y cursor a puntero. Guarda los cambios y echa un vistazo. Verás, tenemos nuestra barra de navegación izquierda, pero aquí hay una cosa. Todas estas entradas y botón tiene familia de fuentes por defecto. Quiero usar nuestra fuente para ellos también. Así que en el archivo CSS punto índice, y mover esta familia de fuentes dentro de todos estos estilos. A elementos un monstruo en la fuente. Di esto y mira ahora esto se ve bien. 105. Añadir enlaces a la barra de navegación: Ahora, digamos enlaces en su NaBR. Entonces aquí en el segundo día, agregamos el nombre de la clase a NaBrUnderscore Ahora dentro de esto, queremos crear enlaces. Entonces agregamos etiqueta ECA y HF a has, y dentro de esto, agregamos home. Y para Imog agregamos etiqueta de imagen y le damos un nombre de clase al subrayado de tinta Ahora vamos a establecer algunas imágenes para nuestro proyecto. En la carpeta de recursos, tenemos la carpeta Proyecto tres, y dentro de éstas tenemos activos. Simplemente seleccione todas estas imágenes y colóquelo en nuestra carpeta Activos de código VS. Ahora en la parte superior, importamos cohete de aquí vamos dos carpetas arriba activos slash rocket dot PNG Y simplemente pasemos aquí este cohete. Guarda los cambios y echa un vistazo. Aquí conseguimos lo que queremos. Ahora, agreguemos estilo para este enlace. Entonces, antes que nada, pasamos el nombre de la clase en esta etiqueta de anclaje y lo configuramos Alinear el centro del subrayado y también agregamos Alinear el centro del subrayado antes de los enlaces de subrayado de la barra de navegación para alinear verticalmente nuestros elementos Guarde estos y en el archivo css de punto navbar en la parte inferior, agregamos Navbar subrayado Enlaces Cl corchetes, un tamaño a Después de eso, agregamos puntos NaBrUnderscore links, Aquí apuntamos a la etiqueta Anger, y dentro de este margen a 15 píxeles. Y por fin, anunciamos punto Enlace subrayado ImogkliBackets, ancho a 25 píxeles, y margen izquierdo a cinco píxeles . Di los cambios y mira aquí conseguimos bonito Enlace. Ahora vamos a establecer algunos estilos básicos para todas las etiquetas de anclaje. Entonces en el archivo CSS de punto índice, agregamos calibackets de anclaje, tamaño de fuente para heredar, peso de fuente Decoración de texto a non, color, heredar y cursor a puntero Mira las chinges y echa un vistazo. Ver, aquí obtenemos nuestro estilo, pero creo que nuestro tamaño de fuente no se aplica. Entonces inspecciono estos y veo aquí no obtenemos propiedad de tamaño de fuente. Probablemente escribo mal el nombre de la clase. Entonces en el componente Nava, aquí podemos ver, tengo que agregar enlaces subrayado NBR. Perdón por esto. Guarde esto y vea que se ve muy bien. Ahora podrías pensar cuando añadimos otros enlaces, así podremos crear componentes para este enlace individual. Así que corta este enlace de aquí y en la Nabarfolder, creamos un nuevo archivo llamado tinta con icono JSX también creamos un nuevo archivo para link con icon Ahora a veces podrías preguntar por qué creamos cada archivo CSS componente por separado. La razón es que si creamos un archivo CSS separado para cada componente, entonces podemos usar directamente ese componente en otros proyectos con su CSS. Aquí agregamos nuestro código boilerplate por RAFC y en la parte superior, importamos tinta de barra de periodo con Bueno. Ahora en el lugar de este vencimiento, pegamos nuestro enlace. Además, cortemos este estilo de imagen de enlace de Nabar y pegarlo en nuestro enlace con el archivo CSS de icono Ahora, hagamos que este componente sea reutilizable. Entonces aquí necesitamos tres accesorios, primer título de enlace, que es esta casa después de eso, link, que podemos pasar en este HF, y por último, necesitamos a Imog que usamos en esta Reemplacemos los valores estáticos con nuestros accesorios. Link Title e Imoge. Guarda este archivo, y ahora en el componente Nebar, agregamos aquí enlace con componente icono, y aquí pasamos nuestros accesorios Entonces título a casa, enlace a slash delantero e Imoge Ahora vamos a duplicar este enlace cinco veces más. Y para diferentes enlaces, necesitamos diferentes Imogs Entonces necesitamos también ingresar eso en la parte superior. También dupliquemos esta declaración de entrada cinco veces más y cambiamos este título a estrella e imagen a punto estrella brillante PNG A continuación, tenemos botón ID y botón ID de imagen. A continuación, tenemos memo e imagen, memo dot PNG. A continuación, pide una imagen para empaquetar. Y por fin, tenemos log image to log dot PNG. Ahora, en la parte inferior, cambiamos nuestro título de segundo enlace a productos, enlace a productos de barra diagonal e imagen a estrella Siguiente, título para iniciar sesión, Enlaces Login y botón de Imog a ID A continuación, tenemos título para registrarte, enlace para recortar registro e Imoge A continuación, tenemos título a M Órdenes, enlace para recortar Mis Pedidos e Imoge Y por fin, tenemos título para cerrar la sesión, link to slash, logout e Imoge Guarda los cambios y echa un vistazo. Mira, tenemos estos hermosos vínculos. Ahora solo necesitamos agregar el enlace del carrito, que es un poco diferente estos enlaces porque tenemos que agregar nuestro conteo de tarjetas. Entonces aquí agregamos una etiqueta de auto más, HRF para recortar carrito y aquí pasamos nombre de clase al centro de línea Ahora dentro de estos, pasamos nuestro nombre de enlace, que es carrito. Para el recuento, agregamos un párrafo y el nombre de la clase a los recuentos de subrayado del centro de línea y del carrito Y dentro de esto, pasamos nuestro número de conteo, que es cero. Guarde esto y agreguemos estilo para esto. Así que en el archivo CSS de punto Navbar en la parte inferior, agregamos recuentos de subrayado de tarjeta, corchetes Cl, y dentro de él, agregamos justificar contenido al centro, y es por eso que agregamos align center class antes de contar tarjetas Después de eso, ancho a 20 píxeles de alto a 20 píxeles, radio de orden 200% para círculo completo Color de fondo a un 64, 57f9, color a blanco Un tamaño a 15 píxeles y margen izquierdo a cinco píxeles. Aprovecha los cambios y echa un vistazo. Mira, aquí tenemos nuestros recuentos. Para que veas lo hermosa que se ve esta barra de navegación. Sé que la parte de estilo es un poco aburrida, pero también es parte necesaria de cualquier proyecto. Entonces tenemos que hacer eso. Y como lo estamos haciendo, simplemente hagámoslo alegremente 106. Crea sección de héroes: Ahora, construyamos nuestra sección de héroes para la página de destino. Esta sección de héroes es lo primero que verá el usuario en nuestro sitio web. Entonces tenemos que hacer esto realmente agradable. Entonces antes que nada, aquí creamos una nueva carpeta llamada home en la que almacenaremos todos nuestros componentes relacionados con la página principal. Así que crea un nuevo archivo llamado homepage dot JSX. Y aquí agregamos código boilerplate mediante el uso de RAFC. ¿Te diste cuenta de lo rápido y sencillo se vuelve esta reacción cuando acabamos de crear dos aplicaciones? Imagina que trabajas con cada proyecto con esta intensidad, hasta dónde puedes llegar en la carrera de desarrollo web. Es sólo cuestión de tiempo. Entonces, en nuestra página de inicio, queremos mostrar la primera sección de héroes, luego tenemos productos de características y luego también la sección de héroes. La razón por la que no creamos archivo CSS de punto de página de inicio porque no queremos agregar ningún estilo para nuestra página de inicio. Todo lo que eres parte son componentes separados. En la carpeta home, creamos un nuevo archivo llamado herosection dot CSS Además, creamos otro archivo, Herosection punto JSX. Agrega código estándar aquí, y en la parte superior, importamos la sección hero, ese archivo CSS Bueno. Ahora, en el lugar de este de, agregamos sección y le damos un nombre de clase, sección de subrayado de héroe Estas necesitamos dos partes. Primero para detalles y segundo solo para imagen. Así que crea D con clase Alinear subrayado centro veces dos. Bueno. Ahora en la primera parte, agregamos dos con nombre de clase, título de héroe, y dentro de él, escribimos por iPhone 14 P. Después de eso, agregamos un párrafo y le damos un nombre de clase, subtítulo de subrayado de héroe Y pasamos aquí dummiteg para subtítulo, así que escribe Lorem, 15, Y después de eso, agregamos una etiqueta de ancla para el botón Por ahora y le damos un nombre de clase, tinta de subrayado de héroe Ahora en la segunda parte, tenemos que agregar image tag, source a iPhone y darle un nombre de clase a hero underscore image Ahora, vamos a importar esta imagen en la parte superior. Así que importo iPhone de aquí vamos dos carpetas arriba activos iPhone 14 prob P. Guarda esto, y agreguemos componente de sección héroe en nuestro componente de página principal Guarde esto y también tenemos que agregar nuestro componente para el hogar en nuestro componente de aplicación. Puedes ver cómo Autoiport agiliza nuestro proceso. Di los cambios, y aquí nos sale el error. Lo siento, por error, agrego la sección de inicio archivo css punto. Entonces, en nuestro componente de sección héroe, cambiamos esto a hero section dot css file. Di los cambios y echa un vistazo. No podemos ver nada por nuestra gran imagen. Así que agreguemos estilo para nuestra sección de héroes. En el archivo CSS de punto de sección hero, primero agregamos sección de subrayado Hero, corchetes de Gully y dentro de él, configuramos display a GED, GED tienta columnas a una FR y una FR para lo mismo Altura hasta 550 píxeles, relleno a cero y 60 píxeles para izquierda y derecha. Color de fondo a negro y color de texto a blanco. Ahora después de esto, agregamos esa sección de subrayado héroe, corchete angular Aquí apuntamos a Du Culiacket y agregamos justificar el contenido al centro, flexionamos la dirección a la columna y el texto de línea a Aquí podemos usar la propiedad flexbox porque ya establecemos Align center class para estas inmersiones Ahora, después de esto, agregamos estilo por título de héroe, así que punteamos el título de subrayado de Hero, y el tamaño de fuente a 45 píxeles, peso de la fuente a 700 y el margen inferior a 15 píxeles Después de eso, habíamos conseguido el subtítulo de subrayado de Hero. Y dentro de esto, agregamos tamaño de fuente a 24 píxeles, margen inferior, 232 píxeles y ancho a 70%. Ahora después de este subtítulo, tenemos nuestro enlace, así que punto Héroe subrayado Y dentro de esto, agregamos relleno a 16 píxeles y 32 píxeles. El texto se transforma a espaciado entre letras mayúsculas a 1.5 píxeles de peso de fuente a 700, borde a dos píxeles, sólido como FFF, radio del borde a 32 píxeles, color de fondo a blanco y color a Voy poco rápido para la sección de estilo porque no quiero aburrirte explicando cada uno y solo estilo. Y además, no quiero usar estilo simple porque si nuestra aplicación tiene buena funcionalidad, pero el estilo no es bueno, entonces tu proyecto podría parecer un poco aburrido. Ahora, agreguemos el efecto O para este enlace. S punto Héroe subrayado Enlace, columna O. Y dentro de este color de fondo a transparente y color a blanco También podemos agregar aquí la transición a todos 0.3 segundos está adentro hacia fuera para suavizar sobre el efecto. Ahora vamos a establecer estilo para nuestra imagen de héroe. Entonces dot Hero subrayado imagen, y dentro de los corchetes cur, agregar altura a 500 píxeles y también queremos agregar efecto hover para La transición a todos los 0.3 segundos está adentro hacia afuera. Después de eso agregamos esa imagen de subrayado de héroe, columna O dentro de esta, simplemente transformamos a escala 1.05, guardamos los cambios y echamos un vistazo Mira lo hermoso que se ve esto. Me gusta mucho este estilo. Hagamos que este componente de sección de héroe sea reutilizable. Entonces en el componente de la sección héroe, qué apoyos queremos. Primero, queremos título, luego subtítulo, tinta para B ahora e imagen para imagen de héroe de visualización Ahora, reemplacemos estas cuerdas con nuestros accesorios. Así título con título Dmitex a subtítulo. Y aquí pasamos tinta en HRF, y por fin tenemos imagen, reemplazamos este iPhone con imagen Vamos a la cima, tengo esta importación de aquí. No lo necesitamos en este componente. Guarda esto y en el componente del hogar, agregamos esa importación en la parte superior. También importamos una imagen más Mac desde dos carpetas hasta activos, y aquí, veamos nuestro nombre de imagen. Seleccione este sistema Mac, presione F dos y copie este nombre de aquí. Yo uso este truco porque no quiero equivocarme al importar imágenes. Así que simplemente podemos pegarlo aquí. Ahora pasemos nuestros accesorios en este componente de sección de héroes. Entonces primero, el título equivale a por iPhone 14 P. Subtítulo para experimentar el poder del último iPhone 14 con nuestra cámara más profesional de la historia Enlace por ahora solo hacia adelante barra diagonal e imagen al iPhone. Di los cambios, y está funcionando igual. Ahora vamos a duplicar este componente de sección de héroe y moverlo en la parte inferior. Ahora en el lugar de este título, habíamos construido la configuración definitiva. Para el subtítulo, agregamos puedes agregar display de estudio y accesorios mágicos a juego de color a tu bolso después de configurar tu Mac Mini Nuevamente, enlace para volver a reenviar slash, lo cambiaremos más tarde y la imagen a Mac Aquí noto que cometí error en por iPhone 14 título. Me aseguro de las etiquetas largas de subtítulos durante esta grabación, pero cometí un error al principio Necesito trabajar en mi mecanografía, guardar los inges y echar un vistazo Mira, tenemos nuestras dos secciones de héroes. Esto se ve muy bien. Ahora en la siguiente lección, crearemos la sección de producto de características, que agregaremos entre estas dos secciones de héroes. Sé que esta es una lección poco larga. Puedes tomarte un descanso de cinco a 10 minutos y tomar un poco de aire fresco, y te veo en la siguiente lección. 107. Agregar sección de productos destacados: Ahora, agreguemos la sección de productos destacados para nuestra página de inicio. Así que aquí en la carpeta home, creamos un nuevo archivo llamado featured products dot CSS, y también creamos un nuevo componente llamado featured products dot JSX Ahora podrías preguntarte por qué estoy creando archivo CSS primero y luego el archivo JSX Es simplemente porque si por fin creamos el archivo CSS, entonces tenemos que cambiar de nuevo al archivo JSX Entonces en este archivo JSX, agregue nuestro código B Blet, y en la parte superior, importamos nuestros productos destacados al archivo CSS Bueno. Ahora en el lugar de este de agregamos sección con nombre de clase, productos destacados de subrayado Ahora en esta sección, lo que queremos. Primero, queremos encabezado, así que dos y agregue aquí los productos destacados. Ahora después de esto, queremos agregar tres tarjetas de productos, así que tenemos que envolverlos en otro De y darle un nombre de clase, lista de productos destacados. Y sabemos que esto es lista, así que podemos usar aquí Flexbox Entonces antes de este nombre de clase, agregamos Aline underscore center Ahora, dentro de esto, creamos un artículo y le damos un nombre de clase, tarjeta de subrayado de producto Y por ahora, solo pasa aquí producto. Guarda los cambios y echa un vistazo. Lo sentimos, nuevamente olvidamos agregar nuestro componente de productos destacados en nuestra página de inicio. Entonces, entre estas dos secciones de héroes, agregamos nuestro componente de productos destacados. Guarda los cambios y echa un vistazo. Ver, aquí obtenemos nuestros productos destacados. Ahora vamos a establecer estilos para ellos. En los productos destacados punto archivo CSS, primero, agregamos productos destacados de subrayado, corchetes geniales, margen a 65 píxeles Después de eso, agregamos productos destacados de subrayado, soporte angular, y aquí apuntamos a dos etiquetas, que es nuestro rumbo Y aquí mismo, de un tamaño a 48 píxeles, texto se alinea al centro y el margen inferior a 65 píxeles. Por fin, vamos a establecer estilo para nuestra lista de productos. Así que puntee los productos de subrayado destacados, la lista de subrayados, corchetes de coli, y agregue aquí, justifique el contenido al espacio Por eso agregamos la clase Align Center para esta lista. Y después de eso, agregamos Margin, bottom to again 65 pixel. De nuevo te estoy diciendo que puedo escribir este CSS porque practico mucho para este proyecto. Si creo este proyecto por primera vez, entonces tengo que hacer también cosa de prueba y error para estos mosaicos. Lo practico porque no quiero perder tu valioso tiempo para ensayo y error de estilo simple. Ver los cambios y echar un vistazo. Vea, obtenemos nuestra sección de productos de características. Ahora en la siguiente lección, crearemos una tarjeta de producto para este proyecto. 108. Crea tarjetas de productos: Ahora, vamos a crear un componente de tarjeta de producto podamos usarlo varias veces. Así que aquí, vamos a cortar esta etiqueta de artículo creamos un nuevo archivo llamado tarjeta de producto punto CSS. Y después de eso, creamos un nuevo componente llamado product card dot JSX Agreguemos aquí el boilerplate, y en la parte superior, importamos el archivo CSS de la tarjeta del producto Bueno. Ahora, en el lugar de este de, pegamos nuestra etiqueta de artículo que acabamos de cortar. En la ficha del producto, ¿qué queremos? Nosotros queremos DUs. Uno para exhibición, el póster o imagen del producto, y segundo, para los detalles del producto. Entonces aquí agregamos Du y le damos un nombre de clase, imagen de subrayado de producto Y dentro de este Du, agregamos nuestra etiqueta de imagen y le damos una fuente, digamos, iPhone y arte a imagen del producto. Importemos esta imagen en la parte superior. Así encarnPoneF aquí vamos dos carpetas arriba activos barra pon Ahora, aquí hay una cosa. Quiero redirigir al usuario a la página de producto seleccionada en la que el usuario pueda ver otros detalles sobre ese producto. Así podemos envolver esta imagen con etiqueta de anclaje. Quieres saber cómo estoy haciendo esto, déjame mostrarte que es realmente sencillo. Primero, selecciona la etiqueta que quieres envolver y presiona Control más Tamizar más P o Comando más Sift más P W aquí, envuelve con abreviatura, selecciona esto y aquí mismo nombre de etiqueta y presiona Enter Verás, esto lo conseguimos. Ahora en HRF, podemos pasar como este producto s uno. Este es el ID del producto. Ahora después de esta DU, agregamos una du más con nombre de clase, detalles subrayados del producto Dentro de estos, primero, agregamos la etiqueta H tres y le damos un nombre de clase, precio de subrayado del producto Y aquí escribimos dólar 999. Después de eso, creamos un párrafo más y le damos un nombre de clase, título de subrayado del producto Y aquí mismo, el iPhone 14 Pro. Ahora, por fin, tenemos una línea, que tienen dos secciones. El primero tiene recuentos de calificación y calificación, y otro tiene el botón de carrito. Así que creamos una etiqueta Potter y le damos un nombre de clase, un centro de línea y un pie de página de información del producto. Ahora dentro de esto, agregamos una DU y le damos un nombre de clase, un centro de línea. Ahora dentro de esta d, necesitamos dos párrafos, uno para calificación y otro para conteo de calificación. Agregue el primer párrafo y el nombre de la clase para alinear el centro y la calificación del producto. Puedes ver cómo Align center class es más útil en términos de centrar las cosas Ahora dentro de esto, agregamos imagen y en fuente estrella y arte para protagonizar también. Aquí escribimos nuestra calificación, 5.0. Ahora después de este párrafo y darle un nombre de clase, producto, revisión de guión bajo, recuento de guiones bajos Y aquí mismo, 120. Y por fin, después de esta inmersión, agregamos aquí botón y le damos un nombre de clase, agregamos al carrito. Y dentro de esto, agregamos imagen, y en fuente, pasamos canasta y RT a canasta. Ahora, vamos a introducir estas dos imágenes en la parte superior. Así que duplica esta entrada dos veces más, y aquí escribimos estrella e imagen nombre a blanco dstar punto png Y por último, lo cambiamos a canasta e imagen a canasta punto PNG. Guarde los cambios. Y en el componente de características productos, agregamos componente de tarjeta de producto. Bonito. Y ahora vamos a duplicar estas tres veces más. Guarda esto y mira, estropeamos nuestra página de destino Vamos a establecer estilo para esto. Así que en la pila de CSS de punto de tarjeta de producto, en primer lugar, agregamos tarjeta de subrayado de producto de punto El soportes y dentro de este ancho a 275 píxeles de altura a 330 píxeles, margen a 20 píxeles, menor radio a 12 píxeles, caja SDO a RGBA, cero, cero, cero, 0.24 Y después de eso, cero píxeles para XX, tres píxeles para el eje Y y ocho píxeles para el efecto de desenfoque. Si quieres explorar otras sombras de caja, entonces tengo un sitio web que usé mucho cuando quiero agregar sombras de caja. Entonces en la nueva pestaña, busca, obtén escaneo CSS. Y aquí obtenemos 93 hermosas sombras de caja. Y podemos copiarlo CSS directamente haciendo clic en esa caja. Para que puedas marcar este sitio web como favorito. Volver a nuestro archivo CSS. Aquí agregamos el color de fondo al blanco. Ahora, después de esto, agregamos imagen de subrayado de producto punto, y dentro de los corchetes Cali, agregamos altura a 200 píxeles, texto se alinea al centro, y el borde inferior a un píxel, sólido tiene si I Ii Y después de esto, apuntamos al producto de punto, subrayamos la imagen y la etiqueta de imagen Y dentro de esta altura al 100%. Guarda los cambios y echa un vistazo. Ver, nuestra sección de imagen está lista. Ahora vamos a establecer estilo para esta sección de detalles. Así que agregamos aquí producto punto, subrayamos detalles. Y dentro de esto, agregamos relleno a diez píxeles para arriba abajo y 20 píxeles para izquierda y derecha. Después de esto, apuntamos producto punto, precio de subrayado, Calibacket y dentro de esto, agregamos tamaño de fuente a 21 píxeles y peso de fuente Ahora agreguemos estilo para el producto punto, título de subrayado. Y aquí agregamos un tamaño a 18 píxeles y margen superior a cuatro píxeles. Guarde esto, y aún así nuestra tarjeta se ve masiva debido a esta imagen. Entonces arreglemos esto. Así que aquí agregamos producto punto, información de subrayado, pie de página de subrayado Ali corchetes, y aquí agregamos justificar contenido al espacio entre y margen a diez píxeles para arriba abajo y cero para izquierda y derecha. Después de esto, apuntamos calificación de subrayado del producto punto, corchetes Cali, altura a 30 píxeles, relleno a cuatro píxeles y peso de fuente de ocho píxeles a 600 Radio de borde a cinco píxeles, color de fondo, a un FC a 311 y color a blanco. Después de esto, apuntamos producto de punto, calificación de subrayado, imagen, corchetes de coli, y dentro de estos con hasta 20 píxeles y margen derecho a cinco píxeles Después de eso, agregamos producto de punto, revisión de guión bajo, recuento de guiones bajos, corchetes Cali, y dentro de este tamaño de fuente a 16 píxeles, margen izquierdo a diez píxeles, color a gris, relleno a cero y diez píxeles, y agua izquierda a dos píxeles, sólido tiene DC DC DC Guarda esto y echa un vistazo. Aquí, podemos ver nuestro estilo por esta imagen de canasta. Entonces código cts, y aquí apuntamos punto en dos soportes CAT Coli, y dentro de este con 40 píxeles, altura a 40 píxeles, borde a monja, radio de borde a 100%, color de fondo a transparente Y cursor a puntero. Y por fin, apuntamos el punto A a la tarjeta y etiqueta de imagen los corchetes Cully y el ancho al 100% y la altura al 100% Di los cambios y echa un vistazo. Ver, ahora nuestra tarjeta se ve muy bien. Por ahora, no estamos haciendo dinámico este componente de tarjeta de producto porque obtendremos estos datos de nuestro back-end en la próxima sección. Entonces nuestra página de préstamos ya está lista. 109. Crea página de productos: Así que en la lección anterior, completamos nuestra página de inicio. Ahora comencemos nuestra segunda página, que es la página del producto. Así podemos dividir esta página del producto en secciones. primera sección es la barra lateral en la que mostramos todas nuestras categorías, y en el lado derecho, tenemos lista de productos. Entonces cierro todos los archivos desde aquí. Y ahora en nuestra carpeta de componentes, creamos una nueva carpeta llamada products. Y dentro de esto, creamos un nuevo archivo llamado Productspage dot css Y después de eso, crear un nuevo componente llamado products page dot JSX Ahora, vamos al código estándar usando RFC y en la parte superior, ingresamos productos de periodo página Ahora en el lugar de este rocío, agregamos sección y le damos un nombre de clase, productos, página de subrayado Y dentro de esta sección, tenemos dos cosas barra lateral y lista de productos. Entonces agreguemos aquí una etiqueta lateral y déle un nombre de clase, productos, barra lateral de subrayado Y dentro de esto, escribimos barra lateral. Después de esta barra lateral, creamos una sección más y nombre de clase dos productos, lista de subrayado, sección de subrayado Y aquí mismo, lista de productos. Veamos qué obtenemos. Guarda este archivo, y en el componente app, comentamos esta página de inicio y agregamos aquí la página de productos. Y aquí podemos ver agrego página del producto que es diferente del archivo CSS. Entonces cambiamos este nombre de archivo a la página de productos punto Jx. Además, en ese componente, cambiamos el nombre de nuestra función a la página de productos, y también actualizamos esta exportación. Y en la parte superior, agregamos productos página punto css. Guarde este archivo, y en nuestro componente de aplicación, agregamos aquí el componente de la página de productos. No te preocupes. Añadiremos enrutamiento después de completar nuestros estilos. Por ahora, no queremos ninguna complejidad. Guarda los cambios y echa un vistazo. Aquí obtenemos la barra lateral y la lista de productos. Vamos a establecer el estilo para nuestro diseño de página de productos. En la página de productos punto archivo CSS, agregamos productos de punto, página de subrayado, Calibrackets, display a GED porque queremos dividir nuestra aplicación en secciones, columnas de plantilla GED a un fotograma y cuatro marcos y relleno a Guarda los cambios y echa un vistazo. Ver, obtenemos secciones separadas. Ahora, agreguemos nuestra barra lateral. Entonces, en lugar de escribir toda la sección de la barra lateral aquí, podemos crear un nuevo componente separado para la barra lateral. Así que corta esta etiqueta a un lado, y en la carpeta de productos, creamos un nuevo archivo, productos, sidebar dot CSS, y creamos otro archivo Productos, sidebar dot JSX Aquí agregamos boilerplate y vamos a importar period slash products sidebar dot Bueno. Ahora en el lugar de esta DU, pegamos nuestra etiqueta AI. Ahora, vamos a eliminar este texto de la barra lateral, y dentro de este, primero, agregamos la etiqueta Astro y pasamos aquí categoría. Después de eso, para mostrar los enlaces, creamos una DU con enlaces de subrayado de categoría de nombre de clase Y dentro de estos, agregaremos nuestros enlaces por categoría. Entonces agreguemos estilos para esta parte. Entonces en nuestro archivo CSS, agregamos productos de punto, barra lateral de subrayado, Hola corchetes Y dentro de estos, agregamos relleno a diez píxeles para arriba abajo y 20 píxeles para izquierda y derecha, radio de borde a cinco píxeles y color de fondo a blanco. Después de eso, agregaremos estilo para el encabezado de categoría. Así que los productos de punto subrayan la barra lateral, y apuntamos a dos corchetes Cali, tamaño de fuente a 26 píxeles y margen inferior a diez píxeles Guarde esto. Y en el componente de la página de productos, agreguemos nuestro componente de barra lateral de productos. Guarde este archivo y vea, aquí obtenemos bonita barra lateral. Ahora vamos a establecer enlaces de categoría. Entonces los enlaces de categorías se ven así. En el lado izquierdo, tenemos Imog o icono, y luego en el lado derecho, tenemos título de enlace, donde vemos este tipo de estructura, derecha, está vinculada con componente icono La diferencia es solo esto. Tenemos que cambiar sus posiciones, lo que podemos hacer fácilmente con CSS. Déjame mostrarte. Entonces aquí agregamos enlace con componente de icono, C, trabajos de entrada automática, y en props, pasamos título para digamos electrónica después de ese enlace a productos, categoría de signo de interrogación equivale a electrónica Entonces aquí estamos pasando nuestra cadena de consulta de categoría, y al usar eso, podemos obtener datos de esa categoría Después de esa imagen, digamos cohete. Ahora vamos a importar esta imagen. Importar cohete de aquí vamos dos carpetas arriba activos cohete punto png. Guarda los cambios y echa un vistazo. Obtenemos el mismo enlace que estamos recibiendo en nuestra barra de navegación. Ahora bien, como sabe este enlace con componente de icono, queremos agregar este enlace a barra lateral o barra Na. Para ello, pasaremos un utilería más a este enlace con componente icono Barra lateral es igual a verdadero. O también podemos eliminar esto. Esto funciona igual. Pero para una mejor comprensión, no estamos quitando esto. Guarde esto y diríjase a vincular con el componente icono. Aquí, después de esta imagen, desestructuramos un puntal más, que es barra lateral Ahora aquí podemos agregar condición, y en base a esa condición, agregaremos estilos. Entonces en el lugar de esta clase Align center, agregamos corchetes cli porque estamos agregando expresión JavaScript y agregamos aquí condición I sidebar is true, luego devolvemos Align center, y sidebar underscore link ya que solo devolvemos Align Ahora vamos a establecer el estilo para este enlace de subrayado de la barra lateral. Entonces en enlace con icono punto archivo Css, y en la parte inferior, agregamos barra lateral subrayado tinta, Calibraket y dentro de este, primero, necesitamos cambiar la posición de nuestra imagen Entonces flex dirección demasiado inversa justificar contenido a lino y mediante el uso de estas dos propiedades, podemos revertir la posición de nuestros elementos Después de eso, un tamaño a 21 píxeles, relleno a diez píxeles y 15 píxeles, radio del borde a cinco píxeles y transición a todos los 0.15 segundos está dentro y fuera. Ya sabes por qué agregamos esta transición, efecto pH. Sidebar Link clan hover y dentro de esto, simplemente cambiamos el color de fondo a como F seis, F seis, F seis Guarda esto y echa un vistazo. Ver, obtenemos nuestro estilo de enlace. Ahora hagamos nuestro icono un poco grande y agreguemos margen derecho. Así que aquí agregamos punto barra lateral subrayado Enlace, y nos dirigimos elemento de imagen Dentro de esto, cambiamos el ancho a 30 píxeles, margen de izquierda a cero y el margen derecho a ocho píxeles. La razón por la que hacemos margen de izquierda a cero es porque en este enlace subrayado Imoge tenemos margen dejado a Guarda los cambios y echa un vistazo. Ver, aquí obtenemos nuestro estilo link. Entonces así es como podemos usar el mismo componente y usarlo para otro estilo. 110. Crea sección de lista de productos: Ahora, vamos a crear la sección de lista de productos para nuestra página de productos. Entonces A para esta sección, creamos un componente separado. Entonces en esta sección desde aquí, y en nuestra carpeta de productos, creamos un nuevo archivo, lista de productos punto CSS, y también creamos un nuevo componente lista de productos punto JSX, agregamos boilerplate, y en la parte superior, importamos lista de productos punto Ahora en el lugar de esto debido, lo que vamos a hacer, pegamos nuestra sección. Ahora, esta sección de lista de productos tiene dos secciones. El primero es encabezado, y en eso, agregaremos título de producto, y en el lado derecho, agregaremos menú desplegable para cortocircuitar nuestros En la segunda sección, tenemos lista de productos. Agreguemos aquí encabezado con nombre de clase, Alinear centro y productos, lista de subrayado, encabezado de subrayado Dentro de este encabezado, primero agregamos a etiquetar y dentro de estos productos. Y después de eso, agregamos select tag name a short y le damos un nombre de clase, producto, clasificación de subrayado Ahora dentro de esto, agregamos nuestras opciones. Entonces opción, valor a null y pasar aquí relevancia. Este es el valor predeterminado, y por eso no pasamos ningún valor. Agreguemos el valor de la segunda opción al precio, DSE para qué, correcto, para descendente, y pasemos aquí, precio de mayor a menor Duplicar esta línea, y cambiamos nuestro valor a precio, ASC y cambiamos aquí, precio, bajo a alto Ahora, vamos a duplicar estas dos opciones y en el lugar de precio, cambiamos a tasa y aquí también tasa. Ahora, después de este encabezado, agregamos un día con la lista de subrayado de productos de nombre de clase Y dentro de esto, tenemos lista de productos que mostraremos en la tarjeta del producto. Entonces, en lugar de definir componente de tarjeta de producto en la carpeta home, podemos moverlos a aquí en la carpeta de productos. Así que ve así, tanto archivar y colóquelo en la carpeta de productos. Puedes ver lo fácil que es mover componentes en nuestro proyecto, o incluso podemos usarlo en diferentes proyectos con su archivo CSS. Pero aquí hay una cosa. Tenemos que cambiar la instrucción de entrada en el componente de productos de características. Entonces aquí vamos una carpeta arriba productos, slash tarjeta de producto. Guarde esto. Y en el componente de lista de productos, agregamos aquí tarjeta de producto. Y duplicarlo un par de veces. Guarde este archivo. Y en nuestra página de productos, agregamos este componente de lista de productos. No te olvides de hacer eso. Guarda los cambios y echa un vistazo. Verás, obtenemos estos elementos. Ahora agreguemos estilo para esta sección. Así que yo lista de productos punto archivo CSS, agregamos productos de punto, lista de subrayado, sección de subrayado, corchetes Cali, relleno a diez píxeles y relleno a la izquierda a 30 Después de eso, agregamos productos punto, underscoe last, underscore Y dentro de estos, agregamos el contenido de justificación al espacio entre ellos porque ya teníamos clase central alineada para este encabezado. Después de eso, apuntamos a nuestros dos productos sudar, lista dos corchetes Cali Y aquí escribimos tamaño de fuente a 26 píxeles. Después de eso, nos dirigimos a nuestros productos subrayado cortocircuitado, calibackets, y dentro de este tamaño de fuente a 18 píxeles peso de fuente a 500, familia de fuentes para heredar altura a 35 píxeles, relleno a cero y cinco píxeles para izquierda y derecha Borde a monja, contorno a monja y radio de borde a cinco píxeles Guarde los cambios y vea que nuestra sección de encabezado está lista. Ahora solo tenemos que agregar estilo para esta lista de productos. Entonces en la parte inferior, agregamos a la lista de subrayado de productos Y dentro de los corchetes de Scully, agregamos display flags flax wrap para envolver y justificar el contenido para espaciar Guarda los cambios y echa un vistazo. Ver, nuestra lista de productos está lista. Entonces enhorabuena. Completamos nuestras dos páginas importantes. Esto se ve muy bien. ¿Qué opinas? Házmelo saber en la sección Q&S. 111. Crea un componente de producto único: Ahora vamos a crear una sola página de producto para nuestro proyecto. En esta lección, solo creamos la parte de selección de imágenes. Entonces aquí tenemos matriz de imágenes, y cuando seleccionamos alguna imagen esa imagen se mostrará aquí. Es realmente simple. Déjame mostrarte. Entonces, antes que nada, en el siguiente artículo 0R en la carpeta de recursos, abra la carpeta projectory Y en esto, tenemos productos dot archivo JS. Y dentro de esto, obtienes este objeto de producto. Este objeto tiene todos los detalles que obtendremos de back end. Por ahora, solo necesitamos estos datos de Dummi. Entonces, para la sección de un solo producto, creamos una nueva carpeta en la carpeta de componentes llamada single product. Dentro de esto, creamos un nuevo archivo llamado single product page dot CSS. Y además creamos un nuevo componente llamado single product page dot Jx Aquí agregamos código estándar, y en la parte superior, y en la parte superior, importamos un solo archivo CSS de punto de página de producto Bueno. Agreguemos nuestro objeto de producto aquí porque lo necesitamos. Ahora en el lugar de esta DU agregamos sección y le damos un nombre de clase, una línea, centro y producto único. Dentro de esta, tenemos dos secciones, una para la selección de imágenes y la segunda para mostrar los detalles del producto. Agregamos aquí Du con nombre de clase, align, center, y segundo, Du con nombre de clase, align, center, single product details. Ahora en estas imágenes du, agregamos una du más con nombre de clase, miniaturas de subrayado sencillo Y dentro de esto, mostraremos todas las imágenes en miniatura, lo que significa imágenes pequeñas Qué imágenes queremos mostrar. Bien, queremos mostrar estas imágenes array. Así que agregue corchetes Coli, dotimages del producto punto Mapa Dentro de esto, obtenemos cada imagen y también indexamos aquí. Esto es muy básico, ¿verdad? Esto lo hemos hecho tantas veces, y aquí devolvemos etiqueta de imagen. Y en la fuente, pasamos nuestra imagen Alt al product dot title. Ahora, después de esto, agregamos una fuente de imagen a la imagen de punto del producto. Y dentro de esto, tenemos que pasar cero por ahora. Alt al producto, título de punto y nombre de clase a producto de subrayado único, visualización de subrayado Guarde los cambios, y tenemos que agregar esta página en nuestro componente de aplicación. Circunde nuestra página de producto y simplemente agregue aquí la página de un solo producto Guarda los genes y echa un vistazo. Obtenemos nuestros elementos. Ahora vamos a establecer estilo para esta sección. Entonces en un solo archivo CSS de punto de página de producto, primero agregamos producto de subrayado único, calibraket y aquí agregamos justificar contenido al centro y relleno a 32 píxeles para arriba abajo y 48 píxeles para izquierda A continuación, apuntamos a un solo producto de subrayado, miniaturas subrayadas, corchetes de coli, y dentro de esta pantalla para marcar la dirección del lino a la columna, lino para envolver, brecha a 14 píxeles, relleno a ocho píxeles y margen a 16 píxeles Después de eso, apuntemos a esas pequeñas imágenes que podamos seleccionar. De modo que ese producto de subrayado único, miniaturas de subrayado, imagen Calibackets ancho a 80 píldora, altura a 80 píldora, altura a 80 píldora, objeto ajustado para cubrir el radio del agua a cinco píxeles y cursor a puntero Después de esto, agreguemos producto de subrayado único de punto, pantalla de subrayado, Calibrackets, y dentro del ancho a 600 píxeles, altura a también 600 píxeles, lucha de objetos para cubrir y radio de agua a Todos estos son CSS básicos. Por eso no estoy explicando su estilo. Guarda los cambios y echa un vistazo. Verás, conseguimos lo que queremos. Cuando hacemos clic en estas imágenes, no pasa nada. Así que vamos a establecer esta funcionalidad. Entonces para eso, tenemos que crear una variable de estado llamada imagen seleccionada conjunto de imágenes seleccionadas, y esta variable de estado almacenará el valor de índice de imagen seleccionada. Por defecto, seleccionaremos la primera imagen. También importemos estado de react. Bueno. Ahora en la parte inferior en el lugar del cero, agregamos la imagen seleccionada. Ahora cuando hacemos clic en alguna de estas imágenes, solo tenemos que establecer nuestro valor de imagen seleccionado a ese valor de índice. Déjame mostrarte. Aquí, agregamos el evento de clic en esta función de flecha thmalimage, y configuramos select image para indexar Guarda los cambios y echa un vistazo. Cambia la imagen y mira, aquí obtenemos esa imagen. Ahora solo necesitamos mostrar qué imagen está seleccionada actualmente. Entonces en nuestra etiqueta de imagen, agregamos aquí, nombre de la clase es igual a aquí pasamos condición. Si la imagen seleccionada es igual al índice, entonces agregamos la clase de imagen de subrayado seleccionada, lo contrario no agregamos nada Esto y agreguemos estilo para esta clase. Así que en el archivo CSS, después de nuestro estilo de imagen, agregamos punto seleccionado imagen Coli corchetes, transformamos a escala 1.12 Guarda los cambios y mira, aquí obtenemos esta imagen seleccionada. Ahora bien, este efecto es muy repentino. Así que vamos a hacer esto suave. En este estilo de imagen, tuvimos transición a todos los 0.2 segundos adentro out, guardar los cambios y echar un vistazo. Verás, obtenemos este efecto de transición suave. Se puede ver como la función de selector de imágenes es muy simple. Sólo nosotros para pensar de manera sencilla. Ahora en la siguiente lección, agregaremos la sección de detalles del producto para esta página. 112. Agregar sección de detalles para la página de producto: Ahora, agreguemos la sección de detalles para la página de un solo producto. En estos detalles, agregamos H una etiqueta con nombre de clase, producto único, título, y dentro de este, mostraremos el título del punto del producto. Después de eso, agregamos un párrafo con nombre de clase, descripción única del producto. Y dentro de esto, agregamos la descripción del punto del producto. Este es el beneficio del objeto del producto. Después de eso, agregamos una etiqueta de párrafo más y le damos un nombre de clase, precio de producto único, y agregamos aquí llaves en dólares, precio de punto de producto, punto dos fijo, y dentro de esto, pasamos dos. Esto redondeará nuestro precio a dos dígitos. Ahora, después de esto, agregamos dos etiquetas con nombre de clase cantidad título y pasamos aquí cantidad. Después de esto, agregamos un dado con nombre de clase, align, center y entrada de cantidad. Y dentro de este du, agregamos botón con nombre de clase igual a entrada de cantidad, botón, y pasamos aquí menos, y por defecto, agregamos deshabilitar a true para botón menos. Duplicar este botón, eliminar esta desactivación. Y solo pasa aquí más. Y entre estos dos botones, agregamos párrafo con nombre de clase, entrada de cantidad, conteo. Bueno. Ahora por fin, tenemos botón de cabeza a carrito. Entonces agregamos botón con nombre de clase, Serge, botón, y agregamos carrito Y aquí pasamos cabeza a carrito. Guarda los cambios y echa un vistazo. Ver, aquí obtenemos todos nuestros elementos. Ahora, vamos a establecer estilos para ellos. Entonces en nuestro archivo CSS en la parte inferior, agregamos detalles de un solo producto, corchetes Cali con 35% y relleno a 16 píxeles y 24 píxeles. Después de eso, tenemos título de producto único. Y aquí escribimos margen inferior a 16 píxeles y tamaño de fuente a 32 píxeles. Después de nuestro título, tenemos descripción. Entonces esa sola descripción del producto, c corchetes, y aquí agregamos margen inferior, 16 píxeles, y altura de línea a 1.4. Después de eso, tenemos precio, así punto precio de producto único. Y dentro de estos corchetes escamosos, agregamos margen inferior a 16 píxeles, tamaño de fuente a 24 píxeles y peso de fuente a 600 Después de eso, tenemos título de cantidad. Entonces titulo de cantidad. Tamaño de fuente a 20 píxeles y peso de fuente a 700. Guarda los cambios y echa un vistazo. Primero, necesitamos hacer nuestros datos en columna. Entonces nuestro componente de producto único aquí en nuestros detalles lo hace, agregamos bimestaally un centro de línea. Eso no queremos. Guarda los cambios y mira, ahora tenemos poca estructura buena. Vamos a agregar el resto de los estilos. Volver a nuestro archivo CSS. Después de estos, tenemos entrada de cantidad de puntos, du y dentro de esto, establecemos el tamaño de fuente en 20 píxeles, peso de la fuente en 700 y el margen en cinco píxeles para la parte superior, cero para la izquierda y la derecha, y 16 píxeles para la parte inferior. Después de eso, apuntamos el botón de entrada de cantidad de punto, Calibrackets, y dentro de este, agregamos ancho a 35 píxeles, alto a 35 píxeles, para tamaño a 25 píxeles, color de fondo tiene FF 8848, color a blanco, borde, monja, wer radio a 100%, para círculo y Ahora vamos a establecer el estilo para el botón deshabilitado. Botón de entrada de cantidad, Callan deshabilitado, y dentro de esto agregamos opacidad a 0.3 y cursor a default Guarda esto y mira que obtenemos nuestros estilos de botones. Ahora solo tenemos que agregar estilo para este conteo y agregar al botón de la tarjeta. Entonces agregamos aquí entrada de cantidad, conteo, corchetes Cali, margen a cero, y 40 píxeles para izquierda y derecha, y línea de texto al centro. Y finalmente, por fin, apuntamos el botón de ocho tarjetas de punto, corchetes Cali, y dentro de este con para ajustar el contenido y relleno a ocho píxeles para arriba y abajo y 18 píxeles para izquierda y derecha. Di los cambios y echa un vistazo. resto de los estilos están bien, pero aquí tenemos que hacer un pequeño cambio. Añadimos aquí margen inferior, y también veamos por qué no obtenemos margen para este dado de entrada de cantidad. Entonces en nuestro estilo de título de cantidad, agregamos margen inferior a tres píxeles, y aquí eliminamos este dado. Queremos aplicar este estilo para la entrada de cantidad. Guarda los cambios y echa un vistazo. Vea lo hermosa que se ve nuestra página de producto único. La razón por la que te recomiendo escribir estilo por tu cuenta es porque después de completar este proyecto, dirás con orgullo que creo este proyecto desde cero. Una cosa más, si eliminamos parte CSS del desarrollo front-end, entonces reaccionar perderá su valor tremendamente Sin CSS derecho, nuestro sitio web se ve muy feo. Date crédito por crear este proyecto desde cero. 113. Crea un componente de página de carrito: Ahora, vamos a crear la página del carrito para este proyecto. Entonces en esta lección, crearemos todas las cosas sin esta tabla. Crearemos una tabla en la siguiente lección. Entonces en la carpeta de componentes, creamos una nueva carpeta llamada CAT y dentro de esta, creamos un nuevo archivo llamado Cardpage dot CSS Y después de eso, crearemos componente más llamado Cardpaget Aquí boilerplate, y en la parte superior, importamos archivo CSS de punto de página de tarjeta Ahora en el lugar de esta DU agregamos sección y le damos un nombre de clase, línea, centro y página de carrito. Dentro de esta sección, primero, queremos crear información de usuario. Entonces podemos crear ese elemento aquí o podemos separar ese componente. Podemos hacer lo que queramos. Depende totalmente de nosotros. Aquí no vamos a reutilizar esta información de usuario, así que no estoy creando componente para eso. Dot Align Center para agregar otra clase en T, podemos agregar otro punto de información de usuario. Verás, obtenemos esto ambas clases. Ahora dentro de esto, primero queremos agregar imagen de perfil de usuario. Etiqueta de imagen y fuente al usuario Alt al perfil de usuario. Ahora después de esta imagen, queremos un Du y dentro de este Du agregamos un párrafo con nombre de clase, nombre de usuario. Y podemos pasarle su nombre a Halley. Y después de eso, creamos otro párrafo con el nombre de la clase, correo electrónico del usuario y le pasamos su correo electrónico a Halley en dire Guarda esto y en el componente app, necesitamos agregar esta página de tarjeta. Comenta la página del producto único, y después de eso, agregamos el componente de la página de la tarjeta. Guarde los cambios, y no obtenemos nada. Así que abre Consola y por fin, podemos ver un error de referencia atrapado, usuario no está definido, y además obtenemos un nombre de archivo, página de tarjeta, y también número de línea. Así que volvamos al código VS, y vamos a importar este usuario. Así que importar usuario de vamos a carpetas arriba activos, usuario punto web P. Guarda los cambios y echa un vistazo. Ver, obtenemos Información de usuario. Ahora, agreguemos otros elementos. Entonces aquí damos espacio para mesa de cartas. Después de eso, agregamos mesa para factura de carrito. Mesa y darle un nombre de clase, carrito guión bajo factura. Aquí agregamos Tbody y dentro de él, agregamos fila de tabla y datos de tabla Aquí pasamos subtotal y otro dato dólar t nueve. Duplicemos esta fila de tabla dos veces más, y en el lugar de este subtotal, agregamos cargo por envío, y aquí dólar cinco Después de eso, para la última fila, sumamos total final y al último dólar 1004. Ahora después de esta tabla, agregamos botón con nombre de clase, botón de búsqueda, que definimos en Navbar, y además agregamos una clase más, botón Checkout Y aquí pasamos checkout. Guarde los cambios y eche un vistazo. Aquí obtenemos nuestros elementos. Ahora vamos a establecer estilos para ellos. Así que en la página del carrito punto archivo CSS, primero agregamos punto carrito página Cali Brackets y dentro de esto, agregamos dirección flex a columna, justificamos contenido a centro ancho a 60% margen a cero y auto y badd a 32 pixel y 48 pixel Después de eso, agregamos datos de información del usuario, y en paréntesis Gali, brecha a 16 píxeles y margen inferior a 32 píxeles Después de eso, apuntamos datos usuario subrayado información, imagen, y dentro de esto, agregamos ancho a 80 píldora de altura a 80 pic L, pies de objeto para cubrir y radio de borde al 100% para un círculo Ahora después de eso, nos dirigimos al nombre del guión bajo del usuario del punto. Y en los paquetes de Cully, agregamos tamaño de fuente a 21 píxeles de peso de fuente a 600, Guarda los anges y echa un vistazo Ver, tenemos buena información de usuario. Ahora vamos a establecer estilos para esta mesa y botón. Entonces en la parte inferior, agregamos carrito de puntos Bill primeros corchetes, y dentro del auto alinearse para flexionar y con hasta 400 píxeles, colapso de agua para colapsar, un tamaño a 16 píxeles, margen superior a 16 píxeles y color de fondo a blanco. A continuación, agregamos carrito de puntos, Bill, TD, soportes Ci. Y dentro de esto, pasamos relleno a 12 píxeles y 20 píxeles y borde a tres píxeles, sólido tiene EI EI, ei. Después de eso, agregamos dot cart, Bill, TD, call on last child, cali brackets, y dentro de él texto line to and width to 120 pixel. Después de eso, apuntamos punto Cart, Bill, final, y dentro de este tamaño de fuente a 20 píxeles y peso de fuente a 700. Y finalmente, por fin, apuntamos botón Checkout, corchetes Ci. Primero agregamos align self a flex porque queremos mostrar ese botón en el lado derecho. Y también, agregamos eso para el carrito Bill. S? Después de eso, altura a 38 píxeles margen importante a 16 píxeles para arriba abajo y cero para izquierda y derecha, y relleno a cero y 16 píxeles para izquierda y derecha. También agregue importante aquí. Guarda y echa un vistazo. Esto se ve bien, pero nuestros estilos finales no se aplican. Así que de vuelta al componente de la página del carrito. Aquí agregamos el nombre de la clase a la tarjeta Bill final. Ahorra y ta una mirada. Ves, estos estilos se ven muy bien. Ahora en la siguiente lección, crearemos mesa de cartas. 114. Crea un componente de tabla común: Vamos a crear un componente de tabla común. Se podría pensar, por qué necesitamos eso. Déjame mostrarte. Aquí en la mesa de cartas, tenemos un estilo de mesa particular y el mismo estilo que tenemos en la página Mi pedido. La diferencia es solo un dato. Aquí tenemos diferentes datos con diferente rumbo. Puede crear un componente de tabla común y usarlo en ambas páginas. En el lugar de esta mesa de tarjetas, llamamos componente de mesa así. Y para rumbo, pasamos aquí props, encabezados iguales a entre llaves, array, y dentro de esto, pasamos todos los encabezados que queremos mostrar Entonces primero, pasamos la cantidad del precio del artículo, el total y lo eliminamos. Ahora, definamos este componente de tabla. Sé que esto es un poco confuso por ahora, pero solo mira esto y lo entenderás. Entonces en la carpeta de componentes, creamos una nueva carpeta llamada common y dentro de esta carpeta, agregaremos todos nuestros componentes comunes. Ahora, vamos a crear un nuevo archivo llamado table dot css. Y después de eso, creamos un nuevo componente llamado tablet JSX Agreguemos código boilerplate y en la parte superior, importamos el archivo css de punto de tabla Ahora, en el lugar de este de, agregamos etiqueta de tabla y le damos un nombre de clase tabla común. Ahora, dentro de esto, agregamos THAD y dentro de él, agregamos tableow para encabezado Ahora, como sabemos, vamos a usar rubro props, que es array Entonces desestructuramos los apoyos y llegamos aquí encabezados y dentro de este TAD, podemos renderizar Así encabezamientos puntean MAP dentro de esto, obtenemos cada ítem y también función de flecha de índice, y aquí devolvemos Ts tag, key to index, y solo pasamos aquí item Por ahora, veamos qué obtenemos. Guarde esto. En la página del carrito, tenemos que importar este componente de tabla de la carpeta de componentes comunes. Guarde esto y vea, obtenemos esta tabla con encabezamientos. Ahora para mostrar datos, podemos pasar aquí otro props, pero vamos a usar otro método A veces necesitamos pasar JSX como apoyos. Por ejemplo, aquí queremos pasar la etiqueta T body con la lista de ítems, que es nuestro JSX Entonces queremos pasar este JSX en este componente estable. ¿Cómo podemos hacer eso? Es realmente simple. En lugar de pasar JSX en utilería, podemos agregar eso en niños Déjame mostrarte a lo que me refiero. Así que aquí, en lugar de cerrar automáticamente este componente estable, podemos usar este componente como nuestra etiqueta STML Y entre el componente de apertura y cierre, agregamos nuestro JS así que aquí estamos en T cuerpo y dentro de este, nosotros en fila de tabla y dentro de ella, tenemos datos de tabla. iPhone seis, duplica esto cuatro veces más porque tenemos cinco encabezados. Aquí nosotros a precio, dólar 999, cantidad a uno, total a dólar 999, y al final, agregamos remove. Guarda esto y echa un vistazo. No obtenemos nuestros datos porque no definimos dónde queremos mostrar a esos niños JSX Entonces un componente de mesa, y en los apoyos, tenemos una propiedad llamada hijos Este niño tiene todo JSX, que pasamos entre nuestro componente de apertura y cierre Ahora vamos a agregar este componente simplemente aquí. Guarda los ings y echa un vistazo. Ver, aquí obtenemos nuestros datos. Entonces nuestro componente está funcionando. Vamos a establecer estilos para esta mesa común. Así que en el archivo CSS de puntos, en primer lugar, agregamos tabla de subrayado común, llaves, y dentro de esto, agregamos ancho al 100% de margen inferior a 16 píxeles, colapso de borde, a colapsar, color de fondo a blanco Y sombra de caja a cero píxeles, tres píxeles, ocho píxeles, RGBA, cero, cero, cero y opacidad a Después de eso, agregamos tabla común de puntos, cabeza T, y corchetes TR C, y dentro de estos, pasamos altura a 50 píxeles, color de fondo, dos tiene 36, 34 A, color a blanco y texto transformamos a c superior después de eso, apuntamos mesa de .com, cuerpo T, TR, corchetes Cali, altura a 50 xl, y Textaine al centro Y para incluso fila de mesa, queremos cambiar el color de fondo, así nuestra mesa se ve así. Así punto mesa común, cuerpo T, TR, columna, enésimo hijo Y aquí pasamos Evan. C corchetes, color de fondo, dos como FI, FI FI. Di los cambios y echa un vistazo. ¿Por qué no conseguimos estilo para esta cabeza T? Inspeccionemos esto, y podemos ver aquí que no estamos obteniendo estilo para esta cabeza T. Volver al código VS. Y en mesa común Thad Déjame revisar la ortografía. Sí, es cierto. Oh, aquí tenemos que apuntar a TH, salvar los inges y echar un vistazo Ver, nuestra mesa se ve muy bien. 115. Modificación del componente de la página del carrito: Ahora, antes de comenzar a crear nuestra última página, apliquemos algunos cambios en nuestra página de carrito. Aquí en el lugar de esta cantidad, queremos mostrar la cantidad con botón más y menos. Ya lo creamos en nuestra página de producto único. Simplemente podemos usar eso aquí. En el componente de producto único, necesitamos esto. En lugar de copiar y pegar estos elementos, vamos a crear un componente utilizable para eso Cortar el y en la carpeta de producto único, creamos un nuevo archivo llamado quantity input dot CSS. Además, creamos un nuevo componente, entrada de cantidad punto JSX Vamos a agregar código estándar, y en la parte superior, importamos el archivo CSS de punto de entrada de cantidad Ahora en el lugar de esto debido, simplemente devolvemos nuestros elementos. Puedes ver que nos da error de compilación. Entonces envolvemos estos elementos con los fragmentos de reacción. Bueno. Guarde esto, y separemos también CSS para estos elementos. Antes de eso, en el componente de productos individuales, agregamos nuestro componente de entrada de cantidad, guardamos esto, y en el archivo CSS de un solo producto, en la parte inferior, cortamos estos tres estilos, lo guardamos, y en el archivo CSS de entrada de cantidad , pegamos esto. Ahora en la página de la tarjeta en el lugar de ésta, agregamos componente de entrada de cantidad. Guarda los cambios y echa un vistazo. Ver, obtenemos nuestros controles de cantidad sin escribir ningún código CSS o STML Esa es la belleza de crear componentes. Ahora arreglemos este problema de estilo. Entonces aquí agregamos el nombre de la clase, Alinear el centro y la entrada de cantidad. Guarde los cambios, y en archivo CSS de punto de página cat en la parte inferior, agregamos entrada de cantidad de tabla, corchetes CL, y dentro esta altura a 50 píxeles y justificamos el contenido al centro. Nosotros los cambios y echamos un vistazo. Mira, obtenemos nuestros estilos. Ahora, un cambio más en el lugar de este eliminar texto, queremos mostrar, eliminar icono. Así que ve al componente de página CAT, y en el lugar de este eliminar texto, agregamos imagen y fuente para eliminar y arte para eliminar icono y adherir nombre de clase al ícono de eliminación de CAT. Importemos este icono de eliminar en la parte superior. Así que importar, eliminar de aquí vamos a carpetas arriba activos y eliminamos punto PNG. Guarde esto y agreguemos estilo para este icono. En el carrito página punto archivo CSS, agregamos dot cart remove icon calibra ancho a 35 pixel, alto a 35 pixel y cursor a puntero Guarda los ging es y echa un vistazo. ¿Ves? Nuestra pasta se ve muy bien. 116. Formulario anticipado de la Sección 11: Bienvenido a la sección 11 del curso ultimate react. En esta sección, vamos a aprender todas las cosas sobre la forma como construir el formulario, administrar el formulario sin ninguna biblioteca, y también con la biblioteca de formularios react hook. Veremos en ambos sentidos. Después de eso, veremos validación de formularios usando una de las bibliotecas más trending llamada ZOD también cómo podemos manejar la entrada de archivos o imágenes en react Entonces, vamos a sumergirnos en esto. 117. Crea formulario de inicio de sesión: En primer lugar, construyamos nuestra interfaz de usuario de formulario de inicio de sesión. Entonces después de eso, podemos aprender sin preocuparnos por su diseño. Entonces aquí creamos una carpeta más llamada autenticación. Y en esa carpeta, crearemos nuestra página Formulario de inicio de sesión. Así que creamos un nuevo archivo llamado Login page dot CSS. Y además, creamos un nuevo componente llamado Página de inicio de sesión punto JSX Aquí añadimos código boilerplate, y en la parte superior, importamos Login page dot archivo CSS Bueno. Ahora, en el lugar de este día, agregamos sección con nombre de clase, Alinear centro y página de formulario. Ahora dentro de esta sección, agregamos la etiqueta Form y le damos un nombre de clase, formulario de autenticación. Ahora, agreguemos aquí nuestro encabezado al formulario de inicio de sesión. Y después de eso, tenemos Du que tiene todos los rellenos de entrada y le damos un nombre de clase, entradas de formulario. Ahora dentro de esto por ahora, estamos agregando nombre y número de teléfono, pero no te preocupes vamos a cambiar eso pronto. Entonces para entrada individual, agregamos una DU y dentro de esta, pasamos etiqueta y pasamos tu nombre. No pases nada en este DML para al revisado. Te lo explicaré en tan solo un minuto. Después de eso, simplemente agregamos cuadro de entrada con texto tipo y le damos un nombre de clase, formulario, entrada de texto y marcador de posición para ingresar su nombre Ahora, duplica este do y en el lugar de este nombre, escribimos el número de teléfono, y aquí, ingresa el tipo al número de teléfono, y marcador de posición para ingresar tu número de teléfono Y por fin, agregamos botón con tipo enviar y le damos un nombre de clase, botón de búsqueda, y formulario enviar, y pasar aquí, enviar. Guarda esto, y ahora tenemos que agregar este formulario en nuestro componente app. Así que comenta esta página de pedido de M y agrega aquí Página de inicio de sesión. Guarda los cambios y echa un vistazo. Ver, obtenemos aquí los elementos del formulario. Ahora solo necesitamos agregar estilos para ellos. Así que en la página de inicio de sesión punto archivo CSS, en primer lugar, vamos a centrar nuestra sección, así punto FOM Page Cali Brackets, justificar contenido a centro Después de esto, agregamos los corchetes Coli del formulario de autenticación, y aquí el ancho al 30%, relleno a 32 píxeles para parte superior inferior y 48 píxeles para la izquierda y la derecha, parte superior del margen a 32 píxeles y el color de fondo al blanco. Después de esto, apuntamos a nuestro título de formulario. Para que la autenticación, forma H dos, y dentro de los corchetes, agregamos tamaño de fuente a 40 píxeles, margen inferior a 30 píxeles, y el texto se alinee al centro. Guarda esto y mira el título de nuestra página se ve bien. Ahora solo necesitamos agregar estilo para esta etiqueta, rellenos de entrada y botón de envío. Pero antes de eso, pongamos esta etiqueta y entradas en columna. Entonces aquí agregamos entradas de forma de punto, D, y dentro de esta pantalla dos lino, lino dirección a columna, y margen inferior 220 píxeles Después de eso, agregamos entradas de subrayado.com , etiqueta, corchetes Cali, y aquí agregamos tamaño de fuente a 18 píxeles, peso de fuente a 600 y margen inferior a tres Ahora vamos a apuntar nuestros rellenos de entrada, así forma de punto, entrada de texto, corchetes Cali, y dentro de esta altura a 35 píxeles, relleno a cero y ocho píxeles para izquierda y derecha. Tamaño de fuente a 17 píxeles, peso de fuente a 500 y contorno a ninguno. Por fin, agregamos .com, presentamos la altura de Calibraket a 40 píxeles de ancho al 100%, y el margen a 25 píxeles para la parte superior, cero para la izquierda y la derecha, y diez píxeles Guarda los cambios y echa un vistazo. Nuestro formulario está listo. Ahora podrías preguntarte por qué dejé esta etiqueta vacía. Muchos desarrolladores no saben realmente qué hace este atributo estim four Incluso acabo de enterarme de esto en mi cuarto o quinto proyecto cuando me pongo en marcha. Estos cuatro atributos especifican para qué elemento de formulario se enlaza esa etiqueta. Déjame explicarte esto prácticamente. Por ahora, si hacemos clic en esta etiqueta de nombre, no podemos ver ningún efecto. Ahora, aquí en nuestro campo de entrada agregamos atributo ID y pasamos aquí nombre. Ahora en estas etiquetas estim para atributo, tenemos que agregar el mismo ID que agregamos en nuestra entrada Entonces escribimos aquí nombre. Lo mismo hacemos con este número de teléfono, ID a teléfono y tM por atributo a teléfono. Guarda los ins y echa un vistazo. ver si hacemos clic en esta etiqueta, obtenemos nuestro cursor en ese relleno de entrada. Así es como usamos label for attribute, que especifican qué elemento de formulario está encuadernado nuestra etiqueta. 118. Comprender el usoRef Hook: Ahora veamos otro gancho importante en reaccionar, que es usar RF Fok Entonces, antes que nada, ¿qué es usar el gancho Rf y por qué es importante? Use Rf es un gancho para acceder a elementos dom y también para crear múltiples variables, que no volverán a renderizar el componente. Estos son dos casos de uso más comunes para el uso Rf Fok. Por ahora, no nos preocupemos por crear una variable mutable Primero, entendamos cómo podemos acceder a los elementos dom. Así que aquí en nuestro formulario de inicio de sesión, establecemos temporalmente el tipo de entrada de números de teléfono a contraseña. Ahora, como sabemos, muchos sitios web tienen esta característica en la que podemos ocultar y mostrar la contraseña de entrada. Después de esta entrada, agregamos un botón, botón porque escribimos botón porque si no especificamos el atributo type, entonces por defecto, está configurado para enviar y ya tenemos botón submit. Entonces aquí pasamos contraseña de altura y duplicamos este botón y cambiamos esto para mostrar contraseña. Di los cambios y echa un vistazo. Ver, aquí podemos escribir nuestra contraseña que actualmente no es visible. Ahora lo que queremos hacer es cuando hacemos clic en este botón así contraseña, queremos establecer nuestro tipo de entrada en texto simple. Y cuando hagamos clic en el botón Altura, entonces volveremos a configurar type a password. Entonces para eso, necesitamos acceder a este campo de entrada. Ahora veamos como podemos hacer eso usando usar gancho Rf. Así que antes que nada, en nuestro componente, nos escribimos ref Hook y seleccionamos esta sugerencia de auto. Ahora en esto, tenemos que pasar el valor por defecto, igual que lo hacemos en uso date hook. Comúnmente, siempre agregamos aquí null. Ahora bien, este gancho ref de uso devuelve un objeto con una sola propiedad llamada current. Hagámoslo en la variable llamada contraseña ref. Ahora, ¿a qué elemento queremos acceder? Bien, es nuestro relleno de entrada de contraseña. Entonces en ese elemento, tenemos que agregar un atributo llamado Rf. Y aquí pasamos nuestro nombre de referencia, que es contraseña Rf. Ahora veamos qué obtenemos en esta contraseña Rf. Entonces por ahora, en este botón Ocultar, agregamos el evento de clic, y aquí agregamos la función de flecha y la consola dot log, password ref dot current. Guarda los cambios y echa un vistazo. Abra la consola y haga clic en el botón Ocultar. Ver, aquí obtenemos esta entrada con ID Teléfono. Ahora con este elemento, podemos hacer cualquier cosa que hagamos con los elementos Dom en JavaScript Vanilla. Ahora podrías preguntarte, ¿cómo podemos saber qué métodos podemos usar con los elementos y también cómo podemos recordarlo Entonces la respuesta es, no hay que recordar ningún método. Déjame mostrarte mi truco para ver todos los métodos que podemos usar con los elementos. Entonces aquí, simplemente retire esta propiedad actual. Y guárdala. Ahora en Consola, se puede ver este objeto ref contraseña con propiedad actual. Ahora da click en esta pequeña flecha y otra vez, da click en esta flecha. Así que aquí podemos ver todos los métodos que podemos aplicar sobre este elemento. Por ejemplo, queremos aplicar estilo. Desplácese hacia abajo hasta la parte inferior y haga clic en este icono para ver más correctamente. Y aquí se puede ver propiedad de estilo. Da click en él, y podrás ver todos los estilos de propiedad. Tan simple como eso. Entonces en nuestro ejemplo, aquí queremos cambiar el atributo type para esta entrada. Entonces en el lugar de esta consola dot log, escribimos password ref dot current dot type equals to and codes password. Simplemente copiamos este evento onclick y lo pegamos para este botón así Y aquí simplemente cambiamos de tipo a texto. Guarda los cambios y echa un vistazo, escribe algo en esta entrada. Por defecto, está en Ocultar. Ahora da click en Mostrar y aquí podemos ver nuestra contraseña. De nuevo, haz clic en Ocultar y es Ocultar. Y mira con qué facilidad podemos acceder a los elementos dom usando el uso de Rf Hook. Sólo por un tope, primero tenemos que declarar una variable con uso Rf Hook y pasar aquí nuestro valor por defecto, que es nulo. Y después de esto, simplemente pasa el atributo RF a cualquier elemento al que queramos acceder y pasar nuestro nombre de variable de uso Rf. Tan simple como eso, si usamos JavaScript Vanilla, entonces tenemos que escribir aquí documento punto Obtener elemento por ID o nombre. Pero en reaccionar, no necesitamos hacer eso. Tenemos uso Rf ok para acceder al elemento. 119. Manejo de formularios con Ref Hook: Entonces en el primer proyecto, vemos cómo podemos manejar el formulario usando el gancho de fecha de uso. Ahora, veamos cómo podemos manejar la forma usando el gancho de uso Rf. Es muy sencillo. Déjame mostrarte. Así que vamos a quitar estos dos botones. No lo necesitamos y también eliminamos este atributo f. Solo los agrego para explicar el uso del gancho RF. Cambie este tipo a número y elimine también este atributo p. Ahora aquí llamamos use Rf y pasamos aquí null para valor por defecto y le damos un nombre, llamamos nombre ref. Ahora en este nombre ref, queremos obtener referencia de esta entrada de nombre. Entonces en la entrada, agregamos el atributo ref, y aquí pasamos nombre ref. Ahora manejemos enviar para este formulario. Entonces aquí agregamos nuestro evento on submit y pasamos aquí, manejamos la función de enviar. Ahora, definamos esta función. Eso lo hicimos anteriormente, ahora mismo en esta función, por ahora, simplemente consola dot log este NamerV punto Y en esto, tenemos que acceder a este valor de entrada, guardar los cambios, y echar un vistazo, ingresar aquí nombre, y dar clic en consubmit Ver, nuestra página se actualiza. ¿Por qué sucede? ¿Sabes? Derecha. Es porque no agregamos función de prevención predeterminada. Ya puedes ver que conoces muchos pequeños detalles sobre reaccionar. Lo estás haciendo muy bien. Así que aquí agregamos el objeto evento, y dentro de esto, agregamos e dot prevent default function. Guarda los cambios y echa un vistazo. Abre Consola, escribe aquí nombre, y mira, obtenemos este nombre aquí. Ahora, hagamos lo mismo para este número de teléfono llenado. Entonces aquí creamos una nueva constante ref, pasamos aquí null y le damos un nombre, ref telefónico. Puedes usar lo que quieras. Depende totalmente de ti. Ahora en esta entrada de número de teléfono, agregamos el atributo f y pasamos aquí nuestro teléfono ref. Y en nuestra función handle submit, vamos a consola dot log este teléfono rev dot current dot VLU Di los ins y echa un vistazo. Llene estos insumos y envíelos. Mira aquí obtenemos estos valores. Ahora en el mundo real, enviaremos objeto de nuestros datos al servidor. Así que aquí creamos un objeto llamado user, y dentro de este, agregamos name property y damos estos a cadena vacía. Y aquí tenemos teléfono y como valor predeterminado, agregamos cero. Ahora en el lugar de esta consola, establecemos user dot name equals to name rev dot current value. Y después de eso, usuario punto teléfono igual a teléfono ref punto actual valor de punto. Ahora por fin consultar punto registrar este objeto de usuario. Guarda los cambios y echa un vistazo, rellena el formulario, y aquí obtenemos nuestro objeto de usuario, que podemos enviar al servidor. Un pequeño cambio, necesitamos convertir esta cadena de números a solo número. Así que aquí wp este valor con paréntesis y agregamos aquí parse int Guardar cambios, enviar un formulario. Ver aquí obtenemos aquí número. Así es como podemos manejar los valores de forma usando el uso Rf. Ahora podría preguntarse, ¿cuál es la mejor manera de manejar el formulario? Usa Rf o usa estado. La respuesta es el estado de uso. Pero usar Rf también es útil si tenemos hasta diez rellenos de entrada porque cuando usamos sref, eso no causará render el componente Si tenemos de cinco a seis rellenos de formularios, entonces simplemente podemos usar UtaTehok Utilice solamente el gancho sref para el manejo de la forma. Yo estado está causando problema de rendimiento, use userefhuk para En la siguiente lección, manejaremos nuestro formulario con nosotros Gancho estatal. 120. Manejo de formularios con gancho de estado: Entonces, antes que nada, eliminemos estas constantes, eliminemos estas líneas del handle submit y también eliminemos estos atributos f de ambas entradas Ahora, antes que nada, creamos una variable de estado usando SNIPID y le damos un nombre usuario, set user, y un valor por defecto, pasamos objeto con nombre de propiedad a cadena vacía, y phone también cadena vacía Ahora en la parte superior, en lugar de importar UF, importamos Tate Hook. Ahora en nuestro nombre de entrada lleno, agregamos evento de cambio, y dentro de este, aquí obtenemos el objeto de evento, función de flecha, y establecemos usuario a objeto. Primero, obtenemos todos los valores del objeto de usuario anterior y simplemente reemplazamos nombre por el valor de punto objetivo e punto. Ahora para la entrada de Fon, hacemos lo mismo. Así que copia este cambio y pégalo en esta entrada. Y simplemente cambiar este nombre por teléfono. Anteriormente, creamos una función separada para manejar el cambio, pero también podemos hacerlo de esta manera. Puedes usar lo que quieras. Depende totalmente de ti. Ahora, por fin en la función handle submit, nosotros en la consola punto registramos este objeto de usuario. Guarda los cambios y echa un vistazo, rellena el formulario y envíalo. Ver, aquí obtenemos nuestro objeto de usuario. Además, necesitamos convertir este número de teléfono a entero. Así que envuelva este valor con paréntesis y lo que usamos, derecho, parse int Ahora aquí tenemos también poco problema. Sabemos que todos los campos de entrada en SDML tienen una propiedad de valor para mantener su propio estado Pero con esta implementación, también tenemos variable de estado de usuario. Por lo que es posible que la propiedad y las entradas se salgan de sincronía. No ocurrirá muchas veces, pero es mejor prevenir que curar. Entonces, para resolver este problema, agregue la propiedad de valor y establezca el nombre del punto de usuario, y también aquí el valor al usuario punto teléfono Entonces aquí podemos llamar a este campo de entrada como un componente de control porque su estado está completamente controlado por react. Esto simplemente significa que el valor de esta entrada no es administrado por la cúpula, sino que está controlado por el estado del componente. 121. Administra formularios con React Hook Form: Ahora, aquí sólo tenemos dos rellenos de entrada. Mañana, si nuestro formulario se vuelve más complejo, entonces administrar el formulario con used será más difícil y lento porque para cada campo de entrada, tenemos que establecer propiedades como value y onchange event Ante esta situación, podemos utilizar una de las bibliotecas más populares, que es react hook form. Esta biblioteca nos ayudará a crear formularios rápidos, y no necesitamos preocuparnos por administrar el estado del formulario. Esta biblioteca lo hace automáticamente en muy último código. Entonces abre terminal y en el nuevo terminal, escribe NPM, reacciono, forma gancho en 7.43 0.9 y pulsa enter Ahora, minimice esta terminal. Ahora en la parte superior de nuestro componente, tenemos que importar un gancho llamado use form de la biblioteca de formularios react hook. Ahora, en nuestro componente funcional, llamamos a ese uso forma gancho. Este formulario de uso devuelve un objeto de formulario. Entonces almacenamos eso en la variable llamada form, y después de esto, simplemente consol o log este formulario para ver lo que estamos obteniendo en este objeto form Guarda los cambios y echa un vistazo. Ver, aquí obtenemos muchas propiedades y métodos como manejar enviar, registrarse, restablecer, restablecer rellenos, y así sucesivamente. Entonces aquí podemos desestructurar nuestra forma. Y antes que nada, necesitamos el método de registro. Este método de registro toma el nombre de relleno como argumento y devuelve un par de propiedades. Déjame mostrarte a lo que me refiero. Entonces aquí en el lugar de este formulario, agregamos función de registro y pasamos aquí llenar nombre. Digamos nombre. Guarda los cambios y echa un vistazo. Mira aquí obtenemos este objeto con par de relleno como nombre sobre desenfoque en cambio y atributo F. Entonces, esencialmente, esta forma de gancho de reacción utilizará f hook para manejar el formulario. Entonces como te dije, tenemos que usar esta forma de gancho de reacción para forma compleja. Y cuando tenemos forma compleja, usamos f hook. Entonces en el lugar de esto sobre los atributos de cambio y valor, podemos agregar calibracets, y aquí llamamos a esta función de registro Y pasa aquí nuestro nombre de relleno de entrada, que es nombre. Ahora, como acabamos de ver esta función devuelve un par de propiedades. Entonces para agregar eso aquí, podemos usar operador de propagación. Lo mismo hacemos en este relleno de entrada, eliminamos estas propiedades y agregamos aquí función de registro y pasamos aquí nuestro nombre de relleno, que es teléfono y simplemente difundimos esto. Entonces ahora no necesitamos esta variable de estado y también eliminamos esta función handle submit. Ahora aquí en nuestro uso Form hook, obtenemos un método más llamado handle submit. Esta función de envío de mango se utiliza para manejar el envío de formularios. Entonces aquí llamamos a esta función de envío de mango en el evento de envío. Y como argumento, tenemos que pasar una función de devolución Y en esa función, recibimos los datos de nuestro formulario. Así que aquí obtenemos los datos del formulario y simplemente const dot log estos datos del formulario Entonces cuando enviemos el formulario, esta función de flecha se ejecutará simple como eso. Guarda los cambios y echa un vistazo. Rellena el formulario. Y da click en enviar y ver aquí obtenemos nuestros datos, y no necesitamos escribir mucho código. Ahora aquí estamos obteniendo este número de teléfono como una cadena. Entonces para eso, tenemos que pasar segundo argumento en esta función de registro. Así objetamos y establecemos valor como número a true, guardamos los cambios y tomamos una actualización de la página, rellenamos el formulario, y aquí obtenemos nuestro número. Entonces está funcionando. En aplicación del mundo real, no queremos simplemente consultar o registrar estos datos al enviar, sino que llamaremos API o muchas cosas más. Entonces, en lugar de definir esta lógica aquí, podemos definir por separado esta función. Así que corta esta función de flecha, y aquí creamos una nueva función llamada en submit y simplemente pega nuestra función de flecha aquí y pasamos esto en submit aquí. Ya puedes ver que nuestro formulario se ve limpio y más mantenible Este es el poder de reaccionar Biblioteca de formas Hook. 122. Validación de formas: Entonces, en la aplicación del mundo real con formulario de construcción, también tenemos que aplicar la validación de formularios para nuestro formulario. Entonces, primero entendamos qué es la validación de formularios. La validación de formularios es una técnica para garantizar que el usuario ingrese los datos correctamente o no. Por ejemplo, aquí tenemos nuestro nombre relleno y usuario ingresa solo dos caracteres, luego tenemos que mostrar error al usuario, como nombre debe ser de tres o más caracteres. Nos enfrentamos a este tipo de errores muchas veces. Esto se llama como validación de formularios. Aplicar la validación usando la forma de gancho de reacción es muy fácil. Establecer el segundo parámetro, pasamos aquí nuestro objeto de validación y dentro de este, agregamos propiedad de validación como requerido a dos y longitud mínima a tres. Guarda los cambios y echa un vistazo Sin escribir nada, clic en enviar y mira aquí no obtenemos nada porque react hook form solo se enviará al formulario si todos los campos son validados. Si escribimos tres o más caracteres, sólo entonces se ejecuta nuestra función submit. Ahora veamos cómo podemos obtener errores de nuestro formulario. Entonces para eso, tenemos una propiedad llamada form state en este uso form hook. Agrégalo aquí y simplemente consol registra este estado de formulario. Guarda esto y echa un vistazo actualiza la página y mira aquí obtienes objeto y dentro de él, tenemos un par de propiedades como errores se está cargando, se envía, es válido, y así sucesivamente. Simplemente imprima errores de punto de formstate. Guarde esto, actualice la página. Y ver actualmente tenemos objeto vacío. Y en el momento en que nos sometemos a formulario, obtenemos aquí error con nombre propiedad. Y dentro de estos, obtenemos tipo de ese error que se requiere. Si escribimos aquí una letra, entonces obtenemos otro error con el tipo longitud media. Entonces, mediante el uso de este objeto de errores, podemos mostrar errores. Entonces después de nuestro cuadro de entrada, agregamos una etiqueta de énfasis y le damos un error de nombre de clase, formulario, guión bajo Y dentro de esto, agregamos, por favor ingrese su nombre. Ahora queremos mostrar este error sólo si tenemos error de nombre. Así que envuelva este énfasis con corchetes Cl y agregue aquí condición formstate dot errors Ahora, en lugar de escribir errores de punto Fmst, podemos desestructurar la propiedad errors de Form state Entonces en la parte superior, agregamos aquí dos puntos y aquí obtenemos errores. Retire este registro de puntos de consola. No necesitamos eso. Ahora en la parte inferior, podemos usar errores nombre de punto, interrogación tipo de punto igual a requerido. Si es cierto, entonces sólo mostramos este error. Ahora podría preguntarse por qué agrego aquí signo de interrogación. Este signo de interrogación y período se llama como encadenamiento opcional Necesitamos esto porque el sujeto de errores puede estar vacío, lo que significa que si no tenemos errores en este campo de nombre, no obtenemos errores propiedad de nombre de punto, y si no tenemos estos errores propiedad de nombre de punto, entonces queremos acceder a esta propiedad de tipo, entonces nos dará error. Este signo de interrogación le dirá navegador si hay errores de nombre de punto disponible, solo entonces verifique esta condición, de lo contrario, ignórala. Ahora, agreguemos error para la longitud media. Duplica esta línea y aquí agregamos longitud media. Y también cambiar este mensaje de error a nombre debe ser de tres o más caracteres. Guarda los cambios y echa un vistazo. Envíe un formulario y vea aquí recibimos este mensaje de error. Por favor ingrese su nombre. Y si escribimos algo, entonces el mensaje de error cambiará a nombre debe ser de tres o más caracteres. Y si escribimos tres o más de tres caracteres, entonces el error desaparece, y eso es bastante genial, ¿verdad? Cambiemos este color de error. Así que en la página de inicio de sesión punto archivo CSS en la parte inferior, agregamos punto FM guión bajo error Y en corchetes Cali, agregamos color al rojo. Di los cambios y mira, aquí obtenemos error en color rojo. 123. Validación de formularios basada en esquemas: Entonces, en la lección anterior, tuvimos la validación del formulario entre nuestro marcado. Ahora, si en el futuro, tenemos una forma compleja, entonces nuestro marcado se vuelve realmente complejo y nuestro código ya no se podrá mantener Entonces en esta situación, podemos usar otra técnica llamada validación basada en esquemas. Entonces, en la validación basada en esquemas, podemos mantener todas nuestras reglas de validación en un solo lugar. Hay un par de bibliotecas como Yup y Zod. Actualmente, Zod es muy famoso, así que usaremos eso. Abrir terminal y en la nueva terminal, derecha NPM, I Zod O si quieres instalar el mismo verson que estoy usando, entonces puedes agregar aquí en 3.21 0.4 y presionar enter Agradable, minimizar esta terminal. Ahora en la parte superior de nuestro componente, importamos un método llamado Z de Zod Al usar esta Z, podemos definir el esquema para nuestro formulario. En palabras simples, esquema es un conjunto de reglas para campos. Ahora quiero cambiar nuestros campos de formulario a correo electrónico y contraseña. Solo uso los campos de nombre y fuente para explicarte sobre el formulario. Entonces en nuestro formulario, cambiamos esta etiqueta a correo electrónico, también aquí correo electrónico y también cambiamos esta identificación a correo electrónico. Y dentro de esta función de registro, también cambiamos esto a correo electrónico. Y aquí también podemos cambiar el tipo de entrada a correo electrónico. Cambia este marcador de posición para ingresar tu dirección de correo electrónico. Ahora, después de esto, cambiamos este teléfono a contraseña. Y también aquí contraseña, escriba a contraseña, ID a contraseña y marcador de posición para ingresar su contraseña Y en esta función registrada, también pasamos contraseña. Ahora, definamos esquema para estos dos rellenos. Así que en la parte superior, nosotros en z punto Object. Ahora dentro de esta función, tenemos que pasar objeto, que tienen todos los campos y también reglas para que los rellenos. Entonces nuestro formulario de inicio de sesión tiene el primer correo electrónico, que es cadena, entonces Z punto cadena punto correo electrónico. Este método comprobará que nuestro correo electrónico es válido o no. Y también, estableceremos mínimo a tres caracteres. Entonces aquí definimos tres reglas para nuestro campo de correo electrónico, cadena, correo electrónico y mínimo tres caracteres. Ahora lo mismo hacemos para el campo de contraseña. Cadena de puntos Z, y media a ocho. Si quieres aplicar más reglas de validación, entonces puedes consultar la documentación de Zo . Es muy sencillo. Aquí tenemos listo nuestro esquema realizar rellenos, para que podamos almacenarlo en la variable llamada schema. Ahora podría preguntarse, ¿cómo podemos aplicar este esquema a nuestro formulario? Entonces para eso, necesitamos una biblioteca más llamada Resolvers Hook Form Así que abre terminal y escribe NPM, yo en Hook Form slash En 3.0 0.1, y pulsa Enter. Al usar estos resolutores, podemos agregar fácilmente nuestro esquema o en nuestra forma de gancho de reacción Ahora en la parte superior, importamos resolvedores ZR de forma de gancho, resolvedores de slash SOD. Bueno. Ahora en nuestro formulario de uso hook, pasamos aquí objeto, y dentro de este, tenemos propiedad llamada resolver, y aquí agregamos ZR resolvedor, y dentro de él, pasamos nuestro esquema ahora vamos a recapitular rápidamente lo que hemos hecho en esta lección Entonces, antes que nada, usando el método Z, creamos nuestro esquema de validación, que es un conjunto de reglas para los rellenos de formularios. Y luego usando el Dissolver Zod, aplicamos este esquema a nuestra forma de gancho de reacción Entonces cuando tengamos errores, agregará directamente para reaccionar el error de forma de gancho. Tan simple como eso. Ahora veamos cómo podemos mostrar estos errores. Así que antes que nada, en función de registro, podemos eliminar este objeto de validación. No necesitamos eso. También podemos eliminar esta condición, y aquí no necesitamos verificar este tipo de error. En lugar de eso, podemos hacer algo así. Si tenemos errores dot email, solo entonces mostramos error. También en el lugar de este mensaje de error codificado duro, podemos usar errores dot email dot message. Este mensaje es el mensaje predeterminado que agregó Zod, pero también podemos personalizarlo así que copiemos esta pieza de código desde aquí y peguéela para que se llene la contraseña Ahora en el lugar de este correo electrónico, agregamos errores dot password y también errores dot password dot MESSage. Guarda los cambios y echa un vistazo. Refresca la página, y no escribas nada y envíala. Ver aquí obtenemos un mensaje de error como correo electrónico no válido y la cadena debe contener al menos ocho caracteres. El correo electrónico y la contraseña lo rellena y lo envía. Mira, aquí obtenemos nuestros datos, así que está funcionando. Ahora, vamos a personalizar este mensaje de error. Así que para agregar nuestro mensaje personalizado, podemos pasar aquí objeto con propiedad de mensaje. Y pase aquí mensaje, por favor ingrese dirección de correo electrónico válida. También para esta contraseña, pasamos Objeto y mensaje a contraseña debe tener al menos ocho caracteres. Guarde los cambios y eche un vistazo, actualice la página y envíe el formulario. Vea, obtenemos nuestro mensaje de validación personalizado, para que pueda ver lo simple y fácil de manejar el formulario y la validación usando el formulario react hook y la biblioteca SOT. 124. Ejercicio para formas: Ahora es el momento de poco ejercicio. Quiero que manejes este formulario de registro con react Hook de biblioteca y también agregues validación para estos rellenos de entrada. No se preocupe por manejar la entrada de imágenes, manejar rellenos de entrada y agregar validación para ellos. Esto es muy fácil, y sé que puedes hacerlo. Aquí están los detalles del mensaje personalizado de validación, y al usarlos, debe agregar reglas de validación. Ahora, antes de comenzar este ejercicio, quiero darle la página de registro porque en esta sección, nuestro enfoque principal está en la forma. Así que abre la carpeta de recursos, que descargarás al inicio de este curso y abre carpeta Proyecto tres y ve a la carpeta de ejercicios Formulario. Aquí, agregué el componente de página de registro y también el archivo CSS. Así que ve como estos dos archivos y suelta estos archivos en la carpeta de autenticación. Ahora agreguemos esta página en nuestro componente de aplicación. Así que comenta esta página de inicio de sesión y agrega aquí la página de registro, y estamos listos para ir. En la parte inferior, también agrego mensaje de validación para este formulario. Así que dedique un tiempo a este ejercicio, luego regresar y ver esta solución. 125. Solución de este ejercicio: Ahora, veamos la solución de este ejercicio. Sé que resuelves este ejercicio, y si te pegas en algo, entonces no te preocupes, ya puedes aprender, pero al menos lo intentas y eso es más importante. Por lo que no tardaré mucho tiempo y directamente te mostraré la solución. Entonces, antes que nada, en la parte superior, ingresamos use form hook de la biblioteca de formularios react hook. Y dentro de nuestro componente, llamamos a este formulario de uso gancho. Y almacenar eso en constante y directamente desestructurar el método de registro y también manejar método de envío Ahora en el campo de entrada de nombre, agregamos función de registro y pasamos aquí nuestro nombre de relleno, que es nombre. Como sabemos, este método de registro devuelve par de atributos y eventos. Para agregar eso, tenemos que difundir esto. Vamos a copiar esto y pegarlo en todos los demás rellenos de entrada. Presiona Alt u opción, y por camarilla, creamos múltiples cursor y simplemente lo pegamos Ahora para correo electrónico, agregamos aquí correo electrónico aquí agregamos contraseña. Después de eso, confirme la contraseña, y en la última dirección de entrega. Ahora, manejemos el envío. Entonces en nuestro formulario, agregamos el evento submit, y dentro de este, llamamos a esta función handle submit. Y dentro de esto, pasamos nuestra función, call on submit. Ahora, definamos esta función. Entonces contras en enviar, y obtenemos aquí los datos del formulario, función de flecha, y simplemente vamos a consultar o registrar los datos de este formulario. Guarda los cambios y echa un vistazo, rellena este formulario. Y haz clic en Con Enviar. C, aquí obtenemos nuestros datos. Entonces manejamos con éxito nuestro formulario. Ahora agreguemos validación usando Zod. Entonces en la parte superior, importamos Z de Zod y también importamos ZR resolvedor de forma de gancho Zod Por qué necesitamos este derecho de resolución ZR para aplicar esquema con forma de gancho de reacción. Ahora vamos a crear un esquema para nuestro formulario de registro. Entonces escribimos objeto punto z, y dentro de este, agregaremos nuestro objeto de validación. primer campo es nombre, que es Z cadena de puntos punto punto Min 23. Y aquí pasamos nuestro mensaje de error personalizado. Entonces Object message to name debe tener al menos tres caracteres. A continuación, tenemos correo electrónico, que es cadena de puntos z, así que correo electrónico punto. Y dentro de esto, pasamos mensaje. Por favor ingrese un correo electrónico válido. Después de eso, agregamos contraseña, que es z dot string. También significa ocho y pasar aquí mensaje personalizado a contraseña debe tener al menos ocho caracteres. Ahora para confirmar contraseña, solo agregamos cadena de puntos z. Te explicaré por qué en tan solo un minuto. Y por fin, tenemos dirección de entrega, que también es string y también significa 15 caracteres. Y pasa aquí, nuestro mensaje personalizado a domicilio debe tener al menos 15 caracteres. Necesitamos comparar nuestra contraseña con nuestra contraseña de confirmación rellenada. Entonces para eso, después de este objeto, agregamos método refinado. Dentro de esto, podemos agregar la función de devolución de llamada, que tiene parámetro de datos Solo ve esto y tus asignaciones desaparecerán. Ahora aquí pasamos condición, datos, que es el objeto actual de nuestro formulario llenar, punto contraseña igual a datos punto confirmar contraseña. Ahora para esto, también podemos pasar mensaje personalizado en el segundo parámetro. Mensaje para confirmar la contraseña no coincide con la contraseña, y necesitamos agregar una propiedad más llamada ruta. Y aquí en corchete, agregamos nuestro nombre de campo el cual es contraseña confirmada. Entonces, básicamente, esto significa que si data dot password y data dot confirm password no es lo mismo, entonces obtenemos este mensaje de error para nuestro campo de confirmación de contraseña, simple como eso. Entonces aquí tenemos esquema listo. Así que vamos a almacenar eso en la variable llamada schema. Bueno. Ahora, solo tenemos que agregar este esquema en nuestra forma de gancho de reacción. Entonces en uso formulario hook, agregamos objeto, y dentro de esto, tenemos resolvedor, y aquí llamamos ZorrSolver y pasar Ahora vamos a mostrar simplemente estos errores de validación. Entonces en este formulario de uso, obtenemos el estado del formulario, y aquí podemos desestructurar los errores Ahora, debajo de esta entrada de nombre, agregamos paquetes de Cali, y aquí agregamos si errores nombre de punto es verdadero, entonces mostramos enfatizar etiqueta con nombre de clase, formulario de error de subrayado Y dentro de esto, agregamos errores punto nombre punto mensaje. Copia esta condición y pegarla debajo de todos los demás rellenos de entrada. Ahora, para correo electrónico, que en esto a errores puntean correo electrónico para contraseña, que en esto a errores puntean contraseña. Para confirmar contraseña, cambiamos esto a errores punto confirmar contraseña. Y por fin para la dirección de entrega, cambiamos eso a errores punto dirección de entrega. Guarde los cambios y eche un vistazo, envíe un formulario y vea aquí obtenemos todos los mensajes de validación. Ahora rellene el formulario completo y haga clic en Enviar. Ver, obtenemos nuestros datos de entrada. Puedes ver lo rápido y fácil que podemos manejar formulario y la validación usando el formulario React y la biblioteca ZO. 126. Manejo de la carga de imágenes: Ahora veamos cómo podemos manejar formulario con imagen de carga o cualquier subida de archivos. Por lo que hay múltiples formas de manejar imagen de carga. Quiero mostrarte mi método favorito y más fácil. Entonces aquí, antes que nada, crearemos una variable de estado usando fragmentos ust y le daremos un nombre, perfil y estableceremos pico de perfil Y como valor predeterminado, pasamos aquí null. También en la parte superior tenemos que importar estado de react. Bueno. Ahora cuando agreguemos nuestra imagen, pondremos en estado pico de perfil, igual que hacemos con rellenos de entrada. Entonces en esta entrada de archivo, agregamos evento sin cambios, y aquí obtenemos el objeto de evento, función de flecha y el pico de perfil establecido. Et archivos de punto objetivo. En estos archivos, podemos tener una lista de. Aquí, solo necesitamos primera imagen, así índice a cero. Ahora veamos qué obtenemos en este pico de perfil. Simplemente consola dot log, este perfil mira, guarda los cambios y echa un vistazo Refresca la página, y primero, aquí obtenemos null, que es el valor predeterminado. Ahora vamos a subir imagen y ver aquí obtenemos nuestro objeto archivo, que tiene un par de propiedades como nombre, tamaño, tipo, etcétera Entonces cuando tenemos que subir la imagen al servidor, tenemos que enviar este objeto de archivo a nuestro back end. No te preocupes, eso lo veremos en la siguiente sección. Por ahora, centrémonos en manejar la carga de imágenes. Obtenemos con éxito este objeto de imagen. Ahora solo tenemos que mostrar nuestra imagen seleccionada dentro de esta vista previa de imagen. Es realmente simple. Déjame mostrarte. Aquí en la fuente de imagen en el lugar de este usuario, agregamos aquí una condición. Si el pico de perfil no es nulo, entonces renderizaremos nuestro pico de perfil, lo contrario nos ceñimos a nuestra imagen predeterminada que es usuario. Establece los cambios y echa un vistazo, reprime la página y sube una imagen Mira aquí nuestra imagen por defecto se ha ido, pero no estamos obteniendo nuestra imagen seleccionada. La razón está aquí, simplemente devolvemos nuestro objeto de selección de perfil, que no es la imagen. Tenemos que convertir este objeto en imagen, y ¿cómo podemos hacerlo simplemente usando el método creat Object URL Así aral dot create Object URL es un método en JavaScript que nos permite crear una URL única para un archivo dado Esta URL se utiliza para mostrar la imagen en etiqueta de imagen o reproducir archivos de audio o video en Media Player. Tenga en cuenta que esta es solo URL temporal, lo que significa que si cerramos nuestra página, entonces desaparecerá. Entonces en el lugar de este pico de perfil, pasamos l punto crear URL de objeto y dentro de este, pasaremos nuestro objeto de imagen, que es profile Peak, guardaremos los cambios y echaremos un vistazo. Ver, aquí obtenemos nuestra imagen seleccionada. Puedes ver lo sencillo y fácil que es manejar la carga de imágenes en react. Ahora con esto, completamos nuestra sección de formulario avanzado. Ahora en la siguiente sección, conectaremos nuestra aplicación react con el back end real que creé para este proyecto. S en la siguiente sección. 127. Sección 12 Conexión al backend: Bienvenido a la sección 12 del curso ultimate react. En esta sección, vamos a conectar nuestra aplicación react con el back-end. Creé este back end, especialmente para esta aplicación usando nodejs, express Js y MongoDB porque con la mayoría de todas las aplicaciones de reacción, a los desarrolladores les gusta Aquí, quiero aclarar una cosa que no estamos creando Bend porque no es el alcance de este curso y nuestro enfoque principal es aprender reaccionar. En la siguiente lección, instalaremos Mongo DB en nuestro sistema, que es la base Si ya tienes a Mongo Di B en tu máquina, entonces también en mi sugerencia, intenta instalar la última versión de Mongo Di B. Empecemos esta sección 128. Instala MongoDB y Compass en Windows: Así que vamos a instalar Mongo Di B en Windows. Si tienes Mac, entonces puedes saltarte esta lección. Entonces, antes que nada, dirígete a mongodib.com y *** Después en Community Edition, seleccione Servidor de la comunidad. Desplácese hacia abajo. Y aquí, podemos seleccionar la versión MongoDB. En mi recomendación, por favor no lo cambies. A continuación, podemos seleccionar nuestra plataforma, y luego podemos seleccionar paquete. No te preocupes por eso. Simplemente haga clic en Descargar. Consulta cómo se inicia la descarga. Ahora, después de completar la descarga, abre esa configuración y te pedirá permiso de instalación. Permitirlo. Haga clic en siguiente, acepte el acuerdo, haga clic en siguiente, haga clic en Completar. Después de eso, desde aquí, puede cambiar su ruta de instalación. Pero si no tienes ninguna razón, entonces no la cambies. Simplemente haga clic en siguiente. Asegúrate de seleccionar esta brújula MongoDB de instalación, que es la aplicación para Mongo DB en la que podremos ver todas las tablas de base de datos y editar o Haga clic en Siguiente e instale. Esto tomará algún tiempo alrededor cinco a 10 minutos porque también estamos instalando la brújula Mongo DB Después de completar la instalación, verifiquemos esto. Entonces en el símbolo del sistema y escribe Mongo y presiona Enter. Obtenemos este error. Mongo no es reconocido como un comando interno o externo Entonces para resolver este error, tenemos que volver a ir al sitio web de Mongo DB y aquí en la parte superior, productos y en herramientas, SeaCLNW haga clic Y solo descarga esto. Ahora abre la carpeta de descargas y extra dot zip, que descargamos. Abre esa carpeta, y en carpeta Bin, obtenemos este archivo x de Mongo Así que copia esto y abre la unidad C. Archivos de programa, servidor MongoDB, 6.0 bean pégalo aquí. Estos Mongos es nuestra celda MongoDB. Ahora tenemos que hacer solo un último paso, que es establecer la variable path to environment. Copia esta ruta al inicio, busca la variable de entorno y abre edita las variables de entorno del sistema. Ahora haga clic en las variables de este entorno y en las variables del sistema, seleccione la ruta, y haga clic en Editar. Ahora tenemos que agregar ese camino de enlace aquí, clic en Nuevo y transitar ese camino. Haga clic en Bien. Bien, y bien. Reinicie su símbolo del sistema y ábralo de nuevo. Justo aquí, Mongos y golpeó Enter. Obtendremos la celda Mongo Di B, por lo que instalamos con éxito Mongo Di B en nuestro sistema Ahora, déjame darte un recorrido rápido sobre la brújula Mongo DiBe Entonces, cuando abrimos esta aplicación por primera vez, tenemos que ingresar a nuestra cadena de conexión, que es Local host. Entonces escribe esta cadena de conexión, que escribo y hago clic en Ccnect Ver, aquí obtenemos toda nuestra base de datos y tablas. 129. Configurar el backend: Después de instalar MongoDB y Mongo DB compass en nuestro sistema, es el momento de configurar nuestro backend y rellenar los datos en la base de datos Ahora podrías preguntar, cuál es la necesidad de este backend y por qué estamos agregando datos en nuestra base de datos Entonces anteriormente, vimos cómo llamar a API pública en react. Pero a medida que creamos un sitio web para la empresa, muchas empresas tienen su propio backend Así que creé este backend para nuestra aplicación, y además solo no se necesita backend Tenemos que almacenar los datos de nuestros productos y los datos de los usuarios en nuestra base de datos. Para que podamos obtener esos datos y mostrarlos en nuestra aplicación. Actualmente, en nuestra Brújula Mongo Di B, podemos ver que sólo tenemos la base de datos generada por el sistema Tenemos que agregar el nuestro propio. Abre la carpeta de recursos y en la carpeta Proyecto tres, tenemos cartwis back end. Ábrelo y ábrelo en código VS. Ahora no necesitas preocuparte por nada dentro de este back-end. Sólo haz lo que yo estoy haciendo y ya estás listo para ir. Entonces antes que nada, tenemos que instalar todos los paquetes. Así que abre terminal y escribe NPM install y pulsa Enter. Ahora en este dato punto JSNFle, agrego algunos datos para productos Entonces, para llenar estos datos en nuestra base de datos, solo escribimos aquí productos de nodo, archivo dot js, y pulsamos Enter. Y vea aquí obtenemos datos llena o restaurada con éxito. Verifiquemos esto. Cambiar a Mongodi bramos y actualizamos la Y aquí podemos ver la base de datos de Catews. Abre eso y dentro de esta base de datos, actualmente solo tenemos dos tablas, categorías y productos. Abre el, y aquí obtenemos estos datos de categorías. Y si abrimos productos, entonces obtenemos datos de productos. Desde aquí, podemos ver, actualizar y eliminar estos registros. Ahora podemos minimizar este coompass Mongo D B y en nuestro código Ben VS, ejecutamos node index dot js y C, obtenemos servidor se está ejecutando en el puerto 5,000 y también la base de datos conectada. Verifiquemos que esta API funcione o no. Abre nueva pestaña en el navegador y en la URL, escribe host local Columna 5,000 porque nuestro backend se está ejecutando en la categoría API del host local 5,000 , y presiona Enter Ver, aquí obtenemos esta matriz de todas las categorías, así que está funcionando. No cierres esta terminal. Sin esta terminal funcionando. No podemos conectar nuestra aplicación de reacción con Ben. Así que asegúrate de que se esté ejecutando mientras estamos haciendo llamadas a la API. 130. Implementa el enrutamiento en nuestra aplicación: Ahora, antes de comenzar a aplicar parches a los datos, implementemos el enrutamiento en nuestra aplicación porque actualmente tenemos que agregar componentes manualmente en nuestro componente de aplicación Entonces abre terminal y en el nuevo terminal, escribimos NPM, instalamos, reaccionamos router Dom en 6.11 0.2 y pulsamos Enter Bueno, minimizar esta terminal. Ahora bien, ¿cuál es el primer paso para aplicar el ruteo? Bien, tenemos que envolver nuestra aplicación con el componente de enrutador de navegador. Así que abre el componente principal, y en la parte superior, importamos el enrutador del navegador de react Router doom y envolvemos nuestro componente de aplicación con el componente del enrutador del navegador Guarde los cambios y ahora abra el componente de la aplicación. Aquí tenemos todas nuestras páginas que creamos, y por eso te dije que comentaras estas páginas aquí, así no olvidamos agregar ningún componente de página. Además, definamos todas las rutas en un componente separado. De lo contrario, nuestro código se volverá feo. En la carpeta de componentes, agregamos una carpeta más llamada routing, y dentro de este routing, creamos un nuevo componente llamado routing dot JSX Agreguemos aquí boilerplate, y en la parte superior, importamos, en primer lugar, rutas y ruta desde react router Ahora vamos a eliminar esto debido y agregamos aquí el componente rutas. Y dentro de estas rutas, podemos agregar nuestro componente de ruta única. Pero antes de eso, agreguemos todas las importaciones desde el componente de la aplicación. Aquí cortamos todas estas importaciones y las pegamos en nuestro componente de enrutamiento. Bueno. Ahora definamos ruta. Entonces, antes que nada, ruta ruta a barra, que es home y elemento a home page Ahora después de eso, agregamos otra ruta de ruta para recortar productos y elemento a la página de productos Ahora duplica esta ruta cinco veces más. Y aquí agregamos ruta para recortar productos y elemento a página de producto único A continuación, tenemos ruta para apuntarte y elemento para inscribirte página. A continuación, tenemos ruta para iniciar sesión y elemento a página de inicio de sesión. A continuación, agregamos ruta al carrito un elemento a la página del carrito. Y al fin, teníamos un camino a mis pedidos y elemento a mi página de pedidos. Guarde los cambios y definamos este componente de enrutamiento en nuestro componente de aplicación. Así que elimine todas estas páginas y simplemente agregue aquí el componente de enrutamiento. Como desarrollador, en mi humilde opinión, siempre se debe tratar de dar un enfoque paso a paso. No intentes implementar toda la funcionalidad o tarea de una sola vez. Al hacer eso, te quedaste menos y puedes pensar con más claridad. Guarde los cambios y veamos cómo funciona o no el enrutamiento. Ver, aquí estamos recibiendo error. Es porque entramos por el camino equivocado. Entonces, en el componente de enrutamiento en el lugar de este período los componentes de segmento, tenemos que agregar doble punto. Seleccione esto y presione Control más D o Comando más D para editar múltiples cursor y agregue aquí punto. Di los cambios y echa un vistazo. Ver, aquí tenemos nuestra página de inicio. Ahora haga clic en la página Productos y vea, obtenemos la página de productos, así que está funcionando. Pero tenemos que reemplazar estos enlaces con el componente NewLink Entonces p Nunca componente, tenemos todos estos enlaces en link con icon component y este link en anchor tag aqui. Entonces, reemplacemos este anclaje al componente Newlin y reemplacemos HRF a dos Guarde esto y a tinta con componente de icono, reemplazamos el anclaje por el componente Newlin y HRF 22 Puedes ver con qué facilidad podemos modificar nuestro código. Y por eso almacenamos este enlace en componente separado. Guarde esto y agreguemos CSS para Link activo. Entonces en el archivo CSS de punto Navbar, aquí, agregamos tintas de punto NabarUnderscoe, bracket angular, anchor, dot Active Coli brackets, y establecemos Di los cambios y echa un vistazo. Cambia las páginas y mira aquí obtenemos nuestro enrutamiento. 131. Recupera productos: Ahora, llamemos a nuestra primera API para obtener la lista de todos los productos. Y para llamar a API, usaremos Axos, abriremos terminal y escribiremos NPM install XOS y presionaremos Minimice este terminal y primero definamos nuestra URL base API para cada solicitud. Entonces en la carpeta fuente, creamos una nueva carpeta llamada Utils y dentro de esta carpeta, creamos un nuevo archivo llamado api Client Js. Esto es para hacer STDPRquest usando Xos. Recuerda, ya creamos esto. Dentro de este archivo, ingresamos Xos desde XOS y después de eso, escribimos Xos dot RET pasar aquí nuestro En este objeto, tenemos la propiedad URL base. Y aquí, podemos pasar nuestra URL base. Así que aquí, nuestra URL base es la columna SDDP, host local de doble slash hacia adelante, columna 5,000 slash Ahora aquí también podemos pasar nuestros encabezados API que desea enviar con nuestra solicitud de API. Nuevamente, depende de API. Si eres desarrollador front-end, entonces obtienes todos estos detalles de API Por desarrolladores Backend No hace falta que te preocupes por esto. Vincularé nuestra documentación API en la carpeta de recursos, o puedes descargarla desde archivos adjuntos. Ahora vamos a exportar esto por defecto. Guarde esto. Y ahora cuando queremos hacer una solicitud de API con AXIOS, simplemente ingresamos este cliente API y hacemos lo mismo que hacemos con XOS originales Entonces, cuando una página de producto, aquí tenemos que decidir dónde necesitamos llamar a API para productos. Así que en nuestro componente de lista de productos, estamos mostrando todos nuestros productos. Así que podemos llamar a nuestra API aquí. Entonces, antes que nada, en este componente, necesitamos crear una variable de estado para almacenar la lista de productos. Así que escribe use y presione tab para importar ust y escríbanos fragmentos y dale un nombre, productos, set products, y como valor predeterminado, pasamos aquí array vacío Ahora también crea una variable de estado más llamada error y establece errores. Y como valor predeterminado, pasamos cadena vacía. Ahora, en qué gancho llamamos a nuestros productos API, llamamos a nuestra API en uso efecto hook porque necesitamos obtener datos cuando el componente se rinde. Entonces, use el efecto y dentro de él, función de devolución de llamada y el segundo parámetro es para la matriz de dependencias Ahora, llamemos a nuestra API. En la parte superior, importamos el cliente API, que se acaba de definir desde el cliente API de Utils Ahora, agreguemos aquí API client dot Obtener ahora dentro de esto, pasamos nuestra URL, que es productos slash Esta expresión devuelve una promesa. Entonces respuesta, función flecha, set products. Ahora aquí tenemos que pasar nuestra matriz de productos. Entonces para verificar esta respuesta, abra nueva pestaña en el navegador y escriba nuestro método GAT. Host local, Columna 5,000 API slash Productos y pulsa Enter Y mira aquí obtenemos este objeto de respuesta con un montón de propiedades. Por ahora, no nos preocupemos por esto. Solo hacemos una tarea a la vez. Así que volvamos al código VS, y aquí pasamos los datos de punto de respuesta, que es nuestro objeto, y obtenemos aquí los productos punto. Ahora para manejar errores, agregamos el método catch, y aquí obtenemos error, función de error y establecemos error en mensaje de punto de error. Ahora veamos que obtenemos los datos de nuestros productos o no. Guarde los cambios y vuelva a nuestra aplicación. Abra las herramientas para desarrolladores y abra el paso de componentes aquí. Busca lista de productos, y aquí obtenemos nuestro listado de productos. Seleccione el y vea en este estado, obtenemos nuestra matriz de productos que tiene ocho productos, por lo que está funcionando. Ahora, vamos a exhibir estos productos en tarjeta. Entonces, en el lugar de las múltiples tarjetas de productos, nosotros en products dot MAP aquí obtenemos un solo producto, función de error, y simplemente devolvemos el componente del producto, y no olvidamos agregar atributo clave al ID de subrayado de punto del producto, que es el ID único para todos los productos Guarde los NGs y eche un vistazo. Ver, aquí conseguimos tarjeta de ocho productos. Vamos a manejar el error para esta solicitud de API. Entonces antes de esta lista de productos, agregamos una condición. Si el error está disponible, entonces imprimimos ese error aquí. Así que enfatiza la etiqueta y dale un nombre de clase por error. Y aquí agregamos este error. Ahora, vamos a generar error. Entonces en el lugar de esta URL API, hacemos Typo, guardamos los cambios, y echamos un vistazo, reprimemos la página y vemos aquí obtenemos este Perfecto. Eliminemos este error tipográfico Ahora en la siguiente lección, haremos que nuestro componente de tarjeta de producto sea dinámico. 132. Cómo hacer que las tarjetas de productos sean dinámicas: Ahora hagamos que nuestro componente de tarjeta de producto sea dinámico, abramos un solo objeto de producto, solo para ver qué hay dentro de esto. Aquí tenemos reseñas, cuales mostramos aquí, subrayado ID, la imagen del título es array No necesitamos array, solo necesitamos la primera imagen para el póster. Ahora, después de eso, tenemos precio y stock. Entonces componente de tarjeta de producto, y aquí, primero agregamos todos los accesorios que necesitamos en este componente St estructura apoyos. Primero obtenemos la identificación, luego las imágenes. Después de eso, necesitamos precio. Después de eso, el título, calificación, la calificación cuenta, y al fin, necesitamos acciones. Ahora vamos a reemplazar los valores estáticos por estos apoyos. En el lugar de este iPhone, agregamos imagen. Después de eso, aquí agregamos precio. Entonces aquí agregamos título. Después de eso, la calificación y aquí, la calificación cuenta. Ahora solo mostraremos este botón cabeza a tarjeta si el stock es mayor que cero. Entonces mira como este botón y presiona el corchete izquierdo. Esto envolverá nuestro código entre paréntesis CLI. Si presiona corchetes culi derechos, entonces este código se reemplazará con corchete culi derecho Aquí pasamos condición. Si el stock es mayor que cero, entonces solo muestra este botón de cabeza a tarjeta. Ahora en la parte superior, lo siento, olvidamos agregar ID de producto a este enlace. Por lo que eliminamos esta etiqueta de anclaje y agregamos aquí Nuevo enlace o componente de enlace y atributo a llaves, Batak, producto de barra diagonal, ID de dólar de barra Así que terminamos con el componente de tarjeta de producto. Ahora sólo tenemos que pasar estos apoyos a la tarjeta del producto. Entonces en la parte superior, eliminamos esta importación de imagen, guardamos este archivo, abrimos el componente de lista de productos. Aquí después de esta clave, pasamos ID al producto punto subrayado ID, imagen a producto punto Imagen y aquí obtenemos la primera imagen Precio a producto precio punto, título a producto, título, calificación al producto punto revoluciones punto Rate Recuento de calificación a revoluciones de puntos del producto Recuentos de puntos. Y stock a producto punto Stock. Guarda los cambios y echa un vistazo. Mira aquí obtenemos todos los detalles, pero no estamos obteniendo imagen. Veamos por qué no estamos obteniendo esta imagen. Da click derecho sobre la imagen, selecciona imagen, abre esta DU y en etiqueta Anchor, tenemos nuestra imagen. Aquí podemos ver que estamos pasando solo nombre de imagen en fuente. Tenemos que pasar la URL de la imagen aquí. Ya tenía detalles sobre eso en la documentación de API. Entonces en nuestro componente de tarjeta de producto, en el lugar de esta imagen, Bates, aquí agregamos HTTP, columna doble para nuestra barra, Host local, Columna 5,000 Slash products slash aquí agregamos nuestro nombre de imagen de producto. Así que la imagen del dólar, establece los cambios y echa un vistazo. Mira aquí obtenemos nuestra imagen. 133. Recuperación de categorías: Ahora vamos a buscar todas las categorías y mostrarlas en esta barra lateral Entonces en los productos componente de barra lateral, y aquí también hacemos lo mismo para obtener datos En primer lugar, creamos la variable Estado usando ust Hook y le damos un nombre, categorías y categorías establecidas. Y por defecto, pasamos array vacío. Y después de eso, creamos una variable de estado más llamada errores y establecemos errores, y pasamos cadena vacía como valor predeterminado. Ahora, llamemos a nuestra API en uso efecto hook. Así que usa el efecto, y dentro de esto, agregamos la función de devolución de llamada, y aquí solo agregamos matriz vacía como dependencia Ahora en la parte superior, vamos a importar cliente API para llamar a API. Aquí vamos a fullers up, Utils y API client. Bueno. Ahora aquí llamamos API client dot Get method. Aquí pasamos nuestra URL API, que es la categoría de barra diagonal y sabemos que esta expresión devuelve una promesa Manejamos promesa con entonces método. Aquí obtenemos la respuesta, función de flecha y establecemos categorías para los datos de puntos de respuesta. Ahora para manejar errores, agregamos método de caché. Aquí obtenemos error, función de error, y configuramos error en mensaje de punto de error. Guarda las bisagras y echa un vistazo. Abra las herramientas del desarrollador y abra la pestaña de componentes. Busca aquí productos barra lateral y mira aquí obtenemos nuestras categorías. Ahora vamos a mostrarlos en nuestra página. Así que volvamos al código VS. Y aquí agregamos categorías punto MAP. Dentro de estos, obtenemos la función de error de categoría única, y simplemente cortamos este enlace con componente icono y lo devolvemos aquí. Y antes de que nos olvidemos, agreguemos Key equals al ID de subrayado de categoría Ahora cambiamos nuestro título a nombre de punto de categoría. Y envolvemos nuestro enlace con corchetes Cali y cambiamos esto a Batis y en el lugar de esta electrónica, solo agregamos dólar Cali Brackets, categoría nombre punto Ahora en el lugar de esta imagen E, pasamos nuestra URL de imagen. Entonces en impuestos, STDP, Columna doble cuatro, barra, Host local, Columna 5,000, categoría, barra diagonal y aquí agregamos nuestra Así categoría punto imagen. Guarda los cambios y echa un vistazo. Ver, aquí obtenemos nuestras categorías. Ahora vamos a mostrar el error. Antes de nuestra lista de categorías, agregamos condición. Si el error está disponible, entonces imprima el error en etiqueta de énfasis y el nombre de la clase al error del formulario, y simplemente agregamos aquí el error. Ahora aquí, hagamos Typo, guardemos los cambios, y echemos un vistazo, refresquemos la página y veamos aquí obtenemos nuestro error Elimine este error tipográfico y vea que estamos obteniendo nuestras categorías. 134. Crea un gancho personalizado para la búsqueda: Ahora, como podemos ver, buscar productos y buscar categorías son casi lo mismo Solo la diferencia es, esto es un PIURL. Así podemos crear nuestro propio gancho personalizado, que podemos usar para casi todos los detalles de búsqueda Algunos desarrolladores piensan que los ganchos personalizados son un concepto aterrador, pero es realmente simple. Así que los ganchos personalizados son básicamente una función reutilizable. En términos simples, los ganchos personalizados son nuestros propios ganchos que creamos para nuestro propio uso, y podemos usarlos varias veces en nuestro proyecto. Déjame mostrar así que aquí en la carpeta fuente, creamos una carpeta más llamada Hooks. Ahora, en esta carpeta, creamos un nuevo archivo llamado sedata dot js Ahora podrías pensar, por qué uso aquí extensión dot js en lugar de dot JSX Entonces la razón por la que uso la extensión hear dot js porque en este gancho personalizado, no vamos a usar ningún JSX Escribiremos nuestra lógica en JavaScript sencillo. Vamos a establecer el código estándar y eliminar esta declaración de devolución No queremos devolver JSX aquí. Ahora desde nuestro producto lado a componente, cortamos las variables de fecha y usamos el gancho de efecto de aquí y lo pegamos en nuestro componente de gancho personalizado. Ahora en la parte superior, importamos el efecto de uso y lo usamos gancho. Y también cliente API de entrada desde el cliente API de Utils. Ahora, como estamos usando este gancho personalizado para obtener datos de API, es mejor cambiar el nombre de este nombre de variable de datos a datos. Entonces mira como estas categorías y Prensa F dos, aquí mismo, datos. Y también renombrar estas categorías establecidas para establecer datos. Y aquí pasamos null como valor predeterminado porque no usamos estos datos para almacenar solo array. También podemos almacenar objetos en estos datos. Ahora solo tenemos que cambiar esta URL API. Entonces reemplazamos esta URL con la variable URL, y también obtenemos esta variable URL como parámetro. Bueno. Ahora desde esta función de gancho personalizada, simplemente devolvemos datos y variables de error. Guarde este archivo y en el componente de barra lateral del producto, aquí simplemente llamamos a nuestro gancho personalizado, usamos datos y pasamos nuestro punto final, que es la categoría de barra diagonal Ahora, este gancho devuelve objeto con datos y error. Entonces podemos desestructurar ese objeto y obtener aquí datos y errores Y también, podemos renombrar estos datos como categorías. Y aquí antes de nuestra función de mapa, agregamos una condición si las categorías no son nulas, solo entonces ejecutamos esta función de mapa porque el valor predeterminado de estos datos es null, y no queremos ejecutar el método map para null. Nos puede dar error. Ahora, eliminemos estas importaciones no deseadas, seleccione la importación que desea eliminar y presione Control más período o Comando más período y seleccione eliminar todas las importaciones no utilizadas. Ver, todas las importaciones no deseadas se han ido. Además, eliminemos esto. Guarda los genes y echa un vistazo. Ver, obtenemos resultado igual que antes. Ahora usemos nuestro gancho personalizado para obtener datos de productos. Entonces un componente de lista de productos y eliminar estas variables y usar Gancho de Efecto. Y aquí llamamos use data hook y pass and point to slice products. Devolverá datos y error, y podemos cambiar el nombre de estos datos a productos. Y también podemos agregar aquí condición si productos no es nulo, sólo entonces ejecutar este método de mapa. Y por fin, eliminamos todas estas importaciones no deseadas y también eliminamos estos corchetes. Guarde los cambios, y obtenemos error. Abramos Consola y veamos aquí obtenemos productos dot Map no es función porque en nuestro gancho de datos de uso almacenamos nuestros datos de punto de respuesta en esta función de datos de conjunto. Pero a partir de productos API, obtenemos objeto de respuesta con un par de propiedades. Te acuerdas, déjame mostrarte. Así que simplemente consulta dot log estos productos aquí. Guarda los cambios y echa un vistazo. Ver, aquí obtenemos este objeto de datos. Y en ese objeto, tenemos array de productos. Entonces podemos usar aquí los productos de punto de datos, o podemos reestructurar este objeto de datos y obtener aquí productos Creo que la reestructuración es un poco confusa para nosotros. Eliminemos esto ahora en la parte superior, cambiamos estos productos a productos punto de datos y también aquí productos de punto de datos. Y en la parte superior, simplemente consolamos datos de registro de puntos a estos datos. Guarda los cambios y echa un vistazo. Actualmente, estamos obteniendo nuestros productos. Ahora refresquemos la página y veamos que estamos obteniendo error. W herramientas de desarrollador y en la consola, estamos recibiendo el error, no se puede leer propiedad de null. Veamos qué está pasando aquí. En primer lugar, en nuestro gancho de datos de uso, pasamos null como valor predeterminado. Ahora en el momento en que nuestros datos son nulos, aquí en esta condición, estamos tratando de acceder a los productos de punto de datos, y esa es la razón por la que estamos recibiendo este error. Y después de eso, recuperando datos de back end, estamos obteniendo estos datos en nuestra consola Entonces para eso, podemos poner encadenamiento opcional en esta condición Entonces, si los productos de punto de signo de interrogación de datos están disponibles, solo entonces ejecute este bucle. Los cambios y echar un vistazo. Ver, ahora nuestro código funciona bien. Entonces puedes ver cómo podemos resolver el error simplemente rompiéndolo en pequeña parte. En primer lugar, tenemos que saber por qué estamos recibiendo este error, y luego necesitamos encontrar la mejor solución para eso. No entres en pánico al ver errores. Siempre se producirán errores. Está en ti, cómo lo manejas. 135. Agregar un esqueleto de carga: Ahora actualmente nuestra página de producto funciona bien. Tenemos buena conexión a Internet, y además estamos obteniendo datos del servidor local. Por lo que estamos obteniendo datos muy rápidamente. Pero imagina si la conexión del usuario es lenta o nuestro servidor tarda mucho tiempo, entonces esta página de producto no se ve bien. Déjame mostrarte. Abre Consola y estamos llegando aquí avisando. Veamos aquí estamos consiguiendo que falta llave. Así que en el lado del producto pero componente en este enlace con el componente icono en la parte superior, agregamos atributo clave y pasamos aquí categoría punto subrayado ID Guarde esto y vea aquí la advertencia se ha ido. Ahora abre pestaña Red, y aquí seleccionamos pasar tres G. Refrescar la página. Y aquí podemos ver no quedar bien sin mientras estamos recuperando, podemos mostrar esqueleto de carga Se ve como. Se puede ver casi todos los sitios web modernos tiene estos esqueletos de carga Entonces, primero vamos a crear este esqueleto de carga. Así que en nuestra carpeta de productos, creamos un nuevo componente llamado product card skeleton dot JSX Vamos a establecer código de actualización. Ahora para crear esqueleto, podemos usar CSS o podemos usar Biblioteca. La elección es suya. ¿Qué quieres usar? Me gusta usar la biblioteca porque es fácil de usar. Si quieres crear esqueleto desde cero, entonces puedes ver estos tutoriales. Voy a soltar Enlace en la carpeta Recursos. Y en la nueva terminal, derecha NPM cargando esqueleto y golpeó Enter Bueno. Ahora en la parte superior, importamos esqueleto de la biblioteca de esqueletos de carga de reacción. Y después de eso, este expediente. Por lo que agregará mosaicos CSS para este componente esqueleto. Así Importar reac cargando esqueleto, dist esqueleto punto CSS Ahora, a partir de este componente, simplemente devolvemos este componente esqueleto, y veamos qué obtenemos. Guarde esto. Y en nuestra lista de productos componente en esta lista de productos muere, agregamos nuestro nuevo esqueleto de tarjeta de producto componente. Guarda los cambios y echa un vistazo. Mira, aquí tenemos poca área de esqueleto de carga, pero no la podemos ver. Entonces, para hacerlo grande, tenemos que agregar estilos para ese componente esqueleto. Así que volviendo a nuestro componente esqueleto, podemos agregar aquí estilos, y también podemos agregar clase para agregar nombre de la clase a la tarjeta de subrayado del producto Y para este esqueleto, tenemos que agregar ancho externamente porque por defecto es esqueleto, agregar ancho 200% Déjame mostrarte. Guarda esto y mira aquí obtenemos todas las demás propiedades, pero no ancho. Puedes verificarlo inspeccionándolo. Así que volvamos a nuestro componente y añadimos aquí con 275 píxeles. Guarda los cambios y echa un vistazo. Ver, aquí tenemos este esqueleto, igual que la tarjeta de producto. Ahora, agreguemos el esqueleto de carga múltiple. En el componente de lista de productos, podemos duplicar este esqueleto varias veces, pero esa es una mala práctica. Entonces en la parte superior, quitamos este registro, y aquí creamos una matriz llamada esqueletos y pasamos aquí uno, dos, tres, cuatro, cinco, seis, siete y ocho Ahora en nuestro JSX, agregamos esqueletos dot Map. Aquí obtenemos cada número y simplemente devolvemos este esqueleto de tarjeta de producto. Y pasa aquí, la clave es igual al número. Guarda los cambios y echa un vistazo. Ver, aquí sacamos ocho tarjeta de carga. Ahora vendamos lógica de carga. Así que en nuestro gancho de datos de uso, creamos una nueva llamada de variable de estado se está cargando y set está cargando. Y como valor por defecto, lo establecemos en false. Ahora, aquí antes de llamar a nuestra API, simplemente configuramos E loading en true. Y después de que obtengamos nuestros datos aquí en entonces método, agregamos bloque Cd, y aquí configuramos está cargando a false. Además, establecemos Es loading en false si obtenemos error. Así que agrega aquí el bloque de código y establece E cargando a false. Bueno. Ahora podemos simplemente devolver Es cargando desde aquí para que podamos acceder a él en nuestros componentes. Guarde los cambios, y en componente de lista de productos en la parte superior, desestructuramos aquí está cargando propiedad Y aquí simplemente pasamos condición si es carga es verdadera, sólo entonces mostramos estos esqueletos Guarda los cambios y echa un vistazo, actualiza la página y ve lo bonito que se ve con esta carga de esqueleto. Así es como pocas características agregan más impacto en la experiencia del usuario. 136. Busca productos por categoría: Ahora actualmente tenemos nuestros datos de productos y también categorías. Ahora cuando hacemos clic en cualquier categoría, queremos buscar productos de acuerdo a esa categoría Creo que cometimos error en este enlace. Así que volvamos al código VS y en el componente de la barra lateral del producto aquí en este enlace, tenemos que agregar productos de barra diagonal Si agregamos solo productos, entonces agregará este enlace en la URL actual como esta. Así que no olvides agregar esta barra hacia adelante. Guarde esto y vuelva a nuestra página, haga clic en la categoría. Ver que es agregar cadena de consulta. Ahora queremos buscar productos por esta categoría. Así que volvamos al componente de lista de productos, y en la parte superior aquí en nuestra solicitud de API, tenemos que pasar solo categoría como parámetro de consulta. Ahora podría preguntarse cómo podemos pasar el parámetro de consulta. Entonces hay dos formas de hacerlo. Simplemente podemos pasar nuestra categoría en nuestro punto final así. O podemos pasar Configurar objeto en este gancho de datos de uso. La elección es completamente tuya. Personalmente me gusta pasar objeto configure porque por ahora, solo tenemos que pasar parámetro de consulta. Pero si en el futuro, queremos pasar algo más, entonces definitivamente, necesitamos usar configure object, y en ese momento, nuestro código se estropeará Entonces es mejor usar configure object. Entonces en este uso data hook, pasamos objeto en el segundo argumento, y dentro de este, pasamos params, que es el objeto, y aquí podemos pasar todos nuestros parámetros de consulta Entonces categoría dos por ahora, pasemos portátiles. Ahora tenemos que añadir este objeto en nuestro gancho de datos de uso. Guarda este archivo y ábrenos datos dot js archivo. Y aquí obtenemos Configure object, y lo llamamos una configuración personalizada. Aquí también, cambiamos este nombre de parámetro URL a endpoint. Creo que eso podría ser más específico. Ahora aquí cambiamos esta URL a endpoint y simplemente pasamos nuestro objeto de configuración personalizado aquí. Tan simple como eso. Di los cambios y echa un vistazo. Ver, aquí solo obtenemos detalles de laptop. Ahora, en nuestro componente de lista de productos, si pasamos aquí smartphones, entonces solo obtenemos datos de smartphones. Así que pasamos con éxito cadena de consulta de categoría en nuestra llamada API. Ahora en el lugar de este valor codificado duro, tenemos que pasar categoría de URL. ¿Recuerdas cómo estamos obteniendo cadena de consulta? ¿Verdad? Utilizamos parámetros de búsqueda. Los hemos visto en sección de ruteo. Así que aquí agregamos usar parámetros de búsqueda, y esto devolverá todos los parámetros de consulta Así que contras a la matriz, y aquí obtenemos la búsqueda y el conjunto de búsqueda. Vamos a obtener la cadena de consulta de categoría de esta búsqueda. Entonces Const categoría es igual a buscar punto gt. Y aquí pasamos nuestro nombre de cadena de consulta , que es categoría. Ahora en el lugar de estos smartphones, agregamos variable de categoría. O también podemos eliminar esta categoría. ¿Por qué? Porque nombre y valor ambos son iguales. Guarda los cambios y echa un vistazo. Refresca la página y mira, aquí tenemos nuestras consolas de juegos. Si cambias a audífonos, luego actualiza la página. Ver, aquí conseguimos todos los productos de auriculares. Entonces está funcionando, pero tenemos que refrescarnos cada vez que estamos cambiando de categoría, y eso no es lo bueno. Entonces arreglemos esto. Entonces aquí, tenemos que pasar esta categoría como dependencia en nuestra's así que en este uso data hook, pasamos array de dependencia en tercer parámetro y agregamos aquí categoría porque queremos recordar el efecto de uso cuando la categoría cambiará. Digamos esto y en uso data hook, primero, obtenemos array de dependencias como deps y en el lugar de esta matriz vacía, pasamos deps Ahora bien, si nos adherimos solo deps, entonces en toda la función de datos de usuario, tenemos que pasar array de dependencias, que no queremos, ¿verdad Entonces aquí, simplemente ponemos una condición. Si deps está disponible, solo entonces agregamos deps, lo contrario, agregamos array vacío, simple como eso Guarda los cambios y echa un vistazo. Ver, ahora no necesitamos actualizar nuestra página. Podemos navegar de categoría a categoría. 137. Paginación: Ahora actualmente, solo conseguimos ocho productos, pero en la base de datos, tenemos 24 detalles del producto. ¿Por qué devuelvo solo ocho datos del servidor? Es porque esta es una técnica mediante cual podemos reducir la carga de datos en API. Déjame explicarte por qué. Actualmente, nuestra aplicación es muy pequeña. 24 datos no es gran cosa. Pero imagínese a medida que nuestra aplicación crezca, podríamos tener 1,000 o 10,000 productos como Amazon. Entonces en ese momento, si obtenemos todos los detalles del producto en una sola llamada API, entonces tomará más tiempo, y eso no le dará una mejor experiencia al usuario. Entonces, en lugar de obtener todos los datos en una sola solicitud, los desarrolladores los dividimos en páginas como si obtuviéramos solo ocho o diez datos en una sola solicitud. Si el usuario necesita más datos, entonces obtenemos los siguientes diez datos Entonces aquí está la página de inicio que vamos a crear. En primera página, sólo tenemos ocho registros. Después de eso, cuando hagamos clic en la segunda página, obtendremos los siguientes ocho datos, tan simples como eso. Hasta ahora, obteniendo otros datos de página, tenemos que pasar solo la cadena de consulta de parámetros de página y establecer ese número de página. Déjame mostrarte. Así que ve a la página de productos. Puedes anotar estos productos. Y ahora en nuestro tema Param, agregamos página para digamos dos Guarda los cambios y echa un vistazo. Puedes ver aquí obtenemos otros ocho datos de productos. Si cambiamos de página a tres, entonces obtenemos otros datos de productos. Ahora en el lugar de configurar esta página con código duro, también podemos obtenerlos en nuestra cadena de consulta. Entonces aquí escribimos Cs página igual a buscar punto get. Y aquí pasamos nuestro nombre de parámetro, que es page. Así que ahora podemos establecer página a esta página. Y para simplificar, podemos eliminar esta página. No olvides pasar página en esta matriz de dependencias. De lo contrario, cuando cambiemos el número de página, entonces use effect no se ejecutará. Guarde esto. Y ahora veamos cómo podemos establecer el número de página en nuestra cadena de consulta. Entonces para eso, aquí hemos establecido la función de búsqueda. Entonces para Demostrar temporal, creamos un botón debajo esta lista de productos llamada página dos. Y en el evento de clic de botón, pasamos la función de flecha, y aquí llamamos a manejar cambio de página. Y pasa aquí nuestro número de página, que es dos. Ahora en esta función, escribiremos nuestra lógica de página y estableceremos el parámetro de página a este número de página. Definamos esta función en la parte superior. Entonces const, maneja el cambio de página. Aquí obtenemos nuestra página como parámetro, función de flecha, y dentro de esta, simplemente establecemos búsqueda a objeto, página a esta página. Veamos que está funcionando o no. Vuelva a la página de productos y haga clic en esta página para botón. Ver, obtenemos los datos de la segunda página, y también en nuestra URL, podemos ver la página dos. Ahora aquí hay un pequeño error, seleccione cualquier categoría y luego haga clic en esta página para botón. Y vea estamos de nuevo en nuestra sencilla página de productos con la página dos. Puedes verificarlo viendo esta URL. Ver, cuando hacemos clic en cualquier categoría, tenemos categoría en nuestra URL, y cuando hacemos clic en el botón Página, nuestra categoría va a desaparecer y solo obtenemos página a dos. Por qué está pasando esto, vamos a comprobarlo. Entonces, en nuestra función de cambio de página de mango, establecemos oleada a esta página solamente. Esto reemplazará todos los demás parámetros de consulta de URL y establecerá la página dos. Entonces para resolver eso, tenemos que agregar todo el valor anterior a esta función de búsqueda establecida. Y luego tenemos que agregar la página dos. Entonces antes de eso, creamos nueva variable const, params actuales, es igual al punto del objeto de entras Y dentro de esto, pasamos array, y dentro de esto, vamos a reestructurar la búsqueda Veamos qué estamos obteniendo en los params actuales. Así que la consola dot registra los parámetros actuales. Guarde los cambios, abra Consola y seleccione la categoría, y luego haga clic en el botón de la página dos. C en Consola, aquí obtenemos esa categoría. Esta expresión está devolviendo objeto de cadena de consulta, que está disponible en esta cadena de búsqueda. Así que simplemente podemos agregar ese objeto usando objectstructuration antes de esta página Guarda los cambios, y aquí podemos ver que cambiamos de categoría y damos click en la página dos, entonces nuestra URL tiene toda la cadena de consulta. Podría preguntarse por qué no estamos obteniendo datos aquí. Es porque en esta categoría, no tenemos la página dos, lo que significa que los productos son menos de ocho en esta categoría. Pero en la URL, podemos ver que nuestra categoría sigue ahí. Entonces hemos hecho nuestra lógica de paginación. Ahora solo necesitamos UI para la paginación, que creamos en la siguiente lección 138. Crea UI de paginación: Ahora, vamos a crear el componente Paginación para agregar la interfaz de usuario de Paginación Entonces en la carpeta común, creamos un nuevo archivo llamado pagination dot css y también creamos un nuevo componente llamado pagination dot La razón por la que agregamos este componente pigeonation en carpeta común porque podemos usarlo en cualquier otro Aquí agregamos código estándar, y en la parte superior, importamos pigination de período Css Bueno. Ahora lo que queremos de este componente. Queremos solo números de página de este componente, y este componente decide cuántas páginas necesitamos mostrar. Por ejemplo, si tenemos 100 productos y queremos mostrar ocho productos por página, entonces necesitamos 100 dividirlos por ocho, que es 12 en ocho, que es 96, y necesitamos una página más para otros cuatro posts. Entonces, en general, necesitamos 13 páginas. Otro ejemplo, si solo tenemos siete productos, entonces no necesitamos mostrar paginación Entonces tenemos que manejar estas lógicas. Y para eso, necesitamos pasar tres variables. Primero, necesitamos aquí total post, post por página, y click function, que podemos ejecutar en click de botón. Entonces aquí creamos una variable para almacenar números de página. Página es igual a matriz vacía. Ahora después de eso, agregamos cuatro bucles para llenar esta matriz con números de página. Aquí, deja que yo sea igual a uno. A continuación, escribimos I ser igual a post total, dividir por post por página y yo más más. Ahora empujamos esto yo en esta matriz, así que escribe páginas dot push y aquí pasamos I. Si nuestro post total son 80 y post por página es diez, entonces obtenemos diez páginas. Pero si tenemos un total de post 25 y post por página es ocho, entonces 25 dividen por ocho, que es 3.125 Solo obtenemos tres páginas y eso no es lo que queremos. Para resolver eso, tenemos un método en JavaScript llamado math dot Cal, que redondeará nuestro número al entero más cercano, lo que significa que si pasamos aquí 2.05, entonces devuelve tres Entonces envolvemos esta ecuación con este método matemático de sello de puntos. Sólo tenemos que devolver este botón de número de página. Aquí, creamos una lista desordenada y le damos una nación de página de nombre de clase Dentro de esta lista, mostramos nuestro botón en los elementos de la lista. Páginas punto Mapa. Aquí obtenemos cada función de flecha de página, y aquí devolvemos elemento de lista, paso clave a página. Dentro de esto, agregamos botón con nombre de clase, paginación, botón de subrayado Y onclick evento a la función de flecha. Y aquí llamamos función onclick, y pasamos aquí nuestro número de página Y dentro de este botón, simplemente mostramos el número de página. Guarde estos y agreguemos este componente en el componente de lista de productos. Así que abra el componente de lista de productos en la parte inferior, eliminamos esta página a botón, y después de esto D simplemente agregue nuestra página inan componente. Recuerden, tenemos que pasar tres apoyos. Primero, post total, que es datos punto total productos. Publicar por página a ocho y al hacer clic para manejar el cambio de página. Tenga en cuenta que aquí sólo estamos pasando referencia. Nosotros lo llamamos en nuestra página botón nación. Guarda los cambios y echa un vistazo. Ver, aquí obtenemos nuestra página Botones Nación. Haga clic en el botón dos, y vea, obtenemos segunda página. Da click en la página tres, y obtenemos la página tres, está funcionando. Ahora aquí tenemos pequeño bicho. Si establecemos nuestra categoría, entonces por solo tres artículos, estamos obteniendo esta página un botón, lo cual está bien, pero no me gusta. En nuestro componente de paginación, pasamos aquí una condición Si la longitud de punto de las páginas es mayor que uno, sólo entonces devolveremos esta lista de paginación Aquí obtenemos error de compilación porque si la longitud del punto de las páginas no es mayor que uno, entonces este componente no devolverá nada. Podemos envolver este código con fragmentos de reacción. Y r se ha ido. Encantadora. Ahora puede preguntar por qué no agregamos condición en nuestro componente de lista de productos. Entonces la razón es que si mañana usamos este componente de paginación en otro componente, entonces también necesitamos pasar condición ahí, y no queremos eso Entonces por eso agrego condición en este componente de paginación Guarda los cambios y echa un vistazo. Verás, se ha ido por menos de ocho productos. Si redireccionamos a productos, entonces podemos ver la paginación Ahora, vamos a establecer estilo para estos botones. Así que en Pagination dot CSS file, primer lugar, agregamos paginación, y en paquetes rizados, agregamos menos estilo a ninguno, mostramos dos lino, justificamos contenido al centro, lino Y margen a 16 píxeles. A continuación, somos estilo para botón de subrayado de paginación de puntos, corchetes cli, y dentro de estos, establecemos el ancho a 40 píxeles de altura a 40 píxeles, margen a cero y diez píxeles tamaño de fuente a 16 píxeles peso de fuente a seis y rojo, borde a un píxel, sólido tiene Ii ei, ei, radio del borde a seis píxeles, fondo a blanco, color a negro Y cursor a puntero. Guarda los cambios y echa un vistazo. Verás, nos sale bonito botón. Ahora aquí no sabemos qué página está seleccionada. Entonces en nuestro componente de paginación, en nuestro nombre de clase de botón, agregamos condición, página actual es igual a esta página Después volvemos a clases, paginación, botón de subrayado, y activo De lo contrario, devolvemos solo paginación, subrayado clase botón. Ahora tenemos que llegar también aquí la página seleccionada actual. Entonces agregamos esta variable de página actual en props. Guarda esto y en nuestro componente de lista de productos, en la parte inferior, pasamos uno más props, página actual a esta página, que obtenemos del uso buscar PAM Guarde los cambios, y vamos a CSS para el botón activo. Así paginación de puntos, botón de subrayado, punto activo Calibracket, fondo a negro y color a blanco Y en este botón de paginación, hacemos la transición a 0.2 segundos está dentro y fuera. Guarda los cambios y echa un vistazo. Aún así, no estamos recibiendo clase activa porque esta página actual es cadena y esta página es número. Aquí, envolvemos esta página actual con el método llamado parse Int. Los cambios y echar un vistazo. Refresca la página y mira aquí obtenemos error. Vamos a abrir Consola. Aquí nos está diciendo no se pueden leer propiedades de null. Entonces, cuando nuestros datos son nulos, no podemos acceder a los datos punto Total products property. Entonces envolvemos nuestro componente de paginación con corchetes Cali y pasamos aquí condición Si los datos están disponibles, entonces solo renderiza el componente de paginación Guarda los cambios y echa un vistazo. Ver, aquí obtenemos nuestro número de paginación. Ahora ya casi terminamos. Tenemos un último error. Entonces aquí, cuando cambiamos nuestro número de página, algo está pasando. Déjame mostrarte. Así que una pestaña de red y poner conexión a rápido tres G. Ahora cambiar el número de página y ver aquí podemos ver nuestro esqueleto de carga, y también podemos ver nuestro antiguo post. Entonces arreglemos esto. Abrir componente de lista de productos, y aquí en el lugar de este extremo, pasamos un operador ternario Entonces signo de interrogación y también quitar este corchete rizado. Y aquí pasamos Colón. Entonces, si la carga e es verdadera, entonces mostramos el esqueleto, lo contrario mostramos los productos. Guarda los cambios y echa un vistazo. Mira lo limpia y bonita que se ve nuestra página. Sé que esta lección es un poco larga, pero puedes ver lo simple y fácil que es agregar paginación en nuestra aplicación Solo tenemos que establecer la página en la cadena de consulta API. Muchos desarrolladores confundidos por concepto de paginación, pero puedes ver lo fácil y simple que es 139. Desplazamiento infinito: Ahora, como hemos visto, la paginación es un concepto muy importante, pero se utiliza principalmente en aplicaciones de bases de datos como el sitio web del blog, el sitio web educación donde la gente está dispuesta a prestar toda la atención Pero si estás creando aplicaciones como aplicaciones de redes sociales o algo como Instagram o YouTube en esas aplicaciones, no podemos agregar paginación Estas aplicaciones, necesitamos agregar una función de desplazamiento infinito como esta Si nos desplazamos hasta la parte inferior, entonces obtenemos los datos de la siguiente página, y también podemos ver nuestros datos anteriores. Entonces, si usamos función de desplazamiento infinito en nuestra aplicación, podemos captar fácilmente la atención del usuario incluso si el usuario no está dispuesto a prestar toda su atención Y es por eso que la gente pasa más tiempo en las redes sociales porque solo tiene que desplazarse. Entonces entendamos la lógica del desplazamiento infinito. La lógica es muy sencilla. Cuando lleguemos al final de nuestra página, entonces aumentaremos nuestro recuento de páginas en uno simple como eso. Así que vamos a implementar esta función de desplazamiento infinito en nuestra aplicación No voy a quitar este código de paginación. Solo comento esta función y también comento componente de paginación, para que puedas usarlo como referencia cuando lo necesites Ahora comencemos con el paso número uno, que es que necesitamos agregar evento de desplazamiento, que nos dará información cuando lleguemos al fondo Así que creamos un gancho de efecto de uso para agregar oyente de eventos. Aquí agregamos la función de devolución de llamada y pasamos array vacío para la dependencia porque queremos declararlo solo una vez Ahora dentro de esto, escribimos window dot add event listener. Ahora pasa el primer parámetro, scroll, y el segundo parámetro es la función que queremos llamar en el evento scroll, handle scroll. Ahora vamos a declarar esta función, manejar scroll en uso efecto gancho. Y dentro de ella, escribimos nuestra lógica. Entonces en JavaScript, tenemos un par de elementos para obtener los datos de Dom en documento punto Elemento Document. Entonces aquí lo desestructuramos y llegamos hasta aquí, desplácese hacia arriba. Después de eso, obtenemos la altura del cliente y, por último, obtenemos la altura de desplazamiento. Ahora, simplemente consolar dot log estas tres variables. Así que el registro de puntos de la consola, desplácese hacia la parte superior hasta Desplazarse hacia arriba. Después de eso, registro de punto de consola, altura del cliente a altura del cliente. Y por fin, registro de punto de consola, altura de desplazamiento a altura de desplazamiento. No te preocupes por estas propiedades. Mira esto y entenderás todos estos. Ver los cambios y echar un vistazo. Actualmente, no tenemos barra de desplazamiento. Así que vamos a abrir las herramientas para desarrolladores, y en Consola, aquí tenemos la barra de desplazamiento para nuestra página. Y cuando nos desplazamos, obtenemos estos valores. Ahora desplázate hasta el fondo, y para ello, queremos poner condición. Aquí, desplazarse hacia arriba es una medida de qué tan abajo se ha desplazado en una página web Básicamente, nos dice la distancia desde la parte superior de la página hasta donde estamos viendo actualmente. Ahora, la altura del cliente es la altura de la ventana de nuestro navegador web. Representa el área visible de la página web que puedes ver sin desplazarte altura de desplazamiento es la altura total de toda la página web, incluidas las partes que actualmente no están visibles en su ventana. Entonces, en términos simples, la parte superior de desplazamiento te dice cuánto te has desplazado hacia abajo el cliente te dice la altura de lo que puedes ver, y la altura de desplazamiento te indica la altura total de toda la página Entonces, cuando lleguemos al final de nuestra página, esta parte superior de desplazamiento más la altura del cliente siempre será igual a la altura de desplazamiento. Así que aquí en nuestra función scroll, agregamos la condición I scroll top más la altura del cliente mayor o igual a la altura de desplazamiento. Aquí, no sé por qué, pero a veces esta condición no va a funcionar. Para resolverlos, solo tenemos que añadir aquí menos uno. Antes de un pick L desde abajo, esta lógica correrá. Puedes cambiar este valor de acuerdo a tus necesidades. Dentro de esta función, por ahora, agreguemos el registro de puntos de consola, llegar al fondo. Y si no estás obteniendo barra de desplazamiento, entonces puedes pasar aquí en el objeto Perms por página a diez Diseñé especialmente esta API para que también podamos obtener lo que queremos. Por defecto, establecí por página en ocho, pero podemos pasar lo que queramos. Guarda los cambios y echa un vistazo y mira aquí obtenemos diez productos. En la parte inferior, podemos llegar al fondo. Entonces está funcionando. Ahora, segundo paso, que es que necesitamos aumentar nuestro recuento de páginas. Así que usemos la misma lógica de nuestra función de cambio de página handle. Así que quita este comentario, y aquí en el lugar de esta página, agregamos PAMs actuales punto pH más uno Ahora llama a esta función en nuestra función de desplazamiento de mango, o podemos llamar directamente a esa función sin cambiar nada, y después de eso, podemos pasar página de puntos de params actual más uno aquí Pero no te preocupes por esto. Guarda los cambios y echa un vistazo, desplázate hasta el fondo, y no obtenemos nada porque aquí estamos obteniendo datos de la página 11. Para solucionar esto, tenemos que agarrar el valor actual de la página de puntos de params, que es string en parse integer Guarda los cambios y echa un vistazo a la página uno y desplázate hasta la parte inferior, y obtenemos los datos de nuestra segunda página, pero nuestros datos anteriores se han ido. Entonces para eso, podemos hacer un pequeño truco, abrir el archivo de datos de uso, y en nuestra llamada a la API, en entonces método, podemos ver que estamos configurando directamente estos datos en la función set data. Entonces en vez de eso, podemos poner aquí condición I punto final es igual a cortar productos, y verificamos si tenemos datos no es nulo, y los datos punto productos están disponibles Ahora bien, si estas condiciones son verdaderas, entonces en set data, obtenemos aquí datos anteriores, función de error, y aquí queremos devolver solo objeto. Entonces entre paréntesis, pasamos objeto. Aquí primero agregamos todo el valor del objeto anterior y reemplazamos nuestros productos para hacer arreglos aquí, primero, obtenemos datos de productos anteriores, que es operador de propagación, productos de punto anteriores. Y después de eso, agregamos operador de propagación, los nuevos productos, que es respuesta dot data dot products. Y se tenemos otros puntos finales, entonces simplemente establecemos datos a estos datos. Si estás un poco confundido, entonces déjame explicarte por qué estamos haciendo esto. Entonces por solo solicitud de productos, y si ya tenemos productos en nuestro estado de datos, entonces estamos obteniendo objeto de cuatro propiedades en las que tenemos array de productos, pero la mayoría de la otra solicitud GAD devuelve directamente la matriz Entonces, si usamos los mismos datos de conjunto para todas las solicitudes, entonces siempre obtenemos nuestros datos en objeto y obtenemos error. Entonces por eso tenemos que poner estas condiciones, guardar los cambios y echar un vistazo. Volver a la página uno. Y desplázate hasta el fondo. Ver, aquí estamos consiguiendo nuevos productos con productos anteriores. Ahora, aquí está pasando una pequeña cosa rara. Cuando llamamos a nuestra API, no vemos nuestros productos anteriores. Entonces para eso, en nuestro componente de lista de productos, en la parte inferior, eliminamos este operador ternario y usamos y aquí los corchetes y aquí los corchetes y también quitamos esta columna y agregamos aquí los corchetes Ahora mueva la matriz de estos productos antes de este esqueleto. Cuando estamos recuperando nuevos datos, el esqueleto se mostrará al final de esta lista Guarda los cambios y echa un vistazo. Y aquí cambiamos nuestra página a página uno. Desplácese hasta la parte inferior y vea que obtenemos esqueleto en la parte inferior. Ahora tenemos otro pequeño tema en esta implementación. En el desplazamiento infinito, no necesitamos mostrar este número de página en la URL Así que para la página en la parte superior, Creamos una nueva variable de estado llamada página y página de conjunto. Y como valor inicial, pasamos aquí uno. Ahora podemos eliminar esta página de aquí. No lo necesitamos. Básicamente, este valor de página reemplazará por nuestra variable de estado de página, por lo que no necesitamos cambiar nada. Simplemente cambiamos aquí esta lógica. Entonces, en el lugar de esta función de cambio de página de mango, agregue set page to here we get previous page, arrow function, previous page plus one. Guarda los cambios y echa un vistazo. Ver, ahora no obtenemos página en nuestra URL. Encantadora. Casi terminamos con en multa en el desplazamiento. Solo necesitamos agregar una función más limpia en este gancho de efecto de uso porque actualmente estamos en la página de lista de productos. Si redireccionamos a otra página, entonces también se ejecutará el evento scroll y eso afectará el rendimiento de nuestra aplicación. Así que en nuestro uso Efecto tomó en la parte inferior, habíamos escrito la función de flecha y simplemente copiar esta expresión y simplemente cambiar esto a ventana punto eliminar Event Listener Guardar los cambios, y esto funciona. Ahora volvamos a revisar nuestra página de productos. Así que actualice la página. Obtenemos productos. Ahora desplázate. Bien, está funcionando. Ahora en la parte superior, selectny categoría, y conseguimos que los productos en la parte inferior En lugar de eso, queremos reemplazar estos todos los productos por nuestras categorías producto. Entonces este es el pequeño Burg. Encontremos esto. Abra el gancho de datos de uso. Y aquí en esta condición, nuestro punto final son los productos y los productos data dot están disponibles. Entonces estamos agregando nuevos datos de puntos de respuesta en la matriz anterior. Pero cuando cambiamos de categoría, esta condición también es cierta, y por eso estamos obteniendo datos en la parte inferior. Tenemos que agregarle una condición más, config custom dot params, dot page no es igual a Sólo entonces ejecutar esta lógica. Guarde los cambios y eche un vistazo a la página de productos y repérela. Desplácese por la página hasta la parte inferior, y estamos obteniendo la siguiente página. Ahora si hacemos clic en alguna de esta categoría, entonces no obtendremos esos productos porque actualmente estamos en la página dos, y en consola de juegos, solo tenemos tres productos. Entonces, para la página dos, no tenemos ningún producto. Así que vamos a arreglarlos rápidamente. Así que yo componente de lista de productos en la parte superior, después de nuestro gancho de datos de uso, aquí agregamos un efecto de uso y pasamos aquí, función de devolución de llamada, y en la matriz de dependencias, simplemente pasamos categoría Y dentro de esto, simplemente configuramos la página en una. Entonces, cuando la categoría cambia o elimina de la cadena de consulta, entonces nuestra página se establece en una. Y eso es lo que queremos, bien. Guarde las bisagras y eche un vistazo. Volver a la página de productos, y luego se la categoría y ver aquí estamos consiguiendo nuestros productos por categoría. Ahora déjame mostrarte algo. No sé si te das cuenta o no. Cuando llegamos al fondo, a veces se carga dos páginas juntas, o a veces sigue solicitando incluso nuestra base de datos de todos los productos patch prom. Entonces tenemos que arreglar esto. Entonces en nuestra función de desplazamiento de mango, aquí agregamos un par de condiciones. En primer lugar, si esta carga no es verdadera, otros datos disponibles y la última página menos que el punto de datos Total de páginas. Estas páginas totales que estamos obteniendo del servidor. Y debido a que estamos usando aquí nuestros datos y está cargando variable, nuestros datos y está cargando variable, tenemos que editar en nuestro array de dependencias, guardar los cambios, y tomar refrescar la página y desplazarse hasta la parte inferior, y todos nuestros problemas están solucionados, así es como podemos implementar la función de desplazamiento infinito para hacer que función de desplazamiento infinito para hacer nuestra aplicación sea moderna y altamente comprometida Así que puedes ver la paginación y función de desplazamiento infinito no son tan complicadas Solo necesitamos entender la lógica básica de estas dos características. 140. Ejercicio en la página de un solo producto: Ahora es el momento de poco ejercicio. No te preocupes. Esto tomará sólo de cinco a 10 minutos. Entonces, cuando hacemos clic en cualquier producto, redireccionamos a una sola página de productos. Y aquí queremos mostrar los detalles de ese solo producto. Y además, obtenemos ese ID de producto en nuestra URL. Así que tienes que llamar a esta API con endpoints products slash Product ID al final Esto devolverá los datos de este producto aquí. Y mientras estamos obteniendo esos datos, también puedes mostrar aquí cargando texto, o puedes mostrar aquí spinner, que puedes usar directamente de nuestro anterior proyecto de enrutamiento. A continuación, no te preocupes por el botón de dos carritos. Simplemente tenemos que manejar este aumento de cantidad y disminución de número. La sugerencia es que hay que crear una nueva variable de estado para manejar la cantidad, dedicar algún tiempo este ejercicio y luego ver la solución. Sé que puedes completar este ejercicio. 141. Solución de este ejercicio: Entonces espero que resuelvas este ejercicio o intentes resolverlo. Lo más importante es que lo intentes. El estuco en algún lugar es muy común. A veces también me quedé atascado en algún momento, así que no te preocupes por eso. Entonces, en nuestro componente de productos individuales, primero necesitamos obtener el ID actual de nuestra URL. Recuerde, este es un parámetro, no una cadena de consulta. Para obtener los parámetros de URL, necesitamos usar usar Perms SperamsHok de react router dom, y esto devolverá objeto de todos los parámetros, así podremos desestructurarlo y La razón por la que estamos obteniendo este ID aquí es porque en nuestro ruteo, definimos product, column ID. Lo sentimos, bimstakally agregamos este ID uno en este camino. Podemos cambiar esto para llamar a la identificación. Y si pasas aquí, llama al ID del producto, entonces necesitas desestructurar el ID del producto Guarde esto y vuelva a un solo componente del producto. Ahora llamemos a nuestra API usando use data hook para endpoint, pasamos backticks, slash products, slash dollar Ci Ahora, esto devolverá un par de propiedades. Desestructurarlo y aquí obtenemos nuestros datos y le cambiamos el nombre a producto Además, obtenemos error y facilidad de carga. Ahora movamos estos parámetros de uso por debajo de nuestro estado de uso. Bueno. Y vamos a eliminar este producto objeto que creamos pero solo temo. Ahora en nuestro JSX, necesitamos agregar condición Así que vea así todo debido y agregue aquí condición producto no es nulo, sólo entonces mostrar estos debido aquí estamos recibiendo error de compilación porque estamos devolviendo múltiples elementos. Entonces envolvemos esto debido con fragmentos de reacción. Guarda los cambios y echa un vistazo, selecciona cualquier producto y mira aquí estamos obteniendo estos datos, pero no imágenes. Así que vamos a mostrar nuestras imágenes. Ya lo hicimos en tarjeta de productos. Entonces en la fuente, pasamos lazos, y antes de esta imagen, agregamos columna STTP, doble slash forward, host local, Columna 5,000, productos slash, slash Imagen con dólar Ahora, lo mismo que hacemos aquí. Baptis y antes de esto, agregamos columna STDP, barra diagonal doble, host local, columna 5,000, productos de barra, imagen seleccionada con corchetes dólar agregamos columna STDP, barra diagonal doble, host local, columna 5,000, productos de barra, imagen seleccionada con corchetes dólar y cul. Guarda los cambios y echa un vistazo. Verás, estamos obteniendo nuestras imágenes. Perfecto. Ahora manejemos el error y la carga. Entonces por error, nos adherimos condición. Si el error está disponible, entonces mostramos la etiqueta de énfasis y le damos un nombre de clase a partir del error, y simplemente pasamos aquí error. Ahora para cargar, mostramos spinner de carga. Entonces abro nuestro anterior proyecto de ruteo. En la carpeta fuente, tenemos componentes, y en eso tenemos carpeta común. Y aquí, tenemos componente cargador. Selecciona las pilas JSX y CSS y frótalas en nuestra carpeta común Ahora en nuestro componente, aquí agregamos condición. Si esta carga es verdadera, agregamos el componente del cargador. Guarda los cambios y echa un vistazo, actualiza la página y mira aquí estamos consiguiendo nuestro cargador. Ahora última tarea, cuando hacemos clic en este botón más, necesitamos aumentar esta cantidad. Para eso, en la parte superior, creamos una nueva variable de estado llamada quantity y set quantity, y por defecto, pasamos una. Ahora tenemos que pasar esta variable de estado a nuestro componente de entrada de cantidad porque en ese componente, tenemos botón más menos y también cuenta de cantidad. Así que aquí pasamos la cantidad a la cantidad, establecemos la cantidad para establecer la cantidad y las existencias al punto del producto SOC. Guarde las bisagras y manejémoslas. Entonces, en nuestro componente de entrada de cantidad en los accesorios, obtenemos cantidad, cantidad establecida y stock Ahora, aquí en nuestro botón, simplemente agregamos el evento al hacer clic, función de flecha, y aquí establecemos la cantidad en cantidad menos uno. Ahora mismo, pasamos por botón plus. Copia este evento click y pégalo para botón más en el lugar de menos uno, agregamos más uno, y por fin, cambiamos este a este estado de cantidad. Guardar los cambios y tomar a. c, la cantidad va en aumento, pero tenemos que agregar condición para este atributo de desactivación. Así que desactiva es igual a cantidad, menor o igual a uno. Y también en botón más, pasamos el atributo de desactivación es igual a cantidad mayor o igual a stock. Guarda los cambios y echa un vistazo. Ver, cuando tenemos más de una cantidad, entonces el botón menos no está deshabilitado. Y si aumentamos la cantidad a stock, entonces nuestro botón más está deshabilitado. Perfecto. Aquí, nuestra sección 12 está terminada. Espero que aprendas mucho de esto. Si tienes algunas dudas, entonces puedes preguntarme en la sección de preguntas y respuestas En la siguiente sección, verás más importante de cualquier gran proyecto, que es la autenticación y autorización de usuarios. Si estás viendo estos cursos continuamente, entonces te recomiendo encarecidamente que tomes 20 a 30 minutos de descanso de la pantalla y tomes un poco de aire fresco porque cuidar nuestra salud también es importante. Te veré en la siguiente sección. 142. Sección 13 Autenticación y autorización: En esta sección, vamos a aprender autenticación y reaccionar la aplicación, como manejar el registro, el inicio de sesión y el logout. Después de eso, veremos cómo podemos manejar la autorización, como solo iniciar sesión el usuario puede agregar elementos a la tarjeta, tarjeta de visor, etcétera Autenticación y autorización, ambos son temas muy importantes para cualquier aplicación grande. Entonces para la autenticación, vamos a usar JSON Web token, estoy muy entusiasmado con esta sección y espero que tú también lo estés. Entonces, vamos a sumergirnos en esto. 143. Registra una API de usuario nueva: En primer lugar, veamos registrar API para nuestro usuario. Entonces para la degustación API, tenemos dos opciones. Podemos usar Postman, que es la aplicación externa, especialmente diseñada para probar cualquier tipo de API, o podemos usar la extensión de código VS llamada cliente Thunder, que tiene casi las mismas características Entonces por simplicidad, voy a usar la extensión VSCode, pero también puedes usar Postman Depende completamente de ti. Abre el panel de extensión desde aquí y busca cliente Thunder. E instala esta extensión. Bueno. Ahora vamos a abrir esta extensión de cliente de licitación. Y aquí podemos ver este tipo de interfaz. No te preocupes por ello, haz clic en Nueva solicitud. Y en el lado derecho, podemos ver que tenemos cuadro de entrada por URL API y también desplegable para seleccionar métodos STTP Así que seleccione el método post, y la URL API, escriba STTP columna doble reenvío slash host local, Columna 5,000 slash API slash usuario slash registro Ahora, como sabemos para registrarse, un nuevo usuario, necesitamos enviar datos de usuario en el cuerpo de nuestra solicitud API. Entonces para eso, simplemente seleccionamos aquí cuerpo, y en eso, aquí podemos pasar nuestros datos en formato JCN Entonces primero, pasamos nombre a código. A continuación, envíe un correo electrónico al código one@gmail.com. Entonces contraseña a, digamos, uno, dos, tres, 45678 y dirección de entrega esta es mi dirección de entrega Por ahora no estamos enviando nuestra imagen de perfil porque si no seleccionamos nuestra imagen de perfil, entonces por defecto, se configurará en punto por defecto JPG. Ahora simplicalmente consiente. Y vea aquí obtenemos el código de estado al 201, que es para creado con éxito. Y también en la respuesta, obtenemos objeto con token largo. Se trata del token web JSON o JWT, que casi todas las aplicaciones modernas utilizan para autenticar al usuario. No te preocupes por eso. Te explicaré JCN WebTken en detalle en la próxima lección Por ahora somos usuario registrado con éxito. Podemos verificar que por Mongo DBCompass abrir la colección del usuario y ver aquí obtenemos nuestro Ahora veamos cómo podemos enviar imagen con nuestra solicitud API. Entonces para enviar cualquier archivo como imágenes, audio, video, cualquier cosa, tenemos que usar los datos del formulario, que es otra forma de enviar datos con nuestra solicitud API porque en formato JSON, no podemos enviar nuestro archivo. Entonces, en lugar de seleccionar JSON desde aquí, podemos seleccionar Formulario. Ahora aquí podemos ver las entradas de llenado de formularios, y en el lado derecho, podemos habilitar archivos y ver aquí obtenemos la opción de archivos. Ahora en los campos de formulario, agregamos nombre y valor al código plus. Correo electrónico al código two@gmail.com. Entonces contraseña al 12345678 y dirección de entrega esta es nueva dirección esta es nueva Ahora vamos a seleccionar la imagen de perfil. Entonces para llenar nombre, pasamos Perfil P con P mayúscula, y aquí podemos elegir archivo. Entonces aquí, estoy seleccionando el logo de mis canales. Ahora vamos a enviar un dato. Ver, aquí conseguimos nuevos tooken, y eso significa que nuestro usuario está registrado con éxito Abre Mongoibcmpass y actualiza los documentos. Y aquí podemos ver que obtenemos nuevo usuario con el correo electrónico code@gmail.com. Y perfil a algún perfil nombre pico. Está funcionando. Ahora desde aquí en la parte inferior, podemos renombrar nuestro nombre API. Digamos API de registro. Bueno. Ahora en la siguiente lección, conectaremos nuestro formulario de registro con nuestra API de registro. 144. Conectar la página de registro con la API: Ahora aquí en nuestra página de registro en función de envío, actualmente solo estamos en consola dot log estos valores de formulario. Ahora conectemos nuestra página de registro con nuestra API de registro. Entonces, en lugar de escribir toda la lógica aquí, preferiría escribir lógica en diferentes archivos JavaScript. Entonces en nuestra carpeta fuente, creamos una carpeta más llamada servicios. Y dentro de él, creamos un nuevo archivo llamado user services dot js. ¿Me puedes decir por qué uso la extensión dot js? Bien, porque no estamos devolviendo ningún elemento JSX de aquí Ahora, dentro de esto, en primer lugar, ingresamos cliente API desde aquí vamos una carpeta hacia arriba, utils, cliente API Ahora aquí creamos una función llamada registrarse o registrarse, quiera llamar. Y aquí estamos obteniendo el primer objeto de usuario, que son los campos de formulario de nuestro formulario de registro, y después de eso, pasaremos nuestro perfil, que es la imagen de perfil. Ahora, como sabemos, para enviar cualquier archivo, necesitamos enviar nuestros datos en formato de datos de formulario. Entonces para eso, aquí creamos una variable llamada body equals to new form data. Ahora aquí necesitamos simplemente agregar todos los datos en este formulario de cuerpo datos. Entonces body dot up y dentro de esta función en el primer parámetro, vamos a definir nombre de nuestra propiedad, que es name. Y en el segundo parámetro, vamos a definir value, que es user dot name. Ahora vamos a duplicar esta línea cuatro veces más, y aquí cambiamos nuestro nombre a email y también user dot email. A continuación, tenemos contraseña y contraseña de punto de usuario. A continuación, tenemos dirección de entrega y dirección de entrega de punto de usuario. Y por fin, tenemos perfil P con P, y pasamos aquí nuestro perfil. Tenga en cuenta que el nombre de todos los rellenos depende de su API. En tu aplicación, podría ser el nombre de usuario en el lugar de este correo electrónico. Tienes que pasar aquí el nombre de usuario. No te preocupes por eso. desarrollador de Bend te dará estos detalles sobre cómo llamar a API porque por estos nombres en backend, podemos acceder a estos valores Estos nombres son totalmente depende de tu back-end. Ahora al final, llamaremos a nuestra API, así api client dot post, y aquí pasamos nuestra API, que es el registro de sssers Después de eso, simplemente pasaremos nuestros datos corporales. Cuando llamamos a esta función de registro, los datos de este formulario los generarán primero, y los enviaremos a nuestro back-end. Esta expresión devuelve una promesa. Podemos simplemente devolver promesa desde aquí. Ahora para usar esta función de registro en nuestro formulario, tenemos que exportar esta función desde aquí. Guarde este archivo, y en nuestro componente de página de registro aquí en el método on submit, lugar de registro de puntos de consola, simplemente llamamos función de registro y puede ver los trabajos de autoiput Ahora en el primer parámetro, tenemos que pasar nuestros campos de formulario, que son los datos de este formulario. Y después de eso, en el segundo parámetro, pasaremos perfil Pico. Ahora vamos a envolver esta función en bloque de código. Bueno. Ahora bien, esta expresión devuelve una promesa. Por lo que vamos a utilizar aquí Aguarda. Y para usar Aguardo, tenemos que agregar aquí asincrónico, simple como eso Ahora vamos a quitar esta consola de aquí. Eso no queremos. Guarda los cambios y echa un vistazo. Abre herramientas de desarrollador para usuarios de Windows, presiona Ftwel u Option plus Command plus I en Mac Open Network Stab rellena el formulario con nombre, correo electrónico, contraseña, contraseña de confirmación y dirección de entrega. Y haz clic en Enviar. No pasa nada, pero en nuestra pestaña Redes, podemos ver aquí obtenemos una solicitud API, que es registrarse, y en la respuesta, estamos obteniendo token. Ahora SELAGPFile Image, y cambiaremos este correo electrónico a De lo contrario, obtenemos error. Además, cambiamos este nombre a código cuatro y en dirección, cambiamos la cuarta dirección de entrega. Haga clic en enviar y vea aquí obtenemos nuevamente token en respuesta. Con imagen o sin imagen, ambos escenarios están funcionando. puede ver lo sencillo que es enviar imagen al servidor en react. Simplemente tenemos que hacer objeto de datos de formulario y anexar nuestros datos en él. Ahora, si volvemos a hacer clic en enviar, entonces estamos recibiendo mensaje de error en respuesta. En la siguiente lección, veremos cómo podemos manejar los errores que devuelven por API de registro. 145. Manejo de errores para el registro: Ahora, para manejar el error, podemos usar try and catch block. Entonces aquí, solo escribimos TryCatch y seleccionamos esta sugerencia y vemos, obtenemos try and catch Block Ahora, coloquemos la función sino en Tri block, y en cache Block, aquí obtenemos error object. Entonces aquí solo estamos mostrando error, que regresamos de nuestro back-end. Y para eso, tenemos que poner aquí condición si tenemos error dot response y error dot response dot status es igual a 400, lo que significa que nosotros como cliente, hicimos algo mal. Así que aquí simplemente Consol punto log dot response object. Además, la razón por la que uso tricach y acad es solo para mostrarte demo También puedes usar dot Dan y método de caché, que vimos al llamar a una sección API. Guarde los cambios y eche un vistazo, complete el formulario, y para la dirección de correo electrónico, pasamos el correo electrónico antiguo y enviaremos el formulario. Y en la consola, podemos ver el objeto de respuesta. Y dentro de esto, obtenemos estado a 400, y en datos, tenemos mensaje a correo electrónico ya está registrado. Ahora vamos a mostrar este error en nuestro formulario. Entonces para mostrar este error, primero tenemos que almacenarlo en variable de estado. Entonces en la parte superior, creamos variable de Estado llamada error de formulario, y establecemos el error de forma. Como valor predeterminado, establecemos cadena vacía. Bueno. Ahora aquí establecemos error de formulario a error dot response dot data dot Message. Este objeto de respuesta depende completamente de su backend. En tu caso, tienes error de punto de datos, por lo que tienes que establecer ese error de informar. Ahora en la parte inferior, antes de nuestro botón de enviar, agregamos aquí condición. Si el error de formulario está disponible, entonces devolvemos la etiqueta de énfasis con el error de formulario de nombre de clase y agregamos aquí error de formulario. Di los cambios y echa un vistazo, rellena el formulario y envíalo y mira aquí obtenemos nuestro mensaje de error. Actualmente, cuando estamos enviando el formulario, solo estamos llamando API de registro. Pero en el mundo real, tenemos que iniciar sesión usuario. Por ahora, no te preocupes por eso. Eso lo haremos en el futuro. 146. Inicia sesión en una API de usuario: Ahora, veamos API de inicio de sesión. Por lo que en nuestra extensión de cliente de licitación, agregamos nueva solicitud de API. Para iniciar sesión también, pasamos aquí URL, STDP, Colm double forward slash Local host, Column 5,000 slash API slash user slash Login, y Ahora para esta API, vamos a enviar datos en formato JSON porque no estamos enviando aquí ninguna imagen o archivo. De lo contrario, necesitamos enviar los datos del formulario. Ahora en el cuerpo, se como JSON, y aquí pasamos dos propiedades. El primero es el correo electrónico, que es el código one@gmail.com. Y luego pasaremos nuestra contraseña al 12345678 y enviaremos Ver, aquí estamos obteniendo token web JCN en nuestro objeto de respuesta, y por este token, obtendremos el usuario de inicio de sesión Por ahora, no te preocupes por eso. Primero, conectaremos nuestro formulario de inicio de sesión con esta API de inicio de sesión. Entonces aquí hay un poco de ejercicio para ti. Quiero que conectes nuestro formulario de inicio de sesión con esta API de inicio de sesión y también intentes manejar errores. Y si es error del servidor, mostrarlo antes del botón de inicio de sesión. Lo mismo que hicimos para el formulario de registro. Esta voluntad apenas toma de dos a 5 minutos, pruébalo y luego fue la solución. 147. Conectar la página de inicio de sesión con la API: Entonces espero que resuelvas este ejercicio. Ahora veamos la solución. Entonces, a medida que creamos nuestra función de registro en el archivo de Servicios de usuario, agregaremos una nueva función para iniciar sesión. Entonces función, inicio de sesión, y aquí obtenemos los datos del usuario, que enviamos desde el formulario de inicio de sesión. Y aquí, simplemente devolvemos este api client dot post. Aquí pasamos nuestro camino barra de usuario barra diagonal Login. Y en segundo parámetro, simplemente pasamos este objeto de usuario. Ahora para llamar a esta función en nuestro formulario de inicio de sesión, tenemos que exportar esta función. Guarde este archivo y abra el componente de página de inicio de sesión, y en la función de envío en el lugar de esta consola dot log, pasamos la función de inicio de sesión de los servicios de usuario y simplemente pasamos aquí los datos de nuestro formulario. Ahora esta expresión devuelve una promesa, así que esperamos para eso y para usar esperar, necesitamos agregar aquí asincrónico Guarda los cambios y echa un vistazo, abre la página de inicio de sesión e ingresa nuestro correo electrónico y contraseña ocho Ingresa y no pasa nada. Pero en Network Sab podemos ver la llamada API, que devuelven el token JWT en la respuesta Entonces nuestra media tarea está hecha. Ahora solo tenemos que manejar el error de forma. Así que volvamos al código VS, y aquí agregamos try and catch block para manejar el error. Mueve esta línea en try block y también en el método catch, que en este error al objeto error. Ahora dentro de este bloque catch, agregamos la misma condición que agregamos para el formulario de registro. Entonces en el formulario de registro copia esta condición y simplemente pegarlo en nuestro formulario de inicio de sesión. Para usar set form error, tenemos que crear esa variable de estado. En la parte superior, creamos la variable de estado llamada form error, set form error, y como valor predeterminado, pasamos aquí cadena vacía. Ahora por fin, simplemente vimos este error en nuestro formulario. Antes de nuestro botón de envío, agregamos condición. El error de formulario está disponible, luego coser la etiqueta de énfasis con el nombre de la clase, error de forma, y simplemente pasar aquí error de formulario. Guarda los cambios y echa un vistazo, rellena el formulario con datos incorrectos y envía el formulario. Mira aquí estamos recibiendo este error. 148. Qué es JWT y cómo funciona: Ahora, antes de profundizar en la autenticación de usuarios, lo que hacemos usando JCN Web token o JWT Primero entendamos qué es JWT. Entonces JWT significa JCN Web token, que se utiliza para transferir información de forma segura entre dos partes como Bend y front end Entendamos esto con el ejemplo. Entonces aquí hay una Harley. Inicia sesión con su información de cuenta, correo electrónico y contraseña. Nuestro servidor primero verifica la información y si es verdadera, luego el servidor devuelve su ID de usuario como respuesta y la almacena en sesión o Cookie. Ahora, siempre que esté en solicitud de alguna información segura, digamos toda su información bancaria. Servidor primero pide el ID de usuario y si tiene ID de usuario, luego y luego el servidor envía la información segura. Pero aquí hay un gran problema. Esta sesión o cookie en la que almacenamos nuestro ID de usuario, se puede modificar fácilmente en el navegador. Digamos que cambio este ID de usuario por otro ID de usuario. Después obtenemos la información sobre los datos del usuario. Por lo que este enfoque no está asegurado. Ahora para resolver este problema, presentamos JSON Web Token. Así que ahora Halley vuelve a iniciar sesión con su correo electrónico y contraseña. Ahora nuestro servidor primero verifica la información, y si es verdadera, entonces el servidor devuelve el token único cifrado largo como respuesta y lo almacena en el almacenamiento local. Ahora bien, lo mejor de este token es que está hecho con los datos del usuario y una clave secreta, que definimos en el servidor. Así que cada vez que Harley envía solicitud de información segura, entonces el servidor primero pide el token JWT y verificarlo usando nuestra clave secreta Es verificar, entonces servidor enviará esa información segura. Si cambiamos algo en la información del usuario, entonces nuestro token cambiará. Sé que esto es un poco confuso. Déjame mostrarte prácticamente. En nuestra API de prueba, copiamos este token web JSON. En nuestro navegador, abre una nueva pestaña y busca jwt DoTiO. Esta es la documentación oficial de JWT. Aquí en las bibliotecas, puede ver la implementación de JWT para diferentes bibliotecas diferentes Ahora desplácese hacia abajo hasta la sección Depurador. Aquí podemos decodificar nuestro token. Entonces entendamos qué token contiene. Así que pega nuestro token aquí. Ahora todos los tokens GWT divididos en tres partes. primera parte es sobre cabecera, que está en el color rojo. segunda parte trata sobre la carga útil, que está en el morado, y la última y más importante parte es la firma, que está en el color azul. Ahora bien, este encabezado contiene el algoritmo y el tipo de token, lo cual es muy común. No te concentres en eso. Ahora esta carga útil contiene los datos, qué servidor envía con nuestro token. En este caso, paso los datos de este usuario. Podemos establecer en el back end qué datos queremos enviar en esta carga útil. Entonces podemos mostrar esos datos en nuestro front-end sin llamar a API separada, y tenemos más datos I En los que significa emitido en, y el valor es el momento en que nuestro token generó, y EXP es nuestro tiempo de vencimiento. Ahora la última parte que está en el azul es la firma, que se genera en base a este encabezado, estos datos de carga útil, y clave secreta, que solo está disponible en el servidor. Por lo que esto evitará que los usuarios obtengan su propio token y luego lo modifiquen con ID para fingir ser otra persona. Porque si modificas algo en esta carga útil o encabezado, entonces esta firma se regenerará Por lo que no hay posibilidad de que el usuario haga algo poco ético Entonces por eso JWT es tan popular. Ahora déjame mostrarte lo que es clave secreta. Esta clave secreta es una cadena que definimos en el back end. Entonces en nuestro back end, tenemos este archivo punto ENV, y aquí definimos JWT secret Sé que esta es una contraseña fácil, pero solo la configuré para mostrarte. Entonces por solo esta clave secreta, nuestro token validará. De lo contrario, nos dará error. Entonces, para resumir, cuando los usuarios inician sesión o se registran con éxito, obtenemos el token web JSON que simplemente funciona como tarjeta de seguridad. Solicitud de datos del usuario, que solo es accesible por los usuarios de inicio de sesión, luego el servidor primero revisa la tarjeta de seguridad, que es nuestro token web JSON y validarla con la clave secreta JWT Y si ese token se verificó, sólo entonces el servidor devuelve esos datos a nuestro usuario. Tan simple como eso. 149. Almacenamiento del JWT después de iniciar sesión y registrarse: Ahora, como sabemos, si se trata de un registro o iniciado sesión con correo electrónico y contraseña válidos, obtenemos JSON Web Token en nuestra respuesta. Entonces tenemos que almacenar ese token en el sitio de los clientes. Ahora podrías pensar dónde almacenamos ese token. Recuerda, eso lo hemos hecho en nuestro proyecto de naufragio de tareas. Almacenamos nuestra tarea en el almacenamiento local, que es el poco almacenamiento del navegador. Aquí estamos esperando nuestra API de inicio de sesión, que devolverá el objeto de respuesta. Así que vamos a almacenar eso en la variable llamada respuesta y simplemente consola dot log esta respuesta. Guarda los cambios y echa un vistazo. Rellene el correo electrónico y la contraseña válidos. Y enviar el formulario. Ver, aquí obtenemos objeto de respuesta, y aquí en los datos, obtenemos nuestro token. Ahora, vamos a almacenar esto en nuestro almacén local. Entonces en el lugar de esta respuesta, podemos desestructurar eso y obtener aquí los datos Ahora quita esta consola, y escribimos el artículo de conjunto de puntos de almacenamiento local. Este método toma dos parámetros. Primero, nuestro nombre de variable, que es token y segundo, el valor de la variable, que es token de punto de datos. Guarde los cambios, y nuevamente, inicie sesión con correo electrónico y contraseña válidos. Y veamos que obtenemos token en almacenamiento local o no. Así que abre la pestaña de aplicación desde aquí, y en nuestro puerto, que es Local host 5173 Aquí obtenemos nuestro token. Ahora lo último que tenemos que hacer es redirigir al usuario a la página principal después de iniciar sesión. Entonces aquí llamamos use Navigate Hook desde un Crouterdm y lo almacenamos en Ahora simplemente usamos aquí, Navega, y pasamos aquí página principal. Guarda los cambios y echa un vistazo. Rellena el formulario con datos válidos y envíalo. Ver, redirigir a la página principal. Un formulario de inicio de sesión funciona correctamente. Ahora haremos lo mismo cuando el usuario se registre en nuestro sitio web porque no quiero que el usuario tenga que volver a iniciar sesión con el correo electrónico y la contraseña después de que se acaban de registrar. A partir de aquí, copiamos estas dos líneas y en nuestro componente de página de registro, después de la espera, paginamos esas líneas. Ahora vamos a almacenar esta respuesta de API en constante y desestructurarla y obtener aquí los datos Y al fin, tenemos que definir esta navegación. Entonces después de nuestro estado de uso, llamamos use Navigate Hook y almacenamos eso en constante, llamamos Navigate. Guarda los cambios y echa un vistazo. Vaya a la página de registro, complete el formulario con nombre, ID de correo electrónico, contraseña, contraseña de confirmación y dirección de entrega. Y hacemos clic en consubmit. Ver, volvemos a redirigir a la página principal. Entonces esto también está funcionando. 150. Conseguir usuarios a partir de token: Entonces, en la lección anterior, almacenamos con éxito nuestro token web JSON en almacenamiento local. Ahora, ¿recuerdas cuando decodificamos nuestro token en el sitio web de JWT, obtenemos datos de usuario actuales en la Entonces necesitamos decodificar esos datos de usuario del token y almacenarlos en el estado Pero la pregunta principal es dónde vamos a definir ese estado de usuario, dónde necesitamos ese objeto de usuario. Simplemente necesitamos objeto de usuario en toda nuestra aplicación. En el componente app, definiremos nuestro estado de usuario porque componente app es nuestro componente raíz, y desde aquí, podemos pasar objeto user en todos nuestros componentes como props En la parte superior, lo habíamos usado gancho. Primero, lo importamos, y luego agregamos los fragmentos usados y pasamos aquí user y set user Como valor predeterminado, pasamos nulo. Cuando nuestro componente se renderiza, necesitamos decodificar nuestro token web JSON y almacenar esos datos en este estado de usuario Y para eso, lo que vamos a usar, derecho, usamos el efecto de uso Hook, así que llamaremos efecto de uso. En la primera posición, pasamos la función callback, y en la segunda, pasamos array vacío porque solo necesitamos decodificar nuestro token Ahora en esta función de devolución de llamada, primero, obtendremos token del almacenamiento local Sit local storage dot got m, y aquí pasamos nuestro nombre de variable, que es token. Ahora vamos a almacenar esta invariable, llamada token o JWT, quieras llamarlo Ahora para decodificar este ZSN WebTKEN, tenemos una biblioteca Entonces abre terminal, escribimos NPM install JWT decode y Dios. Vamos a minimizar este terminal, y en la parte superior, importamos la decodificación JWT desde la decodificación JWT Y en nuestro efecto de uso, llamamos a esta función de decodificación JWT y pasamos aquí nuestro Ahora, esto devolverá el objeto de usuario. Almacenarlo en variable usuario JWT porque ya usamos usuario aquí, y simplemente consultamos dot log este usuario JWT Guarda los cambios y echa un vistazo. Refresca la página, y en Consola, mira, aquí obtenemos nuestro objeto de usuario. Simplemente almacenemos eso en nuestra variable de estado de usuario. Así que en el lugar de la consola dot log, agregamos set user. Ahora podemos pasar este objeto de usuario al componente Nabar como un props Pero antes de hacer eso, vamos a revisar una condición. ¿Y si no tenemos token en nuestro almacenamiento local? Entonces, en nuestra pestaña de aplicación de navegador, seleccione este token y retírelo de aquí. Ahora actualiza la página y en Consola, C, obtenemos error, que es un token no válido especificado. Entonces cuando no tenemos token en el almacenamiento local, obtenemos nada en esta variable JWT y luego ese valor nulo pasa al código JWT D, y esto nos está dando error Entonces, para solucionar este problema, adherimos try and catch block y simplemente movemos este código en el bloque Try. Entonces, si tenemos error en este código, simplemente no hacemos nada. Si tu aplicación solo funciona para el usuario de inicio de sesión, entonces en este método de boceto, podemos redirigir al usuario para que inicie sesión o registre la página. Pero para nuestra aplicación, ese no es el caso. Guarda los cambios y echa un vistazo. Refresca la página y mira, aunque no tengamos token, no obtenemos ningún error. Ahora aquí hay una cosa más. Casi todas las veces que el desarrollador Backend establece un tiempo de vencimiento para nuestro token web JSN por razones de seguridad y el tiempo que obtenemos en nuestro valor decodificado En este Bend, establecí el tiempo de caducidad a 1 hora, lo que significa que después de 1 hora o token no es válido y eso también nos dará error. En nuestro efecto de uso, después de almacenar este valor decodificado en el usuario JWT, pasamos aquí una condición si fecha punto ahora Es mayor o igual a JWTuser punto EXP, multiplicar por 1,000 Si esta condición es cierta, entonces nuestro token no es válido. Entonces aquí, simplemente podemos eliminar token de nuestro almacenamiento local. Entonces almacenamiento local, punto eliminar artículo, y pasar aquí Tgon Y después de eso, simplemente recargamos nuestra página. Así que agrega recarga de punto de ubicación. Ahora pasamos, lo que significa que nuestro token es válido. Sólo entonces establecemos usuario a JWT. Tan simple como eso. Ahora podría preguntarse por qué aquí nos multiplicamos por mil. Por lo que esta función de punto de fecha ahora devuelve la hora actual en milisegundos. Entonces, para convertir este tiempo de caducidad en milisegundos, tenemos que multiplicarlo por 1,000 Ver los cambios, y va a funcionar para nosotros. 151. Componente Ocultar mostrar según el usuario: Ahora tenemos objeto de usuario, lo que indica que el usuario está autenticado. Entonces por ese objeto, podemos mostrar u ocultar componentes. Aquí en la barra de Navbar, solo queremos mostrar estos Moders logout y enlaces cat si el usuario está conectado Entonces aquí, en el componente NaBR, pasamos a este usuario como los props Guarda esto y en componente Nabar, obtenemos un usuario props aquí. Ahora en la parte inferior, envolvemos estos tres enlaces con los corchetes, y aquí simplemente agregamos condición. Si el usuario está disponible, sólo entonces mostrar estos enlaces, pero esto nos dará error de compilación. Entonces tenemos que envolver estos enlaces con fragmentos de reacción. Ahora mismo tenemos que ver con estos enlaces de inicio de sesión y registro porque si el usuario ya está conectado, entonces no necesitamos inicio de sesión o página de registro. Así que envuelva estos con corchetes Cy, y aquí agregamos I usuario no está disponible, sólo entonces mostrar estos dos enlaces. Y nuevamente, tenemos que agregar aquí reaccionar fragmentos ahora si queremos mostrar aquí nombre de usuario, también podemos hacerlo usando este objeto de usuario, guardar los cambios y echar un vistazo. Ver, actualmente no tenemos objeto de usuario, y es por eso que obtenemos aquí los enlaces de inicio de sesión y registro. Vamos a comprobar esto. En las herramientas del desarrollador, abra la pestaña de la aplicación y vea aquí no tenemos token. Ahora, abramos la página de inicio de sesión e iniciemos sesión con correo electrónico y contraseña válidos. Y haga clic en enviar y vea aquí obtenemos nuestro token. Pero aún así, obtenemos enlaces de inicio de sesión y registro, incluso tenemos estado de usuario. ¿Por qué sucede esto? Simplemente porque en el componente de aplicación, este efecto de uso solo se ejecutará una vez cuando nuestro componente de aplicación se renderiza. Entonces, cuando iniciamos sesión en nuestro formulario, nuestro componente de aplicación ya está renderizado y ya está almacenado como usuario nulo. Déjame mostrarte algo genial. En el momento en que refresquemos esta página, podemos ver aquí obtenemos nuestros enlaces de inicio de sesión. Para resolver este problema, solo necesitamos actualizar nuestra página al iniciar sesión. Abra el componente de página de inicio de sesión y en el lugar de este navegar, simplemente escribimos ventana punto ubicación igual a en códigos dobles, pasamos nuestra página de inicio. Ahora eliminemos esta variable de navegación y también en la parte superior, eliminemos esta entrada de uso de navegación. Guarda los cambios y echa un vistazo. Retire este token del almacenamiento local, actualice la página y, en la página de inicio de sesión, inicie sesión con correo electrónico y contraseña y envíelo. Ver, nuestra página se actualiza y también nos conectamos enlaces Ahora hagamos lo mismo con la página de registro. Así que abra el componente de la página de registro, y en el lugar de este navegar, escribimos la ubicación del punto de la ventana es igual a la página de inicio. Ahora eliminamos esta variable de navegación, y también en la parte superior, eliminamos el uso Navigate Import, y ya terminamos con esto. Ahora en la siguiente lección, implementaremos la funcionalidad de cierre de sesión. 152. Implementa la funcionalidad de cierre de sesión: Ahora actualmente para iniciar sesión, estamos eliminando manualmente el token de nuestro almacenamiento local. Pero en nuestra aplicación, tenemos nuestro enlace de cierre de sesión, que podemos usar para implementar la funcionalidad de cierre de sesión. Entonces, cuando nuestro componente logout se renderizará, eliminaremos este token del almacenamiento local Entonces para eso, en el componente de enrutamiento en la parte inferior, agregamos una ruta más y establecemos path a slice logout y element Aquí, necesitamos crear un nuevo componente para cerrar sesión. En la carpeta de componentes, tenemos carpeta de autenticación, y en esa carpeta, creamos un componente llamado logout. Ahora agreguemos código estándar. Además, eliminamos esto debido, y devolveremos null porque no queremos renderizar nada. Ahora para ejecutar código en el componente render, tenemos que usar el efecto Hook. Así que aquí agregamos use effect, callback function, y como dependencia, pasamos array vacío Ahora escribamos nuestra lógica dentro de esta función de devolución de llamada. Almacenamiento local punto eliminar m, y aquí pasamos nuestro nombre de variable, que es token. Guarde los cambios. Y en nuestro componente de enrutamiento, aquí agregamos componente logout en el elemento props Guarda los cambios y echa un vistazo. Da click en Logout Link y no conseguimos aquí nada. Pero si revisamos nuestro almacenamiento local, podemos ver que Token se retira de aquí. Ahora tenemos que redirigir al usuario a nuestra página principal. Entonces para eso, lo que usamos, derecho, usamos la ubicación del punto de la ventana. Entonces, en el componente logout, agregamos aquí la ubicación del punto de la ventana es igual a la página principal Guarda los cambios y echa un vistazo. Entra en nuestra aplicación con correo electrónico y contraseña. Y vemos que iniciamos sesión. Ahora, da clic en Cerrar sesión y ver que está funcionando. Así que ahora nuestra aplicación cuenta con inicio de sesión y cierre de sesión ambas características Entonces así es como implementaremos funcionalidad de inicio de sesión y cierre de sesión. Se puede ver lo sencillo que es. Cuando los desarrolladores no entienden JWT sólo entonces encontraron esto complicado 153. Simplifica el código: Ahora en nuestra implementación actual, hay poco problema. Entonces aquí, después de iniciar sesión, estamos trabajando con almacenamiento local y configurando este token en él. Lo mismo que hemos hecho en la página de registro. C. También en el componente app, estamos obteniendo ese token del almacenamiento local, y en el componente de bloqueo, estamos eliminando ese token Mañana, si decidimos cambiar este nombre de token por otra cosa, entonces tenemos que actualizar ese nombre en los múltiples componentes. Entonces es mejor poner toda esta lógica en un solo lugar. Entonces en nuestro archivo de servicios al usuario, en la función de inicio de sesión, solo estamos devolviendo la promesa de nuestra API. En lugar de eso, también podemos guardar nuestro token en esta función. Déjame mostrarte. Entonces en el lugar de retorno, agregamos esperar y para agregar esperar, tenemos que hacer esta función asincrónica Ahora podemos guardar esta respuesta en constante y desestructurar los datos aquí Y por fin, agregamos elemento de conjunto de puntos de almacenamiento local a token y pasamos aquí, token de punto de datos. Así que esta función de inicio de sesión, tomando el cuidado completo de nuestra lógica de inicio de sesión. Guarda esto y en nuestro componente de inicio de sesión, eliminamos esta constante, y además no queremos este artículo de conjunto de puntos de almacenamiento local. Ahora podrías preguntar por qué no movemos esta redirección en nuestra función de inicio de sesión. Entonces, después de iniciar sesión con éxito, donde los usuarios deben redirigir no es el alcance de esa función de inicio de sesión. Depende completamente de esta función de inicio de sesión. Mañana, decidimos redirigir al usuario a una ubicación diferente, entonces no necesitamos cambiar esa función de inicio de sesión. Guarde esto. Ahora vamos a cerrar este componente de la página de inicio de sesión, y hagamos lo mismo con nuestra lógica de registro. Así que cortemos este artículo de conjunto de puntos de almacenamiento local, y también eliminemos esta constante. Guarde los cambios, y en el archivo de servicios de usuario en el lugar de esta devolución, agregamos esperar y almacenarlo en datos constantes y reestructurados Y después de eso, simplemente pegamos esta línea de almacenamiento local, y al final para esperar, hacemos esta función asíncrona Bueno. Ahora simplifiquemos la función Cerrar sesión Sc en este punto de almacenamiento local eliminar la función IM. Y en nuestros servicios de usuario en la parte inferior, creamos una función más llamada Logout, y simplemente pegamos aquí, eliminamos línea de artículo y exportamos esta función desde este archivo Guarde esto y en nuestro componente logout, simplemente llamamos a esta función Cerrar sesión. Guarde este archivo. Ahora tenemos que actualizar la última pieza de código, que está en el componente app. Entonces en nuestro archivo de servicios de usuario, creamos otra función llamada Guser y en esta función, primero, obtenemos token del almacenamiento local Entonces Const JWT equivale a punto de almacenamiento local obtener artículo. Y aquí pasamos token. Después de eso, decodificamos nuestro token JWT. En la parte superior, importamos la decodificación JWT desde la decodificación JWT. Después de eso, en nuestra función, llamamos aquí a decodificar JWT y pasar aquí este Ahora esto devuelve nuestro objeto de usuario. Entonces devolvemos ese objeto de aquí. Pero, ¿y si no encontramos este token en el almacenamiento local? Para ello, tenemos try and catch block en nuestro componente app. Pero en otros lugares, si llamamos a esta función Get user, entonces obtendremos error. Entonces agregamos aquí, prueba y captura el bloque. Y mover estas líneas en el tri blog. Y si obtenemos algún error, simplemente volvemos aquí nulo, simple como eso. Ahora, vamos a exportar esta función get user, guardar esto, y en nuestro componente app, eliminar esta primera línea, y en el lugar de esta decodificación JWT, llamamos función Gatuser Y en la parte superior, eliminemos esta entrada JWT. Guarde los cambios y vuelva a nuestro archivo de servicios al usuario. Ahora bien, si queremos cambiar nuestro nombre de variable token, entonces solo tenemos que cambiarlo en este archivo. Ahora incluso podemos almacenar ese nombre de variable en variable. En la parte superior, creamos una variable llamada token name, y la configuramos en códigos dobles token. Ahora en el signo de función, seleccione esta cadena de token y presione Control más D o Comando más D para múltiples cursor y reemplázalo con la variable de nombre de token. Ahora solo tenemos que cambiar este nombre en el único lugar y ver nuestro código se ve más limpio y mantenible Ahora en la siguiente sección, veremos cómo podemos llamar a APIs protegidas, y por eso, casi completaremos este proyecto. S en la siguiente sección. 154. Sección 14: Llamadas a API y rutas protegidas: Bienvenido a la sección 14 del curso ultimate react. En esta sección, vamos a ver cómo podemos llamar APIs protegidas, lo que simplemente significa que algunas de nuestras APIs son solo para usuarios ajustados. Al igual que en nuestra página Mi pedido, necesitamos obtener todos los detalles del pedido del usuario de inicio de sesión actual. Entonces veremos cómo podemos llamar a APIs protegidas, y si el usuario no está conectado, simplemente redireccionaremos al usuario a la página de inicio de sesión. Y también, veremos cómo podemos gestionar rutas protegidas. Estoy muy entusiasmado con esta sección y espero que tú también. Entonces comencemos. 155. Comprender la función de agregar al carrito: Ahora, antes de implementar la función de cabeza a carrito en nuestra aplicación, entendamos esta característica profundamente. Entonces, antes que nada, tenemos botón de cabeza a carrito en componentes. primero está en la ficha del producto y segundo en la página de un solo producto. Entonces, para el carrito, creamos una variable de Estado, que almacenará los productos, que agregamos a nuestra tarjeta con la cantidad. Ejemplo, si tenemos Iphone 14, podemos seleccionar la cantidad de ese producto, y luego haremos clic en head to Cart button, y nuestro Iphone 14 se agregará en nuestra matriz de carrito con esa cantidad. Entonces, para cada producto, tenemos nuevo objeto con dos propiedades, producto, que es el objeto producto, y tenemos cantidad, que es la cantidad seleccionada actual. En esta matriz de carritos, podemos tener múltiples productos, y mostramos el tamaño del carrito en nuestra barra Nav. Esta es la primera parte. La segunda parte es que nuestra tarjeta es una variable local, lo que significa que si refrescamos la página, esta tarjeta volverá a estar vacía. No lo queremos, ¿verdad? Entonces, ¿cuál es la solución aquí? Entonces después de agregar estos datos de la tarjeta en el estado, podemos almacenar los datos de la tarjeta de usuario en el back end. Y al refrescar, obtendremos detalles de esa tarjeta desde el back end. Si obtenemos un error al agregar productos a la tarjeta, entonces restauraremos nuestra tarjeta en el estado anterior. Tan simple como eso. Ya lo hicimos en nuestro llamado a una sección de PI. Primero, veremos cómo podemos almacenar los datos de nuestra tarjeta en el estado local. 156. Añade al carrito localmente: Empecemos con nuestro primer paso, que es agregar productos en el estado local. Entonces, el primer paso para agregar cualquier variable de estado es que necesitamos decidir dónde creamos nuestra variable de estado. Entonces aquí hay un componentry de nuestra aplicación. Tenemos el componente app como componente raíz. En su interior, tenemos dos componentes Nabar y routing. Y dentro de esta ruta, tenemos un solo componente de página de producto, y dentro de este, tenemos nuestro botón cabeza a tarjeta. Necesitamos matriz en dos componentes, barra Na y página de producto único. Ahora, déjame darte un atajo para decidir dónde definimos nuestra variable de estado. Si nuestra variable de estado es necesaria para acceder en dos componentes diferentes, entonces deberíamos definir esa variable de estado en el componente padre más cercano. En palabras simples, solo vea qué componente padre es el más cercano tanto al NaBr como al componente de un solo producto Así que aquí, el componente padre más cercano es nuestro componente de aplicación. Y si definimos carrito en un componente, sólo entonces podremos pasar ese estado de carro como apoyos en estos dos componentes Entonces en nuestro componente app, después de este estado de usuario, agregamos una variable de estado más llamada cart y set cart. Y como valor por defecto, lo que vamos a pasar a la derecha, matriz vacía. Ahora, antes que nada, lo que necesitamos en el componente NBR. Solo necesitamos mostrar el número de productos en nuestra tarjeta actual. Entonces, como los accesorios, pasamos conteo de tarjetas es igual a la longitud del punto del carrito Guarda esto, y en el componente NBA, obtenemos conteo de cartas en los apoyos y en la parte inferior, en el lugar de este cero, simplemente mostramos este conteo de cartas Di esto y ahora no tenemos que preocuparnos por este Navar. Ahora volvamos a un componente aquí en el lugar de pasar la tarjeta y la tarjeta lateral en el componente de un solo producto, podemos crear una función aquí, const cabeza a carrito, función flecha, y dentro de ella, escribimos nuestra lógica para agregar artículo en la matriz de carrito Aquí en el parámetro de función, obtenemos el producto seleccionado, y también obtenemos aquí la cantidad de ese producto, que es el número de productos que necesitamos agregar. Aquí, simplemente configuramos card a array. Primero, agregamos todos los valores de tarjeta anteriores, y después de eso, agregamos nuevo objeto, y aquí establecemos producto a este producto y cantidad a esta cantidad. O podemos simplificar este código quitando estos ambos. Si luego te confunde esta sintaxis, entonces no te preocupes, puedes usar esa sintaxis antigua. Depende totalmente de ti. Ahora, pasemos esta función cabeza a tarjeta a través de accesorios. Entonces, en el componente de enrutamiento, pasamos a tarjeta para cabeza a tarjeta. Guarde este archivo, y en el componente de enrutamiento, llegamos aquí en a la función de tarjeta en los props Y nuevamente, pásalo en el componente de página de producto único. Así que la cabeza al carrito equivale a la cabeza a la cesta. Guarde este archivo, y en nuestro componente de página de producto único, finalmente, llegamos aquí cabeza a carrito en los accesorios Y en la parte inferior, en nuestro botón head to cart, pasamos el evento click, y en eso agregamos la función de flecha, y aquí llamamos a la función head to cart. Y como primer argumento, pasamos nuestro objeto producto, que estamos obteniendo de back-end. Mira, y como segundo argumento, pasamos cantidad. Ver los cambios, y echar un vistazo. En primer lugar, abra las herramientas para desarrolladores, abra cualquier página de producto. Y a partir de aquí, podemos cambiar la cantidad y dar click en el botón Ed to Cart. Y ver en la parte superior, obtenemos contador a uno. Ahora, abramos otra página del producto y hagamos clic en el botón Agregar al carrito. Y aquí podemos ver los recuentos actualizados. Ahora, veamos nuestra matriz de carritos. Entonces desde aquí, abrimos la pestaña Componentes y seleccionamos nuestro componente de aplicación. Aquí podemos ver la matriz de carritos. Ahora cambie la misma cantidad de producto y haga clic en en dos tarjetas. Mira, aquí sacamos tres productos, y ese es el bicho. Entonces tenemos que arreglar esto. Entonces en nuestro componente app, eliminamos esta función set card y escribiremos la lógica desde cero. Entonces, en primer lugar, creamos una nueva variable llamada tarjeta actualizada y agregamos todo el valor anterior mediante el operador spread. Ahora encontramos un índice de producto selectivo en esta matriz. Así actualizado la tarjeta dot find Index. Aquí obtenemos cada artículo y verificamos aquí condición a m punto producto punto subrayado ID es igual al producto, punto subrayado Y almacenamos este índice en la variable call product index. Ahora bien, este método de índice de hallazgo devuelve el valor de índice del producto. Y si nuestro producto seleccionado no está disponible en esta matriz , devolverá menos uno. Entonces aquí, tenemos que pasar condición si este índice de producto es igual a menos uno, lo que significa que el producto no está en nuestro carrito. Entonces llamamos al método de empuje de punto de carrito actualizado. Y aquí empujamos objeto con producto al objeto producto. Cantidad a esta cantidad. De lo contrario, solo actualizaremos la cantidad del producto agregado, Ste actualizado carrito. Aquí pasamos índice de producto cantidad de puntos más iguales a esta cantidad. Si el producto no está disponible, entonces agregamos nuevo objeto con propiedad de producto y cantidad. De lo contrario, agregamos la cantidad con cantidad antigua de su producto. Ahora al final, simplemente configuramos el carrito a nuestra tarjeta actualizada. Guarde los cambios y eche un vistazo, actualice la página, agregue un artículo y haga clic en el anuncio al carrito. Ver que se agrega. Ahora cambie la cantidad, y nuevamente, haga clic en el anuncio al carrito. Consulta aquí, solo actualizaciones de cantidad. 157. API protegida para llamadas: Así que en la lección anterior, almacenamos nuestros productos en el estado de la tarjeta local. Ahora veremos cómo llamamos a esta cabeza a tarjeta API. Ahora podrías preguntarte ¿por qué estoy poniendo tanto peso en llamar a esta API? ¿Esa es la misma API como buscar productos u obtener categorías? Y la respuesta es no, no es la misma API que llamamos anteriormente. Esta es la API a la que solo pueden acceder los usuarios de inicio de sesión. Déjame mostrarte. Entonces Licitar panel de cliente y aquí agregamos nueva solicitud, seleccionamos aquí post solicitud, y escribimos API a columna SDTP, doble slash directo, host local, Columna 5,000 slash API, slash CAT aquí pasamos nuestro ID Por ahora, solo pasa aquí ID aleatorio, y tenemos que pasar número de cantidad en el cuerpo de esta solicitud. Entonces selecciona cuerpo, y aquí en el JSON, solo pasamos cantidad a cinco. Y enviar la solicitud. Aquí podemos ver que obtenemos error, acceso denegado, no se proporcionó ningún token. Ahora déjame mostrarte cómo estamos obteniendo este error del backend En el proyecto Bend, tenemos esta carpeta rutas, y en eso tenemos archivo CAT en el que defino todas las API CAT. Ahora en la línea 27, tenemos que cortar ruta, y aquí agrego otros artículos metálicos. No te preocupes. Si no conoces node jazz, solo te estoy diciendo cómo estamos obteniendo este error. No es necesario codificar una sola línea en el back-end. Entonces este juramento es un middleware que se ejecuta primero antes de que se ejecute nuestro código API principal Ahora veamos qué hay dentro de este oth. Entonces en la carpeta middleware, tenemos oth middleware, y aquí tenemos esta función Primero, esta función obtendrá nuestro token web JSON de nuestro encabezado de solicitud llamado X un token. Y luego si no pasamos nuestro token web JSON en este encabezado, nos dará este error de acceso denegado que código de estado 401. Y si tenemos token y ese token es verificado por clave secreta JWT, entonces ejecutará nuestra lógica media API, como la descripción general de este middleware oth En definitiva, para acceder a APIs protegidas, tenemos que pasar nuestro token web JSN en nuestro encabezado XTKen Sólo entonces podremos acceder a APIs protegidas. Casi todas las aplicaciones de alguna manera pasan token al back-end y la forma más común y segura es por encabezado. En nuestra aplicación, también necesitamos establecer nuestro token web JSN en la X o token Entonces, para pasar token en encabezado en nuestra carpeta Utils, creamos un archivo más llamado set autocon dot js Ahora, en este archivo en la parte superior, importamos cliente API desde este archivo cliente API, que es nuestra variable axios lista para usar Después de eso, definimos la función de token const set. Y en el parámetro, obtenemos nuestra función de flecha token, y dentro de esta función, agregamos una condición. Si el token está disponible, entonces estableceremos los valores predeterminados de punto del cliente API, encabezados de punto común, corchetes, y aquí pasaremos nuestro nombre de encabezado, que es X o token Definimos el mismo nombre de encabezado en el back-end. En tu aplicación, podría ser diferente. Entonces hay que pasar ese nombre aquí igual a, pasamos token. Ahora en L, eliminaremos este encabezado, eliminaremos, copiaremos esta expresión y la pegaremos aquí. Y al final, simplemente exportamos por defecto esta función set o token. Guarda este archivo, y ahora en nuestro componente app fuera de esta función, llamamos a la función set o token. Y aquí necesitamos pasar nuestro token web JSON, que se puede almacenar en el almacenamiento local. Así que podemos escribir aquí punto de almacenamiento local get item, y token. Ahora, como sabemos, estamos definiendo todos nuestros tokens de almacenamiento local en el archivo de servicios al usuario. Entonces en lugar de escribir aquí este almacenamiento local, podemos cortarlo y en el archivo de servicios de usuario en la parte inferior, exportamos una nueva función llamada Get JWT Y dentro de esto, simplemente devolvemos el punto de almacenamiento local get item, y aquí pasamos el nombre del token. Guarda este archivo, y en nuestro componente app, podemos llamar aquí a la función Gt JWT Tan simple como eso. Ahora para nuestra aplicación, no necesitamos enviar nuestro encabezado de token en cada solicitud única. Lo configuramos para todas nuestras llamadas a la API. 158. Llamada a la API de agregar al carrito: Ahora llamemos a nuestra API cabeza a tarjeta. En la carpeta services, creamos un nuevo archivo, call card services en el que definiremos todas las APIs para nuestra tarjeta. Lo mismo que hicimos para los servicios de usuario. Al usar esta forma, podemos mantener fácilmente nuestras llamadas API y no necesitamos escribir la misma llamada API varias veces en nuestra aplicación. Así que en la parte superior, importamos cliente API desde Utils slash API Ahora crea una nueva función llamada Add to Cart API. Y dentro de esta función, llamaremos a nuestra API. Así api cliente punto post. Aquí en los backticks, agregamos CRT slash ahora aquí, necesitamos agregar nuestro ID de producto seleccionado, podamos obtener ese ID de producto como parámetro de esta función, y necesitamos cantidad de Ahora en nuestra API, pasamos Dollar calibracets ID. Y en el segundo parámetro, pasaremos nuestro objeto corporal. Y en eso, establecemos cantidad a cantidad o podemos eliminar esto. Esta expresión devuelve la promesa. Entonces podemos simplemente devolver esta promesa desde aquí. A, exportemos esta función desde aquí, guardemos los cambios, y en nuestro componente app en la función head to cut, después de actualizar nuestro estado local, llamamos a la función head to cut API de los servicios de tarjeta. Y aquí tenemos que pasar dos argumentos. El primero es el ID del producto actual, que es el ID de subrayado del punto del producto, y el segundo es la cantidad de este producto Ahora como sabemos, esta función devolverá promesa. Podemos manejar eso usando entonces y método de caché, o podemos usar try and catch también. Pero personalmente me gusta usar entonces y método de captura. Dot entonces ahora lo que haremos si agregamos con éxito producto al CAT. Aquí podemos simplemente mostrar alerta o podemos mostrar notificación de tostadas. Entonces, por ahora, simplemente const dot log, esta respuesta dot data Y en el método de caché, tenemos que manejar el error. Por ahora, simplemente consola dot log esta respuesta de punto de error. Y además, si el producto no agrega en nuestra tarjeta, entonces restauraremos el estado de nuestra tarjeta al estado anterior. Simplemente configure tarjeta a tarjeta. Guarda los cambios y echa un vistazo. Abra Consola, cambie la cantidad, y Glicon al carrito y vea que obtenemos aquí mensaje, artículo agregado a la tarjeta Ahora vamos a comprobarlo en nuestra base de datos. Así que en el Mongo D se convierten en pase, colección de tarjetas abiertas. Ver, aquí obtenemos un documento, y en eso tenemos nuestro producto. Perfecto. Ahora simplemente mostremos la notificación de brindis para el éxito y el error. Ahora podrías preguntar ¿qué es la notificación de tostadas? Déjame mostrarte en solo un minuto. En primer lugar, abrir terminal, y en la nueva terminal, escribimos NPM, yo, reaccionamos, dessificamos y Usando React to Stify Library, podemos mostrar nuestras notificaciones manera muy fácil y moderna Ahora minimizamos esta terminal, y en la parte superior, vamos a importar contenedor de tostadas y también método de tostadas de react a Stifi Library Y también, tenemos que importar su archivo CSS para agregar estilos. Así importar, reacciona tostify dis react, Tostifyt Ahora necesitamos agregar este componente de contenedor de tostadas en nuestra aplicación, para que podamos agregarlo en cualquier lugar de este tubo. Entonces aquí agregamos componente de contenedor de tostadas. Ahora solo necesitamos agregar nuestro mensaje en esa función de brindis. Entonces en nuestro método entonces, en el lugar de esta consola, agregamos tostadas. Ahora aquí, podemos seleccionar múltiples métodos. Por ejemplo, tenemos éxito que mostrará la notificación en texto verde. Y aquí pasamos nuestro mensaje de producto, agregado con éxito. Ahora déjame mostrarte otros métodos también. Así que duplica esta línea cuatro veces más y cambia este método a error por color rojo, advertencia para advertencia amarilla, info para color azul, y además tenemos default. Para eso, no vamos a pasar nada. Además, en el método catch, agregamos el error de punto tostado y el mensaje a failed to add product. Guarda los ginges y echa un vistazo. Haga clic en al carrito y vea aquí en la esquina superior derecha, obtenemos nuestras notificaciones de brindis. Si somos nuestro cursor en la notificación, se detendrá ahí. Entonces estas son las notificaciones de brindis. Puedes ver con qué facilidad y sencillez podemos agregar notificaciones. Ahora en el lugar de mostrar notificaciones de tostadas en la esquina superior derecha, quiero mostrarlas en la esquina inferior derecha. En el componente contenedor de tostadas, tenemos una sonda llamada posición. Si no obtienes autoizon, entonces presiona Control más espacio o Comando más espacio y mira aquí obtenemos un par de propiedades Aquí seleccionamos abajo a la derecha. Además, podemos personalizar más esta notificación de brindis. Para ello, puede remitir su documentación oficial. Lo explican en lenguaje muy sencillo y fácil. También desde aquí, eliminamos estas notificaciones de tostadas no deseadas. 159. Recupera el carrito de usuario desde el backend: Por lo que actualmente, cuando estamos agregando productos a nuestra tarjeta, se agrega con éxito en nuestra base de datos. Ahora, en nuestra página de tarjetas, solo tenemos que mostrar los detalles de la tarjeta en nuestra tabla. Así que cuando un archivo de servicios de tarjeta, y aquí definimos una nueva función llamada Get card API. Y en esta función, simplemente llamamos api client dot GAT. Y para obtener la tarjeta de usuario, pasamos SCAT. Puede utilizar nuestra documentación API para la referencia. Ahora bien, esta expresión devuelve una promesa. Entonces devolvemos esto, y vamos a exportar esta función. Guarda este archivo, y en nuestro componente app, después de esta función head to card, creamos una nueva función llamada Get card. Y dentro de esta función, simplemente llamamos a nuestra API Get card. Ahora bien, ¿qué escribirá esta función? Bien, llegamos aquí, lo prometo. Dot entonces, aquí obtenemos respuesta y simplemente configuramos cart a los datos del punto de respuesta. En el método catch, agregamos error de punto tostado algo salió mal. Ahora en qué página queremos recuperar la tarjeta API. Se podría decir en la página de la tarjeta, y esa es la respuesta equivocada. Déjame mostrarte lo que sucederá si llamamos a nuestra función Gecard en la página del carrito En el componente de enrutamiento, pasamos Get card props to G cart. Guarda esto y dentro del componente de enrutamiento, antes que nada, obtenemos aquí los apoyos y lo pasamos directamente en el componente de página de la tarjeta Obtener tarjeta a tarjeta G. Guarda esto y en el componente de la página del carrito, obtenemos nuestra función Gcard en los apoyos, y en el efecto de uso, llamaremos a esta Así que use effect y pase la función Callback, y Empty array como la dependencia Y en la función callback, simplemente llamamos a la función Get card Di los cambios y echa un vistazo. Aquí nos sale el error. Entonces veamos esto en Consola. Aquí obtenemos getcardpi punto n no es la función. En nuestro componente app, aquí, olvidé llamar a esta función, guardar los cambios y echar un vistazo. Vea, nuestro error se ha ido, y en nuestra pestaña de componentes, seleccione el componente de la aplicación, y aquí obtenemos la matriz de tarjetas. Ahora, si actualizamos la página, entonces también estamos obteniendo los datos de la tarjeta. Ahora déjame mostrarte el bicho principal. Vaya a la página de productos y actualice la página. Actualmente, tenemos cero artículos en nuestro carrito, pero en el back end, tenemos dos artículos. Si tuviéramos ese mismo artículo, entonces en el carrito estado local, tenemos nuevo producto con nueva cantidad. Pero en la parte de atrás, tenemos otra cantidad. Básicamente, si llamamos a Obtener tarjeta solo en la página del carrito, entonces los datos de nuestra tarjeta de back end y el estado local del carrito tendrán datos diferentes y no queremos eso. Así podemos llamar a esta función Get card en el componente app. Entonces en nuestro componente app, agregamos otro efecto de uso, y aquí en la devolución de llamada, llamamos a nuestra función Get card Pero aquí, tenemos que pasar a condición. Si el usuario está disponible, solo entonces llamaremos a esta función Obtener tarjeta porque esta API solo es accesible por los usuarios de inicio de sesión. Y en el array de dependencias, podemos añadir aquí usuario. Cuando el usuario cambie, se ejecutará esta API de Get card. Guarda los cambios y echa un vistazo, actualiza la página y ve en la tarjeta, estamos obteniendo los datos de nuestra tarjeta. Ahora, una pregunta que podrías hacer por qué no eliminamos la función Getcard del componente de página de la tarjeta Por lo que podemos usarlo como una doble verificación para los datos de nuestra tarjeta. Si quieres eliminar este efecto de uso, también puedes hacerlo. Está totalmente bien. Permítame también quitar esto. Ahora, solo necesitamos mostrar los detalles de nuestra tarjeta en esta tabla. Entonces, para mostrar los detalles de la tarjeta, necesitamos el estado de la tarjeta en este componente. Así que volvamos a nuestro componente de aplicación. En el lugar de estos accesorios para tarjetas de gato, agregamos tarjeta a tarjeta Y en el componente de enrutamiento, también cambiamos este carrito y pasamos aquí carrito a carrito. Y por fin, en nuestra página CAT, aquí obtenemos nuestro array CAT. Ahora para verificar, la consola de punto registramos esta matriz CAT, guardamos los cambios, y en la página CAT, abrimos la consola actualizamos la página y vemos, aquí estamos obteniendo la matriz CAT, que es la matriz de objeto con la propiedad product y quantity. Entonces en nuestro componente carrito en la parte inferior, en el cuerpo Te, agregamos carrito mapa de puntos. Aquí obtenemos un solo elemento, función de flecha, y aquí simplemente devolvemos esta fila de tabla. Ahora aquí, este ítem es un objeto, por lo que podemos desestructurarlo y obtener aquí las propiedades de producto y cantidad Voy un poco más rápido porque estamos trabajando en reaccionar desde muchas veces, y ya sabías estas cosas. Si te explico cada paso, definitivamente te aburrirás. Entonces primero, en la fila de la tabla, agregamos el atributo clave al ID del guión bajo del punto del producto A continuación, reemplazamos este nombre por el título del punto del producto. Después agregamos el precio del punto del producto. A continuación, tenemos entrada de cantidad. Así que aquí pasamos cantidad a esta cantidad y stock al producto punto stock. Por ahora, utilizamos la función set quantity. Y en el total, pasamos cantidad al producto punto Precio. Guarda los cambios y echa un vistazo. Ver, en la tabla, obtenemos nuestros artículos. Hermoso. Ahora calculemos este subtotal. Entonces para eso, en la parte superior, creamos una nueva variable de estado, así que seleccionamos uste y seleccionamos los fragmentos, le damos un nombre, subtotal, y establecemos subtotal y valor predeterminado a cero Ahora para contar el subtotal, usamos use effect, pass here, callback function, y en el array de dependencias, agregamos cart array agregamos cart ¿Me puedes decir por qué usamos aquí el efecto de uso? Derecha. Porque cuando cambiamos los datos de nuestro carrito, entonces también queremos ver el subtotal actualizado Entonces en la función de devolución de llamada, primero definimos el total es igual a cero Entonces usamos carrito punto para bucle H. Y aquí obtenemos cada función de flecha de elemento. Y aquí hacemos total más igual al artículo punto producto, punto precio en cantidad de artículo. Y por fin, simplemente fijamos el subtotal a este total. Ahora en la parte inferior, aquí pasamos el subtotal y en el total final, escribimos el subtotal más la carga de zip, que Guarda los cambios y echa un vistazo. Ver, aquí obtenemos nuestro subtotal y total de acuerdo a los datos de nuestra tarjeta 160. useGancho de contexto: Por lo que actualmente en nuestra aplicación, tenemos el estado del usuario y el estado de la tarjeta en nuestro componente de aplicación. Ahora, como en nuestro componente de tarjeta, necesitamos mostrar estos datos de usuario y perfil en la parte superior. Una solución es, pasaremos nuestro objeto de usuario usando props a través del componente de enrutamiento y luego en el componente de tarjeta Lo hemos hecho tantas veces con este estado de tarjeta, pero eso es realmente una pérdida de tiempo y eso también se llama perforación de puntal, lo que significa que estamos perforando todos los componentes para pasar solo un puntal al componente hijo Otra forma de pasar datos es usar el gancho Context. Así que use el gancho de contacto se utiliza para administrar datos globales en la aplicación de reacción como tema, usuario, detalles de la tarjeta, etcétera En palabras simples, al usar el gancho de contexto, podemos hacer que nuestros datos accedan globalmente por cualquier componente. Entonces, si hacemos que nuestros datos de usuario sean globales, pueden ser accesibles en cualquier componente que queramos sin pasar manualmente por props Veamos cómo crear contextos. Entonces, para crear contexto en reaccionar, necesitamos hacer tres sencillos pasos. Primero, crear el contexto, segundo, proporcionar el contexto, y tercero, consumir los contextos. No te preocupes por ninguno de ellos. Mira esto y al final, verás la magia de los contextos. Entonces comencemos con el paso número uno, creando el contexto. Entonces aquí estamos creando el estado global para nuestro usuario. Entonces en la carpeta fuente, creamos una carpeta más llamada Context. Y en esta carpeta, definiremos todos nuestros contactos. Así que aquí creamos un nuevo archivo llamado user Contacts dot JS. Ahora para crear contexto, primero, importamos crear función de contexto desde la biblioteca react. Esta función se utiliza para crear contexto. Ahora llamamos a esta función de crear contexto, y aquí pasamos null para el valor predeterminado y almacenamos eso en la variable llamada contexto de usuario. Puedes dar lo que quieras, pero es mejor llamar lo mismo que buen nombre. Y al final, exportemos el contexto de usuario predeterminado. Por lo que nuestro primer paso se completa. Ahora hagamos el paso número dos, que es proporcionar el contexto. Entonces donde definimos nuestro estado de usuario, tenemos que introducir los contextos en ese componente. Entonces, en el componente de la aplicación en la parte superior, importamos contextos de usuario desde Context, recortamos contextos de usuario Aquí, necesitamos definir qué componentes deben acceder a este contexto de usuario. Entonces nuevamente, en esa jerarquía, si quieres pasar datos de usuario al componente de tarjeta, y también queremos nuestros datos de usuario en el componente Navbar Entonces aquí, solo necesitamos proporcionar los datos a Navbar y a los componentes de enrutamiento, y esos datos pueden ser accesibles en todos sus componentes hijos Así que envuelva estos dos componentes con el proveedor de puntos de contexto de usuario. Entonces, cualquiera que sea el componente que pases entre este proveedor, éste y sus componentes secundarios pueden acceder a este valor de contexto. Ahora podemos pasar valor mediante el uso atributo value en este proveedor de contexto. Entonces escribe valor igual a, simplemente agregamos aquí este usuario. En este atributo value, también podemos pasar funciones, objetos, cualquier cosa. Ahora veamos cómo acceder a esta variable dentro de nuestro componente de página de carrito. Abra nuestro componente de página de tarjeta en el que queremos usar ese valor. Pero, ¿cómo podemos acceder a ese valor? Entonces en la parte superior, importamos use Context hook de la biblioteca react. Y dentro de este componente funcional, escribimos contextos de uso, y esto excepto un argumento, que es nuestro contexto de usuario. Por lo tanto, necesitamos importar ese contexto de usuario de nuestros contextos, reducir el contexto de usuario Ahora pasa este contexto de usuario dentro este gancho de contexto de uso y almacenamos este valor en variable llamada user object porque ya definimos usuario aquí para nuestra imagen. Ahora vamos a consolarnos Guarda los cambios y echa un vistazo. Aquí en la aplicación, mi token se caducó. Entonces tengo que volver a iniciar sesión, y aquí vamos a la página de la tarjeta. Ver aquí en la consola, obtenemos nuestro objeto de usuario. Entonces, sea cual sea el valor que pases en este proveedor de contexto, podemos acceder a ese valor usando el gancho de uso Context. Si entiendes estos tres pasos, entonces enhorabuena. Entiendes el gancho de contexto de uso. Entonces aquí en el lugar de esta imagen de usuario, agregamos backticks, y dentro de este SDDB cool double para nuestro slash, host local, Columna 5,000 slash perfil, slash y aquí agregamos Entonces dólar, corchetes Cully, objeto de usuario, punto de signo de interrogación, selección de perfil porque si nuestro usuario es nulo, entonces obtenemos error aquí A continuación, en el lugar de este nombre, agregamos nombre al objeto de usuario, interrogación nombre de punto. Y a continuación, en el lugar de este correo electrónico, pasamos aquí correo electrónico al usuario Object, marca dot email. Guarda los cambios y echa un vistazo. Ver, aquí obtenemos nuestros datos de usuario sin pasar por utilería. Ahora aquí no necesitamos esta imagen de usuario, así que elimina esta, y ahora podemos renombrar este objeto de usuario a usuario. Ahora volvamos a nuestro componente de aplicación. Aquí pasamos usuario como los apoyos. Ya no necesitamos hacer eso. Elimine estos accesorios de usuario de aquí y en el componente más nuevo en el lugar de obtener este usuario de los accesorios Aquí, llamamos use Context hook y dentro de él, pasamos nuestro contexto de usuario y almacenamos ese valor en variable de usuario. Guarde estos y vea que funciona igual. 161. Ejercicio de creación de contexto de carrito: Ahora es el momento de hacer poco ejercicio. A medida que definimos nuestro contexto de usuario, también podemos definir el contexto del carrito porque lo estamos usando en la página del componente de tarjeta. Y en ese contexto, pasar valores como cart array y función head to cart. Quiero que definas el contexto del carrito y obtengas esa función de carrito y Ed a carrito en valor y obtengas esos valores en el componente de la página del carrito y también actualices todos los componentes que están usando función cart o head to card de los apoyos Conoce que este es un ejercicio fácil y puedes hacerlo en tan solo dos a 3 minutos. Complete el ejercicio y luego vea la solución. Espero que resuelvas este ejercicio. Ahora veamos rápidamente esta solución. En la carpeta Contexto, creamos un nuevo archivo llamado card context dot gs. El primer paso para definir contextos es que tenemos que usar la función Create Context Agregar aquí crear contexto y ver, con la ayuda de autoiput obtenemos que como el valor por defecto, pasamos aquí null ahora almacenamos esta función en la variable llamada contexto de tarjeta, y al final, simplemente exportamos por defecto este contexto de tarjeta Guarde este archivo y en el componente app donde definimos nuestra tarifa de tarjeta, así que tenemos que agregar nuestro proveedor en ese componente. Así que aquí, después del contexto de usuario, agregamos contexto de tarjeta, seleccionamos la importación automática, proveedor de puntos y envolvemos nuestros componentes con el proveedor de puntos de contexto de tarjeta. Y dentro de este proveedor, tenemos valor props igual a ahora aquí en el lugar de pasar variable única, podemos pasar objeto de variables y métodos Entonces primero, pase la matriz de carritos y el segundo a la función de carrito. Aquí, esto significa tanto de cabeza a carrito para agregar al carrito. Estoy escribiendo directamente código SOT. Guarde esto, y ahora en nuestro componente de página de carrito en el lugar de obtener la matriz de tarjetas de los apoyos, simplemente podemos agregarlo, usar Contexto, y dentro de él , pasamos contexto de tarjeta Y obtenemos esos valores aquí en la variable llamada contexto de tarjeta. O podemos desestructurar ese objeto, y aquí conseguimos carrito y agregamos a la función de tarjeta Ver los cambios y echar un vistazo. Ver, funciona igual que antes. Ahora vamos a reemplazar toda la tarjeta que estamos obteniendo de los apoyos. Así que siempre comienza con la app del componente raíz, y podemos ver en la barra Cerca, estamos pasando el conteo de cartas, que es cart dot Length. Entonces podemos eliminar el componente y en el nebar en el lugar de estos props, llamamos aquí, usamos Contexto y pasamos aquí, contexto de tarjeta, y almacenamos ese valor en variable y reestructuramos ese objeto y obtenemos Ahora en la parte inferior, en el lugar de este conteo de carritos, agregamos la longitud del punto del carrito. Guarda los cambios y echa un vistazo. Ver, también está funcionando. Ahora vamos a revisar otros componentes. Así que volvamos al componente de la aplicación. Aquí podemos ver carro y calor a carro ambos están pasando por apoyos Así que quita estos dos apoyos. Y en el componente de enrutamiento, también eliminamos estos apoyos. Y también elimine esto en función de carrito de un solo componente del producto, y también elimine los apoyos de la tarjeta del componente de la página de la tarjeta Ya actualizamos este componente de página de tarjeta, así que no te preocupes por eso. Solo necesitamos actualizar este componente de página de producto único. Así que abre ese componente y quita los apoyos y nosotros llamamos aquí, usa Context Hook y simplemente pasa aquí, contexto de tarjeta Esto devolverá nuestros valores, así que lo desestructuramos aquí y llegamos a la función de carrito Guarde los cambios, y podrá ver cómo de manera simple y sin hacer perforación de puntal, podemos pasar nuestra variable en el árbol de componentes. 162. Eliminar artículos del carrito: Ahora, vamos a implementar una funcionalidad de eliminación de elemento. Primero, retiraremos el producto de nuestro estado local. Luego llamaremos a API para eliminar el artículo de nuestro back-end también. Entonces primero, déjame cerrar todos estos archivos. Y en el componente app, después de la función at to cart, creamos una nueva función llamada remove from card. Y en el parámetro, obtenemos ID del producto que queremos eliminar. Entonces en esta función, primero, almacenaremos nuestra matriz CAT actual en una variable llamada tarjeta antigua, es igual a array y extenderemos nuestra matriz de carrito. Ahora escribimos filtro de puntos de tarjeta vieja. Aquí obtenemos cada artículo, que es el objeto con propiedad de producto y cantidad. Y aquí pasamos condición, artículo punto producto, punto subrayado ID no es igual a este ID Por lo que esto devolverá nueva matriz con todos los productos cuyo ID no coincide con este ID. Entonces vamos a almacenar eso en una nueva variable llamada nueva tarjeta, y después de eso, simplemente pondremos tarjeta a esta nueva tarjeta. Ahora, verifiquemos este código. Así que aquí en nuestro valor de contexto de tarjeta, pasamos nuestra función remove from card. Ver los cambios, y ahora en nuestro componente de página de carrito, accederemos a esa función. Después de esta matriz de tarjetas, eliminamos esto a la tarjeta de aquí. No lo necesitamos y llegar hasta aquí, retírelo del carrito. Ahora en la parte inferior, tenemos nuestro icono de eliminar. En esta imagen, pasamos el evento click, función de flecha, y aquí llamamos a la función remove from cart. Y simplemente pasa aquí ID de subrayado de punto de producto. Ver los cambios y echar un vistazo, reprimir la página, y vamos a eliminar un elemento de aquí Vea que el artículo se elimina de nuestra matriz de carritos, y también nuestro subtotal y total final se actualiza de acuerdo con nuestra nueva tarjeta Ahora si actualizamos la página, tenemos nuestro producto de vuelta porque estamos obteniendo nuestra tarjeta de la base de datos. Para retirar el producto, también tenemos que retirarlo de nuestro back-end. Abra el archivo de servicios de tarjeta, y en la parte inferior, definimos una nueva función llamada remove from card API. En el parámetro, obtenemos el ID del producto. Ahora dentro de esta función, llamamos API client dot patch method porque solo estamos actualizando parte de nuestros datos. Ahora para el backend API, usamos aquí backticks, cart, slash remove, slash now here we need to add our product id which we want to remove Ahora devolvemos esta expresión y también al final, la disfunción exportadora. Guarda este archivo y en nuestra función remove from card, al final, llamamos a nuestra API remove from card y pasamos aquí nuestro ID de producto. Ahora bien, esta expresión devolverá una promesa. Aquí usamos entonces método. Pero si eliminamos con éxito el producto de nuestra tarjeta, entonces no queremos hacer nada. Eliminamos esto entonces y añadimos el método catch. Si tenemos error, mostraremos en el error de punto tostado y pasaremos aquí algo salió mal. Y después de eso, pondremos carrito a carro viejo. Tan simple como eso. Guarda los cambios y echa un vistazo. Eliminar artículo, artículo eliminado de aquí. También actualice la página y vea que también se elimina del backend Puedes ver mediante el uso de contactos y servicios lo fácil y sencillo que es llamar a un PI. 163. Aumenta y disminuye la cantidad de producto: Ahora vamos a implementar la función de aumento y disminución para CAT. En nuestro componente app, después de esta función eliminada del carrito, definimos una nueva función llamada update cart en el parámetro, obtenemos ID del producto, que queremos actualizar. Dentro de esta función, primero declaramos una variable llamada tarjeta actualizada y almacenamos todos los valores anteriores de nuestra tarjeta. Tenga en cuenta que esta es tarjeta actualizada, no tarjeta de actualización. Después de eso, escribimos tarjeta actualizada, dot find Index. Aquí obtenemos un solo artículo, y aquí pasamos nuestra condición, artículo punto producto punto subrayado ID es igual a este ID Esto devolverá el índice de nuestro producto seleccionado. Almacenar eso en la variable call product index. Ahora aquí hacemos algo como esto, actualizado AT y pasamos su índice de producto cantidad punto más igual a uno. Y luego simplemente configuramos el carrito a CAT actualizado. Ahora aquí hay una cosa. Vamos a utilizar esta función para ambos casos de uso, aumentando y disminuyendo. Pero aquí, están realizando sólo una lógica incrementada. En nuestro parámetro de función, agregamos un parámetro más al principio llamado type, que puede ser aumentar o disminuir. Después de encontrar el índice, agregamos condición I tipo igual a aumentar y dentro de este bloque I, simplemente pasamos por encima de esta lógica. Ahora vamos a duplicar este bloque I y cambiar este tipo para disminuir y cambiar esto a menos igual a uno. Ahora en la parte inferior, pasemos esta función en nuestro valor de contexto. Guarda los cambios y la pregunta es ¿dónde vamos a importar esa función? ¿Deberíamos ingresar eso en el componente de entrada de cantidad? La respuesta es no. Porque en nuestra página de producto único, estamos usando el mismo componente de entrada de cantidad solo para cambiar la cantidad del producto. En ese lugar, no queremos llamar a API. Aquí está la solución. En el componente de la página del carrito, obtenemos nuestra función de tarjeta de actualización. Y en la entrada de cantidad, hemos establecido los apoyos de cantidad, que es la función que llamaremos al evento click del botón más menos Sé que esto es un poco confuso. Solo ve esto una vez y entenderás todo esto. Entonces en esta cantidad establecida, pasamos nuestra función de tarjeta de actualización, y también pasamos sus nuevos accesorios, página de tarjeta a true y ID de producto a ID de subrayado de punto de producto Guarde estos y en el componente de entrada de cantidad en los accesorios, obtenemos aquí la página de la tarjeta y el ID del producto Ahora en esta función de clic, nos adherimos condición. Si la página del carrito es verdadera, entonces llamaremos a una función de cantidad establecida. En ese caso, esa es nuestra función de tarjeta de actualización. Entonces aquí tenemos que pasar dos argumentos tipo e ID de producto. Entonces primer tipo a disminuir y segundo ID de producto. Ahora bien, si nuestra página de carrito no es cierta, simplemente establecemos la cantidad en cantidad menos uno. Entonces ahora entiendes por qué agregamos esta página de tarjeta e ID de producto en estos accesorios Ahora simplemente copia este evento onclick y pegarlo en el lugar de este evento onclick Y primero cambiamos este tipo para aumentar y en L cambiamos esto a cantidad más uno. Guarda los cambios y echa un vistazo. En la página de la tarjeta, haga clic en el botón más menos y vea que nuestra cantidad está cambiando de acuerdo a eso. También el precio se actualiza. Nuestra media tarea está hecha aquí. Ahora solo necesitamos llamar a API para aumentar y disminuir. Donde definimos esas API en el archivo de servicios de tarjetas. Bueno. Estás aprendiendo muy rápido. A mí me encanta. Ahora aquí, simplemente duplicamos esta función eliminada de la API CAT dos veces más porque esas tres API son casi las mismas. Ahora cambiemos el nombre de esta función para aumentar la API del producto, y en el punto final de la API en el lugar de esta eliminación, tenemos que agregar aumento, y eso es todo lo que tenemos que cambiar. Ahora hagamos lo mismo para disminuir la API. Así que cambie el nombre de la función para disminuir la API del producto. Y en el punto final, cambiamos esto a disminución de barra de carrito Guarde los cambios, y en el componente de aplicación en nuestro blog de tipo aumentado, llamamos aumentar la API del producto y simplemente pasamos aquí ID. Ahora no necesitamos entonces método. Agregamos directamente método de caché. Y dentro de este método de caché, primero agregamos el error de punto tostado y pasamos aquí, algo salió mal. Y después de eso, colocamos el carrito al carrito anterior. Pero aquí, en esta función, no tenemos carrito anterior porque cambiamos esta matriz de tarjetas actualizada. Entonces, en la parte superior, definimos const old cart equals a array y spread cart array y simplemente pasamos este carrito viejo en nuestra función de carrito SAT Ahora en decremento tipo blog, llamamos disminución producto API y también pasamos aquí ID, y simplemente podemos copiar este método catch y pegarlo aquí. Guarda los cambios y echa un vistazo. Cambiar la cantidad del producto, y podemos verificar los cambios al reprimir Ver, obtenemos la cantidad actualizada. Así que aquí completamos con éxito nuestra función at to card, remove from card, increase and decrement. 164. Añadir al carrito en la tarjeta de productos: Llamemos a la API head to cart para nuestro icono de cesta de tarjeta de producto. En el componente de tarjeta de producto, aquí podemos usar la función de cabeza a carrito desde nuestro contexto de tarjeta. Usamos Context Hook, y dentro de él, pasamos contexto de tarjeta. Ahora, esto devolverá objeto, así podremos desestructurarlo y llegar hasta aquí la función de cabeza a carrito Ahora desplácese hasta la parte inferior, y en nuestro botón cabeza a tarjeta, agregamos el evento de clic, función de flecha, y aquí simplemente llamamos a nuestra función head to cart. Ahora aquí, tenemos que pasar dos argumentos. El primero es el objeto del producto, y el segundo es la cantidad. Desafortunadamente, no tenemos a ambos aquí. Por cantidad, simplemente podemos pasar uno porque aquí no tenemos entrada de cantidad. Pero para objeto producto, tenemos que hacer algo. En la parte superior en utilería, podemos ver aquí estamos obteniendo todas las variables para nuestro producto Así que abre el componente de lista de productos. Aquí, en lugar de pasar toda esta información en apoyos individuales, podemos pasar directamente objeto producto aquí Retira todo esto y solo pasamos aquí producto a este objeto producto. Guarde este archivo, y ahora vuelva a nuestro componente de tarjeta de producto. En lugar de obtener todos estos, obtenemos aquí un solo objeto de producto. Ahora vamos a reemplazar todos estos valores. Entonces en el lugar de identificación, agregamos producto, signo de interrogación, punto subrayado ID Aquí estamos usando el signo de interrogación porque si ID del subrayado del punto del producto no está disponible, entonces obtenemos el error Ahora, en el lugar de la imagen, tenemos producto, interrogación dotimag que es el array, y aquí obtenemos nuestra primera Después de eso, precio a producto, signo de interrogación, precio de punto, título a producto, interrogación, título de punto. Calificación al producto, Qimark punto revs punto T. A continuación, calificación cuenta al producto, Qimark puntos reviews recuentos de puntos y stock a producto, Qimark punto STAC ahora simplemente podemos pasar este objeto producto en esta la calificación cuenta al producto, Qimark puntos reviews recuentos de puntos y stock a producto, Qimark punto STAC ahora simplemente podemos pasar este objeto producto en esta función Agregar al carrito. Guarda los cambios y echa un vistazo. Abra la página del producto y haga clic en Agregar al carrito. Ver el producto se agrega en nuestra tarjeta. Ahora aquí hay una cosa. Como sabemos, nuestra API Agregar al carrito está protegida, lo que significa que solo los usuarios de inicio de sesión pueden agregar producto a la tarjeta. Entonces en la parte superior, nuevamente llamamos a usar Contactos y pasamos aquí contactos de usuario. Ahora, esto devolverá nuestro objeto de usuario y en la parte inferior, en nuestra condición de botón, agregamos otra condición. Si el usuario no es nulo, entonces mostraremos este botón de cabeza a carrito. Guarda los cambios, y si nos desconectamos y en nuestra página de productos, no obtenemos ese icono de cesta. Ahora dirígete a la página de un solo producto. Y aquí tenemos también botón cabeza a carrito. Ahora llamamos a usar Context Hook y contactos de usuario transeúnte aquí Esto devolverá el objeto user, así que lo almacenaremos en la variable llamada user. Y en la parte inferior, envolvemos cabeza a carro y también esta cantidad de entrada y cantidad rumbo y pasamos su condición. Si el usuario está disponible, entonces solo muestra estos elementos. Ahora esto nos dará error de compilación porque estamos devolviendo más de un elemento. Entonces, ¿cómo podemos resolver ese derecho usando en fragmentos? Entonces envolvemos estos y vemos que se ha ido. Guarda los cambios y echa un vistazo. Aquí obtenemos nuestra información del producto sin botones. Puedes ver lo fácil que se vuelve con el uso Context Sook. 165. Llamada a API para el pago: Ahora, antes de hacer algo, vamos a iniciar sesión de nuevo porque cerramos sesión en la lección anterior. Ahora ve a la página del carrito. Y aquí, llamemos a nuestra última API, que es API de pago. En nuestra aplicación, no estamos agregando funciones de pago porque al agregar cualquier escapada de pago, front-end juega muy poco papel. Por ejemplo, en Stripe Payment, que es la biblioteca de pasarela de pago más popular para implementar el pago, solo necesitamos llamar a una API desde el front-end. La mayor parte del código de pago va al back end. Entonces no es tanto beneficioso agregar stripe en este curso, porque nuestro objetivo principal es aprender a reaccionar, y eso es que lo estamos haciendo bastante bien. Aunque si quieres saber esto, dímelo en la sección de preguntas y respuestas, actualizaré esta sección con eso Pero en mi sugerencia, aún no necesitas eso. Solo concéntrese en construir aplicaciones de reacción rápida y agradable. Para la API order checkout en la carpeta services, creamos un nuevo archivo llamado order services dot js. Ahora en este archivo, antes que nada, importamos cliente API desde Utils slash API client y aquí creamos una función llamada checkout API dentro de esta función, simplemente llamamos aquí api client dot post, y en endpoints Order slash Ahora no necesitamos pasar ningún dato porque automáticamente obtendrá los datos de la tarjeta desde el back end Ahora, esta expresión nos da promesa, simplemente devolvemos este Guardar este archivo, y en el componente de la página de la tarjeta en la parte inferior en el botón de pago, aquí agregamos el evento de clic es igual a aquí pasamos la función de pago. Ahora definamos esta función de checkout. En segundo lugar, función de error de pago. Y aquí llamamos API de pago desde Order services. Ahora, después de esta compra, tenemos que vaciar nuestra tarjeta. Así que aquí agregamos entonces método, función de flecha. Y en los corchetes de Cali, primero agregamos Toast de react a S DiPi Library, y aquí agregamos éxito y aquí pasamos nuestro mensaje, pedido realizado con éxito Y después de eso, tenemos que vaciar nuestro estado de tarjeta. Y para eso, necesitamos establecer la función de tarjeta. Así que vamos al componente app y pasamos la función set card en nuestro contexto de tarjeta. Guarde este archivo y vuelva a la página de la Tarjeta. Aquí en este contexto de uso, obtenemos set card, y en nuestra función, establecemos card a card empty. O podemos mover esta tarjeta de conjunto antes de esta llamada a la API. Ahora, ¿y si tenemos error para esta API? Entonces agregamos aquí el método catch, y en los corchetes, teníamos un error de punto tostado, y como mensaje, algo salió mal. Y después de eso, pondremos carrito de nuevo al estado anterior. Así que en la parte superior, definimos nueva variable llamada old cart equals to array, y aquí extendemos cart array. Ahora en el método de captura, simplemente pasamos set cart a old cart. Usa los cambios y echa un vistazo. Haga clic en el botón Pagar y nuestro gato está configurado para vaciar. Ahora, verifiquemos esto. Entonces en nuestro Mongo nosotros brújula, abrimos nuestra base de datos CAT Wi Aquí tenemos la recolección de pedidos, y dentro de este, tenemos nuestro pedido confirmado y estado establecido como pagado. 166. Ejercicio para que los usuarios ordenen: Ahora es el momento de un pequeño ejercicio más. Aquí en nuestra página Mi pedido, tenemos que mostrar todos los detalles del pedido sobre el usuario actual, y usted obtiene esa información de pedido de usuario actual de esta API de GAT. Suspenda de dos a 3 minutos en este ejercicio, y sé que puede completar este ejercicio. 167. Solución para este ejercicio: Ahora, veamos la solución de nuestro ejercicio. Obsérvese que este ejercicio tiene dos soluciones. Entonces primero, creamos otra función en el archivo de servicios de pedidos para My Orders EPI, pero esa es la solución larga Entonces la solución de Sten Street es que podemos usar nuestro gancho personalizado, que podemos usar para obtener cualquier tipo de datos Entonces aquí en nuestro componente, llamamos use data hook en el primer parámetro, pasamos nuestro punto final, que es orden. Ahora, esto devolverá objeto con datos, que podemos renombrar a órdenes. Además, aquí podemos obtener error y está cargando variable. Ahora aquí podemos establecer la condición para este componente de tabla, que es si el orden no es nulo, sólo entonces mostrar este componente de tabla. Ahora solo tenemos que mostrar estos pedidos en nuestra mesa. En T body, en la parte superior, teníamos llaves, órdenes dot Map, y aquí conseguimos un solo pedido, y además conseguimos aquí índice. Ahora vamos a devolver simplemente esta fila de tabla. Y pase clave para ordenar ID de subrayado de punto. Y dentro de esta fila, agregamos datos de tabla, y primero, mostramos índice más uno. Después de eso, para el nombre de los productos, lo dejamos igual por ahora. A continuación, tenemos total, así que ordene el total del punto, y por fin, agregamos el estado del punto del pedido. Guarda los cambios y echa un vistazo. Consulta aquí obtenemos los detalles de nuestro pedido. Ahora solo necesitamos mostrar los nombres de los productos. Entonces para eso, creamos una nueva función. Llamar Obtener cadena de producto. Y como parámetro, obtenemos aquí, solo orden, función de error. Y antes que nada, hacemos pedidos de productos dot, dot MAP. Nombro Nombro entre llaves, llamamos a esta función get product string y simplemente pasamos aquí este pedido. Guarda los cambios y echa un vistazo. Ver, aquí obtenemos nuestra cadena de productos con la cantidad. Entonces está funcionando bastante bien. Ahora, agreguemos aquí cargador. Antes de nuestro componente de mesa, agregue I I cargando es cierto, luego mostramos el componente del cargador. Y también por error, aquí pasamos nuevos brackets de Cully. El error está disponible, luego devolvemos la etiqueta de énfasis con el nombre de la clase , error de formulario, y aquí dentro de esto, mostramos el error. Guarda los cambios y echa un vistazo. Verás, está funcionando para nosotros. Perfecto. 168. Crea rutas protegidas: Ahora en nuestra implementación actual, tenemos poco bug aquí. Entonces cuando el usuario está conectado, solo entonces estamos mostrando este Moder, logout y enlaces de carrito Ahora bien, si nos desconectamos, entonces no vemos estos enlaces, pero aquí hay una cosa. Si en nuestra URL, establecemos ruta para reducir CAT y golpeamos Enter, entonces también accedemos a esas rutas protegidas, y eso no es lo que queremos, ¿verdad? Entonces, si el usuario no está conectado e intenta acceder a rutas protegidas como la página de Moders o CAT, entonces los redireccionaremos directamente a la página de inicio de sesión Entonces, para implementar esto, abriremos nuestro componente de enrutamiento. Aquí sabemos para definir ruta, utilizamos componente de ruta, y aquí pasamos apoyos de ruta y elemento Entonces aquí vamos a definir un nuevo componente de ruta. Llamaremos a esta ruta protegida. Este componente será solo envoltorio de este componente de ruta, que simplemente verifica si el usuario no está disponible, luego los redirigirá automáticamente a la página de inicio de sesión. De lo contrario, redirigirá a esa página protegida. No te preocupes, mira esto y todas las dudas se llenan claras. En nuestra carpeta de enrutamiento, creamos un nuevo componente llamado ruta protegida punto JSX Agrega aquí el código Boilerplate para este componente. Ahora, antes que nada, en este componente a cambio, llamamos Get user function from user services, que devolverá user object o si token no está disponible, nos dará valor nulo. Entonces si el usuario está disponible, entonces devolvemos el componente Outlet. De lo contrario redireccionamos a la página de inicio de sesión. Así que aquí usamos Navigate component from React router Dom y pasamos a atributo a slice login. Si olvida outlet, solo para represor rápido, en el lugar de este outlet, se mostrarán nuestros componentes de enrutamiento anidados No te preocupes, guarda este archivo y en el componente de enrutamiento, qué rutas queremos proteger. Correcto, estas son las últimas tres rutas, carrito, Moder y Cerrar sesión Entonces en la parte superior, agregamos ruta y envolvemos estas tres rutas que queremos proteger. Ahora en el elemento, pasamos nuestro componente de ruta protegida y eso es todo. Guarda los cambios y echa un vistazo. Aquí no estamos conectados, e intentamos acceder a la página de la tarjeta y ver, redireccionamos a la página de inicio de sesión. Ahora iniciemos sesión con correo electrónico y contraseña e intentemos acceder a la página de la tarjeta. Y ahora podemos acceder a esta página. Entonces está funcionando en ambos sentidos. Ahora déjame explicarte lo que está pasando aquí. Aquí estamos utilizando rutas naturales. Entonces, cuando nuestra aplicación, quiera navegar desde estas tres rutas, primero, se ejecutará este componente de ruta protegida, y dentro de ese componente, tenemos condición para Outlet y navegue a la página de inicio de sesión. Entonces, si el usuario está conectado, entonces este elemento se muestra en el lugar de toma de corriente, así de simple como eso. Así es como creamos ruta protegida para nuestra aplicación. 169. Redirige a la página protegida anterior: Ahora, en sesson anteriores vimos cuando no estamos logueado e intentamos acceder a rutas protegidas como la página del carrito, luego navegamos a la página de inicio de sesión Y si iniciamos sesión con nuestro correo electrónico y contraseña, redireccionamos a la página principal. Idealmente, deberíamos volver a redirigir a esa ruta protegida, a la que queremos acceder. Este no es un gran problema, pero potenciará un poco nuestra experiencia de usuario. Entonces arreglemos esto. Entonces para eso, nuestro componente de ruta protegida tenemos que pasar ubicación previa con este componente de navegación. No te preocupes por eso, mira esto, y al final, entenderás todo esto. Entonces antes de regresar, llamamos use location hook desde Rea router doom vamos a almacenarlo en variable, llamar ubicación Ahora esta ubicación tiene toda la información sobre la ubicación actual de la página. Así que vamos a simplemente consola dot log esta ubicación. Tenga en cuenta que solo las páginas protegidas accederán a este componente de ruta protegida. Y por ahora, comentemos esta declaración de retorno. Guarda los cambios y echa un vistazo. Abre Consola, y simplemente logo desde aquí e intento acceder a mi página de Pedidos. Mira aquí obtenemos nuestro objeto de ubicación, y en ese objeto, tenemos este nombre de ruta al que queremos acceder. Volver al código VS, eliminar este registro de puntos de consola y también eliminar este comando. Ahora de alguna manera necesitamos pasar este nombre de ruta de punto de ubicación a nuestra página de inicio de sesión. En este componente de navegación, podemos pasar datos adicionales en el estado props Estado es igual a C corchetes para agregar código JavaScript, y aquí agregamos objeto con propiedad de, y simplemente pasamos aquí esta ubicación punto pathname Guarda los cambios, y ahora en nuestra página de inicio de sesión, solo necesitamos acceder a esto desde el estado. En nuestro componente de inicio de sesión en la parte superior, nuevamente usamos aquí, usamos el gancho de ubicación de Rea Router doom y almacenamos eso en la variable llamada ubicación Ahora vamos a consultar ese registro, la ubicación de inicio de sesión, y pasamos aquí la ubicación. Guarda los cambios y echa un vistazo. Ver, aquí obtenemos el objeto de ubicación de inicio de sesión. Abre eso y mira, aquí tenemos estado, y en eso tenemos de propiedad a nuestro camino anterior, que es CAT. Así que aquí, en la función onsubmit, antes de la ubicación del punto de la ventana, tenemos ubicación y obtenemos la propiedad state usando la destrucción de objetos Ahora aquí en la ubicación del punto de la ventana, simplemente agregamos condición. Si se define Estado, entonces redireccionaremos al punto stat de lo contrario simplemente redireccionaremos a la página principal. Guarda los cambios y echa un vistazo. Inicie sesión en este formulario y vea que redireccionamos a la página de la tarjeta. Entonces está funcionando. Ahora ya casi terminamos aquí. Pero actualmente estamos loguados en nuestra aplicación, y si intentamos acceder a la página de inicio de sesión o a la página de registro, entonces también obtenemos estas páginas. Por lo que debemos redirigir al usuario a la página de inicio si el usuario ya está conectado. Estos son escenarios muy raros, pero es mejor cuidarlos. Entonces arreglemos esto. Entonces en nuestro componente de página de inicio de sesión, aquí antes de nuestra devolución JSX, agregamos condición Aquí llamamos a la función de usuario desde los servicios de usuario. Y si devuelve un usuario, volveremos aquí, navegaremos por el componente de react Router doom y navegaremos a la página principal Guarda los cambios y echa un vistazo. Ahora, si tratamos de acceder a la página de inicio de sesión, vea, redireccionamos a la página principal. Hagamos lo mismo para la página de registro. Copia esta condición I, y en nuestro componente de página de registro antes de que nuestro JSX pase este código Simplemente importamos Get user from user services e importamos también navigate component from react Router doom, y terminamos aquí Así es como manejamos APIs protegidas y rutas protegidas en aplicaciones de reacción. Se puede ver que es muy simple y fácil de usar. 170. Sección 15: arregla algunos problemas: Entonces en nuestra aplicación, tenemos un par de cosas que hacer. En primer lugar, en la página de inicio, tenemos que buscar productos de características desde el back end y mostrarlos en esta sección A continuación, tenemos enlaces para B ahora aquí. Entonces en este botón, agregaremos este enlace a la página de productos, y eso es todo para la página de inicio. Ahora vamos a la página de productos. Aquí tenemos opción corta, pero no agregamos esa funcionalidad. Entonces tenemos que hacer eso. A continuación, tenemos otra característica importante que es la búsqueda de nuestro producto. Por lo que completaremos la función de búsqueda con sugerencias de auto. Puedes hacer una lista para esta tarea, y a medida que completes cada tarea, puedes verificarla como completada. Eso te dará más claridad y podrás lograr completar una tarea a la vez. Puedes ver estas son mis notas cuando estoy completando este proyecto. Además, puedes tomar todas estas tareas como ejercicio e intentar resolverla antes de ver la solución. Entonces en un par de lecciones, vamos a completar este proyecto. 171. Busca productos destacados: Ahora, comencemos con la búsqueda de productos con funciones, jabón y componentes de productos de características Y aquí, en este componente, lo llamamos gancho de datos usado. Ahora en el primer parámetro, pasamos nuestro punto final, que es slash products, slash featured Ahora, como sabemos, este dato usado devuelve objeto, así lo desestructuramos, y aquí obtenemos error de datos y facilidad cargando propiedades Ahora, simplemente consolar dot log estos datos. Ver los cambios y echar un vistazo. Abre Consola y mira, aquí obtenemos matriz de tres productos. Ahora solo tenemos que mostrarlos aquí. Así que abra el componente de la lista productos y en la lista de productos, copie estos datos dot products y esqueleto ambos. Y en nuestras características componentes de productos en el lugar de la tarjeta de tres productos, la pegamos. Ahora, primero, cambiamos estos datos dot products a data only, y también aquí data dot map porque estamos obteniendo array en nuestros datos. Después de eso, aquí necesitamos importar el componente esqueleto. Aquí importamos esqueleto de tarjeta de producto. Como necesitamos definir la matriz de esqueletos. En la parte superior, los esqueletos son iguales a la matriz. Ahora bien, ¿cuántos esqueletos queremos mostrar? Queremos tres esqueletos. Aquí agregamos uno, dos y tres. Vamos a mostrar nuestro error. Nuevamente, vuelva al componente de la lista de productos y simplemente copie este error. Y pegarlo en nuestra lista de productos de características. Guarda los cambios y echa un vistazo. Ver, aquí obtenemos nuestras características de productos. Completamos nuestra primera tarea. Podemos verificar que esa tarea esté terminada. Ahora también vamos a arreglar esto por ahora link. En primer lugar, en productos, aquí tenemos nuestro producto iPhone 14, haz click derecho sobre esta imagen y copia la dirección del enlace. Ahora vuelve al código VS y abre el componente de la página principal. Y aquí en el enlace de la sección de primer héroe, pegamos esa dirección de enlace. Y al principio, eliminamos nuestra URL base. No lo necesitamos. Ahora, lo mismo hacemos para la segunda sección de héroes. Entonces aquí también tenemos MacBook. Sé que esto no es un producto tt, pero no tenemos Mac studio y por eso podemos redirigir al usuario a MacBook. Así que copia esta dirección de enlace, y en nuestro componente, la pegamos aquí. Además, elimina la URL base, guarda los cambios y echa un vistazo. click en el botón Por ahora, y redireccionamos a la página del iPhone 14. Pero es refrescante nuestra página. Detengamos esto. Así que volvamos al código VS y abre el componente de sección héroe. Y aquí en el lugar de la etiqueta Anchor, agregamos el componente Link de React Router doom y renombramos este HF a dos atributos Guarde los cambios y eche un vistazo a página principal y haga clic en el botón Bynw y vea, redireccionamos a esa página Entonces aquí completamos nuestra segunda tarea también. Ahora en la siguiente lección, trabajaremos en nuestra barra de búsqueda. 172. Recupera productos por consulta de búsqueda: Ahora, agreguemos la funcionalidad de productos de búsqueda. Entonces aquí está la demo de eso. Cuando buscamos algo en nuestra barra de búsqueda y pulsamos Enter o hacemos clic en la barra de búsqueda, solo obtenemos esos datos de la API de nuestros productos Y se puede ver cuando golpeamos búsqueda que la cadena de búsqueda está agregando en la cadena de consulta. Y también, aquí obtenemos autosugnon para consulta de búsqueda, y también podemos navegar con las teclas de flecha Es muy sencillo. Veamos esto. En nuestra implementación actual, solo tenemos que establecer nuestra entrada de búsqueda en nuestra cadena de consulta URL. Y a partir de esa cadena de consulta, pasaremos ese texto de búsqueda en nuestra llamada API. Lo mismo que hacemos en nuestra categoría. Entonces, en nuestro componente NBR, tenemos nuestra entrada de búsqueda Entonces, antes que nada, necesitamos obtener texto de la entrada de búsqueda. Entonces en la parte superior, agregamos aquí lo usé y agregamos fragmentos y le damos un nombre, buscamos y establecemos búsqueda y pasamos cadena vacía como valor predeterminado Ahora en nuestro cuadro de entrada de búsqueda, primero pasamos el valor a la variable de búsqueda y después de eso, pasamos el evento onchange y dentro de él, obtenemos el objeto del evento, función de error, y simplemente establecemos búsqueda en el valor de punto objetivo e Entonces aquí obtenemos nuestro valor en estado de búsqueda. Ahora solo necesitamos configurarlo en cadena de consulta URL. Así que antes que nada, en nuestra etiqueta de formulario, agregamos en enviar evento y pasar la función ER, manejar enviar. Ahora definamos esta función, manejar, enviar. Aquí obtenemos el objeto evento, y primero, establecemos E dot prevent default. ¿Y qué punteará? Se evitará un comportamiento o forma por defecto. Ahora, después de eso, aquí pasamos una condición si la búsqueda no es igual a cadena T. Entonces estableceremos esa cadena de búsqueda en la cadena de consulta. Entonces aquí tenemos dos formas. Podemos usar los params de búsqueda, o podemos usar el gancho Navigate La elección es suya. Vimos ambos enganchar en reaccionar router dom. Personalmente me gusta usar aquí usar Navigate porque es más sencillo que usar params de búsqueda Después de usar Estado, llamamos use Navigate hook desde react router doom y nos dará Navigate variable Ahora agreguemos la función Navigate en nuestro mango submit. Y aquí pasamos nuestra URL. Entonces en Betts, pasamos slash Products, signo de interrogación, Sarge equivale a brackets colli dolares Guarda los cambios y echa un vistazo, escribe algo y pulsa Enter. Navegue a la página de productos con cadena de consulta de búsqueda. Ahora quita este texto y solo y presiona Enter. Verás, estamos obteniendo espacio en la cadena de consulta, y eso no es lo que queremos. En nuestra función handle submit, en Navigate pasamos la búsqueda dotTremFunction Esto eliminará todos los espacios no deseados. Y también aquí además, agregamos la búsqueda de crema de puntos. Guarda los cambios y echa un vistazo a nuestra página de inicio. Y cuando añadimos espacios y golpeamos enter eso no redireccionará a la página de productos. Entonces nuestra media tarea está hecha. Ahora solo necesitamos pasar esta consulta de búsqueda en nuestra llamada API. Entonces, en un componente de lista de productos, primero obtenemos nuestra cadena de búsqueda de la cadena de consulta. Así consulta, definimos const, consulta de búsqueda es igual a buscar punto GT y pasar aquí query string nombre de variable, que es search Ahora simplemente pasamos esta consulta de búsqueda en nuestros params. Antes de nuestra categoría, agregamos búsqueda a consulta de búsqueda. Y a medida que cambiamos nuestra consulta de búsqueda, deberíamos llamar a esto PI, así que tenemos que agregar consulta de búsqueda en esta matriz de dependencias. Guarda los cambios y echa un vistazo. Busca algo aquí y pulsa Enter. Ver, obtenemos solo dos productos. Entonces nuestra consulta de búsqueda está funcionando. Intentemos una vez más, escribamos algo y golpeemos Enter. Ver que está funcionando. Ahora déjame mostrarte un bicho. Ve a la página de productos y desplázate hasta la parte inferior. Entonces nuestra página está establecida en tres. Ahora busca algo y puedes ver que no obtenemos esos datos. ¿Por qué sucede eso? Correcto, porque no tenemos la página tres para esta cadena de consulta. Entonces, ¿cuál es la solución para eso? Correcto, eso ya lo hemos visto. Entonces tenemos que establecer la página en uno. Entonces en nuestro efecto de uso, lo hemos hecho para nuestra categoría. Ahora simplemente agregamos aquí consulta de búsqueda. Los cambios, y ahora nuestro bicho se ha ido. Puedes ver lo sencillo que es agregar funcionalidad de búsqueda en react. Y aquí, nuestra tercera tarea está concluida. Entonces, en aplicaciones de comercio electrónico o sitios web como YouTube, esta funcionalidad de búsqueda es una característica muy útil e importante. Así que recuerda siempre la lógica de la barra de búsqueda. Primero, hay que establecer la cadena de consulta en la URL y luego pasar esa cadena de consulta en la API, así de simple como eso. 173. Autosugerencia en la barra de búsqueda: Ahora actualmente, si escribimos algo en la barra de búsqueda, no recibimos ninguna sugerencia para el nombre de los productos. Entonces, en esta lección, mostraremos autoización para nuestra barra de búsqueda Entonces en nuestro componente N Bar, después de nuestra función handle submit, agregamos use effect hook y dentro de él, agregamos función callback y array de dependencia con estado de búsqueda Entonces, cuando nuestra búsqueda cambie, esta función de devolución de llamada y dentro de esta función de devolución de llamada, llamaremos a nuestra API de sugerencias Entonces para API, en nuestra carpeta de servicios, creamos un nuevo archivo llamado product services dot js. Ahora dentro de este archivo, en primer lugar, ingresamos cliente API desde el módulo cliente API de Utils Después de eso, creamos una nueva función llamada Get suggestion API. Y aquí obtenemos la búsqueda como parámetro, y dentro de esta función, simplemente devolvemos api client dot GT ahora para endpoint, agregamos backticks, productos slash, sugerencias de slash, signo de interrogación, búsqueda es igual a dolares, search . Esto lo hemos hecho tantas veces. Ahora simplemente exportemos esta función. Guarde los cambios, y vuelva a nuestro componente Navbar. Aquí, primero agregamos condición si recorte de punto de búsqueda no es igual a cadena vacía, entonces solo llamamos a nuestra API. Aquí llamamos a obtener sugerencias, función API y pasamos aquí nuestra búsqueda. Ahora esta función devolverá una promesa. Entonces aquí usamos entonces método, y dentro de él, obtenemos respuesta. Y para almacenar sugerencias, necesitamos crear una nueva variable de estado. Entonces después de nuestro estado de búsqueda, agregamos un gancho de estado de uso más llamado sugerencias y establecemos sugerencias. Y como valor predeterminado, pasamos array vacío. Ahora en nuestro método entonces, simplemente establecemos sugerencias a los datos de puntos de respuesta. Después de eso, agregamos el método catch, y aquí obtenemos el objeto error y simplemente el punto de la consola registramos este error. Así que aquí agregamos nuestra condición busco no está vacía y de lo contrario si la búsqueda está vacía, entonces simplemente establecemos sugerencias para vaciar array. Ahora vamos a consola dot log la matriz de sugerencias, guardemos los cambios, y echemos un vistazo, escribamos algo en la barra de búsqueda, y en la consola, aquí podemos ver que obtenemos estas sugerencias. Estas sugerencias son matriz de objeto, y cada objeto tiene sólo dos propiedades, subrayado ID y título Entonces aquí tenemos nuestras sugerencias. Ahora solo necesitamos mostrarlos debajo de nuestra barra de búsqueda. Entonces primero, tenemos que agregar nuestros elementos, y luego agregaremos estilo para la lista de sugerencias. Después de nuestro botón de búsqueda en la etiqueta de formulario, agregamos nuevo bajo lista con nombre de clase, resultado de subrayado de búsqueda, y dentro de ella, agregamos etiqueta de elemento de lista con nombre de clase, sugerencia de subrayado de búsqueda, enlace de subrayado Ahora dentro de esto, simplemente agregamos componente de enlace de Rea enrutador doom Pasa a puntal para rebanar productos por ahora. Dentro de esto, escribimos iPhone 14 Pro. Ahora la razón por la que agregamos aquí Componente de enlace, así que cuando hagamos clic en esa línea de sugerencias, redireccionaremos al usuario a su página de producto. Guarda los cambios y echa un vistazo. Ver, aquí obtenemos nuestro enlace de sugerencia. Ahora agreguemos estilo para eso. Sop Nabar punto css archivo. Después de nuestro botón de búsqueda, agregamos el resultado de subrayado de búsqueda de puntos, corchetes colli, y dentro de eso, primero, establecemos la posición en la parte superior absoluta al 100%, y la izquierda a cero Ahora para usar la posición absoluta, tenemos que hacer que nuestra posición de formulario sea relativa, desplazarnos hacia arriba, y en la forma Navbar, agregamos position a relative Ahora volvamos a nuestro resultado de búsqueda. Y aquí agregamos con 200% de margen superior a diez píxeles, agua a un píxel, sólido tiene CD CD CD, radio de borde a cinco píxeles, color de fondo, a blanco, y al final, índice Z a 9999 Ahora después de eso, agregamos estilo para el enlace de sugerencia de búsqueda, así que búsqueda de puntos, sugerencia, enlace, y dentro de los corchetes, configuramos display en flex. Ahora, después de esto, agregamos estilo para la etiqueta de anclaje, que está disponible en componente de enlace. Surge de dardos, sugerencia, enlace, y aquí apuntamos etiqueta de anclaje, corchetes, y aquí simplemente agregamos ancho al 100%, agregando a diez píxeles y 20 píxeles, un tamaño a 18 píxeles y cursor a puntero. Y al final, agregamos efecto HR para nuestro enlace. Oleada de dardos, sugerencia, enlace, hover Callan. Y en los corchetes, establecemos el color de fondo a un E tres, E tres, E tres. Guarda los cambios y echa un vistazo. Ver, nuestro enlace se ve bien. Ahora simplemente mostremos nuestra matriz de sugerencias. De vuelta a nuestro componente Neva, y en nuestra lista desordenada, agregamos corchetes CL, sugerencias punto MAP Aquí obtenemos una sola sugerencia, función de flecha, y simplemente devolvemos este elemento de la lista. Ahora, ante todo, agregamos el atributo clave al ID de subrayado de punto de sugerencia Y en el componente link, agregamos corchetes Ci, ticks traseros, y dentro de estos, agregamos productos slash, signo de interrogación, búsqueda igual a dólar Ci Brackets, sugerencia punto título Y en el lugar de este título codificado, también agregamos título de punto de sugerencia Guarde los cambios y eche un vistazo, escriba algo en la barra de búsqueda y vea que obtenemos sugerencias. Ahora, si hace clic en alguna de las sugerencias, redireccionamos a la página de productos, y nuestros productos se mostrarán de acuerdo con dat. Pero la lista de sugerencias seguirá siendo la misma abierta. Tenemos que cerrarlo. Así que aquí en nuestro componente de enlace, agregamos el evento de clic y dentro de la función de error. Y en corchetes Cul, primero, establecemos búsqueda Y establecer sugerencias para vaciar la matriz. Guarda los cambios y echa un vistazo, escribe algo y haz clic en sugerencia. Mira, nuestra sugerencia se ha ido. Ahora también tenemos que hacer lo mismo en nuestra función handle submit. Entonces, después de este método de navegación, simplemente agregamos sugerencias de conjunto para vaciar la matriz. Guarda los cambios y echa un vistazo. Ves, ahora está funcionando muy bien, pero aquí hay una cosa. Aunque no tengamos ninguna sugerencia, seguimos recibiendo estas líneas. Así que haga clic derecho sobre él y vaya a inspeccionar. Aquí podemos ver que es nuestro borde de lista desordenado. Arreglemos esto. Así que volvamos al código VS, y envolvemos nuestra lista desordenada con corchetes y simplemente pasamos aquí condición si sugerencias longitud de punto es mayor que cero, sólo entonces mostrar esta lista Guarda los cambios y echa un vistazo. Consulta ahora nuestra barra de búsqueda está funcionando bien. Ahora aquí podrías pensar, cuál es el beneficio cuando hacemos clic en sugerencia y redireccionamos a la página que tiene solo un ítem. Así que en nuestra base de datos, actualmente tenemos un solo artículo para cada producto. Pero cuando nuestra base de datos crezca, podríamos tener el iPhone 14 con múltiples colores, y en ese momento, esta página mostrará múltiples productos. 174. Navegación para sugerencias automáticas: Ahora en nuestra barra de búsqueda cuando recibamos sugerencias de auto, tenemos que hacer clic en esa sugerencia para la búsqueda. Pero en el mundo real, el 99% de los usuarios no hacen clic en el enlace de sugerencia. Les gusta usar claves ARO, y esa es la buena experiencia de usuario. Entonces en esta lección, veremos cómo agregar navegación de teclas Ero para nuestra lista de sugerencias. Entonces, antes que nada, creamos una nueva variable de estado, llamamos a item selected, set selected item, y como valor predeterminado, pasamos aquí menos uno. Solo recuerda la lógica y todas tus dudas se aclararán. Entonces, cuando presionamos la tecla hacia abajo, este valor del ítem seleccionado aumentará en uno, que es cero. Y ponemos condición si el ítem seleccionado es el mismo que el índice de nuestra fila de sugerencias, entonces resaltaremos esa fila, simple como eso. Entonces, antes que nada, en nuestra entrada de búsqueda, tenemos que pasar un evento llamado a la tecla abajo, que se ejecutará cada vez que presionemos cualquier tecla en esta entrada. Aquí pasamos la función llamada handle key down. Primero definamos esta función. Escriba const, maneje la tecla hacia abajo. Obtenemos aquí el objeto de evento, y dentro de este, simplemente agregamos console dot log e dot kee. Al usar esta tecla de punto e, obtenemos el nombre de la tecla presionada. Di los cambios y echa un vistazo, selecciona el cuadro de entrada, y presiona la flecha hacia arriba y mira aquí obtenemos flecha hacia arriba. Presiono flecha hacia abajo y también Enter. Ver, aquí obtenemos nuestros nombres clave. Ahora podemos sumar nuestras condiciones de acuerdo a eso. Entonces en esta función, agregamos nuestra primera condición I K es igual a flecha hacia abajo. Asegúrate de escribir la misma cadena, lo contrario no funcionará. Ahora dentro de esto, escribimos set selected item. Aquí obtenemos nuestra función de flecha de valor actual, y devolvemos corriente más uno. Después de eso, agregamos otra condición, si K es igual a flecha hacia arriba. Y dentro de esto, simplemente copiamos esta expresión y la pegamos aquí. Pero solo reemplazamos esto al actual menos uno. Ahora por fin, agregamos una condición más si e punto K es igual a Enter y también el ítem seleccionado debe ser mayor que menos uno porque si el ítem seleccionado es menos uno y presionamos Enter, entonces esto nos dará error. Si el ítem seleccionado es mayor o igual a cero, entonces navegamos a ese enlace. Entonces primero, aquí definimos sugerencia es igual a sugerencias, y en paquete cuadrado, pasamos ítem seleccionado. Y después de eso, simplemente navegamos con esa búsqueda. Entonces, ¿cómo podemos conseguir eso simple usando el método navigate? Entonces aquí, copiamos este enlace del componente de enlace y lo pegamos en este método de navegación. Después de eso, establecemos la búsqueda cadena vacía y también establecemos sugerencias para vaciar la matriz. Ahora, último paso, tenemos que destacar el índice activo actual. Entonces para eso, en nuestra etiqueta de elemento de lista, cortamos este nombre de clase y addheklbackets, Seleccioné el ítem igual al índice de esta sugerencia, luego agregamos enlace de sugerencia de búsqueda y clase activa. Como solo agregamos enlace de sugerencia de búsqueda. Y también tenemos que obtener índice de este método de mapa. Guarde este archivo y definamos CSS para esta clase activa. Así que abre Navar punto archivo CSS, y aquí en nuestro estilo ***, agregamos otra clase llamada búsqueda sugerencia enlace punto ACTV guardar los cambios y echar un vistazo, escribir algo y presionar abajo y arriba teclas y ver que está funcionando Ahora golpeamos Enter y C, Link se abrirá. Pero aquí, cuando llegamos al fondo y nuevamente presionamos la flecha hacia abajo, entonces nuestro elemento seleccionado no se resalta y lo mismo para la flecha hacia arriba. Entonces, cuando estamos en la parte superior de nuestra lista y nuevamente presionamos la flecha hacia arriba, entonces tenemos que establecer nuestro valor de elemento seleccionado en el último elemento. Volver al componente Naver aquí en nuestro mango clave abajo función para flecha abajo, pasamos aquí condición si actual es igual a sugerencias longitud de punto menos uno, que es el último elemento, luego volvemos a cero, que es nuestro primer elemento, lo contrario, volveremos actual más uno Ahora para flecha arriba, le pasamos su condición. Si actual es igual a cero, entonces devolvemos sugerencias longitud de punto menos uno, que es nuestro último elemento, lo contrario, devolvemos actual menos uno. Guarda los cambios y echa un vistazo. Mira, podemos movernos de arriba a abajo en nuestra lista de sugerencias, pero aquí hay un error. Si seleccionamos el último elemento, y luego seguimos escribiendo, entonces tenemos que presionar upkey varias veces, y esa es la mala experiencia de usuario Para resolver eso aquí en nuestra función de tecla de mango hacia abajo. Agregar una condición que seleccioné artículo es menor que las sugerencias de longitud de punto. Sólo entonces corremos esta lógica. Así que mueve este código en la condición I, y de lo contrario estableceremos elemento seleccionado al valor predeterminado, que es menos uno. Guarda los cambios y echa un vistazo. Ver ahora está funcionando correctamente. Puedes ver lo sencillo que es agregar error de navegación para nuestra lista de sugerencias. 175. Método de desacreditamiento para obtener sugerencias: Ahora, actualmente, en nuestra implementación, hicimos algo muy mal. Déjame mostrarte. Entonces, en nuestras herramientas para desarrolladores, abre la pestaña Red y escribe aquí algo en esta barra de búsqueda. Aquí podemos ver que estamos haciendo una llamada API al back-end cada vez que un usuario escribe un carácter en la barra de búsqueda. Por ejemplo, aquí estamos enviando seis solicitudes, y realmente no necesitamos la primera respuesta de cinco. Entonces, cuando estamos enviando tantas solicitudes, nuestra aplicación se ralentiza, y también la carga en el servidor aumentará. Así que para reducir el número de llamadas API aquí podemos usar la técnica llamada debouncing desrebote es un método para retrasar la ejecución de una función hasta que haya pasado cierta cantidad de tiempo Por ejemplo, cuando el usuario escribe algo en la barra de búsqueda, después de algún retraso, llamaremos a nuestra API. Déjame mostrarte cómo podemos hacer eso. Es realmente simple. Entonces en nuestro efecto de uso, aquí agregamos la función set timeout. Como sabemos esto excepto función callback y un segundo parámetro, tenemos que pasar el tiempo en milisegundos Aquí pasamos 300 milisegundos. Lo que sea que agreguemos en esta función de devolución de llamada, se ejecutará después de 300 milisegundos Vamos a mover esta lógica en nuestra función de devolución de llamada. Bueno. Ahora tenemos que agregar una función más limpia para este tiempo de espera. Almacenamos este tiempo de espera en una variable llamada sugerencias de retardo En la parte inferior para la limpieza, devolvemos la función de devolución de llamada, y aquí simplemente aclaramos tiempo de espera y pasamos sugerencias de retardo Guarda los cambios y echa un vistazo, actualiza la página, sirve algo aquí, y podemos ver aquí estamos enviando solo una solicitud, así que está funcionando. Ahora déjame explicarte lo que está pasando aquí. Cuando nuestro estado de búsqueda está cambiando, la función de tiempo de espera establecido ejecuta la función de tiempo de espera establecido y después de 300 milisegundos, estamos llamando a nuestra API de sugerencias Ahora, si el usuario escribe otro carácter dentro de los 300 milisegundos, se restablece el tiempo de espera y la llamada a la API se pospondrá nuevamente Yo usuario no escribo ningún carácter en 300 milisegundos, solo entonces esta API llamará Podemos cambiar estos milisegundos según nuestras necesidades, pero 300 milisegundos es el tiempo promedio, no demasiado lento o no demasiado rápido. Por lo tanto, el método de debouncing es muy útil si se quiere limitar el número de solicitudes API Entonces nuestra única tarea más se completa aquí. 176. Clasificación de lista de productos: Ahora vamos a completar nuestra última tarea, que es acortar nuestra lista de productos Así que cuando un componente de lista de productos, en primer lugar, vamos a definir una variable de estado para almacenar el valor de clasificación, y lo llamamos corto B y establecer corto B. Y como valor predeterminado, pasamos cadena vacía. Después de eso, crearemos otro estado de uso para almacenar los productos ordenados. Y como valor predeterminado, pasamos array vacío. Ahora en nuestra etiqueta de selección, primero, obtenemos nuestro valor de disparo actual. Entonces nos adherimos evento cambiado, y dentro de él, obtenemos la función de flecha de evento, y simplemente configuramos sort B a E valor de punto objetivo punto. Ahora vamos a establecer la funcionalidad de cortocircuito. Entonces, en nuestro proyecto anterior, filmamos nuestra matriz de películas usando la biblioteca de escritorio bajo. Ahora déjame mostrarte otra forma de agregar cortocircuitos sin usar ninguna biblioteca Así que antes que nada, aquí añadimos el uso Efecto hook and pass callback function En la matriz de dependencias, qué variable agregamos. Cuando nuestro tiro por valor va a cambiar, queremos acortar nuestros productos y también cuando nuestros datos cambian, entonces también queremos cortos de productos. Ahora escribamos lógica para cortocircuitos. En primer lugar, agregaremos la condición si los datos están disponibles y los productos de punto de datos están disponibles solo entonces nuestro cortocircuito se ejecutará Entonces dentro de esta condición, primero creamos la copia de nuestro array de productos. Por lo tanto, los productos Cons son iguales a la matriz, productos de punto de datos del operador de propagación. Ahora vamos a la condición I corto B es igual al precio descendente, y dentro de esto, usaremos el método sort. Entonces escribimos productos dot SHOT. Ahora, déjame explicarte tu método corto rápidamente. Entonces dentro de este método de clasificación, obtenemos dos parámetros A y B. A es el valor del primer ítem, y B es el valor del segundo ítem. No te preocupes por eso, mira esto. Para descender, tenemos que pasar aquí, B menos uno, y para ascender, tenemos que pasar A menos B, así de simple como eso. Ahora en nuestro caso, tenemos array de objetos. Aquí devolvemos B, que es nuestro segundo precio de artículo, menos A, que es nuestro primer artículo precio punto. Ahora, esto devolverá una matriz ordenada, simplemente la envolvemos con productos ordenados establecidos, y eso es todo. Ahora agreguemos otra condición. Entonces C ordenar por igual a precio ascendente. Y dentro de esto, copiaremos esta expresión y la pegaremos aquí y cambiaremos esta condición a al precio menos B punto precio. Ahora vamos a duplicar estas dos condiciones, y aquí cambiamos I a sf. Ahora en el lugar de precio descendente, pasamos tasa descendente. Y en nuestro método de clasificación, establecemos condición a B dot reviews, dot rate, menos A dot reviews dot rate. Ahora a continuación, tenemos tasa ascendente y cambiamos función comparada a A dot reviews dot rate menos B dot reviews dot rate. Ahora bien, si no tenemos este valor de clasificación para eso, agregamos, y simplemente configuramos productos ordenados en productos Ahora, en nuestro JSX, en el lugar de los productos de punto de datos, nosotros en productos ordenados dot MAP Guarda los cambios y echa un vistazo. Cambiar el tiro a precio de mayor a menor y ver nuestros productos ordenados por precio en orden descendente. Recuerda siempre para orden ascendente, tenemos que pasar función comparada a A menos B, y para descender, usamos B menos uno, y eso es todo. Así es como implementamos el cortocircuito sin ninguna biblioteca. Pero este método de clasificación sólo se ejecutará para los números. En nuestro proyecto anterior, tenemos que cortometrajes por fecha, y por eso usamos la biblioteca Low desk. 177. Sección 16: ganchos de rendimiento y gestión de código: Bienvenido a la sección 16 actualizada de los reactores definitivos. Algunos alumnos me están diciendo que explique algunos ganchos más reaccionan. Entonces en esta sección, veremos algunos ganchos de react mediante los cuales podrás mejorar el rendimiento de tu aplicación como usar memo y usar callback También veremos cuándo podemos usar estos ganchos y cuándo no podemos usarlos. Y después de estos dos ganchos, veremos otro gancho para la gestión de código, que es usar gancho reductor. Esta es la mini sección, así que empecemos rápidamente con esto. 178. Comprender el gancho Memo: Ahora vamos a entender qué es usar memo y cuándo lo necesitamos. Use memo es un aro que se utiliza para mejorar el rendimiento si tenemos cálculos costosos en nuestra aplicación de reacción. Ahora podría preguntarse ¿qué son los cálculos caros? A veces en nuestra aplicación, tenemos cálculos complejos como encontrar la suma de 1 millón de productos o encontrar el factorial o encontrar las Fibonakiseries, que son cálculos realmente grandes y puede llevar tiempo calcular En esta situación, podemos usar el gancho memo para reducir el tiempo de cálculo no deseado, y también podemos evitar renders innecesarios. Y por eso, podemos mejorar el rendimiento de nuestras aplicaciones. Déjame mostrarte esto prácticamente. Entonces, para demostrar estos ganchos, estoy usando un nuevo proyecto porque no queremos masificar nuestra aplicación de comercio electrónico. Y después de enterarnos de eso, implementaremos estos ganchos en nuestro proyecto. Entonces solo puedes ver estos y luego puedes implementarlos. Entonces aquí, creé una variable de estado llamada count. Y en JSX, creé dos botones, menos y más, y en el centro, mostramos conteo Ahora, supongamos que tenemos que encontrar la suma total de 1 millón de productos. Esto es sólo un ejemplo. No te preocupes por eso. Entonces para demostrarlo, creé esta costosa función de cálculo, que básicamente ejecuta este long for loop y devuelve la suma del número de conteo. Y en nuestro JSX, simplemente estamos mostrando este total. Déjame mostrarte cómo se ve en el navegador. Ver obtenemos aquí el total predeterminado. Ahora déjenme dar click en este botón más. Ver, está tardando de dos a 3 segundos por cálculo. Ahora bien esto está completamente bien porque necesitamos calcular algunos, pero aquí hay una sola cosa. Incluso si hacemos algo en este componente, este resultado se vuelve a calcular. Déjame mostrarte a lo que me refiero. Así que aquí en nuestro componente, creo una nueva variable de estado llamada dark theme y set dark theme. Como valor por defecto, paso false. No te preocupes, esto es solo una demo. No voy a implementar tema oscuro y claro aquí. Ahora, después de nuestro total, agrego uno du y dentro de este du agrego etiqueta y muestro aquí tema. Si el tema oscuro es verdadero, entonces mostramos el modo oscuro L Modo claro. Y después de eso, agrego un botón llamado togal theme. Y para este botón, agrego al hacer clic evento simple set tag theme to false dag theme. Ahora veamos cómo funciona nuestra aplicación. Entonces aquí, si aumentamos o disminuimos el conteo, está tardando de dos a 3 segundos, lo cual es bueno. Ahora, permítanme tratar de togal tema. ¿Ves que de nuevo está tardando dos a 3 segundos en cambiar el tema? Porque esa costosa función está llamando de nuevo. Podemos ver eso usando esta línea de consola. Entonces, ¿por qué está recalculando este total? Bien, porque cambiamos el estado del tema. Y sabemos que cuando cambiamos el estado del tema, todo este componente se vuelve a renderizar, y por eso este total vuelve a contar. Entonces la forma ideal es cuando cambiamos esta variable de conteo, solo entonces nuestra costosa función de cálculo debería ejecutarse. De lo contrario, ralentizará nuestra aplicación. Obtenemos el problema que es un rerender no deseado para el cálculo, y ahora podemos resolver esto Aquí, podemos usar el gancho de memo para detener los cálculos no deseados. Basta con ver esto y todas las dudas se aclararán. En el lugar de esta costosa función de cálculo, llamamos use memo hook y lo mismo que use effect hook para usar memo, también necesitamos pasar a argumentos en el primer parámetro callback función, que queremos ejecutar dentro de esta, queremos llamar a costosa función de cálculo Pasar nuestro conteo como argumento. En el segundo parámetro, tenemos que pasar array de dependencias en el que tenemos que pasar variables. Siempre que estas variables se modifiquen, entonces sólo esta función llamará y por eso paso aquí contar. Siempre que se modifique esta variable de conteo, esta costosa función de cálculo se ejecuta esta costosa función de cálculo y lo que sea que devolvamos de esta función, se agregará en nuestra variable total. Comprobemos que está funcionando o no. LCONplus S, está tardando de dos a 3 segundos. Pero ahora si hacemos clic en el tema togal, inmediatamente está cambiando esto Así es como usar Memo hook puede mejorar rendimiento de nuestra aplicación al detener cálculos no deseados. Ahora, déjeme hacerle una pregunta. ¿Cómo podemos lograr el mismo resultado sin usar usar el gancho Memo? Lo que quiero decir es que si nuestra variable de conteo se modifica, solo entonces esta costosa función de cálculo debería ejecutarse. Eso es que tenemos otro método, piénsalo. Derecha. Podemos lograr el mismo resultado con el uso efecto gancho. Aquí está la solución con el uso efecto gancho. Pero en esta implementación, tenemos que crear una variable de estado más llamada total y establecer total. Pero en el uso memo, no necesitamos crear una variable de estado separada. Este total funciona como variable de estado total. Entonces ese es un paso extra para esta implementación del efecto de uso. De lo contrario, ambos funcionan casi igual. Por lo tanto, es mejor usar el gancho memo para manejar cálculos complejos. 179. Ejercicio para SubTotal: Ahora es el momento de poco ejercicio. Entonces, en nuestro proyecto Cart wis, modifiquemos nuestra lógica de subtotal y utilicemos Memo Hook para eso Sé que puedes hacerlo muy fácilmente. Así que pruébalo y luego fue la solución. Ahora veamos la solución. Abra el componente de la página del carrito, en primer lugar, permítame eliminar esta variable de estado subtotal Simplemente en el lugar de este gancho de efecto de uso, agregaremos gancho de memo de uso. Niza auto entrada funciona. Ahora, en el lugar de establecer este total como subtotal, simplemente devolvemos ese total porque use memo siempre devuelve valor. ¿Te acuerdas? Y por fin, almacenemos este total en variable const subtotal Ahora vamos a eliminar el efecto de uso y usar la entrada de arriba. No lo necesitamos. Guarda los cambios y echa un vistazo. Ver, funciona igual que antes. Puedes ver lo sencillo que es usar el gancho Mamo. Ss use efecto, use memo toma dos argumentos. En primer lugar, la función de devolución de llamada, que siempre devuelve valor Y si no queremos devolver ningún valor de esta función de devolución de llamada, entonces ¿por qué usamos el gancho memo, verdad Y el segundo argumento es array de dependencias. Así que usa el gancho de memo cuando necesites manejar cálculos complejos. Ahora en la siguiente lección, te voy a mostrar gancho muy similar, que es usar callback hook, nos vemos en la siguiente lección 180. Comprender el uso del gancho de llamada: Ahora, aprendamos sobre el uso del gancho de devolución de llamada. Este gancho es muy similar al uso de gancho memo, lo que significa que se utiliza para mejorar el rendimiento de nuestra aplicación react y evitar re renders no deseados. La única diferencia entre use memo y use callback es use memo devuelve un valor y use callback devuelve una función. Eso es. Sé que esto es un poco confuso. Déjame mostrarte prácticamente. Entonces aquí, elimino nuestro código mammo de uso anterior y antes que nada, creo una variable de estado usando use state llamado counter y set counter, y valor predeterminado a uno Creamos otra variable de estado llamada set theme y como valor por defecto a light. Ahora en nuestro JSX, creo aquí como para etiquetar y simplemente mostrar aquí el tema y en el tema del soporte de Gully Solo ve esto y entenderás usar callback Hook. Ahora para togling el valor del tema, creamos un botón y pasamos aquí a ogle Para el evento onclick, agrego aquí la referencia de función al tema GL Ahora definamos esta función en la parte superior. Así Contras togal tema es igual a función de flecha y simplemente llamar establecer la función de tema y obtenemos aquí el valor anterior, función de flecha, y pasamos aquí condición Yo tema es igual a luz, luego lo cambiamos a oscuro si no lo cambiamos a luz. Ahora se podría pensar, por qué no estoy mostrando contador. Entonces para mostrar contador, creamos un nuevo componente en nuestra carpeta fuente llamado counter dot JSX Sé que tienes muchas preguntas, pero después de los resultados, entenderás lo que quiero mostrarte. Agreguemos código estándar usando RAFC y aquí simplemente devolvemos la etiqueta y mostramos aquí devolvemos la etiqueta y mostramos los corchetes del contador, el contador Para cambiar este contador, crearemos un botón llamado aumento. Para aumentar el contador, pasamos el evento click y simplemente pasamos aquí, incrementamos la función de contador. Ahora bien, ¿cómo podemos obtener el contador y aumentar la función del contador? Correcto, mediante el uso de utilería. Desestructuramos aquí, contador y aumentamos la función de contador Guarde los cambios y en el componente a, antes de que este tenga dos etiquetas, solo agregamos componente contador. Ahora tenemos que pasar dos apoyos contador a contador y aumentar contador para aumentar contador Y por fin, solo tenemos que definir esta función de contador de incremento. Entonces const aumentar el contador es igual a establecer el contador. Aquí obtenemos valor anterior, función de error, y simplemente anterior más uno. Guarda los cambios y echa un vistazo. Ver, cuando hacemos clic en el botón Aumentar, el contador está aumentando en uno, y cuando hacemos clic en el tema de Togal, el tema está cambiando Perfecto. Ahora aquí hay una cosa. En este componente contador, supongamos que estamos realizando alguna tarea, que toma 500 milisegundos, que es medio segundo Entonces para demostrar eso, agregamos aquí primero, consola dot log, counter component, re render. Y después de eso, dejemos el tiempo de inicio sea igual al punto de rendimiento ahora. Esta función de punto de rendimiento ahora devolverá el tallo de tiempo de alta resolución. Por ahora, no te preocupes por eso. Y simplemente adhiero bucle Y y le doy condición si punto de rendimiento ahora menos el tiempo de inicio es menor que 500, luego ejecuto este bucle. Esto simplemente agregará un retraso de 500 milisegundos. Guarda los cambios y echa un vistazo. Abre la consola y actualiza la página. Ahora haga clic en el botón Aumentar y vea aquí obtenemos mensaje de reender del componente del contador y también tenemos segundo retraso en el aumento del valor del contador, que queremos Perfecto. Pero aquí está el único problema. Incluso si hacemos clic en el tema de Toogle, también se renderiza el componente contador Después de 500 milisegundos de retraso, nuestro tema está cambiando Pero cambiar el tema no debe volver a renderizar el componente contador porque son dos estados diferentes. Entonces aquí, nuestro componente contador obtiene re renders no deseados y debido a esto, nuestra aplicación se ralentiza. ¿Puedes ver el problema de demostrar con más claridad aquí en el componente app, adherimos el nombre de la clase al tema Y en la parte superior, importé app dot archivo CSS. Guarda esto, y en el archivo CSS de punto de la app, primero, agrego DU y en el corchete C, relleno a 20 píxeles. Después de eso, agregamos estilo para la clase oscura. Y dentro de esto, agregamos color de fondo dos tiene 101010 y el color dos tiene FFE 400 Guarda los cambios y echa un vistazo. Haga clic en el tema Gal. A ver, podemos ver claramente el retraso. Así que tenemos que resolver este problema de re renders no deseados, y que podemos hacer con Nosotros callback Hook 181. Cómo usar el gancho useCallback en React: Ahora, déjame mostrarte cómo podemos usar Calbeck Hook para evitar re renders no deseados Entonces, como ya sabrás, use callback siempre devuelve una función Entonces primero, necesitamos identificar qué función causa re renders no deseados. ¿Se puede identificar bien. Se incrementa la función de contador porque cuando hacemos clic en el tema ontogal, nuestro componente de aplicación se vuelve a renderizar y debido a esta contrafunción aumentada Es por eso que nuestro componente de contador también se vuelve a ender. Pero nuestro estado temático no está relacionado con el componente de contador, entonces por qué necesitamos renderizar el componente de contador. En palabras simples, el componente contador debe volver renderizar solo cuando cambiamos nuestro estado de contador. Permítanme duplicar esta contrafunción incrementada. Comenta este. Se pueden ver claramente los cambios. Ahora usar la sintaxis del gancho de devolución de llamada es lo mismo que usar la sintaxis memo. Podemos envolver esta función de flecha con paréntesis y agregar aquí simplemente use callback Ahora en el segundo parámetro, necesitamos pasar array de dependencias. En esa matriz de dependencias qué variable vamos a añadir vamos a contrarrestar la variable. Son realmente inteligentes, buenos. Entonces, cuando la variable de contador cambie, sólo entonces esta función de contador incrementada la recreará. Ver los cambios y echar un vistazo. Haga clic en el tema Togal, y aún así recibe retraso Entonces, para completar esta lógica, tenemos que hacer una cosita. Entonces, en qué componente, queremos detener el renderizado no deseado, tenemos que envolver ese componente con la función mammo Entonces aquí en la parte superior, podemos importar mammo de la biblioteca react Y cuando exportamos ese componente en la parte inferior, simplemente envolvemos eso con la función mammo Ver los cambios y echar un vistazo. Haga clic en el tema Togal y vea que está funcionando muy bien sin que estemos recibiendo mensaje de reenvío. Si cambiamos nuestro contador, sólo entonces nuestro contador componente rerender Así es como evitaremos re renders no deseados. Ahora vamos a recapitular usar el gancho de devolución de llamada. Use el gancho de devolución de llamada se utiliza para evitar re renders no deseados y ayudarnos a mejorar el rendimiento de nuestra aplicación Podrías preguntar, ¿deberíamos envolver todas las funciones de nuestra aplicación con el gancho de devolución de llamada de uso La respuesta es no. Solo debemos envolver aquellas funciones que están causando retenedores y retrasos no deseados ¿Hay algún truco de atajo para encontrar ese tipo de funciones? La respuesta es sí. Hay un truco que uso cuando empecé a aprender a usar callback hook Siempre que pases función como props, y hay otro estado en ese componente, solo entonces tienes que usar usar callback Vamos a comprobar que este truco funciona para nuestro componente de aplicación o no. Entonces primer punto, la función pasa apoyos. En nuestro componente de aplicación, estamos pasando la función de contador de aumento como props a componente de contador Y segundo punto, debería haber otro estado en ese componente. Entonces aquí tenemos tema estado distinto al contra-estado. Entonces este truco está funcionando. Espero que entiendas usar callback hook use Mamo y use callback se usa para mejorar Cuando tu aplicación de reacción comienza a ralentizarse, puedes echar un vistazo a tu código y ver si puedes usar usar memo y usar callback o No es obligatorio, pero puedes utilizarlos cuando lo necesites. 182. Ejercicio para usar el gancho Callback: Ahora es el momento de practicar usar el gancho Calbeck. Entonces en nuestro proyecto Vacas, tienes que encontrar si hay algún componente en el que se necesite usar callback Si encuentras alguno, tienes que usar el gancho Calbeck en ese componente Así que dedique algún tiempo este ejercicio y recuerde esos dos puntos para identificar. La función pasa a través de sondeos al componente hijo, y debe haber una variable de estado. Así que pruébalo y después de esto, mira la solución. Entonces, en nuestra aplicación Carwis, primero verificamos nuestro componente raíz que es el componente de la aplicación Entonces aquí tenemos variables de estado, usuario y CAT también estamos pasando función de componente padre a componente hijo. Así que podemos implementar aquí, usar callback hook. Aquí en la función At to cart, simplemente envolvemos esta función callback con paréntesis y simplemente agregamos aquí, usamos callback y para segundo parámetro, agregamos array de dependencias y dentro de ella lo agregamos, derecho, agregamos derecho, agregamos Ahora para eliminado de la función de tarjeta, envolvemos su función callback con paréntesis y también en la parte superior, agregamos use callback hook y para segundo parámetro, agregamos array de independencia de estado de tarjeta Lo mismo hacemos para esta función de tarjeta de actualización, envuélvala con paréntesis y agregamos aquí usar callback y array de dependencia con estado de tarjeta Ahora para la función Get card, envolvemos su función de devolución de llamada con paréntesis y agregamos use callback hook Ahora lo que agregamos en esta matriz de dependencias, ¿deberíamos agregar estado de tarjeta? No, no necesitamos el estado de la tarjeta aquí porque si agregamos la matriz de independencia del estado de la tarjeta, entonces cuando cambie el estado de nuestra tarjeta, solo entonces esta función Get card se ejecutará, y no queremos eso Queremos que cuando se cambie el estado del usuario, luego obtenemos los datos de la tarjeta. Entonces agregamos aquí el estado del usuario, y así es como hay que pensar agregar dependencia. Y eso es todo. Agregamos use el gancho de devolución de llamada en nuestro componente de aplicación. Guarde este archivo, y tenemos que envolver todos los componentes que están usando esta función por la función mammo Rápidamente envolví estos componentes con función mammo. Guarda los cambios y echa un vistazo. Ver, funciona igual que antes. Usando use memo y use callback hook, podemos mejorar el rendimiento de nuestra aplicación react Ahora se podría decir, no vemos la mejora del rendimiento. Sí, actualmente se puede ver eso. Pero cuando nuestra aplicación se vuelve grande, en ese momento, estos ganchos son realmente útiles para mejorar el rendimiento. Así es como puedes usar memo y usar el gancho de devolución de llamada. Ahora en nuestra aplicación, encuentras cualquier lugar donde puedas agregar use callback hook, luego tienes que implementar use callback en ese Este es un pequeño ejercicio más para ti. Consulta los componentes de nuestra aplicación y si encuentras el lugar, entonces puedes agregar comando en la sección de preguntas y respuestas Otros alumnos también obtendrán ese componente para actualizarlo. Su en la siguiente lección. 183. Aguja de crochet useReducer: Ahora, veamos otro gancho de reacción, que es usar gancho reductor. Así que el uso del gancho reductor se utiliza para organizar el estado complejo y su método. En palabras simples, el uso reductor se utiliza para hacer nuestro componente más limpio. Sé que esto es un poco confuso, así que déjame explicarte eso usando un simple ejemplo. Así que imagina que tenemos una pequeña aplicación en la que tenemos un conteo, y tenemos tres botones, aumentar, disminuir y reiniciar. Cuando hacemos clic en aumentar, el recuento aumenta en uno. Si hacemos clic en disminuir, contar disminuir en uno, y si hacemos clic en Restablecer, entonces nuestro conteo se restablece a su valor predeterminado, que es cero. Su código se ve así. En la parte superior, tenemos estado de conteo usando nosotros gancho de estado con valor predeterminado cero. Ahora para este estado, hay tres métodos, o podemos decir que hay tres funciones. Aumente el conteo, disminuya el recuento y restablezca el recuento. Tan simple como eso. Ahora bien este código está un poco desorganizado, así que podemos organizar este código usando el gancho reductor de uso Comento este código y llamo aquí usar gancho reductor. Ahora, este gancho acepta dos argumentos. El primero es la función reductora, que es la función que decide a qué métodos queremos llamar, como aumentar o disminuir o restablecer. segundo argumento es el valor por defecto de nuestro estado, que es cero, ¿verdad? Ahora aquí, también podemos agregar un argumento más, que se utiliza para retrasar para inicializar el valor del estado Pero por lo general, no lo usamos. Entonces por ahora, no queremos esto. Ahora, igual que nuestro gancho de estado de uso. Este gancho reductor de uso también devuelve array, que tiene dos ítems, estado actual y una función mediante la cual podemos actualizar el estado. Entonces C primero obtenemos nuestro conteo estatal. En segundo lugar, la función por estado actualizador, y la llamamos como función de despacho Despacho significa enviar algo. Es el nombre más común por reductor de uso. Si quieres tomar otro nombre, también puedes hacerlo. Depende totalmente de ti. Ahora, definamos nuestra función reductoras. Fuera de nuestra función componente, definimos una nueva función llamada reductor, que es la parte más importante del uso del gancho reductor. Entonces dentro de esta función, escribiremos nuestra lógica de todo para nuestro reductor de uso. Sé que esto es un poco confuso, pero después de completar esta lección, todas tus dudas se aclararán. Por lo que esta función reductor de uso tiene dos parámetros. 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, lo que significa qué acción tenemos que realizar. Por ejemplo, aumentar el conteo, disminuir el conteo, restablecer, etcétera. Ahora, esta función devolverá el estado actualizado de nuestro estado de conteo. Entonces por ahora, solo estoy regresando estado, que es el valor de conteo actual más uno. Ahora para llamar a esta función, utilizamos esta función de despacho. Entonces aquí, en función de conteo de aumento, solo llamo a la función de despacho y no paso nada dentro de ella. Además, necesito comentar esta línea de conteo establecida. Ahora veamos qué obtenemos. Así que guarda los cambios y echa un vistazo. Da click en el botón más y ver contador va aumentando en uno porque en función reductor, volvemos aquí estado más uno. Si cambiamos esto a estado menos uno, entonces disminuye el valor de conteo. Cuando llamamos a esta función de despacho, esta función de devolución de llamada se ejecutará y cualquiera que sea el valor que devolvamos de esta función, ese valor se convierte en el valor del estado actual Tan simple como eso. Ahora podría preguntarse, ¿cómo podemos realizar otras acciones como aumentar o disminuir para diferentes funciones? Para ello, podemos pasar objeto en esta función de despacho. En este objeto, agregamos una propiedad llamada type, y simplemente pasamos aquí tipo para aumentar en todo el capital. No es obligatorio todo el capital, pero es mejor práctica resaltar el tipo de acción. Ahora al usar este tipo, nuestra función reductora sabrá qué tarea queremos realizar. Aquí, podemos poner condición de acuerdo a este tipo. Podemos usar I s o también podemos usar caja de interruptor. Me gusta usar switch case, switch, y aquí pasamos nuestra propiedad tipo. Ahora la pregunta es, ¿cómo podemos obtener la propiedad tipo? Obtenemos propiedad type usando este parámetro de acción. Aquí, simplemente escribimos acción, que es este tipo de objeto y punto. Ahora, dentro de los corchetes, agregamos caso, aumento, dos puntos, y aquí volvemos estado más uno. Ahora agregamos otro caso, que es disminución, colon, y aquí ¿qué regresamos? Wight. Regresamos estado menos uno. A continuación, agregamos un caso más que se restablece. Colón y aquí volvemos cero. Y por seguridad, agregamos aquí caso por defecto, y simplemente regresamos aquí estado como es. Si por error, agregamos otro tipo de acción, entonces eso no causará error. Así que la función reductor está lista. Ahora solo necesitamos despachar diferente tipo de acción. Copie esta función de despacho y simplemente agréguelo en función de conteo de disminución y cambie este tipo para disminuir. A continuación para reset, cambiamos este tipo a reset. Guarda los cambios y echa un vistazo. Ver, nuestra aplicación funciona igual que antes. Ya puedes ver nuestro código se ve un poco más organizado. Mediante el uso de reductor de usuario, podemos organizar nuestro código. Recapitulemos este gancho reductor de uso. El reductor de uso acepta dos argumentos. Función reductora que simplemente maneja qué tipo de acciones estamos realizando y qué hace. Y el segundo argumento es el valor por defecto. Ahora, igual que el estado de uso, el reductor de uso también devuelve matriz con dos elementos, estado y función de despacho. Este estado es el valor del estado actual, y usando esta función de despacho, podemos especificar el tipo de acción. Sea cual sea el tipo que pasemos de aquí, ejecutará su caso en nuestro switch case, simple como eso. Entonces usar reductor no es nada. Solo haz que nuestro código sea más organizado. Si estás satisfecho con tu código actual, entonces no aplicas forzosamente reductor de uso para ese componente Depende totalmente de ti. No te confundas con eso. Ahora se podría decir, al usar esta función reductora, nuestro código se ve más feo, y eso es cierto. La solución es que podemos definir esta función reductora en otro archivo y simplemente importar esa función aquí en uso gancho reductor. En nuestra carpeta fuente, creamos una nueva carpeta llamada reductores dentro de esta carpeta, creamos un nuevo archivo llamado count reductor dot js Ahora, a partir de un componente, cortamos esta función reductora y la pegamos en archivo reductor de conteo. Además, podemos renombrar esta staate para contar. Creo que esto tiene más sentido y también cambiar el nombre de la función para contar reductor. Y luego simplemente exportamos reductor de conteo predeterminado. Guarda los cambios, y en nuestro componente app en el lugar de este reductor, agregamos reductor de conteo. Guarda los cambios y mira ahora nuestro código se ve más limpio. Así es como puedes hacer que tu componente esté limpio. 184. Ejercicio para reductor: Ahora es el momento de poco ejercicio. En nuestro proyecto Card wise, tenemos nuestro componente de aplicación en el que administramos diferentes métodos para modificar el estado de la tarjeta. Por lo que hay que implementar reductor de uso para el estado de la tarjeta. Además, la pista está en función reductor, solo necesitamos aplicar la lógica de actualización de estado, no llamando a una API. Debe estar separado. Aquí está el caso uno para el estado de la tarjeta. A partir de este ejemplo, se pueden crear otros casos. Esto va a ser divertido, pasar algún tiempo con este ejercicio y luego ver la solución. 185. Acciones complejas para reductor: Espero que resuelvas este ejercicio, o al menos intentes resolverlo. Porque usar usar gancho reductor en acciones complejas como Addo cart o quitar tarjeta o actualizar tarjeta es un poco confuso Si te confundes mucho, entonces en mi sugerencia, no implementes usar gancho reductor porque al final del día, tienes que trabajar en tu código y usar reductor es solo para organizar código. Se puede dejar usar gancho reductor. No es obligatorio, pero muchos alumnos quieren aprender a usar gancho reductor. Por eso agrego esta lección. Ahora veamos la solución para esto. En nuestra carpeta fuente, creamos una nueva carpeta llamada reductores, y dentro de esta carpeta, creamos un nuevo archivo llamado reductor de tarjetas punto js Ahora dentro de este archivo, creamos una nueva función, card reductor, igual a aquí obtenemos dos parámetros. ¿Sabes cuáles son los que escriben? Primero, obtenemos estado, o podemos llamar aquí carrito, y el segundo es acción, que es el objeto que pasamos en función de despacho. Ahora dentro de esta función, tenemos que escribir el caso del switch. Entonces cambia, y aquí agregamos acción tipo punto, Cali Brackets. Funda para Agregar al Carrito. Columna, vayamos al componente de la aplicación, y simplemente cortemos esta lógica para cambio de etapa antes de llamar a la API de head to cart y pegarla en el caso add to cart. Ahora para formatear este código, déjame guardar este bien. Ahora aquí al final, necesitamos simplemente devolver estado actualizado. Semove esta función de tarjeta de conjunto y devolvemos esta tarjeta actualizada Ahora vamos a exportar este reductor de aquí. Así exportar default, reductor de tarjetas. Dice los cambios, y en nuestro componente app en el lugar de este aro de fecha de uso escribimos reductor de uso, y antes que nada, queremos aquí función reductora. Así que reductor de tarjetas, buena entrada automática funciona. Y en el segundo parámetro, teníamos valor predeterminado de nuestra tarjeta, que es array vacío. Ahora usa reductor devoluciones a artículos, así podemos desestructurar aquí tarjeta y tarjeta de despacho Ahora, en nuestra función cabeza a tarjeta, llamamos función de tarjeta de despacho, y dentro de ella, pasamos objeto, y la primera propiedad es tipo, que es cabeza a tarjeta. Asegúrese de escribir la misma cadena que usa en la caja del interruptor. Ahora aquí en nuestra caja del interruptor, no tenemos este producto y cantidad. Entonces, ¿cómo podemos conseguir eso aquí? Derecha. Igual que obtenemos este tipo. Entonces, en nuestra función de despacho, pasamos otra propiedad llamada carga útil. En esta carga útil, podemos enviar todos los datos externos que queremos enviar en función reductor. Este es el nombre, tipo y carga útil comunes de las propiedades. Puedes cambiarlo si quieres, pero asegúrate de tener que usar ese nombre de propiedad en la función reductora. Pasamos aquí objeto y queremos enviar producto como producto y cantidad como cantidad. O incluso podemos simplificarlo así. Guarde este archivo, y en nuestra función de reductor de carrito, aquí obtenemos contras Cli brackets, producto, cantidad es igual a la acción punto de carga útil Salva a las pandillas y eche un vistazo. Oh, llegamos aquí error. Déjame abrir la consola. Ver, aquí conseguimos establecer la función de tarjeta no está definida. Entonces, en nuestro componente de aplicación en nuestra función Getcard, no podemos usar la función set card Entonces necesitamos un estuche para la función Get card. Entonces llamamos a la función de tarjeta de despacho y pasamos su tipo a Obtener tarjeta. Y en la carga útil, ¿qué queremos enviar escribir? Queremos enviar objeto con productos a datos de punto de respuesta. Guarde este archivo, y en nuestra función reductora, definimos otro caso, tarjeta cat, columna, y dentro de este, simplemente devolvemos productos de punto de carga útil punto de acción. Guarde los cambios y eche un vistazo. Nuevamente, obtenemos aquí error. Creo que todavía hay función de tarjeta SAT. Vea aquí estamos pasando función set card en el contexto de la tarjeta. Guarda los cambios y echa un vistazo. Ver, aquí obtenemos los datos de nuestra tarjeta. Entonces nuestro reductor está funcionando bien. Ahora aquí necesitamos un caso más porque si nuestra API At to cart obtiene error, entonces también tenemos que establecer nuestra tarjeta al estado anterior. Entonces aquí llamamos a función de tarjeta de despacho y pasamos aquí tipo para revertir tarjeta Y en carga útil, pasamos objeto con propiedad de tarjeta. Guarda esto y en la función reductor en la parte inferior, agregamos otro estuche para revertir carrito y simplemente devolvemos aquí acción carga útil tarjeta de punto Guarde esto y funcionará. Ahora vamos a adt caso para quitar la función de tarjeta frontal. En esta función, cortamos esta lógica hasta establecer la tarjeta. Y en nuestra función reductora, agregamos otra funda remove de tarjeta. Y aquí, simplemente pasamos el código. Ahora en el lugar de set card, podemos agregar carta nueva escrita, pero aquí está la única cosa. Necesitamos aquí el ID del producto que los usuarios quieren eliminar. Así que podemos agregar aquí acción punto carga útil punto ID. Esto. Y en nuestro componente de aplicación, aquí llamamos función de tarjeta de despacho y pasamos aquí objeto con tipo para eliminar de la tarjeta y agregar otra carga útil de propiedad al objeto con propiedad ID. En el método de caché, queremos revertir el estado de la tarjeta. Simplemente podemos copiar esta función de tarjeta de despacho para revertirla y pegarla dentro del método de caché Además, vamos a reemplazar esto en todos los métodos de caché. Bueno. Ahora aquí, no necesitamos esta vieja variable de tarjeta, así que podemos eliminarla. Ahora vamos a establecer nuestro último caso, que es para tarjeta de actualización. Aquí, podemos implementar dos soluciones. Podemos crear cajas separadas o aumentar la cantidad y disminuir la cantidad. O simplemente podemos hacer eso en un solo caso. Pero en estos dos casos, nos confundimos mucho. Omitir estos SA es, o simplemente podemos hacer esto. En el lugar de esta función de tarjeta establecida, simplemente copiamos esta función de tarjeta de despacho con una tarjeta tipo cat, que reemplazará el estado actual de la tarjeta con la tarjeta actualizada. Aquí pegamos esto y reemplazamos estos datos de punto de respuesta a la tarjeta actualizada. Ahora, duplique esto y también hacemos lo mismo para disminuir. Guarda los cambios y echa un vistazo. Ver, agregar, eliminar y actualizar todas las funcionalidades está funcionando bien. Ahora, tienes que decidir que necesitas usar reductor o no para organizar tu código. En mi humilde opinión, puedes usar gancho reductor para acciones poco menos complejas, pero para acciones complejas más grandes, no sugiero usar gancho reductor. La elección es suya. Si estás confundido incluso del uno al 2%, entonces no uses el gancho reductor para esa acción. Está completamente bien. Esta es la sección actualizada para el curso ultimate react y la próxima actualización está a punto de reaccionar query. Estén atentos a estas actualizaciones. Espero que disfrutes de este curso. Estén atentos a estas actualizaciones. 186. Sección 17 Domina React-Query: Bienvenido a la sección 17 del curso definitivo de Rac. En esta sección, vamos a aprender la mejor biblioteca para administrar y capturar los datos en la aplicación react, que es Reac Query Al implementar la consulta de lectura en nuestro proyecto, el rendimiento de nuestra aplicación aumentará tanto. Cuando decido crear este curso de reaccionar, para ser honesto, no conozco todas las características de consulta de rea. Cuando pido a los alumnos la sugerencia de tema, tema más solicitado fue debe agregar una consulta rea. Entonces traté de investigar sobre Raquery y realmente me ha asombrado lo útil que es esta biblioteca Si piensas lo mismo que yo, entonces avísame en la sección de preguntas y respuestas Me encanta oír hablar de eso. Entonces aquí está la comparación. Les estoy mostrando a ambos sin Raquery y con reaquery cómo mejora nuestra aplicación Entonces, como puede ver, la implementación de reaquery es realmente buena y mejor para nuestra Entonces, sin perder el tiempo preciso, aprendamos la reaquery de una manera muy sencilla y fácil 187. Qué es React Query y por qué lo necesitamos: Ahora antes de comenzar a aprender rea query, primero entendamos qué es consulta rea y lo más importante, por qué la necesitamos. Así que re query es una biblioteca que solía administrar y almacenar en caché los datos de nuestra solicitud API. Al usar la biblioteca Requeri, podemos obtener, actualizar y almacenar en caché fácilmente nuestros datos, que obtenemos de Ahora bien, aquí entendemos fetch and update, pero podrías pensar, qué es cache Entonces, la caché es una tienda que puede contener los datos de recuperación en la memoria Actúa como un almacenamiento temporal para nuestros datos que devolvemos de la solicitud de API. Déjame explicarte con el ejemplo. Así que en nuestra tarjeta Wish project, estamos recuperando toda la lista de productos aquí Ahora bien, estos todos los datos de los productos almacenados en el almacenamiento temporal llamado como caso. Ahora bien, si vamos a otra página como la página de la tarjeta, y de nuevo, volvemos a nuestra página de productos, entonces obtenemos esos datos inmediatamente del caso. Entonces, si implementamos caché en nuestra aplicación, entonces la experiencia del usuario aumentará inmensamente Y esto no sólo es suficiente. Las otras características de re aquery es que obtenemos la función de cancelación de solicitud en el montaje de componentes Además, obtenemos reintentos múltiples veces, lo que significa que si nuestra conexión de red se ha ido, o por alguna razón, nuestra solicitud falla, entonces la consulta puede reintentar varias veces Además, puedes desactivar esta función si quieres. Depende totalmente de ti. A continuación, también obtenemos actualización automática en el intervalo de tiempo. Al igual que podemos configurar el temporizador, por ejemplo, 2 minutos para la actualización automática. En cada 2 minutos, obtenemos datos del servidor si el usuario aún está en esa página. Por supuesto, podemos implementar estas características escribiendo más código, pero con requery, podemos implementar estas características en muy menos código Si quieres mejorar la experiencia de usuario de tu aplicación, entonces para administrar y almacenar datos desde API, podemos usar la biblioteca de consultas Rea Estoy seriamente enamorada de esta biblioteca. Los desarrolladores piensan que Raquery es complejo, pero créeme, no lo es Es solo cuestión de tiempo y práctica. Entonces para hacer Raquery simple, divido la sección de Raquery en En primer lugar, aprenderemos todos los conceptos sobre otro proyecto, y luego en la siguiente sección, haremos ejercicio prácticamente implementando esas características en nuestro proyecto cartwish Entonces comencemos a aprender Raquery. 188. Configurar React Query en nuestro proyecto: Ahora, vamos a configurar Requeri en nuestro proyecto. Entonces, para aprender Raquery, no vamos a estropear nuestro proyecto Catwish En lugar de eso, aprenderemos todos los conceptos de nuestro proyecto de enrutamiento anterior, y luego después de aprender todos los conceptos, actualizaremos nuestro proyecto Catwish como ejercicio Aquí, usamos nuestro antiguo proyecto de enrutamiento en el que aprendemos a enrutar y llamar a API en la Sección ocho y nueve. No encuentras tu proyecto, entonces no te preocupes dirígete a carpeta Recursos y obtienes esta plantilla de re aquery, que es el mismo proyecto Entonces abramos este proyecto en código VS. Bonito. Primero, instalaremos todos los paquetes con NPM install. Bueno. Ahora, agreguemos rápidamente una consulta de rea en nuestro proyecto. Entonces aquí en nuestro terminal, escribimos NPM, yo, al ritmo, consulta de diez SCR Y si queremos instalar exactamente la misma versión, entonces escribe a la velocidad 0.12 0.2, y pulsa Enter Bueno. Ahora minimice este terminal y abra el archivo principal punto jsx Aquí, tenemos que envolver nuestra aplicación con un componente de consulta rea, igual que hicimos en Doom Rag Router Entonces aquí importamos. Primero necesitamos cliente de consulta de diez Stack Raquery y segundo, necesitamos proveedor de cliente de consulta Ahora, después de nuestras importaciones, creamos una nueva instancia llamada query client equals to new query client. Ahora, ¿puedes adivinar con qué componente envolvemos nuestra aplicación con proveedor cliente de consulta porque ese es el que queda. Eres inteligente. Ahora simplemente agregamos aquí atributo de cliente, y dentro de este, pasamos nuestro cliente de consulta instantánea, que acabamos de crear aquí, y eso es todo. Agregamos con éxito la consulta de rea en nuestro proyecto. Crees que tienes que recordar este proceso, entonces no te preocupes. Puedes ver este proceso en la documentación de consulta de rea. Ahora en la siguiente lección, vamos a buscar datos usando Raquery 189. Recupera datos de vendedores: Ahora, vamos a buscar datos usando rea query. Así que en re query, tenemos nosotros query hook, que se utiliza para recuperar y gestionar los datos de las APIs Así que aquí en nuestro componente de vendedor, aquí llamamos U Query hook from ten Stack rea query library. Ahora en este gancho de consulta us, tenemos que pasar objeto de configuración con dos propiedades. El primero es para la clave de consulta, que es el identificador único para nuestra consulta. Principalmente, se utiliza para el almacenamiento en caché. Así que cada vez que recuperamos un dato del back end como la información del vendedor, esos datos se almacenaron en la caché con esta clave, y en el futuro, será accesible a través de esta clave. Tenemos que establecer nuestra clave para array, que puede tener uno o más valores. La mayoría de las veces, el primer valor es una cadena, que se utiliza para describir el tipo de datos que estamos almacenando en la caché. En este caso, queremos datos de vendedores. Así que aquí podemos pasar como otras cadenas para vendedores o incluso podemos pasar objeto como página a uno, etcétera Por ahora, no te preocupes por eso. Veremos esto en detalle en la lección de adivinanzas. Por ahora, centrémonos en la obtención de datos. Eliminemos estos otros valores. Ahora la segunda propiedad es query function, que es la función que utilizamos para recuperar datos del back end Tenga en cuenta que esta función siempre debe devolver promesa que puede devolver datos o error. Entonces aquí pasamos la función de error y aquí a partir de este efecto de uso, copiamos este método API client dot Gad, que es nuestra variable Axios y simplemente la pegamos Ahora bien, podrías preguntar, ¿deberíamos usar siempre Axios para la función de consulta Y la respuesta es no. Podemos usar Patch API o cualquier biblioteca para hacer STTPRquest A Raquery no le importa cómo estamos haciendo STDPRquest. Solo le importa administrar y almacenar datos en caché, pero asegúrese de que devuelva un dato o error, solo que esa es la condición Ahora aquí, sabemos que este punto cliente API Get Method devolverá el objeto response, pero no queremos almacenar el objeto de respuesta completa en la caché. Solo queremos almacenar los datos reales que obtenemos del back end. Entonces agregamos aquí entonces método, y en eso, obtenemos respuesta, y luego simplemente devolvemos datos de punto de respuesta. Y en estos datos, obtenemos los detalles de nuestros vendedores simples como eso. Ahora aquí, también podemos implementar esta lógica fuera de la consulta de uso. Entonces en la parte superior, definimos la función llamada vendedores gordos, y aquí agregamos nuestra función de flecha. Y la propiedad de función de consulta, solo pasamos referencia de función. Entonces en el tiempo de ejecución rea query llamamos a esta función. Y cuando esta promesa se resuelva, obtenemos una matriz de datos de vendedores, y luego esa matriz se almacena en la caché con esta clave. ¿Cómo podemos acceder a los datos de este gancho de consulta de uso? Esta consulta de uso devolverá objeto de par de propiedades como datos, error, carga, estado, etcétera Entonces aquí, podemos reestructurar ese objeto y obtener aquí los datos Con esta consulta de uso, ahora no necesitamos crear los errores de los vendedores y las variables de estado de carga iss. Obtendremos todas las variables de esta consulta de uso. Así podemos eliminar las variables de estado. Además, no necesitamos este efecto de uso. Y en nuestro JSX, por ahora, comentemos esta declaración de carga de facilidad y también declaración de error Ahora, aquí en el lugar de estos vendedores, podemos escribir mapa de puntos de datos, o incluso podemos cambiar el nombre de nuestro objeto de datos y darle un nombre vendedores. Creo que eso es más exacto. Guarde los cambios y ejecutemos nuestra aplicación. Entonces en terminal, NPM ejecutar DV abre este enlace. Ahora navega a la página de administración y abre la página del vendedor. Aquí podemos ver que estamos recibiendo error. Así que vamos a abrir Console y podemos ver no se pueden leer las propiedades de undefined. Entonces, ¿por qué sucede eso? Porque si bien no obtenemos datos del back end, por defecto, nuestros datos se establecen en nulos. Entonces para resolver esto, aquí tenemos que agregar el signo de interrogación, que es el encadenamiento opcional Guarda los cambios y echa un vistazo. Ver, aquí obtenemos los datos de nuestro vendedor. Ahora actualiza la página. Ver, estamos casi de inmediato obtener nuestros datos. Esto se debe al almacenamiento en caché. Déjame mostrarte eso claramente. Da clic en esta página de ventas, y cuando hacemos clic en la página de vendedores, aquí podemos ver directamente estos datos sin demora alguna. Esto es el almacenamiento en caché Entonces con la implementación de requery, obtenemos reintentos automaticos, lo que significa que si algo sucede y nuestras llamadas a la API fallan, entonces la requery reintentará un Después de eso, obtenemos la actualización automática, por lo que podemos establecer la cantidad de tiempo y después de ese tiempo, nuestra consulta obtiene la actualización automática. característica más importante es el almacenamiento en caché, que significa que la primera vez que obtenemos datos, lo que significa que la primera vez que obtenemos datos, se almacenan en la caché, y luego si la próxima vez obtenemos el mismo dato, si está disponible en caché, entonces no vamos al servidor En lugar de eso, lo obtenemos directamente de la caché y esto mejorará enormemente el rendimiento de nuestra aplicación Ahora en la siguiente lección, manejaremos errores y cargando en consulta rea. 190. Manejo y carga de errores: Ahora, veamos el manejo de errores con Raquery. Entonces como sabemos, nuestra reaquery devuelve objeto. Y en ese objeto, también obtenemos propiedad error. Entonces llegamos aquí error. Ahora en nuestro JSX, eliminemos el comentario de esta declaración de error Y en el lugar de los errores, agregamos error, y dentro de nuestra etiqueta de énfasis, imprimimos mensaje de punto de error. Ahora hagamos un error tipográfico en nuestro EPI y apuntemos, guardemos los cambios y echemos un vistazo Refresca la página, y en la consola, podemos ver que Raquery está reintentando varias veces para recuperar datos del back-end debido a su función de reintento automático Y después de algún tiempo, obtenemos error. Ahora vamos a mostrar el indicador de carga. Entonces, a medida que obtenemos propiedad de error, también obtenemos facilidad de carga de propiedad de nuestro gancho de consulta de uso. Y en el JSX, solo necesitamos eliminar este comentario y mostrar nuestro cargador Guarda los cambios y echa un vistazo. Aquí, podemos ver nuestro indicador de carga también. Así es como manejamos el error y la carga en consulta rea. Ahora bien, ¿recuerdas en nuestro proyecto cartwish, hemos creado un tipo similar de nuestro gancho personalizado, que son los datos utilizados Pero esta consulta de uso tiene muchas más características que nuestro gancho de datos usado. Por lo que haremos lo que sea mejor para nuestra aplicación. No te enredes con tu propio código. Como ingeniero de software profesional o desarrollador web, tu objetivo más importante es hacer que tu aplicación funcione mejor. Y para eso, haremos lo que sea necesario. 191. Crea un gancho personalizado con React Query: Ahora, en nuestra implementación actual, podemos separar nuestro gancho de consulta us de nuestro componente. Puedes usar este enfoque, o puedes seguir con la implementación actual. La elección es suya. Depende totalmente de ti. Entonces en nuestra carpeta fuente, creamos una nueva carpeta llamada hooks, y en esa carpeta, creamos un nuevo archivo llamado Uellers dot JS Ahora, antes que nada, aquí creamos una función llamada nosotros vendedores función de error, y al final, exportar por defecto nosotros vendedores función. Ahora, del componente de nuestro vendedor, primero cortamos la función de nuestro vendedor gordo y la pegamos en nuestro gancho personalizado. Ahora otra vez, de vuelta al componente del vendedor. A partir de aquí, nos cortamos consulta con este objeto de configuración. Y en nuestro archivo de vendedores de Estados Unidos, simplemente devolvemos aquí consulta de uso. Ahora vamos a importar cliente API, eliminar este error tipográfico, y también vamos a importar US query de TNStekrQuery Guarde los cambios. Y en el componente del vendedor, aquí solo nos llamamos vendedores gancho personalizado. Así que ahora en cualquier otro componente, si necesitamos recuperar los datos de los vendedores, solo necesitamos llamar a este uso vendedores gancho Eliminemos esto todas las importaciones no deseadas, guardemos los cambios y echemos un vistazo. Ver, ahora nuestro código se ve un poco más limpio. 192. Agrega DevTools en Query en React: Una de las formas más fáciles de aprender cómo funciona Raquery es mediante el uso de Raquery DevTools. Agreguemos las herramientas Raquery Dev en nuestra aplicación. Así que abre terminal y escribe NPM, yo al directo diez Sag re aquari DevTools, att 5.13 Bueno, minimizamos este terminal, y en nuestro archivo GSX punto principal, en la parte superior, importamos un componente llamado re aquery Ahora tenemos que agregar este componente después de nuestro componente de aplicación, Raquery DevTools y asegurarnos de agregarlo dentro de este componente Raquery DevTools y asegurarnos proveedor cliente de consulta De lo contrario, no va a funcionar, y eso es todo. Guarda los cambios y echa un vistazo. Ver, en la esquina inferior derecha, obtenemos un hermoso logo. Obtienes otro logo, entonces no te preocupes. Esta biblioteca cambia el logotipo de sus botones muchas veces por diversión. Simplemente haga clic en eso y obtenemos la herramienta React query Dav. Aquí, obtenemos este tipo de estructura. No te preocupes. Es bastante simple y útil. Aquí podemos ver que obtenemos el listado de consulta, que es la API de nuestro vendedor. Haga clic en esto. Ahora en el lado derecho, podemos ver aquí obtenemos nuestra clave de consulta. Después de eso, obtenemos observadores que es el número de componentes que están utilizando la consulta de este vendedor. Actualmente solo un componente está utilizando esta consulta de vendedores. Supongamos que esta misma consulta estamos usando en tres componentes, entonces los recuentos de observadores mostrarán tres. A continuación, tenemos la última hora de actualización, que es la última vez que se obtiene la consulta. Ahora después de eso, tenemos un par de acciones útiles como refetch, invalidate, reset, remove trigger load trigger error Para que podamos activar la carga y ver. Aquí obtenemos nuestro indicador de carga. Ahora vamos a restaurar la carga, y desencadenamos el error. Ver, obtenemos nuestro error de muestra. Ahora, después de nuestras acciones, tenemos explorador de datos, que es lo que devuelve la consulta, y esos son los datos de nuestro vendedor, y también podemos ver sus propiedades. Ahora por fin, tenemos explorador de consultas. Aquí podemos ver todas las propiedades y detalles sobre nuestra consulta. Más comúnmente, no estamos usando esta sección, pero algunas propiedades son útiles. Como aquí podemos ver nuestro tiempo GC, lo que significa tiempo de recolección de basura. O podemos decir que el tiempo de caso se establece en 300 K, que es el valor de minisegundos, y es igual a 5 minutos Entonces, si nuestro componente se elimina de nuestra pantalla, lo que significa que tenemos cero observadores y cuando la consulta tiene cero observadores, después de 5 minutos esos datos se eliminarán de la caché. Sí podemos cambiar estas propiedades, y lo veremos en la siguiente lección. Además, mini tip desde aquí, podemos cambiar el tema de nuestras herramientas Dev. Me gusta el tema oscuro, así que estoy seleccionando oscuro. 193. Personaliza nuestras propiedades de consulta en React: Actualmente, en las consultas rea, tenemos pocos ajustes predeterminados que funcionan bien en la mayoría de las situaciones, pero también podemos personalizarlos para todas las consultas o para una consulta individual. Por ejemplo, podemos cambiar nuestro valor de tiempo GC. Entonces déjame mostrarte cómo podemos hacer eso. Así que en nuestro archivo principal punto jsx, aquí en este cliente de consulta, podemos pasar objeto de configuración En ese objeto, tenemos la propiedad llamada default options, y también podemos establecer a object, y en ese objeto, tenemos queries property, que también es objeto. Ahora, en este objeto, podemos pasar valores predeterminados para nuestras propiedades de consulta. Entonces aquí pasamos CT y podemos fijarlo a 10 minutos. Aquí, tenemos que pasar valor en milisegundos. Así que diez en 60 segundos en 100 milisegundos. O podemos pasar directamente 600 K o podemos escribir aquí seis doble cero, subrayado cero En JavaScript, podemos agregar subrayado en el lugar de comas en dígitos Guarda los cambios y echa un vistazo. En nuestras herramientas de desarrollo en la parte inferior, podemos ver que el tiempo C se cambia a 600 k milisegundos, lo que es igual a 10 minutos Ahora también podemos cambiar el número de veces que nuestra consulta se reintenta Entonces, si nuestra conexión de usuario pierde o tenemos errores tipográficos en nuestra consulta, entonces rea query reintenta un par de veces Por defecto, el recuento de reintentos se establece en tres, pero podemos cambiarlo a partir de aquí. Digamos cinco. Guarda este archivo, y en nuestro uso gancho de vendedor, adherimos error tipográfico en nuestro endpoint, guardamos los cambios y echamos un vistazo, abrimos NetworkTab y actualizamos la página Aquí, primera vez que se llena nuestra consulta. Creo que tengo que cambiar este panel para escribir. Ahora actualice la página y vea aquí obtenemos solicitud uno falla. Después de eso, tomará algún tiempo y reintentará cinco veces más Por lo que el total de seis solicitudes se envía a esta consulta. Ahora volvemos al código VS, y aquí eliminamos nuestro error tipográfico Guarde este archivo, y en archivo principal, aquí, también tenemos tiempo obsoleto que especifican cuánto tiempo nuestros datos se consideran como frescos Actualmente, nuestro tiempo rancio se establece en cero, lo que significa que en el momento en que obtenemos datos del back end, se trata como antiguo Entonces, si la próxima vez que necesitamos los mismos datos, reacquery buscará nuevos datos de actualización del back end Entonces, para la demostración, pongámosla en 6 segundos. Guarda los cambios, y aquí obtenemos datos frescos, los cuales podemos ver por color verde. Y después de 6 segundos, se volverá todavía medio viejo. Ahora, como te dije, reacquery automáticamente re fedge nuestros datos rancios Entonces déjame decirte en qué situaciones va a quedar refedge Entonces, antes que nada, cuando se vuelve a conectar nuestra conexión de usuario, entonces se monta el componente y último cuando se vuelve a enfocar nuestra ventana de aplicación Entonces déjame mostrarte esto prácticamente. Así que aquí en nuestro navegador, si abres una nueva pestaña y otra vez, vuelve a nuestra pestaña de aplicación, entonces nuestros datos se actualizan Así que abre una nueva pestaña y vuelve a nuestra aplicación. Mira, aquí obtenemos un dato de frase, y luego se vuelve quieto. En la mayoría de las aplicaciones, esta función de refash automático es muy importante Pero a veces si tu aplicación no necesita esa función, entonces también puedes deshabilitarla. Entonces, en nuestro objeto de consulta, tenemos refedg en la propiedad de reconexión Podemos hacerlo falso. Además, tenemos refedg on mount y set a false y refetg en el foco de ventana, también podemos hacerlo Por defecto, estos tres valores de propiedades son verdaderos, pero si es necesario, podemos hacer que esto sea falso. Ahora déjame explicarte un escenario. Cuando nuestros datos se vuelven quietos, requery intentará refetch nuevos datos del servidor Pero al mismo tiempo, devolverá datos fijos de la caché a nuestro componente. Con esta implementación, podemos obtener nuestros datos de inmediato, pero también al mismo tiempo, estamos solicitando los últimos datos bajo el capó. Una vez que tenemos los últimos datos, Raquery actualiza nuestra caché y también actualiza los datos de nuestro componente, lo cual es bastante genial, ¿verdad? Entonces aquí, podemos cambiar las propiedades predeterminadas de todas las consultas. La mayoría de las veces, no vamos a cambiar eso porque estas propiedades ya son buenas. Pero a veces en nuestra aplicación, tenemos que cambiar estas propiedades por una sola consulta. Entonces, ¿cómo podemos hacer eso? Déjame mostrarte el gancho del vendedor abierto. Y aquí, en el uso query hook, podemos pasar las mismas propiedades como retrte a cinco, y también podemos pasar otras propiedades Así es como podemos cambiar las propiedades predeterminadas de las consultas. 194. Ejercicio para recuperar datos: Ahora es el momento de poco ejercicio. Entonces, en nuestra página de ventas de administración, quiero que obtengas datos sobre todos de nuestra API JCNPlaceholder con la ayuda Entonces nuestra API debería ser GDP, colon, doble barra diagonal hacia adelante jsnplaceholder.typicod.com barra diagonal Tu Esta API devolverá 200 datos falsos de todos. Así que haz gancho personalizado para ir a buscar todos tenemos que mostrar esos sudo título en párrafo simple y también mostrar indicadores de error y carga Sé que puedes hacer eso, y después de eso fue la solución. Entonces aquí hay una solución de este ejercicio. En primer lugar, en nuestra carpeta hooks, creamos un nuevo archivo llamado ustdos dot js Aquí, creamos una nueva función llamada ust Dos error function, y al final, simplemente vamos a exportar por defecto este todos. Ahora, aquí antes de esta función, creamos una nueva función llamada Fast Dos, función de error. Aquí devolvemos directamente el cliente API dot cat y endpoint, que es slash todos. Esta expresión devolverá promesa, por lo que usamos then method, response, y simplemente devolvemos datos de punto de respuesta. Aquí estamos devolviendo datos de punto de respuesta porque nuestra API de marcador de posición JSON devuelve todos en la propiedad de datos Para tu API, tienes que verificar tu respuesta de API y asegurarte de devolver esos datos. Ahora, llamemos a nuestro gancho de consulta de uso de la Biblioteca Raquery. Aquí pasamos objeto de configuración, y tenemos que pasar aquí dos propiedades. ¿Me puedes decir qué tienen razón? Clave de consulta y función de consulta. Así que queriy para hacer arreglos y pasar aquí todos. Después de eso, función de consulta para pasar todos, y simplemente devolvemos esta consulta de uso desde este gancho. Cambios de usuario y en la página de ventas aquí en nuestro componente, llamamos STDs Hook, que acabamos de crear Y como sabemos, este gancho escrito objeto con propiedades. Entonces podemos reestructurarlo aquí, y obtenemos datos, a los que podemos renombrar Tutu Dos Además, obtenemos error y facilidad de carga de propiedad. ¿Te das cuenta de lo sencillo que resulta llamar a un PI? Realmente me encanta esta biblioteca de consultas de reacción. ¿Qué opinas? Ahora en nuestro JSX, aquí cambiamos este encabezado para hacer página Y para agregar múltiples elementos, utilizamos fragmentos de reacción. Mueva estos hasta el final, esto para formatear nuestro código. Y después de nuestro rubro, agregamos calibracets, todos, signo interrogación punto Mapa Aquí obtenemos single to do object, que tiene ID, título, completado y ID de usuario. Simplemente escribimos aquí etiqueta de párrafo y le damos una clave para Tudot ID Dentro de este párrafo, mostramos Todo title. Además, vamos a mostrar el error y el indicador de carga. Antes de esta función de mapa, agregue corchetes Cali. I esta cargando es verdad, entonces devolvemos el componente del cargador y los trabajos de entrada auto por fin, agregamos corchetes cali. Si el error está disponible, entonces devolvemos la etiqueta de énfasis y mostramos el mensaje de punto de error. Los cambios y echar un vistazo. Pase a la página de ventas y vea aquí obtenemos nuestros todos. Vamos a comprobarlo en consulta DevTools y veamos aquí obtenemos cero por consulta de vendedores Este cero es el recuento de observadores, y en nuestra página, tenemos cero componente, que está llamando a la API de vendedores. Actualmente en nuestra aplicación, nuestra página tiene un componente, que está llamando a la consulta. Si nos movemos a la página del vendedor, entonces obtenemos un observador para consulta de vendedores y cero observador para hacer Squery Entonces eso es lo que quieren decir los observadores. Recuento de componentes renderizados actualmente, que utiliza la consulta. 195. Comprende los parámetros de consulta en React Query: En esta lección, veremos cómo podemos pasar parámetro en nuestro gancho de consulta de uso. Vamos a construir algo así. Antes de nuestro encabezado, tenemos una lista desplegable, que tiene cinco valores como usuario uno, dos, tres, cuatro y cinco. Cuando seleccionamos el usuario uno, obtenemos solo aquellos todos que son creados por el usuario uno. Básicamente, vamos a realizar el filtrado. Pero aquí estamos obteniendo datos de backend y pasamos nuestros detalles de filtro en parámetros de consulta de nuestra API para hacer Veamos cómo podemos hacerlo. Entonces antes de nuestro indicador de carga, teníamos selecteg y dentro de este, teníamos opción seis veces Ahora, en nuestra primera opción, aquí no agregamos nada en el valor, y aquí pasamos seleccionar usuario. Ahora, después de eso, pasamos valor a uno, y aquí pasamos usuario uno. De igual manera, valor a dos y usuario dos, tres, usuario tres, cuatro, usuario cuatro, y último cinco usuario cinco. Aquí no necesitamos este nombre y atributos de ID, por lo que podemos eliminarlo. Guarda los cambios y echa un vistazo. Ver, aquí tenemos nuestro cuadro desplegable. Ahora cuando seleccionamos aquí el usuario uno, solo deberíamos obtener dos dosis de esa publicación de los usuarios. Tenemos que encargarnos de este desplegable. En la parte superior, creamos una nueva variable de estado llamada ID de usuario, establecemos ID de usuario, y como valor predeterminado, establecemos en null. En nuestra etiqueta de selección, agregamos evento de cambio, y aquí obtenemos la función de error de objeto de evento, y establecemos el ID de usuario al valor de punto objetivo del evento. Además, aquí obtenemos valor en cadena, por lo que necesitamos convertirlo en entero. ¿Y cómo podemos hacer eso? Correcto, envolviendo nuestro valor en parse int, y aquí también pasamos valor a nuestro ID de usuario. Bueno. Ahora en este componente, estamos utilizando nuestro gancho personalizado que solía hacer. En ese gancho, podemos pasar nuestra variable de estado ID de usuario como argumento. Guarda este archivo y veamos qué tenemos que hacer en nuestro gancho todos usados. Primero, obtenemos aquí el ID de usuario como parámetro, y aquí en nuestra solicitud API, tenemos que pasar este ID de usuario con nuestra solicitud GAT. Aquí, tenemos que mover esta función en nuestra función de uso todos. Para que podamos acceder al ID de usuario en nuestra función de estudios de feria. Ahora aquí, tenemos que pasar algo así como esta slash Studios, y en el parámetro query, pasamos User ID igual a nuestro ID de usuario O podemos pasar objeto en el segundo argumento y addheparams, que es un Y aquí, simplemente pasamos ID de usuario a ID de usuario, o podemos eliminar esta. Ninguna última cosa que hacer es que tengamos que cambiar nuestra clave de consulta. Actualmente, solo estamos pasando una sola cadena en nuestra clave de consulta, pero ahora estamos tratando con múltiples datos en nuestra consulta. También tenemos que añadir eso en nuestra clave de consulta. Así que aquí pasamos nuestro ID de usuario. Además, aquí, a muchos desarrolladores les gusta usar una estructura jerárquica que representa la relación entre nuestro objeto de datos. Déjame mostrarte a lo que me refiero. Aquí, comenzamos con objeto de nivel superior, que son los usuarios. Ese usuario tiene ID, que es ID de usuario. Y por este ID de usuario, podemos ir a buscar todos. Esta es la misma estructura que utilizan los desarrolladores de Bend para definir la URL de nuestra API. Entonces nuestra URL API puede ser así. Los usuarios uno, que es el ID de usuario, recortan todos. Creo que este patrón es más específico. Ahora bien, aquí está la única cosa. Aquí estamos pasando ID de usuario en esta clave de consulta, lo que significa que siempre que cambie el ID de usuario, rea query refrescará los datos de nuestra API. Si no agregamos aquí la variable de ID de usuario, entonces nuestra consulta se ejecutará solo una vez, incluso si agregamos ese ID de usuario en nuestros parámetros. Así que esta matriz de consulta es similar a nuestra matriz de dependencias en efecto de uso. Guarda los cambios y echa un vistazo. Déjame alejarme un poco. Ahora vemos actualmente no tenemos ningún usuario seleccionado, así que obtenemos aquí los usuarios null todos, y obtenemos todos todos. Ahora si cambiamos de usuario a uno, entonces solo obtenemos datos de nuestro usuario uno. En nuestras herramientas de desarrollo, obtenemos usuarios B todos. Del mismo modo, podemos seleccionar otros usuarios y para cada usuario reacquery obtener nuevos datos Ahora tenemos todos los datos en nuestro caché. Si nos dirigimos a los usuarios anteriores, obtenemos nuestros datos de inmediato sin ninguna carga. Esta es la belleza de rea query. Lo único que quiero arreglar es por valor nulo, vamos a cambiar nuestra clave de consulta. De vuelta al código VS, y aquí pasamos condición si el ID de usuario está disponible, luego devolvemos esta matriz de claves, lo contrario devolvemos matriz con solo cadena para hacer porque para usuario nulo, recuperando todos a dos sin ningún filtro Guarda los cambios y echa un vistazo. Refresca la página y mira aquí obtenemos solo dos dos y si seleccionamos usuario uno, entonces obtenemos nuestra clave de consulta con el ID de usuario de los usuarios y todos. Ahora aquí tenemos un pequeño problema. Entonces, si volvemos a nulo ID de usuario, entonces aquí no obtenemos nuestros datos. ¿Por qué? Comprobemos eso en NetworkTab Reprimir la página. En primer lugar, aquí conseguimos todos. Después seleccionamos el usuario uno, y aquí obtenemos todos la solicitud con el ID de usuario uno. Ahora vamos a seleccionar de nuevo, seleccionar usuario y ver aquí obtenemos ID de usuario a no un número. Y ese es el tema. Entonces para resolver este problema, tenemos que pasar condición para este parámetro de ID de usuario. Entonces para simplificar esto, creo aquí nueva variable llamada params, que pasamos como objeto Params Ahora, después de eso, agregamos condición. Si UserID está disponible, entonces establecemos params dot UserID a nuestro ID I ID de usuario es nulo o indefinido, entonces no agregamos parámetro de ID de usuario. Podemos simplemente pasar aquí params a params, o podemos eliminar estos Guarda los cambios y echa un vistazo, reprime la página, seleccionamos usuario uno, aquí obtenemos los datos del usuario B, luego seleccionamos usuario y vemos, aquí tenemos todo lo que hacer Así es como pasamos parámetros de consulta en rea Query. 196. Paginación en React Query: Ahora, en nuestra lista de tareas pendientes, estamos recuperando 200 todos en una sola solicitud, pero eso aumentará la carga Anteriormente, en nuestra aplicación cartwig, tenemos la misma situación ¿Recuerdas lo que hemos hecho para reducir esta carga? Derecha, utilizamos la función de paginación o desplazamiento infinito. Primero, veremos la consulta de paginación en esta lección, y luego también veremos cómo aplicar la consulta de desplazamiento infinito. No te preocupes por eso. En primer lugar, eliminemos este filtrado porque no quiero complicar esto. Así que eliminamos esta variable de estado de ID de usuario de aquí. Además, elimine la etiqueta select con estas opciones. Bueno. Ahora para la paginación, necesitamos el estado de la página, que podemos cambiar o manejar por nuestros botones de página Así que aquí creamos una nueva variable de estado llamada page set page, y como valor predeterminado, pasamos aquí una. Ahora, agreguemos los botones anterior y siguiente para la paginación, por simplicidad Entonces después de nuestro mapa de Tudos, agregamos botón y pasamos aquí anterior y otro botón o siguiente Ahora para el botón anterior, podemos agregar el atributo de desactivación, que deshabilitará si la página es igual a uno. A medida que pasamos en evento clic y dentro de él, función de flecha, y establecer página a página menos uno. Ahora para el siguiente botón, pasamos desactivar a aquí, pasamos página al tamaño de página. tamaño de la página es el número de datos que queremos mostrar en una sola página. Y sabemos que esta consulta tiene 200 que hacer. Por lo que pasamos aquí mayores de 200. Ahora se podría decir, aquí sabemos que tenemos 200 que hacer. ¿Y si no conocemos el número total de productos en nuestra aplicación? Entonces en esta situación, tienes que decirle al desarrollador de Backend que también envíe una serie de productos totales con tus datos API Eso ya lo vemos en nuestro proyecto cartwh, derecho. Ahora aquí pasamos evento click, y dentro de él, establecemos página dos página más una. Bueno. Ahora aquí, creamos una variable simple llamada tamaño de página igual a, digamos diez. Ahora en nuestro solía hacer en el lugar de este ID de usuario, agregamos página y tamaño de página. Ahora imagina en esta característica, también queremos agregar filtro o disparo por características. Entonces tenemos que agregar múltiples valores en esta función. Entonces en lugar de eso, podemos pasar todos los valores en un solo objeto. Así que agrega objeto y pasa página y tamaño de página. ¿Bien? Este archivo y en nuestro solía hacerlo en el lugar de este ID de usuario, obtenemos nuestro objeto de consulta. También eliminemos estos parámetros, y si condiciona, podemos pasar directamente perams aquí Ahora, en nuestros parámetros de consulta, agregamos objeto, y dentro de este, tenemos que pasar dos propiedades, límite de subrayado y inicio de subrayado Estos parámetros dependen de tu API. Entonces aquí por límite, pasamos nuestra consulta punto pay size, y para empezar, tenemos que pasar el punto de partida para nuestros todos. Así que aquí pasamos consulta punto página, menos uno, multiplicar por nuestro tamaño de página de punto de consulta. Ahora bien, si nuestra página se establece en uno, entonces uno menos uno, que es cero y se multiplica por diez, que también es cero. Entonces nuestro punto de partida es cero. Entonces obtenemos post 1-10. Entonces para la página dos, nuestro punto de partida será uno en diez, que es diez. Entonces conseguimos post 11-20 simple como eso. Ahora, cambiemos nuestra clave de consulta aquí. No necesitamos esta condición. Pasamos array con cadena para hacer, y después de eso, pasamos directamente aquí o query object. Entonces, si algo cambia en este objeto de consulta, reacquery obtendrá nuevos datos de API Guarda los cambios y toma un. ver, aquí obtenemos solo diez datos, y nuestro botón anterior está deshabilitado. Ahora, da clic en siguiente, y obtenemos los siguientes diez datos. Y también, si volvemos a la página anterior, entonces obtenemos datos sin cargarlos porque están almacenados en caché. Ahora, una pequeña actualización que queremos hacer es cuando hacemos clic en siguiente, nuestro botón anterior y siguiente, movemos hacia arriba y luego hacia abajo. Entonces para arreglar esto aquí en consulta de uso, agregue aquí una propiedad llamada placeholder data aquí, tenemos que agregar una referencia de función, que es mantener datos anteriores Asegúrate de que sea de diez biblioteca de consultas de Stag react. Aquí, podemos ver que se importa de nuestra biblioteca de consultas de rea y eso es todo. Mientras estamos recuperando nuevos datos, seguimos viendo los datos anteriores, y si obtenemos nuevos datos, después de eso, los datos anteriores desaparecerán Los cambios y echar un vistazo. Haga clic en siguiente y vea mientras nuestros datos están parcheando, nuestros anteriores a dos todavía están aquí, y después de completar la solicitud, obtenemos nuestros nuevos datos Para que puedas ver lo sencillo y fácil que es agregar paginación usando rea Query 197. Desplazamiento infinito en React Query: Ahora veamos cómo podemos recuperar consulta infinita usando rea query Entonces vamos a agregar botón de carga más en la parte inferior, y cuando hacemos clic en eso, obtenemos nuestros nuevos datos. En aplicación del mundo real, cargaremos nuestros datos cuando lleguemos al final de nuestra página. Eso lo veremos en nuestra parte de ejercicio. Por ahora, vamos a implementar esto. En primer lugar, para el desplazamiento infinito, tenemos que reemplazar nuestro gancho de consulta de uso al gancho de consulta infinito de uso Guarde esto. Ahora aquí hay una cosa. Cuando estamos usando use Infinite query hook, no necesitamos pasar el objeto Iquery recto a la página Usar consulta infinita hace eso automáticamente. Aquí podemos eliminar esto y también eliminar esta página del objeto de consulta. Ahora se podría pensar, ¿cómo podemos contar o números de página? No te preocupes. Es realmente muy sencillo. Entonces, para contar los números de página, tenemos una función en nuestro uso consulta infinita llamada como Get next page perm Aquí, tenemos que pasar la función de devolución de llamada, y esta función tiene dos parámetros Última página, que es la matriz de última página de nuestro to dos y segundo parámetro es todas las páginas, que es la matriz bidimensional, o podemos decir dos matriz D. Algo se ve así. Tenemos array y dentro de esta matriz tenemos los datos de cada página en secuencia. No te preocupes por eso. Cuando imprimimos nuestra matriz, lo entenderás. Solo recuerda que estas todas las páginas es el array de todos todos. Ahora, aquí en esta función, tenemos que devolver el número de página siguiente. ¿Cómo podemos encontrar eso? Como te dije antes, las todas las páginas tienen todos los datos sobre nuestros todos. Si cargamos dos páginas, entonces nuestros datos de todas las páginas se ven así. Entonces aquí podemos hacer algo como esto. Devolvemos todas las páginas longitud de punto N más uno, que es nuestro siguiente número de página. Ahora bien, ¿y si nos desplazamos a esa página que no está disponible? Entonces no necesitamos pasar el siguiente número de página. Entonces, cuando pasamos el número de página, que no existe en la API de marcador de posición JSON, devolverá matriz vacía Entonces pasamos aquí condición I última página, que es nuestra última página datos longitud de punto mayor que cero, si es cierto, entonces volvemos página siguiente, de lo contrario, devolvemos nulo, simple como eso. Ahora solo necesitamos pasar el número de página en nuestra función dos pasada. Rea query pasará nuestro número de página en nuestros parámetros de función de consulta. Aquí, desestructuramos objeto y obtenemos aquí página param. Y pasarlo en el lugar de la consulta punto página. Además, para el valor predeterminado, pasamos tu página por um a una. En palabras simples, lo que sea que regresemos de esta función de perm de la siguiente página, obtendremos ese valor en nuestra página por um Guardar cambios, y en nuestro componente de ventas en la parte inferior, podemos eliminar ambos botones, y aquí agregamos un nuevo botón pload más Agreguemos el evento al hacer clic para este botón. Y aquí, tenemos que pasar la función de página siguiente, que obtenemos de nuestro uso de consulta infinita. Y en la parte inferior, en nuestro evento on click, simplemente agregamos la función fetch next page En nuestro proyecto Catwig, cuando llegamos al final de nuestra página, simplemente podemos llamar a esta función de búsqueda de página siguiente Guarda los cambios y toma un aquí obtenemos error. Entonces vamos a inspeccionar esto y en la consola, aquí obtenemos todos mapa de puntos no es una función. Imprimamos lo que obtenemos en nuestros datos. Así consola de datos de registro de punto y eliminamos estos todos de renombrar. Guarda los cambios, y en nuestra consola, desplázate hacia arriba. Nos estamos poniendo indefinidos. Creo que tenemos que comentar el método de mapa. Guarde los cambios y vea que obtenemos los datos. Aquí, estos datos son objeto que tiene dos propiedades, página y páginas En estas páginas, obtenemos array de nuestros diez todos. Entonces en nuestro JSX, antes de nuestro mapa de puntos todos, teníamos un signo de interrogación de datos, mapa de puntos de páginas de puntos Aquí obtenemos cada función de flecha de datos de página. Y aquí, tenemos que devolver otro método map porque cada página es array of to dos. Entonces aquí agregamos fragmentos de reacción, y dentro de esto, podemos mover este método de mapa. Y reemplace esto todos con nuestra página. Di los cambios y echa un vistazo. Ver, aquí obtenemos nuestros datos. Ahora da clic en el botón Cargar más, y obtenemos otro todos, así que está funcionando. Pero en nuestra consola, obtenemos aquí error, que es lista debe tener prop clave única. Entonces aquí en nuestro fragmento de reacción, tenemos que pasar apoyos clave Entonces para eso, esta sintaxis de fragmento de reacción no funcionará. Tenemos que añadir fragmento de punto de reacción. Y clave para aquí, obtenemos índice y lo pasamos aquí. Di los motores y échale un vistazo. Ver, el error se ha ido. Ahora cuando estamos recuperando datos, podemos desactivar nuestro botón Use Infinite query tiene una propiedad más para eso, que está recuperando la página siguiente Como obtenemos como página siguiente en la parte inferior, en nuestro botón, agregamos deshabilitar atributo y pasar aquí, es parchear página siguiente Además, podemos cambiar nuestro texto de botón para que podamos pasar aquí condición. Si epatching página siguiente es verdadera, entonces volvemos cargando punto, punto, punto, de lo contrario mostramos cargar Además, envolvemos nuestro botón con llaves y agregamos aquí yo como página siguiente es verdadera, solo entonces mostramos este botón de carga más. Esta devolución de propiedad, nuestra consulta tiene siguiente página o no. Di los anges y echa un vistazo, actualiza la página y haz clic en Cargar más. Mira, aquí tenemos nuestro texto de carga, así que está funcionando. 198. useGancho de mutación para la mutación: Hasta ahora, hemos visto cómo podemos obtener datos usando la consulta rea Ahora veamos cómo podemos mutar, lo que significa agregar, actualizar o eliminar datos en nuestra aplicación usando Raquert En primer lugar, vamos a cerrar todos los archivos y abrir el componente de vendedores. Y en esta lección, realizaremos agregar funcionalidad de vendedor con consulta rea. Para mutación, tenemos un gancho que es use mutación, igual que tenemos use query y dentro de esta función, pasamos nuestro objeto de configuración. En nuestro gancho de consulta de uso, tenemos función de consulta. Pero en uso mutación, tenemos función de mutación. Y aquí, lo que vamos a pasar, derecho, pasamos nuestra función, que llamaremos API y devolveremos datos. Así pasamos la función de flecha y agregamos api client dot post y 0.2 slash users dot then method response, y simplemente devolvemos los datos de punto de respuesta Actualmente, no estamos pasando por aquí nuevo objeto del vendedor. Eso lo veremos en apenas un segundo. Ahora podrías preguntarte, ¿cómo podemos llamar a esta API, que acabamos de definir? Para ello, esta función de mutación de uso devuelve un objeto, lo almacenamos en la variable llamada add seller mutation. Este objeto tiene un método llamado mutar. Al usar esa función mutar, podemos llamar a la API Donde queremos llamar a esta API en la función de vendedor de anuncios. En primer lugar, aquí eliminamos estos vendedores de conjuntos y también eliminamos esta solicitud de API. No necesitamos y aquí solo agregamos agregar la función de mutación de punto de mutación de vendedor Esto llamará a nuestra esta función de mutación. Ahora podemos pasar nuestro nuevo objeto de vendedor, que creamos anteriormente. Ver aquí. Y a medida que pasamos objeto en función silenciada, aquí, obtenemos ese parámetro en nuestra función de mutación y lo pasamos después de nuestro punto final Guarda los cambios y echa un vistazo. Ve a la página del vendedor y abre la pestaña Red. Escribe nuevo vendedor y haz clic en Agregar vendedor. Ver, aquí obtenemos Nuevo Post solicitud ID con nuestro nombre. Ahora, como hicimos anteriormente, podemos agregar a nuestros nuevos vendedores en esta lista. Entonces hay dos formas de actualizar nuestra lista. Primero, podemos actualizar directamente nuestro caché. Y segundo, podemos invalidar nuestro antiguo caché, y luego podemos refetch nuestros datos desde el servidor Aquí en esta situación, no podemos usar esta segunda forma porque JCNPlaceholder no agregará nuestros datos en Es solo para degustación, pero no te preocupes. Te voy a mostrar a ambos lados aquí. Veamos primero esta segunda forma, y después de eso, escribiremos nuestro código para actualizar directamente la caché. Entonces aquí en nuestro gancho de mutación de uso, tenemos otro método llamado al éxito, que se ejecutará si nuestra solicitud de API se completó con éxito. Además, tenemos la propiedad on error, que se ejecutará si ocurre algún error en esta mutación. Aquí podemos mostrar la notificación de tostadas por errores. Por ahora, no queremos así volver a sobre el éxito y pasamos la función de devolución de llamada, y aquí obtenemos dos parámetros El primer parámetro devolverá objeto de nuestro vendedor desde el final. Podemos llamarlo como vendedor guardado y además obtenemos el nuevo objeto del vendedor, que acabamos de enviar con nuestra API. Y dentro de esta función, primero vemos cómo podemos invalidar la consulta de nuestro vendedor anterior. Para eso, en la parte superior, nos llamamos cliente de consulta de rea Query. Y almacenar eso en la variable llamada cliente de consulta. Este cliente de consulta es el mismo que nuestro archivo JSX punto principal, este objeto cliente Ahora en nuestra función on success, agregamos query client dot Invalidar consultas y dentro de esta, tenemos que pasar Object pass here query key a nuestros vendedores Cualquiera que sea la consulta que tenga esta clave, comience con los vendedores que todas las consultas están establecidas como inválidas, y es por eso que rea query refrescará esas consultas Guarda los cambios y echa un vistazo, escribe el nombre de nuestro vendedor aquí y agrega vendedor. Ver, nuestra consulta con la clave del vendedor están recibiendo fest. Se puede ver eso por último valor actualizado. Ver, de nuevo, agregar vendedor y aquí esta vez se actualiza. Aquí no vemos nada cambio en nuestra lista porque Jon marcador de posición, no realmente salvando a nuestros nuevos vendedores en el servidor Si van a almacenar eso, entonces tenemos a ese nuevo vendedor aquí. Ahora, veamos otra forma, que es actualizando directamente la caché. Entonces para eso, comentamos este método y agregamos comentario para el método dos. Y aquí mismo, consulta de datos de consulta de conjunto de puntos del cliente. En el primer argumento, tenemos que pasar clave de consulta, que es vendedores. Y el segundo parámetro es la función data. Así que llegamos aquí a nuestros vendedores, que es la matriz de la lista de vendedores actuales, función de error, y devolvemos matriz. Ahora, primero, agregamos nuestro objeto vendedor guardado, y después de eso, agregamos vendedores de operadores de spread, guardamos los cambios y echamos un vistazo. Ingresa el nombre del vendedor y haz clic en el anuncio. Ver, aquí conseguimos nuestro nuevo vendedor. Así es como mutamos nuestros datos en React Query. Recapitulemos rápidamente sobre la mutación. Como nos llamamos query hook for mutation, llamamos use mutation hook y inside object, pasamos función de mutación que toma función con la llamada API. Después de eso, tenemos propiedad de éxito que se ejecutará después de que nuestra mutación se complete con éxito. Aquí actualizamos nuestros datos de caché con esta consulta de datos de consulta de conjunto de puntos del cliente. Y en la parte inferior, por llamar a esta mutación, agregamos la función de mutación de punto de mutación de Ed vendedor Tan simple como eso. Si estás un poco confundido, entonces no te preocupes por este ejercicio, entenderás este concepto. Entonces aquí hay un poco de ejercicio para ti. Cómo aplicar usa el método de mutación para este vendedor de eliminación y actualizar la funcionalidad del vendedor. El resultado debe permanecer igual ya que estamos eliminando y actualizando la lista del vendedor. Intenta resolver eso. Y si necesitas, entonces puedes volver a ver esta lección Te veré en la siguiente lección. 199. Elimina y actualiza vendedores: Espero que intentes resolver este ejercicio. Ahora veamos la solución realmente rápida. En primer lugar, voy a mover este uso gancho TD en la parte superior. Bueno. Ahora después de nuestra mutación de error Ads, volvemos a llamar use mutación y pasamos su función de mutación de objeto de configuración a función de flecha. Ahora desde abajo, obtuvimos este cliente API de la función retardada y lo pegamos aquí. Aquí no necesitamos este método de boceto, por lo que podemos eliminar este. Y aquí agregamos entonces datos de método, respuesta y respuesta de retorno. Ahora obtenemos este ID aquí de este parámetro. A continuación, agregamos el método de éxito y pasamos aquí la función de devolución de llamada, y aquí obtenemos nuestros datos eliminados del vendedor, la función de flecha y los datos de consulta de conjunto de puntos del cliente de escritura de consulta En el primer argumento, pasamos a nuestros vendedores clave en el segundo argumento, pasamos nuestra función updater Así que aquí conseguimos a nuestros vendedores la función de flecha, y volvemos aquí vendedores filtro de punto. Aquí obtenemos vendedor único, función flecha, como ID, no es igual a nuestro ID de vendedor seleccionado. Entonces aquí mismo, eliminó el ID de punto del vendedor, pero aquí hay un problema. El marcador de posición del sol no devuelve nada cuando eliminamos usuario Déjame mostrarte esto en vivo. Entonces, para llamar a esta API, almacenemos este objeto de mutación en variable llamada delete seller mutation. Y en nuestra función de eliminar vendedor, eliminemos nuestro código anterior. Aquí, lo llamamos eliminar vendedor mutación punto silenciado función Y dentro de esto, pasamos nuestro ID, guardamos los cambios, y echamos un vistazo, abrimos la pestaña Red, y aquí eliminamos al vendedor. Ver, llegamos aquí solicitud de eliminación, pero nuestra lista no está actualizada porque en la respuesta del servidor, no obtenemos nada. Ahora bien, ¿cómo podemos resolver eso? Es muy sencillo. También podemos transmitir el método de éxito en nuestra función de esta mutación Entonces, después de nuestro primer argumento, pasamos el objeto de configuración aquí, y simplemente cortamos nuestro método de éxito de usar el gancho de mutación. Y pegarlo en este objeto. Ahora no necesitamos aquí el parámetro de vendedor eliminado, y en el lugar de este deleteller dot ID, simplemente pasamos Di los cambios y echa un vistazo. Haga clic en eliminar y nuestro vendedor será eliminado de aquí. Ahora veamos cómo podemos actualizar vendedor. Después de nuestra mutación Eliminar, nuevamente llamamos a la mutación estadounidense Hook. Pase aquí objeto de configuración, función de mutación a aquí, obtenemos objeto vendedor actualizado, que pasamos de nuestra función de vendedores de actualización, función de error. Consigamos este cliente EPA con el método patch. Y pegarlo aquí. Además, eliminamos este método de boceto y agregamos el método porque esta API devolverá nuestros datos de vendedor actualizados. Entonces respuesta y retorno de datos de punto de respuesta. Ahora, en el lugar de este ID de punto de vendedor, agregamos ID de punto de vendedor actualizado. Ahora aquí estamos obteniendo datos del servidor, así podemos pasar aquí el método de éxito. Aquí obtenemos nuestro objeto vendedor actualizado, que obtenemos del servidor, función flecha, y dentro de esta función, agregamos query client dot set query data. Primero, agregamos la tecla de consulta, que se establece para los vendedores, y después de eso, la función actualizada, obtenemos los datos de los vendedores, la función de flecha. Aquí, tenemos que devolver array actualizado. Para eso, desde abajo, podemos cortar el método de mapa de puntos del vendedor y simplemente pegarlo aquí. Y en nuestras condiciones, cambiamos el ID del punto del vendedor por el ID del punto del vendedor actualizado. Ahora por llamar a nuestra mutación de actualización, almacenamos esta mutación de uso en una variable llamada Actualizar mutación vendedor. Y en la parte inferior, podemos eliminar el conjunto vendedores y simplemente llamar aquí, Actualizar vendedor mutación punto mutar y pasar aquí, Actualizado Vendedor Objeto Decir los cambios y echar un vistazo, haga clic en el botón Actualizar y ver que obtenemos aquí vendedor actualizado. Ahora entiendes cómo podemos usar el gancho de mutación para mutar nuestros datos Es muy sencillo. Sólo tenemos que practicar. 200. Manejo de errores en la mutación: Ahora veamos cómo podemos manejar los errores en la mutación. En nuestro objeto add mutación, tenemos un método llamado al error. Aquí, obtenemos nuestro objeto de error, que obtenemos de API y dentro de esta función, también podemos escribir la lógica para mostrar notificaciones de tostadas. Por ahora, simplemente consultemos registrar este objeto de error. Ahora hagamos aquí un error tipográfico en nuestro punto final. Usa NGs y echa un vistazo. Abre Consola, escribe aquí el nombre del vendedor y edita. Ver, aquí obtenemos error de Axios. Este error tiene muchas propiedades como CF, message, request, etcétera Por ahora, sólo necesitamos este mensaje. Así que volvamos al código VS y aquí en el lugar del registro de puntos de consola, podemos escribir la función de alerta y simplemente pasar aquí mensaje de punto de error. Se cuelga y mira, aquí obtenemos alerta de error. Hermoso. Ahora déjame mostrarte cómo también podemos mostrar el error en nuestra página. Es realmente simple. Como sabemos, todos los ganchos de mutación de uso devuelve objeto con mutado y manojo de propiedades Dentro de estos, también obtenemos error, que es el mismo objeto que este objeto de error. A partir de aquí, podemos comentar esto sobre el método de error, y en la parte inferior, duplicar esta condición y cambiarlo para agregar el error de punto de mutación del vendedor está disponible. Solo entonces imprime aquí, agrega vendedor mutación punto error punto Mensaje. Guarda los cambios y toma una y mira aquí obtenemos nuestro error. Así es como mostramos error por mutación. Ahora eliminemos este error tipográfico, probamos con éxito nuestra aplicación Ahora en la siguiente lección, mostraremos nuestro progreso durante las mutaciones. 201. Mostrar el progreso durante las mutaciones: Ahora, muchas veces nuestra mutación se está ejecutando en segundo plano y puede llevar poco tiempo. Entonces en ese momento, podemos mostrar algún tipo de cargador o spinner para indicar mutación en curso. Entonces para eso, use mutacion devuelve una propiedad llamada Es pendiente. Y mediante el uso de esta propiedad, podemos mostrar el cargador. Esta E pendiente de trabajo lo mismo que nuestro estado de carga Ese, que creamos en nuestros datos de uso gancho personalizado. Recuerda, en nuestro botón de vendedor de anuncios en el lugar de este vendedor de anuncios, pasamos condición. Si la mutación adseller está pendiente es verdadera, entonces volvemos agregando vendedor, lo contrario, el valor predeterminado agregar vendedor Así podemos desactivar nuestro botón Agregar por atributo deshabilitado y simplemente pasar aquí en el vendedor mutación punto E pendiente. Entonces, si es cierto, entonces nuestro botón se deshabilitará, guardará los cambios y echará un vistazo. Escribe el nombre del vendedor y agrégalo. Consulta aquí conseguimos agregar vendedor y además nuestro botón se desactiva. Se puede ver lo sencillo y útil que es Raquery. No me imagino que no iba a agregar Requeri en este curso Pero gracias a Dios lo agrego. Te va a ayudar mucho. Y también, muchas gracias por solicitar reaquery. También aprendí mucho de esto. 202. Actualización optimista en React Query: Ahora actualmente en nuestra implementación, primero estamos haciendo solicitud de API y luego mutando datos en nuestra página, lo que se denomina como enfoque pesimista Pero también podemos aplicar aquí enfoque optimista, lo que básicamente significa que primero mutamos nuestros datos, y luego llamaremos a nuestra API para esa mutación Anteriormente, ya vimos este enfoque, ¿verdad? Entonces vamos a implementar este enfoque en rea query. Entonces en nuestro anuncio vendedor mutación aquí en nuestro uso mutación aro tenemos un método más llamado en mutar. Aquí pasamos la función de devolución de llamada. Esta función se ejecutará antes de que se ejecute esta función de mutación, y eso es exactamente lo que queremos. Verifiquemos esto. Entonces aquí en el primer parámetro, obtenemos nuestros datos, que estamos enviando al servidor, que es este nuevo vendedor. Y dentro de esta función, simplemente consultamos punto iniciar sesión mutar nuevo vendedor Y después de eso, simplemente activamos alerta con mensaje de mutación on. Guarda los cambios y echa un vistazo. Abra la pestaña Red, presione la página, nombramos aquí y haga clic en en vendedor. Ver, primero obtenemos Alert, y si hacemos clic en Bien, entonces obtenemos post request. Entonces es claro que este método silenciado se ejecutará antes de nuestra función de mutación Y también en nuestra consola, podemos ver aquí obtenemos nuestros nuevos datos de vendedor. Entonces en esta función, tenemos que agregar nuestro nuevo vendedor en los datos de nuestro vendedor. Eliminemos este código. Y simplemente actualice los datos de nuestros clientes. Así podemos mover este conjunto de datos de consulta en nuestro método silenciado y cambiar este vendedor guardado a nuevo vendedor, y eso es todo Guarda los cambios y echa un vistazo aquí mismo nombre y haz clic en agregar vendedor. Ver, inmediatamente obtenemos nuestros nuevos datos de vendedor, y luego API está llamando. Ahora solo tenemos que manejar en el éxito y en la función de error. En nuestra función de éxito, reemplazaremos nuestro nuevo objeto vendedor, que acabamos de agregar en método silenciado Reemplazamos eso con el objeto vendedor guardado, que estamos obteniendo del servidor. Así que escribimos consulta cliente conjunto de puntos datos de consulta, pasamos su clave a los vendedores, y para la función de actualización, obtenemos aquí vendedores, función flecha. Pasamos vendedores signo de interrogación mapa de puntos, vendedor función flecha, y aquí pasamos condición simple. Si el vendedor único es igual a nuestro nuevo vendedor, entonces devolvemos vendedor guardado, lo contrario devolvemos ese vendedor tal como está. Ahora, aquí, este nuevo vendedor es este nuevo objeto vendedor, que pasamos en nuestra función de vendedor de anuncios. Y ya terminamos aquí. Ahora, vamos a manejar la función de error porque si algo salió mal, entonces tenemos que restaurar nuestros datos a su estado anterior. Eso lo hemos visto en nuestra sección API de llamadas. Recuerden, en ese momento, lo que hemos hecho en entonces método, estamos haciendo lo mismo en este método sobre el éxito. Y lo que hemos hecho en nuestro método de caché, estamos haciendo lo mismo en este método on error. Nuestra sintaxis se cambia, pero nuestra lógica es la misma que antes. Y por eso primero explico nueva lógica, y luego estamos implementando esta lógica usando la librería react query. Así que vamos a manejar el método de error y pasar aquí la función de devolución En esta devolución de llamada, primero obtenemos objeto error, luego en el segundo parámetro, obtenemos un nuevo vendedor, y por fin, obtenemos contextos Ahora podrías pedir texto. Entonces en este contexto, obtenemos lo que sea que regresemos de esto en función silenciada Entonces la lógica es que devolveremos nuestra lista anterior del vendedor de esta función silenciada, y luego podremos obtener esa lista en nuestro contexto Solo mira esto y tu salida se aclarará. Entonces aquí, antes de nuestro conjunto de datos de consulta, escribimos query client dot Get query data. Y dentro de esto, pasamos nuestra llave, que son los vendedores. Ahora, vamos a almacenar estos datos en una variable llamada vendedores anteriores. Y al final, devolveremos a los vendedores anteriores en objeto. Aquí, también podemos simplificar. Y en la parte inferior, en nuestra función on error, en este contexto, obtenemos este objeto con inmuebles vendedores anteriores. Entonces primero, verificamos si Context es false, luego volvemos de esta función. Y si Context está disponible, entonces podemos ejecutar query client dot set query data pass here key sellers y simplemente pasar aquí contextos dot vendedores anteriores. Ahora, verifiquemos que esto funcione o no. Entonces por error, hacemos aquí un error tipográfico en nuestro punto final, S los cambios y echamos un vistazo Escribe nombre y haz clic en agregar vendedor. Primero, se agrega nombre, luego estamos obteniendo error y nuestra lista se establece en estado anterior. Entonces está funcionando bastante bien. Ahora vamos a recapitular este enfoque para que puedas entenderlo mejor En primer lugar, agregamos la función silenciada, que se ejecuta antes de nuestra función de mutación, y establecemos nuestros nuevos datos directamente en nuestra lista Después de eso, tenemos que manejar sobre el éxito y en los métodos de error. Si nuestra llamada a la API finaliza con éxito, entonces reemplazaremos nuestro nuevo objeto de datos con los datos guardados que obtenemos del servidor. Y si obtenemos error en nuestra llamada API, entonces tenemos que restaurar nuestra lista al estado anterior. Para obtener la lista anterior, obtenemos nuestros datos anteriores en esta función silenciada antes de mutar y simplemente los devolvemos en el objeto También podemos devolver directamente datos anteriores sin objeto, y luego en nuestro error on, tenemos que escribir contextos, y eso va a crear confusión. Entonces es mejor devolver objeto de en silenciado, y eso es todo. Implementamos con éxito un enfoque optimista. 203. Gancho personalizado para la mutación AddSellers: Ahora, actualmente, en nuestra implementación, almacenamos toda nuestra lógica de mutación en este único componente, que puede ser difícil de mantener en el futuro. Así podemos almacenar esta lógica en gancho separado, igual que creamos los vendedores de uso. Si estás bien con esta implementación, entonces no necesitas hacer esto. Pero en mi sugerencia, es mejor escribir código limpio. En nuestra carpeta Hooks, primero, creamos una nueva carpeta llamada sellers, y dentro de estos, agregaremos todos nuestros ganchos relacionados con vendedores. Por lo que movemos estos vendedores de uso dentro de la carpeta Vendedores. Bueno. Ahora, vamos a crear un nuevo archivo llamado vendedor usado dot js. En primer lugar, vamos a crear una nueva función llamada use add seller error function. Y en la parte inferior, simplemente exportar default, este uso agregar vendedor. Ahora volvamos al componente de nuestro vendedor, copia esta consulta cliente y también copia esta agregar mutación vendedor desde aquí y pégala en nuestro uso agregar gancho de vendedor. Y aquí en el lugar de almacenar esta mutación en variable, simplemente podemos devolverla de aquí. Ahora vamos a importar línea por línea algunos ganchos y métodos que necesitamos en este código. Entonces primero, necesitamos usar query client, así que lo importamos de rea query. Además, necesitamos este uso de gancho de mutación. Después de eso, necesitamos cliente IEI, que es nuestro Axios y también me olvidé quitar este error tipográfico Y eso es todo. Nuestro SedsellerHok Guarda este archivo y en el componente del vendedor en el lugar de este uso gancho de mutación, podemos llamar use Ed seller. Ya puedes ver nuestro código se ve limpio. Pero tenemos esta mutación de eliminación y actualización de mutación en este componente. También podemos separarlos, pero te estoy dando eso como ejercicio. Hacer ganchos separados para su uso eliminar vendedor y usar actualizar vendedor. No te estoy mostrando esta solución porque es demasiado fácil. Entonces así es como se ve nuestro componente después de separar la mutación de nuestro componente. Ver esto se ve más limpio y fácil de mantener. 204. Sección 18: mejora el rendimiento de sitios web con React Query: Bienvenido a la sección 18 del curso ultimate react. Ahora en esta sección, implementaremos Reac Query en nuestro proyecto final de cartucho Entonces como te dije anteriormente, primero, te voy a dar el ejercicio al inicio de cada lección, y tienes que resolver ese ejercicio con tu cien por ciento. Te quedaste en alguna parte o completas el ejercicio, solo entonces ves la solución. Pero primero, tienes que hacer tu mejor esfuerzo para resolverlo. No te preocupes. No te voy a dar algo nuevo. Ya aprendiste esos conceptos de consulta de reacción en la sección anterior. También por esta sección, te mostraré cómo puedes agregar una consulta de rea en proyecto de reacción existente sin mayor dificultad. Actualizar el proyecto es una cosa que tienes que hacer en tu carrera profesional o freelance. Entonces, ¿estás entusiasmado por mejorar tu proyecto? Empecemos. 205. ¿De verdad necesitas React Query?: Antes de comenzar a actualizar nuestro proyecto react, ante todo, hay que preguntarse, ¿necesitamos esta reacquery o no Porque si tu aplicación no tiene muchos datos para obtener características de API, entonces agregar Requery no tiene Sólo aumentará la carga en tu aplicación. Uno de mis amigos tenía Requery en un pequeño proyecto, que solo tiene dos pequeñas llamadas API, como datos de cinco párrafos ¿Piensas en él? ¿ Toma buenas decisiones? Obviamente no, ¿verdad? Entonces aquí están nuestros tres proyectos. ¿Qué proyectos crees que no necesitan esta readquiry? Derecha. Nuestro primer proyecto, TaS track, no necesita esta readquiry Ahora nuestro segundo proyecto, que es película Maniac, tiene tres llamadas API ¿Deberíamos agregar reaquery en él? Sí, podemos agregar requery en este proyecto porque este sitio web se centra principalmente en los datos API Si los usuarios no obtienen datos de películas rápidamente, entonces cerrarán el sitio web de inmediato. Y como nuestro enfoque principal son los datos API, necesitamos reaquery aunque tengamos tres llamadas API Así podemos agregar requery en nuestro proyecto de película maníaco. Y no necesito preguntarte sobre el Proyecto tres porque también tiene muchas características de búsqueda Entonces así es como tienes que pensar en tu proyecto de reaccionar. Además, en esta sección, solo actualizaremos nuestro Proyecto tres, no el Proyecto dos. primer lugar, en nuestro proyecto cartwih, reemplazamos toda la lógica de obtención con use query, y luego implementaremos rea query para Ahora, antes que nada, tengo que aclarar una cosa es que aplicar toda la biblioteca en proyecto existente es poco confuso porque primero tenemos que tener claro nuestro código anterior, y luego tenemos que agregar nueva biblioteca. Y por eso enseño primero a la biblioteca de consultas de rea con nuestro sencillo proyecto de enrutamiento. Si entiendes adecuadamente la reaquery en la sección anterior, entonces ahora estás en ese nivel para implementarlo en nuestro proyecto cartwis sin No te preocupes. Intentaré simplificar todos los procesos lo que te ayudará mucho. Entonces comencemos a implementar Raquery en nuestro proyecto. 206. Configurar React Query: Ahora, antes de comenzar a usar rea query, primero, necesitamos configurar rea Query en nuestra aplicación de cartucho. Tienes que abrir tu proyecto de cartucho, o si arruinas tu código, entonces obtienes el mismo código que el mío en la carpeta de recursos, código de sección. Y en esa Sección 16, carpeta terminada. Para que puedas seguirme conmigo. Pero asegúrate de cambiar la URL base de tu back end en el archivo de configuración. Ahora aquí en esta sección al inicio de cada lección, te voy a dar un enfoque paso a paso para completar todas las lecciones como ejercicio. Entonces paso número uno, instalar reaquery en nuestro proyecto, y paso número dos, agregar herramientas de reaquary Dao Puedes dar todos estos pasos como tarea de ejercicio. Entonces comencemos con el paso número uno, configurando re aquery en nuestro proyecto Así abre terminal y escribo NPM, yo, adicto, diez SAC, slash reac Query, adt 5.12 0.2, y además instalamos consulta DevTools, así espacio, addit tenga consulta DevTools, a la fecha addit tenga 5.13 0.3. Y dale a Enter. Bueno. Ahora bien, ¿ recuerdas en qué archivo configuramos re query? Tenemos que añadir Requeri en nuestro archivo principal punto JSX. Aquí en la parte superior, importamos cliente de consulta de Ten Stack rea Query y también necesitamos proveedor de cliente de consulta. Además, importamos rea Query DevTools de re query DevTools Ahora, después de nuestras importaciones, creamos una nueva instancia llamada query client equals to new query client. Ahora tenemos que simplemente envolver nuestro componente de aplicación con proveedor de cliente de consulta. Agregar aquí consulta proveedor cliente y mover este componente de cierre después de nuestro componente de aplicación, y simplemente pasamos aquí cliente a cliente de consulta. Y para agregar DevTools aquí después del componente de la aplicación, simplemente agregamos el componente de devTools de consulta de reacción Guarda los cambios y déjame ejecutar mi aplicación usando NPM run Dev Abra el enlace y vea. Aquí obtenemos consulta DevTools. Aquí, configuramos con éxito Raquery en nuestro proyecto. 207. Recupera datos con useQuery: Ahora, actualmente en nuestra aplicación, estamos recuperando la mayoría de nuestros datos utilizando el gancho personalizado de datos de uso Pero en el gancho de datos de uso, estamos administrando manualmente error de datos y la facilidad de carga de la propiedad. Y sabemos que si usamos query, entonces no necesitamos administrar estas propiedades. paso número uno es que usaremos gancho de consulta de uso en nuestro gancho de datos de uso y el paso número dos, actualizaremos todos los componentes en los que usamos use data hook. Primero, actualicemos nuestro gancho de datos de uso. En primer lugar, eliminaremos estas tres variables de estado y eliminaremos este gancho de efecto de uso y eliminemos esta declaración return. Empezaremos de cero. Como hicimos en la sección anterior, aquí devolvemos el uso query hook de nuestra función. Ahora, ¿recuerdas lo que agregaremos dentro de esta consulta de uso? Derecha, agregamos objeto con dos propiedades. La primera es la clave de consulta, y cómo podemos obtener esa clave de consulta a partir del parámetro. Entonces aquí, por fin, podemos obtener clave de consulta. Ahora aquí, podemos pasar esta clave de consulta o podemos eliminarla. Pero para una mejor comprensión, me quedo con esto tal como está. Ahora, agregamos la función de consulta, y aquí tenemos que crear una nueva función para llamar a todas las API de parches. Antes de nuestro regreso, creamos una nueva función llamada función fetch, función arrow, y simplemente volvemos aquí el método Get punto del cliente API Aquí lo que agregaremos, derecho, agregamos endpoint, que obtendremos de nuestros componentes. Ahora, después de eso, si queremos agregar algunos config, entonces también podemos agregar nuestra configuración personalizada aquí, igual que lo hicimos anteriormente, sabemos que esto va a devolver una promesa, así que agregamos entonces método, y aquí obtenemos respuesta y simplemente devolvemos los datos de punto de respuesta. Simplemente podemos pasar esta función, función de consulta. Asegúrate de no llamar a esta función aquí, tenemos que pasar referencia. Ahora, para nuestra consulta de búsqueda, podemos establecer el tiempo 10 minutos para todas nuestras consultas de búsqueda, lo que significa que después de obtener nuestros datos del backend, se mantendrá fresco durante 10 minutos, pero no podemos configurarlo globalmente porque en nuestra aplicación de comercio electrónico, necesitamos obtener los detalles de la tarjeta El usuario puede sentarse por 10 minutos o revisar su tarjeta. ¿Entiendes la situación? Entonces, para cada consulta, podemos establecer diferentes tiempos fijos mediante el uso de parámetro. Entonces aquí agregamos tiempo fijo y por defecto, pasamos aquí 5 minutos, que es 300 K. Y en el lugar de 600 K, agregamos parámetro de tiempo de acero. Y si no tenemos ninguna configuración personalizada, entonces esta configuración personalizada nos puede dar error. Así podemos pasar objeto vacío como su valor por defecto. Además, eliminemos este parámetro de profundidad, y en la parte superior, eliminamos esta primera línea de entrada. No lo necesitamos, y eso es todo. Guarda los cambios, y aquí se hace nuestro primer paso. Ahora bien, si revisamos nuestra aplicación, se estrelló porque cuando llamamos a los datos usados hook en nuestros componentes, no pasamos la clave de consulta No te preocupes, nosotros lo arreglaremos. Por lo tanto, necesitamos actualizar todos nuestros componentes que están utilizando el gancho de datos usado. Ahora puede que tengas duda. ¿Cómo podemos encontrar en qué componentes estamos utilizando los datos usados? Tomará mucho tiempo. No te preocupes. Tengo una plataforma. Aquí en nuestro panel explorador, tenemos este icono de búsqueda. Y aquí, podemos buscar nuestra función o variable, que queremos encontrar en nuestro proyecto. Entonces aquí escribimos datos de uso, y mostrará todas las palabras de datos usados. Pero aquí, puedes ver que está mostrando líneas de entrada y también línea de función. Entonces para filtrarlo más, podemos agregar aquí paréntesis de apertura y ver que nuestra lista se estrecha. ¿Te gusta este truco? Espero que les guste. Úsalo mucho cuando estoy trabajando en grandes proyectos. Ahora, primero, hacemos clic en nuestra primera línea, que está en archivo de producto destacado y C, abrirá ese archivo con resaltados nuestros datos de uso. Entonces aquí agregamos null en segundo parámetro porque no tenemos gunfig personalizado y después de eso, pasamos nuestra clave de consulta, que es productos de matriz y destacados Y aún tiempo a 10 horas porque no necesitamos aquí datos frescos cada vez. Los productos destacados se actualizan después de 24 horas, y eso es todo. Ahora, vamos a comprobar que esto está funcionando o no. Di los cambios y echa un vistazo. Ver, aquí estamos recibiendo nuestros productos destacados. Por lo que nuestros datos utilizados están funcionando correctamente. Ahora actualicemos nuestro segundo componente desde la búsqueda, que es nuestra página Mi pedido. Mismo. Aquí pasamos null para clave de consulta de configuración personalizada a mis pedidos y aún tiempo a 1 minuto porque es necesario Entonces uno en 60 en 1,000, y eso es todo. Guarde este archivo. Ahora siguiente, tenemos lista de productos, pero no la tocamos porque para eso, tenemos que usar consulta infinita. Nos saltaremos esto. Después de eso, tenemos productos barra lateral y aquí agregamos null para config query key dos categorías y todavía tiempo a 24 horas, 24 en 60 minutos en 60 segundos en 100 milisegundos. Razón por la que agregamos todavía tiempo a 24 horas porque también es raro que aplicación de comercio electrónico actualice sus categorías de productos Aquí puede cambiar el tiempo fijo según sus requisitos de solicitud. Depende totalmente de ti. Guarde esto para la última página, que es una sola página del producto, agregue Gun fake personalizado a null, clave de consulta a productos, coma Aquí agregamos ID de producto, y vivimos aún tiempo a su valor predeterminado. Guarda los cambios y echa un vistazo. Vea nuestra aplicación funciona, y me sorprende que también estuvieran obteniendo aquí los datos de los productos, pero la función de consulta infinita no funcionará Así que vamos a revisar nuestro componente de lista de productos. Oh, mira, aquí estamos pasando array de dependencias, y nuestro gancho de datos de uso obtiene esa clave de Squery, y por eso está funcionando para datos pasados Pero tenemos que actualizar aquí con uso en consulta finita. No te preocupes. También es muy sencillo. 208. Implementación de consultas infinitas: Ahora, implementemos la función Infinite Query para nuestra lista de productos. Paso número uno, crearemos un nuevo gancho para usar la consulta Infinite, y el paso número dos, actualizaremos nuestro componente de lista de productos. Empecemos con el paso número uno. Entonces para eso, en nuestra carpeta Hooks, creamos un nuevo archivo llamado nosotros proroductlst Aquí creamos una función llamada use Lista de productos con la función de flecha. Y al final, simplemente exportamos por defecto, usamos lista de productos. Ahora, ¿recuerdas lo que volveremos de la consulta infinita? Derecha, volvemos aquí, usamos consulta infinita. Ahora dentro de esto, agregamos objeto con par de propiedades. Entonces primero es la clave de consulta, que es por ahora, vamos a mantenerla como productos. Ahora función de consulta. Aquí, tenemos que crear una función para llamar a API. Así const productos frescos es igual a la función de flecha, y devolvemos simplemente pi client dot Obtener 0.2 productos slash Y aquí, tenemos que pasar número de página y categorías, que pasamos de nuestro componente de lista de productos. Ver, este objeto tiene todos los parámetros, así que podemos agregarlo directamente como config. En nuestra función use product list, obtenemos ese objeto como digamos query, y simplemente lo agregamos después de nuestro punto final. ¿Recuerdas que hicimos lo mismo en nuestra lección anterior? Ahora, agreguemos este objeto de consulta en nuestra clave de consulta también. Aquí, esta expresión devuelve promesa. Entonces agregamos método y simplemente función de flecha de respuesta, datos de punto de respuesta. Ahora, pasemos esta referencia de función en nuestra función de consulta. Después de la función de consulta, agregamos una propiedad más llamada Get next page param ¿Me puede decir por qué necesitamos esta propiedad? ¿Correcto? Básicamente, esta función manda el recuento de páginas y los datos de fase en consecuencia. Entonces aquí, tenemos que pasar función, que tiene dos parámetros, última página, que es la última página de datos, y segundo parámetro es todas las páginas, que es el array de nuestras todas las páginas. Y aquí simplemente devolvemos condición si la longitud del punto de la última página es mayor que cero, lo que significa que nuestra última página tiene datos, y si es cierto, entonces aumentamos la página, que es todas las páginas longitud de punto más uno, lo contrario devolvemos nulo. Ahora, como sabemos, lo que sea que devolvamos de esta función, obtendremos ese objeto en nuestra función de consulta. Entonces aquí obtenemos ese objeto y lo desestructuramos aquí y obtenemos aquí param de página, y como valor predeterminado, pasamos aquí uno Ahora tenemos que agregar esta página pum en nuestro objeto de consulta, que pasaremos de nuestro componente Aquí, podemos ver que estamos pasando propiedad de página con nuestro número de página. Entonces tenemos que hacer lo mismo aquí. primer lugar, en el lugar de este objeto de consulta, agregamos objeto, y primero, desestructuramos nuestro objeto de consulta, y al final, agregamos página a esta página peram y eso es Guarde los cambios, y llamemos a este gancho en nuestro componente de lista de productos. Entonces aquí en los datos del lugar de uso, llamamos lista de productos de uso. Ahora aquí, no necesitamos pasar punto final. Sólo pasaremos nuestros params. Entonces estoy cortando el objeto params y quitando todas las cosas dentro de nuestra función y simplemente pegarlo aquí Ahora, aquí, no necesitamos este parámetro de página porque ya teníamos esa lógica en los parámetros de la página siguiente de Gt, y además eliminamos esta variable paseed de arriba Comprobemos que nuestro componente está funcionando o no. ¿Puedes adivinar? ¿Correcto? No va a funcionar. Guarde los motores y eche un vistazo. Bueno es una página de producto, y nuestra aplicación se estrelló Vamos a abrir Consola y ver aquí obtenemos error. La página de conjunto no está definida. Entonces en la parte inferior, eliminamos esta función de página establecida. Y lo que agregaremos aquí para obtener los datos de la siguiente página. Bien, necesitamos buscar la página siguiente, que obtenemos del uso de consulta infinita Y también retiramos este gancho de efecto de uso, que fijará nuestra pieza en una sola. Ahora en la parte inferior, en nuestro efecto de uso, llamaremos a esta función fetch next page Los cambios y echar un vistazo. Mira aquí nuestro error se ha ido, pero aun así no obtenemos nuestros datos, así que estamos progresando Ahora aquí, estamos obteniendo el mismo error que obtenemos en nuestra sección anterior. Así que simplemente const dot log nuestros datos. Ver los cambios y echar un vistazo. Ver, aquí estamos obteniendo datos en objeto con dos propiedades, vigas de página, que es la indefinida. Segundo, tenemos páginas que tiene objeto, y dentro de este objeto, tenemos un par de propiedades, página actual, post por página, productos, etcétera Anteriormente, en las páginas, sólo estamos llegando a doce array. Recuerda, estas propiedades son totalmente hasta back end. Entonces en nuestro GSX, antes de nuestros productos de punto de datos, agregamos corchetes Ci, y aquí en data dot pages dot MAP Dentro de estos, obtenemos una sola página, que es nuestro objeto. Entonces aquí devolvemos fragmentos de reacción, y dentro de estos, simplemente movemos nuestro método de mapa, y en el lugar de los productos de punto de datos, agregamos productos de punto de página. Ahora, como sabemos, tenemos que agregar propiedad clave en nuestro fragmento de reacción. Así que nos adherimos reaccionan fragmento de punto. También cerrar este fragmento de punto reaccionar y simplemente adherir clave, que es índice. Y lo pasamos en clave para indexar. Veamos que esto está funcionando o no. Guarda los cambios y echa un vistazo. Aún así, no estamos obteniendo nuestros datos. Aquí estamos consiguiendo que no se puedan leer páginas. Entonces en nuestro archivo, tenemos que pasar las páginas de puntos de interrogación de datos. Guarda esto y mira aquí estamos consiguiendo página no está definida en 43 línea. Así que vamos a comprobar esto. Ver, aquí tenemos página. Entonces, eliminemos esta condición, guardemos los cambios y echemos un vistazo. No obtenemos ningún error, y tampoco obtenemos ningún dato. Ahora, creo que es el tema en nuestro método. Creo que no estamos obteniendo datos porque estamos mostrando aquí productos cortocircuitados, pero eso también es necesario para el cortocircuito A lo mejor estamos haciendo algo mal en el cortocircuito. Verifiquemos esto. Entonces aquí en nuestro efecto de uso, oh, aquí estamos comprobando mal estado. Así podemos eliminar esta condición de los productos de punto de datos y agregar aquí las páginas de puntos de datos. Y además, aquí queremos conseguir todos los productos. Así que aquí están nuestros datos, que es la matriz de objetos. Y en ese objeto, tenemos propiedad de productos, que tiene una matriz de diez productos. Ahora la pregunta es cómo podemos obtener todos los productos simplemente usando el método FlatMap Así que aquí, en las páginas de puntos de datos, que es el método array dot FlatMap Y aquí obtenemos cada página. Y simplemente regresamos aquí página punto productos. Al usar este método FlatMap, no obtenemos una matriz de matrices Todos nuestros productos se agregarán en una sola matriz. Ahora, ya que estamos mostrando directamente los productos Short, así podemos mover esto fuera de nuestro método de mapa, y ni siquiera necesitamos estos datos dot pages dot map Loop. También eliminemos este componente de paginación. Hará que nuestro código sea un poco desordenado. Guarda los cambios y echa un vistazo. Ver, ahora aquí obtenemos nuestros datos. Intentemos cambiar la clasificación. Ver también está funcionando. Ahora vamos a comprobar la función de desplazamiento infinito y no está funcionando Entonces aquí creo que hicimos algo mal fundamentalmente porque nuestra página no está cambiando a dos, lo que significa que podemos algún error en nuestro uso infinito de gancho de consulta. Sí, cometemos un error tan grande. Déjame explicarte. Esto es muy interesante. Entonces, como sabemos, esta última página son los datos que obtenemos últimos de nuestro back end. Aquí, tratamos esta última página como matriz, pero como sabemos, estamos obteniendo objeto de nuestra llamada API. Déjame mostrarte. Entonces aquí agregamos el registro de puntos de consola, última página, y agregamos aquí última página. Los cambios y echar un vistazo. Aquí, podemos ver que la última página no es una matriz. Es objeto que estamos obteniendo de back end. Aquí obtenemos la página actual y la página total es propiedad. Así que simplemente podemos devolver aquí condición como si última página punto página actual es menor que la última página punto total de páginas. Si es cierto, entonces aumentamos nuestro recuento de páginas, que es la última página, punteamos la página actual más una, lo contrario devolvemos null. Los cambios y echar un vistazo. Por qué estoy consiguiendo aquí sólo ocho productos. Creo que nuestro parámetro no está pasando correctamente. Déjame revisar. Aquí se me olvidó agregar propiedad de Perms. Envolvemos nuestro objeto con llaves y agregamos aquí propiedad Perms y la pasamos aquí Guarde los motores y eche un vistazo. Cerremos la consola. Ver. Por último, obtenemos nuestra consulta infinita. Intencionalmente cometo estos errores para mostrarle qué error podría ocurrir en su proyecto. Para que puedas aprender de estos errores cuando implementes usar consulta infinita. Primero, revisas la propiedad de la última página y luego devuelves el número de página siguiente de acuerdo con eso. Ahora podemos hacer esto aún mejor al mostrar esqueletos de cartas mientras se obtienen más datos. Así que en nuestro uso lista de productos gancho, no queremos que esto esté cargando propiedad. Simplemente obtenemos aquí es parchear propiedad, y también obtenemos como página siguiente Ahora aquí en nuestra función de desplazamiento de mango en el lugar de carga, agregamos I fetching, y también agregamos y luego como página siguiente Sólo entonces vamos a buscar la página siguiente. También en el array de dependencias, lo cambiamos a su fetching, y en la parte inferior, aquí cambiamos está cargando a e fetching Usa Gs y toma un. mira ahora nuestra función de desplazamiento infinito funcionando mejor Para que puedas ver cómo implementamos requery para obtener datos infinitos en proyectos existentes Creo que este video va poco largo, así que puedes tomarte un descanso de cinco a 10 minutos, beber poca agua, o tocar algo de música, y luego continuar con esta sección. Nos vemos en la siguiente lección. 209. ¿Deberíamos agregar almacenamiento en caché en AutoSuggestions: Ahora actualmente, si en nuestro proyecto, queremos saber qué API de cara sigue siendo, entonces qué vamos a hacer bien, buscamos aquí. Así que buscamos api client dot Get Method. Mira aquí obtenemos tres archivos. El primero son los datos utilizados, los cuales actualizamos. A continuación, tenemos servicios de tarjetas, que veremos en la siguiente lección, y por fin, tenemos archivo de servicios de producto en que tenemos API para sugerencias. Ahora bien, en mi humilde opinión, agregar gaching en la consulta de búsqueda no es necesario porque a muchas pocas personas les gusta buscar los mismos productos una y otra vez Otra cosa es la razón para agregar almacenamiento en caché en nuestra aplicación es que queremos enviar poco menos solicitud al servidor Y si estamos agregando almacenamiento en caché en nuestra sugerencia automática de búsqueda, no podemos retrasar esta solicitud de sugerencia porque si nos usamos Query para esta consulta, entonces tenemos que llamar a Squery en nuestro componente No podemos llamarlo use effect porque rea query no nos permite hacer eso. Tener la implementación del código si quieres agregarnos consulta en este componente, pero en mi opinión, aumentará la carga en nuestro servidor. Entonces por eso decido no usarnos Consulta para sugerencias de auto. 210. Actualización de la consulta de getCart: Ahora actualicemos nuestra última solicitud de búsqueda, que es Obtener solicitud de tarjeta Para la API de Gecard, utilizamos nuestro gancho de datos usado. En nuestro componente app, aquí llamamos use data y pasamos endpoint como primer argumento, que es card null para objeto de configuración, y por fin, agregamos clave de consulta, que es card y eso es todo. Podemos ver lo útil que es este gancho de datos usado. Ahora como sabemos, esto devolverá nuestros datos. Así que aquí desestructuramos y obtenemos nuestros datos y los renombramos como datos de tarjeta Ahora aquí, como aplicamos el gancho reductor de uso, tenemos que hacer algo como esto. Llamamos aquí UIPechok y al principio, función de devolución de llamada, y el segundo es array de dependencias, y agregamos Ahora dentro de esta función de devolución de llamada, agregamos condición si los datos de la tarjeta no son nulos, disponibles Luego establecemos los datos en nuestra variable CAT usando el método de despacho. Entonces desde abajo, simplemente cortamos este método de despacho de la función Obtener tarjeta, y también eliminamos toda esta función. No lo necesitamos. Ahora, pega esta función de despacho en nuestro UIFecThok y en el lugar de respuesta los datos del punto, lo que agregaremos, agregamos los datos lo que agregaremos, agregamos Ahora en la parte inferior, tenemos este gancho de efecto de uso. Vamos a moverlo en la parte superior después de nuestro gancho de efecto de uso. Este gancho es para refetching los datos de la tarjeta. Pero ahora no tenemos la función Get card. Lo que vamos a hacer simple. Tenemos una función en US query, que es re fetch y en el lugar de Gcard llamamos a esta Guarda los cambios y echa un vistazo. Aquí necesitamos iniciar sesión con nuestra cuenta para obtener los datos de la tarjeta. Consulta aquí obtenemos los datos de nuestra tarjeta. Ahora de nuestro archivo de servicios de tarjeta, eliminamos esta función Obtener tarjeta. No lo necesitamos. Y en nuestro componente app, también eliminaremos Get card API input. De lo contrario, nos dará error. Entonces aquí terminamos con todas las actualizaciones para obtener datos. 211. Mutación para agregar al carrito: Ahora, comencemos a usar mutaciones de uso para mutaciones. Entonces, en nuestro componente app, tenemos tres mutaciones. El primero es de la cabeza a la cesta. Segundo, hemos eliminado del carrito y por último, tenemos carrito de actualización. Entonces comencemos con primero uno de cabeza a carrito. Lo hicimos en sección anterior, crearemos gancho separado para cada mutación. En nuestra carpeta hooks, creamos una nueva carpeta llamada CAT y dentro de esta carpeta, creamos un nuevo archivo llamado used to cart dot js. Ahora, vamos a crear una función llamada use ad to cart, arrow function, y después de eso, exportamos por defecto esta función. Bueno. Ahora a partir de esta función, volvemos usar el gancho de mutación. Y dentro de estos, tenemos que pasar objeto de configuración. Ahora, la primera propiedad es S V conocer la función de mutación. Y aquí, tenemos que simplemente devolver nuestra cabeza a la tarjeta API, que ya tenemos en el archivo Card Services. Ver, aquí estamos regresando directamente promesa. Así que podemos agregar aquí punto entonces método y simplemente agregar datos de respuesta y punto de respuesta. O simplemente podemos cortar esta API desde aquí y también eliminar esta función. Ahora en nuestro uso en para cortar gancho, simplemente devolvemos esta API. Pero aquí, tenemos que obtener parámetro en nuestra función de mutación para este ID y cantidad. Aquí, también, tenemos que envolver nuestros parámetros en objeto. Te voy a explicar por qué en sólo un segundo. Ahora después de nuestra función de mutación, lo que vamos a agregar, derecho, agregamos en propiedad de éxito, y pasamos aquí la función de devolución Ahora, como ya les dije, aquí tenemos dos opciones. Podemos invalidar los datos actuales de nuestra tarjeta, o podemos actualizar nuestros datos de caché. la sección anterior, actualizamos nuestros datos de vendedor de casos porque nuestros nuevos datos de vendedor no se agregan en el back end de marcador de posición de Jasen Pero aquí, nuestros datos de gatos obtendrán s en nuestro back end. Entonces, en lugar de actualizar los datos del caso, simplemente podemos invalidar nuestros datos actuales. Aquí al invalidar los datos actuales de la tarjeta, nos estamos asegurando que nuestro usuario obtenga sus datos de tarjeta frescos Entonces aquí, tenemos que usar query client y ¿cómo podemos hacerlo bien? Al llamar use Query client en la parte superior y simplemente almacénelo en la variable llamada query client. Ahora, en nuestro propio éxito, agregamos query client dot Consultas inválidas. Y dentro de esto, tenemos que objetar, qué propiedad de clave de consulta y qué clave queremos inválida derecha. Invalidamos carrito guardar los cambios, y volver a nuestro componente de aplicación Ahora aquí en la parte superior, después de los datos de uso, llamamos a nuestro uso a la función de carrito. Y sabemos que esto devolverá la variable de mutación. Así que almacenamos eso en variable llamada mutación cabeza a carro. Ahora en la parte inferior, solo necesitamos llamar a la función mutar usando la variable de mutación de cabeza a carrito Ahora vamos a comentar este código, y simplemente llamamos aquí la función de mutación de punto de mutación de cabeza a carrito Ahora lo que queremos pasar al primer parámetro. Podemos comprobarlo aquí en nuestra función de mutación. Ver, necesitamos pasar objeto con ID y cantidad. Así que volvamos a nuestro componente, aquí agregamos objeto e ID al punto del producto subrayado ID y cantidad a cantidad Ahora podría preguntarse ¿por qué pasamos aquí objeto? ¿Podemos pasar por separado ID y cantidad? No, eso no va a funcionar porque como vemos en la sección anterior en función silenciada, tenemos que pasar todos nuestros parámetros en la primera posición en la segunda posición, podemos agregar objeto de configuración con sobre éxito y sobre propiedades de error Aquí, ya agregamos sobre el éxito en nuestro uso de la función de mutación. No lo necesitamos aquí. Aquí, solo necesitamos en función de flecha de error. Lo que vamos a hacer en el error. Revertiremos nuestra tarjeta si algo sale mal en la API cabeza a carrito Ver, aquí ya tenemos un método de despacho para revertir la matriz de tarjetas Entonces simplemente copiamos eso y lo pegamos aquí, y eso es todo. Anteriormente, usamos la variable de contexto porque estamos devolviendo datos sobre la función de mutación. Pero aquí no tenemos mutado, así que podemos hacerlo directamente Guarde los cambios y tome el engranaje. Ahora en la página de productos, hacemos clic en el botón Agregar al carrito, y nuestra aplicación se estrelló Déjame ver en la consola. Ver, aquí no podemos usar la variable de producto antes de inicializar Aquí tenemos error en nuestro archivo reductor de tarjetas. Abra el archivo reductor de tarjetas y en nuestro estuche de cabeza a carrito, aquí estamos usando producto para subrayar ID antes de inicializar la variable de producto Movamos esto antes de esta línea, guardemos los cambios y echemos un vistazo. Aquí, obtenemos otro error para la API de cabeza a carrito que eliminamos. También tenemos que eliminar esta entrada de nuestro componente de aplicación. Guarde esto y ahora funcionará. Vamos a hacer clic en la cabeza al botón Carrito. No pasa nada. Déjame revisar las herramientas de desarrollo de consultas. Vamos a las mutaciones y aquí podemos ver que tenemos error. Comprueben este error. Como sabemos en esta propiedad on error, aquí obtenemos nuestro error y simplemente consola dot log este error. Guarde esto y abra Consola. Haga clic en el botón al carrito, y aquí obtenemos nuestro error y vemos que está diciendo que el cliente API no está definido. Oh, nos olvidamos de ingresar cliente API en nuestro uso de cabeza a archivo de tarjeta, y así es como resolvemos los problemas. Guarda los cambios y echa un vistazo. Déjame cerrar todos estos y dar click en la cabeza al botón Carrito. Mira aquí está funcionando, pero está tomando tiempo actualizarse porque no aplicamos enfoque optimista. Ahora bien, si entendemos que el enfoque optimista es básicamente mostraremos los cambios en nuestro sitio web antes de llamar a nuestro EPI Si la solicitud de API se completa con éxito, entonces dejamos nuestros datos tal como están o los volvemos a engrasar del servidor para su confirmación Y si la solicitud API obtiene error, entonces revertimos nuestros datos Tan simple como eso. Ahora aquí, solo necesitamos actualizar los datos de nuestra tarjeta local antes de llamar a API. Podemos hacerlo usando dos métodos. Primero, tenemos que usar la función mutar, pero dentro de ella, tenemos que escribir la misma lógica que escribimos en nuestro reductor cabeza a carro Entonces, en lugar de usar mutar, podemos simplemente despachar aquí acción con el tipo de acción de cabeza a carrito Mira aquí ya tenemos esta función de despacho, copia esta y pegarla antes de que llamemos a función mutar, simple como eso Ahora también podemos eliminar este código de comentario, guardar los cambios y echar un vistazo. Ver, ahora tenemos un enfoque optimista. 212. Mutación para Remove from Cart: Ahora, agreguemos la mutación para nuestra función de eliminar de la tarjeta. También puede tomar esto como ejercicio e intentar implementar la función de eliminación de la tarjeta. Y entonces, ¿cuál es la solución? Así que aquí creamos un nuevo archivo llamado use remove from cart dot js. Dentro de esto, creamos función, usamos remove from cart equals to arrow function, y al final, exportamos default, use, remove from cart. Ahora aquí volvemos el uso de la función de mutación, y dentro de ella, pasamos objeto de configuración. Y la primera propiedad es la función de mutación. Y aquí tenemos que agregar remove de la tarjeta API. Entonces vamos al archivo Card Services y podemos cortar esta API y también eliminar esta función. Guarde esto. Y en nuestra función de mutación, aquí, devolvemos esta API, y agregamos entonces method, response, y return response dot data, y nos aseguramos de importar cliente API de nuestros Utils porque olvidé importarlo muchas veces cuando copio API de otros archivos Después de eso, agregamos propiedad de éxito. Aquí agregamos la función de devolución de llamada y dentro de esta, tenemos que inválir nuestra consulta de tarjeta Necesitamos aquí consulta cliente y para eso, necesitamos consulta cliente. En la parte superior, llamamos use query client function y almacenamos eso en la variable llamada query client. Ahora vamos a query client dot Invalidar consultas. Dentro de esto, agregamos Objeto con clave de consulta al carrito. Guarda este archivo y en nuestro componente app, después de nuestro uso en TCAT Hook, llamamos use remove from card Hook y lo almacenamos en variable llamada remove from card mutation En la parte inferior, en nuestra función remove from cart, después de esta función de despacho, agregamos remove from cart mutate function Y dentro de este primero, pasaremos objeto parámetro, que es nuestro ID. Oye, ¿agregamos el parámetro ID en nuestra función de mutación? Déjame verificar esto. Ver, aquí se me olvidó agregar destructure object y obtener ID como parámetro Guarde esto y vuelva a nuestro archivo. Ahora después de nuestro objeto parámetro, agregamos un objeto más en el que podemos agregar propiedades. Entonces agregamos error y pasamos la función de error, y dentro de ella, simplemente queremos revertir el estado de nuestra tarjeta Entonces podemos copiar esta función de despacho desde aquí y también podemos copiar esta función de error de punto tostado. Creo que eso ayudará. Entonces los pasamos en nuestra función on error. Ahora podemos eliminar esta antigua llamada a la API. No lo necesitamos. Y además, me gusta agregar esta notificación de error ts en la API head to cart. Guarda los cambios y echa un vistazo a reprimir la página. Aquí nos sale el error. Consolemos esto. Aquí estamos obteniendo nuestros servicios de tarjeta no proporciona una exportación llamada eliminar de la API de la tarjeta. O bien, olvidamos eliminar Import of our remove from card API. Quitar esto. Guarde este archivo y nuestra función de quitar de la tarjeta funciona bien. Ahora pasemos a nuestra última mutación, que es Actualizar tarjeta. 213. Mutación para aumento y disminución: Ahora vamos a implementar nuestra última mutación, que es para aumentar y disminuir. Entonces, antes que nada, crearemos ganchos separados para ambas API, y luego lo llamaremos en nuestro componente de aplicación. Así que en nuestra carpeta de ganchos de tarjetas, creamos un nuevo archivo llamado use increased product dot JS, y como saben, primero creamos una nueva función llamada use increase product with arrow function syntax, y al final, simplemente exportamos default, este uso aumentó la función del producto. Ahora dentro de esta función, devolvemos use mutation hook y agregamos nuestro objeto de configuración dentro de él. Aquí, agregamos la función de mutación a la función de flecha, y necesitamos aquí una mayor API de producto. Entonces vamos al archivo de servicios de tarjetas y cortamos esta API de aumento y la pegamos en nuestra función de mutación. Por fin, tenemos que agregar el método dot VN y tenemos los datos de respuesta y retorno de punto de respuesta. Tan simple como eso. Ahora aquí necesitamos este ID de producto. Así que aquí obtendremos objeto con parámetro ID y nos aseguraremos lo pasaremos en nuestra función mutada en el componente app Y además, importamos aquí cliente API. Ahora, agreguemos otra propiedad llamada en el éxito, y pasamos la función de devolución de llamada aquí Dentro de esta función de devolución de llamada, necesitamos cliente de consulta Entonces, antes de nuestra declaración escrita, agregamos Cs query client equals to here we call use query client function. Se puede ver con qué facilidad estamos haciendo mutaciones en nuestra aplicación. Solo te convencerá cuando lo implementes por primera vez. Después de eso, lo agregarás fácilmente. Sé que ya completas esta lógica de gancho mientras hablo. Así que permítanme completar también este código. Aquí, simplemente agregamos consulta cliente punto consultas inválidas, y dentro de él, pasamos objeto de configuración con clave de consulta de propiedad y pasamos aquí tarjeta, que son los datos que queremos inválidos. Ahora aquí, noto una cosa en la disminución de la API del producto, solo necesitamos cambiar esta API y apuntar que podamos hacer API común para aumentar y disminuir. Creo que será más beneficioso. En primer lugar, cambiaremos nuestro nombre de archivo a nosotros updcard dot js Bueno. Además, cambiamos el nombre de la función, seleccionamos esta y presionamos F dos en el teclado y aquí mismo, usamos Actualizar tarjeta. Ahora aquí en nuestro parámetro de función de mutación, después de nuestro ID de producto, agregamos también tipo de actualización. Y en el lugar de este incremento, agregamos CLIBACKets de dólar, escribimos, guardamos los cambios, y en nuestro componente de app en la parte superior, primero eliminamos estos dos API de los servicios de tarjetas, no queremos eso ahora en nuestro componente, después de nuestro uso eliminado de la tarjeta, llamamos a nuestro uso update card hook y lo almacenamos en nueva variable llamada Actualizar mutación de tarjeta Ahora desplácese hacia abajo hasta la función de tarjeta de fecha. Aquí en la condición I, tenemos que incrementar el producto. Entonces aquí llamamos actualización tarjeta mutación punto mutar. Y en el primer parámetro, lo que añadiremos write, object with parameter. Lo estás haciendo muy bien. Así que aquí agregamos objeto con ID y propiedades de tipo. Recuerde, aquí estamos usando objetos porque tenemos múltiples parámetros para la función de mutación. Ahora, después de nuestro objeto parámetro, pasamos otro objeto para la propiedad on error. Y pasamos aquí la función de devolución de llamada y dentro, simplemente movemos estas dos líneas Ahora vamos a eliminar esta antigua llamada a la API. También, aquí podemos ver para estas dos funciones, estas dos declaraciones van a ser las mismas. Solo necesitamos condición para esta actualización de cantidad. Por lo que podemos mover esta tarjeta de despacho y actualizar la línea de mutación de la tarjeta después de estas dos condiciones if y también eliminar la tarjeta de despacho y la llamada API de la segunda condición I. Guarde los cambios, y también podemos eliminar el archivo de servicios de tarjetas de nuestro proyecto. Ya no lo necesitamos. Ahora vamos a revisar nuestra implementación. Ver, nuestra función de aumento y disminución también está funcionando bien. Entonces así es como implementamos mutación en nuestro proyecto de cartuchos, y definitivamente mejorará el rendimiento de nuestro sitio web. Como les muestro al principio, aquí están antes y después de la comparación. Podemos ver claramente que después readquiry el desempeño de nuestro proyecto es mucho Así que muchas gracias por ver esta sección completa. 214. Sección 19: Despliegue: Ahora es el momento. Hemos completado nuestro gran proyecto, que es la aplicación Card Wish Ecommerce. Actualmente, nuestro proyecto se está ejecutando en el host local, así que vamos a desplegarlo en Internet. Y después de eso, puedes compartir directamente ese enlace del sitio web con tus amigos, y también puedes agregarlo en tu CV o portafolio. Es realmente simple. Así que comencemos el proceso de implementación. 215. Comienzo de la implementación: Ahora comencemos nuestro proceso de implementación de aplicaciones. Entonces aquí en nuestro proyecto, tenemos dos partes, backend y front end Sin backend, nuestra aplicación front-end no es nada. Entonces tenemos que desplegar estas dos partes. Usaremos render para nuestro backend, y para front end, usaremos Netlify Estas son mi elección personal para el despliegue. Si vas a trabajar en alguna empresa, entonces seleccionar el servicio es tu gerente o elección del cliente porque también tienen que ver presupuesto e instalaciones. Primero, subiremos nuestro código en Github y luego conectaremos nuestro repositorio Github con nuestros servicios. No te preocupes por eso. Es realmente simple. Te explicaremos todos los pasos de manera sencilla y fácil. Si desea implementar la aplicación React sin backend, puede omitir las siguientes tres lecciones y preparar directamente la aplicación React para su implementación Pero antes de eso, tienes que subir tu proyecto en Github. Ahora la razón por la que también implementamos backend en este proyecto es que no necesitamos iniciar nuestro servidor local cuando accedemos a nuestra aplicación react En nuestros dos primeros proyectos, solo podemos desplegar nuestro front-end porque en esos proyectos, no tenemos ningún backend o base 216. Agregar la nube MongoDB: Así que actualmente en nuestro backend, tenemos la base de datos local MongoDB Ahora, a medida que implementamos nuestra aplicación, tanto frontend como backend, nuestra aplicación puede acceder por cualquier usuario, pero no todos los usuarios tienen Mongo Dibe Y además, eso no es algo bueno. Los datos de nuestra aplicación deben permanecer sincronizados para todos los usuarios. Así que tenemos que crear nuestra base de datos Mongo Db en la Nube. Por eso, todos los usuarios utilizarán la misma base de datos. Así que dirígete a mongodb.com y simplemente regístrate con Solo tardará 1 minuto en registrarse. Ya me inscribo, así que me sale esta interfaz. Ahora desde aquí, haz clic en Nuevo proyecto y da el nombre de tu proyecto, que es CAT Wish, y da clic en siguiente. Ahora desde aquí, puedes agregar miembros del equipo a tu proyecto. Simplemente haga clic en Crear proyecto. Ahora, haga clic en Construir base de datos. Aquí, puedes ver como plan. Simplemente vamos a la versión gratuita y damos clic en Crear. Ahora aquí obtenemos nuestro nombre de usuario y contraseña para nuestra base de datos. Entonces antes que nada, copio el nombre de usuario y en nota pagada, lo pegamos. Después de eso, copia también esta contraseña aleatoria y péguela también. Este es el paso más importante. Ahora haga clic en crear usuario. A continuación, tenemos que dar acceso a Red, que puede leer y escribir datos en nuestra base de datos. Entonces seleccionamos aquí, damos acceso a la Red a todos. No te preocupes por eso. Simplemente haga clic en terminar y cerrar. Ir a la base de datos. Ahora solo necesitamos dar acceso a la red a todos. Desde cualquier lugar, el usuario puede acceder a nuestra base de datos y obtener productos de ella. En el lado izquierdo, vaya al Acceso a la Red. Aquí tenemos nuestra dirección actual. Haga clic en Editar y simplemente haga clic en permitir el acceso desde cualquier lugar. Esto establecerá nuestra dirección en 0000, que es acceso para todos y haga clic en Confirmar. Esto llevará algún tiempo y verá que está activo. Bueno. Entonces nuestra base de datos está lista. Ahora solo necesitamos conectar esta base de datos a nuestro nodo back-end. Así que volvamos a la pestaña de la base de datos y simplicamente Cconnect. Ahora se como conectar la opción de aplicación. Y aquí tenemos pasos para conectar la aplicación de nodo. te preocupes, simplemente copie este enlace de base y en nuestro código backend Vs, abra el archivo punto NV, y en el lugar de esta tinta Mongo Db local, pegamos nuestra tinta Mongo Di B Cloud Ahora abre no emparejado y copia nuestra contraseña. Volver al código Va, y tenemos que pegar nuestra contraseña en el lugar de esta contraseña. Tenga en cuenta que aquí tenemos que quitar estos soportes angulares también. Guarda este archivo y ya terminamos aquí. Verifiquemos que esté conectado o no. En nuestro terminal, detenga este servidor en ejecución por Control más C o Comando más C y nuevamente escriba el nodo index dot Js y presione Enter. Esto va a tomar algún tiempo y ver aquí nos conectamos a la base de datos. Ahora de nuevo, detenemos este script y ejecutamos los productos de nodo punto js, porque actualmente no tenemos ningún dato en esta nueva base de datos en la nube, y C obtenemos mensaje exitoso. Así que vuelve a nuestro sitio web de MonGov y haz clic en Examinar colecciones Y vea, aquí obtenemos nuestra base de datos y colecciones. Así que conectamos con éxito base de datos Mongo Debi Cloud con nuestra aplicación de nodo 217. Cómo subir proyectos a github: Ahora, veamos cómo podemos subir nuestro proyecto al Github. Si no conoces Github, en definitiva, es un sitio web que permite a los desarrolladores almacenar, compartir y colaborar en código con otros. Github permite a los desarrolladores crear repositorios, o podemos llamar a repositorios donde pueden almacenar su código y realizar un seguimiento de los cambios a lo largo Y esta es la mejor y más fácil manera para que los equipos trabajen juntos en un mismo proyecto sin sobrescribir el código del otro Entonces hay muchas formas de subir código en Github. Veremos la forma más fácil y sencilla, que es mediante el uso de la aplicación de escritorio Github. Así que paso número uno, descarga la aplicación de escritorio Github. Así que dirígete a nuestro navegador y busca aplicación de escritorio Github y abre este enlace de Github. Ahora, da clic en el botón Descargar. Esto llevará algún tiempo. Y después de completar esto, abre la configuración y se inicia nuestra instalación. Si lo abres por primera vez, entonces tienes que iniciar sesión con tu cuenta de Github. Entonces para mostrarte esto, elimino mi cuenta de Github de la aplicación Github. Ahora, paso número dos, tenemos que iniciar sesión con cuenta de Github. Entonces, para Iniciar sesión, vaya a archivos y abra Opciones y haga clic en el botón Iniciar sesión para Github y continúe con Navegador. Por lo que nos redirigirá a la página web oficial de Github. Ahora rellena tu nombre de usuario y contraseña para tu cuenta de Github y haz clic en iniciar sesión. Ahora da click en este escritorio Open Github, y automáticamente redireccionará a nuestra aplicación. No te preocupes. Solo necesitas configurarlo por primera vez. Ahora verifiquemos que iniciamos sesión o no. Así que de nuevo, ve a los archivos y abre opciones. Y en las cuentas podemos ver aquí, tenemos nuestra cuenta Github. Ahora ve a la opción Git, y desde aquí, podemos establecer nuestro nombre y correo electrónico para nuestro Github. Entonces, cuando empujemos cool al Github, otros miembros del equipo verán este nombre y correo electrónico. Asegúrate de seleccionar tu correo electrónico oficial aquí y haz clic en Guardar. Ahora paso número tres, agregando repositorio local. Entonces, para agregar nuestro código al repositorio, vaya al archivo y seleccione Agregar repositorio local. Y a partir de aquí, selecciona la ruta de nuestra carpeta back end. Y selecciona esa carpeta. Ahora aquí dice para crear nuevo repositorio, así que da click en ese enlace, y aquí tenemos que pasar nuestro nombre de repositorio. No te preocupes por eso, simplemente haz clic en Crear repositorio y haz clic en Crear repositorio. Ahora, verifiquemos que teníamos el camino correcto o no. Circlkon mostrando Explorer y C, nuestra carpeta Ben está abierta Así que ciérrala y simplemente haz clic en este repositorio público. A partir de aquí, podemos cambiar nuestro nombre de repositorio y también descripción, esto no es backend para aplicación de cartwage Y también desde aquí, podemos seleccionar la privacidad de nuestro código. Para nuestro uso, por favor no lo hagas privado. Desmarque esta casilla y haga clic en Publicar repositorio. Tomará algún tiempo y listo. Vamos a verlo en Github. Da click en Ver en Github y mira aquí podemos ver nuestro código backend Bajo puedes ver lo sencillo que es subir código en Github. Ahora publiquemos también nuestro front end. Así que volvamos a la aplicación Github, vaya al archivo y haga clic en en Repositorio Local. Seleccione la ruta de nuestro proyecto front-end. Y da clic en Crear Repositorio. De nuevo, haga clic en Crear Repositorio y simplemente haga clic en Repositorio Publicado. Aquí, podemos cambiar nuestro apoame a CartwisFront end. Puedes escribir lo que quieras. Depende totalmente de ti. En la descripción que agregamos, esta es la aplicación React para CartwishPject Marquemos esta casilla de verificación para hacer público nuestro repositorio Podemos en esto desde la página web de Github. Da clic en publicar y ya está listo. Vamos a abrirlo en Github y ver cómo se publica también front end en Github. 218. Implementación de backend: Ahora, desplieguemos primero nuestro backend. Así que dirígete a render.com, y aquí podemos ver el proceso de implementación instantánea Pero antes que nada, registraremos nuestra cuenta desde aquí. Podemos usar Google o Github para el registro, o simplemente podemos usar el correo electrónico y la contraseña. Nos enviará un correo electrónico de activación, y en ese correo electrónico, obtenemos el enlace de activación. Entonces copio este enlace desde aquí y lo pego en nuestra URL. Y conseguimos esta placa de prueba. No te preocupes por eso. Simplemente haga clic en el botón Nuevo. Y aquí seleccionamos servicios web. Ahora necesitamos conectar nuestra cuenta de Gitub. Cl C Conecta Gitub e inicia sesión con tu cuenta de Gitub. Asegúrate de usar la misma cuenta de Github en que publicas tu código de backend Ahora instalemos render en nuestra cuenta de Github. Desde esta página, podemos seleccionar qué repositorio queremos agregar en nuestra cuenta de Render. Puedes agregar todos los repositorios, pero en mi sugerencia, seleccionar solo seleccionar una opción de repositorio. Ahora desde aquí, podemos seleccionar repositorio. Entonces seleccionamos el backend de Cardwig y damos clic en Instalar. Ahora esto nos redirigirá al inicio del Dashboard, y nuevamente hacemos clic en Nuevo y seleccionamos servicios web. Ver, ahora tenemos aquí nuestro repositorio. Simplemente haga clic en Conectar, y obtenemos aquí nuestro formulario. Ahora, antes que nada, aquí agregamos nuestro nombre de aplicación, que es Backend de Cartwig A continuación, podemos seleccionar región y sucursal de nuestro repositorio Github. Ahora para el directorio raíz, agregamos punto. A continuación, tenemos entorno que se establece en nodo. No cambies eso. Y para el comando build, escribimos NPM install. Y para el comando start, simplemente agregamos node index dot js. Ahora desde abajo, seleccionamos nuestro tipo de servicio que configuramos para liberar. Ahora haz clic en este menú desplegable Avanzado y selecciona Agregar archivo secreto y dale un nombre punto ENV Ahora volvemos a nuestro proyecto Bend, y en eso, tenemos archivo ENV en el que tenemos nuestras variables secretas Simplemente copie todo el código en el sitio web de Render, haga clic en el contenido y pegue nuestro código aquí. Ahora basta con hacer clic en Crear encuestas web y ver cómo se inicia el proceso de implementación. Tomará algún tiempo y verá tener éxito, y ahora se está desplegando. Y ver servidor se está ejecutando en este puerto y me sale error en la conexión de Mongo Deb . Déjame revisar esto. Creo que me equivoqué al agregar archivo Secreto. Entonces aquí vamos a la pestaña Medio ambiente, y aquí, déjame revisar el contenido del archivo. Es bueno. Oh, aquí ingreso el nombre de archivo incorrecto. Tenemos que añadir punto ENV. Guarde los cambios y vuelva a la pestaña Registros. Aquí, haga clic en Opción de implementación manual y seleccione Desplegar último comando. Volverá a desplegar nuestra aplicación. Aquí conseguimos construir con éxito e implementar y ver, aquí nos conectamos a la base de datos. Verifiquemos esto. Entonces en la parte superior, aquí obtenemos nuestra URL de back-end, copiamos eso, y en la nueva pestaña, pagamos esta URL barra diagonal API slash Productos y vemos, aquí obtenemos los datos de nuestros productos Por lo que desplegamos con éxito nuestro back-end. Ahora, a continuación, preparamos nuestro front-end para el despliegue. 219. Preparar nuestra aplicación React para el despliegue: Ahora, preparemos nuestra aplicación React para su implementación. Entonces en nuestra aplicación actual, estamos llamando a nuestra API con host local SDTP 5,000, pero este es el back-end local Necesitamos llamar a API con nuestra URL de aplicación implementada, que vemos en nuestra última lección. Así que en nuestra aplicación Carts React, abrimos nuestro archivo cliente API, y aquí definimos nuestra URL base para llamadas API Además, tenemos que actualizar nuestra URL base para nuestras imágenes. Definiremos nuestra URL base en un solo lugar, y al usarla, reemplazaremos nuestra URL anterior en todos los lugares. Entonces en nuestra carpeta fuente, creamos un nuevo archivo llamado config dot JCN y aquí agregamos corchetes Cul y agregamos aquí URL de backend de propiedad Y en valor, copiamos nuestra URL de backend, y la pegamos aquí Guarda este archivo, y ahora reemplazamos todas las URL por él. Entonces, antes que nada, abra el archivo api client dot Js, y en la parte superior, importamos Config desde. Aquí vamos una carpeta arriba config punto jCn. Ahora vamos a eliminar esta URL base, y aquí agregamos de nuevo ticks y agregamos aquí brackets de dólar Cal, config, BN URL, y después de eso, barra diagonal API Guarde esto y abra el componente de tarjeta de producto en la parte superior, importamos los config de. Aquí vamos a carpetas arriba, Config touch y archivo. Ahora en nuestro JSX, reemplacemos esta URL con corchetes de dólar Cul, config dot backend Guarde este archivo y abra un solo componente de producto. Aquí en la parte superior, nuevamente importamos config de. Aquí vamos a carpetas arriba, config punto JS y archivo. Ahora le gusta la URL de backend y presiona Control más D o Comando más D y reemplazarlo con corchetes de dólar Cul y config dot Bend Guarde este archivo y abra la barra lateral del producto. En la parte superior, nuevamente, importamos Config from to folders up, config dot js y file. Ahora, reemplacemos esta URL con dólar Culiackets config dot Guarde este y último componente de página de tarjeta abierta y en la parte superior, importamos config desde dos carpetas hacia arriba, config, toques y archivo. Ahora vamos a reemplazar esta URL por dólar Coli Brackets, config dot Bn URL, y guardar este archivo. Ahora vamos a empujar nuestro código actualizado al repositorio de Github. Así que una aplicación de escritorio Github y seleccione nuestro repositorio front-end como actual. Y aquí podemos ver todos los cambios que hacemos en nuestro código. Aquí mismo, mensaje, actualice Ben URL y haga clic en Commit to Maine luego simplemente push origin, y ya terminamos aquí. 220. Desplegar aplicaciones React: Ahora implementemos nuestra aplicación de reacción en Netlify. Así que dirígete a tontlfy.com, y haz clic en registrarte para Regístrate tú mismo Aquí me registro con mi cuenta de Github y esto va a pedir autenticación. Entonces Clic en autorizar Netlify, y redireccionamos a la página de Netlify Aquí tenemos que responder algunas preguntas comunes sobre Netlify Aquí selecciono obra. Después de eso, selecciono otra cosa, y aquí ingresamos nuestro nombre de aplicación, Cartwis Ahora responde rápidamente a estas preguntas. No importa. Podemos cambiar eso después. Justo al final, haz clic en continuar desplegando. Ahora aquí vamos a usar Deploy con Github, y eso volverá a pedir autorización. Permitirlo, igual que autorizamos a nuestro Github para renderizar. Y después de eso, simplemente obtenemos el proceso de instalación para Netlifi Entonces aquí seleccionamos solo el repositorio seleccionado, y en la parte inferior, seleccionamos nuestra aplicación final CartwgFront y damos clic en Instalar Ahora desde aquí, podemos ver que nuestro repositorio se agrega en Netlifi pincha sobre eso y simplemente nos pedirá desplegar nuestro proyecto Así que da click en eso y nuestro código se inicia inicializando. Puedes ver aquí empezando a instalar dependencias. Esto llevará poco tiempo, y después de eso, se está construyendo y desplegando y todo el proceso está hecho. Aquí obtenemos el mensaje Deploy success, y el nombre de nuestra aplicación está configurado en esto por un momento. No te preocupes por eso. Simplemente haga clic en Comenzar. Aquí podemos ver que obtenemos nuestro sitio web, y este es el enlace de nuestro sitio web. Haga clic en eso y vea que obtenemos nuestra aplicación de reacción. Aquí, la URL de nuestra aplicación es una URL aleatoria. No podemos compartir este enlace con nuestro cliente, derecho. Así que volvamos a nuestro sitio web de Netlify, y aquí tenemos la configuración de nuestro sitio, y también tenemos configuraciones de dominio, así que haz clic en configuración de dominio, y desde aquí, haz clic en Opciones y edita el nombre del sitio Ahora, establecemos nuestro nombre de sitio en algo único, que no es ya una etiqueta. Entonces para ti, tienes que agregar cartdge uno o dos o algo más para que sea único Guarda este nombre, y ahora se cambia la URL de nuestro sitio web. Implementamos con éxito nuestra aplicación en Netlify de forma totalmente gratuita Si quieres eliminar esta app netlify dot, entonces tienes que conectar tu propio dominio con este sitio Si solo vas a usar esta aplicación para mostrar tu trabajo como desarrollador, entonces este nombre está bien. Ahora déjame mostrarte cómo puedes simplemente actualizar tu proyecto. Entonces aquí en nuestro sitio web, queremos cambiar este sitio web, título e ícono Fab. Así que volvamos a VSCode, y en nuestro índice punto stmlFle en el lugar de este título, agregamos la moderna aplicación de agregamos Ahora en nuestra carpeta SS, tenemos el archivo Cartwishpvicon Así que simplemente muévelo en carpeta pública. Y en el lugar de este archivo SVG, simplemente agregamos Cart Wig favicon dot SVG. Guarde los cambios. Y ahora vamos a desplegar estos cambios. Entonces para actualizar la aplicación desplegada, solo necesitamos empujar nuestro código a Github y Netlify detectará automáticamente los cambios, y es por eso que estamos reaccionando proyecto al Así que volvamos a la aplicación Github dextra. Y aquí pasamos nuestro mensaje de compromiso, que es update title, y fab icon, y Commit to main. Y al final, simplemente empujar origen. Ahora, en nuestro sitio web de Netliive, vaya a la sección de despliegue, y aquí podemos ver que está construyendo, y al final, se publica el sitio Vamos a abrir el sitio y ver nuestro icono está actualizado. Entonces así es como implementamos nuestras aplicaciones de reacción. Puede ver que el proceso de implementación es realmente simple y fácil. Solo necesitas subir tu código en el repositorio Github, y luego usando Netlify, implementaremos nuestra aplicación rápidamente Y para actualizar nuestra aplicación, solo necesitamos empujar los cambios al Github, y en los dos a 3 minutos, nuestro sitio se reconstruirá de manera simple como eso. 221. ¡Gracias!: Bien, este es el final de este curso. Fue una buena, ¿verdad? Fue una larga, pero puedes ver proyectos que has creado y también felicitar por llegar hasta el final Sé por las estadísticas que no mucha gente lo hace aquí, pero tú lo has logrado. Estamos aquí al final de este curso. Muchas gracias y sí, nos vemos. Adiós.