Paginación de los Js con datos de API

1. Introducción: Bienvenido a este Curso React JS. Mi nombre es sí entonces cada Audrey y algoritmos dr. En este curso. En este curso, vas a aprender a construir nuestra aplicación React y cómo agregar paginación reaccionar con datos API del mundo real. Como se puede ver que este es el proyecto que vas a construir en este curso. Entonces aquí estamos obteniendo lista de información de un endpoint API y estamos mostrando nuestros datos de API en una vista de tarjeta. Y tan pronto como pase el cursor sobre la tarjeta va a mostrar Pequeño borde en la esquina lateral izquierda. Y en cuanto haga clic en éste, se va a expandir. Y luego podemos ver el resto de la información. En este curso. No solo estás aprendiendo la paginación React, también querrás aprender a agregar plegables mostrados en sillas de reactor. Y si hago click en esto, uno se va a abrir y entonces también va a marcar, así es como implementamos reaccionar colapso de Shun. Y luego en la parte inferior se puede ver esta paginación React aquí. Actualmente estoy en el caso número uno, hay una razón por la que y éste está marcado de color blanco. Y si hago clic en la prueba número dos, entonces estos dos van a resaltar. Y entonces este botón anterior va a habilitar si hay número uno, entonces el botón anterior está desactivado porque antes de uno no tenemos ningún número base. Y al hacer clic en el siguiente botón, también soy capaz de mover una base a otra base y el espacio E que estamos mostrando, estamos mostrando y esta lista de datos. Y luego si todas y cada una de las bases tenemos datos de reembolso que estamos obteniendo de nuestro endpoint API. Y entonces solo podemos mostrárselo a usted puede simplemente filtrar nuestros datos usando nuestra paginación. Así que traté de agregar todo tipo de características de paginación que normalmente vemos en la replicación de preferencias. Entonces si fui a la última base, entonces entonces el siguiente botón va a decibelios. Y entonces también hemos avalado, significa que es mantener el número base. Por lo que al parecer he añadido este número cinco. Entonces si hago clic en él, entonces se va a escapar a este número cinco. Tipo fit se va a mantener al mismo tiempo. Entonces ahora estamos en el caso número tres, y si hago clic en él, así que ahora estamos en el verso número ocho. Por lo que definitivamente puedes cambiarlo como quieras. Entonces en lugar de cinco, se puede mostrar para ver, y también puede cambiar dinámicamente el color, el color fondo, y los diseños de paginación. Hice todo lo posible para explicar todas y cada una de las líneas de código de este proyecto para que entiendas todo y cómo desplegar un proyecto reaccionar JS a Netlify para que personas de todo el mundo puede acceder a su aplicación. Entonces vamos a utilizar una plataforma Cloud para desplegar nuestro proyecto, que se llama Netlify. Se puede ver que esta URL, actualmente, este proyecto es vivir en esta URL en Netlify. También querrás aprender a desplegar este proyecto React JS. Por lo tanto, les animaré altamente a inscribirse en este curso. Nos vemos en la conferencia. 2. Crear React Project: Bienvenido a esta conferencia. En esta parte, vamos a empezar a trabajar en nuestro proyecto React JS. Para eso, ante todo, tendremos que crear nuestro proyecto React JS. Como pueden ver, he abierto mi Visual Studio Code, pero actualmente, no tengo nada aquí porque aún no instalé el proyecto. Entonces en el otoño del directorio, necesitamos importar nuestra carpeta. Entonces lo primero que primero, lo que hay que hacer, solo necesitas crear una carpeta. Por ejemplo, voy a crear mi carpeta dentro de este directorio de carpetas, por ejemplo, la reactividad de videos, un problema con los datos de APA. Y aquí voy a crear una nueva carpeta. Y voy a decir React paginación. Reaccionar la paginación. Y dentro de esta carpeta, tendrás que instalar tu proyecto. Así que ahora lo que voy a hacer, voy a, voy a importar este proyecto en mi Visual Studio Code rápido. Para que puedas ver si haces clic en este icono, te mostrará este directorio de Carpeta Abierta. Así que da clic en Abrir carpeta. Y luego voy a ir a este video y luego este otoño, y este es el nombre de carpeta que he creado. Voy a seleccionarlo. Y aquí tienes. Nuevamente, no tenemos nada dentro de esta carpeta. Como se puede ver, es sólo una carpeta vacía. No tenemos nada dentro de esta carpeta. Vamos a instalar nuestro reactivo proyecto JS. Así es como vamos a trabajar. ¿ Está bien? Simplemente crea una carpeta en cualquier lugar de sus laboratorios, en su computadora portátil o escritorio. Y luego solo importa aquí la carpeta y ahora abre tu terminal. Y vamos a instalar nuestro proyecto React JS. Entonces lo que necesito, voy a tener que escribir aquí, voy a decir NP x y luego Create React app. De acuerdo, así que una cosa debes escribir los párrafos sondeo, por lo que NPH, aplicación React. Y entonces voy a decir que el nombre es cliente. El ejemplo sprint. Puedes dar cualquier nombre, sea cual sea el nombre que des, tu proyecto estará bajo este nombre. Por ejemplo, estamos de frente, estamos trabajando en la paginación. Por lo tanto, la paginación se usa normalmente en el lado del cliente, que es el frente y el lateral. Sigue siendo la razón por la que estoy escribiendo del lado del cliente. Así NP x Create React app client. Y ahora va a instalar nuestro proyecto dentro de este directorio de carpetas. Tomará un par de minutos dependiendo de su velocidad de internet. Y se puede ver que se ha creado la carpeta y el package.json ha creado. Y se va a crear un par de artículos más, par de proyectos más. Y mientras tanto, puedo mostrarles pocas cosas que se requerirán para nuestro proyecto. En primer lugar, te voy a mostrar cómo podemos usar bootstrap en nuestro proyecto. Entonces porque voy a usar alguna parada budista. Por lo que puedo decir Budista fuera. Y se requerirá para nosotros, así que voy a ponerlo de acuerdo. Entonces este es el sitio web oficial, a menudo consiguen personal budista. Y desde aquí se puede leer muchas cosas. Simplemente puedes instalar su paquete NPM. Sí lo tienen, pero la forma fácil es usar el enlace. Para que puedas ver introducción y luego Inicio Rápido. Hay algunos enlaces que necesitaremos. Por ejemplo, éste. Sólo podemos agregar este aquí. Por lo que tienen propiedad CSS y otras propiedades aquí. Entonces por ejemplo, déjame comprobar, descargar código fuente. Por lo que podrían tener un enlace llamado empezar. Por lo que también podemos hacerlo desde aquí. No es un gran tema aquí. Creo que tendremos que copiar éste y luego estos dos archivos que necesitaremos instalar. De acuerdo, para que podamos conseguir nuestro, podemos conseguir nuestro comienzo budista desde aquí. Y vamos a instalar un paquete más, que se llama NPM reaccionar paginación. Así es como usaremos nuestra paginación. Entonces React, paloma ella. Este es el nombre del paquete. Y déjame ver cómo va ahora. Por lo que aún es, tomará unos momentos. Y este es nuestro paquete de paginación que usaremos. Esta es la tenemos esta opción y puedes simplemente leer su documentación si lo deseas, simplemente puedes buenas ideas sobre su característica son las opciones de cómo usar esta? Y tienen par de pruebas que obviamente usaremos en nuestro proyecto. Y te mostraré cómo hacerlo. Qué tan bien significa esta clase de ruptura, con cadenas en peste. Y tienen muchas cosas. simplemente puedas jugar por aquí y luego solo puedes conseguir algunas ideas. Y obviamente te mostraré cómo implementar éste. Y vamos a instalar, instalaremos iluminación. ¿ Qué más necesitamos? Necesitaremos nuestro ícono rojo tan pobre que tengan otro paquete llamado NPM reaccionan iconos. Usaremos iconos de React de este paquete NPM, iconos rojos. Y necesitaremos, necesitaremos nuestros datos API. Entonces estos son los iconos rojos que necesitamos instalar en nuestro proyecto. Y entonces necesitamos otra cosa que es nuestra APA. Entonces usaremos nuestra API pública para que aprendas a usar los datos de APA. Por lo que voy a decir JSON placeholder. Por lo que este es el sitio web desde donde obtendremos nuestro enlace APA gratuito. Y tienen muchas opciones. Por ejemplo, digamos que voy a seleccionar este post. Por lo que vamos a conseguir nuestra APA en datos desde aquí. Contamos con título y cuerpo e identificación. Copiaremos este enlace de esto. Muy bien, por lo que ha instalado módulos Node y un par de cosas se van a sumar aquí. Por lo que te mostraré éste también. Y podría ser útil. De acuerdo, entonces estamos a punto de terminar y creo que nosotros, tenemos todos los paquetes requeridos y te mostraré cómo instalarlo y cómo podemos activar. De acuerdo, Así que para recoger nuestro ícono de tarifas tienen hay sitio web de icono de reaccionar. Creo que esta es su página de inicio. Entonces aquí vamos. No, esta no es la página principal. Tienen un sitio web desde donde podemos atómicamente aquí, de donde podemos conseguir éste, no éste. Puedo decir iconos de React. Iconos aquí. De acuerdo, Así que esta es la página oficial de los iconos de React. Por lo que una vez instalaremos nuestro ícono de reactor en nuestro proyecto, tendremos acceso de todos estos íconos. Entonces podemos usar lo que queramos. Sólo tenemos que importar el nombre. Y entonces va a funcionar en nuestro proyecto. Por lo que es muy fácil de usarlo. Solo toma unos segundos. Muy bien, por lo que nuestro proyecto está listo y él, dice alguna instrucción de cómo ejecutar el proyecto. Por lo que podemos ver este es nuestro directorio de carpetas. Tenemos este AB no sillas y todo otro archivo. Primero voy a ejecutar este proyecto. Por lo que tenemos que pasar a este directorio de clientes. Para ello, necesitamos escribir aquí CD client porque nuestro proyecto está instalado dentro de esta carpeta cliente. Por lo que necesitamos estar dentro esta carpeta cliente para poder ejecutar nuestro proyecto. Entonces para ejecutar nuestro proyecto, necesitamos escribir npm start. Y ahora va a ejecutar nuestro proyecto y podremos verlo en nuestro navegador. Y déjame mostrarte si va a funcionar. Entonces aquí vamos. Este es nuestro proyecto. Espero que vaya a funcionar porque debería funcionar. No hicimos ningún error. Y también podemos ver la actualización y si se obtiene algún tipo de errores, por lo que se va a mostrar aquí. Y también podrás verlo en el navegador. No tengo ninguna idea de por qué se está tomando tanto tiempo. Entonces, mientras tanto, te puedo dar alguna instrucción sobre la carpeta o directorio aquí. Entonces básicamente, trabajaremos principalmente bajo este directorio fuente donde crearemos nuestro componente y todo el archivo. Se puede ver este es nuestro archivo principal que contiene todos los datos en este momento, pero lo modificaremos. Y luego tenemos esta app dot CSS. Y este es el directorio público. Y dentro de este directorio público tenemos nuestro index.html. Y ejecutamos específicamente, cuando ejecutamos nuestro proyecto React en cualquier tipo de navegador, parece que para competir con éxito. Por lo que ahora deberíamos poder ver nuestro proyecto. Entonces aquí vamos. Este es nuestro proyecto de animaciones de reactor. Actualmente no tenemos nada, por lo que tendremos que trabajar en ello. Y voy a detener este video aquí mismo, y seguiremos con la siguiente conferencia. 3. Instalar paquetes React: Bienvenido de nuevo una vez más. En esta parte, comenzaremos a trabajar en nuestro proyecto React JS. En última parte, pudimos ejecutar nuestro proyecto y luego instalamos nuestro React JS en nuestro equipo. Por lo que ahora ante todo en esta parte, voy a instalar todo lo requerido en los paquetes requeridos para que podamos seguir trabajando en nuestro proyecto. Entonces para hacerlo, eso significa robó este 1 primero. Y así tendremos que instalar el ícono de React. Así que simplemente haz clic en estos iconos rojos, pinchando aquí, y luego abre tu terminal y para asegurarte de que estás dentro de tu directorio de clientes. Porque recuerda una cosa, todo tu archivo, todo tu paquete compartido y carpeta dentro de esta carpeta cliente o cualquier nombre de carpeta que des. Por lo que siempre tienes que estar dentro esta carpeta donde instalaste, reaccionarás el proyecto JS y no tu directorio de carpetas principal. ¿De acuerdo? Entonces para hacerlo rápido, me voy a pasar a este directorio de clientes. Entonces cliente ácido y luego voy a pegar npm, reacciono PyCon, y luego se va a instalar. Y podría tomar unas cuantas veces entonces. De acuerdo, entonces se ha instalado, supongo. Ahora déjame mostrarte algo. Entonces si abrimos nuestra, si abrimos nuestro package.json, entonces podremos ver icono rojo ha agregado por aquí. Ahora vamos a instalar React busy-ness. Lo que eso va a hacer eso se requiere para nuestra paginación. Por lo que ahora ya estoy dentro de este directorio, así que voy a pegarlo y luego voy a instalar éste. Y se va a sumar por aquí, reaccionar paginate. Muy bien, por lo que hemos instalado dos paquetes requeridos. Creo que no necesitaremos más paquetes, pero para éste, solo usaremos este enlace normal. Entonces antes de eso, permítanme modificar éste para que podamos entender que nuestros cambios lo van a sumar en nuestros proyectos. Así que ahora todo nuestro código dentro de este app.js. Entonces, lo que básicamente voy a hacer, voy a seleccionar todo, entonces voy a quitar porque quiero eso, ya sabes, todo, cada línea de código que voy a escribir aquí, hay una razón que he eliminado todo el código generado de forma automática que fue creado por React js. Entonces lo primero que primero, necesitamos importar nuestro React desde nuestro React. Y luego voy a agregar una función de flecha. Entonces voy a decir app de consola. Entonces recuerda que necesitas agregar tu nombre f aquí. De lo contrario, te va a dar un error. No significa que no puedas cambiar el nombre de tu componente. Definitivamente lo puedes hacer, pero para eso, tendrás que hacer algunos cambios. Por lo que te mostraré exportación por defecto. Entonces voy a añadir esta app. Entonces a lo que me refiero con esto, así que si abres tu índice A mandíbulas, index.js y aquí tienes tu carpeta de app es tu componente F está conectado y este index.js y básicamente se ejecuta cuando iniciamos nuestro React proyectos JS. Entonces hay una razón por la que te aseguras que eres este nombre de componente es f, o si haces algún cambio aquí, entonces asegúrate de que agregaste este. Y así es como estos reactores en los que trabajamos en este momento. Aquí debemos haber escrito nuestra f. Así que para eso, necesito decir regreso. Y dentro de este regreso. Y tenemos que sumar nuestro, podemos decir React fragmento de puntos porque podríamos agregar varios niños aquí. Entonces hay una razón por la que quiero agregar aquí el fragmento de puntos React. Entonces por ahora, así que por ahora, solo por un ejemplo y propósito de prueba, permítanme añadir una, déjame añadir una cosa aquí. Así que permítanme añadir algunos. Solo por un ejemplo, puedes saludar, React. Y lo voy a salvar. Y ahora si lo ejecutamos, podemos ver Hello React. Ahora es el momento de probar nuestro añadir nuestro trozo budista produce tan rápido. Tendré que añadir este enlace desde aquí porque este enlace nos dará la parte CSS de esta materia budista más de esta clase de arte budista. Por lo que voy a copiar esta para agregar estufa budista y abrir este index.html bajo este directorio público, haga clic en él. Y luego aquí en tu cabeza de éste, necesitas agregar éste. Y debería agregar, debería funcionar aquí. Y luego hay dos archivos JavaScript que puede necesitar dependiendo de la característica del budista o que esté utilizando. Así que sólo voy a copiarlo. No te haces no crear ningún problema. Más bien, obtendremos algún beneficio si se requiere. De acuerdo, entonces estos son los dos enlaces, tres enlaces que puedes obtener de buenas cosas budistas y solo vas a añadir a tu Él va a habilitar budista de características en tu app React. Entonces solo por un ejemplo de propósito de prueba, permítanme definir un nombre de clase aquí. Y entonces voy a decir tarjeta. Entonces coche es budista o propiedad. Si nuestras cosas budistas están funcionando en nuestro proyecto y deberíamos poder ver una tarjeta. Aquí vamos, podemos ver nuestra tarjeta. Significa que nuestras cosas budistas están trabajando aquí. Genial. Entonces ahora, ¿qué podemos hacer? Podemos crear un archivo componente aquí. Dentro de este componente, trabajaremos nuestro proyecto. Podemos decir, podemos decir componente. Pueden decir componente y este componente, podemos crear nuestro diferente archivo y carpeta. De acuerdo, entonces podemos, en primer lugar, primero que nada, vamos a crear un archivo aquí. Vamos a crear un archivo aquí. Y podemos decir, podemos decir, por ejemplo, tal vez podamos decir datos. O podemos decir, Entonces, ¿qué queremos construir básicamente? Básicamente queremos construir un componente construido, construido nuestro sistema educativo. Pero para la paginación, vamos a crear una carpeta separada para ésta, para estos datos, tenemos otra. Digamos, podemos decir aquí. Podemos decir aquí información. Información. Esta información contendrá nuestra información de leads sobre principalmente contener nuestros datos de API. Por lo que podemos ver inflamación dot js. Y ahora voy a habilitar éste. Esto me va a ayudar. Es una especie de fragmento que estoy usando la serie Fourier. Por lo que solo puedes crear un componente aquí que va a ser inflamación. Y entonces sólo podemos hacer éste. ¿ De acuerdo? Ahora bien, si sé lo que necesito hacer, esta información mantendrá aquí toda nuestra parte. O si lo hago por aquí, entonces va a ser parte de éste. Por lo que voy a importar este componente de inflamación que contendrá todos nuestros datos. Y entonces simplemente puedo llamar a esta información aquí. Y podemos ver esta información, podemos ver este texto. Y ahora dentro de esta información, obtendremos todos nuestros datos API y también agregaremos nuestra paginación. Entonces, cualquiera que sea el componente que creas, asegúrate de que esté conectado con tu app.js, que está conectado al index.js. Y así es como va a funcionar. Ahora, no necesitamos estos dos archivos. De acuerdo, así que si quiero, también puedo hacer lo mismo aquí, pero quiero separarlo para que puedas aprender a crear componente y cómo podemos conectarnos unos a otros. Así que primero lo primero aquí, necesitamos, está bien, Así que primero déjame agregar alguna opción decente aquí. No necesitamos esta información aquí. Entonces dentro de este div, voy a crear un nombre de clase. Y aquí puedo decir contenedor. Contenedor. Y este contenedor, contenedor significa, vale, así que no tenemos ningún dato aquí. Por lo que necesitamos agregar H1, puedo decir Get info. Y aquí va. Entonces si agregamos contenedor, entonces va a empezar desde el medio de este todo ajuste. Entonces así es como principalmente la mayoría de las olas que dicho tiene estas características. Y hay una razón por la que estoy usando este contenedor. Ahora, dentro de este contenedor, podemos crear nuestro podemos sumar dos vamos a empezar a sumar nuestros datos. Entonces para eso, primero, voy a crear aquí un archivo CSS. Podemos decir información sin embargo, CSA, Inflamación dot css. Y entonces voy a decir Importación. Y voy a guardarlo aquí ya nuestra inflamación está conectada con ésta. Ahora voy a crear otra carpeta aquí. Y dentro de esta carpeta, dentro de este directorio div, voy a crear un nombre de clase que contendrá todos nuestros datos. Y aquí podemos decir en para el diseño. Entonces este es nuestro diseño de relleno y estos diseño de info, dentro de este diseño de info, tendremos nuestro ACE to Tech, por ejemplo, es siete. Y puedo mandar esa información. Puedo decir lista de información, por ejemplo. Y ahora podemos hacer diseño aquí. Entonces usando el lado izquierdo, pero debe estar en el centro, pero no debería estar en el centro. Entonces lo voy a hacer. Puedo decir, entonces puedo decir A7 y luego puedo decir, acuerdo, Así que debería ser A6, A7. No hay ninguna partícula es siete. Por lo que puedo decir es siete aquí. Entonces A6. Y ahora puedo decir alinear texto, centro y margen, top, y margen tolerando 50 pixel. Entonces aquí tienes. Esta es nuestra lista de información usando el centro y tenemos algún margen de aquí también. Genial. Ahora todo está bien. Y después de eso, este contenedor aquí, tendremos que crear otra carpeta u otro archivo donde mostraremos todos nuestros datos. Y otra cosa que necesitamos sumar nuestra APA tiene, así que para eso, ¿qué puedo hacer? Simplemente puedo crear nuestra variable. Podemos decir const, URL. Y entonces simplemente puedo hacer esto aquí. Muy bien, entonces de esta URL, obtendremos nuestros datos JSON y los mostraremos en nuestra aplicación. Por lo que voy a detener este video justo aquí y seguiremos con desde la próxima conferencia. 4. Obtener datos de API: Bienvenido de nuevo una vez más. En esta parte, trataremos de obtener nuestros datos e intentaremos mostrarlos en nuestra aplicación. Pudimos añadir esta información de lista aquí. Y ahora en esta parte, voy a sumar a nuestros usuarios para enganchar. Eso nos ayudará a obtener nuestros datos de nuestra API. Entonces para eso, necesitamos agregar nuestros usos ese aro y usar ganchos de efecto o utiliza eso. Podemos decir por esto, usa eso. Entonces usa Ted Hope y luego usa efecto aro y luego usa efecto Hooke. Y por aquí, voy tan rápido que voy a crear. En cambio podemos decir const y se puede decir que los datos se van a establecer datos. Y luego podemos agregar usa deuda y va a ser un área vacía porque vamos a conseguir nuestros datos y vamos a establecer nuestra lista de array dentro de esto. Lo utiliza gancho. Y bien, así que aquí voy a crear una nueva carpeta. Voy a decir const lot. Sería mucho API. Serían muchos datos del FBI. Puedes darle cualquier nombre, lo que quieras. Puedes darle cualquier nombre, lo que quieras. Entonces es sólo un nombre de función. Y dentro de esta función voy a añadir Fess. ¿ Qué es rápido? Básicamente, fess es un pre-construido con el navegador. Nos ayuda a obtener nuestros datos del servidor o de cualquier tipo de API. Pero si lo desea, también puede usar ceros, que es n, The Becker's. Pero para mí me encanta usar este y va a hacer todo por nosotros. Entonces fase y desde donde queremos conseguir nuestros datos, queremos obtener nuestros datos de esta URL, que es esta URL. Y se puede ver que este es el punto final de la API. Principalmente decimos cualquier punto final API que tengas, solo puedes usarlo aquí y luego pasa un parámetro. Entonces uno va a ser métodos normalmente es por defecto es método es bueno. Pero si lo deseas, también puedes mencionarlo y conseguirlo tiene cuatro propiedades más, cuatro más. Por ejemplo, GET, post, PUT y eliminar que necesitarás si realizas operación de eliminación u otras cosas, entonces necesitamos, necesitamos convertir nuestros datos en formato JSON. Entonces porque por defecto esta cara no puede convertir nuestros datos JSON, entonces podemos decir que la respuesta va a ser un riesgo bonos dot json. ¿ Qué significa? ¿ Y qué lo decimos aquí? Dijimos aquí, cualquiera que sea la respuesta que estuvieras obteniendo de esta URL de nuestro endpoint API, solo conviértalo en formato adyacente. Y entonces sólo podemos mostrar nuestros datos dentro de nuestra app. Muy bien, entonces ahora puedo añadir otro que aquí. Y entonces puedo decir, si lo tienes, si lo has convertido en formato JSON, entonces podemos conseguir nuestro resultado. Podemos decir resultado. Y luego aquí podemos ver. También podemos adivinar el útero. Si hay algún euro, se puede pensar como escaso. Y entonces simplemente podemos decir, consola dot log va a ser este error. Y voy a añadir éste. Entonces nuestro resultado, quiero decir que nuestros datos ahora están dentro de este resultado. Ahora tenemos que establecer este resultado dentro de los datos establecidos, que son nuestros usuarios para hablar. Por lo que podemos decir que somos si quieres, también puedes agregar una condición aquí. Entonces si nuestro resultado, significa que si obtenemos el resultado, entonces sólo podemos establecer nuestros datos aquí. Y entonces el resultado va a estar dentro de éste. Ahora, nuestros usuarios representaron contener todos estos datos que obtendremos de esta API. Permítanme formatear el código. Muy bien, ahora tenemos que sumar nuestro efecto EU para que podamos decir use Effect. Y luego aquí podemos sumar éste. Y aquí tenemos que agregar un acusado es era de independencia, porque queremos renderizar nuestra API y datos sólo una vez. Si no agregas esta área de dependencia, entonces va a renderizar lo mismo una y otra vez y otra vez. Entonces estamos principalmente, realmente estamos diciendo aquí. Entonces, cualquier dato que obtengas de esta URL API solo afectó o simplemente mostrarlo en acaba de cargar, al menos, solo al menos una vez. No hace falta hacer lo mismo una y otra vez. Ahora voy a copiar esta función y luego la voy a pegar aquí. Genial. Ahora tenemos éste por lo que nuestros datos están listos, pero aún así no podremos ver nada porque no usamos nuestros datos. Entonces déjame explicarte una vez más. Por lo que básicamente creamos un usuario para enganchar y estamos obteniendo nuestros datos API usando esta URL de fase. Y entonces solo estamos diciendo que si obtenemos nuestros datos, simplemente, solo añada estos datos en nuestros usuarios para hacer. Ahora, podemos acceder a nuestros datos utilizando estos datos. Para hacerlo, por ejemplo, puedo agregar, solo puedo probarlo. Se puede decir, se puede decir, supongo que es sólo algún punto stringify. Y luego estos datos, por lo que nos dará el formato JSON de nuestros datos solo para fines de prueba en caso de que lo consigamos. Entonces podemos ver que tenemos todos nuestros datos de esta API y encontrar, pero esta no es la forma de mostrarlo obviamente. Y definitivamente formatearemos nuestro código y agregaremos absorción de color o algunas otras cosas que vamos a hacer aquí. No te preocupes, significa que somos capaces de obtener nuestros datos. Y en la siguiente parte, vamos a mostrar nuestros datos en nuestro formato de diseño y lo haremos más legible por humanos. Así que te voy a ver en la próxima conferencia. Adiós. 5. Mostrar datos de API en una tarjeta: Hola, bienvenidos de nuevo una vez más. En esta parte, diseñaremos nuestros datos e intentaremos mostrarlos en una tarjeta. De acuerdo, Entonces, ¿cómo podemos hacerlo? ¿ Para hacerlo? Quiero quitar esta porque ya no necesitamos esta cosa. Por lo que ahora de aquí, podemos sumar nuestro descenso, descender parte. Por lo que ahora podemos ver que no tenemos nada en nuestra lista. Entonces, ¿cómo podemos agregar nuestro diseño aquí? Entonces, ante todo, lo que quiero tener, quiero crear una primera. Tenemos que movernos a través de nuestros datos que estamos obteniendo. Así que vamos a conseguir nuestros datos de aquí. Puedo decir ese mapa de puntos delta, necesitas mapear a través de nuestros datos y puedo decir d. y puedes añadir cualquier nombre, lo que quieras. Y luego voy a añadir la posición de índice aquí. Y a partir de aquí, podemos hacerlo. Ahora. Puedo ver este div, y luego también puedo ver estos tiff. Entonces ambos son iguales aquí y ahora aquí voy a añadir un nombre de clase. Y nombre de clase puedo decir tarjeta. Y sólo por un propósito de ejemplo, voy a añadir, voy a añadir título. Puedo decir título. Y veamos qué podemos ver aquí? Por lo que podemos ver esto apretado aquí y también podemos ver este carrito. Pero esto se ve muy mal y necesitamos arreglarlo para que podamos agregar y diseñar opción aquí. Entonces hay dos formas de hacerlo. O simplemente podemos crear un nombre de clase aquí, y luego podemos llamarlo en este archivo CSS u otro es hay una propiedad en React que se llama estilo. Y entonces simplemente puedo añadir doble corsé rizado. Y luego si quiero, puedo añadir margen. Y entonces este margen va a ser de diez píxeles. Ahora también podemos ver este margen, diez píxeles, y luego también podemos añadir relleno aquí. Puedes hacer casi todas las propiedades CSS aquí. Podemos decir diez píxeles. Aquí se va a sumar algún objetivo de relleno. Para que puedas agregar cualquier diseño CSS dentro de esta línea. Pero si solo estuvieras usando algo simple, diseño afilado, entonces puedes hacerlo. Pero si estás usando muchas cosas, entonces simplemente puedes separar esta aquí. Así que simplemente puedo decir que el diseño de tarjetas no lo es, esta no es una clase separada que voy a crear. Y lo voy a añadir aquí. Ahora, si miro el navegador, se puede ver que no tenemos ningún diseño ahora. Por lo que puedo decir margen de diez píxeles, y luego el relleno va a ser de cinco píxeles. Entonces tenemos este título, tenemos esta ropa de cama, y tenemos este margen. Ahora podemos reemplazar nuestro este título por estos datos, con este título y cuerpo. ¿Cómo puedo hacerlo? Para ello podemos sumar, en lugar de este título, simplemente podemos decir este título y recordar que hay que escribir el mismo nombre. Lo mismo es ser lo que sea en APA. Entonces va a ser título aquí, Rico. De acuerdo, entonces el título está más definido porque nuestros datos están en éste, por lo que necesitamos escribir dy dt o título. Ahora podemos ver nuestro título desde nuestra API. Qué genial es. Una cosa que quiero personalizarlo aquí en lugar de esto es que yo es una. Voy a hacer que sea un seis para que se vea más pequeño y agradable. Genial, se ve realmente genial. Y otra cosa que podemos hacer aquí, podemos hacer ¿qué podemos hacer aquí? Podemos añadir aquí una etiqueta p para el cuerpo, quiero decir, para el texto principal. Y hay uno que puedo decir, que es la propiedad, ¿cuál es el nombre de la propiedad? El nombre propio es cuerpo. Puedo decir este cuerpo, DIE hija, cuerpo. Y aquí vamos. Así que ahora tenemos nuestro título, obtuvimos nuestra descripción de nuestra API. Significa que si lo desea, también puede recuperar este ID. Eso no es un problema. Se puede obtener cualquier cosa de la, de la API, sea cual sea la comida que hayan agregado algún d dot id Ahora podemos ver nuestro ID aquí. Ver Heidi, 123456789. Genial, pero no necesitamos tener esta identificación aquí. Ahora, esta es la única forma de hacer diseño de tu tarjeta para agregar datos API en tu proyecto. Ahora hay otra forma de hacerlo y ¿qué es? Y entonces ahora estamos haciendo todo en este único archivo, cual no es bueno para nuestros proyectos. Por ejemplo, estás trabajando en un gran proyecto, entonces va a ser difícil para ti manejar todas estas cosas. Entonces para eso, separaremos esta parte de diseño en un archivo de componente diferente, y luego la agregaremos en nuestro componente aquí y lo mostraremos aquí. Esta es la forma más fácil que la mayoría de la empresa lo hace. La mayoría de la gente lo hace. Y ahora voy a detener este video aquí mismo. Y te mostraré a partir de la próxima conferencia. 6. Mostrar API Data y Diseño de Tarjetas: Bienvenido de nuevo una vez más. En esta parte, crearemos nuestro componente separado para nuestros datos y luego mostraremos nuestra información. Cómo puedes hacerlo actualmente, tenemos toda nuestra información aquí y se ve bien, totalmente bien. Pero quiero mostrarte algo más. Voy a crear un nuevo archivo, nuevo componente llamado data, o podemos decir mostrar datos lo que quieras, luego js. Y luego voy a crear este componente. Entonces mostrar datos, y este show data va a contener toda nuestra información. Entonces voy a decir React dot, fragmento de puntos dentro de este objeto fragmento de puntos. Entonces lo que tendremos que hacer básicamente aquí, tendremos que sumar esta parte en nuestro diseño. Por lo que hay que añadir este aquí. Así que muestra datos, voy a decir, vale, lo siento, no necesitamos éste porque ya tenemos esta def dentro de ésta. Entonces voy a sumar éste. Genial. Por lo que ahora tenemos esta tarjeta, diseño de tarjetas, título y cuerpo. Y aquí no tenemos nada. Ahora, ¿qué pasa con el diseño? Teníamos antes para éste, y obviamente nos va a dar un error para éste. Ahora, es en este componente, no hay duda es que cómo vamos a acceder a estos datos por aquí en este componente para eso, necesitamos pasar nuestros apoyos. Así que agrega doble corsé rizado y agrega título. Y luego agrega cuerpo. asegura de que el mismo título con el mismo nombre que estás usando que tenemos en nuestra API. O también puedes cambiar la fuente, entonces tendrás que hacerlo. En otras palabras, ahora no necesitamos tener en el título d dot, más bien solo necesitamos decir título y luego solo tenemos que decir al respecto, ¿de acuerdo? Aquí no hay nada más cambios. Va a funcionar en esta parte. Y ahora podemos llamar a nuestro, podemos importar nuestro componente show data. Por lo que podemos decir Importar mostrar datos. Ahora bien, estos datos contienen todos nuestros datos. Entonces, ¿qué podemos hacer? Básicamente, simplemente podemos llamar a estos datos. Y podemos ver éste aquí. Ahora vamos a ver ¿qué podemos ver? Así que ahora tenemos una tarjeta 100, pero no tenemos ningún dato aquí. Tenemos 100 cadetes, cierto. Tenemos una tarjeta 100 porque solo estamos renderizando este componente, que es este componente. Y, pero no estamos recibiendo ningún dato porque no agregamos nuestros datos aquí. ¿ Cómo podemos agregar estos datos? Por lo que primero tenemos que agregar una clave. Entonces déjame mostrarte qué significa esta clave. Entonces si hago clic derecho y si abro mi consola, entonces podrás ver me está dando un error y dice que cada niño en un contrato de arrendamiento debe tener una clave única de utilería. Por lo que necesitamos tener una clave única. Entonces, qué tipo de clave queremos que tengamos, por lo que podemos decir key d o id Entonces porque el ID es único, para que puedas ver esto, podemos usar esta clave. Y luego si refresco éste, entonces ya no deberíamos recibir este error. Mira, el euro se ha ido. Podemos ver éste. Ya hay un error. No, estás bien. Genial. Pero aún así no tenemos ningún dato porque no lo agregamos. Entonces ahora lo que son nuestras sondas son profecías estos título. Podemos hacer esto de esta manera. Podemos hacer esto. Esto podemos decir título, que es nuestro beneficio, es igual a nuestro Indeed o título. Así d dot título. Y ahora va a mostrar nuestro título. Entonces otra cosa es notable aquí es que este título indica el título de tu componente. Entonces, si estás usando de esta manera, por ejemplo, si estabas haciendo este tema de esta manera, ddo title, entonces no necesitas escribir exactamente el mismo nombre del título de la API. Puedes añadir cualquier nombre que puedas ver. Podemos decir nuevo título y solo asegurarnos de que esté utilizando este aquí. Y luego también aquí, este nuevo título y título de ddo. Entonces sigue, vamos a conseguir nuestro estado, vamos a conseguir nuestros datos. Entonces, ¿por qué es porque que aquí estamos diciendo esa escritura o título y este título es nuestro título de datos API, que es coincidencias aquí. De acuerdo, entonces si lo estuvieras haciendo de esta manera, entonces no es necesario agregar éste. Pero hay otra forma. Por ejemplo, dejas decir que tienes 100 artículos, 100 artículos que estás obteniendo de un APA. Entonces, ¿harás esto? Escribirás esto un 100 cosas de esta manera. Obviamente no para eso tenemos otra alternativa y la solución. Entonces qué vamos a hacer, pasaremos esta lista de columnas y luego vamos a usar un operador de spread y luego vamos a pasar esta d. Entonces, ¿qué hace esta d? Entonces como ya sabes que esta D contenía todos nuestros datos API. Y qué decimos que dijimos es liberado o D, significa que vamos a sumar todo en este componente es algo parecido a lo contiguo. Ahora, si Abro React, entonces ¿qué podemos ver? Podemos ver nuestro modelo corporal, podemos ver nuestro título. Y si nos fijamos aquí, este texto está contenido en el primer ítem. En el primer ítem de éste, este cuerpo, y este es el segundo cuerpo. El segundo órgano se debe a que conocí cambios en el título. Ok. Entonces si lo cambié a título, entonces deberíamos poder ver nuestro, deberíamos poder ver nuestro texto, nuestro título, puedes ver ahora tenemos nuestro título, tenemos nuestra descripción. Por lo que esta es la forma en que puedes usar esta. Por lo que ahora podemos ver acabo sumar un mes antes, estaba escribiendo este título, luego igual que, que amplitud de colega que d dot title name. De esta manera tuve que hacer todo para poder hacerlo en esta línea en lugar de escribir dos o cuatro veces, tal vez un 100 veces, basado en su diseño API. Genial, se ve bien. Ahora quiero tener algunas otras características. Por ejemplo, quiero mostrar el título rápido, y en cuanto haga clic en que quiero mostrar, quiero mostrar el colapso de Sean. De acuerdo, tan tipo de colapso han demostrado que básicamente vemos en diferentes tipos de aplicación. Por ejemplo, puedo decir cómo mostrar colapso aquí. Entonces en el Google tienen en esta opción de colapso, vale, así que si hago clic en ella, se va a abrir la ventana y va a mostrar los detalles. Si hago clic en él, se va a esconder, se va a abrir, se va a esconder se va a abrir, se va a acrecentar las mismas fotos. Te voy a mostrar cómo lo implementas en este proyecto. De acuerdo, entonces lo haremos, comenzaremos a trabajar en ello a partir de la próxima conferencia. Y voy a detener este video justo aquí y verte en la próxima conferencia. 7. Características del colapso de la tarjeta: Bienvenido de nuevo una vez más. En esta parte, trataremos de sumar nuestro colapso de Sharon. De acuerdo, entonces la cosa es que sólo quiero mostrar este título en nuestra tarjeta. En cuanto esté listo, haremos clic en el icono o lo que sea en esta tarjeta. Entonces les mostraremos este o este texto de detalles para que puedas aprender a usar el colapso de Sean en los reactores. Entonces para hacerlo, se puede ver que actualmente esta parte va a contener nuestra sección de diseño. Aquí. Voy a agregar un gancho de estado de usuario. Voy a decir usar un estado. Aquí. Necesito definir el estado. Por lo que puedo decir const va a ser un booleano en su lugar. Yo puedo, puedo decir const. Se va a configurar show que puedas dar cualquier nombre lo que quieras. Y va a ser usado como muerto. Y en un principio va a ser falso. ¿ De acuerdo? Y en un principio va a ser falso. Por lo que ahora la cosa es que cuando el usuario haga clic en esta tarjeta, usted puede hacerlo de muchas maneras. Por ejemplo, vamos a simplemente hacer click en el carrito o podemos añadir el ícono aquí. O puedes hacer algunas otras cosas. Entonces lo haré de esta manera. Entonces si es falso, entonces no queremos mostrar textos de este cuerpo. Si es cierto, entonces sólo queremos mostrar los textos de ese cuerpo. Entonces, ¿cómo podemos hacer esto? Para que podamos hacerlo de esta manera. Simplemente podemos decir, vale, así que podemos simplemente decir, solo por ejemplo, si este show es cierto, si este show es cierto, entonces sólo vamos a mostrar nuestra tecnología corporal. Sólo mostraremos la información de nuestro cuerpo. De acuerdo, voy a formatear este. Para que podamos pasar esta operación final así como podemos pasar a nuestro operador ternario también. Ahora, aquí no tenemos estos detalles información porque la declaración es falsa y lo estamos. Por lo que dijimos que si es cierto, entonces sólo podemos mostrar éste. Permítanme cambiarlo verdadero o falso a verdadero. Entonces deberíamos poder ver éste. Se trata de los textos corporales. Entonces, ¿a qué me refiero con túnel de operador ternario? Tu retrato es algo así. Si es cierto, entonces queremos mostrar este rendimientos. queremos mostrar nada que va a ser un nulo, ¿de acuerdo? Se va a mostrar, y si lo voy a añadir falso. Y luego podemos volver a ver este aquí. A esto se le llama el operador ternario. Por lo que básicamente puedes usar operador ternario cuando tengas dos condiciones. Por ejemplo, si es cierto quieres mostrar algo o quieres mostrar algo. En ese caso, se puede utilizar operador ternario. De lo contrario, también se puede utilizar el operador final va a ser de la misma manera. Por ejemplo, si quiero decir, es falso, si quisiera mostrarle aquí a este Stadman. Entonces ahora podemos ver que es falso es falso es falso porque la primera condición no es cierta porque ésta es falsa ahora, y si digo verdad, entonces va a mostrar la etiqueta corporal, el contenido, contenido principal. De acuerdo, así es como funciona este operador ternario. Entonces para éste, solo usaré, ¿de acuerdo? Solo usaré este operador AND, pero definitivamente lo puedes hacer usando de esta manera. Pero si solo quieres mostrar solo una condición, entonces es mejor usar este extremo de la segunda parte. Entonces no tendrás que agregar este colon o nulo va a trabajar aquí, y luego voy a añadir esto a false. De acuerdo, entonces ahora nuestro plan era agregar el ícono por aquí. Ok, qué ícono queríamos agregar. Así que vuelve aquí y luego puedo decir estrellas aquí, icono de flecha. Se puede ver que hay tantos iconos que podemos elegir de aquí. Flecha, vale, podemos elegir, podemos elegir este ícono, supongo, o este ícono, o creo que podemos elegir éste. Yo uso es éste y éste. Por lo que voy a seleccionar éste. Y sin embargo podría hacer, podría tener algún otro icono en lugar de color plano yo consola tenían este icono de color. Podemos conseguir algunos, vale, bueno, yo elegiría éste de aquí porque es el icono de color, así que no tendremos que hacer ningún color éste podrían tener el inferior uno también usa LED está en la derecha. ¿ Dónde está la de abajo? Creo que no tienen el de abajo. Tienen el siguiente, tienen el anterior. Tienen tienen se expanden, tienen. Éste. Por lo que estos dos voy a sumar. Entonces antes de eso necesito agregar éste. Y necesito importar éste aquí. Y luego dentro de estos necesito agregar esta opción que va a colapsar FC. Entonces FC colapso y se puede ver fc y fc ya está ahí. Por lo que sólo hay que añadir éste. Y si usas otro, otro icono, si tiene nombres diferentes, entonces solo tienes que arriesgarlo ahí dentro. Y éste va a ser exponencial. Y éste está aquí. Entonces solo para reaccionar, puedo reenviar las dos primeras letras que necesitas escribir, por ejemplo, a lo que quiero decir con eso. Entonces si uso, desde aquí, puedo, si usas esto, entonces puedes ver este BS. Por lo que siempre son las dos primeras letras de cualquier icono que vas a usar. Un verdadero ícono para inútiles porque siempre va a funcionar. Por lo que ahora quería mostrarlo de esta manera. Nuestro título y nuestro ícono deben estar en la esquina derecha. De acuerdo, Entonces, ¿cómo podemos lograr éste a éste, voy a crear un div. Y dentro de este div quiero poner este título. Y voy a crear un nombre de clase. Aquí. Puedo decir, puedo decir icono de colapso, icono de colapso. Y aquí vamos a tratar de poner nuestro ícono. Entonces voy a añadir una etiqueta aquí. Y solo necesito agregar esto, éste rápido porque FC expande cómo usamos. Sólo tenemos que llamar a este nombre y tiene una propiedad. Ahora deberíamos poder ver el ícono. Se puede ver este ícono está aquí, pero debe ser la esquina lateral derecha. No te preocupes, lo lograremos. Y para hacerlo, así es como usamos ícono React en nuestra f y tiene una propiedad llamada size. También vamos a usar esta celda omega1 tamaño 30. Va a ser de mayor tamaño. Creo que no necesitamos tener, en tercer lugar, necesitamos tener sólo 20. Y entonces estas columnas se han ido. Estas columnas icono va a estar aquí. Y puedo decir icono de columnas, puedo decir justificar contenido, el espacio entre y la pantalla va a ser flux va a venir en la esquina lateral derecha. Gol. Por lo que ahora hemos logrado éste. Podemos hacerlo, podemos hacer algunas otras cosas. Por ejemplo, sólo para ser un contenido y se puede decir alinear. Quizás alinear los artículos en el centro. O creo que no necesitamos hacerlo, ya está ahí. La tarjeta no es tan grande. No tenemos éste porque ya estamos usando justify-content aquí. Tan cool. Ahora, ¿qué podemos hacer? Podemos agregar un puntero de cursor aquí. Podemos agregar puntero de cursor. Entonces tenemos esto, pero actualmente no va a funcionar, por lo que necesitamos que sea colapsable cómo lo hacemos. Ahora vuelve aquí. Y entonces aquí podemos definir una, podemos crear una función. Podemos decir const, const, show item. Puedes dar cualquier nombre, lo que quieras. Entonces aquí podemos decir set show va a ser no igual a mostrar. De acuerdo, entonces hay dos formas de hacerlo. Por ejemplo, aquí estamos diciendo que sea lo que sea, simplemente hazlo opuesto. Pero tenemos que hacerlo, podemos crear otros dos componentes porque una vez que esté abierto, tendremos la posibilidad de que cambie el icono de color del icono, y luego una vez que sea clubes, y luego lo haremos en de esta manera. Así que déjame mostrarte lo que quiero decir con esto. Tan rápido. Copia éste y luego agrega un onclick aquí. Onclick. Entonces aquí quiero hacer una pausa esta. Puede simplemente pausar esta función aquí que acabamos de crear. Y ahora podemos ver colapso. Y si hago clic en esta noticia que va a esconderse, esto está abierto. Y si vuelvo a hacer clic, entonces se va a ocultar. Si está abierto y es alto, abierto, los ojos abiertos y luego se esconden. De acuerdo, por lo que nuestra absorción de llamadas está funcionando. Pero ahora lo que quiero, quiero tener cuando esté abierto, quiero cambiar el ícono. Y luego cuando le hagan click, entonces sólo nosotros podemos ocultarlo, no el mismo ícono. ¿ De acuerdo? Entonces para esto, qué puedo decir en lugar de esta manera, simplemente puedo decir cuándo o bien haga clic en él donde quieras hacerlo realidad. ¿ De acuerdo? Y ahora es cierto, pero esta llamada absorción no está funcionando aquí. Y ahora podemos hacerlo dinámico este ícono también. Si es cierto, si es cierto, si está bien, también podemos hacerlo de alguna otra manera. Por ejemplo, no se muestran y luego podemos simplemente cambiar el color del icono de color, entonces también va a funcionar. Entonces en lugar de escribir dos líneas, así que déjame intentar si va a funcionar de esta manera. Entonces podemos justo enfrente de éste, lo que sea que tengamos, queremos hacerlo. Y luego aquí podemos cambiar el ícono. Podemos decir, si el show es cierto, si la orilla es cierta, entonces queremos mostrar esta opción de colapso. Eso significa que queremos tener en éste. De acuerdo, entonces el tamaño va a ser 20. Si es cierto, eso significa que nuestro, nuestro estado está abierto. Significa que el determinante es cierto. Entonces queremos mostrar este ícono de colapso. Si no es cierto, entonces queremos mostrar éste aquí. Si es cierto, entonces queremos mostrar éste. Y si no es cierto, entonces queremos mostrarnos bien, así que lo agregué en el lugar equivocado. Debería estar fuera de éste. Y aquí vamos. De acuerdo, entonces, ¿qué decimos que si nuestra finca es cierta, queremos mostrar este ícono de colapso. De lo contrario queremos mostrar este icono de expandir. Veamos, nuestra finca es falsa ahora. Entonces nuestro constante falso, así la zona que estamos mostrando, en cambio, este icono de expandir, si hago clic, entonces nuestra finca es verdadera, y luego estamos cuadrando este ícono. Entonces si hago clic en él y luego va a bajar. Si hago clic en él, se va a bajar. De esta manera. También se fue a trabajar para ti. No hay problema en absoluto. Podemos ver, podemos hacerlo de esta manera, y también podemos hacerlo de esta manera. Otra cosa es que, por ejemplo, si quieres hacer esto clickable en toda la tarjeta, por ejemplo, actualmente si voy a hacer click en ella, no va a funcionar. Por lo que quieres, al hacer click en esta carta, quieres contraer esta opción en lugar de solo este ícono, entonces ¿qué podemos hacer? No necesitamos hacer mucho más cosa. Simplemente corta este onclick y agrega esto onclick en el carrito principal, que es nuestro descarte. Y luego si hago clic en él, entonces va a funcionar de la misma manera. Hasta el ícono va a cambiar. Entonces así es como se puede agregar esta absorción de color. Y otra cosa que podemos hacer aquí, podemos añadir un poco de personalización, diseño y el sistema de rebajas. Por lo que te mostraré en la próxima conferencia. Adiós. 8. Tarjeta de colapso de resaltar: Bienvenido de nuevo una vez más. En esta parte, te mostraré cómo podemos resaltar nuestra tarjeta que está abierta, bien, ¿y cómo podemos cambiar nuestro apellido dinámicamente? Vale, entonces una cosa que se nota aquí, así que este es el nombre de clase que nos está dando este diseño. Entonces si miro aquí, diseño de tarjetas, tiene relleno de margen. De acuerdo, así que primero lo primero, déjame agregar una propiedad aquí. Así diseño de tarjeta dot hover. Entonces cuando pasemos el cursor, quiero mostrar esto aquí. Por lo que quiero destacar esta cosa. Puedo decir frontera. El borde que queda va a ser tal vez de tres píxeles. Únicamente. Puedes sentarte color tomate. Puedes elegir cualquier color, lo que quieras. Para que puedan ver cuando resalto éste, cuando me desplace, éste, va a distinto. Pero, pero cuando está abierto, entonces todavía se hace. Todavía está hecho. Debe ser este color, debe tener este color marcado. ¿Cómo podemos hacerlo? Lo haremos. Pero para ellos, permítanme aumentar el tamaño de la frontera. Entonces, está bien, por lo que el tamaño del borde, tamaño es ahora de cinco píxeles y se ve realmente genial. Pero quiero lograr éste cuando, cuando nuestro estado esté abierto, cuando esta carta esté abierta, ésta debería estar marcada de esta manera. Ok, ¿Cómo puedes hacerlo? Por lo que sí podemos querer esta cosa de esta manera. Por lo que tenemos que hacer que este sea dinámico. ¿ Cómo, a qué me refiero por dinámica? Podemos sumar el mismo operador ternario. Tan mismo estado en nuestra clase. Si nuestro JT es cierto, queremos marcarlo, marque éste. De lo contrario queremos mostrar éste. De acuerdo, Entonces, ¿cómo puedo lograr esto? Voy a llamar a éste. Y voy a añadir este corsé rizado. Dentro de estos corsé rizado, puedo decir show, show. Si es cierto, entonces quiero mostrar este nombre de clase es que quiero mostrar algún otro nombre de clase. Así que ahora pensando lógicamente aquí. Por lo que actualmente nuestro estado estacionario es falso. Así que permítanme mostrarle éste aquí. De acuerdo, entonces tenemos éste. Entonces si yo fuera en cambio es cierto, entonces nuestro, tenemos algunos cambios aquí es porque que está cayendo esta condición estatal. ¿ Qué lo decimos aquí? Básicamente, si nuestra finca es cierta, entonces sólo vamos a devolver este diseño de auto y auto. Si no es cierto, significa que aquí es falso, estamos devolviendo nada. El otro motivo por el que nuestro auto se ha ido. Entonces, ¿qué puedo decir aquí? Simplemente puedo añadir la tarjeta por aquí. Significa, si ya dicho es falso, entonces descarte instintivo incluso suponer establecer lo que la tarjeta. Ahora podemos ver la tarjeta aquí, ¿de acuerdo? Pero no estamos consiguiendo el diseño porque para eso, tenemos que tener un diseño diferente usando lo mismo. Por lo que puedo decir, así que si es cierto, eso significa que esta condición se va a cumplir. Si es falso, entonces esta condición se va a cumplir. Por lo que todavía no tenemos éste aquí. ¿ De acuerdo? Por lo que ahora puedo marcar este rápido. Resuelve este. Entonces si nuestra finca es cierta, entonces esta clase va a estar activa. Entonces para esta clase, esta clase es clase de diseño de tarjetas. Entonces voy a copiar el mismo diseño porque necesitamos marcar este aquí. Genial. Entonces en cambio está abierto. Hay una razón por la que éste está marcado abajo. Si lo refresco, se ha ido porque obviamente no es cierto. Permítanme hacer clic en éste. Nuestra ETS es verdad, y entonces esta está aquí. Y ahora necesito agregar un nombre de clase más. Podemos decir que el diseño de la tarjeta es falso. Si nuestro estado actual es falso, entonces podemos mostrar el mismo diseño ahora que tenemos aquí. Por lo que simplemente podemos decir honorarios de tarjeta y falsos. Necesitamos relleno de margen. Necesitamos margen y relleno. Por lo que voy a añadir este aquí. Genial. Ahora, si yo fuera en cambio es falso, entonces tenemos el mismo diseño. Voy a derrumbarme éste. Si R está muerto es cierto, entonces tenemos esta cosa. Si yo fuera en cambio es cierto. Éste es markdown, es cierto, esto hecho. Ahora lo que quiero tener e poder en cambio es falso. Entonces queremos mostrar este efecto de hover que estábamos mostrando previamente. ¿ De acuerdo? Entonces, ¿cómo puedo hacerlo? ¿Para hacerlo? Entonces con clase va a llamar a esta cola, es falsa en esta clase porque si fuera en cambio es verdad, esta clase va a llamarla en cambio es falsa, entonces ésta. Así cartílagos y falsos. Aquí. Tenemos que sumar éste. La tarjeta está en color falso en el hover. Y entonces voy a decir éste. Por lo que ahora tenemos este efecto de hover. Si hago clic en él, entonces él va a aquí. Y ahora no necesitamos tener este diseño de tarjeta hover. Porque si dijera que el hombre es cierto, entonces vamos a hacer pasar el cursor por encima. Si lo que es cierto es falso, entonces solo queremos realizar este efecto de hover llamado Todo está bien. Ahora somos capaces de marcar nuestra tarjeta. Y así es como se va a ver así. Perfecto. Perfecto, perfecto. Por lo que tenemos con éxito la sal es desactivar las convulsiones. Y en la siguiente parte, y les mostraré cómo podemos sumar nuestra paginación, porque no queremos mostrar todos estos un 100 posado en esto, en esta sola base. De acuerdo, así que quiero tener paginación aquí. Y luego cuando el usuario haga clic en la paginación, entonces vamos a mostrar tal vez 510 o cualquier cantidad que queramos. Entonces te veré en la próxima conferencia. Adiós. 9. Slice datos para la paginación: Bienvenido de nuevo una vez más. En esta parte, comenzaremos a trabajar en nuestra paginación. Entonces déjame mostrarte cómo podemos lograr nuestra paginación. Entonces por aquí, este es el ritmo donde tenemos nuestros datos que estamos obteniendo de nuestra API. Esta información por favor contiene algunos, permítanme primero cortar nuestros datos de lo que podemos conectar nuestros datos con nuestras funcionalidades de paginación. Entonces para eso, voy a añadir aquí un comando. Se puede decir paginación. Solo para entender que se trata de Ted y todo este código se trata de paginación. Entonces lo que puedo decir que voy a sumar un estado aquí. Voy a decir un estado. Y antes de eso, podemos decir const. Const va a estar estacionado base. Entonces la parte B es ¿cuántos poetas que quieres mostrar? Por lo que actualmente tenemos, actualmente tenemos 100 base en apenas la una parte. No queremos mostrar una fuerza 100 para aquí. Queremos mostrar tal vez cinco o siete u ocho o diez, lo que quieras. Puedes cambiarlo en cualquier momento. Por lo que podemos decir bar base. Base va a ser por ahora ahí están los ocho posts que queremos mostrar paso parcial. Y entonces tenemos que definir un estado. O se puede decir const, const va a ser nuestro ritmo actual. Entonces tenemos, vamos a escribir ritmo de corriente rápido. Y podemos decir establecer meta actual. Y ahora aquí podemos decir usa deuda. Por lo que la fase actual va a ser una. Significa que tal vez en nuestro, después de dividir todos nuestros datos, tal vez consigamos un 100 o 50 o 20 o diez pagos basados en los datos que tenemos y en base al ritmo de parte de datos que estamos mostrando. Entonces cada vez que vamos a refrescar nuestra página, comenzaremos nuestros datos desde la base, desde la base. Vale, esto es lo que significa. Entonces voy a poder mostrarte el ejemplo más una vez que nuestro negocio y Becky's esté listo. Por lo que actualmente acaba de entender que estamos mostrando nuestros datos de la PS1. De acuerdo, así que el ritmo actual, establece el ritmo actual. Y ahora aquí necesitamos pasar una función de devolución de llamada. Puedo decir const, maneja plaga. Podemos decir esto. plaga va a ser esta. Y aquí podemos pasar unas sondas. Se puede decir seleccionado. Va a ser base seleccionada. Puedes añadir cualquier nombre de clase aquí. Simplemente impulsa que estamos pasando por aquí. Y luego nuestra función de flecha. Y aquí, ¿qué pasa con los datos? El usuario hará clic en cualquier dato que el usuario haga clic aquí. De acuerdo, así que hicimos un error aquí. Debe estar dentro de este corsé rizado y luego necesita agregar uno más, uno más normal, normal. Y luego, entonces, ¿qué significa? Por lo que cuando un usuario haga clic en pegar camarilla, entonces queremos seleccionar el elemento en el que hizo clic. Entonces queremos, queremos ponerlo en nuestro ritmo actual establecido. Por lo que estamos establecidos el ritmo actual va a ser nuestros desacreditados. Genial. Por lo que tal vez tengamos cinco pagos, diez de ritmo basado en el número de datos y número del ítem que estamos mostrando propósito. Estamos diciendo que haga clic en el número de Pegar, haga clic en el número de Pegar y luego estamos pasando éste aquí. Y lo que sea que consigamos haciendo clic en éste, te vamos a mostrar, vamos a ponerlo en nuestro ritmo actual. Ahora podemos crear. Así que déjame mostrarte. Y aquí también podrás ver este tipo de instrucción. Se pueden ver los artículos actuales. Acabas de quedarte cuenta base. El desplazamiento del artículo usa estado que suficiente dicho artículo más el desplazamiento. Y luego manejando, manejado básicamente propósito del artículo. Por lo que también puedes echarle un vistazo y luego solo puedes twittear. Pero me encanta hacerlo de esta manera. Entonces simplemente puedo crear otro, otro proceso que se puede decir offset va a ser igual a nuestro ritmo actual. Entonces este propósito. De acuerdo, así que lo que tengamos en nuestro ritmo actual, tal vez estemos en la página número cinco y luego queremos multiplicarla con nuestro propósito. Entonces caso número tres, entonces queremos multiplicar esto con él. Va a ser 24. Entonces solo podemos dividir éste. Y ahora aquí podemos obtener nuestros datos de pagos actuales. De acuerdo, por lo que actualmente nuestros datos están en estos datos utiliza estados. Ahora queremos cortar estos datos para que podamos decir const datos actuales. Va a ser nuestros datos sin diapositivas y el lodo viene de JavaScript. Entonces, lo que básicamente hace por nosotros en básicamente rebanar nuestros datos de un gran conjunto de datos, gran conjunto de matriz. Se va a rebanar en base a nuestra condición. Por ahora, se va a rebanar nuestra base un dato. Y aquí tenemos que hacerlo, tenemos que sumar nuestro offset, que es este. Y luego, y luego necesitamos agregar nuestro offset más br más br más offset, luego offset más propósito. Genial. Entonces lo que hemos escrito aquí, así que dije que sólo una variable de pares actuales datos y voy a cortar éste. Entonces datos, que va a ser nuestro conjunto de datos que contiene todos nuestros datos API. Lo vamos a rebanar usando éste. Vamos a pasar este rápido offset, que es el número de parejas y ritmo actual. Y luego nuestro offset plus bar lo pegamos de esta manera obtendremos nuestros datos. Y ahora tal vez consigamos algunos datos dobles o flotadores. Pero no queremos tener éste de esta manera para contar nuestro ritmo. Entonces hay una razón por la que necesitamos que necesitamos alrededor de hora está bien. ¿ Cómo podemos hacerlo? Por lo que podemos simplemente decir const, recuento se va a cumplir, no mapeado, se debe cumplir. Tantos puntos venta hizo la dorsal esta propiedad viene de venta de JavaScript y metadatos. Y podemos decir que los datos de puntos de datos dot, salpican la tierra e hicieron mucha tierra dividida por nuestros Barclays. Por lo que de esta manera no vamos a obtener ningún dato flotante. Digamos que tenemos 2525 post en nuestra API y lo dividimos por ocho, luego ocho. Por lo que 25 por ocho, nos dará algún número de punto porque un 25 por 83 en tres en ocho, será de 24. Melissa, tendremos uno que no podremos entrar. Déjame mostrarte lo que quiero decir con esto. Puedo decir calculadora. Y así digamos que tenemos 25 post en tu API dividido por ocho. Entonces vamos a conseguir 3.125. Y esta función nos ayudará a prevenir este punto. Nos mostrará tres porque esta venta de puntos matemáticos siempre redondea nuestros datos. Ahora tenemos éste. Permítanme mostrar sigue, no hay ningún cambio porque no conectamos nuestros datos. Por lo que ahora, si nos fijamos aquí, este dato de ritmo actual va a contener nuestra parte de datos paga ocho datos porque nuestro principal en su lugar se va a cortar en ocho Para pegar parte. Ahora, en lugar de mapear directamente a través de estos datos, tendremos que movernos a través estos datos de pegado actuales para que podamos conseguir solo comió objeto propósito, meta. Ahora tenemos ocho artículos aquí. Si no me equivoco, 123456788 artículo aquí, ¿de acuerdo? Y todas las demás funcionalidades que van a funcionar a la perfección, no hay problema en absoluto. Y otra cosa es que, déjame mostrarte eso. Vamos al azar, digamos que queremos mostrar sólo dos ítems. Entonces va a mostrar dos artículos. Permítanme añadir cinco artículos. Entonces se va a sumar cinco artículos aquí. De acuerdo, déjame añadir de nuevo ocho artículos. Entonces va a sumar ocho artículos. De acuerdo, así que somos capaces de cortar nuestros datos, pero aún así no tenemos nuestra paginación. ¿ Cómo podemos obtener otros datos? Entonces para resolver este problema, tendremos que sumar nuestra paginación en el fondo después de éste. Y entonces tendremos que añadir son estos paquetes, que es React paginate. Y luego pasas la exageración como necesites. Y luego mostraremos nuestros datos. Por lo que te mostraré en la próxima conferencia. Adiós. 10. Añadir Paginación React: Bienvenido de nuevo una vez más. En esta parte, agregaremos nuestra paginación. Entonces, lo que básicamente hago, siempre trato de separar el archivo de paginación y luego pasar apoyos para que puedas reutilizar tu paginación para otros componentes, que es la mejor manera para eso. Voy a crear un nuevo componente, nuevo archivo aquí en carpeta aquí. Lo primero que voy a decir paginación. Me voy a sentar ahí. Y esta paginación dentro de esta presentación, voy a agregar paginación dot js. Este archivo de paginación dot js va a contener toda nuestra paginación. Y ahora voy a decir, Ok, esta es nuestra paginación y debemos tener un archivo CSS para este punto de paginación CSS. Por lo que nuestros datos y toda la información está aquí. En esta parte. Necesitamos conectar de alguna manera estas paginación aquí. Entonces para eso puedo crear aquí una D diferente. Voy a decir div. Y este div contendrá nuestra paginación. Voy a seleccionar clase. El nombre va a ser una tarjeta. Este div va a ser una tarjeta. Y se puede decir paginación para esta parte. De acuerdo, y luego, entonces lo que tendremos que hacer, tendremos que pasar nuestros apoyos. Así que déjame mostrarte. Por lo que ahora actualmente podemos ver este div y no necesitamos tener, vale, así que déjame llamar a este de nuevo aquí. Por lo que esta información va a estar en la pasta de inflamación, esta paginación. Entonces podemos decir paginación, simplemente puedo decir marchar, luego pixel, y luego desvanecerse también. Creo que como pixel. Genial. Por lo que ahora deberíamos poder ver que esto puede hacer. Obviamente no tenemos ningún dato, pero definitivamente lo tendremos pronto. De acuerdo, entonces en el archivo de paginación, así que tenemos que pasar, necesitamos agregar nuestra paginación React. ¿ Y cómo puedes hacerlo? Para ello, tenemos que llamar a nuestra paginación React aquí. Entonces voy a agregar un div aquí. Y justo normalmente, y luego solo podemos leer la documentación y se muestra el documento. Podemos ver que pasa. Pasa dos parámetros, dos o tres parámetros. Tienen un par de opciones aquí, y luego algunas otras cosas aquí. Entonces podemos simplemente llamar a éste aquí originación. Entonces necesitamos tener éste y no te preocupes, vamos a hacer muchos cambios aquí. Y solo por ejemplo, voy a hablar ésta desde esta parte, desde esta página web. Y ahora tenemos que hacerlo, porque aquí no tenemos ninguna información, necesitamos estas dos informaciones. Uno se ordena el recuento de pares, uno es nuestros datos de ritmo actual. ¿ De acuerdo? Entonces estas son las dos inflamaciones que tendremos que pasar. Entonces podemos simplemente decir, Oh, tendremos que decir aquí Handel. Y también tenemos, cómo son estos, esta función y ésta. Estas son las dos cosas que tendremos que pasar por el parámetro. Entonces voy a decir mejor cuenta. Voy a añadir este aquí. Contar y el otro es eso, que se maneja. Por favor haga click y necesitamos, estoy escribiendo el mismo nombre. Por lo que aquí en pegar en Pais, posibilidad de que tengamos que pasar nuestro mango es clic, que es éste. Entonces si tienes nombres diferentes, solo ponlo y pegar conteo va a ser nuestro. Y estos pares cuentan van a contar nuestras cuántas páginas queremos mostrar aquí. De acuerdo, entonces ahora tenemos éste. Ahora, este componente contiene estos dos podómetros. Esto a elemento de datos que podemos pasar desde aquí. Quién es todos estamos ya tenemos aquí. Así que déjame importar esta cosa rápido. Puedo decir renuncia de importación de paginación a estas paginación. Y ahora voy a llamar a esta paginación dentro nuestro cartilaginoso mostrado que hemos creado para éste. Y va a pasar dos parámetros. Uno es este recuento base, y luego va a ser este primer recuento. Y entonces aquí tenemos que sumar. Aquí necesitamos, necesitamos agregar estos manillares. Haga clic. Genial. Entonces nuestros datos que hemos escrito para nuestra paginación mejor cuentan y manejados físicamente están ahora dentro de esta paginación. Déjame intentarlo. ¿ Qué podemos ver aquí? Tenemos un e-reader, que es la rehabilitación no está definida. Significa que necesitamos importar nuestra paginación React que no lo hicimos. Entonces para importar esta desoxigenación, necesitamos importar aquí esta paginación de tarifas. Y entonces todo esto es importante la paginación, ésta. Y espero que o se haya ido meta. Hemos atrapado algo aquí, pero obviamente se ve realmente mal ahora. Por lo que ahora si hago clic en el uno, debería cambiar nuestros datos, ¿verdad? Está bien, está funcionando. Si hago click en pegar dos, entonces podemos ver que nuestros datos están cambiando. Nuestros datos están cambiando. Es realmente agradable. Significa que nuestra paginación está funcionando perfectamente. Y entonces éste también está funcionando. Este también está funcionando. Entonces podemos mostrar este aquí y esta pasta en esta división cinco. Vale, lo haremos, jugarás con estos del mundo superior. Pero antes de eso, déjame mostrarte, déjame que el diseño se vea perfecto. Entonces, ¿cómo podemos agregar este diseño aquí? En primer lugar, necesitamos tener un nivel de descanso. Entonces necesitamos tener un nombre de clase break. Si lee el inmueble. Por aquí, tienen tantas cosas aquí. Estos son los apoyos. Entonces tendremos que nombrarlo nombre de clase break aquí. Entonces voy a añadir un nombre de clase. El nombre de clase va a ser nuestra clase. Entonces podemos definir una clase. Entonces podemos decir Break Glass, Romper Glass. Y luego vamos a tener un siguiente nivel, que es el siguiente. No necesitamos tener éste. Simplemente podemos añadir este aquí. Bien, estas son las dos cosas que tenemos ahora. Entonces ahora ¿qué podemos añadir aquí? Podemos agregar hay otra propiedad y otro nombre de propiedad se llama paginación. Entonces el clúster de contenedores ellos es la paginación. Entonces el nombre de la clase del contenedor es paginación. Entonces, ¿qué significa este nombre de clase continente? Hay una clase de contenedor polinesio en el clúster en el contenedor de paginación. Entonces podemos simplemente añadir este aquí. Y entonces podemos decir simplemente ese nombre que podemos añadir, se puede dar cualquier nombre de esta clase. Simplemente podemos decir paginación. El nombre de la clase del contenedor va a ser nuestra paginación. Y ahora permítanme añadir algún diseño para éste. Entonces esta va a ser nuestra clase de paginación. Y en la clase de paginación, necesitamos agregar relleno. Podemos agregar relleno, diez píxeles, y luego necesitamos agregar, nuestra pantalla va a reflejar y luego justificar el contenido. Quiero tenerlo centrado. Miraría lo que logramos. Hasta el momento. Gol. Podemos ver que nuestros datos ahora están siendo centro. Podemos ver que sus datos son uno por uno. Significa que estamos en buen camino. Algo va a pasar con nosotros muy pronto. Y L y artículos, voy a agregar centro y luego voy a sumar, digamos añadir color. El color va a ser de bloque. Y entonces tenemos que agregar margen. Voy a agregar mañana, lo siento, necesito agregar marcha, luego pixel. Por lo que ahora añadido margen diez píxeles. Vale, entonces creo que tenemos que jugar con estos. Una cosa más que hay que añadir. Así es como va a verse. Decoración de texto. Hay algunas otras cosas que podemos añadir aquí. Permítanme mostrarles qué más podemos añadir en esta parte, porque estos datos están en esto en ésta. Por lo que la decoración de texto tenemos que agregar. La repetición va a ser ninguna. Y qué va a pasar si agrego aquí una, porque supongo que contenía todos los datos. Genial. Ya puedes ver ahora estamos obteniendo toda esta información aquí, vale, Debido a esta clase de paginación y por defecto el contenido es un Siempre aprieta sostener nuestros todos estos artículos, pero no lo vamos a hacer en este camino. Voy a quitar esto a aquí. Entonces voy a copiar esta paginación una vez más. Y luego lo voy a hacer por separado. De esta manera. Lograremos nuestro ítem en el centro así como lograremos esta cosa. Por lo que voy a añadir decoración de texto. Ninguno. No necesitamos tener ninguna decoración de texto preconstruida aquí. Y entonces tenemos que agregar lista es de tipo alto. Ahora, el tipo de estilo de lista va a ser ninguno. Entonces veamos lo que hemos logrado. Y tenemos que sumar nuestro margen diez píxeles de ahí a ahí. De acuerdo, entonces ahora tenemos éste. Se ve realmente genial. Nuestra paginación está funcionando. Entonces no estamos recibiendo menos declaración o versión de mensajes de texto, supongo que pensé que tal vez tenemos esta que básicamente obtenemos. Ok. Por lo que esto podemos utilizar para y se mueve esto subrayado desde el, de éste o de éste porque estos son Previous y Next toma bajo estos aliados que no somos capaces de verlo como una razón que también podemos usar éste. Y tenemos este margen o relleno. De acuerdo, Así que se ve bien ahora, todavía podemos hacer algunos cambios. Podemos destacar éste. De acuerdo, Así que por ejemplo, si estoy en este número de espacio ahora, actualmente, no sabemos si nos espaciamos estamos. De acuerdo, entonces tenemos que hacerlo resaltado. Y creo que voy a parar este video justo aquí y seguiremos con la próxima conferencia. 11. Diseño de Paginación Reaccional: Bienvenido de nuevo una vez más. En esta parte, trataremos de activar nuestra paginación, acuerdo, para que podamos entender qué parte está activa, ¿de acuerdo? ¿ Y cómo podemos hacerlo? Para ello hay una propiedad llamada paginación. Y para que simplemente podamos agregar éste y luego simplemente podemos sumar esta parte en nuestro proyecto. Entonces el nombre de la clase es el nombre de clase activo. Y luego tenemos alguna otra parte también. Entonces déjame mostrarte cómo podemos sumar este. Entonces este ClassName, clase base LinkedList y el clúster en una cinta de limón fácil y peasy. Entonces nombre de clase activa, este es el nombre de la clase que nos ayudará a mostrar nuestro nombre de clase activo. Podemos simplemente agregar nombre de clase activa va a ser, vamos a decir este link, este link activo. Y entonces simplemente puedo sumar el diseño de éste. Entonces, ¿cómo podemos hacerlo? Podemos simplemente agregar radio fronterizo u otras cosas en nuestra F cuando éste, cuando va a estar activo, y entonces no va a crear ningún problema. Entonces, ¿cómo podemos hacerlo? Tenemos que sumar primero radio fronterizo, y luego tenemos que agregar algunas otras cosas aquí. Entonces frontera va a ser un bloque sólido de píxel. Y entonces el desvanecimiento va a ser de diez píxeles. Y entonces vamos a colorear va a ser tapón. Déjame ver. Por lo que podemos ver ahora este diseño, significa que este espacio uno está activo. Este es ahorrativo demasiado activo, pero no podemos ver nada. Y tenemos que sumar, creo, no es necesario tener rumbo diez pixel. Creo que cinco píxeles son suficientes. De acuerdo, así que de nuevo, tenemos que llamar a la etiqueta a porque este editor contiene el diseño principal. Entonces puedo decir que el color va a ser blanco, no trigo, debe ser blanco. De acuerdo, así que aún no somos capaces de ver nuestro color. Déjame ver lo que agregué un color de fondo de negro. Enlace de osos, activo. Físicamente, el color activo va a ser blanco. Por lo que se mostró a funcionar. Y por lo que no hay idea. Tenemos que arreglar este porque enlace inicial activo. De acuerdo, entonces tendremos que añadir éste de esta manera. Creo vincular punto punto activo, propiedad activa que necesitamos usar. Y entonces sólo deberíamos poder ver nuestros datos. Y luego vincularlo se produce. Permítanme cambiar el nombre. Quita esta extremidad, están activos para que no te confundas porque tenemos una propiedad llamada equity si en nuestro CSS. Por lo que sólo tenemos que usar este aquí, y luego podemos agregar éste. Entonces ahora debería funcionar, supongo. Genial. Ahora va a verse así. No tenemos Estos 234. Y esto sigue siendo el color de fondo no se está mostrando aquí, por lo que necesitamos agregar nuestro enlace activo, link, enlace de paginación activa, activo va a ser agua color de fondo va a ser negro. Y entonces tenemos que sumar nuestra esta acción para vincular el color activo va a ser blanco. Y aquí vamos. Entonces en este nombre de clase activa, necesitamos agregar algunas otras propiedades porque tiene alguna propiedad preconstruida que acabo de atrapar. Y luego el nombre de la clase en la cubierta. Se puede ver el enlace activo ClassName. Hay otra clase llamada nombre de clase activa. Por lo que tenemos que hacer de esta manera esta. Sólo podemos decir otro enlace de línea. Y esta clase activa está dentro ésta está preconstruida aquí. Por lo que podemos decir activo. Entonces podemos simplemente hacer esto de esta manera. Entonces podemos simplemente cambiar éste a este parámetro, a éste. Y entonces también podemos sumar este aquí. Y entonces deberíamos poder, entonces deberíamos poder ver algunos cambios aquí. Podemos ver el color de fondo, pero el color, sin embargo, no está funcionando. Por lo que podemos simplemente añadir un radio fronterizo aquí también. Puedo decir border-radio 20 pixel. De acuerdo, entonces lo arreglaremos en un, en un minuto demasiado grande porque hay algunas otras propiedades que está conectada con ésta. Esa es la razón por la que éste no viene. Entonces, ¿qué podemos hacer aquí? Cuando nuestra paginación esté activa, entonces deberíamos ver nuestro color a partir de ahí. Y luego hay otra propiedad que necesitamos usar aquí llamada nombre de clase base, que va a ser gran diseño inicial que necesitamos escribir aquí podemos decir nuestro nombre de clase base, ¿dónde está el componente? Por lo que va a ser el nombre de clase de ritmo que necesitamos usar. De acuerdo, para que podamos usar estos nombre de clase base. Y luego podemos decir que hay nombre de clase. Podemos decir paginación diseñada para ésta. Y esta clase de diseño de paginación va a contener el diseño principal. Significa que sin activo. Y simplemente podemos sumar éste. Y podemos simplemente decir display flex, display flex. Y entonces esto es delta es non. Y margen de cinco píxeles. Podemos añadir margen de cinco píxeles, luego desvaneciendo siete píxeles. Y luego traeré a alguien para que diga que necesitamos definir duro y blanco. Entonces lo vamos a redondear . Tan alto arte a pixel. Y entonces y va a ser de 30 pixel. Y lo que va a ser de 30 píxeles de color va a ser bloqueado. Eso va a ser blog. Y luego border-radio, necesitamos agregar 90 pixel. Border-radio va a ser de 90 píxeles. Y luego texto-decoración, ninguno. La decoración del texto va a ser ninguna. La línea de texto se va a centrar. Alinear texto va a ser central y luego alinear elementos va a ser central. ¿ Y qué podemos ver? Por lo que podemos ver que éste está redondeado ahora. Éste es redondeado. Ahora. Éste también está redondeado ahora. Pero aún hay pocas cosas que hay que hacer de esta manera. Y ahora simplemente podemos sumar éste. Entonces una cosa que olvidé agregar aquí, el color de fondo, creo. Entonces. Sé que necesitamos agregar un color de fondo aquí, y el color debe ser blanco. Si agrego un bloque de color de fondo. Veamos qué podemos ver meta. Ahora tenemos este diseño básico aquí. Estos son, este va a ser el tema principal de esto, vale, Así que se ve así. Debemos hacer algunos cambios. Por lo que podemos sumar el margen siete pixel padding, siete pixel, border-radio nueve pixel toma el sector terrestre continuidad injustificada para sumar, supongo justificar el contenido va a ser central. Y luego la decoración de texto tampoco es ninguna porque crea algún tipo de arrendamiento. Ahora deberíamos poder ver nuestro texto en el centro. Genial. Ahora se ve realmente genial, pero sigue bien. Entonces nuestro fondo es blanco y nuestro fondo resaltado también es de bloque, lo siento, el fondo es negro, así que lo voy a cambiar a color tomate. No está funcionando ahora. Tenemos que hacer esto posible. Vamos a arreglar este, no te preocupes. Entonces tenemos esta paginación. Ahora, cuando se pasa el cursor sobre estas paginación, lo que básicamente vamos a hacer, creo que podemos arreglar esta paginación activa offshore usando hay una llamada enlace activo ClassName. Y este link className nos dará lo que nos requiere. Enlace tan activo ClassName a tomar. De acuerdo, así que permítanme añadir este aquí. Y entonces la propiedad va a ser de esta manera. Puedo decir texto de enlace activo. Texto de enlace activo. De acuerdo, así que somos capaces de hacer esto hasta ahora, y tendremos que arreglar esta sigue siendo pocas cosas. Y te mostraré en la siguiente. 12. Destacar Paginación y Diseño Activos: Bienvenido de nuevo una vez más. En esta parte, vamos a sumar algunos cambios importantes en nuestra paginación. ¿ De acuerdo? Entonces podemos hacerlo de muchas maneras. Por ejemplo, hay una propiedad llamada simplemente podemos leer la documentación y luego hay una propiedad llamada regla Bayes seleccionada. ¿ O cuál es el nombre de éste? Hay algunas otras propiedades. Y podemos decir ritmo nombre de clase de gravamen. Por lo que hay una propiedad llamada Clase basal lambda agrupamiento en el despegue es decir elementos espaciales. Entonces vamos a usar éste para resaltar nuestro texto que está activo. Entonces Paisley en nombre de clase va a ser seleccionado ritmo, seleccionado paga. Y este bajo eléctrico va a ser el ritmo que queremos. Ese es nuestro seleccionado básicamente. Por lo que puedo decir que la cara seleccionada va a ser de color, el color va a ser quizá de color tomate. Sólo por un ejemplo, lo resolveremos más adelante. Ahora están aquí. De acuerdo, tan guay. Entonces así es como va a verse. Si se selecciona nuestra página, entonces nuestra, entonces nuestra, si nuestra base está seleccionada, entonces podemos ver que esto va a ser blanco, que es nuestra base activa aquí. Por lo que pegar link activo va a ser blanco y otras plagas va a ser de color tomate. Entonces así es como se puede hacer esto. Podemos hacer que este diseño en estos reaccionen. O creo que también es posible hacerlo de esta manera. Por ejemplo, podemos agregar una hoja. Conseguí este de aquí. Y luego si aquí se publican un posterior , entonces ¿qué pasará? Entonces vamos a poder ver que esto es así funcionando así que no necesitamos tener esta de esta manera. Por lo que simplemente podemos dar esta cosa aquí. Y se va a quedar así. De acuerdo, entonces otra cosa que podemos hacer, podemos hacer, podemos decir, así que básicamente ahora podemos quitar este fondo y radio fronterizo de aquí. Y entonces si se selecciona y entonces sólo podemos, podemos, sólo podemos mostrar nuestra cosa, supongo. Entonces. Déjame mostrarte lo que quiero decir con esto. O si quieres, solo puedes jugar con éste. Y entonces va a funcionar de esta manera. Entonces éste está activo y éste está activo. Y entonces tenemos éste aquí. Genial. Entonces básicamente quiero decir que este diseño de paginación va a contener todo esto. Así que si yo sólo, vale, así que en lugar de esto es la paginación que tenemos aquí. Esto es una paginación. De acuerdo, pues permítanme señalar este de aquí. Y esto es lo que quiero decir básicamente. Entonces, si quieres, también puedes hacer esto aquí. Si se selecciona, entonces sólo podemos simplemente resaltar éste y para el otro texto, podemos hacerlo. Entonces para hacerlo redondo, simplemente podemos hacer una cosa. Esto es lo que estamos obteniendo para poder definir nuestra altura. Podemos decir que nuestra altura va a ser de 90 pixel y nuestra y va a ser de 90 pixel. Y entonces sea lo que sea, va a ser 90. Entonces va a ser así. Tenemos este tamaño grande, más grande. Lo siento, me esconderé en que sería píxel tardy en el 19 de Excel. Ok, cool, cool, cool. Entonces tenemos éste y luego necesitamos hacer algún elemento que aún puedan justificar el contenido se va a centrar, lo siento. Sólo ser una cantidad se va a centrar. Y tal vez sólo podamos tomar esta cosa desde aquí. Entonces solo puedo pegarlo aquí. Entonces debería estar en el centro, supongo. O tal vez también podemos ponerlo aquí para que sea central a la derecha. De acuerdo, así que creo que esta cosa viene de ésta. También podemos probar este fuera. Por alguna razón no viene en el centro. Mis datos están funcionando de esta manera. Vale, entonces esto es lo que quería mostrarte. Vale, entonces tenemos otra frontera, que va a ser una frontera negra. Creo que en esta frontera viene de esta frontera viene de esto. Para que podamos. De acuerdo, déjame deshacer todo este equipo que teníamos anteriormente. Entonces solo podemos agregar este aquí. Entonces ahora tenemos estas opciones, supongo. No, tenemos que quitar este también. Entonces esto, esta altura y este radio fronterizo desde aquí. Y luego obtenemos esta cosa. Para que podamos ver esta cosa, estas cosas. Y ahora si presiono aquí un radio fronterizo, por lo que border-radio 90 pixel, entonces todavía podrá ver, marque éste. Y el problema es que aquí. Y si yo, si quieres hacer este fondo diseñado por defecto, entonces simplemente puedes usar también este diseño. También va a funcionar, ¿de acuerdo? Simplemente puedes resaltar tu texto y resaltar tus datos. Cualesquiera que sean los datos o el diseño que prefieras, solo puedes hacerlo. Entonces esto va a funcionar para ti también. Entonces solo quería mostrarte cómo puedes agregar. Voy a jugar alrededor de éste. Ahora todavía es que tenemos dos cosas que arreglar. Uno es anterior, cualquiera es el botón siguiente. Entonces para eso también tienen una propiedad llamada nuestro nombre de clase anterior y clase siguiente entonces va a estar queriendo usar esta. Podemos decir enlace anterior, lastname, y luego nivel anterior, nombre de clase anterior, y botón anterior. Hay otras dos propiedades que va a ser anterior, botón anterior y enlace anterior. Podemos usar este nombre de clase anterior en lugar del link className. Por lo que podemos decir que el nombre de clase anterior va a ser botón Anterior. El nombre de clase anterior va a ser Botón Anterior. Y este botón anterior va a ser algo relacionado con éste. Voy a venir aquí por estos dos diseño en el medio. Necesitas elegir uno, lo que quieras. Quiero decir que o quieres tener este color de fondo o el normal, entonces quieres simplemente seleccionar éste. Así que solo necesito que solo tengas que jugar con esta paginación. Me encantaría mantenerlo de esta manera porque para cuando el enlace esté activo, entonces solo va a mostrar que el color y lo normal va a estar en éste. Entonces este diseño de paginación va a ser el diseño de botón anterior. Tenemos que sumar. En cuanto a agregar y mostrar va a ser flex y luego necesitamos agregar list-style-type none. Esto es teletipo va a ser ninguno. Y entonces tenemos que sumar nuestro margen, cinco píxeles y luego necesitamos agregar borde. El modelo va a ser un bloque sólido de píxel. Y luego necesitamos agregar ropa de cama para que se vea bien. Vamos impidiendo siete píxeles y luego la altura, altura va a ser, soy Kartik pixel, creo que 30 pixeles. Y entonces y va a ser de 90 pixel, o va a ser de 90 pixel, color va a ser blanco. El color va a ser blanco. El color va a ser altura. Y podemos sumar border-radio. Entonces border-radio va a ser de 20 píxeles. Y entonces text-decoracion va a ser división va a ser ninguna. Podemos ver estas cosas hasta ahora. Permítanme quitar éste porque está tomando más espacio. El motivo por el que cae sobre el pueblo. ¿ Verdad? Por lo que sólo podemos sumar algunas otras clases aquí. Déjame quitar la altura y veamos qué podemos ver aquí? Podemos ver esta altura. Y también puedo sumar la altura es auto ojos va a ser contenido auto fit. Y creo que no necesitamos tener esta ropa de cama siete para vender tal vez relleno de dos píxeles. Nuestra altura va a ser auto, y luego voy a ser c. entonces podemos ver esto. De acuerdo, entonces estamos en la fase número cuatro. Si hago clic en el botón más, está funcionando perfectamente. ¿ Por qué no podemos hacer altura de éste? Podemos decir altura, 40 pixel, debería funcionar, supongo. Debería funcionar. Y luego podemos sumar algunas otras propiedades. Por ejemplo, éste. Todos estos textos lista de declaraciones es teletipo para que lo tire en el centro, llamado ruido en el centro. Y entonces ahora podemos disminuir el tamaño a 30 pixel. Genial, está funcionando. Entonces este es nuestro botón anterior. Y después tendremos que añadir nuestro siguiente botón en el mismo diseño. Y así este es el botón anterior. Ahora podemos hacer lo mismo con nuestro próximo diseño de botón. Por lo que PVS los cierran, va a ser el siguiente nombre de clase. Por lo que podemos simplemente agregar este nombre de clase siguiente aquí. El nombre de la siguiente clase va a ser nuestro siguiente botón, nuestro siguiente botón. Y en este siguiente botón, necesitamos el mismo diseño. Si lo desea, puede hacer cambios. Eso está totalmente bien. Genial. Tenemos éste aquí. Ahora, si estoy en el ritmo rápido, vale, entonces este botón debería ser deseable. Los objetivos deben irse, ¿verdad? Porque nosotros, si estoy en la base número uno, entonces no vamos a hacer nada. No podemos ir más allá la fase número uno porque este es el valor inicial. Por lo que necesitamos desactivar éste de alguna manera. Estoy en la última pieza y luego debería poder desactivar ese botón de texto también. ¿ Cómo podemos hacerlo? ¿ Cómo podemos lograr éste? Entonces para lograr este, por lo que hay un nombre de clúster llamado longitud de clase inducible. No estoy seguro exactamente éste. Supongo. Tenemos que anotar el enlace uno. Creo que necesitamos agregar el nombre de la clase, el nombre de la clase. Y voy a añadir esta propiedad en esta paginación aquí. Y entonces voy a añadir esta cosa. Y voy a decir Visible, Visible. Previous. Botón siguiente, depende de ti, qué nombre de clase quieres agregar. Supongo. Entonces déjame probar si va a funcionar. Y entonces podemos decir mostrar ninguno porque no queremos o no queremos mostrar éste. Si estamos en duda. Si estás en el ritmo rápido que este botón anterior se ha ido. Si hago clic en Siguiente o hago clic en la segunda página, botón anterior está aquí arriba, haga clic en el botón anterior. Se ha ido. Si hago click en el tartán, este próximo maíz modernismo, si vengo un paso antes, entonces esto se va a mostrar aquí, y así es como va a verse. Por lo que de esta manera solo puedes jugar con todo su nombre de clase que tienen. Por lo que también puedes hacer una cosa. A lo mejor te has dado cuenta en alguna nuestra página web, alguna plataforma, desactivan el botón a menos que lo sea. A menos que lo sea, a menos que lo sea. Entonces, por ejemplo, si estoy en éste, en lugar de esconder éste, simplemente puedo desactivar éste. Entonces, ¿cómo puedo hacerlo? Así que permítanme comentar este. Por lo que simplemente puedo decir, Dios, por lo que podemos decir que el cursor no se va a permitir, en realidad, no mucho. Y entonces podemos decir, este es el cursor. Puedo ver que este cursor no es mucho, o simplemente podemos añadir éste. Creo que contó esta E. Nosotros, entonces sólo podemos hacerlo. Ya puedes ver ahora todo esto es esto. Por lo que ahora podemos hacer clic en éste, pero éste no es deseable. En el siguiente botón está funcionando, trabajando. Y ahora si estoy en la segunda pasta y este botón anterior también está en un bol como éste. Y luego haga clic en el tercero. Y entonces éste va a ser el siguiente botón. Y así para la próxima mantequilla va a ser igual. Y también podemos hacer el color, porque el color va a ser en color gris para que parezca realmente es inducible. Entonces si estoy pasado frente, para que puedas ver que el color no es solo un perno y entonces es solo un perno. De acuerdo, Así que simplemente puedes jugar con éste y luego va a funcionar contigo. Hombre, me voy a quedar. Voy a empezar con esta pantalla ninguno. Se ve más Bueno. De acuerdo, entonces necesitamos cambiar el a porque se toma esto una de esta manera. 13. Implementar el proyecto React para Netlify: Bienvenido de nuevo. Una vez más. En esta parte, te mostraré cómo podemos desplegar nuestro proyecto servidor o cualquier tipo de plataforma de hosting para que el usuario pueda acceder fácilmente a tus datos. Pero antes de eso, déjame mostrarte algunas cosas. Tenemos que agregar nuestro pelo cargando aquí. Porque si nuestros datos no se cargan, entonces podemos mostrarles alguna información de carga. Entonces, ¿cómo podemos hacerlo? Entonces aquí, esta es nuestra base, y aquí voy a sumar un nuevo estado. Puedo decir const, puedo decir cargar va a ser triste, solitario. Y en un principio va a ser cierto. Porque en un principio es cierto en cuanto obtengamos nuestros datos, queremos configurar esta carga false. Entonces aquí estamos obteniendo nuestros datos. Si obtenemos nuestros datos, entonces no necesitamos mostrar ninguna carga. Podemos decir que es falso. Entonces, ¿cómo podemos mostrar esta carga a nuestro ritmo ahora? Entonces para eso, puedes usar diferentes tipos de ícono o cualquier otra cosa. Entonces solo por un ejemplo. Entonces después de esto dices hecho voy a añadir una condición aquí. Si nuestro estado de carga es cierto, entonces queremos mostrarles mensaje de que los datos aún se están cargando. Entonces, ¿qué puedo decir? Podemos decir aquí. Podemos decir def. Y luego, como dije, Tech Center. Voy a añadir un nombre de clase y clustering va a ser centro de texto. Y puedo decir margen ancho va a ser 25. Y luego dentro de éste, sí, que puedes agregar ícono o simplemente puedes agregar un texto. Por ejemplo, voy a tomar una carga esto. Y si hago clic en esto, se puede ver el texto de carga. Se puede ver esta cargando etiquetas. Por lo que de esta manera también puedes hacer esto. Por lo que podría haber algún ícono aquí para cargar. También puedes mostrar este ícono de carga. Hay muchos ícono. Déjame intentarlo. Se puede ver este ícono, este ícono, este ícono. Puedes probar cualquier ícono es por ejemplo, digamos que quiero mostrar éste. Entonces puedo editar aquí y donde usamos nuestros datos para éste. De acuerdo, entonces voy a copiar éste aquí, y luego lo voy a pegar aquí. Voy a añadir este por aquí, y como es en BI. Entonces voy a cambiarlo para que sea, sé que puedo acceder a este icono en lugar de este texto o emitir este texto. También puedo mostrar este ícono. Y entonces puedo decir el tamaño. Y voy a sumar decidido va a ser 40. Ahora déjame refrescar éste. Puedo ver esta cargando y con este ícono. Genial. Por lo que ahora necesitamos desplegar nuestra app al servidor. Puedes probar cualquier servidor, pero te voy a mostrar cómo desplegar nuestra app en Netlify. Así que solo crea una cuenta usando tu cuenta de GitHub o tu dirección de correo electrónico. Tienen tantas opciones. Por lo que una vez que tenga su dirección de correo electrónico , una vez que esté registrado aquí, podrá ver esta opción. Por lo que tal vez no tengas ningún sitio si eres nuevo aquí porque anteriormente fui desplegado a una razón por la que puedo ver esta cosa. Pero si eres totalmente nuevo, entonces no deberías poder ver nada. Por lo que sólo tenemos que hacer click a un costado y luego solo podemos dejar caer nuestro archivo aquí. Pero para eso, primero necesitamos sumar nuestros datos de esta manera. Por ejemplo, déjame mostrarte. Entonces este es nuestro tamaño de cliente. Y está bien, así que necesitamos construir nuestro proyecto. ¿ Cómo podemos construir nuestro proyecto? Por lo que simplemente podemos añadir éste. Así que abre tu terminal y voy a ir, primero necesito mudarme a mi cliente de carpeta. Entonces el cliente, ahora este directorio de clientes, por lo que ahora puedo decir npm run build. Este comando va a construir nuestro proyecto. Y luego podemos simplemente desplegar nuestra carpeta Build en nuestro Netlify, y luego es desplegar nuestro sitio. Por lo que aquí debe aparecer una carpeta y lleva unos momentos. Y si nos fijamos aquí, este es nuestro directorio principal de carpetas. Entonces este es el cliente. Esta carpeta cliente tenemos todo nuestro archivo y nuestra carpeta Build debe aparecer aquí. Y entonces solo tendremos que arrastrar y soltar o construir carpeta aquí. Entonces va a hacer su trabajo correctamente. Lleva pocas veces, así que creo que puedo pausar el video por un tiempo hasta que va a tener, o simplemente puedo explicarte algunas cosas más. De acuerdo, podemos ver que nuestra carpeta Build está creando un poco de tecnología pocas veces. Y esta es nuestra estructura de carpetas que hemos creado. Espero que realmente hayas aprendido mucho de este curso porque estas paginación son realmente importantes porque tendrás que hacer en la paginación en tu proyecto. Si estás tratando con una gran cantidad de elemento de datos, entonces esto es muy importante. Y estos reaccionan paquete de paginación te da mucha flexibilidad para agregarlo sin escribir tantos códigos. Para que puedas mirar aquí. Simplemente usamos su nombre de clase preconstruido y acabamos de cumplir con nuestro diseño de acuerdo a nuestro requisito. Por lo que aquí no hay nada complejo. Y aquí, solo necesitamos escribir estas pocas líneas de código y luego solo puedes usarlo. Entonces lo bueno es que como te dije que estas carpeta de paginación he clasificado por separado. que puedas usar el mismo código y ensamblajes y para cualquier tipo de datos, solo tienes que poner los datos o rebanadas y luego solo puedes reutilizar tu componente. De acuerdo, entonces nuestra construcción ha terminado. Ahora solo podemos copiar esto desde carpeta Build y luego puedes simplemente dejarlo aquí. Así que esta carpeta Build no necesita entrar y simplemente arrastrar esto desde la carpeta Build y luego dibujarla aquí. Y vamos a ver qué podemos ver si se obtiene un error y después tendremos que arreglarlo. Y tomará unos momentos. Se puede ver que la producción se está subiendo dependiendo del tamaño del archivo. Producción de carbón publicada en pocos segundos, podemos ver que nuestra app es constante. Esta es la aplicación de puerto de enlace. Haga clic en él. Y aquí vamos. Nuestro primer paso es ahora en vivo y servidor. Cualquiera, cualquiera puede acceder a este archivo y esto está funcionando, esto está funcionando y nuestra paginación también está funcionando. Se puede ver perfecto en tan solo unos segundos. Entonces, lo que básicamente hicimos aquí y está bien, así que ahora podemos cambiar nuestro nombre, definitivamente mirarlo. Entonces este es el nombre de nuestro expediente. Lo que hice, básicamente sólo un inicio de sesión. Y luego se queda aquí y aquí estarás, por lo que solo necesitas ir a este tamaño. Y aquí tendrás una opción para que puedas conectarte desde tu Connect, obtendrás la mitad, o simplemente puedes navegar, o simplemente puedes soltar la diversión aquí, entonces solo puedes desplegar automáticamente tu proyecto. Ahora, es posible que desee cambiar el nombre de este proyecto. Definitivamente puedes hacerlo. Entonces, ¿cómo puedes hacerlo? Si desea agregar el nombre de dominio, también puede agregar un nombre de dominio aquí, pero quiero cambiar el nombre. Este es el nombre. Y aquí podemos ver el nombre del sitio Chen. Y aquí vamos. Podemos decir React originación. Genial. Ahora si hago clic en él, ya se toma dicho nombre. Por lo que ya alguien ya se ha llevado. Para que podamos tomar éste reaccionar paginación. Nosotros API en objetivos de datos. Entonces este es el nombre de nuestro sitio. Ahora, si refresco éste, por lo que no va a funcionar porque nuestro nombre ha sido cambiado. Por lo que podemos venir a citar visión general. Quiero que vayas a nuestro directorio principal y luego podemos ver el nombre se ha cambiado, originación reactiva. Y si hago clic en el enlace, y entonces va a funcionar de nuevo. Podemos ver también nuestro indicador de carga. Genial. Has aprendido a desplegar tu F en Netlify, cómo crear este colapso de Schoen, cómo crear estas paginación y cómo estas, cómo agregar todas estas características aquí. Por lo que espero que les haya gustado este curso y les deseo todo lo mejor. Y esta es la última conferencia de este curso. Adiós.