El Bootcamp completo de React 2023 (actualizado)

1. Introducción: Bienvenido a la completa reaccionar bootcamp. Hola, me llamo Andrew y soy desarrollador React. Hola, mi nombre es nuestro Ash y puedo UI diseñador UX. ¿ Alguna vez has querido crear una app similar a Twitter o Facebook? ¿ Prefieres la práctica sobre la teoría? Si es así, estáis en el lugar correcto juntos, vamos a construir tres proyectos separados de diferente complejidad desde cero, un juego tic-tac-toe y película Search app, y por último, una charla. Este curso está dirigido a personas que están ansiosas por desarrollar aplicaciones web. Nosotros las tecnologías que se vuelven cada vez más populares hoy en día. En primer lugar, discutiremos todos los conceptos básicos que debes saber antes de saltar a reaccionar. Aquí hablaremos de no tener GS, buenas API de renderización del lado del cliente y del lado del servidor y herramientas esenciales para que se sienta cómodo en cualquier etapa de los enfoques de desarrollo. Justo después de eso, tenemos una sección dedicada de JavaScript, pero descubrimos las características más recientes y actualizadas del idioma. Entonces nos movemos ligeramente para reaccionar con la pequeña porción de la teoría. En este punto, conocerás una vez hecha de Riak y cómo funciona. A partir de aquí, comenzaremos con nuestro primer proyecto, ese juego tic-tac-toe. Cuenta con una interfaz de usuario moderna con animaciones geniales y funcionalidad sin fisuras en este proyecto, conoce primero reacciona. Aprenderás a crear componentes, estilos dinámicos en las interfaces de usuario. Pero hablaremos de gestión estatal y eventos del ciclo de vida de componentes usando Hooke's. Al final de este proyecto, podrás crear una sencilla aplicación web que muestre tu fuerte reacción básica, y experimentarás el flujo de desarrollo en general. El segundo proyecto se llama taquilla. Actúa como motor de búsqueda de películas y programas de televisión. Podrás obtener información sobre cualquier película o AG. Y además de eso, puedes agregarlos a favoritos para revisarlos en el futuro, nosotros estos proyectamos, te mueves hacia una aplicación React más compleja o estás trabajando con API externas y gestionando escenarios no primitivos usando ganchos de traje 3i. Además, aprenderás sobre CSS y JS como alternativa para el estilo y la aplicación, vamos a explorar el concepto de rutas dinámicas y la obtención remota de datos. También comprenderás cómo optimizar y analizar los componentes de React utilizando herramientas de reacción integradas. Al final de estos proyectos, incluso vamos a convertir nuestra app en una aplicación web progresiva que funciona fuera de línea. Después de la finalización de la taquilla, podrás crear una aplicación típica de React que requiere conocimientos de reacción más completos y avanzados. Nuestro proyecto final va a ser un chat up con las características más populares que requiere cualquier aplicación de chat. Estos incluyen inicios de sesión en redes sociales, administración de cuentas, permisos basados en roles , datos en tiempo real, y muchas otras características geniales en este proyecto, conocerás Firebase en primer lugar. Aquí dominará la autenticación de usuarios y la gestión global del estado. En esta etapa, los ganchos de reaccionar va a ser tu arma principal para desarrollar una aplicación React lista de producción administrar estilos tú mismo no siempre es deseable. Es por eso que aquí usaremos una biblioteca de componentes de interfaz de usuario para utilizar un sistema de diseño preconstruido. Por último, desarrollaremos nuestro propio backend usando Cloud Functions, y añadiremos la función de notificaciones en tiempo real a nuestra aplicación de chat. Espera, no terminaste. Estás listo para ayudarte en cualquier etapa del curso y responder a tus preguntas lo más rápido posible. ¿ Estás listo para explorar, reaccionar juntos. Nos vemos en clase. 2. Requisitos: Hola, Mi nombre es Andrew. Seré tu instructor. Tira a Dick Koers. Permítanme hablarles de los requisitos para que este tribunal empiece a trabajar con reaccionar. En primer lugar, todo el conocimiento fuera de HTML y CSS es esencial. No seré ninguna atención extra explicando qué es la etiqueta dif. Lo mismo vale para CSS. Espero que sepan de clases y selectores pero no harán paradas en explicar los conceptos básicos de HTML y CSS. Pero siempre se pueden hacer preguntas en los Comunes. Definitivamente hay unos momentos clave fuera de HTML y CSS, y eso se explicará. Pero la mayoría de las veces trabajaremos con JavaScript. No espero que seas bueno un JavaScript o tengas alguna experiencia decente. Yo quería saber acerca de la programación en general, debes entender cosas básicas como lo que está disponible o una guerra es un look de cuatro. Conseguirás, ya sabes hoy. Sintaxis de JavaScript. Durante el curso, es bastante fácil de usar corazón de entender. explicarán partes, así que no te preocupes por eso. También hay una sección especial dedicada Onley a JavaScript. Abarca los aspectos más importantes fuera del lenguaje para asegurarte de que sepas lo suficiente como para empezar con prisa de reaccionar, y trato de que todo sea lo más suave posible. Pero sin embargo, quería hacer tantas preguntas como puedas. Y no seas tímido haciendo preguntas tontas siempre estuvieron ahí para ayudarte. Vamos a resumir rápidamente. Debes estar al tanto de HTML CSS y algunos conocimientos generales de programación. Eso es todo. Nos vemos en el siguiente video. 3. Actualizaciones y problemas: Oye, en este video, me gustaría hacer referencia a un archivo que te dirá sobre las actualizaciones y cambios que hacen los humanos durante el curso. En la web, todo cambia constantemente. Y para mantenerse al día con el contenido actualizado, creamos ese archivo. Por favor, encuentra actualizaciones y ediciones dot archivo pdf en la sección de proyectos y recursos dentro verás dos capítulos principales, actualizaciones importantes y temas comunes. Actualizaciones importantes afectan a todos los que toman el curso. Por favor lea ese capítulo para evitar tener inconsistencias durante los videos. Problemas Comunes se refiere a posibles errores que podrías experimentar y sus soluciones a lo largo. Por favor, refiera este archivo en primer lugar cuando tenga algún problema. En el peor de los casos, por favor lea el capítulo tres. Siempre queremos mantenerte con contenido actualizado. Sólo. Buena suerte con los proyectos. 4. Introducción a la primera sección: Hey, bienvenido al curso en la sección Cubierta móvil Todas las cosas que necesitamos saber antes de empezar Con el desarrollo de reaccionar. Esto incluye herramientas, un poco de teoría y algunas otras cosas. Espero que los disfrutes. Nos vemos allí. 5. Instalación de Git + Bash git (Windows): Oye, en este video vamos a instalar y conseguir lo que es bueno y ¿por qué lo necesitamos? Vamos a cubrir todo eso en el próximo video. Este video es todo sobre la instalación. Vámonos. Como siempre, primero abrimos Google y luego buscaremos y obtenemos esto nos llevará a la web oficial. En una nueva pestaña voy a abrir no cargas. Y en la pestaña actual, voy a buscar a Git instalado en la ubicación. Esto nos llevará al menos a one.com. Entonces, ¿por qué lo necesitamos? Si ves discrepancias en instalación de Git o si estás perdido sobre la instalación de Git. Esto es lo último, actualizado get insolation tutorial. Yo lo recomiendo. Entonces si estás en macOS, linux, Windows, no importa. Simplemente navega aquí y es muy fácil y sencillo. Muy bien, Ahora volvamos a las descargas. Este video está dirigido a usuarios de Windows, pero si eres de Linux o macOS, también está totalmente bien. Entonces si estás en Linux, solo tienes que hacer clic aquí, y dependiendo de tu distribución, solo tienes que seleccionar el comando. Es muy fácil de hacer, ¿de acuerdo? Si vienes del mundo de macOS, tienes algunas opciones. Puedes instalar adiós usando un gestor de paquetes como Homebrew, o puedes usar un instalador directamente. Ese tutorial aquí, recomienda usar un instalador, que es la forma más fácil en macOS, ¿de acuerdo? Ya que estamos en Windows, vamos a dar click en Windows y vamos a conseguir el instalador. Nuevamente si vienes de un sistema operativo diferente, aún te recomiendo que pases rápidamente por este video porque vamos a cubrir algunas preguntas importantes. Muy bien, entonces abrimos el instalador y le dimos a Next. ¿ Qué necesitamos aquí? Iconos adicionales. Esto depende de usted, la integración de Windows Explorer. Por lo que esta es la opción solo para Windows. Y queríamos seleccionar a Git Bash por aquí, y queríamos desmarcar una buena GUI. Nadie usa el bien para ir. Esta es una herramienta visual para representar un bien, ¿de acuerdo? Y Git Bash es una versión corta de terminal Unix llamada Bash. Por lo que esta versión corta solo está disponible en Windows bajo el día de Git Bash. Y creo que esto es muy útil y conveniente. Entonces en Windows tenemos cmd y PowerShell, y vamos a instalar Git Bash y usarlo en lugar de CMD y PowerShell. De acuerdo, Entonces queríamos seleccionar buena L de c. Entonces esto es por si acaso tenemos archivos realmente grandes y nuestro buen proyecto, esta opción nos permitirá poner esos archivos. Entonces en un buen proyecto básicamente, entonces queríamos mantener asociaciones. No necesito actualizaciones diarias y perfil de Git Bash a Windows Terminal. Entonces no estoy seguro de este, pero supongo que esto está relacionado con la nueva Terminal de Windows que se publicó recientemente. De acuerdo, así que tampoco lo quiero. Entonces a continuación, este paso, elijamos un editor con el que te sientas cómodo. Entonces sé que aún no sabes nada, pero en buena, ahí existe la posibilidad de que haya un conflicto entre múltiples archivos. Y para resolver ese conflicto, tendrás que pasar manualmente por esos archivos y editarlos. Entonces cuando ocurra este conflicto, get abrirá un editor que selecciones aquí por defecto. De acuerdo, entonces elige algo que sepas usar, por ejemplo, Visual Studio Code. Muy bien, el siguiente aquí. ¿ Qué tenemos aquí, justing, el nombre de la rama inicial en su repositorio también. Éste es uno complicado. Vamos a seleccionar, vamos a seleccionar, dejar, llegar a decidir. Pero de qué se trata todo esto. Bueno, lo consigo, sé que aún no lo sabes, pero hay este concepto de ramas en bien. Por lo que hace alrededor de un año, la buena comunidad y la comunidad de GitHub decidieron cambiar el nombre de sucursal predeterminado dos, principal justo antes de que se llamara master. Ahora se llama oficialmente principal, pero aún hay muchos proyectos que siguen usando master. Entonces lo que recomiendo hacer es simplemente elegir, Seleccionar, dejar, obtener, decidir. Entonces vamos a golpear Siguiente. Y aquí tenemos ajustando tu entorno de ruta por lo que queremos seleccionar Segunda opción recomendada. Nos permitirá usar Git desde cualquier shell terminal, ya sea CMD, PowerShell o Bash, o desde cualquier otro software y shells que vamos a instalar y utilizar. Entonces, por eso la segunda opción es lo que queremos. En este paso. No queremos cambiar nada, solo mantén un uso predeterminado agrupado OpenSSH obtendrá cuatro. Es que las conexiones podrían usar túneles SSH. Está bien. Por eso viene agrupado con ejecutable SSH, que proviene de OpenSSH. De acuerdo, Siguiente, aquí, back-end de transporte https. Seguir usando OpenSSL. No queremos cambiarlo también. Siguiente aquí sobre terminaciones de línea. Bueno, bueno es una herramienta multiplataforma. No obstante, hay algunas cosas específicas que deben ser de alguna manera, alguna manera gestionadas o controladas para lograr esa disponibilidad multiplataforma. Y una de esas cosas son los finales de línea. La cosa es que en Windows y en sistemas tipo Unix, las terminaciones de línea tienen diferentes codificaciones, ¿de acuerdo? Y podría crear grandes problemas para conseguir proyectos. Por lo que esto nos dará capacidad para mantener nuestro proyecto multiplataforma sin ningún problema. Esto es algo muy menor, pero es muy importante porque si seleccionas tercera opción y si vas a hacer algunos cambios para conseguir proyecto en Windows y luego abres ese proyecto en un diferentes sistemas operativos, experimentarás muchos problemas. Por qué no lo queremos. Por lo que para Windows, seleccionamos esta opción. A continuación, configuró el Emulador de Terminal para usar con Git Bash. De acuerdo, entonces Git Bash va a ser de nuevo nuestro nuevo shell que usaremos como alternativa a CMD y PowerShell. Entonces minty es esa ventana terminal, vale, entonces si abro CMD, tengo esta ventana de ventanas por defecto, básicamente la derecha, al igual que dice, la segunda opción aquí, ventana de consola por defecto. Entonces mentee es que ese software, básicamente que ejecuta el shell terminal trans, concha dentro de él. Entonces será esa ventana la que podremos configurar, cambiar su color y codificación y otras cosas pueden ser fijaciones clave, todo eso. Entonces esto es sólo eso, ya sabes, ventana que corre conchas terminales. ¿ De acuerdo? Por lo que queremos usar mentee, luego elegir el comportamiento por defecto de una buena encuesta. Todavía no lo sabes, pero elijamos por defecto. Esta es la opción preferida, casi siempre. Y yo diría siempre. A continuación, elija un ayudante de credenciales. Aquí queremos seleccionar Git Credential Manager core. Esto es específico para Windows aquí, pero aún así usa esa opción. De lo que haga, habrá momentos, quiero decir, siempre así. Queríamos albergar nuestro buen proyecto en algún lugar. Nos alojamos en GitHub. Y para autorizarnos a GitHub, tendremos que ingresar nuestras credenciales para un GitHub, nuestro nombre de usuario y contraseña. Por lo que para no responderlas cada vez que esas credenciales deben almacenarse de forma segura en algún lugar de un almacenamiento en caché. En Windows, este almacenamiento en caché se denomina Git Credential Manager core. Entonces, por eso necesitábamos no ingresar nuestras credenciales cada vez. Nos gustaría empujar nuestros cambios a GitHub. De acuerdo, Siguiente, en este paso queríamos habilitar el almacenamiento en caché del sistema, las limpiezas simbólicas. Mantenlo tal como está. Golpeamos a continuación y no necesitamos ninguna característica experimental en absoluto. Por lo que acaba de presionar Instalar. Eliminación de la versión anterior. Sí, quiero decir, para mí porque ya lo tenía instalado. Esperemos un segundo hasta que esté instalado y veamos qué tenemos. Está bien, bien. Completar el asistente de configuración buena. No quiero terminar notas de lanzamiento. Ahora, bueno está instalado. ¿ Cómo podemos verificar eso? Vayamos a CMD. Y en cmd, queremos simplemente escribir git space dash, versión dash. Y si ves la versión instalada, felicidades, get ya está instalada. Ahora, esto sólo está relacionado con los usuarios de Windows que instalaron, que seleccionaron a Git Bash durante la instalación. ¿ Cómo podemos verificar mantener a Bash? Bueno, podemos ejecutar git Bash directamente desde otro shell, desde ver a Cmd por ejemplo. Entonces si tipeo Git Bash con dash dentro, voy a ver que Git Bash no se reconoce. Bueno, esto es para ser honesto, esperado. Y para arreglarlo, tenemos que hacer de nuevo, un pequeño cambio en nuestra variable de camino. Entonces lo que tenemos que hacer es ir a iniciar Panel y en búsqueda con Tipo III y V. Después vamos a editar las variables de entorno del sistema y las vitaminas vegetales. Y bajo Sistema burbujas buscarán camino. Haga doble clic en eso. Y aquí al final de la lista verás Archivos de programa C, bueno, CMD o cualquier ruta de instalación que elijas durante la instalación. De acuerdo, entonces si abrimos este camino, Vayamos a carpetas. Y vamos aquí. Ejecutables que tenemos aquí son buenos, buena GUI, todo menos Git Bash. No obstante, si vamos a conseguir carpeta aquí tenemos ejecutable de Git Bash. ¿ Está bien? Por lo que para poder usar ese ejecutable desde la terminal, tenemos que agregar ruta de carpeta a la variable de ruta. ¿De acuerdo? Entonces volvemos aquí a esa lista. Hacemos click en Nuevo y agregamos Archivos de Programa C. Bien. Entonces golpeamos OK, OK, OK. Ahora voy a reiniciar de nuevo la terminal. Y ahora si tipeo Git Bash, boom, estoy dentro de la shell de Git Bash y usa mentada. Por lo que si hago click en opciones aquí, verán ese logo de mentina. Por lo que podría verse muy similar, pero en realidad usa como la consola predeterminada de Windows. Pero esto corre dentro de minty Terminal Emulator. Muy bien, si lo deseas, puedes configurar diferentes opciones aquí, Selección de claves, Terminal de Windows. Entonces estas son todas las opciones y por si acaso , y este es Git Bash. Ahora si queremos escribir aquí comandos muy básicos de Linux, podemos hacer eso, por ejemplo, ls, para enumerar todos los archivos de esta carpeta. De acuerdo, Genial, Y esta es nuestra entropía C Usuarios. Esto es mío. Será tu nombre de usuario por aquí. Si queríamos ir a disco diferente, vamos a escribir cd para cambiar directorio y luego el nombre del disco. Genial, así que esto se trata de Git Bash. También puedes ejecutarlo desde la ventana de ejecución en el Panel de inicio o presionando Windows plus r y escribiendo Git Bash. Y tú estás dentro. Eso es básicamente, es, esto es todo lo que necesitamos para configurar Git, vale, Tal vez una opción más es ese comando de configuración de Git, ¿verdad? Entonces si vamos a eso a la lesión al total, no importa cuándo para Windows, para Linux no importa. Entonces aquí necesitamos configurar, llegar a usar nuestro nombre y correo electrónico, ¿verdad? Entonces sólo tienes que copiar este comando aquí y pegarlo en terminal. Y aquí entra tu nombre. Puede ser tu verdadero nombre en él, o puede ser tu apodo, hagas lo que hagas. Entonces presiona Enter para tu nombre de usuario, y luego lo mismo para el correo electrónico. Entonces, ¿qué son esos? Esos serán visibles en los mensajes de confirmación. En la buena historia, cubriremos todo eso, pero esto es algo que otros usuarios y tú verán en tu historial de proyectos, escogerán algo real, eso es básicamente se instala para Usuario de Windows, se obtiene bashes instalados. En el próximo video, hablaremos de ello en detalles y cómo nos hará la vida más fácil. Nos vemos ahí. 6. Cambiar la apariencia de bash git (solo con Windows): Oye, antes que nada, quiero mencionar que este video es solo para usuarios de Windows. En este video, me gustaría referirme a la aparición de Git Bash. Déjame mostrarte lo que quiero decir. Si lanzo Git Bash. No me gusta la forma en que se ve. Yo quiero quitar ese medio W 64, quiero quitar esa entrada B en, a nombre de mi máquina. No necesito todo eso. Esto es totalmente opcional, pero hará que tu experiencia de desarrollador un poco más agradable. Entonces cambiemos eso. De lo que tenemos que hacer, tenemos que navegar para obtener carpeta de instalación al principio. Entonces para mí va a ser C, Archivos de programa, bueno. Dentro de esta carpeta queremos ETC. Y el perfil D aquí buscará un buen prompt dot SH, y lo abrimos con cualquier editor de texto. Voy a abrirlo con Sublime Text. Y verás esto. Sé lo que va a ser completamente confuso y no sabemos qué está pasando aquí, pero no se asusten. Nosotros sólo queremos quitarlos o tal vez reemplazarlos por otra cosa. Entonces antes que nada, para quitar ese título Ming W6 buscaremos algo con título, al parecer. Por lo que este prefijo de título de signo de dólar es exactamente para Ming W 64. Por lo que sólo lo quitamos de aquí. Y también quitamos el colon, pero no quites ese punto y coma de aquí porque esto es parte de ese color representado como este básicamente. Entonces aquí, déjame poner mi apodo con una flecha y déjame guardar el archivo. Ahora, déjame reiniciar Git Bash. Por lo que de nuevo voy a Run window Git Bash. Y ahora boom, veo mi apodo y, y HACO bastante cool justo Ahora quiero quitar todo eso que resalté. Por lo que busco sistema EMS. Acabo de quitar esa línea por completo. Entonces elimino usuario en nombre de host. Y también lo que me gustaría hacer, me gustaría destacar el camino actual, que se muestra por aquí. Entonces si navego para ver, lo tengo así, pero quería ponerlo entre paréntesis. Por lo que la slash w es el directorio de trabajo actual. Entonces quiero ponerlo dentro de corchetes de caja así. De acuerdo, y una clase, lo que quería hacer, quería cambiar el prompt del signo del dólar a una flecha tal vez. Entonces aquí busco esta línea. De acuerdo, prompt va a ser siempre una flecha. Yo lo cambio, guardé el archivo, y ahora veamos el resultado. Por lo que de nuevo, reinicio Git Bash. Y ahora esta es nuestra aparición final. Si navegamos al disco D, lo tenemos así. Bastante cool. Entonces nuevamente, esto es totalmente opcional y esta es mi preferencia personal porque me gusta la simplicidad y me gusta la forma en que se ve. Y para mí desde mi punto de vista, se ve mucho, mucho mejor de lo que era antes. Depende totalmente de ti si necesitabas o no. Pero eso es todo. Esto es lo que quería abordar. Nos vemos en el siguiente. 7. Instalar Git (macOS): Oye, en este video, te voy a mostrar cómo instalar Git en Mac OS. En primer lugar, navega a Google y escribe git. Ir a la primera URL. Este es el sitio web oficial. Haga clic en descargas y, a continuación, seleccione macOS. Verás algunas formas de instalar Git. Vamos a elegir el que tiene Homebrew. Homebrew es gestor de paquetes. Nos permite descargar software distribuido con un solo comando terminal. Instala Homebrew, copia el comando de instalación desde el sitio web, luego ve a Launchpad y ejecuta la terminal, pega el comando y espera a que se instale. También podría solicitarte tu contraseña. Ahora que tenemos Homebrew, podemos instalar fácilmente Git, navegar de nuevo para conseguir sitio web y copiar homebrew instalado Git, abrir la terminal y pegar el comando. Tomará unos segundos hasta que homebrew se instale entrar en su sistema. Si dice que get ya está instalado, entonces estás bien. Probablemente sea por Xcode. Y eso es todo. Adiós adiós. 8. Instalación de VSCode (Windows): Hola, En este video, instalaremos VS Code y editor que usaremos a lo largo del curso. En primer lugar, ¿por qué código VS Code o Visual Studio? Creo que personalmente creo que este es uno de los mejores editores e IDE disponibles para proyectos JavaScript. Si te sientes cómodo con cualquier otro editor, por ejemplo, atom para el desarrollo, si tienes alguna experiencia previa, siéntete libre de usarlo. Pero en el entrenamiento, aconsejo a sus misiles pseudocódigo debido a su sistema plug-in y es simplemente cómodo. De acuerdo, Así que vamos a instalarlo. Lo que tenemos que hacer es ir a Google como siempre, y escribir VS Code. Y nos lleva a la página oficial. Por lo que sugiero abrir la página de documentos y no buscar página. Por lo que en la página de descargas tenemos instaladores para tres sistemas operativos diferentes, Windows, Linux, y macOS. Entonces para Windows es bastante sencillo, ¿verdad? Da clic en el instalador y se inicia la descarga, bien, para Linux y macOS, aconsejo ir ir a la página de documentos y luego dependiendo de tu sistema operativo, ir a la sección correspondiente. Entonces para Linux, también es bastante sencillo. Dependiendo de tu distribución Linux, hay perros que puedes leer y ver cómo tienes que instalar NodeJS. Es decir, cómo exactamente vas a hacer eso porque los comandos serán diferentes en función de tu distribución. De acuerdo, así que sólo trata a los Perros. Confía en mí, esto es bastante simple y básicamente lo mismo para Mac OS. Esa es una manera fácil. Obtienes el instalador y simplemente lo arrastras a tu launchpad. Eso es todo. Y se considera que VS Code está instalado. De acuerdo, entonces para Windows tenemos el instalador. Lo lanzaremos. Este usuario pretendía correr a tierra nosotros y dijo: Oh, paga. Entonces en Así que sí, quiero seguir corriendo. Está bien. Yo lo cierro. Eso no lo verás. Está bien. Entonces estoy aquí. Fui a aceptar. Puede cambiar la ruta si lo desea como instalación predeterminada. Esto también está escrito en perros. Puedes leer sobre ello aquí. Entonces, ¿dónde está? Está bien, está aquí. Ahora damos clic en Siguiente. Siguiente. Ahora aquí tenemos que seleccionar en dos caminos que se selecciona por defecto, pero asegurarnos de que esté ahí. Registrar código como aditivo para tipos de archivo de apoyo. Sí, se aconseja que se seleccione esto. Esto es opcional y si necesitas crear elemento de escritorio, está bien, luego pulsa instalar. Después de eso, tomará algún tiempo y boom, verás el código VS en tu escritorio. Después de eso, lo lanzas y terminas en una ventana como esa, el tema será diferente, pero no importa. Ahora se instala Vscode. Cómo configurar con código SQL y cómo instalar plugins. Todo estará cubierto en el próximo video. Nos vemos ahí. 9. Instalar el código VS (macOS) (macOS): Hola, En este video, te mostraré cómo instalar código VS en macOS, ir a buscar en Google y escribir fiasco, luego dar click en el botón Descargar y te llevará a la página de descargas. Haga clic en instalador de macOS. Se iniciará automáticamente la descarga para ti, espera hasta que esté hecho. Y eso abrió el archivo dentro verás el código VS. Puedo atajar, simplemente arrastrar y soltar el icono en las aplicaciones justo después de eso, VS Code se considera instalado y se puede acceder a él entrando en el almuerzo, pero luego buscar VS Code, abrir y verificar que todo esté bien. Y eso es todo. Ver en el siguiente. 10. Configuración y extensiones de VSCode: Oye, en este video me gustaría hablar de código VS, cómo configuramos VS Code, y qué necesitamos hacer para sentirnos cómodos durante el desarrollo. Vámonos. El primero que me gustaría presentar es la barra de búsqueda de código VS, porque es increíble abrir barra de búsqueda. Presiono Control P. Y me trae aquí. Puedo escribir lo que quiera aquí, pero no dará resultados coincidentes porque intenta buscar defiles en proyecto actual. Pero como no tenemos ningún proyecto por el momento que abrí, no da resultados coincidentes. Lo que quiero escribir en su lugar es flecha derecha. Al escribir flecha derecha al principio. Esto significa que quiero usar comandos integrados de VS Code o opciones de código VS tal vez para navegar sombría. Por ejemplo, si escribo flecha y luego configuro JSON, me da preferencias ajustes abiertos chasten. Déjame hacer clic en esa y me lleva a la configuración archivo JSON. Por lo que configuración archivo JSON es básicamente ser como archivo de configuración de usuario de código. Aquí solo necesitamos escribir diferentes comandos para configurar extensiones, para configurar algunas herramientas o lo que sea. Lo primero que quería poner aquí, déjame abrir el navegador. Y aquí tengo ese archivo, esta configuración de código. Tendrás esa URL y tal vez ya cómo se comparte. Entonces, sólo ábrela. Y desde aquí, lo primero que tomaré IS ventana de confianza de seguridad. Y yo sólo lo voy a colocar aquí así. Y lo que hace, deshabilita la seguridad Ventana, pero no entre en pánico. ¿ Qué es la ventana de seguridad? Bueno, el código VS te preguntará muchas veces, ¿confías en este entorno o confías en esta carpeta? Y confía en mí, esto es muy molesto desactivar esta ventana. Simplemente copia pega esta opción y nunca verás esa ventana. Otra vez. Si tienes curiosidad, siempre puedes comentar esta línea de código y verlo tú mismo. Pero voy a mantenerlo como está. Ahora por un segundo. Voy a dejar la segunda opción y sólo tomaré la última opción de aquí, que se trata de predicador. ¿ Qué es el predicador? Pre-clear es una herramienta que cubriremos en detalle en el próximo video. Preacher lo formará nuestro código cuando guardemos archivos, esa línea asegura que cuando golpeemos guardar, nuestro código va a ser formateado. En este paso VS Code básicamente ya está configurado y puedes iniciar intentos de desarrollo de inmediato. Pero una cosa que quiero mencionar es el terminal integrado VSCode. Entonces si golpeo terminal y hago clic en nueva terminal, se abre PowerShell para mí porque estoy en Windows. Si estás en Linux o macOS, verás a Bash para usuarios de Linux y macOS, esto está bien. Pero para los usuarios de Windows, desde que instalamos Git Bash, usemos Git Bash y no PowerShell o Cmd porque por defecto VS Code y Windows usa PowerShell. Entonces, ¿qué tenemos que hacer? Tenemos que volver a ese archivo y copiar esta configuración y dejarme colocarla aquí al final. Entonces lo que hará, instruirá a VSCode para usar Git Bash como terminal integrado. No es diferente como si lo abrieras fuera de VSCode. Hace solo conveniente usar todo en un solo lugar, especialmente herramienta como terminal. Copié todas estas opciones si la ruta es diferente para ti, solo reemplácela siguiendo el mismo patrón. Y vamos a cerrarla y luego vamos a abrirla de nuevo. Y vamos a verificar que ahora estamos usando Git Bash. Dicho esto, los usuarios de Windows enhortecen, estamos usando Git Bash. Ahora, lo último de lo que quiero hablar en este video, y yo diría que la más importante son extensiones VS Code. ¿ Está bien? Entonces, ¿qué son las extensiones VS Code? Estas son todas herramientas opcionales que amplían VS Code con una funcionalidad realmente genial. Para ir a Extensiones, tocamos con este ícono en el panel izquierdo. Y aquí ya tengo 33 extensiones instaladas. Eso es mucho lo que sé, pero no entres en pánico. No tenemos que instalarlos todos. Lo que haré en este momento, pasaré rápidamente por las extensiones que creo que se requieren para nuestro curso. Y dependerá de ti si quieres instalarlos o no. Para vender y ampliar en la barra de búsqueda solo tienes que escribir nombre de extensión. Por ejemplo, mejor sintaxis C Plus Plus. Se hace clic en la extensión, por ejemplo, esa y se pulsa Instalar. Después de eso se instalará. Y podría pedirte que reinicies el código VS, pero es muy raro. Y por cierto, no necesito esa extensión, así que sólo voy a desinstalarla. Por lo que vuelvo a Extensiones Instaladas y vamos a buscarlas rápidamente. Primera extensión que quiero mencionar está fuera a la etiqueta de nombre. De qué va a hacer. Acabará de salir para renombrar HTML, abrir y cerrar etiqueta a medida que escribimos HTML. Esto es muy útil. Te recomiendo este, soporte de color pera elevador. Creo que esta es una de las extensiones que debe instalar porque simplemente resalta corchete de apertura y cierre y decodifica. Esto es útil porque hace que nuestro código sea más legible y distinguible. Recomiendo encarecidamente esta extensión. A continuación tenemos ES 7 React redux GraphQL React Simppets nativos. Esta es una extensión importante. Lo vamos a utilizar mucho cuando vamos a escribir código React. Entonces instálalo. Voy a mencionar esa extensión en el futuro una vez más. Entonces tenemos ES pelusa. Vamos a cubrir ES pelusa en más detalles en el próximo video. Pero asegúrate de tener esta extensión instalada por anticipado. A continuación tenemos etiqueta de coincidencia de resaltado. Al igual que dice, resaltará la etiqueta HTML coincidente, igual que se ve en eso. Vista previa. Bastante cool. Creo que es, es, es útil. Ahora tenemos IntelliSense para nombres de clase CSS. Bueno, sí, es útil. Entonces lo que hará, agregará autocompletado para nombres de clases CSS definidos en nuestro proyecto, totalmente a ti. A continuación tenemos Material Icono Tema. Simplemente agregará este conjunto de iconos a los archivos que veremos en File Explorer aquí en el panel izquierdo. Yo lo uso y se lo recomiendo a todo el mundo. Inteligencia Npm. Este es importante. De qué va a hacer, agregará terminación externa para paquetes y bibliotecas que vamos a importar en código, muy recomendable. A continuación tenemos inteligencia de camino. Básicamente lo mismo, pero para archivos locales. Por lo que autocompletar para la importación de archivos locales. Después tenemos predicador, predicadores, una herramienta que formateará nuestros archivos. Entonces de nuevo, vamos a cubrir eso a detalle, así que solo asegúrate de que esté instalado. Y la última extensión se va a alterar cotizaciones. Toggle quote es muy simple. Básicamente solo alterna las cotizaciones. Por ejemplo, si se lee aquí, necesitamos presionar esto dependiendo tu sistema operativo para cambiar las cotizaciones de simple a doble, de doble a backticks. Déjenme demostrárselo. Si solo vas a presionar estos botones en cualquier lugar, tendrás Este mensaje que al ejecutar contribuyeron Command falló. El caso es que hay que usar este comando solo dentro de las comillas. Tengo que poner mi cursor aquí dentro de un texto con comillas y luego usar la combinación para triplicar las comillas. Lo uso mucho personalmente y lo recomiendo encarecidamente a todo el mundo. Creo que eso es todo. Cubrí todo lo que quería. Mencioné todas las extensiones que creo que son importantes. Te di todo sobre ajustes, JSON, ya sabes, sobre terminal integrada. Yo personalmente lo abro con control más J encuadernación clave, no desde aquí. Y sí, eso es todo. A lo mejor una cosa más que mencionar es el tema de VSCode. Si quieres que VS Code se vea genial, busca un tema de extensión, está bien, y elige algo que te guste. Personalmente me gusta el tema de Firefox. Y ya lo tengo instalado. Por lo que solo voy a dar click en Set Color Theme, Firefox, dark, and boom. Ahora tengo diferentes colores en mi código VS. Bastante bonito. También tiene tema ligero si te interesa. De acuerdo, creo que eso es todo. Nos vemos en el siguiente. 11. Trabajar con Git: parte 1: Oye, en este video, vamos a hablar de, bien, Vamos. En primer lugar, ¿qué es Git? Git es una herramienta de gestión de proyectos que nos permitirá realizar un seguimiento de todos nuestros archivos de proyecto. Por ejemplo, vamos a hacer muchos cambios en nuestro código fuente cuando vamos a desarrollar nuestros proyectos. A lo mejor tardará un año. A lo mejor tardará dos años en desarrollar ese proyecto. Después de un año, probablemente no recordaré lo que hice en el pasado, cómo hace miedo. Y con el fin de tener esta historia del proyecto El bueno existe. Nos permitirá ver qué cambios hicimos, qué salió exactamente mal en este paso en particular. A lo mejor nos gustaría cambiar algo. A lo mejor nos gustaría contribuir con otras personas y para poder manejar todo eso, el bien existe. Ahora, veamos todo eso en la práctica. En primer lugar, crearé una nueva carpeta de proyecto. Ya abro VS Code. Ahora necesitamos abrir una carpeta de proyecto. Voy a dar clic en Archivo Abrir carpeta. Entonces voy a navegar a una carpeta donde quiero crear otra carpeta. Este va a ser mi proyecto de prueba, y lo abriré en VS Code. Genial. Ahora abramos terminal integrada. Voy a presionar Control más j. Y me abrirá Git Bash. Y como puedes ver, ya está en la carpeta del proyecto. Genial. Ahora, necesitamos inicializar bueno en esta carpeta del proyecto primero. Para hacer eso, necesitamos escribir git en él. Y verás este mensaje inicializado repositorio git vacío en esta carpeta. Y punto importante aquí que va a crear una carpeta oculta punto obtener una orden para ver esa carpeta oculta, necesitamos escribir ls menos a Se mostrará todos los archivos y carpetas en la carpeta actual más carpetas ocultas. Tan bueno. Y en realidad podemos navegar a esa carpeta usando cd para cambiar directorio. Y luego podemos volver a escribir ls para ver todos los archivos y carpetas. Y se puede ver un montón de cosas aquí, pero no nos interesan. Punto importante aquí que si vamos a eliminar esta carpeta, a eliminar todos nuestros buenos detalles del proyecto. Entonces si vuelvo a la carpeta principal, usaré CD y dos puntos, y ahora lo eliminaré. Por lo que voy a escribir una RAM que nuestra F y nombre de carpeta para eliminar todos los archivos y carpetas dentro buena, y obtener carpeta misma. Ahora puedes ver a este maestro, título maestro desapareció aquí. Significa que ahora get se elimina por completo de esta carpeta. Ahora déjame teclear git en él otra vez. Y boom, bueno, ahora se inicializa una vez más. Genial. Ahora bien, ¿qué pasa con este título maestro de aquí? ¿ Qué es eso? Esta es nuestra rama actual. Vamos a hablar de sucursales más tarde. Ahora mismo. No te enfoques en esto. Nos interesa conseguir a sí mismo lo que hace. Entonces, ¿cuáles son los beneficios? En primer lugar, vamos a crear un archivo por aquí. Vamos a llamarlo algún archivo dot TXT. Aquí vamos a teclear hola. A lo mejor este va a ser nuestro archivo principal del proyecto, bastante volcado, pero va a hacer el truco. Ahora con el fin de usar el bien, podemos escribir git status en primer lugar para entender lo que está pasando en este momento en particular en un buen proyecto. Por lo que aún no se ven commits. Actualmente estamos en rama master y tenemos un montón de archivos sin seguimiento para ser más específicos. Para un archivo, algunos file.txt, nada agregado a commit pero archivos sin seguimiento presentes en un buen proyecto los archivos pueden estar en tres estados diferentes. primer estado es estado sin seguimiento, segundo estado es estado de etapa. Tercer estado es cuando se cometen expedientes. Por lo que ahora mismo estamos en estado desrastreado. ¿ Qué significa? Significa que se detecten que tenemos algunos archivos nuevos en nuestro proyecto, pero aún no forman parte de este buen proyecto. Para poder agregar estos archivos, para llegar a hacerles saber que queremos realizar un seguimiento de estos archivos para incluirlos como parte de nuestro buen proyecto, necesitamos agregarlos al estado escénico. Para hacer eso, necesitamos escribir justo como dice aquí, git add file. Entonces podemos escribir git, agregar algunos file.txt. Presioné tabulador para autocompletar. Entonces solo escriba algún archivo, un poco de F, luego presione Tab y permitirá completar nombre de archivo para mí. Pero también puedo hacer git add dot para agregar todos los archivos de esta carpeta al estado escénico. Por lo que el punto representa todos los archivos en el directorio actual. Voy a usar ese comando porque es más corto. Git add dot. Ahora puedes ver el color cambiado a azul por aquí. Y lo que está pasando. Volvamos a escribir git status para ver qué es lo que aún no tenemos commits, cambios que se van a comprometer. Ahora puedes ver tenemos nuevo archivo, algunos file.txt. Genial. Significa que nuestro expediente está en estado escénico. Y como estamos usando VS Code, VS Code ha incorporado la integración de Git y la desintegración es una herramienta realmente poderosa. Por eso aquí en el panel izquierdo tenemos este ícono con un número dentro de él. Vamos a dar click en eso. Por lo que estas tabulador representa obtener integración. Para que veas aquí tenemos dos dropdowns, cambios escenificados y cambios. Se puede ver que ahora nuestra suma file.txt dentro de los cambios escenificados. Por lo que se puede ver a la izquierda lo que era antes, y a la derecha con verde, lo que se agregó, ya que es un archivo nuevo, no vemos nada y rojo a la izquierda. Ahora bien, si estás luchando con todos estos buenos comandos o no lo sé Por alguna razón, es difícil para ti recordarlos todos. Siempre podrías usar la integración de Git aquí. Entonces si hago clic en menos aquí, eliminará este archivo del estado escénico y lo volverá a volver a estado sin seguimiento. Ahora, si vuelvo a escribir git status, el terminal, puedes ver archivos sin seguimiento, algunos file.txt. Ahora si quiero agregar este archivo al estado escénico, solo hago clic en el signo más. Boom, it, es, está en escena otra vez. Genial. Ahora bien, ¿cuál es el estado escénico? Bueno, este estado de etapa es básicamente esa etapa preoperativa en la que se pueden comprometer los archivos. Entonces, ¿qué es un commit? Un commit es solo un registro en la historia de Git y representa los cambios realizados en el proyecto. Ahora comprometamos ese expediente a nuestra buena historia. Entonces lo que podemos hacer, podemos escribir git commit y luego necesitamos escribir menos M para mensaje commit. Y vamos a escribir añadido algunos file.txt. Voy a ejecutar ese comando. Y verás el modo tratado, un archivo cambiado, una inserción, genial. Y todos los cambios de la izquierda han desaparecido. Eso está bien. Ahora, si vamos a volver a escribir git status, no verás nada que comprometer. Esto se debe a que comprometer es arma. Ya está en el pasado. El bueno hace un seguimiento de todos nuestros commits que hemos hecho en el pasado. Para poder ver el historial de Git y el terminal, tenemos que escribir git log. Tenemos un commit al que nombramos editar algunos file.txt. Fecha es este y el autor, mi apodo y mi e-mail y commit hash en rama maestra. Digamos que quiero agregar nuevos cambios a ese archivo. Yo sólo voy a seguir adelante y modificar este archivo. Voy a escribir algo volcado y guardar el archivo. A la izquierda, verás que tenemos nuevo nuevos cambios en el archivo. Y esto es lo que hemos agregado, esto es lo que teníamos antes. Ahora, los mismos pasos. Tenemos que sumar primero estos cambios o ese archivo que se cambió al estado escénico, ¿no? Y después de eso, podremos comprometer ese expediente. Porque ahora si voy a hacer git commit y escribir algo, verás un mensaje de error. Bueno, no es un mensaje de error, pero no va a cometer nada porque bueno sólo puede cometer archivos escenificados. Por ejemplo, si voy a crear un archivo nuevo, test.js y voy a escribir, no sé, cosa muy básica en JavaScript, registro de consola. Hola. Voy a volver a esa ficha. Voy a escribir status git. Verás que se modifica un archivo, un archivo está desrastreado. Ahora quiero escenificar todos esos expedientes. Voy a hacer git add dot. Y verás que ahora están puestas en escena todos ellos. Y si voy a escribir git commit, esos archivos escenificados se agregarán al nuevo commit. ¿ Todo bien? No obstante, ¿y si no quiero que se comprometan todos estos expedientes? A lo mejor creé ese archivo, pero aún no estoy listo para comprometerlo. Yo sólo quiero comprometer esos cambios a la historia. Entonces lo que haré, eliminaré test.js de este estado de etapa, y dejaré sólo algún archivo en esta etapa. Entonces, como dije antes, git compromete solo archivos escenificados. Entonces si voy a escribir git commit y voy a escribir editado algunos file.txt. Yo lo ejecutaré. Verás prueba solo se queda porque sigue sin seguir, sin comprometer. Y si tecleo git log, voy a ver ahora tengo que comprometer grado. Ahora si quiero agregar test.js, volveré a escribir git add dot, luego git commit. Y voy a escribir editar, probar. Sí, genial. De nuevo, buena suerte. Y tengo mi historia de Git por ahí. Esto es lo que hace el bien. Nos permite crear ese historial de proyectos a través de mensajes de commit. Pero, vale, esto parece útil, pero no veo el punto principal aquí para ver todos los archivos, todos los cambios que has hecho para conseguir el proyecto o comandos diferentes, como buen show por ejemplo. Por lo que podemos escribir git show y luego cometer hash con el fin de ver los cambios realizados en este commit en particular. Por lo que sólo voy a copiar eso y poner buen show cash message. Tenemos ese compromiso. Esta es la diferencia. En expediente. Algunos file.txt, tenemos una línea editada y la segunda línea editada. Esto es todo. Por lo que ahora estuve de acuerdo en que esto no es conveniente ver todo a través de la terminal. Por eso hay muchas extensiones VS Code que podemos instalar con el fin de visualizar este proceso. Entonces si tipeo git en búsqueda de extensión, verás muchas extensiones diferentes como buena historia, obtener tierras, buena gráfica. Y todas ellas te ayudarán a trabajar con lo bueno. Te permitirán visualizar, reutilizar y hacer que el desarrollo de tu kit sea lo más cómodo posible. Yo personalmente no uso ninguno de esos porque creo que esta integración es más que suficiente y el resto irá en GitHub. En la segunda parte, vamos a hablar del GitHub. Github está relacionado para obtener lo que es GitHub. Sabrás todo eso en el próximo video. Nos vemos ahí. 12. Trabajar con Git: parte 2: Hola, Bienvenido a la segunda parte de buena serie. En este video vamos a hablar de GitHub. ¿ Qué es GitHub y por qué lo necesitamos? Vamos como recuerdo, tengo el pequeño proyecto bueno de la primera parte donde tengo dos archivos y algunos Committs en la terminal, si voy a conseguir log, podré ver el historial de Git de ese proyecto. Ahora, la pregunta es, ¿qué pasará si voy a eliminar esta carpeta de proyecto de prueba de mi PC, se va a ir mi proyecto por completo? Y la respuesta a esa pregunta en realidad será GitHub. Vendrá a nuestro rescate. Github es un servicio de hosting para buenos proyectos, igual que tenemos hosting para sitios web, GitHub es un servicio de hosting o plataforma para buenos proyectos. Si voy a Google y busco un GitHub, me traerá a la página oficial. Si aún no tienes una cuenta de GitHub, sugiero crear una ya en este momento, en este momento, ya inicié sesión. Quiero mencionar que hay algunos otros servicios de hosting populares para buenos proyectos, como Git lab o tal vez Bitbucket. La diferencia entre ellos estará en características e integraciones que te den. Github es el más común. Muy bien, ahora, tenemos nuestra cuenta de GitHub por aquí, y nos gustaría albergar nuestro buen proyecto que tenemos localmente en nuestro PC, en GitHub. Cómo podemos hacer eso. Entonces primero necesitamos crear un repositorio remoto en GitHub. Si hago clic en el signo más y la esquina superior y hago clic en nuevo repositorio, me pedirá los detalles de mi nuevo repositorio. Un repositorio es básicamente un proyecto bien, que pones en GitHub. Entonces Repositorio significa proyecto, pero en GitHub, así que mi nombre de repositorio va a ser mi proyecto. Dejaré descripción vacía repositorio visibilidad que podría ser repositorio público y privado. Si eliges público, tu repositorio será visible para todos, pero solo las personas autorizadas podrán contribuir a ese repositorio si va a ser privado, nadie lo sabrá nunca y verá ese repositorio. Entonces vamos a elegir privado, luego vamos a dar click en Crear Repositorio. Entonces en este paso, hemos creado un nuevo proyecto en GitHub. Ahora, necesitamos asociar hora Local buen proyecto que tenemos en nuestro PC con un repositorio remoto en GitHub. Podemos hacerlo de dos maneras, ya sea a través de HTTPS o a través del túnel SSH. Ssh es una opción disponible, pero GitHub recomienda HTTPS porque es más simple y más fácil de configurar, usemos HTTPS. Ya puedes notar que GitHub sugiere unos pasos cómo podemos asociar nuestro código local o proyecto local con el repositorio remoto. Vamos a seguir el segundo paso para empujar un repositorio existente porque nuestro buen proyecto local se puede llamar repositorio Git local. Entonces vamos a copiar el primer comando desde aquí y ponerlo en la terminal. Entonces, ¿qué agrega git remote origen? Primero ejecutemos este comando y veamos qué va a pasar. No se imprime nada y esto está totalmente bien. Pero ahora nuestro buen proyecto local sabe de este repositorio remoto. Podemos verificar que escribiendo git remote dash v, verás origen y verás URL del repositorio que hemos copiado desde aquí. También está disponible por aquí. Ahora, veamos una vez más este comando. Por lo que tenemos git remote add. Este es el comando para asociar nuestros repositorios. Origen es el nombre de un alias que asignamos a esta URL porque es más fácil referirse siempre a apodo o a un alias en lugar de URL todo el tiempo, que fue origen. Este es el nombre más común. Está bien. Ahora, ¿qué tenemos que hacer para aplaudir nuestros archivos locales al hosting, necesitamos hacer git push que el alias que asociamos con nuestra URL de repositorio, que va a ser origen y el nombre de rama que queremos desplegar. Así git push origin master. Si volvemos a abrir y Git Hub, veremos que sugiere buena rama principal y luego git push origin main como recuerdo ya mencioné ese alboroto hace alrededor de un año esa comunidad quiere cambiar nombre de sucursal predeterminado de master a main, pero vamos a seguir usando master ahora mismo. Entonces vamos a usar git push origin master en lugar de git push origin main. Yo lo voy a ejecutar. Y verás que se creó nueva sucursal en esa tarifa URL. Volvamos a GitHub, refresquemos la página y boom, podemos ver todo es visible por aquí. Entonces qué podemos hacer en GitHub. Github, podemos ver nuestra completa buena historia. Podemos ver todos los archivos y podemos ver en el momento creó este comando para ese archivo, vale, Así que hace tres horas fue el último commit para ese archivo y para ese archivo también para pruebas, sí, podemos dar click en Archivos para ver el contenido. En realidad podemos hacer clic en commits para ver qué cambios se hicieron en ese commit. Por lo que para editado algún archivo para volver a poner de nuevo, modificamos o eliminamos esa línea y agregamos estas dos líneas. El verde es lo que se agregó. Rojo significa algo que fue removido. Volvamos al repositorio aquí. También podemos ver buen historial completo haciendo clic en ese botón. Y podemos ver que tenemos tres commits. Podemos navegar por el repositorio en este punto, en la historia. Si hacemos click, podemos ver en este punto sólo había un archivo. Volvamos al repositorio principal nuevamente respondiendo a la pregunta principal, ¿por qué necesitamos GitHub? Necesitamos GitHub para colaborar con otras personas o para hacer portátil nuestro proyecto. A lo que quiero decir es que supongamos que accidentalmente perdemos esta carpeta de proyecto de prueba en nuestra PC local. Por alguna razón, simplemente no existe. No obstante, nuestro proyecto existe en GitHub. Entonces lo que podemos hacer, en realidad no podemos cargar nuestro proyecto desde GitHub y ponerlo en nuestra PC local haciendo clic en este botón verde, tenemos algunas opciones aquí. Podemos descargar zip o podemos clonar. Entonces si hacemos click en Descargar Zip, y si vamos a abrir ese zip, verás todos los archivos que hay dentro. Entonces esta es una manera. El segundo modo es clonar ese repositorio usando la CLI. Entonces vamos a elegir conexión HTTPS. Vamos a copiar esa URL. Y ahora supongamos que mi proyecto de prueba aquí no existe en PC. Lo perdí. Entonces si quería recuperarlo o recuperarlo de nuevo, haré git clon y luego la URL que copié. Por lo que copiará, creará una nueva carpeta llamada mi proyecto, y pondrá todos los archivos dentro. Si voy a inspeccionar mi carpeta de proyecto, verás algunos file.txt y prueba, sí. Pero también si voy a ir a mi carpeta Project y si hago ay F, para ver archivos ocultos, habrá otra carpeta Git por aquí. Entonces esto se debe a que cuando clones un repositorio, vendrá con una buena carpeta con la configuración de Git ya. Imagina que ese proyecto de prueba nunca existió en esa PC. Clono el repositorio usando HTTPS y git clon. Y ahora mi configuración de Git ya está completa. Simplemente puedo navegar a esa carpeta de mi Proyecto y todo ya está ahí. Configuración para mí. Ahora puedo seguir haciendo nuevos commits, para hacer algunos cambios, y luego volver a subir a GitHub, déjame eliminar mi carpeta de proyecto. En realidad no lo necesito. Voy a navegar hacia atrás. Ahora. ¿ Cómo puedo realmente seguir desarrollándome una vez que tengo mi proyecto en GitHub? Esa es una buena pregunta. Bueno, al igual que antes, si necesito introducir nuevos cambios al proyecto, solo seguiré haciendo mis cambios. A lo mejor agrego otra línea con hola dos por aquí y la guardo. Ahora como recuerdan, tengo cambios sin seguimiento. Si tecleo status git, verás que el archivo está modificado. Entonces de nuevo, necesito agregar ese archivo al estado escénico. Voy a poner git add dot. Ya lo verás aquí, aparece ahora en cambios escenificados y ahora soy capaz de comprometerme. Por lo que git commit añadió hola dos. Ahora si escribo git log, podré ver nuevo commit en la parte superior. Ahora tengo cuatro commits, pero si vuelvo a GitHub, no lo veo aquí porque GitHub y Git, no están mágicamente sincronizados entre sí. Siempre que haces nuevos cambios en tu PC, son locales. Están disponibles sólo en su PC. Y si quieres verlos en hosting, tienes que subirlos a hosting. Y para hacer eso, nuevamente usamos comando git, push, Good Push, y el nombre de LES y nuestro alias. Podemos verificar que con git remote dash v, nuestro Ls es origen, lo que lleva a este repositorio, lo cual es correcto. Entonces voy a hacer git push origin y luego dominar el nombre de rama. Ahora veo que se suben mis cambios. Refresco la página. Y aquí se agregó otro comité hace un minuto, lo cual es correcto. Si hago clic en ese mensaje de confirmación, verás que estas dos líneas para editar exactamente lo que acabo de hacer. Y una vez más respondiendo a la pregunta principal, ¿qué hace GitHub? ¿Por qué lo necesitamos? Github es necesario para la colaboración entre las personas y para hacer nuestro proyecto lo más portátil posible. En el siguiente video, vamos a hablar de sucursales y cómo gente está colaborando usando GitHub. Nos vemos ahí. 13. Trabajar con Git: parte 3: Hola, bienvenidos a la tercera parte de buena serie. En la última parte, hemos desplegado con éxito nuestro buen proyecto local en GitHub. Y sabemos lo que es GitHub. Se trata de una plataforma de hosting para la colaboración y utilizamos GitHub para que el proyecto superior sea lo más portátil posible. En esta parte, vamos a descubrir estos conceptos principales de buenas ramas frías. Y vamos a hablar de cómo podemos colaborar en GitHub. Vámonos. En primer lugar, hablemos de sucursales. Esta misteriosa rama maestra estuvo aquí desde el principio. Pero, ¿qué significa? Si vamos a escribir git branch en la terminal, veremos que solo tendrás master, pero somos capaces de crear tantas ramas como queramos. Entonces sucursal es justo que otra copia de nuestro proyecto. Echemos un vistazo a eso a través de un ejemplo. Entonces vamos a crear una nueva sucursal. Para crear una nueva rama, tenemos que escribir git checkout que menos b y luego el nombre de la rama que queremos crear, llamémoslo mi característica de guión. Se puede ver cambiar a una nueva sucursal. Mi característica, de nuevo, tipo git branch. Tengo master y tengo mi característica y un conjunto de master. Veo ahora mi característica, esto es porque esta es mi rama activa en este momento. Entonces lo que ves aquí es tu sucursal actualmente activa. Ahora, cuál es la diferencia en este momento, estas dos ramas son iguales, pero supongamos que quiero desarrollar una nueva característica en mi app, pero no quiero tocar mi código principal. Mi código principal se mantiene sin cambios, pero quería desarrollar una nueva característica. Aquí es donde entran las sucursales. Por lo que mi rama maestra contiene mi última aplicación al código que se despliega a la producción. Funciona ahora mismo. Y al mismo tiempo quería desarrollar una nueva característica. Por lo que creo una nueva sucursal llamada mi característica, y ahora empiezo a desarrollarme en esa nueva rama. Supongamos que estoy en mi rama de funciones, creo un nuevo commit. Mi nueva característica va a ser un nuevo registro de consola, que va a ser hola tres. ¿ Está bien? Ahora cometeré estos cambios. Primero empujo al estado escénico y luego hago un nuevo compromiso. Yo lo llamo desarrollado mi nueva característica. Genial. Si hago git log para ver el historial, puedo ver mi historial anterior y luego mi nuevo commit, desarrollar mi nueva característica. Impresionante, pero ¿cómo es útil? Ahora bien, si necesito por alguna razón cambiar de nuevo a mi código principal y ver qué había ahí. Ahora soy capaz de cambiar entre sucursales. Entonces pongo git branch para ver qué ramas hacen la mitad y luego puedo hacer git checkout master para cambiar entre ramas, pero esta vez sin bandera menos B. Ahora estoy cambiada a master de sucursal. Y se puede ver cómo ha desaparecido este cambio que el dr hizo en mi rama de funciones. Esto se debe a que ese cambio forma parte de mi rama de funciones. No tiene relación con master porque si pongo un git log, verás que no tengo este commit de que lo he liberado en mi rama de funciones, en rama maestra, es completamente diferente. Entonces como puedes ver, Master y mi característica son alguna especie de copias de mi proyecto que existen al mismo tiempo, puedo manipular esas ramas para desarrollar diferentes características. Ahora, ¿cómo puedo realmente utilizar este concepto de sucursal para que sea útil para mí o para las personas con las que colaboro. Entonces supongamos que hay 10 personas que trabajan en un mismo proyecto y para invitar a las personas a un repositorio y tienen que ir a ajustes, administrar el acceso. Y aquí normalmente invitarás a colaboradores. Por lo que las personas que tengan acceso a ese repositorio privado podrán hacer cambios a ese repositorio. Pero si el, todos, si todas las personas que trabajan en un proyecto van a empujar a la misma rama maestra o rama principal. Esto va a ser un poco un desastre. Queremos hacerlo lo más estructurado, despertado posible para mantener nuestra buena historia limpia, legible y mantenible. Y para ello, utilizaremos sucursales. Supongamos que nuestro código principal está en rama maestra, que tiene último commit agregado hola a soy otra persona sentada en algún lugar por ahí. Soy colaborador y creo una nueva sucursal, mi característica que ya creé, e hice algunos cambios. Quiero empujar esos cambios a GitHub, y quiero fusionar esos cambios en el código principal, que se encuentra de nuevo en la rama maestra. Entonces lo que necesito hacer, primero necesito empujar esa rama. A GitHub. Para ello, haré git push origin porque este son nuestros alienígenas para el repositorio. Recordamos ese git push origin, mi característica. Esperemos un segundo. Y ahora está empujado e incluso nos sugiere crear una solicitud de pull para mi función en GitHub visitando. Vamos a hablar de eso en un segundo. Pero si volvemos a GitHub, ya vemos que mi función tenía empujes recientes hace menos de un minuto. Comparar y tirar de la solicitud. Si refresco la página, ahora aquí veré dos sucursales. Si hago click aquí, tengo master de sucursal por defecto y tengo tus sucursales, mi función lo actualizo por minutos hace por mí y sucursal principal del CEU horas ago por mí. Y aquí puedo ver si floto, voy a ver a uno comprometerse por delante de maestro. Ahora, con el fin de empujar esos cambios que tengo en mi rama de funciones en master, necesito crear una solicitud de pull directamente en GitHub. Una solicitud de pull es esa solicitud de desarrollador cuando le pides a los mantenedores del proyecto que fusionen tu sucursal en la rama principal. Entonces básicamente quieres contribuir y te gustaría empujar esos cambios al código principal. Vamos a dar click en nueva solicitud de pull. Lo nombraremos desarrollado. Mi nueva característica dejará un comentario que, oye, acabo de hacer ese gran cambio. Y aquí seleccionamos eso. Queremos empujar, queremos fusionar mi rama de funciones en master. Estos son todos los compromisos que he hecho en esa rama. Puedo crear tantos commits como sea posible. Por ejemplo, si agrego otro commit, tal vez console.log, hola para, de nuevo, escenario esos cambios, los vuelvo a cometer, cambio nuevo. Nuevamente, empujo, Buen origen Push, mi característica. Se actualizará el ramo. Aunque ya creé una solicitud de pull, aún no la he creado. Pero de todos modos, así que voy a dar click en crear, tirar, solicitar. Y veamos qué tenemos aquí. Entonces primero vemos Comprobando capacidad para fusionarse porque podría haber conflictos en esos cambios. Pero como no tenemos conflictos, está bien. Por lo que veremos nuestras solicitudes de pull por aquí. Entonces ahora ¿qué va a pasar? Yo soy esa persona que ahí sentada creando esa solicitud de pull, entonces entra líder del proyecto o mantenedor y esa persona responsable de la solicitud de pull va aquí y ve eso, hey, esa persona quería fusionar esos cambios. Por lo que hace clic en esa solicitud de extracción. Vale, genial, ese tipo hizo ese gran cambio. Oh, Dios mío. Yo quiero fusionar esos cambios. Por lo que esa persona fusiona esa solicitud de extracción. Por lo que selecciona una de las opciones aquí. Déjame hacer click en solicitud de fusionar pull y vamos a ver qué va a pasar. Por lo que fusionar solicitudes de pull de esa persona, esa rama desarrolló mi nueva característica, confirmar fusión, fusión, solicitud de encuesta, surgieron exitosos y cerraron la sucursal de eliminación. Vamos a dar click en que se eliminó la rama , tirar peticiones, fusionar. Si vuelvo a mi proyecto aquí, puedo ver solicitudes de pull de fusión de Sherlock 16, mi característica, y ahora forma parte de una buena historia. Si hago clic en commits, voy a ver que primero tengo estos dos commits que tenía en mi rama de funciones. Y encima de eso tengo otra solicitud de pull commit merge. Ahora todos estos cambios que estaban en mi rama de funciones se fusionaron en el código principal y están disponibles aquí. Es así como la gente suele contribuir a través de la solicitud de pull uno, todos estos cambios están en GitHub. Tendremos discrepancias porque tenemos siete commits en rama maestra, en repositorio remoto, en GitHub en nuestro proyecto local, seguimos teniendo mi rama de funciones. Y si vamos a master usando git checkout master. Y si hacemos git log, vemos el último commit aquí se agrega hola dos, mientras que aquí está, fusionar solicitudes de pull a una. Para solucionarlo, tenemos que descargar los últimos cambios de GitHub a nuestro código local para sincronizar el historial. Para hacer eso, el comando es muy similar al git push, pero en lugar de git push, usaremos git pull. Entonces de nuevo, obtenemos pull que las áreas del repositorio y luego el nombre de sucursal para tirar. Por lo que queremos sacar maestro de origen. Yo lo voy a ejecutar. Y vas a ver que genial, algo pasó. Y como pueden ver, ahora, todos mis cambios están aquí. El último commit introducido, hola cuatro y yo, y ahora tengo hola para en mi código. Bastante cool para verificar que vuelva a hacer git log. Y ves que tengo múltiples peticiones bomba desde Sherlock 16, por cierto, para salir de este estado cuando, cuando una buena historia se desborda, solo puedes teclear q y te llevará a la terminal. De acuerdo, yo diría que esto es probablemente, así es como la gente usa GitHub para colaborar. El modelo sería un poco diferente si se trata un repositorio público y se desea contribuir a un proyecto de código abierto. Pero no vamos a cubrir eso en esta serie. Esto es más que suficiente para que entendamos cómo funciona Git y cómo las personas colaboran entre sí. Entonces de nuevo, voy a repetir el flujo una vez más normalmente. Y si querías crear un nuevo cambio y estás trabajando en un proyecto. En primer lugar, se crea una nueva rama mediante el uso de git checkout menos b y el nombre de la rama, puede ser cualquier cosa. De acuerdo, así que estos copian, esta nueva rama se creará a partir de la rama que estaba activa en el momento en que ejecutes ese comando. Por lo que estas ramas ahora contendrán todos los commits que has tenido cuando ejecutes este comando, vale, sigues desarrollando rama de conducta, haz tantos commits como necesites para completar la función. Entonces empujas esa rama a GitHub usando un buen Push. Después aparece en el repositorio. Después vas a tus solicitudes de pull y creas una nueva solicitud de pull para fusionar esa rama que acabas de publicar en GitHub en el código principal, en la rama principal. Y luego vendrá una persona responsable a ver que, Oye, ese tipo quiere fusionar esa rama en el código principal. Y una vez que se fusione o acepte esta solicitud de pull, tus cambios se fusionarán en el código principal. Después de eso, a todos los que estén trabajando en un proyecto, se les exigirá sacar los últimos cambios de la rama principal mediante el uso del comando git pull. Y eso es todo. Este es el flujo básico de las felicitaciones de colaboración de Git y GitHub. Creo que este es nuestro acabado para buena serie, y te voy a ver en la siguiente. 14. Instalación de Node.js (Windows): Hola, En este video estamos a punto de instalar Node.js en Windows. Qué es NodeJS y por qué lo necesitamos se explica en el siguiente video. Lo que tenemos que hacer es abrir cualquier navegador e ir a Google. Y Google no buscará GS. El primer enlace va a ser la página oficial. Aquí tenemos dos versiones para descargar, LTS y versión actual. versión actual es la última versión disponible para su descarga, y LTS es la última versión estable. No necesitamos complicarnos demasiado. Por eso obtenemos LTS. Haga clic en ese y luego abra el instalador. Espera un poco y golpea Next. Sí, acepto Siguiente, cambia el camino si es necesario. A continuación, en este paso no necesitamos GS, NPM y trayectoria de actitud. A continuación, en este paso contamos con herramientas para módulos nativos y queremos seleccionar esta opción. ¿ Qué es eso y por qué lo necesitamos? Al igual que dice, algunos módulos npm necesitan ser compilados desde CC plus plus al instalar. ¿ Qué significa? Significa que existen algunas bibliotecas, módulos, o paquetes que instalaremos durante nuestro desarrollo que requieren algunos binarios nativos específicos del sistema operativo, en nuestro caso, windows. Por lo que las herramientas que compilarán esos músculos lisos son las herramientas de construcción de Python y Visual Studio. Entonces esta opción solo los instalará si faltan ahora, ¿verdad? Golpea Siguiente y pulsa Instalar. No voy a dar clic en Instalar porque ya no tengo GS instalado. Pero para ti, esto es lo que va a pasar. Al hacer clic en ese botón, verás que aparecerá una nueva ventana CMD. Y verá algo así como vamos a hacer e instalar este orden que vamos a requerir este número de espacio. Simplemente cierra esa ventana y después de eso, verás que se abrirá otra ventana, que es la ventana de PowerShell. Y habrá todo el registro de instalación. Así que sólo espera un poco de tiempo hasta que esté hecho y luego estás bien. No se considera instalado ningún JS. Ahora verifiquemos eso. Cómo hacer eso. Haga clic en Panel Inicio y busque cmd. Entonces abrimos eso. Y en CMT tecleamos espacio de nodo, dash, versión dash. Pulsa Enter y deberías ver la versión que acabas de instalar. Podría ser posible que cuando escriba node dash, versión dash, verá algo así como node no se reconoce como un comando interno o externo. Por lo que tenemos que encontrar otra forma de verificar nuestra instalación. Para ello, tenemos que ir de nuevo a iniciar Panel que a panel de control. Y luego buscaremos programas y características, ¿de acuerdo? Aquí tenemos que verificar que no tenemos GS en la lista. Entonces si no tienes GS en la lista por aquí, te da aviso no reconocido como un comando extra interno. Entonces necesitas hacer un pequeño retoque en la configuración del sistema. Entonces lo que hay que hacer es volver a hacer clic en el panel Inicio en el tipo de búsqueda ENV y seleccionar editar las variables de entorno del sistema. Después haga clic en las variables de entorno. Y aquí, bajo variables de sistema, debes encontrar la variable de ruta. Haga doble clic en esa. Y en la lista no verás Archivos de programa C. No JS, que es mi camino de instalación para no jazz. Entonces porque no lo tienes aquí en la lista, ves nodo no se reconoce, ¿vale? Entonces lo que necesitas hacer, debes dar click en Nuevo y agregar tu ruta de instalación para no GS. Entonces si no modificaras la opción en la instalación, sería C Program Files, NodeJS también. Así que golpea Nuevo, pega el camino por aquí, ¿de acuerdo? Está bien, está bien, entonces sólo reinicia la terminal. A continuación, prueba nodo dash, versión dash. Otra vez. Después de eso, deberías ver la versión. Y eso es básicamente todo. Felicidades, Acabas de instalar NodeJS en Windows. Nos vemos en el siguiente. 15. Instalación de Node.js (macOS) (macOS): Hola, En este video, te mostraré cómo instalar NodeJs en macOS. Vámonos. Como siempre, vas primero a Google y tecleas NodeJS, vas a la primera URL, que es la web oficial, luego navega a la página de descargas y haz clic en instalador de macOS. La descarga comenzará automáticamente. Abre el archivo descargado. Verá el asistente de instalación haga clic en Continuar, luego acepte los términos, luego verifique la ruta de instalación y haga clic en Instalar. Te solicitará tu contraseña y eso está bien. Espere a que no se instale GS justo después del proceso de instalación, no tendrá GS ni NPM en su sistema para verificar la instalación. Vamos a la terminal, vamos a almorzar mal. Después busca terminal para verificar NodeJS tipo nodo dash V, que significa versión. Debería imprimir la versión que has instalado. Y de la misma manera, también necesitamos verificar el NPM. Entonces escribe npm dash v, y eso es todo. Nos vemos en el siguiente. 16. Node.js y NPM - parte 1: Hola, Bienvenido a conocer GS video de introducción. Ahora mismo vamos a hablar de lo que no es GS. ¿ Por qué lo necesitamos, y cómo podemos usarlo? Vamos primero lo primero, lo que no es GS sabe GS es entorno de tiempo de ejecución de JavaScript. Significa que es algo que nos permite ejecutar JavaScript. Y probablemente pensarás, ¿por qué no necesitamos GS? Porque tenemos JavaScript corriendo en el navegador y ese es el punto. actualidad, somos capaces de ejecutar JavaScript fuera del navegador con la ayuda de NodeJS, podemos usar JavaScript para escribir aplicaciones móviles. Podemos usar JavaScript para escribir aplicaciones de escritorio. Básicamente podemos hacer cualquier cosa con JavaScript en este momento. Gracias a la nota, sí, porque nos permite ejecutar JavaScript fuera del navegador. Entonces, por ejemplo, si abro el navegador aquí, hago clic en Inspeccionar, luego voy a la consola. Por lo que este es el entorno del navegador. Soy capaz de escribir cualquier JavaScript que quiera aquí. Por ejemplo, si quiero escribir console.log 5 más 2, imprimirá seis para mí. Eso es genial, pero esto está dentro del navegador. Si quisiera ejecutarlo en otro lugar, no se me permitiría hacerlo. Pero con la ayuda de nodos, sí, podré hacer eso. Vamos al código VS y déjame crear una nueva carpeta de proyecto. Iré a la carpeta Mis Proyectos, y aquí voy a poner prueba GS. Seleccionaré esa carpeta. Y ahora vamos a crear un nuevo archivo aquí lo llamaremos test.js. Antes vamos a escribir nada, Vamos primero a asegurarnos de que no tenemos JS instalado en. Podemos acceder a ella. Para eso, abriré mi terminal integrada. Y para poder acceder a NodeJS, solo necesito escribir nodo. Una vez que ejecuten el comando node, entraré al entorno Node.JS. Por lo que aquí, podré ejecutar JavaScript. Por ejemplo, lo mismo que hice en el registro de consola del navegador 2 más 4. Bastante impresionante. Esta es la prueba de que JavaScript se ejecutó fuera del navegador. Pero esto no es muy conveniente para nosotros escribir siempre JavaScript dentro de la terminal. Entonces para salir de ese modo, que va a presionar Control más C varias veces. Genial. Y ahora en su lugar, vamos a escribir algunos archivos JavaScript que más tarde ejecutaremos sin JS antes de que vayamos a saltar a archivos, solo quiero mencionar que cada archivo, cada archivo JavaScript que se ejecuta dentro del entorno Node.JS va a ser un módulo. Un módulo es un archivo JavaScript que es autónomo. Significa que no se sabe del mundo exterior sólo lo que está escrito en su interior. Primero creemos tal vez ¿Soy audible? Const cinco es igual a cinco. Y ahora vamos a consola dot log 5 y golpear Guardar. Eso es todo. Acabamos de crear nuestro primer guión. Ahora vamos a ejecutarlo para ejecutar un archivo, tenemos que escribir nodo y luego el nombre del script que nos gustaría ejecutar. Entonces esto va a ser prueba GS. Ejecuto ese comando y se pueden ver cinco en la consola porque yo solo registro de consola 5. Si voy a quitar esa línea, lo comentaré. Y voy a tratar de volver a ejecutar el guión. No se imprimirá nada. Y esto es obvio porque no hacemos nada por dentro. Ahora, hagamos que nuestra tarea sea un poco más dura. ¿ Y si tenemos dos archivos a módulos? Deja que crees un segundo punto aquí, y pongamos una cuerda aquí. A lo mejor mi nombre, imprimiré Andrew. Y lo que quiero hacer, quiero compartir de alguna manera información entre estos dos módulos. Por lo que quería pasar mi nombre de segundas gs a prueba. Sí. Y yo soy capaz de hacer eso a través de la importación y exportación. Por lo que para exportar algo desde un módulo, usamos módulo. Por lo que nuestros expertos que exportamos un objeto. Y en este objeto, pondré mi variable de nombre así. Entonces puedo hacerlo en realidad así. Mi nombre, entonces llama a mi nombre. Pero en JavaScript podemos usar una taquigrafía. Podemos simplemente ponerlo así y va a funcionar muy bien. Ahora mi nombre se exporta de segundas gs. Intentemos importar eso. Si vuelvo a Ts, gs, déjame quitarle todo eso. Pondré una const que voy a nombrar a mi exportación algo así como. Importó mi nombre, lo que sea. Y para poder importar lo que exporté desde aquí, necesito escribir requerido. Y dentro requiero, pongo camino a ese módulo, que va a ser apenas segundo GS. No necesito especificar la extensión. Por lo que puse punto y slash por aquí para especificar que este archivo se encuentra en esta carpeta. Ahora, lo que voy a hacer, simplemente consola log importado mi nombre. Guardo el archivo, vuelvo a la terminal, y luego de nuevo, nodo, prueba, GS. Boom, lo que veo, tengo un objeto. Y este objeto contiene mi clave de nombre. Exactamente lo que exporté de segundo, sí, en realidad podemos renombrar eso a segundo módulo importado. Y luego puedo hacer referencia importado segundo módulo dot mi nombre porque este es un objeto y tiene clave mi nombre. Lo guardo, vuelvo a ejecutar el guión, y he entrado impreso en la consola. Es así como funciona NodeJS simplemente creando diferentes módulos que compartan datos entre sí. Ese sistema con un require y con exportaciones de módulos se llama GS comunes, que se escribe así. Coma gs. Se trata del sistema nativo de exportación de importación en Node.JS. No obstante, en este momento, comunidad NodeJS está trabajando activamente sistema que se llama módulos ECMO Script. Por lo que estos módulos son parte del entorno del navegador y por el momento son experimentales en un entorno Node.JS. Por lo que son ligeramente diferentes de las exportaciones requieren y módulos, pero son más fáciles e intuitivas de usar. Vamos a probarlos. ¿ Qué opinas para poder utilizar moléculas ACML Script en el entorno Node.JS, tenemos que añadir otra extensión a nuestros módulos. Entonces en lugar de js, necesitamos usar MGS, que va a ser el módulo GS, MGS y renombrar ese archivo también, van a ser mgs. Entonces en lugar de requerido, voy a comentar esta línea hacia fuera presionando Control Slash. Y en su lugar usaré Import. Entonces ya que exportamos un objeto, volveré a poner corchetes rizados. Y voy a especificar que necesito importar mi nombre. Es importante especificar el mismo nombre porque si voy a especificar algo diferente, no existe en el objeto exportado, ¿verdad? Por lo que pondré mi nombre desde segundo módulo. Genial. Y ahora voy a consola log mi nombre. Y en el segundo MGS, en lugar de las exportaciones de módulos, simplemente escribo export mi nombre. Eso es todo. Y se ve mucho, mucho más limpio que CommonJS. Ahora probemos una prueba de nodo ejecutada. Sí, y vamos a tener, no puedo encontrar módulo aha IC. Esto se debe a que probablemente tenga que especificar la extensión. Déjame probarlo. Sí, exactamente. Por lo que hay un inconveniente más con el módulo de scripts ECMO usando en el estado actual de NodeJS, siempre tengo que especificar la extensión con CommonJS, puedo admitir especificar la extensión cuando a Importar diferentes módulos así, pero con módulo de scripts ECMO, tengo que hacer eso. El resultado es el mismo. Voy a ejecutar el guión. Tengo a Andrew, pero se puede ver ahora utiliza módulo de scripts ECMO en nuestro proyecto. Cuando vamos a hacer todas esas cosas de desarrollo, vamos a usar el entorno Node.JS y vamos a utilizar los módulos de Achmat Script. Se puede ver que este es un ejemplo muy sencillo. Utiliza guiones individuales aquí, nada complicado. No obstante, obviamente estamos necesitamos algo más complejo y este es nuestro tema para el siguiente video. Nos vemos ahí. 17. Node.js y NPM: parte 2: Oye, bienvenidos a la segunda parte de la introducción de NodeJS y a la última parte discutimos qué es lo que no sí, y cómo podemos ejecutar guiones individuales. En este video, vamos a hablar de NPM y cómo podemos usar npm para administrar dependencias de proyectos y proyectos. Vámonos. En primer lugar, ¿qué es npm? Npm es sinónimo de Node Package Manager y viene ya empaquetado con NodeJS. Entonces si no tienes instalado JSON, ya tienes NPM para verificar que dentro de la terminal, solo tienes que escribir npm. Hay versión dash y se imprimirá la versión de NPM instalada actualmente. Ahora ¿cómo podemos usar npm o qué hace por nosotros? Bueno, la cosa es que en proyectos JavaScript reales, hay dependencias o paquetes de proyectos. Por lo que estas son esas bibliotecas, diferentes módulos de Internet o diferentes herramientas que instalamos en nuestro proyecto. Y npm es la herramienta que nos permitirá hacer eso. Entonces con el fin de instalar esos paquetes, pero primero, cómo inicializar npm dentro de nuestra carpeta de proyectos. Para hacer eso, tenemos que usar el comando npm init. Y una vez que ejecute este comando, le solicitará algunas cosas como nombre del paquete, versión y algunas otras cosas. Simplemente omita eso presionando enter todo el tiempo. Una vez finalizada la orden. En la ruta del proyecto, verás paquete de archivos package.json Jason es ese archivo manifiesto el cual describe nuestro proyecto dentro podemos ver el nombre del proyecto, tal vez la descripción de la versión del proyecto. Si vamos a poner esas luces de autor y ver si tenemos algún guion y algunas otras secciones de las que vamos a hablar en un segundo. La pregunta es, ¿qué paquete JSON hace por nosotros? ¿ Cómo puede ser útil? Bueno, vamos al navegador. Busquemos NPM en Google y terminaremos en la página web oficial del npm. Npm cuenta con el registro del NPM. Por lo que Node Package Manager es una herramienta que nos permite administrar paquetes dentro de nuestro proyecto. Pero, ¿de dónde vienen esos paquetes? Vienen del registro del NPM. El registro de NPM es ese océano de diferentes paquetes, herramientas, y bibliotecas que podemos instalar en nuestro proyecto usando npm. Por lo que en esta página web puedes buscar diferentes paquetes. Hay millones, miles de millones de bibliotecas diferentes que podemos utilizar. Pero por ahora, sólo busquemos el que preparé , que es cowsay. Vamos a dar click en ese. Y ahora podemos ver la página web oficial de estos empaquetados en esa página, podemos encontrar su documentación, cómo podemos instalar ese paquete, qué hace, cómo podemos usarlo, y todas las demás cosas. Podemos ver que tiene para dependencias. El caso es que los paquetes publicados en el registro del NPM tienen dependencias, y esas dependencias también son paquetes publicados. Y esos paquetes también podrían tener Dependencias. Dependencias, dependencias y dependencias de dependencias se denominan dependencias de pares. En esa página, también podemos encontrar alguna información de materia como versión, cuántas descargas semanales tiene el autor publicado por última vez, y algunas otras cosas. Leamos la documentación. ¿Qué vemos aquí? En primer lugar, ¿qué hace este paquete? Bueno, este paquete es básicamente muy sencillo. Su único propósito es simplemente imprimir esa vaca en la terminal. Entonces vamos a ver la parte de instalación, npm instalar menos g cowsay. Copiemos ese comando y pongámoslo en nuestra terminal. Veamos qué va a pasar. Para que podamos ver que algo está pasando. Podemos ver que la instalación ya fue exitosa. Podemos ver Editar 41 paquetes y la versión que hemos instalado, que es 1.5. ¿Por qué paquete 41? Al igual que mencioné anteriormente, los paquetes tienen sus propias dependencias, y esas dependencias tienen sus propias dependencias. Y eventualmente tenemos este árbol de dependencia. Es por eso que al final tenemos 41 paquetes en total. Tenemos npm instalado cowsay. ¿ Qué hizo? Bueno, acaba de instalar cowsay en nuestro sistema como paquete global. Como paquete global porque menos g flag para verificar que podemos escribir npm list menos g, luego dash, dash depth es igual a 0. Ejecutemos ese comando y veamos qué se imprime. Ya tengo unos cuantos paquetes instalados aquí globalmente, pero en tu lista verás cowsay. Entonces, ¿qué significa? ¿ Qué nos da? Significa que ahora podemos usar el paquete como CLI globalmente en nuestro sistema. Veamos el parque de uso, cowsay JavaScript. Vamos a copiarlo. Y intentemos ejecutarlo en la terminal. Tengo esta pequeña vaca bonita aquí diciendo JavaScript. Entonces esto es exactamente lo que hace este paquete, y podemos usarlo como CLA en nuestra terminal. Y no importa desde donde está disponible a nivel mundial. Si abro otra instancia de Git Bash por aquí, seguiré siendo capaz de usar cowsay. Porque de nuevo, instalamos cowsay como paquete global. Significa que podemos usarlo en cualquier lugar. Hay dos tipos de paquetes, o diría dos formas de cómo podemos instalar un paquete. En primer lugar, podemos instalarlo globalmente, tal y como ven aquí. Entonces cuando un paquete se instala globalmente, no está limitado a ningún proyecto, solo se instala globalmente en su sistema. El segundo modo es instalar un paquete como dependencia del proyecto. Cuando un paquete instalado como dependencia de proyecto, en primer lugar, no está disponible globalmente. Se vuelve disponible sólo en ese proyecto en el que se instaló, Primero desinstalemos cowsay como paquete global, y en su lugar lo instalemos como una dependencia del proyecto. Entonces primero vamos a teclear npm instalar menos g sake de vaca. Verás al final retirado 41 grado paquete. Ahora para instalar cowsay como dependencia de proyecto, tenemos que hacer npm instalado cowsay, pero esta vez sin bandera de menos g, ejecutemos ese comando y veamos qué va a pasar. Qué hay de nuevo en el lado Explorador de archivos. Entonces primero, si abrimos paquete Jason, veremos nueva sección de dependencias. Entonces debido a que el paquete Jason es nuestro archivo manifiesto , contendrá, enumerará todas las dependencias que hemos instalado. Por lo que hemos instalado sólo un cowsay dependencia de esa versión. Ahora también vemos paquete.json. Y paquete.json aparece cada vez que instala cualquier paquete.json propósito es buscar versiones de las dependencias instaladas y dependencias de dependencias. De esta forma podemos evitar diferentes problemas con las resoluciones de versiones. Y también tenemos carpeta de módulos de nodo. La carpeta de módulos de nodo es esa carpeta donde se instalaron todos los paquetes. Si abrimos esa carpeta, veremos aquí un montón de paquetes diferentes junto con cowsay. Estos son esos 41 paquetes que vimos fueron instalados. Están aquí bajo módulos Node. Si vamos a eliminar esta carpeta, eliminarán. Ahora, volvamos a cowsay y veamos cómo realmente podemos usar ese paquete. Entonces si nos desplazamos hacia abajo, podemos ver el uso como un módulo. Recuerden que les dije a unos que todos los archivos en Node.JS, nuestros módulos igual con paquetes. Debido a que los paquetes en el registro de NPM también son archivos JavaScript, significa que hay módulos. Entonces veamos cómo podemos usarlo como módulo. Y mirando este fragmento de código, puedo decir que este ejemplo usa require, lo que significa que usa el sistema de importación CommonJS. Pero ahora sabemos que hay CommonJS y también hay módulos ECMO Script. Entonces en cambio vamos a usar módulos atmosféricos. Entonces vamos a copiar este ejemplo. Y pongámoslo dentro de nuestros mgs de prueba. Pero en lugar de requerir, uso en mi importación de script. Por lo que vamos a teclear importación cowsay de cowsay. Y aquí tengo que especificar el nombre del paquete, donde nombre de dependencia del paquete JSON. No necesito especificar la ruta donde no necesito hacer referencia a los módulos de nodo. Solo necesito escribir nombre de dependencia, que va a ser cowsay. Ahora, eliminemos esto y eliminemos esto, y vamos a guardarlo. Y intentemos ejecutar ese guión. Voy a escribir nodo test.js. Y veamos, de nuevo tenemos esa vaca diciendo que soy un Moodle, pero ahora cowsay es parte de nuestro proyecto. Cuando lo instalamos globalmente, era independiente. Era sólo una herramienta en nuestro sistema que podemos utilizar a través de la terminal. Pero como ahora cowsay forma parte de nuestro proyecto, estamos delimitados a cowsay en este proyecto específico. Si voy a eliminar carpeta de módulos de nodo, vamos hacia adelante y eliminemos por completo. Y si voy a intentar volver a ejecutar ese archivo, verás que no puedes encontrar paquete cowsay porque acabamos de eliminar todos los archivos necesarios para ejecutar cowsay. Por lo que para reinstalar los paquetes listados en el paquete Jason listado en nuestro proyecto, tenemos que simplemente escribir npm instalado siempre que no tengamos carpeta de módulos de nodo, pero necesitamos instalar los paquetes. Simplemente tecleamos npm install. Entonces lo que hará, se verá dentro del paquete Jason. Buscará la sección de dependencia e instalará los paquetes que faltan. Eso es todo. Ahora se puede ver de nuevo en él 41 paquete, si vuelvo a ejecutar el guión, la vaca estaba ahí. Impresionante. Inspeccionemos el paquete JSON, y encontremos la sección de guiones por aquí. Yo quiero hablar de esta sección ahora, lo que pasa es que en los proyectos, hay algunos proyectos guiones específicos. Por lo que esta sección se llama guiones NPM. Por lo general, los scripts específicos del proyecto se definen a través de scripts NPM. Ya tenemos script de prueba definido aquí, pero vamos a eliminarlo y definamos nuestro propio script. Puede ser cualquier cosa, podemos nombrarlo lo que queramos. Por ejemplo, mi script de prueba. Y aquí tenemos que escribir lo que hará el guión. Por ejemplo, si en la terminal para imprimir algo en la salida, utilizaría el comando echo, echo, hola, y hola se imprime. Entonces bueno, aquí podemos definir lo mismo. Por ejemplo, mi script de prueba ejecutará echo hola, por ejemplo, en código hola. Ahora para poder ejecutar ese script NPM, tengo que escribir npm run y el nombre del script, que va a ser mi script de prueba. Una vez que ejecuten ese comando, ese comando buscará el paquete JSON en esta carpeta, y se verá dentro de esta sección de script, y encontrará mi script de prueba, y luego simplemente ejecutará lo que esté escrito aquí. Vamos a probarlo. Ya puedes ver tengo Hola, básicamente el mismo resultado. Eso es todo, por qué podría ser útil. Bueno, hay algunas situaciones en las que podríamos tener un guión muy, muy largo por aquí. Imagínese que va así. Y ahora, en lugar de escribir todo eso, todo el tiempo, sólo podemos ejecutar npm, ejecutar mi script de prueba, y va a hacer la cosa. Eso es todo. Vamos a hablar más de scripts de NPM en detalles una vez que vamos a andamiar un proyecto real de React por ahora, dejémoslo vacío. Una cosa más que quiero mencionar aquí es que las dependencias del proyecto pueden ser de dos tipos. En realidad, hay dependencias regulares que usamos en nuestro código fuente, y podría haber dependencias de dev. Por lo que las dependencias de dev también son parte del proyecto, pero no son referenciadas dentro del código fuente. Se utilizan sólo para el desarrollo. Por lo que estos paquetes que vamos a instalar para el desarrollo van a ser predicador y ES pelusa. Y los vamos a instalar como dependencias sordas. Hablaremos de ellos en los próximos videos. Serán utilizados para facilitar nuestro desarrollo, pero son opcionales. Si vamos a eliminar dependencias de dev, el proyecto aún podrá ejecutarse. No obstante, si eliminamos esa dependencia de aquí, si vamos a eliminar módulos de nodo, el proyecto no podrá ejecutarse porque depende de cowsay. Entonces si eliminamos las dependencias de dev, el proyecto aún podrá ejecutarse. Pero si eliminamos la dependencia principal, el proyecto no se ejecutará porque ahora falta la dependencia porque nuestro proyecto depende de ello. Pero las dependencias de dev son solo dependencias para nuestro entorno de desarrollo. No tiene influencia directa en el código fuente. Vamos a hablar de eso una vez más Una vez más Una vez vamos a hablar de predicador en la gasolina. Pero por ahora, creo que es suficiente. Todos los proyectos de JavaScript se gestionan así usando npm, los paquetes de registro de NPM, vas a tener empaquetados JSON en tu carpeta raíz. Tendrás dependencias instaladas desde el registro del NPM. Entonces vas a referir esas dependencias en tu código fuente. Al final del día, cuando tengas que desarrollar el proyecto o tienes que construir el proyecto, tendrás scripts de NPM definidos aquí en paquete Jason. Y eso es todo. Así es como se ven todos los proyectos de JavaScript. Eso es todo para NodeJS. Y te veo en ES pelusa y video predicador. 18. ¿Qué son los prettier y los ESLint?: Oye, en este video me gustaría hablar de predicador en ES pelusa. ¿ Cuáles son esas herramientas? ¿ Por qué nos importa y cómo nos van a ayudar? Vamos a averiguarlo juntos. Entonces lo primero que quiero mencionar que en este video, voy a reutilizar el mismo proyecto que creé en el video de introducción Node.JS. Como recuerdan, solo contiene una dependencia, que es cowsay, y la usamos dentro solo MGS. Empecemos. Predicadores una herramienta que va a formatear todos nuestros archivos. Tiene sólo un propósito para Formatear archivos. Se gana el conflicto predefinido. Entonces descubramos cómo podemos usar predicador. Si vamos a Google y buscaremos un predicador, terminarás en la página oficial. Vamos a la documentación oficial de instalación y vamos a seguirla. Predicador instalado primero localmente. Copiemos ese comando y pongámoslo dentro de la terminal. Por lo que la bandera save-dev dentro del comando significa que ese predicador de paquetes se instalará como una dependencia de desarrollo. Si vamos a abrir package.json, veremos nueva sección por aquí, dependencias de dev, que son dependencias de desarrollador. Y veremos a predicador por aquí. Ahora. Sigamos con los perros. Y aquí hemos creado un archivo de conflicto vacío. De nuevo, sólo voy a copiar el comando. Ponlo en la terminal, y creará un predicador vacío RT JSON para mí, cada predicador de herramientas y Eastland, requiere un archivo de configuración para entender lo que queremos de esa herramienta. Y podemos ver todas estas opciones de conflicto para predicador dentro de la documentación bajo el enlace Opciones. Si vamos a ir aquí, veremos diferentes opciones aquí que podemos usar dentro de imagen RC Jason, por ejemplo, tab con. Entonces solo voy a ir a usar Tab width desde aquí. Solo voy a copiarlo, ponerlo dentro de la config. Y podemos ver que el defecto es dos. Entonces déjame tal vez poner 10 por aquí y veamos qué va a pasar. Guardé el archivo. Vuelvo a probar MGS. Presiono Control S para guardar el archivo. Y boom, se ve que la hendidura ha cambiado. Ahora. Utiliza el ancho del grifo de 10 líneas vacías. Probablemente estés pensando en cómo es automáticamente como formatear ese archivo. El caso es que lo que acabamos de instalar dentro de nuestro proyecto bajo dependencias de dev, hemos instalado predicador como herramienta, pero fuera de formato, como vemos, característica está disponible a través del VS Code que ya debiste haber instalado. Si no lo hiciste, ve a la pestaña Extensiones. Busca aquí la predicación. Esta es la extensión e instálala y asegúrate de que ya esté configurada. Si no hiciste eso, para ver video de configuración de código VS de proyecto a proyecto, quieres reutilizar predicador. No se quiere especificar siempre diferentes opciones aquí. Confía en mí, sólo habrá unos pocos. Entonces por esa razón, voy a compartir con ustedes este regalo y podrán simplemente copiar y pegar ese conflicto predicador que uso en todas partes. Entonces déjame ponerlo aquí y déjame guardar el archivo. Como pueden ver, yo uso cinco comandos y esto es suficiente para que un predicador trabaje. Ya puedes ver si voy a salvarlo. Utiliza ese conflicto ahora. Impresionante. Entonces respondiendo a la pregunta, ¿ por qué necesitamos predicador? En primer lugar, debes entender que predicador es una herramienta opcional, pero es muy recomendable que tengas predicador dentro de tu proyecto JavaScript. El motivo de eso es porque queríamos hacer nuestro código lo más legible y mantenible posible. Y el predicador nos ayudará con eso. ¿ Cuál prefieres? ¿ Este formato extraño? Porque por alguna razón no terminaste la sangría manual o prefieres código muy limpio logrado con predicador? Supongo que va a ser la segunda opción. Por fin, considera una situación cuando tienes muchos archivos dentro del proyecto y no están formateados. Predicador. Entonces, ¿qué hacer en este caso? Bueno, la primera opción es por supuesto, ir a cada archivo, presionar Control S para guardar cada archivo manualmente, y luego se formará predicador en ellos. Pero esto no es muy conveniente. Sería mejor crear un script que formatee todos nuestros archivos a la vez. Y ese guión usaremos predicador, y aquí es donde entran los guiones del NPM. Vamos a crear un script NPM que utilizará predicador para formatear todos nuestros archivos dentro del proyecto usando el predicador RC JSON. Entonces si volvemos a la documentación del predicador, vamos a la página de instalación. Desplazemos hacia abajo y aquí podemos ver ahora formatear todos los archivos con predicador y tenemos ese comando y px predicador dash, dash right dot. Déjame copiarlo. Y volvamos a navegar a los guiones del NPM. Entonces aquí vamos a definir y tú script NPM que vamos a nombrar formato. Dentro de ese guión, voy a poner n px, predicador, guión, punto derecho. obstante, realmente no necesitamos y Px aquí, puedes leer lo que es n px en esta alerta amarilla. ¿ Estamos seguros? Entonces n px es básicamente una herramienta que se envía sin JS que permite ejecutar paquetes directamente desde el registro NPM sin instalación. Si no he instalado predicador y entonces usaría n px predicador dash, dash Reidar. Funcionaría porque NP x usará predicador sin instalación directamente desde el registro del NPM, pero no lo necesitamos en absoluto. Tenemos predicador instalado. Y cuando escribamos predicador aquí dentro del script del NPM, usará predicador instalado dentro de los módulos del nodo. Probemos ese comando que acabamos de definir. Voy a volver a mi terminal y ejecutaré el formato npm run. Verás que algo está pasando. Y ahora algunos archivos se ven afectados, básicamente todos ellos. Vamos a sacarlos. Entonces tenemos ese archivo formateado, ese archivo formateado, ese archivo formateado. Entonces básicamente todo está ahora formateado usando un predicador. Volvamos al predicador RC Jason, y quizá cambiemos a 10 tableta. Y vamos a volver a ejecutar el comando npm formato de ejecución. Y verás que ahora todos los archivos están formateados contra conflicto predicador que acabamos de definir. Eso es todo. Ahora ya sabes lo que hace el predicador y ¿por qué lo necesitamos? Vamos a resumir rápidamente. Preacher es una herramienta que formateará archivos dentro de nuestro proyecto actual, más bonita tiene un archivo de configuración cual es puntopredicador RC JSON. Podemos usar predicador a través de los guiones del NPM o podemos usar predicador a través la extensión VS Code que hemos instalado. Entonces esa extensión, lo único que hace, sólo nos permite formatear archivos. Cuando tocamos el botón de guardar, Si vamos a desactivar esa extensión o si no la tenemos, predicador no se formará en nuestros archivos cuando impactemos Save, la única oportunidad para formatear el serán a través de nuestro script NPM personalizado, que nombramos formato. Pero con extensión, es mucho, mucho más conveniente. Ahora, pasemos a ES pelusa antes de que vayamos a saltar a Eastland, permítanme volver rápidamente a nuestra configuración anterior aquí y volver a ejecutar el comando format. Impresionante. Ahora bien, ¿qué es Eastland? Eastland es también una herramienta opcional que nos permitirá comprobar JavaScript contra algunos problemas comunes, contra algunas pautas de código predefinidas. Necesitaremos ES pelusa para verificar que no tenemos errores muy simples en nuestro código, como variables indefinidas, variables no utilizadas, o tal vez tengamos alguna pieza de código que se usa de manera incorrecta y ES pelusa háganoslo saber sobre eso. Entonces otra vez, al igual que con la presión, Vamos a Google y busquemos ES pelusa. Vamos a dar click aquí. Se puede ver que ES pelusa es un lineal. Tan lineal es una herramienta que realmente comprueba el código contra errores. Vamos a dar click en Get Started, y volvamos a seguir simplemente la documentación. Por lo que npm instala ES pelusa save-dev, copia. Volvamos a ponerlo en la terminal. Dash, dash save dev flag asegurará que ES pelusa se instalará como dependencia de desarrollador en paquete Jason, nuevo, dependencias de desarrollo de agua, dependencias de dev son esas herramientas que utilizamos en el desarrollo medio ambiente. No forman parte del código fuente. Entonces si voy a quitar a Islandia y predicador, mi proyecto aún podrá ejecutarse. Genial. Contamos con ES pelusa instalada. Ahora sigamos la documentación. Por lo que nos sugiere usar el comando init para inicializar el archivo config. Entonces, en cambio, vamos a crearlo manualmente. Por lo que voy a crear un nuevo archivo aquí, y lo voy a nombrar punto ES pelusa RC. Entonces este va a ser mi archivo ES lint config. Para configurar ES pelusa, tenemos que seguir exactamente el mismo patrón que con predicador. Tienes que crear un archivo config y tenemos que poner algunos comandos para que Yes Lint entienda lo que queremos de él. Volvamos a la página web y aquí tenemos configuración. Entonces vamos a tal vez copiarlo. Pero vamos a cambiar algunas opciones aquí. Lo pondré aquí. Voy a quitar esto y Terminamos con la sección de reglas. Dentro de la sección de reglas en Islandia, RC, definimos reglas de pelusa ES que nos gustaría usar dentro de nuestro proyecto contra cuales se revisará nuestro código. Por ejemplo, puedo escribir una regla llamada no virus no utilizado, y necesitamos suministrar algunas opciones aquí. Y lo puedes ver incluso me da editor de autocompletado apagado y desgastado. Entonces, ¿qué son esos? Entonces si voy a posponer esa regla se desactivará y mi código no se revisará contra esa regla. Si voy a poner hacia como opción para alguna regla de pelusa ES. Significa que cuando vaya en contra de esa regla, ES pelusa me dará una advertencia. Y tengo una tercera opción, que es error. Significa que cada vez que vaya en contra de ese papel, Sí, Lint producirá un error. Entonces hay algunas, digamos, reglas cruciales que quiero que me reporten como otra. Y hay algunas reglas tal vez menores que quiero que me reporten como advertencias. Podemos encontrar todas estas reglas dentro de la documentación. Siempre te sugiero que busques dentro de la documentación. Puedes encontrar todo ahí para que incluso puedas ver fuera advertir opciones de error aquí, exactamente lo que se te dice. Ahora, podemos ir a Guía del Usuario y podemos ir a reglas. Esto es referencia de reglas. Aquí siempre puedes encontrar todas las reglas. Por ejemplo, si voy a buscar no barras sin usar, puedes verlo aquí. Vamos a buscarlo. Sí, no permitir variables no utilizadas. Entonces esto es lo que hace la regla, es esto permite el uso de variables no utilizadas. Entonces vamos a probarlo. Voy a volver a mi código. Y aquí lo que tengo el error de análisis, la entrada clave está reservada. Bueno, sí, primero necesitamos dejar que ES pelusa entienda que estamos usando la última sintaxis de JavaScript. Para ello, vamos a ES pelusa. Aquí, agregamos otra opción la cual va a ser opciones de analizador. Por lo que dentro de las opciones de analizador tenemos que suministrar versión AVMA. Y pongamos 2020 aquí cuando guarde el archivo y vuelva a probar MGS, y veo otro error diciendo que la importación y exportación puede aparecer solo en módulo de tipo fuente proveniente de ES pelusa de nuevo. Por lo que vuelvo a sí Lind y puedo suministrar otra opción aquí va a ser tipo fuente, grado de módulo. Ahora no tenemos ningún error ni advertencias, así que no tenemos definida ninguna regla de virus sin usar cual producirá un error cada vez que vayamos en contra de eso, cierto, Vamos a probar mgs. Y aquí vamos a crear una variable de uso final. A lo mejor le llamaré Hola. ¿ Y qué vemos aquí? Vemos que se destaca con línea roja. Si paso el cursor, se ve lo bajo que se le asigna un valor pero nunca se usa. Y viene, como se puede ver de ES pelusa, no hay variables no utilizadas. Si voy a volver a ES pelusa RC, y si voy a desactivar esa regla, para desactivar la comprobación contra esa regla. Ya lo verás, no tengo ninguna advertencia ni un adder. Entonces volvamos aquí y pongámoslo como advertencia. Y podemos ver que es amarillo porque ahora es una advertencia. Y si lo vuelvo a poner a absoluto, se pondrá de rojo. Impresionante. lo mejor mantengamos una advertencia y volvamos a la documentación. Entonces volvamos a la página de instalación. Y aquí podemos ver en la parte inferior que también podemos poner la opción de extensiones dentro de ES pelusa. El caso es que ES pelusa tiene muchas reglas diferentes y escribir todas esas reglas manualmente por aquí todo el tiempo. Esto no es muy conveniente porque nuestra ES pelusa nuestra va a ser bonita, bastante larga. Esto no es conveniente. Entonces para resolver ese problema, ES pelusa tiene archivos de configuración o digamos conflictos predefinidos que podemos extender desde ES pelusa viene construido en ES conflicto recomendado. Entonces vamos a copiarlo y ponerlo en la parte superior. Ahora, usamos al convicto recomendado. Si volvemos a probar MGS, vemos que tenemos consola no está definida ahora. Bueno, esto se debe a que ES pelusa cosas que estamos ejecutando dentro del entorno del navegador. Y para eso, tenemos que volver a precisar que estamos corriendo por dentro sin jazz. Entonces para eso, tenemos que poner aquí las opciones de la ENV y especificamos que estamos dentro. Nota. Y lo pondremos en realidad, en realidad podemos poner muchas opciones diferentes como ES6 para volver a especificar que estamos usando la última sintaxis de JavaScript. Y hay un montón de opciones diferentes. Y confía en mí, no necesitas conocerlos todos. Porque siempre tienes primera documentación que puedes usar siempre que tengas problemas con la comprensión de Eastland o simplemente puedes copiar y pegar sí. Vincula conflicto desde algún lugar y ajustado a tus necesidades. Este es uno muy básico. Mantengámoslo tal como está. Una nota importante que quería enfatizar es que sólo se puede ver ese amarillo flotando o tal vez se puede ver ese rojo flotando por aquí. Es decir, reportar directamente dentro de VS Code, gracias a la extensión. Por lo que tengo instalada la extensión de pelusa de ES instalada. Aquella que integra ES pelusa en el código VS. Por eso aquí veo esta línea roja. Si esta extensión estuviera desactivada ES pelusa no me reportaría en realidad, al igual que la veo en este momento. No se pondría rojo. El único modo en que yo sabría ese error sería ejecutar el comando ES pelusa, igual que lo hicimos antes con predicador. Entonces tal vez vamos a crear otro script de NPM y definamos el comando para Eastland. Volvamos a paquete.json. Aquí voy a poner puede ser comando pelusa y llamaré ES pelusa asterix dot JS o ya que tenemos extensión MGS voy a poner y gs por aquí, vamos a correr a ES pelusa contra todos los archivos con la extensión MGS. Vamos al terminal integrado y ejecutemos el script que hemos definido, npm run pelusa, y verás ES pelusa reporta un problema. Hola se le asigna un valor pero nunca se usa. Entonces esto es muy conveniente porque en el código de producción, aparentemente no queremos tener y usar variables. Y hay un montón de diferentes errores y advertencias que podríamos recibir. Pero confía en mí, esto es por nuestro propio bien. Es pelusa nos ayudará a mantener nuestra base de código con menos errores posibles. Vamos a utilizar la pelusa ES combinada con el predicador mucho. No obstante, hay un problema con ES pelusa y Predicador. El caso es que algunas reglas de predicador se superponen con las reglas de pelusa de ES. Y para solucionar ese error, necesitamos navegar a ES pelusa. Si vamos a ES pelusa en nos desplazamos al resumen aquí podemos ver uso ES pelusa convicto predicador para hacer que predicador y enlace ES jueguen bien juntos. Navegemos a ES predicador de conflictos lean. Y vamos a la parte de instalación. Vamos a copiarlo. Lo vamos a poner aquí. Y de nuevo, dash, dash, save dev flag para instalar ese paquete como una dependencia de dev. Si vas a mirar dentro de las dependencias de dev, verás predicador de conflictos orientales ahora. Y veamos qué tenemos que hacer en predicador a la extensa matriz en su archivo RC de Eastland. Por lo que se extiende algunos otros configura y presión. Está bien, así que pongamos, vamos a copiar a predicador. Volvamos a ES pelusa se extiende. Y se puede ver por el ejemplo que utiliza una matriz. Por lo que ES pelusa soporta ambos. Vamos a convertirlo en una matriz. Y pongamos aquí a predicador. Bonito. Sin ese paquete, sin ese predicador convicto de ESPN, terminarás en una situación en la que tendrás errores de Eastland y no entenderás por qué los estás teniendo. Este paquete asegura que no tengas ningún conflicto. Y voy a ver que esto es todo. Esto es todo lo que quería decir de ES pelusa y predicador para resumir rápidamente, ¿qué es Eastland? Eastland es una herramienta que nos permitirá consultar nuestro código, nuestro código JavaScript, contra algunas pautas comunes predefinidas. Eventualmente hará que nuestro código sea menos propenso a errores, y asegurará que nuestra base de código, limpia posible. Preacher formateará nuestra base de código para que se vuelva lo más legible posible. Apenas una vez más, voy a decir que estas herramientas son opcionales, pero verás predicador y pelusa ES en casi todos los proyectos JavaScript porque la gente quiere que sus proyectos sean legibles y ser menos propensos a errores. Eso es todo. Nos vemos en el siguiente. 19. ¿Qué son los Serores, JSON, REST API y GraphQL?: Oye, en este video, me gustaría hablar de servidores. ¿ Qué es un servidor? ¿ Qué es una API? ¿ Qué es una API de descanso? ¿ Qué es GraphQL? Vamos a averiguarlo juntos. En primer lugar, empecemos con el servidor. ¿ Qué es un servidor? Un servidor, es sólo una computadoras en algún lugar por ahí en Internet. Se ejecuta algún software. Y ese software en esa clase de informática para nuestras solicitudes entrantes. Entonces por ejemplo, cuando navego a cualquier sitio web, cuando hago clic en ese enlace, mi navegador envía una solicitud a ese servidor. Entonces a la izquierda, este es mi navegador, y envía esa solicitud a ese servidor. Este servidor maneja la solicitud entrante y envía archivos HTML, CSS, y JavaScript. Entonces de nuevo, un servidor, es sólo una computadora que ejecuta algún software que de alguna manera maneja nuestras solicitudes entrantes y envía una respuesta de vuelta. Ahora bien, y si no quiero recibir siempre archivos HTML, CSS, y JavaScript, tal vez solo quiero ejecutar alguna consulta en el sitio web, como en la barra de búsqueda. ¿ Necesito volver a devolver HTML? No, tú no. Solo necesitas obtener los datos, resultado de esa consulta en la barra de búsqueda. Por lo que en este caso, los datos deben ser transferidos en algún otro formato. Por lo que algún otro formato suele ser formato JSON o formato XML. Pero XML ya está obsoleto, diría en la web ahora mismo, todo el mundo usa JSON. Así que busquemos JSON o tal vez incluso para JSON placeholder API de descanso falso gratis. De acuerdo, entonces primero tenemos que averiguar qué es JSON. Sólo voy a dar clic en Ejecutar script por aquí. Y recibo este JSON es solo formato en el que los datos se transfieren a través de la web. Se puede utilizar no sólo en la web, sino en cualquier otro escenario. Simplemente es muy fácil transferir información en este formato. Se ve muy similar a un objeto JavaScript. Ahora, volvamos a nuestro lienzo. Entonces, ¿cómo encaja este escenario? Entonces imagina que estoy aquí en la página web y escribo algo en la barra de búsqueda, que está dentro del sitio web. Y quiero recuperar mis resultados de búsqueda en formato JSON, enviaría otra solicitud a ese servidor, y ese servidor manejará mi solicitud, mi consulta. Se buscará la base de datos. Recuperará los resultados, y me enviará estos datos de vuelta en formato JSON, que se ve exactamente así. Por lo que no hay necesidad de HTML, CSS o JavaScript. Por lo que este tipo de servidor que aloja archivos HTML, CSS y JavaScript, generalmente llamados los servicios de hosting. Por lo que se utilizan para alojar páginas HTML básicas. Simplemente ponen tus archivos, HTML y CSS en su máquina, y simplemente sirven estos archivos en su computadora. Eso es todo. ¿ Y los servidores API? Entonces, lo que es una API en primer lugar, API es sinónimo de interfaz de programación de aplicaciones, y generalmente encaja en servidores API solo porque la mayoría de las veces los servidores API sirven a este propósito de un intermediario entre usted y base de datos subyacente. Pero este no sólo es el caso. Bueno, generalmente se les llama servidores API porque son interfaces para todo lo que está detrás de ese servidor. Es por eso que se les llama API o interfaces o como sea que las llamara. Echemos un vistazo a este Marcador de posición JSON una vez más. Por lo que envío una solicitud a esta URL. Sólo voy a copiarlo y ponerlo aquí. Si accedo a ella, probablemente lo veas en formato crudo como ese. Este servidor actúa como una API de descanso porque sigue el formato de descanso. Por lo que es una API porque es una implementación de servidor personalizada. Entonces es ese software personalizado instalado en el servidor el cual maneja mi solicitud al mismo y envía de vuelta a Jason, esta es la parte API. Ahora, ¿qué es el descanso? El descanso significa que sigue el patrón de diseño de descanso en la implementación del descanso. Significa que el código de tipo de Marcador de posición JSON del servidor que calma expone múltiples endpoints a los que podemos acceder con el fin de recuperar datos. Por ejemplo. Ve a slash para hacer's slash uno. Esto es todo id Obtenemos datos para que ver con ID número 1. Si escribo siete aquí, verás tengo ahora id de usuario uno, id siete y datos diferentes. Si van a ser cuatro , serán datos diferentes. Si va a ser algo así, verás nada porque no existe su servidor API, este al que estamos accediendo en este momento es en realidad una API para la base de datos subyacente que utiliza bajo el capó. De acuerdo, y sigue el patrón de descanso. Puedes navegar a la página web principal por aquí. Y puedes buscar otros puntos finales disponibles en ese recurso. Por ejemplo, aquí se pueden ver recursos. Podemos ir a publicaciones, podemos ir a usuarios, podemos ir a álbumes. Y se puede ver que todos tienen diferentes puntos finales. Nuevamente, esto se debe a que sigue la implementación de descanso. Imagina una casa grande con muchas puertas. Entonces una casa grande es el servidor, el servidor API. Y esas puertas son y puntos a los que estás accediendo con el fin de obtener datos. Y esos datos se transfieren en formato JSON. Porque es muy sencillo entender ese formato. Es muy ligero y fácil de leer o escribir, pero el descanso no es la única implementación del servidor que podría existir ahí fuera en la naturaleza. Hay otro realmente popular en este momento, que se llama GraphQL. Y obviamente están los otros. Entonces, pero ahora mismo en la actualidad, principalmente dos tipos, API de descanso y API de GraphQL. Graphql es al mismo tiempo un lenguaje y al mismo tiempo la implementación del servidor, la arquitectura. Entonces busquemos GraphQL en Google o tal vez GraphQL Explorer. Nos llevará a esta página de docs de GitHub API GraphQL. Y lo hará, vamos a terminar en esa página. Se requerirá que me identifique para poder utilizarlo. Por lo que voy a iniciar sesión con mi cuenta. Si por ahora no tienes cuenta de GitHub, está bien. Basta con mirar a través del video. Entonces este es el lenguaje GraphQL. Así es como se ve. Para poder solicitar datos del servidor GraphQL, tenemos que enviar un co-variado como Dad en ese formato siguiendo el lenguaje QL gráfico. Entonces si voy a enviarlo, ya verás que obtengo datos en este formato y es formato JSON, como puedes ver. Entonces, ¿cuál es la diferencia entre gráfico y descanso? Bueno, antes que nada, igual que mencioné antes, API de descanso tiene múltiples endpoints. Por ejemplo, slash todos. ¿ Dónde está? Slash comentarios, álbumes, fotos, y tareas pendientes. Para acceder a los datos, tu URL debe ser diferente para acceder a diferentes recursos. Pero GraphQL, es ligeramente diferente. Si hago clic en Inspeccionar y voy a la pestaña Red aquí, cuando presiono este botón de reproducción, puede ver la URL a la que se está accediendo, que es el proxy slash GraphQL slash. Y si ejecuto otra solicitud, la URL no cambia. Bueno, la implementación del servidor GraphQL solo tiene un punto final a través cual pasan todas las solicitudes para entender lo que el usuario declinó, lo que queremos del servidor. Enviamos ese co-variado al servidor. Si, por ejemplo, navegamos a referencias y consultas en una nueva pestaña. Entonces busquemos usuario y espera un argumento. Probemos esta consulta. Entonces voy a quitar todo eso. Voy a escribir usuario, igual que dice aquí. Y tenemos que suplir un argumento. Suministras un argumento. Tenemos que abrir paréntesis y ponemos este argumento aquí. El inicio de sesión es el argumento de tipo string. Vamos a poner mi apodo por aquí. Ahora entre paréntesis rizadas hay que especificar qué tipo de datos tenemos que recibir. Por lo que va a ser login. Si lo pongo así. Bueno, básicamente tengo la misma información, pero la consulta es diferente y en ese punto es la misma. Ahora, ¿ya has detectado la diferencia? Bueno, la diferencia, la principal diferencia sobre GraphQL y API de descanso es que GraphQL solo envía datos que pides, ¿verdad? Entonces aquí pido solo inicio de sesión en mi consulta. Por lo que esta consulta en realidad se llama esquema, esquema que usted solicita del servidor. Muy bien, Así que solicito este esquema de solo login y obtengo solo login back to rest API. Si vamos a los puestos, pedí puestos. No especifico qué campos quiero recuperar de pose. Esto depende del servidor decidir para que el servidor centre el título y el cuerpo, y no podemos cambiar eso. Está bien, si accedo a publicaciones con esa identificación , me da título y cuerpo. Pero con GraphQL, soy capaz de especificar qué campos quiero recuperar del servidor si navegamos a los perros. Entonces login, en realidad esta consulta nos devuelve tipo usuario. Si lo abrimos, el usuario tiene muchos campos y en realidad podemos usar la inteligencia de GraphQL. Entonces solo voy a presionar el espacio de control. Y aquí tengo espacio de control bio aquí tengo tal vez nombre aquí tengo login. Para que veas que estoy usando el lenguaje de consulta para especificar qué campo quiero recuperar. Y cuando presiono Play para enviar la consulta, puedes ver ahora tengo mi forma de datos personalizada que se especifica en la consulta. Bastante cool. Entonces esta es la principal diferencia. Y probablemente pensarás que GraphQL es, Oh Dios mío, Es increíble. ¿ Por qué incluso necesitamos API de descanso? El problema es todo sobre la implementación y su complejidad. Graphql fue creado por Facebook hace unos años y se hizo realmente popular. No obstante, la API de descanso es una solución más madura y probada en batalla. Graphql es duro. No es tan fácil. Es fácil consumir Graph kill, pero para implementar GraphQL, se requiere un buen conocimiento. Rest API es más simple, más fácil de implementar, y es más intuitivo en comparación con las enhorabuenas de GraphQL. Ahora ya sabes lo que es una API. Nos vemos en el siguiente. 20. Renderizado lateral lateral del cliente (SPA) VS. Renderizado lateral del servidor del servidor (dinámica y estático): Oye, en este video, me gustaría hablar aplicaciones del lado cliente y del lado del servidor. ¿ Por qué nos importa y por qué es importante entender la diferencia? Vamos Primero. Déjame abrir mi pequeño lienzo que preparé. En la parte superior aquí tenemos tres tipos principales de renderizado en la web. El primero es el renderizado del lado del servidor, que es un enrutamiento del lado del servidor. Entonces tenemos renderizado del lado del cliente, que utiliza enrutamiento del lado del cliente. Y entonces tenemos enfoque híbrido, que combina ambos. El mejor modo de entender la diferencia entre esos tres es mirar los ejemplos. Y esto es exactamente lo que vamos a hacer. Si voy al navegador aquí preparé dos sitios web, sitio web de vapor y Netlify. Ambos son aplicaciones de renderización del lado del servidor. ¿ Y cómo sabemos de eso? Si hacemos clic derecho en la página y vamos a ver fuente de la página, aquí, podemos ver el marcado. Entonces si vemos el marcado en la fuente de la página, significa que la página es renderización del lado del servidor. Entonces esto es lo que ves aquí, fue devuelto del servidor cuando accedo a esa URL. Además, cada página contiene ataques met únicos. Significa que si voy a una página diferente y si inspecciono el origen de la página de esa página, las etiquetas Meta serán diferentes y el marcado será único para cada página del sitio web. Ahora, tenemos un segundo ejemplo, Netlify. También utiliza el renderizado del lado del servidor. Si inspecciono la página, tengo exactamente la misma imagen. Tengo metaetiquetas únicas y tengo el marcado. ¿Está bien? Pero Netlify es diferente. El caso es que Netlify usa páginas estáticas o renderizado estático del lado del servidor, mientras que steam utiliza renderizado dinámico del lado del servidor, ¿cuál es la diferencia? La diferencia es que en el caso de Netlify, todas estas páginas son simplemente estáticas, no cambian. También significa que cada página en el sitio web de Netlify tiene su propio archivo HTML. Si voy a la página de precios, página de precios tiene su propio archivo HTML, igual que la página de inicio o cualquier otra página. Ahora, ¿qué pasa con el vapor? Vapor, ligeramente diferente. Utiliza el renderizado dinámico del lado del servidor. Significa que esta página, por ejemplo, página de juegos, esto es sólo una página de esqueleto. Tiene la plantilla que utiliza para renderizar juegos. Entonces si voy a cualquier otra página, se puede ver que se ve exactamente igual. El único que se cambió es la información en la página, pero el diseño es el mismo. Y este diseño es el esqueleto utilizado para insertar datos dinámicamente en ese esqueleto. Y esto es exactamente lo que hace vapor. Entonces para todas estas páginas de juegos, solo tienen un esqueleto. Y este esqueleto se reutiliza para insertar dinámicamente los datos. Se llama dinámico porque cada vez que envío una solicitud para acceder a esa página, el servidor crea dinámicamente marcado HTML y luego me envía de vuelta para declinar. Es por eso que cada página cada página es diferente. Tiene marcado único porque fue creado o ensamblado dinámicamente en el servidor. A diferencia de las páginas estáticas, marcado HTML no se ensambla en el momento de solicitud cuando accedo a esta página. El marcado se ensambló cuando se construyó la aplicación. Por lo que fue creado una vez y ahora cada vez que accedo a esta página de precios, simplemente envía el marcado estático porque no tiende a cambiar. Muy bien, El inconveniente con las páginas estáticas es que si necesitamos cambiar algo en nuestro contenido estático, tenemos que reconstruir la app, regenerar páginas HTML y luego subirlas a hosting de nuevo. Por lo que ahora se consideran actualizadas. Con el renderizado del lado del servidor, este no es el caso. Tienes el esqueleto y los datos se insertan dinámicamente. Esto significa que los datos recuperados de la base de datos y luego basados en esos datos, se devuelve HTML. No necesitas cambiar nada. No es necesario regenerar páginas ni hacer nada. Solo si necesitas cambiar el diseño o el esqueleto. Sólo en este caso, debe ser redesplegado para reflejar todos los cambios a ese esqueleto. Vamos al segundo tipo, que es el renderizado del lado del cliente, o más a menudo llamado aplicaciones de una sola página como PA. Ahora bien, ¿cuáles son esos sitios web? Aquí preparé también dos ejemplos. Telegram, versión web. Y este sitio web de instantáneas que fue construido con React por cierto. Entonces si inspecciono telegrama, Ver Página Fuente, puedo ver que no tengo nada aquí en absoluto. Si voy a la etiqueta del cuerpo, está totalmente vacía. No obstante, si inspecciono elementos de la página, el marcado está ahí. Entonces, ¿qué está pasando aquí? Del servidor? Obtengo este archivo HTML oso solo con paquetes JavaScript. Y JavaScript es quien renderizará mi página, ¿quién creará el marcado? Quién creará el HTML dentro del navegador. Es por ello que se llama renderización del lado del cliente, porque JavaScript es quien renderizará la página dentro del navegador una vez que tengamos ese HTML desde el servidor, esta es la diferencia. Por lo que en el renderizado del lado del servidor, tenemos marcado ya ensamblado y devuelto del servidor por anticipado. Pero con aplicaciones de una sola página o con renderizado del lado del cliente, no tenemos eso. Tenemos muy desnudo mínimo de HTML y el resto se ensambla dentro del navegador por JavaScript. Eso es todo. Pero hay un inconveniente muy crucial sobre las aplicaciones de una sola página o la representación del lado del cliente. Es malo para SEO, que significa optimización de motores de búsqueda. El caso es que si quieres que esta página sea clasificada y rastreada por Google o por Facebook, siempre es mejor renderizar del lado del servidor. Porque rastreadores, lo que el mar, ven exactamente esto, esta fuente de página. Ellos ven el marcado, ven ataques de Matt. Y en base a ese marcado y etiquetas Meta, pueden correr y entender de qué se trata esta página. No obstante, pero las aplicaciones de una sola página , los rastreadores, no ven ninguna de esas. No esperan a JavaScript en el navegador para ensamblar y renderizar la página. Simplemente ven esta etiqueta de cuerpo vacío y esos ataques matemáticos básicos. Entonces si necesitas un buen SEO, usa renderizado del lado del servidor. Muy bien, ahora tenemos este concepto de enrutamiento del lado del servidor y enrutamiento del lado del cliente. ¿ Cuáles son esos? Y aplicación de una sola página. Se puede ver que si navego por páginas, la URL cambia, pero mi página, no se refresca. Esto se denomina enrutamiento del lado del cliente porque ha manejado en el cliente por JavaScript. Significa que el JavaScript es quien cambia la URL. Javascript es quien renderiza la página. ¿ De acuerdo? No envía ninguna solicitud adicional al servidor. Todo se hace dentro del navegador. A diferencia del lado del servidor el enrutamiento, si voy a cualquier otra página, puede ver que se está actualizando porque lo que hago básicamente, le pido al servidor que me proporcione esta página. Y esta es la diferencia. Por lo que el enrutamiento del lado del servidor es cuando envías otra solicitud al servidor y solicitas esta página con aplicaciones de una sola página con enrutamiento del lado del cliente. Todo esto se hace dentro del navegador sin solicitudes adicionales. Está bien, genial. Ahora, la tercera forma de renderizado se llama enfoque híbrido. Enfoque híbrido es lo mejor de dos mundos se combinan. Tenemos renderización del lado del servidor, y tenemos navegación del lado del cliente, enrutamiento del lado del cliente. Ahora, un ejemplo sería la documentación de Netlify. Entonces si inspecciono fuente de página, puedo ver el marcado y puedo ver ataques met únicos. Bastante cool. Pero si trato de navegar a cualquier otra página, puedes ver los cambios de URL. No obstante, la página no se actualiza. Entonces en la primera solicitud, cuando accedas a este sitio web al principio así, enviará marcado ya ensamblado desde el servidor, lo que significa que es renderizado del lado del servidor. No obstante, después de eso, una vez que se carga la página, luego JavaScript se hace cargo y tienes esta sensación de in-app cuando navegas por la página web. Bastante guay, ¿verdad? Por lo que al momento en el presente, enfoque híbrido es muy, muy popular porque de nuevo, combina lo mejor de dos mundos. Puedes tener una buena optimización SEO debido a la renderización del lado del servidor, y puedes tener una app como sentir con el enrutamiento del lado del cliente. Bastante cool. Ahora bien, ¿cuáles son los contras y pros de cada enfoque? Entonces ya lo mencioné, pero lo voy a hacer otra vez. El primero es C0, que significa optimización de motores de búsqueda con renderizado del lado del servidor, COO es el mejor resultado porque ya has significado ataques ensamblados. Ya tienes el marcado contenido de página ensamblado. Y en base a esa información, rastreadores, como Google crawler, Facebook, arrastreros de Twitter, y cualquier otro trollers. Pueden analizar tu página en función de esa información y clasificar tu página de manera adecuada con aplicaciones de una sola página. Este no es el caso. Si inspecciono la página, sólo puedo ver mínimo muy desnudo. No obstante, existe una solución moderna para resolver este problema de aplicaciones de una sola página. Y la solución es prerenderizar aplicación de una sola página. Significa, significa que cada página en aplicación de una sola página en la aplicación del lado del cliente se renderizará previamente en un archivo HTML estático. Por lo que cada página tendrá su propio HTML. Y cuando accedas a esta página, te traerá, te dará el HTML estático que se generó. Esto es lo que hace Netlify. Netlify es un servicio de hosting y hacen pre-render aplicaciones de una sola página para hacerlas más optimizadas para SEO. Esta es una solución realmente genial. Por lo que a continuación tenemos una app como sentir. Por lo que las aplicaciones de renderización del lado del servidor, o más específicamente, el enrutamiento del lado del servidor, no tiene esta función porque se puede ver cada vez que navega, la página se actualiza y al instante entender que este es un sitio web. No obstante, con el enrutamiento del lado del cliente, recibes una app como sentir porque la página no se actualiza, igual que estamos navegando por aplicación móvil. Y el último punto es, requiere JS, aplicación renderizada del lado del servidor o más específicamente páginas estáticas. Podrían no significar JavaScript en absoluto. Podría ser un contenido estático con HTML y CSS solamente, que no necesita JavaScript. Pero las aplicaciones de una sola página o las aplicaciones del lado del cliente siempre necesitan JavaScript porque todo lo hace JavaScript. Es como el núcleo de las aplicaciones del lado del cliente. Y si deshabilitas JavaScript o si no está disponible por alguna razón que la manzana simplemente no funciona en el entrenamiento. Nos vamos a apuntar a construir aplicaciones de una sola página con React. Espero que quede claro y te veré en el próximo. 21. Atajos de código VS: Hola. En este video te mostraré atajos de mina que utilizo en código V s. Esto será útil para todos. No te concentres en el frío En este momento. Este video trata de atajos. Empezamos abriendo una carpeta de proyecto para ese control de retención que presionar K plus o luego seleccionar la carpeta a abrir. Y somos perspicacia. Ahora necesitamos terminal para eso. Se puede presionar el control, además de labrar o controlar más J T abrir en gran medida la risa terminal entre ocultar y mostrar control de prensa estatal más Jay, Hay muchas situaciones en las que necesitamos mover líneas de código alrededor para que solo mantenga fuera y presione flechas picadas y abajo ella movió líneas Cordis señalando Be entonces necesitamos gestionar múltiples pestañas abiertas para abrir archivo en una nueva pestaña. Simplemente abre ese archivo desde el Explorador o presiona control más B para la barra de carga de Riesco, Luego busca el archivo y presiona enter para cambiar entre pestañas. Aguanta y presiona los números del 1 al 9. Abrió el grifo ordenado relevante La mayoría de las veces. Tenemos que agregarla. Algo en múltiples líneas. Selección de múltiples líneas y ayúdanos a mover el curso o al lugar correcto. Mantenga el control, además de flechas arriba y abajo hacia fuera y hacia abajo para extender la selección con leones. Liberar control plus out y ahora somos capaces de editar código en modo multi línea, mantener, mantener, cambiar y presionar prados para la selección de un solo personaje fueron mantener el control y presionar flechas para mover autos o a las palabras siguientes o anteriores. Se puede combinar turno y cultural para seleccionar a todo el barrio. También podemos seleccionar partido específico para edición multilínea, mover tu curso o al pupilo o seleccionar algunos personajes, mantener el control y presionar D. Una vez seleccionará la cancha actual, después mantener el control y Presidente de Se sumará ocurrencias a la selección que coincidan con el patrón. También podemos crear varias pestañas para el control de la prensa de conveniencia, además de barra inversa para dividir a este coreano en varios grifos. En realidad, lo mismo se puede aplicar a la terminal dentro del control de prensa terminal más barra inclinada inversa para abrir múltiples instancias. Esto que entre instancias aguanta y presiona la flecha superior o inferior y eso es todo. Estos son los principales atajos que facilitarán la protesta por el desarrollo. Siempre se puede personalizar la configuración de sello Invesco estaban aquí abajo. Nos vemos en el siguiente 22. Introducción a los JavaScript: Hola, Bienvenido a la sección JavaScript. En esta sección vamos a hablar características de sintaxis de JavaScript más comunes. No vamos a cubrir lo muy, muy básico porque vamos a entender todo eso durante el proceso, vamos a adjuntar patrones más avanzados y más comunes. Tenemos que entender todo eso para sentirnos cómodos durante crear desarrollo. Espero que te guste. Nos vemos en el siguiente. 23. Var Var VS. Deja a VS. Const: Hola, En este video, hablaremos de diferentes tipos de variables que existen en JavaScript. Estos son var, let, y const. En este video, entenderemos la diferencia entre ellos y qué tipo tenemos que usar en esta situación. Vámonos. Entonces, ¿cómo se va a organizar todo eso? Voy a crear un solo script que voy a nombrar archivo gs. Y luego voy a ejecutar ese script con ejemplos a través del terminal integrado usando el comando node file.js. Entonces bar, dejar y const. ¿ Cuál es la diferencia? Vamos a crear tal vez una variable de tipo var y llamarla mi nombre. Entonces voy a sólo console.log esa variable. Y luego ejecutemos el guión. Verás que Andrew se imprime, todo funciona. Entonces, ¿cuál es el trato con esa variable? Se ocupan de var es que este tipo de variable está encerrado al alcance de la función más cercano. Para entender que tenemos que crear esa variable dentro de una función. Entonces vamos a crear una función. Imprimir mi nombre. Y dentro de esa función, voy a poner var. Y entonces voy a consola log mi nombre dentro. Ahora si voy a ejecutar el guión, no te veo nada porque bueno, es una función y tengo que llamarla, imprimir mi nombre. Genial. Ahora ejecuta de nuevo el guión. Verás a Andrew, el resultado es el mismo. Si voy a poner el registro de la consola fuera del alcance de la función, obtendré un error de referencia. Porque mi nombre está definido dentro del alcance de la función. No es visible fuera de ella. Por eso tenemos error de referencia. Genial, Eso lo entendemos. Nuevamente, ¿cuál es el trato con var? Por triste, está encerrado al alcance de la función más cercano. Significa que no importa cuántos alcances tenga dentro de esa función, será visible en todas partes. A lo que quiero decir es que si voy a poner mucho, digamos, si bloques aquí, si cinco es mayor que uno, entonces voy a crear otro en su blog sólo para crear ámbitos, ¿de acuerdo? Si 10 es menor a 20, si cinco es mayor que tres, no importa lo que haga aquí. Yo solo quiero crear tantos ámbitos internos como sea posible. Y ahora lo que voy a hacer, pondré var, mi nombre dentro más en su alcance, y luego intentaré acceder a mi nombre dentro de esa función. ¿ Cuál crees que es este código entrar a trabajar como se esperaba y veremos entrada en la terminal. Vamos a probarlo. Voy a volver a ejecutar el nodo de script file.js. Y vemos a Andrew, bueno, esto es impredecible. Queremos que esta variable se comporte para que en realidad no sea visible fuera del alcance donde se definió. Entonces el alcance donde se definió esa variable es este más interno si bloque, si se definió, digamos en este bloque, en esto si por aquí, entonces sería visible en todas partes dentro pero no fuera de ella. Var es de nuevo, está encerrado al alcance de la función más cercano. No importa dónde o en qué, en su mayor alcance, definí variable de tipo var dentro de una función, su visibilidad siempre va a ser ámbito de función. Y esto es malo porque es impredecible. Queremos asegurarnos siempre de que nuestra variable siempre sea visible sólo dentro de ese ámbito donde se definió por aquí. Entonces para solucionar ese problema, tenemos variables de tipo, let y const. Entonces si voy a poner LED por aquí, y entonces intentaré ejecutar el guión. Verá error de referencia. Porque ahora let es ámbito al alcance más cercano, en realidad al alcance donde se definió. Y lo mismo con const. Si voy a poner const aquí y ejecutar este guión, volverás a ver lo mismo. Mi nombre no está definido error de referencia. Entonces para arreglar eso, a corregir error de referencia, tenemos que hacer referencia a mi nombre en este ámbito donde esté disponible, que va a ser este. Vamos a mover el registro de la consola a ese alcance. Y vamos a intentarlo de nuevo. Verás entrada se imprime. Y ahora esto es predecible porque sabemos que esta variable se define dentro de este ámbito y su visibilidad termina cada vez que salgamos, si voy a poner inicio de sesión de consola en este ámbito, ya verás nuevamente el error de referencia. Ah, déjame guardar el archivo. Verás el error de referencia porque esto sale fuera del alcance. Donde se define mi nombre, ¿verdad? Esta es la diferencia entre plomo const y var let y const tipo de cuencos de fibra. visibilidad termina con el alcance envoltorio, mientras que var termina con el alcance de la función más cercano. Entonces si tengo otra función dentro de una función, Digamos función hola. Y luego voy a definir lo mismo. Todo eso dentro de Hola que var será visible solo dentro de función hola. No será visible imprimir mi nombre sino a Hola. Está bien, supongo que está claro. Ahora bien, ¿cuál es la diferencia entonces entre let y const? Let is este tipo de variable que tiende a ser reasignado. Digamos que creé viable mi nombre y luego en un futuro quiero reasignarlo. A lo mejor quiero ahora cómo valorar no Andrew, sino algo más. Entonces lo que yo haría, reasignaría ese valioso. Entonces por nombre ahora se convierte en john. Y si voy a consola log John, verás en realidad John no entrada porque ahora tiene valor diferente. Vamos a teclear que se pueda reasignar. No obstante, con const, no lo es. Déjame guardarlo y ejecutar el script. Verás asignación a variable constante porque const significa constante, algo que no cambia si lo creo por doble mi nombre y lo pongo como entrada, significa que no va a cambiar. Siempre será Andrew. Otra vez. Let se puede reasignar. Si creaste una variable, mi nombre, y luego en el futuro, si estás seguro de que vas a renombrarla, entonces usa lead porque el lead se puede reasignar si no quieres que cambie esa variable, Estás seguro de que cualquier valor que asignes a esa variable se quedará así. Usar const. En la práctica, la mayoría de las variables tendrán tipo const. Y esas variables que sabemos que las reasignaremos. Vamos a usar lat, pero por lo demás const, y nunca usamos var. Por lo que para resumir rápidamente, alambre es tipo de datos de itable, que era la habilidad es el alcance de la función más cercano. No importa cómo ahí dentro la mayoría definiría esa variable. Seguirá siendo visible en el ámbito de la función. Y al igual que let y const, let y const se alcanzan al alcance más cercano donde se definen. Let is este tipo de variable que se puede reasignar y const es constante. Si vas a crear una variable constante, no se cambiará más adelante. No obstante, hay un pequeño truco más con const, y este truco son los objetos. Entonces si Mi nombre va a ser un objeto, ese objeto se puede modificar, pero no se puede cambiar el tipo de objeto a otra cosa. A lo que quiero decir es que si mi nombre, lo defino como un objeto y más tarde quiero cambiarlo a John. Tendré asignación a batalla constante. Pero si quiero dejar decir, modificar el objeto en sí, por ejemplo, darle una nueva clave. Por ejemplo, mi nombre punto algo va a ser hola. Y luego voy a consola log mi nombre. Verás el objeto el cual tiene una clave, algo con valor Hola. Tienes que recordar eso. Entonces en este caso no se modifica directamente por tipo doble, sino que se modifica el objeto en sí. Ahora ya sabes la diferencia entre los diferentes tipos de variables. Voy a decirlo una vez más. En la práctica, la mayoría de nuestras variables van a ser de tipo const. Y para aquellas variables que tienden a cambiar, vamos a usar el tipo LED. Nunca usaremos VAR. Nos vemos en el siguiente. 24. ¿Para qué se usa Array.map esto?: Hola, En este video, hablemos de array dot map. El método array dot map está disponible en todas las matrices JavaScript. Se utiliza para iterar sobre matriz de elementos, y se utiliza para transformar cada elemento de matriz en otra cosa. Es por eso que el nombre array dot map. Vamos a verlo en un ejemplo. En file.js. Voy a crear una nueva matriz, que voy a nombrar hola y que sea 4326. Ahora, digamos que quiero iterar sobre esa matriz. Quiero que simplemente en consola registres cada elemento de matriz. En términos generales, puedo lograrlo con la forma tradicional de hacerlo usando el bucle for, pero ahora podemos usar un mapa de radar. Entonces voy a poner mapa hola dot. Y una vez que abra paréntesis código VS me dará la descripción. Se puede ver que el método de mapa de puntos recibe la función de devolución de llamada. Y el segundo argumento es este arco. Este arco es sobre el, esta palabra clave en JavaScript. No vamos a tocar eso. Nos interesa. La función de devolución de llamada. Callback es esa función que se está pasando como argumento a alguna otra función. Entonces ya que vamos a pasar una función para mapear función, por eso lo llamamos, volver a llamar. Está bien, creo que está claro que vamos a usar mucho callback de palabra. Por lo que esa devolución de llamada recibe tres argumentos. El primer argumento es valor, luego tenemos índice y array. Y vamos a escribirlo función. Y si voy a volver a abrir paréntesis, voy a ver valor, índice y array. Entonces el valor es el valor del elemento actual. El caso es que el método de mapa de puntos itera sobre una matriz. Entonces esa devolución de llamada que pasamos al método de mapa de puntos se ejecutará para cada elemento de matriz. Entonces si tenemos cuatro elementos en total en esa matriz, significa que estas función de devolución de llamada se ejecutará cuatro veces para cada elemento de matriz y valor. El primer argumento en la devolución de llamada va a ser el valor actual que estamos iterando. Entonces, por primera vez que se ejecutará la devolución de llamada, el valor será, por segunda vez se ejecutará el valor será de tres, y así sucesivamente hasta el último elemento. El segundo argumento aquí es el índice, y va a ser el índice del elemento array actual. Entonces para el primer elemento, va a ser 0 porque las matrices en la programación comienzan con 0 índice. Entonces va a ser 0, 1, 2, y 3. Vamos a llamarlo idx. Y el tercer argumento va a ser el array. Y va a ser la misma matriz para la que aplicamos estos método de mapa de puntos. Entonces pongamos que son, y voy dentro de esa devolución de llamada dentro de esa función. Vamos en realidad console.log, value, index y array. Y ahora intentemos ejecutar el archivo de nodo de script HGS. Y lo que vemos, así primero va el valor. Como se puede ver de tres a seis, vemos todos nuestros elementos de matriz, lo cual es correcto porque de nuevo, esa devolución de llamada se ejecuta para todos los elementos de la matriz. La segunda columna que vemos es el índice de ese elemento. Por lo que para tiene 0 índice, esto es lo que se ve en la terminal. Y el último elemento tendrá índice tres, porque, bueno, este es el último elemento y sabemos que matrices comienzan con 0 índice, lo cual es correcto. Y el tercer valor va a ser la matriz misma en que se aplicó este método de mapa de puntos. Pero este no es el verdadero poder del método de la gráfica de puntos. Se utiliza para transformar cada elemento de matriz en otra cosa. Y tomaron método mapa produce un nuevo valor. Produce una nueva matriz. Significa que puedo escribirlo en una variable. Entonces voy a poner const resultado igual a hello.mat. Y entonces puedo realmente console.log resultado para ver lo que tengo. Si voy a ejecutar este script, tendré una matriz de cuatro elementos donde cada elemento está indefinido. ¿ Por qué es indefinido? Bueno, la cosa es que el método de mapa espera que devolvamos algún valor de esa función, de esa devolución de llamada. Y ese valor que devolvemos se establecerá como un nuevo valor para el elemento actual. Por defecto, cuando no devolvimos nada de una función, esa función devuelve indefinida. Es por ello que tenemos indefinido en todas partes. Intentemos poner retorno para desde la devolución de llamada. ¿ Se puede adivinar cuál va a ser el valor? Voy a ejecutar este guión y ahora va a ser 4, 4, 4, 4. Bueno, de nuevo, esa función de devolución de llamada se ejecuta para cada elemento de matriz. Y para cada elemento de matriz, regresamos para, si voy a poner valor multiplicado por dos, ¿ puedes adivinar el resultado ahora? A ver. Ahora tenemos 864 y 12. Básicamente lo que hicimos, simplemente multiplicamos cada elemento de matriz por dos. Porque una vez más esa devolución de llamada se ejecuta para cada elemento de matriz. Por primera vez. Se ejecutará para el primer elemento que es cuatro, valor va a ser para, valor va a multiplicarse por dos, regresamos ocho, lo que significa que en el valor de retorno para el método de mapa para el primer elemento, tenemos valor 8. Esto es lo que vemos. Lo mismo vale para el segundo elemento. Esa devolución de llamada corre. El valor va a ser 3. 3 multiplicado por 2 es 6 para el segundo elemento. Ahora tenemos seis, y así sucesivamente hasta el último elemento. Y eso es todo. Se trata de word array dot map se utiliza para, lo vamos a utilizar mucho, especialmente en React, pero tendremos que mapear alguna matriz para reaccionar markup. Por eso es muy importante entender el método del mapa. Eso es todo. Y te veré en el próximo. 25. ¿Para qué es Array.reduce utilizado Array.reduce: Oye, en este video vamos a hablar de un redox reduce, igual que un radar map array dot reduce itera sobre elementos de una matriz. No obstante, hace fundamentalmente una cosa diferente si se utiliza un array dot map para mapear cada elemento de matriz a algún otro valor, array dot reduce se utiliza para comprimir o reducir todos los elementos de matriz en un solo valor. Vamos a verlo en un ejemplo. Si vamos a volver al Archivo GS, vamos a crear una nueva matriz aquí, hola, que será siete. 6945, tal vez. Genial. Ahora podemos usar el método de reducción de puntos de la misma manera que usamos el método de mapa, lo que significa que podemos escribir hello dot reduce. Y al igual que con el mapa de puntos, tenemos que suministrar una función de devolución de llamada. Pero esta vez, la función de devolución de llamada recibirá diferentes argumentos. Por lo que tenemos valor previo, valor actual, índice actual y array. Entonces intentemos y veamos qué son. Por lo que suministramos la devolución de llamada y volvemos a abrir paréntesis para el IntelliSense. Y tenemos primer valor previo, valor actual, índice actual y array. Al igual que con el mapa de puntos, dot reduce ejecutará esa devolución de llamada para cada elemento de matriz. Significa que esta devolución de llamada se ejecutará cinco veces por cada elemento. Por eso sabemos lo que va a ser índice y array actual. Entonces al igual que en el mapa oscuro, array va a ser la misma matriz que usamos para este método.radius. Y el índice actual va a ser el índice de elemento iterante actualmente, que va a ser 01234. No los necesitamos. El único que necesitamos es el valor previo y el valor actual. Pero la mayoría de las veces, valor previo no es frío valor previo. Se llama acumulador. ¿ Qué es acumulador? Vamos a hablar en un segundo. Solo quiero mencionar que el método de reducción de puntos también espera un segundo argumento junto a la devolución de llamada. El segundo argumento es el valor inicial y es opcional. Entonces pongamos 0. Genial. Ahora ¿qué es acumulador o cuál es ese valor anterior? El caso es que el método de reducción de puntos funciona comprimiendo o acumulando realmente cada elemento de matriz hacia el resultado final. Significa que empezamos con algún valor inicial con 0. ¿ De acuerdo? Entonces, cuando todas estas devoluciones de llamada se ejecutan para cada elemento de la matriz, alguna manera modifica nuestro valor inicial. ¿ Está bien? Y al final, en la última ejecución de devolución de llamada, tenemos el resultado. Significa que el método de reducción de puntos también produce un valor, pero en lugar de una nueva matriz, produce una sola salida. Entonces tal vez van a ser 15, No lo sabemos. Entonces como es producir un valor, Vamos a colocarlo, vamos a ponerlo en una variable. Entonces const resultado va a ser hola dot reducir, y al final vamos a solo console.log resultado. Genial. Ahora si vamos a intentar cancelar acumulador de registro y junto a él vamos al valor actual de registro de consola. Y vamos a ejecutar este guión. De lo que vamos a ver, la salida no es bastante obvia. ¿ Qué tenemos? Tenemos primero 0 y luego Indefinido, Indefinido, Indefinido, Indefinido amplificación. Para no confundirnos, en realidad tenemos cinco registros de consola provenientes de las devoluciones de llamada y el último para el resultado. Déjame ponerlo así. Y lo ejecutamos. Sí, perfecto. Entonces, ¿por qué tenemos muchos valores indefinidos? Bueno, en la primera ejecución, cuando esta devolución de llamada se ejecute para el primer elemento 47 acumulador va a ser nuestro valor inicial que suministramos por aquí. Por eso vemos 0 valor actual va a ser elemento actual, que es siete. Por eso vemos 07. Sea lo que sea que regresemos de esa devolución de llamada será triste como el valor acumulador para la próxima ejecución de devolución de llamada. Porque no devolvimos nada de esa función. Por defecto, el valor de retorno no está definido. Por eso en la siguiente ejecución de esa devolución de llamada para el segundo elemento, que es seis, acumulador indefinido. Si vamos a devolver uno por cada acumulador R1 posterior será siempre uno, y el valor final también será uno. Si ejecuto el guión, puedes verlo tú mismo. Siempre tenemos acumulador configurado a uno, pero esto es muy tirado. Nosotros queremos realmente hacer algo con eso. Cómo podemos usar el punto reducido para hacer algo real, en realidad podemos usar el método de reducción de puntos para encontrar la suma de todos nuestros elementos. En realidad podemos teclear acumulador más valor actual. Y eso es todo. Eso hará el truco. Guardémoslo en realidad y veamos qué se imprime. Vemos resultado es 31. Pero cómo terminamos con eso, Vamos a descomponerlo. Para la primera carrera. Estos callback tiene acumulador establecido en 0 porque nuestro valor inicial es 0, el valor actual va a ser siete. Por lo que tenemos 0 más 7. Esto es lo que vemos por aquí. Por lo que a partir de esa devolución de llamada devolverá siete. Vamos a tipo primera carrera va a ser un retorno siete. Significa que en la segunda ejecución de esa devolución de llamada para el elemento seis, acumulador va a ser este valor de retorno de la ejecución anterior. Por lo que tenemos acumulador igual a 27 en la segunda corrida para el segundo elemento, y tenemos siete más valor actual. Entonces tenemos 7 más 6, tenemos 13, lo que significa a partir de la segunda corrida, regresamos 13. En la tercera ejecución de esa devolución de llamada para los elementos nueve, acumulador va a ser 13 porque esto es lo que nos devuelven de la devolución de llamada para la ejecución anterior. Cuatro elementos, 613, Por eso ahora son 13. Por lo que 13 más el valor actual va a ser 13 más 9 va a ser 22. Regresamos 22. Para el cuarto elemento acumulador es 2222 más cuatro va a ser 26. Regresar 26. Y para el último elemento tenemos acumulador 26. 26 más cinco va a ser 31. Y este va a ser nuestro valor final. Por lo que nuestro valor final que tenemos en la variable resultado va a ser el valor que regresaría de la última llamada de vuelta del método de reducción de puntos que es ancho. Este primer argumento se llama acumulador porque al igual que observaste en este momento, este valor se acumula a través todas las devoluciones de llamada que tenemos en el método de reducción de puntos. Se trata de una herramienta muy flexible y al principio es realmente difícil entender cómo los puntos reducen funciona, pero confía en mí, es muy flexible. Otro ejemplo sería cuando tenemos que producir un nuevo objeto a partir de esa matriz. Por ejemplo, queríamos tener ese objeto donde clave va a ser el índice del elemento y el valor se va a devaluar. Entonces por ejemplo, el elemento 0 va a ser siete, elemento uno va a ser 6, segundo elemento va a ser 934 y adelante cinco, ¿verdad? Entonces supongamos que necesitamos transformar esa matriz en ese objeto. Entonces este es nuestro resultado deseado. En realidad podemos usar el punto reducido para lograr eso. Permítanme quitar esos Commons y veamos cómo podemos acercarnos a eso. Por lo que sabemos que necesitamos recibir un objeto al final. Por lo que antes cuando calculamos la suma, sabemos que nuestro valor final va a ser un número. Por eso ponemos 0 por aquí. Pero ahora, como va a ser un objeto, vamos a poner aquí un objeto vacío. Este va a ser nuestro punto de partida. Acumulador para la primera corrida va a ser un objeto vacío. El valor actual sigue siendo el valor que tenemos dentro de nuestra matriz. Entonces ahora, para lograr este resultado, tenemos que realmente fusionar valores dentro de este objeto. Ya que necesitamos trabajar con objetos, necesitamos devolver un objeto de esa devolución de llamada porque este es nuestro acumulador. Nuestro resultado final nuevamente es un objeto. Por eso nuestro acumulador es un objeto. Entonces vamos a regresar y tenemos que devolver un objeto. Entonces para fusionar objetos, tenemos que escribir objeto dot asignar. Entonces el primero es el blanco. Y aquí vamos a suministrar algún valor que se fusionará en ese objeto. Pero antes de poder fusionarlo, tenemos que crear realmente el objeto, ¿no? Entonces vamos a poner const, digamos mapeado elemento actual. Y pongámoslo primero como un objeto vacío. Y entonces tenemos que crear esa sola pieza de valor que representará nuestro elemento actual dentro del resultado final. Por lo que queremos que este mapa elemento actual sea ese objeto. Entonces para el primer elemento va a ser 0, 7. Queremos que el elemento actual mapeado sea de esta forma, y vamos a fusionar este objeto en nuestro acumulador. Por lo que necesitamos lograr de alguna manera que podamos realmente escribir elemento actual mapeado. Entonces el índice de nuestro elemento, tenemos que usarlo. Entonces ahora en realidad podemos poner aquí nuestro argumento y llamarlo índice actual. Ponlo así. Por lo que de esa manera podemos hacer referencia a que mapeó el elemento actual punto índice actual es igual al valor actual. Y esta línea nos traerá esta cuadrícula de resultados. Ahora fusionamos ese resultado en nuestro acumulador mapeado elemento actual, y ahora tendremos nuestro resultado deseado. Vamos a comprobarlo. Archivo de nodo gs. Y hoy tenemos 0 elemento valor 7, primer elemento valor seis segundos, 9, tercero, cuarto, 45, grado. Todo igual que yo quería. ¿ Qué pasó en realidad aquí? Vamos a probar y console.log acumulador. Bueno, y como se puede ver en realidad este es un gran ejemplo de esta salida. Se puede ver cómo se está acumulando acumulador en todas estas ejecuciones de devolución de llamada. Entonces primero, para la primera ejecución de esa devolución de llamada, sosteníamos nuestro objeto vacío, ¿verdad? Por eso vemos aquí objeto vacío. Entonces creamos ese elemento aquí, que es éste, y luego lo fusionamos en un objeto vacío. Entonces esto es lo que regresamos de la primera carrera. En la segunda carrera, fusionamos esto en el primer objeto, lo que resultó en este objeto con 76, y así sucesivamente hasta el último elemento. Por lo que al final, tenemos nuestro resultado deseado. Bastante impresionante. Dot reduce es realmente potente y realmente flexible. Es crucial entender eso porque el Dr. US es bastante común, no tan común como el método de mapa de puntos, pero aún así se usa con mucha frecuencia. Sé que es difícil de entender. Los puntos se reducen enteramente cuando lo veas por primera vez, pero confía en mí, solo tómate un tiempo, experimenta con él, juega con los diferentes valores. Pruébalo tú mismo, tal vez intente valores de registro de consola. Intentó poner diferentes valores en un rayo, trató de devolver diferentes valores a partir de aquí. Y verás que después de algún tiempo lo entenderás, tendrás ese momento aha. Estoy bastante seguro. Creo que esto es todo método de cuatro puntos reducir. Espero que quede claro. Traté de descomponerlo tanto como pude y el resto está en ti. Te voy a ver en el próximo. 26. Declaración de función VS. Expresión: Oye, hablemos de expresión de función y declaración de función. ¿ Por qué necesitamos saber la diferencia y cuáles son esos? Este va a ser más un video teórico que el práctico. Pero creo que esto es importante para entender la diferencia, pesar de que B podría no necesitar. cualquier manera, al final del día, te convertirá en un mejor desarrollador. Vámonos. Entonces si voy a volver al Archivo G, S aquí, voy a declarar una función. Lo llamaré Hola, y dentro cancelaré registro. Mi nombre es Andrew. Y a continuación voy a crear un valioso hola a y a esa variable. Voy a asignar una función. Y por dentro voy a imprimir. Y tú también. Ahora, como puedes ver, los dos hacen lo mismo. Vamos a llamarlos. Entonces primero vamos a llamar hola, y luego vamos a llamar hola a la terminal. Voy a ejecutar el script y la salida. Bueno, básicamente es lo mismo, ¿verdad? Entonces, ¿cuál es la diferencia? La diferencia es que el primer ejemplo es una declaración de función, y el segundo ejemplo es una expresión de función. El segundo ejemplo es en realidad una expresión variable. Entonces si voy a poner alguna variable y darle un valor, será una expresión. Por lo que lo mismo podemos observar por aquí. Básicamente asignamos una función a una variable. A diferencia de aquí. Aquí hacemos declaración de función. La diferencia más importante entre estos dos es que con la declaración de función, no importa dónde definamos el clima de función. Está en la parte superior o en la parte inferior, pero con expresión de función y en realidad importa. Pongámoslos a ambos al final. Y volvamos a llamarlos. Voy a ejecutar este guión. Y lo que veo, la primera función, que es declaración de función, pasó y puedo ver la salida. Pero el segundo ejemplo, error de referencia fallido no puede acceder a hello tube antes de la inicialización. El caso es que hola dos es una expresión de función y JavaScript solo creará esa función cuando en realidad JavaScript vaya a esa línea, se creará declaración de función o será izó a la chuleta. En JavaScript, existe este concepto de levantamiento cuando las declaraciones de funciones son realmente como movidas a la parte superior antes de que se ejecute el código. Por eso no importa dónde los definamos. El código siempre, el lenguaje siempre verá este código como si declaración de función estuviera en la parte superior, así como así. Pero la expresión de función se queda donde se definió. Al igual que con las variables, en realidad podemos hacer referencia a la variable. Digamos hola, antes de que se creara. Entonces si voy a crear alto abajo, y si voy a intentar ejecutar esta pieza de código, voy a dar el mismo adder. error de referencia no puede acceder a alto antes de la inicialización. Entonces porque esto es una expresión y lo mismo vemos con hola a, esta es una expresión y no podemos acceder a esa expresión antes de que se creara aquí en la parte superior. Entonces la única solución para eso es, bueno, para realmente acceder hola a después de que creamos esa variable. Entonces ahora si lo voy a ejecutar, no voy a ver ningún error en el mundo real en proyectos molares JavaScript. Esto en realidad no es una cosa. No observarás tal comportamiento en el código. Bueno, porque esto mayormente relacionado con JavaScript simple y siempre es bueno conocer y entender la diferencia, ¿verdad? Pero en los proyectos modernos, ya que tenemos herramientas que procesan nuestro código, esto no se llevará a cabo, pero como dije, es bueno y personalmente creo importante entender la diferencia. Por lo que para resumir rápidamente, expresión de función es cuando asignas una función a una variable, es más fácil recordar si se puede pensar en ello, es que la declaración de función siempre comienza con función como la primera palabra. Y la expresión de función no tiene función como primera palabra porque primera palabra tenemos const por aquí, asignamos a una variable y las declaraciones de función se mueven a la parte superior independientemente donde se definen justo antes de que se ejecute el código. Y eso es todo. Te voy a ver en el próximo. 27. Funciones de flecha y Arguments de la función defectual, en la función Default: Oye, en este video, hablemos de las funciones de flecha y los argumentos por defecto. Vámonos. Si voy a navegar a file.js, vamos a crear una declaración de función sencilla que llamaremos mi nombre. Y va a imprimir Andrea, que es mi nombre. Y vamos a crear un segundo ejemplo que utiliza una función de flecha. Y la función de flecha es una expresión de función en primer lugar, lo que significa que se asignará a una variable. Entonces voy a poner const, mi nombre, 2 es igual a paréntesis, luego la función de flecha, o a veces se llama función gorda. Y después de ese cuerpo de función, voy a poner console.log y dibujé dos. Ahora bien, si voy a llamar mi nombre, sabemos cuál va a ser el resultado. Pero si voy a llamar a mi nombre, será igual? Vamos a comprobarlo. Nodo file.js. Y vemos que la salida está predecida porque, bueno, es sólo una función, pero ahora es una función de flecha. Entonces, ¿cuál es la diferencia? La primera diferencia es que las funciones de flecha tienen una sintaxis más ligera en comparación con las declaraciones de funciones. Bueno, la cosa es que vamos a usar mucho las funciones de flecha, sobre todo en JavaScript moderno. Son aún más preferidos que las declaraciones de función que comienzan con la palabra clave function. No hay porque la sintaxis sea más ligera, sobre todo cuando vamos a suministrar devoluciones de llamada, dos métodos diferentes. Es más fácil suministrar una función de flecha. Entonces si voy a, por ejemplo, ir a usar array dot map, es más fácil para mí suministrar una función de flecha. Es más ligero escribir una función de flecha en lugar de usar la función, luego paréntesis. Y entonces ahora parece papá, incluso podría confundir a algunas personas. Por lo que eventualmente, realmente no importa cuál, si es expresión de función o declaración de función. No importa porque al final del día, nuestro código será procesado por las herramientas de construcción que se encargarán de todo eso bajo el capó. La segunda diferencia tiene algo que ver con estas palabras clave en JavaScript. No vamos a cubrir este caso de uso con la palabra clave this. Pero yo diría que realmente deberías ir a Google y comprobarlo tú mismo. Basta con buscar funciones de flecha, estas palabras clave. Y la tercera diferencia es que las funciones de flecha nos permiten usar una sintaxis aún más corta que ésta. Cuando necesitamos devolver un solo valor de una función de flecha, podemos omitir el uso de los corchetes rizados para especificar el cuerpo de la función. Entonces, por ejemplo, si mi nombre a devuelve una cadena, Andrew, en realidad podemos escribirla así, lo mismo tendremos a mi nombre. Entonces déjame escribirlo. Regresa Andrew, y no habrá diferencia, ¿verdad? Pero con las funciones de flecha, incluso podemos hacerlo más corto. Entonces solo voy a copiar cuerda Andrew. Voy a quitar los corchetes rizados. Y sólo voy a poner una cadena, y ahora no se cambiará nada, pero la sintaxis es mucho, mucho más corta. Vamos a verificar que mi nombre a realmente devuelve una cadena, Andrew, ya que devuelve un valor, lo voy a escribir en otra variable. Vamos a llamarlo m y luego console.log M. Genial. Entonces voy a volver a ejecutar el guión y verás angio, correcto. Esto es lo que se devuelve de mi nombre a él es muy importante entender que si vas a escribirlo así, la función no devolverá nada, lo que significa que regresará indefinido. Déjame ejecutar este guión y verás indefinido. Bueno, porque esta no es una sintaxis corta, esto es lo mismo que escribir esto, pero sin la palabra clave return. Por lo que es importante entender que si necesitas o si quieres usar sintaxis más corta, recuerda siempre eliminar los corchetes rizados. Y también es importante entender que sintaxis más corta sólo devuelve un solo valor. Si necesitas hacer alguna acción dentro de una función, no podrás usar la sintaxis corta porque en este caso no tienes dónde escribir realmente tu código. Entonces en este caso se le requiere que haga alguna operación aquí, ¿no? Correcto, tu código personalizado, y luego el final, devolverías un valor así como ese. Entonces no hay diferencia si lo haces como con la palabra clave return o lo haces con la sintaxis más corta es lo mismo. Esta es solo tu manera de cómo escribes el código siempre que sea posible, intenta usar sintaxis más corta porque bien. Es más corto. Hay una cosa que quiero mencionar sobre esta sintaxis corta es cuando necesitas devolver un objeto. Entonces cuando tenemos una situación, cuando necesitamos devolver un objeto, por ejemplo, nombre, entrada. Por lo que este objeto quiero regresar de esta función de flecha. Bueno, con la palabra clave return, se ve así. Pero cómo se va a ver sin la palabra clave return, los objetos voluntad también tienen corchetes rizados y cuerpo de función también tienen corchetes rizados. Si vamos a ponerlo así. Verás error de sintaxis porque bueno, esto es cosas de JavaScript equivocadas que esto es función, pero no es un objeto. Para solucionar realmente ese problema, tienes que envolver el objeto devuelto entre paréntesis así como así. Entonces de esta manera entenderá que desea devolver un solo valor que desea usar sintaxis más corta y está devolviendo un objeto para verificar que le permita ejecutar el script. Y vemos que ahora tenemos nuestro objeto devuelto. Genial, tan bien, que se sientan sobre las funciones de flecha. vamos a utilizar mucho. Hablemos de argumentos de función por defecto. Bueno, ese es en realidad fácil. Hay muchas situaciones en las que necesitamos pasar argumentos a nuestras funciones. Por ejemplo, mi nombre a lo único que hará esa función. Se va a consola log el primer argumento que vamos a abastecer. Y llamemos a ese argumento mi nombre. Entonces del lado receptor tenemos mi nombre y luego imprimimos mi nombre es mi nombre. Genial. Ahora si voy a llamar a mi nombre, déjame quitar el código innecesario. Si voy a ejecutar mi nombre sin proporcionar el parámetro para ese argumento. Bueno, en este caso, Mi nombre va a ser indefinido porque, bueno, no lo suministramos, ¿verdad? No proporcionamos ningún valor para mi nombre. Para verificar que podamos ver mi nombre es indefinido. Y hay muchas situaciones en las que tenemos circunstancias diferentes en nuestro código y variables. No producen valores esperados. No producen resultado esperado, ¿verdad? Por lo que en este caso, queremos asegurarnos de que siempre tengamos algún valor de retroceso para suministrar el valor predeterminado para ese argumento de función. Necesitamos simplemente poner iguales y luego proporcionar un valor por defecto. No lo sé, John. Está bien, ahora, siempre que no pase ningún valor por eso, mi argumento de nombre, John, se llevará a cabo y se utilizará como alternativa. Ahora intentemos ejecutar el guión y verás mi nombre es John, ¿verdad? Porque no paso nada. Esto fue recogido y ahora usa John y John se imprime. Si voy a suplir angio, John no será usado en lugar de Andrew porque Andrew no es indefinido. Es un valor que pasamos por ese argumento, ¿no? O bien ejecuta el guión. Ahora veo mi nombre es Andrew. Todo funciona muy bien. Entonces si voy a pasar indefinido, ¿qué se imprimirá? ¿ Correcto? ¿ John? Para verificar que estamos bajo guión otra vez, mi nombre es John. Perfecto. Imagina las situaciones en las que tenemos múltiples argumentos en una función. Digamos mi nombre y mi edad, y voy a imprimir mi nombre es y mi edad va a ser mi h Si no suministre ningún argumento, Mi nombre va a ser indefinido. Mi h va a ser indefinido. Para verificar indefinido, indefinido, perfecto. Ahora, en realidad puedo suministrar un valor predeterminado para cualquiera de ellos o solo para un argumento. Entonces que sea mi edad y por defecto será igual a 10. Entonces ahora si vuelvo a ejecutar, verás que mi nombre se queda indefinido porque no tenemos ningún valor de retroceso. Y mi edad es de 10 años. A lo mejor. Vamos a ponérselo a John. Vamos a echar a Andrew aquí. Y pongamos indefinido para finalizar nuestros pensamientos a, digamos directamente y nuestro conocimiento. Entonces por mi nombre y te recogerán, y para mi edad, 10 serán recogidos porque abastecemos indefinido. Esto es lo mismo que no suministrar un valor en absoluto, ¿verdad? Si voy a escribirlo, me llamo Andrew y mi edad es Stan. Perfecto. Bueno, eso es todo. Ahora ya sabes cómo vamos a utilizar las funciones de flecha. ¿ Cuáles son esos? Y ahora ya sabes acerca de los argumentos de función por defecto. Nos vemos en el siguiente. 28. Interpolación de cuerdas: Hola, En este video vamos a hablar de plantillas de cuerdas, o en realidad se llaman cadenas de plantilla e interpolación de cadenas. Vayamos en file.js. Supongamos que quería imprimir mi nombre en una frase. Yo quiero decir mi nombre es Andrew, mi h es 10. Para eso, voy a crear tres variables. La primera variable va a ser nombre, que va a ser Andrew. El segundo va a ser h, va a ser 10. Y el tercero será el resultado que imprimiré en la consola. Entonces para hacer una frase, tendré que concatenar cadenas porque voy a usar valores dinámicos, que son nombre y edad. En programación. En otros lenguajes de programación, esto generalmente se hace usando el operador plus. Entonces esto va a parecer que mi nombre es más nombre. Esto cederá entrada. Entonces otra vez, plus. Y ahora el punto de cuerda que tengo para teclear mi edad es de nuevo entonces plus h. Y también tenemos que cuidar los espacios. Aquí. Tengo que añadir un espacio y aquí también. Genial. Ahora intentemos imprimirlo y ejecutemos este script, archivo de nodo gs. Mi nombre es Andrew may, h es 10 grado. Este es nuestro resultado deseado. Pero como se puede ver, esto no es muy práctico porque, bueno, esta sintaxis, en realidad no es conveniente. ¿ Y si tenemos muchas variables y tenemos una cadena realmente larga, entonces se volverá ilegible. ¿ Y si hay una mejor manera de hacer eso? Bueno, a través de realmente es, se trata de plantillas de cadena, o generalmente llamadas cadenas de plantilla. Intentemos volver a ejecutar esta línea de código usando plantilla de cadena. Entonces vamos a crear otros resultados variables a. Y vamos a usar plantilla de cadena. Para poder usar plantilla de cadena, tenemos que usar backticks. Entonces para cuerdas regulares, usamos cotizaciones regulares, ¿verdad? Ya sea un simple reclose o comillas simples. Para las plantillas de cadena, utilizamos backticks. Entonces voy a alternar cotizaciones usando la extensión toggle quotes que he instalado en VS Code. Lo puedes encontrar en el mercado de VS Code. Esta extensión toggle citas, ese. Entonces estoy presionando el enlace de teclas para cambiar comillas y me detengo en backticks. Backticks, la cadena se evalúa tal como es, como aparece en el código. Entonces voy a teclear, mi nombre es espacio. Y aquí quería dinámicamente, digamos inyectar un valor. Para hacer eso, tenemos que interpelar ese valor en una cadena. Las plantillas de cadena nos permiten hacerlo mediante el uso del signo de dólar y la sintaxis de corchetes rizados. Entonces cuando ponemos el signo de dólar seguido de corchetes rizados, dentro de corchetes rizados, podemos poner cualquier expresión JavaScript que produzca un valor. Este valor se interpolará en esa cadena, en ese lugar en esa cadena. Entonces queríamos poner nombres aquí. Mi nombre es nombre. Puse Dodd. Mi edad es otra vez, el signo del dólar seguido corchetes rizados h La voy a guardar. Voy a la consola logarla junto a nuestro primer resultado. Y vamos a comparar esos dos. Como se puede ver, son iguales. Pero la diferencia está en el resultado de sintaxis para usar plantillas de cadena y el primero usa solo el operador plus y las cadenas concatenadas alguna vez han resultado a. Esta es una sintaxis mucho más agradable y más completa, y esta sintaxis es preferida en JavaScript moderno. En realidad nadie usa la concatenación para concatenar cadenas, tal vez muy raramente, la mayoría de las veces, verá la interpolación cadenas usando plantillas de cadena con backticks. Como mencioné anteriormente, la cadena que aparece dentro de backticks se evalúa tal como está. Significa que si voy a poner muchos espacios vacíos aquí, y tal vez por aquí, todos se incluirán en la cadena final. Entonces si pongo espacios en blanco aquí, cadenas en blanco, serán cadenas en blanco en la salida. Vamos a verlo. Se puede ver que el espaciado está todo retenido. Puse aquí tres líneas vacías, aparecen en la salida. No podemos hacer eso con el operador plus. Si voy a poner espacios en blanco aquí, tendré error de sintaxis. Y si voy a intentar ejecutar el script, tendré error de sintaxis, token inválido o inesperado si queremos usar líneas vacías en nuestra cadena y queríamos retenerlas, se nos requiere usar plantillas de cadena. Por lo que estos conducirán a una sintaxis inválida. Volvamos a ponerlo como antes. Muy bien, Ahora entendemos plantillas de cadena, como mencioné anteriormente, dentro de corchetes rizados, somos capaces de poner cualquier expresión de JavaScript. Y como recordamos, la expresión es una entidad que produce un valor. Por lo que tenemos nombre que es expresión disponible, le da a Andrew una cadena. Lo que quiero decir es que no nos limitamos a poner sólo variables aquí. Podemos poner cualquier expresión de JavaScript dentro. Por ejemplo, vamos a utilizar el operador ternario. Si 10 es mayor que cinco, entonces vamos a poner variable nombre. De lo contrario usaremos la edad porque 10 siempre es mayor que cinco, siempre tendremos nombre. Entonces intentemos ver. Y tenemos Mi nombre es Andrew, mi edad son 10. Grandes obras. Cambiemos al operador. Y ahora tendremos, mi nombre es 10 porque bueno, aquí tenemos falso, y por eso recibimos H al final. Por lo que en realidad podemos poner una función de cada año. Vamos a crear const y conseguir mi nombre. Y va a devolver a John por aquí, ¿verdad? Y dentro de corchetes rizados usando interpolación de cadenas, voy a llamar a esa función. En esa función me devolverá la cadena. Vamos a probarlo. Vamos a ver mi nombre es John. Mi edad es de 10 años, y eso es todo. Eso es todo lo que necesitamos saber sobre las plantillas de cadenas o unos literales de cadena e interpolación de cadenas. Al final, hay que recordar tres cosas sobre las plantillas de cuerdas. Entonces el primero es que usan backticks. No usan cotizaciones regulares. Si vas a poner cotizaciones regulares por aquí, esto no funcionará. La interpolación de cadenas no funcionará. Si lo reviso, ya verás tendré el signo de dólar y los corchetes rizados se imprimen. Tengo que cambiar mis cotizaciones a backticks, así que la interpolación de cadenas funcionará. El segundo que hay que recordar es que dentro de la interpolación de cadenas, podemos poner cualquier expresión de JavaScript. No estamos limitados. Y lo tercero a recordar es que la cuerda dentro de los backticks se evalúa tal como es. Significa que si ponemos espacios vacíos aquí, se incluirán a la cadena. No se omitirán. Eso es todo. Nos vemos en el siguiente. 29. Destructuración de objetos y array: Oye, en este video vamos a hablar de objeto y array sí estructuración. Estas dos características se utilizan mucho. Vamos a revisarlos en file.js. Digamos que quería crear un objeto, que sea auto. Y tendrá las siguientes claves. Color, que va a ser rojo, Digamos Gears 5 y tal vez tipo de motor. Pongamos diesel. Ahora digamos que quiero acceder a las claves de ese objeto. Por lo general lo haría como auto, luego poniendo DOD y luego nombre clave al que quiero acceder. Y si quisiera ponerlo en una variable, normalmente lo haría así. Entonces voy a declarar una nueva variable llamada motor. Y luego pondría coche y atención. Y si quisiera tirar de todos estos objetos, crearía una variable separada para cada uno. Por ejemplo, los engranajes const van a ser engranajes de auto y lo mismo haremos por el color, ¿verdad? Podemos ver esto como tres líneas de código separadas. Bueno, esto no es muy conveniente en el GPS moderno, podemos hacer algo más simple, la destrucción de objetos. Entonces en lugar de hacer eso, déjame comentarlo. Podemos reemplazarlo por una sola línea. Entonces vamos a poner const, luego vamos a poner corchetes rizados para especificar que esto va a ser objeto sí estructuración. Entonces vamos a poner iguales y el objeto que nos gustaría desestructurar, que va a ser auto de ese objeto auto, queríamos jalar motor y engranajes. Digamos que no necesitamos color. Entonces, entre paréntesis rizadas, especifico qué claves quiero sacar de ese objeto. Entonces va a ser color. Y luego voy a tirar de engranajes. Acabará de reemplazar esa sola línea de código Estos dos para color y engranajes? Si quisiéramos tirar del motor también, simplemente teclearíamos motor aquí. Y por supuesto, es muy importante especificar el nombre clave de manera muy estricta. Digamos que si tenemos engranajes por aquí por alguna razón y están capitalizados, no sabemos de eso, ¿verdad? Y nosotros desestructuramos engranajes, va a ser indefinido porque bueno, no existe en ese objeto. Vamos a probar tal vez y consola log, color. Así. Déjenme hacerlo rápidamente engranajes y también antiguo. Está bien. Déjame pobre Nodo archivo GS y ves Colorado y engranajes motor indefinido diesel, ya que tenemos engranajes, objetos partiendo de una letra mayúscula, y desestructuramos engranajes lo cual no existe en eso objeto. Tenemos indefinido, pero otros valores lo son. Está bien. Entonces volvamos a ponerlo y comprobemos que funciona. Impresionante. Ahora tenemos Gears 5, ese objeto está estructurando, piensa, es una herramienta realmente poderosa. Esto es básicamente todo lo que hace. Simplemente saca las llaves de un objeto. Eso es todo. Esto es básicamente lo mismo que hacer esto con esas tres líneas separadas. Yo diría que esto es sólo una taquigrafía. No trae algo nuevo. Es sólo una taquigrafía. Hay una cosa más a ese objeto sólo estructurar es que, digamos con el primer acercamiento con esas tres líneas, podemos renombrar fácilmente las variables. Si quisiera especificar motor de coche, simplemente cambiaría el nombre de la variable de motor a motor de coche, así como eso. Bastante fácil, ¿verdad? Pero cuando el objeto está estructurando, recuerda que siempre hay que especificar clave estricta que nos gustaría desestructurar ya lo contrario no existirá discutible. No existirá la clave en ese objeto. Entonces, ¿cómo podemos renombrarlos? Bueno, para hacer eso, Digamos que en lugar de motor, queremos usar motor de auto. Tengo que poner colon y luego el nuevo nombre para esa variable. Por lo que ahora desde el objeto del auto, tire de motor y le renombré motor a motor de auto. El motor no existirá como variable. Aparecerá como motor de automóvil. Si voy a consola log only engine, veamos qué vamos a tener. Tendremos error de referencia. El motor no está definido porque esta variable no existe. Tiramos de la llave del motor, pero el nombre variable ahora es motor del automóvil. Entonces si vamos a referir motor de auto, no nos dará ningún error. Creo que está claro. Entonces lo mismo con otras teclas, si quieres cambiar el nombre del color, pondremos columna y luego color del coche. Y eso es todo. Bastante fácil, ¿verdad? Como una triste destrucción objeto porque realmente poderosa herramienta. Lo vamos a usar mucho, sobre todo en React. Echemos un vistazo a un ejemplo real que vamos a usar en React en realidad. Entonces voy a crear una función, digamos alguna función. Y esta función de suma recibirá un argumento, llamémoslo arc car. Vamos a esperar que nuestro auto vaya a ser un objeto. Y podemos llamar alguna función. Y vamos a abastecer nuestro auto objeto para nuestro auto, ¿verdad? Vamos a comentarlo rápidamente e intentemos y console.log, arg, auto así. Y veremos nuestro objeto bastante sencillo. Ahora, digamos que realmente queríamos cancelar el registro claves separadas de ese objeto. Entonces otra vez, la misma imagen que acabamos de hacer. Por lo que o bien hacemos referencia a esas claves mediante el uso de la sintaxis del nombre de clave de la puerta Por ejemplo, arco car color punto. ¿Verdad? Nosotros hemos leído, si voy a usar motor, va a ser desleal si suministre una clave inexistente, por ejemplo, ruedas cuadradas, ¿verdad? Voy a ponerme indefinido porque bueno, esta clave no existe en ese objeto. En lugar de hacer eso, puedo usar objetos de reestructuración y puedo usarlo en realidad directamente dentro de paréntesis. Entonces la primera forma en que podemos usar en realidad esta línea de código, así como así. Y va a funcionar, ¿verdad? Al igual que discutimos antes. Pero en cambio, en realidad puedo mover ese objeto se está estructurando directamente dentro de paréntesis. Entonces sólo voy a copiar eso y ponerlo por aquí. Y ahora acabamos de quitar aún más línea de código. Ahora puedo acceder directamente a color y engranajes críticos. Verifiquemos que hemos leído y cinco, lo cual es correcto. Agradable. Vamos a extender un poco más este ejemplo. ¿ Y si suministre un segundo objeto a alguna función? Entonces aquí, supongamos que suministre un segundo objeto. A lo mejor no va a ser auto, pero sólo lo voy a poner como auto. ¿Todo bien? Y aquí espero algún objeto a, y espero que esta suma objeto dos tendrá dos claves, nombre y edad. Por lo que puedo referirlos haciendo algunos objetos a nombre de punto o edad. Pero en cambio, puedo volver a usar la destrucción de objetos directamente por aquí. Por lo que pondría nombre y edad. Utilizamos la destrucción de objetos para ambos de nuestros argumentos. Entonces los argumentos se separan con la coma, ¿verdad? Y las claves que desestructuramos se especifican en corchetes rizados con bastante facilidad que alguna función es un ejemplo realmente bueno porque tendremos una pieza de código muy similar en React. Vamos a combinar objeto sí estructuración con argumentos por defecto. Entonces, ¿y si no suministre ningún argumento a alguna función? Permítanme quitar segundo objeto de aquí. Y digamos que desestructuro el color y los engranajes. Vamos a probarlo. ¿Qué voy a conseguir? Voy a obtener no puede desestructurar el color de propiedad de indefinido. ¿ Qué pasó? Bueno, la cosa es que, como recuerdan, cuando no proporcionamos ningún argumento para algunas funciones, ese argumento que esperamos a un par en esa función va a ser indefinido. Entonces lo que básicamente estamos haciendo aquí, estamos tratando de sacar esas llaves de un valor vacío, que básicamente no existe bajo el capó, se ve así. Por lo que tiramos de color y engranajes de indefinido. Pero como puede ver, esta sintaxis lleva a error de tipo. Esto es incorrecto. Por lo que en este caso, para realmente corregir ese error, podemos proporcionarle un valor de retroceso. Entonces voy a poner un objeto vacío, y ahora veamos qué vamos a tener. Vamos a tener indefinido, indefinido. Bueno, esto se espera porque no proporcionamos ningún valor para ese objeto. Valor indefinido retrocede a un objeto vacío. Y a partir de ese objeto vacío, disruptor claves inexistentes, color y engranajes. Pues bien, porque no están definidos en un objeto vacío. Si voy a poner color verde y traté de consola de log it, verás que el valor será verde y los engranajes van a ser indefinidos, ¿verdad? Porque de nuevo, nuestro valor indefinido retrocede a ese objeto. Y a partir de ese objeto, desestructuramos el color en engranajes. Hay un inconveniente más en realidad con este enfoque. ¿ Y si suministro aquí un objeto vacío? Como podríamos saber, un objeto vacío ya es un valor definido, ¿verdad? Voy a poner un objeto vacío. ¿ Se puede adivinar lo que va a ser color y engranajes? ¿ Correcto? Va a ser indefinido. Indefinido porque ahora color y engranajes, no existen en ese objeto. Por eso tenemos indefinido. Indefinido. ¿ Y si queremos especificar de alguna manera los valores predeterminados para las claves de objeto separadas? El enfoque es el mismo al usar el signo igual. Por lo que podemos poner color por defecto será verde. Pongamos un objeto vacío para verificarlo en un segundo. Y los engranajes por defecto serán seis, ¿verdad? Ahora si lo voy a correr, verás verde y seis. Bastante impresionante. Entonces de nuevo, para extender ese ejemplo, si elimino el valor predeterminado para el objeto en sí, pero guardo los valores predeterminados para claves separadas y voy a eliminar un objeto vacío aquí. Vamos a intentarlo y ejecutarlo. Otra vez. No hemos podido leer color de propiedad de indefinido porque de nuevo, tenemos la misma situación. Estas dos claves se tratan ser destruidas de indefinido, lo que lleva a error de tipo. Entonces para arreglar eso, tenemos que proporcionar el respaldo. Esto es importante. Proporcionamos el respaldo para el objeto en sí, y aquí proporcionamos valores por defecto para claves destruidas separadas. Pero puedo estar de acuerdo en que esta sintaxis es un poco confusa. En realidad podemos refactorizarlo para que se vea más bonito. Eventualmente terminaremos con una línea de código más, pero está bien. paréntesis, voy a mantener sólo el valor predeterminado para el objeto en sí. Y en lugar de usar la estructuración, voy a poner el nombre para el argumento. Entonces que sea objeto de auto. Y en una nueva línea, realidad pondré la reestructuración para el objeto, const engranajes de color es igual a Coche objeto. Ahora se puede ver que en realidad separamos las preocupaciones en el paréntesis. Solo especificamos valor por defecto para el objeto mismo y en una nueva línea, cuando usamos esta estructuración, especificamos valores por defecto para claves separadas, tan simples como eso, personalmente creo que esto es una de las características más cool disponibles en el SIG moderno. Me gusta mucho, pero también tenemos una estructuración de radio junto al objeto. El estructuramiento, en realidad es muy, muy similar. Entonces digamos que tengo una matriz o tal vez déjame realmente eliminar todo eso. Voy a mantener alguna función, pero voy a comentarlo. Y a continuación, voy a crear alguna matriz. Y voy a poner algunos valores como 5, 4, 3, 2, y 8. Y de la misma manera en que aplico objetos reestructurando a un objeto, puedo usar una estructuración de radio para significar que usamos la destrucción de objetos. Usamos corchetes rizados, pero para matrices, vamos a usar corchetes de caja. Entonces de la misma manera, vamos a especificar corchetes de caja igual matriz de suma. Pero esta vez no necesitamos seguir estrictamente el nombre de las claves. ¿ Se opondrá? Tenemos nombres clave, pero en array no lo tenemos. En array, tenemos ordenamientos. Entonces cuando aplicamos la destrucción de objetos, no importa en qué orden se desestructuran las claves. Pero en una rabia se está estructurando. Es importante. Pero puedes dar los nombres que quieras para tus futuras variables. Por ejemplo, me gustaría interrumpir su, el segundo elemento de esa matriz. Entonces para hacer eso, se me requiere que primero destruya el primer elemento, el orden que especifique en una estructuración de radio será el mismo los elementos van en la matriz original a destructor el primer elemento, suministre primer elemento. Y ahora destruí El segundo elemento, segundo elemento, que va a ser 4. Por lo que primer elemento será 5, segundo elemento va a ser cuatro. Como puede ver, se retiene el pedido. Primer elemento cinco segundos 4. Si voy a poner el tercer elemento aquí, ¿ puedes adivinar el valor? Bueno, sí, van a ser tres. Vamos a comprobarlo. Registro de consola, primer elemento, segundo elemento, y tercer elemento. Archivo de nota GS, lo que vemos 5, 4, 3, exactamente los mismos valores. Si yo, por alguna razón quería emitir este elemento, Digamos que lo uso así, ¿verdad? Const, segundo elemento. Bueno, esto no va a funcionar. Segundo elemento ahora va a ser el primer elemento, que es cinco. Si la encierro en consola , lo verás, serán cinco. Porque de nuevo, la orden es importante cuando se aplica una reestructuración porque los elementos, se ordenan, no tienen nombres clave. Se puede dar cualquier nombre a esa variable, pero hay que retener el orden. Creo que al fin está bastante claro, diría que una estructuración de radio se utiliza de la misma manera que la reestructuración de objetos. Si quieres hacer algo similar con una estructuración de radio entre paréntesis cuando están usando función, funcionará. La diferencia es solo que con la destrucción de objetos, se requieren q para usar corchetes rizados con la estructuración de radio, vas a usar corchetes de caja y también el orden. Recuerda que en una matriz, los elementos están ordenados y por eso se te requiere desestructurar todos los elementos anteriores. Si quisieras destruir el número del elemento. Y si quiero desestructurar cuarto elemento, se me requiere que interrumpa sus tres primeros. Esto es inevitable mientras que en objetos claves, no se ordenan. Por eso puedes usar cualquier pedido. Cuando la destrucción de las claves, Eso se trata de objeto y una estructuración de radio. Lo vamos a usar mucho y espero que quede claro para ti. Nos vemos en el siguiente. 30. Operadores de difusión y descanso: Hola, Esta vez vamos a hablar del resto y los operadores de spread. Estos dos están fuertemente acoplados al objeto en carrera y se usan mucho en js modernos. Averiguemos qué hacen. Si vuelvo al Archivo GAS, déjame tal vez crear una función y la parte superior que voy a nombrar alguna función. Se va a recibir argumento número uno, argumento número 2 y 4. Ahora consola religiosa log arg1, arg2, perfecto. A continuación, déjame llamar a esa función y déjame suplir hola como primer argumento. segundo argumento va a ser n al tercero va a ser 15 en adelante, tal vez sólo una función de flecha vacía, y luego dejar que sea solo el número 5. Genial. Si voy a ejecutar este guión, voy a ver que tengo Hola Andrea, primeros dos argumentos. Ahora, ¿cómo podemos realmente lograr el resto de los argumentos y cómo podemos acumularlos en una sola unidad, en S y Google soportable, es por eso que existe el operador de resto. Se acumula el resto, los argumentos sobre el resto de algo en un solo barril. Entonces en la parte superior, sólo voy a poner una referencia rápida para nosotros. Por lo que el operador de descanso acumula o digamos valores falsos en una sola variable. Fallas. Genial. Entonces para usar el operador de descanso, tenemos que poner los tres puntos y el nombre de variable en la que se escribirá el resto. Entonces que se erast de arcos. Puede ser cualquier nombre. Ahora déjame probar y consola log resto de arcos. Y ahora tenemos 15 función anónima y 5, vamos básicamente el resto de los argumentos que no definimos. Entonces podemos ver nuestros dos primeros argumentos son hola y ONG, y el resto es 15, la función y cinco, genial, si voy a quitar R2 por aquí, puedes adivinar cómo va a cambiar el resto de RX? Vamos a probarlo, ¿verdad? Por lo que ahora tenemos a Andrew al principio de 15 función y cinco. Y así funciona el operador de descanso. Simplemente toma el resto de los valores y los pliega todos en una sola variable, así como así. Ahora, veamos cómo podemos usar el operador de descanso dentro de objetos y matrices. Permítanme comentar eso fuera. Y voy a crear un objeto, diría que va a ser persona y nombre va a ser Andrew. A lo mejor la edad va a ser 10. Y supongamos que tengo objeto se está estructurando por aquí. Y me gustaría agarrar tal vez nombre de esa persona objeto de que voy a cancelar el equipaje. Podemos recibir grado angio. A lo mejor agreguemos más llaves ahí. Digamos juegos de hobby, perfectos. Ahora bien, y si de alguna manera quiero recuperar sólo la clave de nombre y el resto de las claves, me gustaría plegarme en un objeto nuevo, completamente nuevo. Vamos en este caso, de nuevo, puedo usar el operador de descanso. Entonces al igual que en función, solo voy a usar tres puntos dentro del objeto hace estructuración y el nombre del objeto en el que se escribirá el resto. Entonces que sea el resto de persona. Ahora déjame intentar y consola regir el resto de la persona. Y lo que obtendré, conseguiré un nuevo objeto con el resto de las claves que no desestructuré. Entonces destruí solo nombre. Y el resto es h y hobby. Por eso en el nuevo objeto, que es el resto de persona, voy a ver H y hobby si voy a añadir H por aquí. Ahora, el resto de persona contendrá sólo hobby porque este es el resto. ¿ Qué queda? Verifiquemos eso. Juegos de pasatiempos perfectos. Si también voy a desestructurar hobby, ¿ puedes adivinar el valor ahora? ¿ Verdad? Va a ser un objeto vacío. Si voy a quitar todas las llaves, ¿ puedes adivinar el valor ahora? Correcto. Va a ser exactamente el mismo objeto porque el resto, bueno, son todas las claves que no hemos destrozado ya que no hemos escuchado nada. El resto es básicamente todo aquí. Se aplica la misma regla para borrar. Permítanme comentar eso fuera. Y en la parte inferior, voy a crear alguna matriz. Y voy a poner 5, 4, 3, 10, y 8, ¿verdad? Y voy a aplicar una reestructuración de incursiones. Entonces const pantanos brackets de alguna matriz, de alguna re, me gustaría agarrar primer elemento y el resto. Me gustaría escribir en una variable completamente nueva. Entonces de nuevo, voy a poner tres puntos y el nombre de variable, que va a ser el resto de alguna matriz. Verifiquemos que voy a consola log el resto de algún rayo. Y voy a conseguir 4, 3, 10 y 8, que es el resto de la matriz que no desestructuré. Si voy a destruir tu segundo elemento. Ahora, el resto va a ser de 3, 10, y ocho porque bueno, tengo dos primeros elementos y el resto es de 310 y 8. Si verifico eso correcto, todo funciona perfecto. Ahora, no hemos hablado del operador de spread, pero podemos ver que también tiene los tres puntos. Bueno, la cosa es que los operadores de resto y spread, tienen la misma sintaxis, pero se usan en diferentes contextos y es muy fácil perderlos confundidos. Como sabemos, el operador de descanso acumula o falsa el resto de algo en una sola variable. Ellos propagan operador hace exactamente lo contrario. Despliega algún valor. Entonces déjenme demostrárselo. Entonces supongamos que tenemos un objeto. Está bien, ¿dónde está? Vamos, vamos a reutilizar este objeto persona. Y digamos que tengo otro objeto que se llama algún otro objeto. Y tiene algunos campos como genoma AI son su nombre va a ser Alex, y tal vez auto va a ser BMW. Genial. Ahora, ¿y si quiero fusionar estos dos objetos? Podemos utilizar el operador de spread para lograr eso. Por lo que a continuación vamos a crear un objeto completamente nuevo, que llamaremos objeto fusionado. Va a ser un objeto vacío. Y en ese objeto vacío, primero vamos a difundir el objeto persona y luego vamos a difundir algún otro objeto. Entonces primero difundimos persona y luego difundimos algún otro objeto. Se puede adivinar lo que va a ser el valle de Merced objeto. Verifiquemos objeto marchado. Y vemos que el nuevo objeto tiene todas las claves que tenemos en persona y en algún otro objeto combinado. Bueno, tal como te dije antes, el operador de spread despliega valores. Entonces en este caso, desplegó primero el objeto persona, y luego desplegó algún otro objeto. Además de eso, como ya se podría notar, tiene exactamente la misma sintaxis, tres puntos que el operador resto, pero tienen tanto la diferencia subyacente que de nuevo, el operador spread despliega valores mientras que el operador de descanso los pliega. Echemos un vistazo a otro ejemplo con objetos. Y si, en lugar de eso, solo voy a fusionar directamente algún otro objeto dentro de la persona. Puedo hacerlo fácilmente así. Algún otro objeto. Y por supuesto que tengo que ponerlo en la parte superior. Y ahora no necesito objeto fusionado. Y ahora nuestro nuevo objeto persona contendrá todas las llaves del tazón mismo y de algún otro objeto. Esto es muy flexible porque ahora puedes usar el operador spread para gestionar objetos como quieras. Se pueden fusionar objetos juntos. Se puede fusionar un objeto en otro. Y hay algunos otros casos de uso que te permiten usar de alguna manera esta propagación para desplegar las llaves de un objeto en algún otro lugar. En nuestro caso, lo que acabamos de hacer, desplegamos todas las llaves de ese objeto en el objeto Persona. Si voy a quitar al operador de spread, Veamos qué se va a devaluar. Tendremos algún otro objeto como persona clave de perspicacia. Y esa llave sostendrá el valor del objeto con llaves, otro nombre, y auto. ¿ Por qué lo tenemos así? Bueno, esa sintaxis que ves aquí es básicamente la taquigrafía de algún otro objeto, colon, algún otro objeto. Esta es la clave, este es el valor. Pero cuando tenemos una situación, cuando clave va a tener el mismo nombre que la variable que tiene devalor, que es algún otro objeto. Podemos usar la taquigrafía y funcionará. Perfecto. Ahora veamos al operador de spread en el borrado. Yo voy a comentar eso fuera. Y voy a ser poco común a nuestra matriz de suma. Entonces aquí tenemos el resto de alguna matriz. De hecho, eliminemos eso. Y usemos este ejemplo. Y es, vamos a crear una nueva variable y ninguna matriz, y que sea 123. Bien. Ahora, de la misma manera que acabamos de fusionar objetos y exactamente de la misma manera somos capaces de fusionar borrar, ¿verdad? Entonces aquí voy a crear una matriz completamente nueva. Voy a llamarlo resultado. Y en esa nueva matriz, primero voy a desplegar resumen, y luego voy a desplegar otra matriz. Entonces al final, sólo vamos a concatenar ambas matrices. Resumen y no olvides tres puntos. Y luego otra matriz con tres puntos. Ahora solo somos resultados de registro de consola y eventualmente recibirán dos matrices combinadas. Impresionante. Esta es una espacialmente flexible con matrices porque somos capaces desplegar alguna matriz en otra matriz en cualquier lugar. Significa que si sólo voy a reemplazarlos, sólo voy a canjearlos, ¿verdad? Tendré un ordenamiento completamente diferente porque ahora otra matriz va primero. Por eso veo 123 y la matriz resultante. Si voy a quitar el operador de spread de ambos. Ahora, nuestra matriz solo tiene dos elementos donde cada elemento es una matriz en sí. ¿ Verdad? Por lo que tenemos una matriz de dos elementos. primer elemento es una matriz, segundo es una matriz, pero esto no es exactamente lo que queremos. Normalmente no queremos estas matrices anidadas. Queríamos trabajar con carrera más plana porque esto es conveniente y bueno, esto es simplemente normal de ver. Habrá un montón de situaciones en las que tendremos que utilizar el operador spread en arrays. Y nos gustaría seguir estrictamente algunos pedidos con el operador spread, somos capaces de colocar cualquier valor en cualquier lugar que queramos. Justo como lo estoy haciendo ahora mismo, ¿verdad? Entonces puedes adivinar el valor, el valor resultante, si pongo esta línea de código, Déjame ver. Entonces primero, tendré otra matriz. Después de todos los valores de otra matriz que es 1, 2 , 3, voy a tener 15, 16, y 12. Después de eso, tendré todos los valores de resumen. Y al final voy a tener 16, 1, y 0. Bastante cool. Supongo que todo esto se trata de los operadores de spread y descanso. Vamos a usarlos mucho. Son muy, muy útiles. Por lo que te aconsejo que te pongas cómodo con estos y practiques un poco. Podrían ser confusos, pero eventualmente son muy fáciles. Así que confía en mí, sólo tómate un tiempo, acostumbrate a ello y te veré en el siguiente. 31. Código de Async, Callstack y el bucle de los eventos: Hola, finalmente llegamos a nuestro tema final de JavaScript, un sumidero y sumidero promesas de código y asíncrono esperan. Este es el tema más importante en el GS moderno, conocimiento de ese tema es esencial. Sin ese conocimiento, el desarrollo de JavaScript nunca se sentirá completo para ti. Por eso sugiero ponerme lo más cómodo posible con este tema. Para entender un código de fregadero y hundir y promesas, debes entender temas más profundos, cómo funciona el GPS bajo el capó, ¿qué es el bucle de eventos y la pila de llamadas? En este video, trataré de explicar en términos simples cómo funciona JavaScript para luego entender el concepto de promesas, déjalo ir. Lo que ves en la pantalla en este momento es una visión general de alto nivel de cómo JavaScript ejecuta el código. Esta imagen describe cómo se ejecuta GS dentro del navegador. Para NodeJS, será ligeramente diferente, pero está bien usarlo para nuestro caso de uso. Por lo que en el marco amarillo, se pueden ver partes del motor JavaScript que se llaman pila de pila y llamada. El montón está en el espacio asignado de memoria donde viven todas las variables definidas durante la ejecución de código. La pila de llamadas es ese lugar de rendimiento donde JavaScript decide qué ejecutar. A continuación, hablaremos de pila de llamadas y un momento. Fuera del marco GS, puedes ver API web, devolución de llamada, cola y bucle de eventos. Todos estos no son parte del motor JavaScript. Significa que están definidos por el entorno donde se ejecuta JavaScript. Conocemos dos entornos primarios de ejecución de JavaScript, navegador y NodeJS. Por ejemplo, las API web incluyen cosas como DOM API o Fetch API, que forman parte del entorno del navegador. Sólo, las API web no se implementan en Node.JS. No tenemos características de manipulación HTML como documento get element by ID y NodeJS. Estas son características implementadas en el entorno del navegador solo conocen gs, sin embargo, implementa algunas cosas desde API web. Por ejemplo, establezca un tiempo de espera. Se ven exactamente igual en ambos entornos, pero bajo el capó, la implementación es diferente. Es posible que ya hayas escuchado que JavaScript es un lenguaje de subproceso único. Pero, ¿qué significa esto? Significa que JavaScript tiene una sola pila de llamadas. Como pila de llamada única significa que el lenguaje puede procesar solo una operación a la vez. Imagina una sencilla puerta. Pocas personas alrededor tratando de pasar por la puerta pueden caber sólo una persona a la vez. No puede caber a la gente al mismo tiempo cuando en primera persona entra a la puerta. Y si esa persona se pone más alta que otras personas que intentan atravesar la puerta tendrán que esperar porque no pueden entrar sólo después de que la persona de las acciones salga de la puerta, otras personas podrán continuar y pasar por lo mismo con el motor JavaScript si hay dos líneas de código yendo una tras otra, por ejemplo, dos logs de consola, sabemos que la primera línea de código siempre se ejecutará primero y solo después de los acabados de primera línea, se ejecutará la segunda línea. Significa que si la primera línea de código tardará cinco años en ejecutarse, la segunda línea de código esperará todos esos cinco años para que finalice la primera operación, y sólo después de eso se ejecutará. Por lo tanto, de nuevo, JavaScript es un lenguaje de subprocesos único con la pila de llamadas única. Debido a una pila de llamadas única, motor GS puede procesar solo una operación a la vez. La pila de llamadas es un almacenamiento temporal para todas las funciones pendientes a ser ejecutadas. Y se organiza como una pila, una estructura que sigue el último método de primera salida. Último en, primero en salir significa que último elemento agregado al almacenamiento siempre se eliminará primero, un montón de placas es un ejemplo perfecto de último en entrar, primero en salir, imaginar un montón de placas. Apila placas uno encima del otro. Una vez que tengas plantillas uno encima del otro, Digamos que necesitas quitar el primer plato de la parte inferior. No puedes simplemente tomarlo de abajo ¿verdad? Si hicieras eso, la pila caerá y las placas se esparcirán. El único modo de que te quites eso repartido es quitando todas las placas de la parte superior, una por una hasta llegar a la placa deseada en la parte inferior, este tipo de organización se llama pila. El último plato agregado a la pila se bajará primero de esa pila. De esta manera, el nombre último en primero en salir. Java's podría llamar pila sigue exactamente la misma organización. Ahora imagina un contenedor. Ese contenedor va a ser la pila de llamadas. A la izquierda, hay una simple pieza de código. Veamos cómo JavaScript protestaría ese fragmento. Javascript divide el código en funciones. Cuando JavaScript debe ejecutar una función, la función se agrega a la parte superior de la pila de llamadas. Cada vez que la función sale o regresa, se elimina de la pila de llamadas. Entonces primero, JavaScript ve console.log. ¿Estás listo? Se agrega a la pila de llamadas que se ejecuta y se retira inmediatamente. Después de eso gs, Cs, imprime mi bio, se agrega a la pila de llamadas dentro imprimir mi bio, GS primero ve, consigue primero mi nombre, lo que significa que se ha agregado a la parte superior de la pila de llamadas. Gs mira dentro, Get firstName y ve que esta función devuelve un valor. Una vez que la función regresa, GS, lo elimina de la pila de llamadas. Continúa la ejecución de imprimir mi bio. Ahora gs, Cs función GetAge, la misma situación. Gs mira dentro de GetAge, la función regresa y se retira de la pila de llamadas. Después está el console.log final. Mi nombre es Andrew, mi edad es de 10 años, agregado y quitado al instante. Imprimir mi bio salidas y la pila de llamadas está vacía. Ahora se termina la ejecución del código principal o mainframe. El notorio máximo stack de llamadas excedido o errores de desbordamiento de pila ocurren cuando el tamaño de la pila de llamadas se infla y el número se volvió ridículamente enorme de que el motor no puede procesar ese número de operaciones dentro del pila de llamadas. Porque JavaScript tiene una pila de llamadas única cual está organizada de una manera que acabas de ver. Se llama bloqueo. Recuerde, una operación a la vez, siguiente función no se ejecutará hasta acabados anteriores. Esto nos lleva al término sincrónico, que básicamente significa que la ejecución va uno por uno como lo vemos en el código. El comportamiento de bloqueo puede ser fácilmente absorbido dentro del entorno del navegador. En cualquier página, haga clic con el botón derecho, seleccione Inspeccionar y, a continuación, abra la pestaña de la consola. Dentro de la pestaña de la consola podemos ejecutar cualquier JavaScript válido dentro del navegador. Por ejemplo, console.log. Wow producirá wow impreso en la consola. Perfecto. Pero qué pasa el comportamiento de bloqueo dentro del entorno del navegador, tenemos la función de alerta y es un buen ejemplo para demostrar el comportamiento de bloqueo. Entonces voy a escribir Alert alto. Y una vez que presiono Enter, lo que pasa es que primero veo el pop-up que dice alto, pero ¿qué pasa bajo el capó? Debajo del capó, se agregó la función de alerta a la pila de llamadas y aún no se ha eliminado porque la alerta no salió y la alerta no devolvió ningún valor, lo que significa que la alerta sigue siendo dentro de la pila de llamadas y bloquea la ejecución de todas las llamadas a funciones posteriores. Voy a consola log cualquier cosa. Cuando presiono Enter. No pasa nada porque actualmente en este momento, alerta está dentro de la pila de llamadas y bloquea la ejecución, y continuará bloqueando la ejecución hasta que la función de alerta regrese o salga. Y eso va a pasar lo que voy a presionar, Vale, así que voy a presionar console.log. Voy a ejecutar log de consola dos veces más y luego voy a presionar ok, Vamos a ver qué va a pasar. Ahora. Ya ves cómo todo se acaba de descongelar bajo el capó. Se eliminó la función de alerta de la pila de llamadas y la ejecución continuó. Por eso puedo ver todos mis registros de consola S3 para los que presioné Enter antes. Genial. Ahora entendemos el código de sincronización. Como puedes ver, no es muy conveniente esperar siempre a que termine una operación. Aquí es donde llega un código de sincronización al rescate. Cuando JavaScript lee una pieza de código de fregadero, se procesa, no se ejecuta, se procesa en segundo plano, y una vez procesada, se coloca después en una cola de espera separada, que espera a que la pila de llamadas se vacíe cuando se ejecuta todo el código de sincronización y la pila de llamadas se vuelve vacía, código asíncrono, que se colocó en la cola de espera, se inserta en la pila de llamadas y ahora se está ejecutando. Existen características especiales del lenguaje que nos permiten escribir código asíncrono. Se trata de promesas y devoluciones de llamada, implementaciones de las cuales nos expone el medio ambiente. Navegadores, API web procesan el código en segundo plano y retrasan su bucle de eventos de ejecución en este sistema es alguna especie de vigilante para la pila de llamadas y la cola Async en espera, una vez llamada está vacía. El bucle de eventos extrae elementos de la cola de espera y los coloca en la pila de llamadas. Este concepto introduce un modelo de ejecución de código no bloqueante. No cambia el hecho de que la pila de llamadas puede procesar solo una operación a la vez, pero permite ejecutar el código de una manera no bloqueante. Consideremos un caso con dos operaciones. Envía una solicitud a un servidor e imprime hola a la consola. El pedido tardaría 500 milisegundos en terminar mientras imprimía Hola tomaría sólo diez milisegundos si ir con el log de consola modal de sincronización tendría que esperar 500 milisegundos para la solicitud que terminar y sólo entonces hola se imprime. Con el modelo de no bloqueo, la solicitud se procesaría asíncrona en segundo plano. Bueno, el código de sincronización continúa su ejecución. Veríamos Hola se imprime enseguida después de diez milisegundos y la solicitud en segundo plano, terminaremos su ejecución en algún momento en el futuro después de 500 milisegundos bajo el capó, hay en realidad múltiples colas de espera. Uno para temporizadores, uno para bolsas frías, 14 promesas, etc. Tienen diferentes prioridades y cierto orden. Por ejemplo, las promesas tienen prioridad sobre devoluciones de llamada para no complicar demasiado esto, imaginemos que hay una sola cola para todo el código asincrónico. Uno de los ejemplos de código asíncrono son las devoluciones de llamada. Callback es una función que se pasa como argumento a otra función. Las devoluciones de llamada no son Asynchronc por defecto, pero las expuestas por las API web en realidad lo son. Por ejemplo, echemos un vistazo a setTimeout. Está disponible tanto en entornos know gs como browser. Vamos a echar un vistazo a dos ejemplos. Uno dentro sin GS y otro dentro del navegador. En realidad no importa dónde vamos a usar setTimeout. Pero cuanto más mejor, ¿no? El primer ejemplo va a estar dentro no GS. Y ya he preparado esta sencilla pieza de código con dos logs de consola y setTimeout. Por lo que SetTimeout espera que suministremos dos argumentos, donde el primer argumento es la devolución de llamada que se ejecutará después del número de milisegundos que suministramos. Como segundo argumento, en este caso, abasto a 0 milisegundos, significa que la ejecución no se retrasará. Pero veamos cómo se ejecutará el código. ¿ Se puede adivinar el resultado? ¿ Qué vendrá primero? A ver. Voy a ejecutar el guión y vemos 1, 2, y sólo entonces se dispara el tiempo de espera. El caso es que setTimeout es asincrónico. Significa que el tiempo de espera, la devolución de llamada se agregó a la cola de devolución de llamada en segundo plano. Voy a abastecer 2504.52 segundos. Veamos cómo será diferente la imagen. Ejecuto el guión, veo 12. Entonces veo el retraso de 2.5 segundos. Y sólo entonces se dispara el tiempo de espera de IC bajo el capó. Settimeout fue procesado por el código. Settimeout se agregó a la pila de llamadas, pero la devolución de llamada y la ejecución del temporizador se delegaron en las API de Node.js para ser procesadas en segundo plano, setTimeout se eliminó de la pila de llamadas. Significa que la ejecución continúa. Después vemos el registro de consola uno a la pila de llamadas y al instante eliminado. Y lo mismo con el segundo registro de consola agregado a la pila de llamadas y eliminado instantáneamente. Y una vez en segundo plano, el temporizador se realiza procesando después de 2.5 segundos en el futuro. Estas devoluciones de llamada se agregarán desde la cola de devolución de llamada en segundo plano a la pila de llamadas y luego la ejecutarán. Y realmente no importa cuántos milisegundos voy a abastecer para el segundo argumento. Siempre será protesta de manera no bloqueante, y será empujada hacia la cola de devolución de llamada. Y solo después de que la pila de llamadas quede vacía, el bucle de eventos extraerá esa devolución de llamada de la cola de devolución de llamada en segundo plano y la empujará a la pila de llamadas. No importa cuántos milisegundos suministre o donde ponga este código, siempre será protesta asíncrona. Si lo pongo en el medio y abasto 0 milisegundos, la imagen es la misma. Echemos un vistazo al segundo ejemplo. Se puede ver un HTML índice muy básico, cual tiene un solo elemento de botón con id, btn. Entonces dentro del script, acabo de tirar ese botón usando la API DOM, selector de créditos documentados, hashtag, mi btn. Entonces a ese elemento de botón, adjunto un oyente para el evento OnClick y para el evento OnClick on BET and click function se disparará. Ahora mismo está vacío, pero vamos a agregar algo dentro de registro de consola hola. Y déjame realmente abrir ese index.HTML dentro del navegador. Haga clic derecho en revelar en Explorador de archivos. Haga doble clic en él y boom, aquí vamos. Haga clic derecho en Inspeccionar. Y abro la pestaña de la consola, presiono click me y veo hola se imprime igual que definimos dentro del manejador para el evento OnClick. Perfecto, en realidad vamos a copiar y pegar el código que teníamos en ningún GS al manejador. Ahora, es el comportamiento va a ser el mismo que dentro no, GS. Verifiquemos eso. Vuelvo al navegador, refresco la página. Presiono el botón y como puedo ver, primero va 1, 2, y solo entonces se dispara el tiempo de espera, pesar de que se coloca entre los logs de la consola. Si lo pongo en el trabajo y si voy a poner digamos dos segundos. Refresco la página. Doy clic en la parte inferior, pasaron de uno a dos segundos en incendios de tiempo de espera IC. Bueno, el panorama es el mismo. Entonces lo que sucede es que una vez que JavaScript lee setTimeout, setTimeout se está agregando nuevamente a la pila de llamadas, pero la devolución de llamada y el temporizador donde delegó esta vez a las API web dentro del navegador. Significa que se están procesando en segundo plano. Continúa la ejecución. Settimeout se elimina de la pila de llamadas. Registro de consola agregado a la pila de llamadas, ejecutado y eliminar. Y lo mismo con el segundo log de consola. Una vez que finaliza el código, el mainframe o el código principal finaliza, bucle de eventos comprobará constantemente la cola de devolución de llamada. Así que di callback se agrega a la cola de devolución de llamada. Y luego bucle de eventos ve eso y empuja esa devolución de llamada a la pila de llamadas. Y después de eso, la llamada contrarresta grado. Pero vamos a verlo en realidad con el ejemplo de bloqueo. Y si voy a poner alerta en lugar de registro de consola, solo voy a escribir alerta alta. Y voy a quitar el segundo registro de consola. Y ahora la pregunta es, se establecerá tiempo de espera se procesará en segundo plano una vez que la alerta comenzará a bloquear el bucle de eventos, Vamos a ver. Refresco la página. Presiono el botón, alerta los incendios, y ahora bloquea el bucle de eventos. Pero no veo nada dentro de la consola. Y si voy a presionar el botón OK, sólo después de eso, el código comenzará a procesar la devolución de llamada. Porque setTimeout aparece después de la línea de alerta. Si vamos a poner setTimeout antes de la línea de alerta, entonces la imagen será diferente. Para refrescar la página. Haga clic nuevamente en el botón Me. Alert comienza a bloquear el bucle de eventos, pero ahora setTimeout ya delegó el procesamiento de esa devolución de llamada a las API web. Significa que mientras alerta bloquea el bucle de eventos, devolución de llamada está siendo procesada por las API web en segundo plano. Y ahora esta devolución de llamada está dentro la cola de devolución de llamada esperando ser empujada hacia la pila de llamadas. Si voy a presionar Ok, voy a ver instantáneamente incendios de tiempo de espera. ¿ Verdad? Pero si voy a presionar Ok, dentro de esos dos segundos por aquí, la imagen cambiará, refrescará la página, haz clic en mí, al instante pulsa Ok. Y se puede ver que fue incluso menos de dos segundos porque una vez que hago clic en el botón, esto se delega instantáneamente a las API web. Y no importa por cuánto tiempo la línea de alerta bloqueará la ejecución. Esto ya se procesa en segundo plano. Genial. Entonces en términos simples, podemos decir que el código asíncrono es ese tipo de código que siempre se ejecuta después de todo código sincrónico. Para recordar fácilmente ese concepto, imagina dos columnas, una para sync y 14 código asíncrono, digamos gs empieza a leer el código y luego ordena el código en zinc y las columnas de zinc. Y una vez que sea el momento de ejecutar el código, simplemente coloque la columna asíncrona debajo de la columna del fregadero. Y aquí tienes. Este es el orden en el que se ejecutará el código. Por supuesto, esto está demasiado simplificado, pero da la idea básica. En el GAS moderno, verás promesas en todas partes. El fundamento de las promesas es el código asíncrono. Por eso es tan importante aprovechar este concepto. Solicitudes de servidor, operaciones de base de datos, operaciones de lectura de archivos. Para todo eso, usaríamos promesas y código asíncrono. Espero que fuera claro y ahora tienes mejor comprensión de cómo GS interpreta el código. La próxima vez, vamos a hablar de promesas y espera asíncrona. Ver otro. 32. Código de sincronización: Promesas y Async Async: Hola, En este video por fin vamos a hablar de promesas y asíncronas aguardan. Vámonos. Sabemos que la base de las promesas es el código asíncrono. Pero entonces, ¿qué es una promesa? Una promesa es un objeto y que producirá algún valor en algún momento en el futuro. De manera no bloqueante asíncrona, una promesa puede ser uno de los tres estados pendientes estado, estado resultados y estado rechazado. Si bien una promesa está en estado pendiente, significa que la promesa no se ha resuelto o aún no ha producido ningún valor, se resuelve una promesa. Significa que la promesa ya produjo un valor. Y cuando las promesas rechazadas, significa que esta promesa ha arrojado y se ha agudizado y no ha producido ningún valor. Muy bien, veamos cómo se ve una promesa muy básica, y veamos cómo podemos empezar a trabajar con ellos. Entonces déjame crear una variable. Voy a llamarlo hacer algunos. Y dentro de esa variable solo voy a llamar a constructor prometido. Para ello, tengo que hacer nueva promesa. Y el constructor de promesa, tengo que suministrar al ejecutor o la devolución de llamada que inicializará la promesa. Entonces voy a pasar una devolución de llamada vacía. Y esa devolución de llamada que paso al constructor siempre recibe dos argumentos. El primer argumento es algo llamado resolver. Segundo es rechazar. Entonces el primer argumento es la función que debemos llamar dentro la devolución de llamada para producir un valor a partir de esa promesa. Y cuando llamamos a rechazar, obviamente arrojamos un error de esa promesa. Rechazamos esta promesa. Entonces, por ejemplo, solo voy a llamar a resolver. Y como se puede ver por la inteligencia, tengo valor que tengo que pasar. Resolvemos una promesa con algún valor porque la promesa produce un valor. Entonces por ejemplo, hola. Ahora, intentemos y solo de alguna manera usemos esa promesa. Entonces recuerda que una promesa, no es una función. Por lo que estaría mal llamarlo con paréntesis como si eso hacer algún valioso fuera una función. Basta con hacer referencia a la promesa para que funcione. Si guardo el archivo y luego ejecuto el script, verán que no va a pasar nada porque bueno, no imprimimos nada a la salida. Pero si voy al registro de consola haz algunos, en este caso, veré que se imprimirá el objeto promesa. Es importante tener en cuenta que lo que ve aquí es el objeto de promesa. Entonces es la promesa misma. No es el valor que resuelve la promesa. Esa devolución de llamada que pasamos al constructor de promesa se inicializa de forma sincrónica. Significa que cada vez que nos referimos a algunos, esta devolución de llamada se ejecutará de forma bloqueante. No obstante, sí, el valor que se resolverá a partir de esa promesa se resuelve de manera no bloqueante. Y para resolver un valor de esa promesa para obtener la cadena real hola, tengo que usar esta sintaxis de promesa especial llamada entonces o simplemente sintaxis venerable. A veces se llama así. También lo hacen algunos DOD. Y desde la inteligencia se puede ver tengo tres opciones catch finalmente, y luego, así que para resolver un valor de esa promesa, tengo que llamar al método dot then en el objeto promesa y el método 2D dot-dot, Tengo que pasar una devolución de llamada. Y esa devolución de llamada como primer argumento, recibirá el valor de resultado de esa promesa, por ejemplo, valor resuelto. Y si intento y el valor de resultado de log de consola, verás que será nuestra cadena Hola. Si ejecuto el script, ves Hola se imprime a la salida, lo cual es correcto. Ahora bien, ¿qué pasa con la función de rechazo que recibimos como segundo argumento en el inicializador. Entonces intentemos y en lugar de Resolver, use rechazar, y una vez que lo llamen, puede ver una razón de argumento opcional. Entonces cada vez que rechazamos una promesa, rechazamos con alguna razón, la mayoría de las veces, vas a rechazar una promesa con un error y otras promesas que vas a dejar decir encuentro en la naturaleza, todos ellos rechazarán con un objeto adder. Por eso en lugar de simplemente pasar rechazar con esta promesa fracasó. Pero el mensaje así, en cambio, pasamos un nuevo editor y el mensaje va a ser promesa, grado fallido. Ahora si voy a ejecutar este script, verán error, verán error, promesa falló y manejó advertencia de rechazo de promesa y nota importante aquí que esta luego llamada nunca despidió porque la promesa rechazada y no vemos ningún valor de resultados. Significa que la promesa arroja un error y no hacemos nada para manejarlo. Siempre trata de atrapar errores de Promesas. Esto es realmente importante porque de lo contrario verás mensajes como ese rechazo de promesa no manejada, que potencialmente puede bloquear la aplicación. Entonces para atrapar ese rechazo dentro de la promesa, tenemos que usar el bloque de captura que vimos antes. Entonces solo voy a poner DOD y luego solo voy a llamar al método de captura. Y dentro también tengo que pasar una devolución de llamada ya que el primer argumento que devuelva la llamada al método catch recibirá lo que sea que rechacemos esa promesa con. Entonces como rechazamos esta promesa con otro objeto, la nueva promesa falló. Aquí. Primer argumento, voy a recibir el objeto. Por lo que sólo voy al registro de la consola. Y diré que se produjo adder. Y luego solo voy a imprimir mensaje de error. Genial, Intentemos ejecutar el archivo. Ya verás que no tenemos ninguna advertencia de rechazo de promesa no manejada. Y esta vez vemos nuestro registro de consola. Por lo que siempre que rechazemos la promesa, todo el baile que definimos para resolver a partir de esa promesa nunca será ejecutado porque la promesa arroja un error y ese error o rechazo lo maneja el bloque catch. Otro gran consejo sobre las promesas es ese baile de punto. Se pueden encadenar tantas veces como queramos, mismo con bloques de captura. Entonces por ejemplo, si aquí voy a volver a poner otro punto, verán finalmente el boceto inteligente. Y luego otra vez llamo al método entonces, le paso la llamada de vuelta. Esta vez recibí valor, digamos, y intento y el valor de registro de consola en segundo ellos. Y puedes adivinar cuál va a ser ese valor? Vamos a intentarlo. Y vemos fracasada una promesa. Ajá, vale, Así que en lugar de rechazar, vamos a usar otra vez la resolución para realmente dejar decir dar el control a bailar punto. No necesitamos lanzar adder de esta promesa esta vez. Entonces nota archivo GS, puedes ver Hola primero se imprime porque esto es lo que hacemos en la primera llamada de vuelta y luego vemos valor en segundo Dan es indefinido. El caso es que cuando encadenas múltiplos luego argumentos, el primer argumento en el posterior Dan será el valor devuelto del anterior entonces, porque a partir de este primero, luego devolución de llamada no asegurará nada. Segundo punto luego primer argumento va a ser indefinido. Si voy a devolver cinco aquí, valor aquí ahora serán cinco. Vamos a intentarlo. Y verás valor en segundos luego es de cinco grado. Entonces si voy a usar otro tercer Duck Dan, y esta vez digamos val tres En tercero entonces van a ser tres, ¿verdad? Va a ser indefinido, ¿verdad? Porque la literatura nada de lo anterior. Entonces si voy a regresar 10, val tres va a ser 10. Espero que quede claro. Y podría tener una pregunta, ¿por qué necesitamos encadenar baile múltiple por aquí? El caso es que en el mundo real vamos a trabajar con múltiples promesas al mismo tiempo. Y dentro de una promesa, vamos a llamar a otra promesa algo así como hacer algún punto entonces, entonces dentro tendremos algo como devolver otra promesa y otra vez entonces, y así sucesivamente. Por eso es más fácil pasar el resultado de alguna lógica a otra entonces con el fin de simplificar el código para que lo haga más legible. Sé que podría ser confuso porque no hay un ejemplo como real ahora por aquí. Pero confía en mí, está totalmente bien. Eso lo verás en el futuro. En realidad intentemos crear un ejemplo más real usando promesas. Entonces sólo voy a quitar todo eso. Y en cambio, vamos a crear una promesa completamente nueva de que envolveremos la función SetTimeout que ya conocemos. Nos gustaría convertir setTimeout a, digamos la sintaxis basada en promesas. Por ejemplo, quiero crear una función, llamémoslo peso, suma. Esa función pasaría, digamos número de milisegundos, digamos 40000 durante 40 segundos. Y esta va a ser una función que devolverá una promesa. Y después de esa función, una vez que se resuelva, una vez que se resuelva la promesa, se ejecutará esta devolución de llamada. Por ejemplo, registro de consola, pasaron cuatro segundos. Es algún tipo de reemplazo para setTimeout, pero usando la sintaxis prometida ser. Entonces cómo somos capaces de implementar eso. Entonces esta es nuestra maqueta. Solo comentemos en realidad, y ahora empecemos a escribir la promesa. Por lo que la suma de peso es una función que recibe un argumento, que es número de milisegundos. Entonces solo voy a crear suma de peso. Como función de flecha. Esa función recibe un tiempo de espera de argumento en un lío como ese. Y esa función devuelve una promesa, esa churn nueva promesa al constructor de promesa, paso la devolución de llamada. Y esa devolución de llamada recibe dos argumentos, resultado y rechazo. Pero como no nos encontramos con el rechazo aquí, sólo voy a usar el argumento de resolución. Entonces ahora tenemos que retrasar de alguna manera la ejecución de código dentro de esa promesa, podemos usar setTimeout. Entonces solo voy a llamar a SetTimeout. primer argumento nuevamente es la devolución de llamada que se disparará después del número suministrado de milisegundos como segundo argumento. Y para el segundo argumento, solo voy a pasar el argumento para peso alguna función en sí, tiempo de espera en la masa. Y una vez que estos fríos fracasan, solo voy a llamar a resolver a partir de esa promesa. Y eso es todo. Esta es nuestra implementación. Comentemos nuestro uso de esa promesa, y solo veamos cómo funciona. de nota GS. Puedo ver que han pasado cuatro segundos, y veo mi salida pasados cuatro segundos. Tan solo para demostrarte cómo esto va a ser no-bloqueo, en realidad podemos usar el mismo ejemplo de nuestros videos anteriores, registro de consola de log 2. No importa donde ponga algún punto de promesa Dan, siempre se resolverá usando la sintaxis de punto de una manera no bloqueante. Significa que siempre aparecerá después de todo código sincrónico. Para verificar eso, de nuevo, tal vez hagámoslo un poco más corto. A grado 100. Ves 12 y sólo entonces pasaron cuatro segundos. Y no importa si pongo setTimeout o no aquí. Por ejemplo, sólo voy a resolverlo sin ninguna lógica. Siempre estará al final porque una promesa siempre está resuelta de manera no bloqueante. Espero que quede claro. Ahora, echemos un vistazo a otro ejemplo del mundo real usando la API de Fetch que tenemos disponible dentro del navegador. Si cuando Google, solo voy a escribir marcador de posición JSON, termino en JSON placeholder dot type code.com. Cuando me desplaza un poco hacia abajo, puedes encontrar esta sección con un ejemplo. Entonces solo voy a copiar eso y pegarlo dentro de mi guión NodeJS. Si voy a intentar ejecutar el archivo, verás que Fetch no está definido porque de nuevo, Fetch está disponible sólo dentro del entorno del navegador. Es parte de las API web de navegadores. No se implementa de forma nativa en Node.JS. Por eso esta pieza de código sólo funcionará dentro del navegador. Por lo que copié de nuevo, voy a la consola del navegador, ¿verdad? Y aquí ejecuto el código. Entonces, vamos a descomponerlo. ¿ Qué está pasando aquí? Entonces, en primer lugar, lo que recuperó hace, proporcionamos una URL a esa función, y esa función envía una solicitud a esa URL y nos devuelve la respuesta. Este punto fetch es una función que devuelve una promesa. Por eso tenemos que usar la sintaxis de punto Densa para resolver esa promesa. Por lo que fetch envía una solicitud a la URL de manera no bloqueante en segundo plano. Y una vez que la respuesta para esa solicitud está lista y el navegador está listo para manejarla, esta promesa se resuelve, esa llamada falla y obtenemos acceso al objeto de respuesta. Y como pueden ver, este es nuestro sentido de carga útil para nosotros de vuelta desde el servidor. Y esta es la promesa que estaba pendiente Una vez hacía frío y una vez que se resolvió con primer punto, entonces se ve estado prometido ahora se cumple. Como mencioné anteriormente, esa solicitud será tramitada de manera no bloqueante. Significa que si esa solicitud tardará hasta 10 segundos, entonces esa devolución de llamada dentro del primer punto, Dan disparará después de 10 segundos de manera no bloqueante. Pero, ¿cuál es esta respuesta por aquí? Intentemos reescribir un poco ese ejemplo. Y en lugar de llamar a respuesta JSON, sólo vamos al objeto de respuesta console.log que tenemos aquí. Y como puedes ver, el objeto de respuesta tiene algo amigo, amigo usó encabezados. Bueno, ese objeto de respuesta representa la respuesta del servidor. Y en ese objeto tenemos el método JSON dot que debemos llamar a ese objeto para obtener la carga útil en formato JSON. Entonces si solo vamos a acceder a esa URL en una pestaña separada, ¿verdad? Todo esto está sucediendo de forma manual. Lo hacemos manualmente usando el cuadro de búsqueda del navegador, pero para hacerlo programáticamente, usaríamos fetch y luego llamaríamos al método JSON dot disponible en el objeto de respuesta. Este pero el método JSON también el Cerence nos una promesa. Pero como es una sola acción dentro de esa devolución de llamada, el valor de esa promesa se resolverá automáticamente, y será el valor de retorno de esa devolución de llamada. Lo que está pasando aquí es que dentro de primer punto luego response.data no es método se llama, esa promesa se resuelve y se devuelve. Desde el primer punto luego callback porque esta es la taquigrafía para las funciones de flecha, ya sabemos que el valor devuelto del método Dodge JSON estará disponible como primer argumento en el siguiente entonces por eso aquí tenemos argumento llamado JSON. Puedes ponerle el nombre que quieras, y luego solo lo consolamos bloqueamos. Por eso si vamos a ejecutar ese ejemplo, veremos nuestra carga útil. Pero esta vez lo hicimos programáticamente en lugar de ir al navegador y simplemente acceder al Euro. Ahora todo esto sucede programáticamente usando la API de Fetch disponible en el navegador. Genial. Yo diría que todo esto se trata de promesas, pero hay una cosa más. También tenemos algo llamado async await. Y async await es solo una sintaxis alternativa a la sintaxis de punto luego, ya que vamos a trabajar con múltiples promesas al mismo tiempo, la sintaxis de punto punto se vuelve realmente desordenada en algún momento. Es por eso que una alternativa a esa sintaxis es asíncrona esperar. Veamos cómo se ve, y en realidad intentemos reescribir este ejemplo con fetch usando async await. Entonces, en primer lugar, la sintaxis de espera asíncrona está disponible solo dentro de una función. Significa que para poder usarlo, tenemos que crear una función. Entonces solo voy a crear una nueva función. Llamémoslo enviar solicitud. Y para que la sintaxis de espera asíncrona esté disponible dentro de esa función, tenemos que marcar esa función como un sumidero. Entonces función asíncrona enviar solicitud, si era una función de flecha, Const, digamos enviar solicitud. Sería así. Justo antes de la función de flecha, pondríamos la palabra clave asíncrona, pero mantengamos la sintaxis de la función regular para que lo sepamos. Para resolver esa promesa, correcto, tenemos que llamar al punto Dan y suministrar una devolución de llamada dentro de la sintaxis de espera asincrónica. No usamos dot, entonces usamos la palabra clave await. Esperar. Es por eso que el nombre de sintaxis se llama async await porque bueno, son sólo dos palabras clave, async to mark function para ser usado con async, esperar sintaxis y un peso para resolver la promesa. Yo sólo voy a llamar a fetch. Déjame copiarlo. Fetch. Y para esperar a que se resuelva esa promesa, solo tengo que poner un peso al frente y esto reemplazará el punto luego con se llama Volver delante de una espera, tengo que firmar el valor de resultado de esa promesa a sobre Apple, por ejemplo, esto va a ser respuesta igual esperar, fetch. Y lo mismo haremos con el método JSON. Por lo que ahora tenemos acceso al objeto de respuesta. Y luego vamos a crear la nueva variable JSON. Y se va a esperar respuesta punto JSON, que está disponible en el objeto de respuesta. Si no vas a usar la palabra clave await, la variable JSON será el objeto promise, igual que viste al principio del video. Esto no es lo que queremos. Solo queremos el valor de resultado de esa promesa si voy a quitar la palabra clave await, ¿verdad? Y si paso el cursor sobre la variable, veré promesa porque este es el objeto de promesa. Pero si guardo a la espera, tendré alguno, lo que significa que esta variable mantendrá cualquier valor, pero definitivamente no es un objeto de promesa. Ahora, vamos a intentar y consola log JSON. Y esta pieza de código simplemente reemplazará por completo estas tres líneas. Sí, es un poco más de líneas, pero esta sintaxis es más fácil de leer. La sintaxis de espera asíncrona se construye encima de las promesas, y su intención es hacer promesas para parecerse más al código sincrónico regular. Porque puedes ver podemos leer esta pieza de código línea por línea, a diferencia de con punto entonces un nodo para apuntar aquí es esa segunda línea de código, ¿verdad? línea número siete no se ejecutará antes los resultados de la línea número 6 ya que usamos la palabra clave await, significa que si esta línea de código, it, esa promesa tarda 10 segundos en ejecutarse, el código no irá más. Esperará los diez segundos hasta que se resuelva la promesa, porque usamos la palabra clave await, espera la promesa. Se resuelve la promesa y sólo entonces continúa la ejecución. Espero que quede claro verificar que llamemos a la función y ejecutemos esta pieza de código dentro del navegador. Y ya verás tendremos exactamente el mismo resultado. Vamos a ver nuestra carga útil que recibimos del servidor. De acuerdo, supongo que eso es todo por este video. Y sé que fue realmente difícil entender esa cantidad de información. Fue muy confuso, pero confía en mí, no lo hace tan complicado como podría parecer. Vamos a adjuntar el tema una vez más en nuestros proyectos React. Y aquí es donde te veré la próxima vez. Adiós. 33. Módulos de ECMAScript: Oye, en este video me gustaría hablar módulos atmosféricos en el entorno Node.JS, ya sabemos que hay un sistema de módulos nativo que se llama GS común. Utiliza require y module exporta sintaxis para importar y exportar algo desde un módulo en el entorno del navegador, también tenemos un sistema de módulos de navegador nativo cual se llama script. Módulos y módulos atmosféricos utilizan la sintaxis de importación y exportación. comunidad de Nodejs empuja los módulos de Ackman Script para que se implementen en Node.JS con el fin reemplazar CommonJS porque los módulos de Script de Ekman son más convenientes y más integrales. Y eventualmente hemos construido herramientas que nos permiten utilizar módulos de script ACML en entorno Node.JS sin soporte directo para módulos atmosféricos en entorno Node.JS lo hará de todos modos, y moderno JavaScript, verás módulos ECMO Script. Y raramente, diría que verías CommonJS. Ahora en este video, me gustaría hablar de importación y exportación de módulos atmosféricos porque hay algunos aspectos importantes que necesitamos entender sobre ellos. En primer lugar, vamos a crear dos archivos. Por lo que voy a renombrar file.js a file.js MGS con el fin de utilizar módulos ACML Script forma nativa en el entorno Node.JS. Entonces voy a crear un segundo archivo llamado segundo MGS. Y desde la segunda MGS, voy a exportar algunas cosas. Entonces primero voy a crear una variable llamada Five, y voy a exportar cinco justo al lado. Voy a exportar const 10. Y voy a especificarlo así. ¿ Ves la diferencia? Entonces primero creé una variable, luego la exporté. Y aquí es sólo un one-liner, básicamente lo mismo que en la parte superior. A lo mejor vamos a exportar algo más. Exportar const. Mi nombre va a ser Andrew. Y al final, voy a poner por defecto de exportación y esta vez, que sea tienda así. Por lo que como pueden ver, tenemos dos tipos de expertos. Hemos nombrado exportaciones y tenemos una exportación por defecto. Por lo que un aqua Script módulos, hay dos tipos de expertos nombrados y predeterminados. Sólo puede haber una exportación predeterminada en un módulo y tantas como desee exportaciones con nombre. Ahora, cómo podemos realmente importar todos esos. Si voy al Archivo MGS aquí, necesito escribir importar algo desde la segunda MGS. Genial. Entonces, ¿qué debo suministrar aquí para importar 5? Bueno, la cosa es que cualquier módulo tiene su propio objeto de exportación, el objeto experto para segundo MGS va a verse así. Entonces primero lo exploramos cinco, ¿verdad? Que va a ser nuestro experto nombrado porque bueno, tenemos Biblia nombrada cinco y exportamos variable llamada cinco. Entonces cinco van a ser cinco, luego este mismo ancho, 10, y lo mismo con mi nombre. Estas son todas nuestras exportaciones denominadas. Entonces al final tenemos tiro por defecto de exportación, expertos por defecto. No tienen ningún nombre. Eso se debe a que son por defecto. Exporta sólo un valor. Se puede ver que no creé ningún nombre explícito para una cuerda afilada, ¿verdad? No está asignado a ninguna variable, solo se exporta por defecto, módulos atmosféricos en realidad anexarán esa exportación predeterminada al objeto de exportación bajo clave predeterminada, así como así. Por lo que eventualmente terminamos con un objeto así. Esto es lo que exportamos desde segundos mgs. Ahora bien, si quiero importar 5, puedo usar objeto está estructurando. ¿ Por qué? Porque bueno, exportamos un objeto. Entonces de nuevo, cada módulo tiene un objeto experto, y como es un objeto, podemos usar la destrucción de objetos. Por eso. Aquí junto a importar, voy a poner corchetes rizados para esta estructuración. Y voy a importar 5, derecho, especificó la clave que quería importar 5. Además, me gustaría agarrar quizá mi nombre, cinco y mi nombre. Vamos console.log cinco y mi nombre. Y ejecutemos el script para verificar eso. Y vemos cinco y Andrew. Lo cual es correcto. No obstante, ¿qué pasa con nuestra exportación por defecto aquí? Probemos e importemos por defecto. En realidad menos defecto de destrucción. Si voy a hacer eso, al instante tendré error de sintaxis. El caso es que no podemos simplemente usar esa palabra clave predeterminada reservada. Esto no está permitido para importar exportación por defecto, no necesitamos usar la estructuración. En su lugar. Simplemente tenemos que darle nombre propio para el valor exportado. Entonces que sea mi coma de importación predeterminada y luego todas las exportaciones con nombre. Entonces si en realidad no necesitamos todas esas exportaciones nombradas, sólo podemos importar la exportación por defecto, que va a ser afilada. Por lo que voy a quitar esta parte estructurante y voy a mantener sólo mi importación por defecto. Ahora, déjame probar y consola registrar mi importación predeterminada. Verás afilado y no importa qué nombre suministre para mi importación por defecto. No importa porque vamos inicialmente, no tiene ningún nombre de variable. A diferencia de nuestros expertos nombrados, todos tienen un nombre significativo. Nosotros lo exportamos variable llamada cinco. Es por eso que cuando vamos a importar esa variable, simplemente podemos renombrarla, ¿verdad? Podemos simplemente poner 55 mayúsculas no existe en el objeto exportado. Tenemos cinco, que es minúscula. Por eso tenemos que seguir estrictamente las mismas reglas que con la destrucción de objetos. Tenemos que usar los mismos nombres que exportamos. Otro caso de uso sería cuando tenemos que importar todo eso como un solo objeto. Al igual que ven aquí, no queremos separar como exportaciones con nombre y exportación por defecto, así como eso. No queremos separarlos así. Entonces en cambio queríamos recibir el único objeto entero. Entonces en este caso, podemos hacer importar astérix como y luego el nombre del objeto. Entonces que sea segundo módulo. Y ahora si voy a cancelar log segundo módulo, ya verás que tengo, será básicamente mi objeto de exportación. Tengo 5, 10, mi nombre y default. Y ahora con el fin de acceder a experto por defecto, necesito ahora realmente hacer referencia a la clave por defecto, ¿verdad? Verás afilado. Si necesito acceder a 10, tendré que usar 10. Entonces lo que acabamos de hacer, importamos todo el módulo a ese único segundo módulo, tazón de bateador, diría que en la práctica, esto es menos común en la práctica en el mundo real. La mayoría de las veces, vamos a ver ya sea una exportación predeterminada o una exportación con nombre. Se usan mucho en el mundo real. En realidad vamos a ver ya sea así 510 o si un módulo tiene sólo exportación por defecto, usaríamos sólo esta importación por defecto. Y lo usaríamos así. Bueno, ahí es donde básicamente lo vas a ver. No es tan difícil entender esa parte. Sólo hay que recordar siempre que hay dos tipos de exportación. Una exportación predeterminada y una exportación con nombre, solo hay una exportación predeterminada para un solo módulo que no puedes usar para exportar por defecto aquí. Si voy a intentar y hacer eso, verás que voy a tener identificador de error de sintaxis predeterminado ya ha sido declarado. Te recomiendo recordar siempre que cada módulo tiene un objeto el cual se está exportando y todas las exportaciones con nombre se fusionan en ese objeto. Forma que es más fácil recordar que hay que importar ese objeto. Usar objeto es estructurar. Creo que los módulos ECMO Script son divertidos y realmente me gustan. Y espero que U2 te vaya a ver en la siguiente. 34. ECMAScript o JavaScript: Oye, esta va a ser una corta. Solo quiero aclarar la diferencia entre un script y JavaScript. Probablemente viste muchos términos como ES6 es cinco, ES 2015. Después de ese video, sabrás la diferencia. Para buscar la respuesta, usaré Google y solo voy a escribir script ECMO o GS. Y Google me dirá la diferencia. Entonces como podemos ver desde el primer pop-up, la especificación de script ECMO es un blueprint para crear un lenguaje de scripting. Y JavaScript es una implementación de ese blueprint. Y se pueden ver diferentes variaciones de esta declaración a través de todos esos enlaces. Para resumir rápidamente esa declaración, puedo decir que el script ECMO es un conjunto de cationes específicos que JavaScript implementa. Significa que el guión AGMA es algún tipo de guión para una película donde la película es JavaScript, tan fácil como eso. Para obtener más información, puede navegar a la página de Wikipedia para el script ECMO. Entonces déjame abrir esa página y desde aquí podemos ver diferentes versiones de acme scrape. La versión más común del script ACML es probablemente sí, 2015, que se llama ES6 porque fue la sexta edición del script ECMO. Si te desplazas hacia abajo, puedes leer qué se hizo exactamente en esa versión específica. Y también hay un término llamado ES. A continuación, como se puede ver, se trata de un nombre dinámico que hace referencia a lo la próxima versión incluirá al momento de escribir. Ahora sabemos que quien se refiere a JavaScript como script ECMO es una persona adecuada. Porque ahora sabemos que estos dos son básicamente lo mismo. Creo que eso es todo. Para obtener más información, consulte Wikipedia o un Google. Nos vemos en el siguiente. 35. ¿Qué es React?: Oye, finalmente empezamos a hablar de reaccionar. Estos cortos próximos videos van a tocar la teoría y los conceptos de React. Siéntase libre de hacer referencia a estas series en cualquier momento en el futuro. Vamos React es una biblioteca para construir interfaces de usuario. Se puede usar para construir sitios web, aplicaciones móviles e incluso aplicaciones de escritorio. La forma más fácil de aprender reaccionar es probablemente partir de reaccionar en la web para construir sitios web. En este video, voy a hablar desde el punto de vista web, reacciona objetivo es crear interfaces de usuario con algo llamado componentes. Para los sitios web, es simplemente reaccionar o Reaccionar para la web. Para aplicaciones móviles, es React Native para aplicaciones de escritorio se llama electrón. React opera sólo en la capa de vista. Significa que reaccionar no obliga a cómo debes construir tu app. Reaccionar solo fuerza su propia lógica y dicta cómo debes manipular los elementos HTML subyacentes. El resto es sobre ti en el pasado. Aquí, alrededor de 20 y 10, jQuery se utilizó mucho para manipular HTML a través de JavaScript. Pero no hay necesidad de usar jQuery hoy en día. Ya que reaccionar es solo a la biblioteca, se puede integrar en cualquier aplicación existente para construir una interfaz de usuario. Ejemplos de sitios web de React son Facebook y Netflix. Discord usa React para todo para construir su sitio web, aplicación móvil, e incluso su aplicación de escritorio está construida con React. Bastante impresionante, ¿no? React no es un framework que es por otras partes de la aplicación, debe construirse con otras herramientas y bibliotecas. Y verás que una vez que entramos en la codificación, al principio, reaccionamos se utilizó para construir aplicaciones de una sola página, solo, sitios web que están totalmente gestionados por JavaScript y destinados a llenar un más como aplicaciones móviles. Pero como por ahora, comunidad React, ha creado muchas herramientas y marcos alrededor de reaccionar. Por ello, hoy en día somos capaces crear cualquier tipo de sitio web con React. Pero ahí está, renderización del lado del servidor, aplicación de una sola página, páginas web estáticas, o tal vez una aplicación híbrida. Y probablemente viste otras soluciones por ahí como Vue, JS, svelte, o tal vez incluso Angler. Todos ellos se basan alrededor componentes y eventualmente logran el mismo resultado. Es realmente difícil decir cuál elegir. Algo es más fácil. Algo es más difícil. Si aún lucharas con la elección, te recomendaría escoger el que nombre o logotipo más atractivo, tan sencillo como eso. Pero en nuestros proyectos, conoceremos React. Mantente atentos porque solo quedan unos cuantos videos teóricos más antes de entrar en la parte de codificación hasta la siguiente. 36. Enfoque basado en componentes: Hey, allá En video anterior, mencioné componentes y enfoque basado en componentes. Pero, ¿cuál es el componente? Un componente es sólo un bloque de HTML que no se puede reducir en el futuro. El enfoque basado en componentes es cuando una aplicación se está construyendo con componentes, mejor pensar en un componente como una etiqueta HTML creada por el usuario personalizado. Pero además de eso, los componentes también pueden incluir lógica y estado. Por ejemplo, un componente puede ser un botón que cambia de color. Una vez hecho clic, el botón cambia su color de fondo. Podemos nombrar a este componente como botón de color. Y más adelante en cualquier parte del código HTML, Usa el botón Color tantas veces como queramos. Esto es básicamente lo que hacemos con las etiquetas HTML. Los componentes no son diferentes. Tiene sentido pensar en ellos como bloques de construcción para la aplicación. enfoque basado en componentes forma un árbol de componentes. Encima de ese árbol, hay un componente raíz que anida otros componentes en React root componente casi siempre se llama aplicación, o otros componentes están anidados dentro del componente de la aplicación. Los componentes que yacen en la parte superior se llaman componentes de nivel superior. Estas suelen ser páginas. Los componentes que aparecen más arriba en el árbol se llaman padres. Una vez que yacía abajo se llaman niños. Echemos un vistazo a la página oficial de Facebook. Facebook es el creador de React, y por eso es el mejor ejemplo posible para observar. Intentaré dividir el espacio en componentes para darte una idea básica, Vamos. Todo el sitio web en sí es el componente App. En la parte superior, tendríamos componente Navbar y Navbar en el centro, hay componente de navegación y cada botón dentro es otro componente también. A la derecha, se puede perfilar componente de navegación, donde cada botón similar es el mismo componente pero reutilizado varias veces. Pruébalo tú mismo y divida el menú desplegable a continuación en componentes abajo ahora barra, puede ser un componente de página principal. La página principal incluye tres componentes. Barra lateral a la izquierda, barra lateral a la derecha, y alimentación en el componente de barra lateral central incluye menú. Componente de alimentación incluye lista de publicaciones y barra lateral a la derecha incluye algo más. Corresponde totalmente a los desarrolladores cómo estructurar y crear componentes. Sin duda es posible mantener todo el marcado y toda la lógica en un solo componente sin crear otros componentes. Pero entonces la idea del enfoque basado en componentes quedaría totalmente comprometida. Y será lo mismo que no usar componentes en absoluto. Al final del día, terminamos con árbol de componentes. Y ese árbol siempre tiene una dirección de arriba a abajo. Si hay algunos cambios en un componente padre, todos los hijos de ese componente también se verán afectados simplemente porque son parte de él. Concluyamos. desarrollo con React se basa en torno al enfoque basado en componentes. La aplicación React se puede visualizar como un árbol de componentes. Los componentes son piezas reutilizables de la app. Ventajas de los componentes son reutilización y consistencia en toda la aplicación. Si usabilidad usuario post componente se puede insertar en cualquier lugar la aplicación era sólo una sola línea de código. Con consistencia, el componente post usuario siempre se comportará exactamente igual independientemente de la página o el lugar donde se utilice. Bueno, eso es todo. Así es como todas las aplicaciones modernas se construyen hoy en día con componentes. Espero que tenga sentido. Cia. 37. Funciones vs. clases: Hola, In React. Existen dos tipos de componentes disponibles para nosotros, residuos basados en clases y funciones. Difieren en sintaxis y la forma en que manipulamos los datos dentro de ellos. Antes de React Hooks, no teníamos otra opción que crear competencia utilizando clases en el presente, la situación es ligeramente diferente. Con React Hooks, utilizamos funciones para crear componentes. Los ganchos React solo están disponibles en componentes basados en funciones, y esta es la razón por la que las funciones simplifican los componentes. La sintaxis es más ligera y más fácil de comprender. En nuestros proyectos, usaremos React Hooks, lo que significa que vamos a trabajar con componentes basados en funciones. Sólo. Los componentes basados en clases se vuelven cada vez más utilizados. Sin embargo, es posible que a veces por ahí veas componentes basados en clases, pero eso está totalmente bien. El equipo de React tiene sus apuestas en React Hooks y sí creen que los ganchos son el futuro. Después de terminar el último proyecto, podrás leer componentes basados en clases y no tendrás ningún problema en la transición entre funciones y clases. Espero que tenga sentido. Nos vemos en el siguiente. 38. Reacción bajo el Hood de la the de la casez: Hola otra vez. Veamos cómo funciona React bajo el capó. En el ejemplo de una aplicación de una sola página, la mejor manera de pensar en una aplicación React como si un árbol de componentes en React, hay una cosa llamada el punto de montaje en el que se está insertando la aplicación React, o mejor decirlo, montado por defecto, es una etiqueta div con ID grosero. En la parte superior del árbol, está el componente app, que es el envoltorio para todos los componentes de la app. Dentro del componente de la aplicación yacía componentes de primer nivel. Dentro de ellos, coloque componentes anidados, y así sucesivamente hasta el componente muy anidado. Si pensáramos en eso por un momento, es más o menos lo mismo que la estructura HTML DOM, ¿no? El Modelo de Objetos de Documento o DOM es la representación de la página HTML en forma de un árbol de etiquetas. Dom es como los navegadores ven e interpretan el marcado HTML. Cuando hacemos cosas básicas en JavaScript como document.getElementById id Ese objeto de documento es parte de la API DOM que está expuesto por el navegador. Reaccionar crea en memoria representación de árbol de componentes llamado DOM virtual. Es lo mismo que el DOM del navegador, pero solo se usa internamente por reaccionar. Cuando la aplicación React se renderiza en el árbol de componentes de página se está traduciendo de presentación dominante virtual en marcado HTML. Ese marcado HTML se está insertando en el elemento de montaje en la página web. Recuerda que todo eso se hace a través de JavaScript. Cuando los datos son componentes necesitan ser actualizados, reaccionar siempre opera con el DOM virtual en primer lugar. Toma estado previamente capturado del DOM virtual, lo compara con el recién creado con actualizaciones y calcula la diferencia. Si hay alguna diferencia, reaccionar calcula qué datos y componentes deben actualizarse. Y esos cambios se llaman renders 3D. Cada render básicamente representa estado DOM virtual en un momento, el proceso de calcular la diferencia entre renders se llama reconciliación. Y el nombre del algoritmo para ese proceso es React Fiber. En términos simples, React Fiber detecta lo que debe actualizarse entre re-renders. Podría tener una pregunta, ¿por qué usar DOM virtual? ¿ No es agregar un paso extra y más complejidad? Bueno, depende. DOM virtual cambia o más liviano porque todos están en la memoria, a diferencia de los cambios en un DOM real, cuando se cambia el marcado HTML, los navegadores suelen recalcular el diseño y volver a pintar la página web. Es mejor tener 100 actualizaciones en DOM virtual, lo que eventualmente dará como resultado una sola actualización dom real y repintar parches mayor que aplicar todas las 100 actualizaciones directamente en DOM real. Cuando navegamos por un sitio web bajo el capó, HTML se actualiza constantemente. React asegura que estas actualizaciones se realicen de la manera más eficiente posible. La idea detrás de la cúpula virtual es reducir el número de actualizaciones reales de DOM. Sé que puede ser difícil percibir esa cantidad de información, pero está totalmente bien. No se requiere conocer todos los detalles. Ahora, sabemos cómo funciona React internamente. Ese es uno donde falta una pieza sobre su arquitectura, estos guisantes es un flujo de datos de una manera, que se llama flujo. Flux es el nombre de una arquitectura interna reacciona. Flux implica que los datos en la app siempre fluyen en una dirección de arriba a abajo. Por ejemplo, cuando se actualizan los datos dentro de un componente, también se renderiza el componente y todos sus hijos. En caso de que los niños se actualicen o no, es el trabajo para el anteriormente mencionado React Fiber, el algoritmo que calcula qué exactamente necesita actualizarse. Pero el hecho es que las actualizaciones pasan de los componentes de los padres a los hijos. Es imposible que el flujo de datos vaya de abajo a arriba. Creo que vas a poder sentir eso cuando vamos a escribir código React. Muy bien, vamos a resumir bajo el capó, reaccionar utiliza su propia representación HTML DOM llamada DOM virtual. El objetivo del DOM virtual es reducir el número de actualizaciones reales de DOM. React core algoritmo se llama React Fiber y su tarea principal es calcular qué exactamente debe actualizarse entre los re-renders reaccionan diseño de arquitectura se llama flujo, lo que implica los flujos de datos solo en una dirección de los componentes principales a los hijos. Bueno, esta es la información completa sobre React. No te preocupes si eso fue confuso. Simplemente vuelve a ver el video o busca más información si es necesario. Nos vemos a continuación. 39. Placas de Boilerplates y Bunders de proyectos: Oye, esta vez me gustaría hablar cómo podemos iniciar el desarrollo de una nueva Aplicación Web React. En este video, no consideraré una plataforma en línea diferente, como CodePen para desarrollar directamente dentro del navegador. Debido a que estas plataformas se utilizan sólo como patios de juego, o generalmente sólo para compartir rápidamente el código con configuración básica. Para entender cómo se están construyendo las aplicaciones JavaScript modernas, debemos entender lo que nuestro proyecto Butler's project Bundler es una herramienta que toma todo el código fuente, scripts, estilos, imágenes, procesos, todo eso, y crear un proyecto construido. Proyecto construido es una versión minificada empaquetada del código fuente optimizada para la máxima eficiencia. Eso son toneladas de proyecto Bundler sonido son los más comunes son Webpack, roll up y paquetería. Todos los proyectos modernos de JavaScript están cubiertos por estas herramientas. Genial, Volvamos a nuestra pregunta principal, formas de empezar a desarrollar una nueva aplicación React. Eventualmente se reduce a tres pasadas. La primera forma de crear una aplicación React es configurar y configurar todas las herramientas de compilación, como paquete web para React desde cero. Segunda forma es utilizar una plantilla de proyecto. Somos herramientas construidas ya configuradas para el desarrollo de React. Y la tercera forma es usar un marco React como el siguiente GS, o Gatsby. No hay respuesta correcta sobre cuál elegir. Todo depende de qué configuración estés buscando, preferencias personales, características especiales, etcétera. Configurar todo manualmente y configurar el proyecto Butler's como Webpack desde cero, rara vez se ve hoy en día. Casi todas las veces Usted o bien iría con una plantilla o un marco. las plantillas, por cierto, a menudo se les llama calderas, es decir, cada vez que se ve donde el caldero no se asustan, es sólo otra forma de decir plantilla de palabra. Hay un montón de diferentes comunidades creadas calderas del proyecto React, que es copiar una plantilla y empezar a desarrollar nada más necesario. El boilerplate más conocido de React es probablemente la app Create React, que es mantenida por el equipo de React bajo el capó, utiliza la configuración web back predefinida. Podría estar tentado a usar solo la aplicación Create React. Pero es importante recordar que la aplicación Create React no es la única forma de desarrollar aplicaciones React en el presente, hay muchas alternativas geniales. Actualmente, las herramientas construidas bastante populares para front-end son VDD y snowpack. Otra forma de lidiar con React es usar un framework React. Los marcos son súper populares este momento, sobre todo a continuación, sí, pero diría que es mejor empezar a aprender reaccionar sin un marco. Debido a que los marcos para CHE características y roles específicos en nuestros proyectos, vamos a utilizar plantillas ya configuradas y colinas construidas. ¿Cuáles? Siéntate una vez que te metas en los proyectos, ve otros 40. 1 resumen del proyecto de TicTacToe: Hola a todos. Bienvenido a la sección Tic Tac Toe. Este va a ser un video de introducción rápida donde podrás previsualizar el proyecto. El proyecto va a ser el juego Tic Tac Toe, que ya puedes ver en tu pantalla. Podemos dar click en cuadrados. Podemos jugar el juego. Siempre que tengamos un ganador, se resaltará la combinación ganadora. Tendremos diferentes efectos activos. También en la parte inferior, esa será la historia del juego, que podemos recorrer, y ver con qué se mueve lo hizo, así como si hacemos clic en cuadrados, podremos sobrescribir la historia si necesitábamos botón de inicio de juego, y yo diría, esto es más o menos así. A pesar de que podría parecer simple. Tiene muchos conceptos básicos que crearán una buena base para tu conocimiento de reacción. Así que comencemos. 41. 2 Cómo crear y configurar un nuevo proyecto con Vite: Hola ahí. Por fin vamos a empezar a construir el primer proyecto que va a ser Tic Tac Toe. La herramienta que vamos a utilizar para construir Tic Tac Toe va a ser Vite. Este es el sitio web oficial de Vite que puedes ver ahora mismo. Lo puedes encontrar en Google. Voy a hacer clic en “Comenzar”, y veamos qué hace exactamente Vite. Básicamente, Vite es una herramienta front-end que construye el proyecto. Puede ser cualquier cosa. Puede ser reaccionar, puede ser JavaScript sin procesar, o puede ser cualquier otro framework soportado. Bajo el capó, Vite utiliza Rollup. Rollup es un agrupador de módulos. Rollup es básicamente la herramienta que construye el proyecto y Vite es la configuración alrededor de Rollup. Vite es bastante rápido y en realidad muy popular en este momento. Sigamos con la documentación y vamos a desplazarnos hasta andamiar tu proyecto de primera semana. Requiere que tengamos Node versión 14 y plus, pero estoy bastante seguro de que tienes última versión estable que es 18 en este momento. Podemos ver que podemos crear nuevo proyecto con npm simplemente ejecutando ese comando. Voy a copiar ese comando, y voy a ir a CMD. A lo largo de los proyectos voy a usar Git Bash, y dentro de VS Code voy a usar Git Bash. No obstante, para este voy a usar CMD. Puedes usar cualquier otro shell. Elijo CMD específicamente porque Vite nos va a incitar con algunas preguntas y cuando Git Bash se ejecuta como una instancia separada, tiene problemas con la interactividad a diferencia de CMD. Una vez que voy a ejecutar este comando, Vite me va a hacer algunas preguntas y luego voy a crear una nueva carpeta de proyectos. Sin embargo, voy a crear una nueva carpeta de proyecto dentro de nuestra navegación de terminal actual. Ahora mismo dentro de CMD, estoy navegado para ver mi nombre de usuario. Esta es la carpeta de usuario, y una vez que voy a ejecutar el comando Vite, va a crear la carpeta del proyecto aquí dentro de este directorio. Yo no quiero hacer eso. Quiero establecer mi propia ruta de carpeta de proyecto. Para eso, primero tengo que decidir dónde me gustaría poner mi proyecto. Para mí, va a estar aquí dentro de D_web. Este es el lugar donde me gustaría colocar mi proyecto. Primero, necesito navegar dentro de la terminal hasta esta carpeta. Dentro de CMD, voy a escribir el nombre del disco para cambiar la navegación al disco D. Si estás dentro de Git Bash, entonces tienes que escribir cd d y dos puntos, si estás dentro de cualquier otro shell, entonces estoy bastante seguro como Linux shell, como Bash, o tal vez en Mac, estoy bastante seguro que ni siquiera lo necesitas. De todos modos, estoy dentro del disco D, entonces voy a escribir cd, cd significa cambiar directorio, y solo voy a escribir cd_web. Sé que es _web porque si escribo ls, ls es un comando de shell de Unix para listar todas las carpetas dentro de la navegación actual. Sin embargo, dado que CMD es un terminal basado en Windows, necesito usar dir, así que dir es la alternativa de comando a una Terminal de energía de Windows menos interna. Dentro de D, tengo _web. Esto es exactamente lo que navego, así que voy a escribir cd_web, y boom, ahora estoy dentro esa carpeta y estoy seguro de ejecutar el comando Vite. Voy a ejecutar el comando copiado. Me pidió un nombre de proyecto, vamos a llamarlo tictactoe-vite. Presiono “Enter”. Ahora necesito seleccionar un framework. Vamos a elegir reaccionar y variante va a ser JavaScript. Genial. Ahora bien, el comando fue exitoso. Dice ese proyecto de andamios en _web tictactoe-vite, hecho. Ahora ejecuta cd, npm install, npm run dev. Eso lo vamos a hacer en departamento. Vamos a salir de eso. Ahora, lo que voy a hacer, voy a abrir archivo VS Code, abrir carpeta, y ahora voy a ir a D web y seleccionar tictactoe-vite como la carpeta del proyecto dentro de VS Code. Una vez que estemos dentro tenemos algunos archivos aquí. Lo primero que vamos a hacer, vamos a instalar dependencias. Tenemos los archivos creados. Tenemos paquete json con algunas dependencias listadas ya, pero no tenemos ninguna de ellas instalada. Para eso, voy a abrir terminal integrado dentro de VS Code, y aquí lo que voy a hacer, voy a instalar dependencias ejecutando npm install. Npm instalado sin ningún argumento escanea paquete json dentro de la navegación actual. Mi navegación actual es la carpeta tictactoe-vite. Se busca paquete json. Busca dependencias, y dependencias dev listadas dentro, y si faltan, si están desinstaladas, npm las instalará. Voy a escribir ese comando, y voy a esperar. Si bien hace lo suyo, veamos qué tipo de dependencias tenemos aquí. Por defecto, tenemos instaladas dependencias react y react-dom. Estos son paquetes centrales de react, así que react es el paquete core y react-dom es el paquete core específicamente para la web porque, bueno, web usa el modelo dom. Dentro de las dependencias dev tenemos tipos reaccionan, en realidad no los necesitamos en tipos react-dom. Esto es algo para TypeScript. No estoy seguro de por qué entran. Entonces tenemos vitejs plugin-react y el propio Vite como herramienta. También vemos viteconfig.js aquí. Dado que Vite se puede utilizar para construir cualquier proyecto front-end, debe detectar. En primer lugar, Vite viene con una configuración casi nula. Tenemos que especificar, tenemos que configurar con, bien, tomar mis archivos de reacción y por favor hacer la magia, y Vite hará. Para eso, necesitamos instalar el plugin, bueno, que ya está instalado, y luego dentro de viteconfig tenemos que enumerar ese plugin de Vite aquí. Ya ves que todo está configurado para nosotros. Realmente no necesitamos hacer nada. Si quieres leer más sobre la configuración de Vite, sigue ese enlace aquí. Es bastante sencillo. A partir de ahora, si vuelvo a abrir mi terminal se pueden ver paquetes agregados, todo está genial. Aquí aparecen dos cosas más, package-lockjson y módulos de nodo. Entonces package-lockjson representa la versión que acabamos de instalar. Atrapa la versión específica del paquete que instalamos. Entonces tenemos módulos de nodo. Los módulos de nodo es el lugar donde se instalaron todas nuestras dependencias. Ya que tenemos esa carpeta, ahora podemos ejecutar fácilmente nuestros scripts y ellos funcionarán. Antes vamos a hacer eso, vamos a configurar algunas cosas más aquí. Vamos a agregar eslint y más guapa a nuestro proyecto. Para hacer eso necesitamos instalarlos primero. Voy a ejecutar npm install dash dash save-dev. Save-dev instruirá a npm install para instalar los paquetes como dependencias del desarrollador, así npm install eslint y prettier. Entonces necesitamos crear archivos de configuración para estos dos. Se puede ver que una vez finalizado el comando, tengo tanto más guapa como eslint aparecen como dependencias de desarrollador en el paquete json. Voy a crear nuevo archivo.prettierrc y el otro va a ser.eslintrc. Ahora bien, ¿cómo vamos a configurar estos dos? Tenemos algo que se llama Gist. Este enlace será compartido con usted. Dentro de esa Gist, puedes encontrar archivos.eslintrc y.prettierrc. Estas son las configuraciones que vamos a usar. Sólo vamos a copiarlo de aquí y pegarlo así. Puedes elegir cualquier configuración más bonita que quieras. Esta es solo mi preferencia personal que elegí específicamente para este proyecto. Puedes cambiar cualquier valor para tus necesidades. Entonces eslint config, también copié de ahí. No obstante, es más interesante que más bonita. Aquí hacemos algunas cosas. Extendemos eslint recomendado, que es la configuración integrada en eslint. No necesitamos instalarlo. Luego extendemos plug-in, react, recommended y plug-in react JSX runtime así como más bonito. Estos en realidad vienen de los paquetes, por lo que estos paquetes para ser instalados. Si volvemos a esa Gist aquí, podemos encontrar dependencias de desarrolladores, MD, eslint-config-prettier y eslint-plugin-react. Si vamos aquí, tenemos que instalarlos primero. Estos son los plug-ins que extendemos y no aparecen de la nada. Tienen que ser instalados. Yo solo voy a copiar el comando de instalación para eslint-plugin-react e instalarlo. Exactamente lo mismo voy a hacer por eslint-config-prettier. ¿Qué están haciendo estos dos? El eslint-config-prettier se asegurará de que nuestra configuración de eslint y configuración más bonita no colisionen entre sí. Este paquete solo asegura que no nos topamos ningún malentendido entre estas dos herramientas. Eslint-plugin-react es un paquete bastante popular. Bueno, básicamente una lista de reglas para los proyectos de linting react. La configuración que tenemos aquí abajo, básicamente la tomé de la documentación de la página eslint-plugin-react. puedes encontrar aquí. Extendemos dos cosas desde ese complemento, conjunto recomendado de reglas así como el tiempo de ejecución de JSX. JSX runtime, vamos a volver a eso, qué es exactamente eso. Reglas de Insights, deshabilité la regla de tipos de prop de reacción, que proviene del paquete plugin-react. El motivo de ese tipo de utilería es algo que no vamos a cubrir. No obstante, está incluido aquí, así que en realidad no lo necesitamos. Sólo va a perturbar nuestro proceso de desarrollo, así que acabamos de desactivar esa regla por completo, la apagamos. El resto es como te dije, fue tomado de aquí. Genial. Por fin tal vez intentemos ejecutar el proyecto. Dentro de los scripts, tenemos tres scripts definidos por defecto, dev, build y preview. Dev va a ejecutar servidor de desarrollo local, construir vamos a construir el proyecto, y previsualizar estoy bastante seguro de que va a previsualizar la compilación de producción final para nosotros. Servirá los archivos de compilación de producción. Sigamos adelante y ejecutemos el script dev, npm run dev. Después de un segundo, verás ese mensaje. Ahora, en realidad podemos acceder a esa URL que nos da una apertura dentro del navegador. Si voy a ir aquí, verán esto. Bueno, esta es nuestra aplicación React en este momento. Lo que hizo en este caso, creó un servidor local para nosotros y nos expuso el enlace que podemos usar para acceder al servidor de desarrollo. Este es el lugar donde podemos ver el proyecto a nivel local y desarrollarlo. Detengamos el comando presionando Control C varias veces. Probemos y veamos la otra compilación de comandos. Si voy a npm run build, verás un par de cosas aquí. Vite crea la carpeta dist, y dentro de la carpeta dist, crea SVG, HTML y dentro de los activos, crea archivos JS y CSS. Lo que hace este comando, toma todos los archivos dentro la carpeta fuente y los construye en HTML, CSS, JavaScript y archivos secundarios. Este comando de compilación produce la construcción de producción final de nuestra aplicación. Posteriormente, podemos tomar la carpeta dist e implementarla en hosting. Esto es exactamente lo que vamos a hacer más adelante en este proyecto. Realmente no necesitamos inspeccionar nada dentro de dist. Está optimizado, está minificado, y se ve que se ve feo. Esto está totalmente bien porque se supone que debe optimizarse de esta manera. Nuevamente, bajo el capó, vite usa roll-up. El roll-up es la herramienta que hace toda esa minificación, transpilación y el resto. Ahora, vamos a echar un vistazo, ¿qué tenemos aquí entre otros expedientes? La carpeta fuente es la carpeta donde vamos a crear nuestros archivos fuente. Todos los componentes reaccionan, todo el código va dentro de la fuente. El resto de configuración, eslint, más bonitas que no forman parte del código fuente, sino que forman parte de la configuración del proyecto, se encuentran en la carpeta raíz aquí junto al paquete Jason. Además, tenemos índice HTML aquí. Indice HTML aquí, este va a ser nuestro punto de entrada. Aquí es donde nuestro proyecto se inicia por sí mismo. Volveremos a eso más tarde. Lo que vamos a hacer ahora, no vamos a tocar nada. Vamos a cubrir eso en el siguiente video. Por ahora, vamos a repasar el resto. Tenemos carpeta pública y tenemos la carpeta fuente. La carpeta pública es el lugar para los activos estáticos de nuestro proyecto. Siempre se sirven bajo el camino raíz de nuestra aplicación. Lo que quiero decir es que volvamos a ejecutar el comando dev. Si vamos a acceder, veamos qué tenemos en público. Tenemos vite SVG así que si vamos a acceder a slash, que es root vite SVG, vemos que el archivo está siendo servido aquí bajo vite SVG, así que la ruta que tienes para el archivo dentro carpeta pública está mapeada al segmento URL. Si voy a crear una carpeta, llamémoslo. No lo sé, ja ja y podemos mover vite dentro lol entonces vite SVG va a ser servido bajo lolvite.svg. Este es el lugar para los archivos que se supone que no deben ser transpirados, o de alguna manera minificados, o afectados por la herramienta de compilación. Se quedarán como están aquí dentro del público, y podemos referenciarlos dentro de nuestra aplicación. La carpeta pública es bastante común dentro de cada proyecto front-end. Genial. Ahora que sabemos cuáles son todos estos archivos, solo hay una cosa que queremos hacer antes de poder iniciar el desarrollo y cavar dentro de estos archivos. Queremos introducir, Git, a nuestro proyecto. Qué tenemos que hacer, primero tenemos que inicializar, Git aquí. Dentro de la terminal, vamos a escribir git init y aquí puedes ver que Git ahora está presente así que lo que podamos hacer, vamos a agregar todo eso al escenario y luego comprometerlo todo. Sólo una nota aquí. Aquí hay un nuevo archivo llamado Gitignore. Gitignore es el archivo reconocido por el sistema Git y todo lo que se enumera dentro Gitignore será ignorado por Git. Dentro de esa carpeta, tenemos muchos archivos secundarios que realmente no nos importan. Sin embargo, también tenemos aquí módulos de nodo y dist. Estos dos serán ignorados por Git y si ves dentro del código VS, ni siquiera son resaltados. ¿Qué significa? Significa que cuando cometemos archivos, todos los archivos que se vean afectados, se agregarán como parte del proyecto Git, pero esos archivos que se enumeran aquí no serán reconocidos por Git. Simplemente serán ignorados y estos módulos de nodo son ignorados porque, bueno, realmente no los necesitamos. Estos son archivos generados dinámicamente. Si queremos, digamos, compartir nuestro proyecto con otra persona, esa persona los descarga todos los archivos del proyecto no van a esa persona los descarga todos los tener esto y módulos de nodo porque el peso mucho y realmente no lo necesitan porque se pueden crear dinámicamente. Yo solo voy a escribir npm install, los módulos Node serán recreados. Voy a escribir npm run build y se recreará la carpeta dist. Realmente no les necesitamos mucho el peso, y se pueden crear dinámicamente. Por eso están listados dentro de Gitignore. adelante y agreguemos todo al estado de etapa con el git add dot, para que podamos ver un montón de advertencias aquí. A veces está totalmente bien. Git asegura que nuestro proyecto sea multiplataforma entre diferentes sistemas que tienen diferentes codificaciones, por lo que realmente no necesitamos preocuparnos por eso. Después de eso, hacemos commit todos estos archivos por etapas con el primer mensaje de commit y si escribimos git log, vemos que tenemos primero commit aquí. Impresionante. Ahora, necesitamos subir ese proyecto de Git a GitHub. Lo que vamos a hacer, vamos a ir aquí a GitHub. Vamos a hacer click en Nuevo repositorio aquí. Nombre del repositorio, nos vamos a quedar con TicTactoe-game. Voy a elegir este repositorio para que sea público. Voy a hacerlo público más adelante una vez que terminemos eso, no necesitamos ningún archivo Léame inicializado con el nuevo repositorio porque vamos a crearlo nosotros mismos más adelante, o tal vez podamos hacerlo ahora mismo así que voy a crear un nuevo archivo llamado README.md, y dentro, voy a usar la sintaxis de Markdown. Esto es sintaxis de documentos, así que solo voy a agregar hashtags aquí. No pienses demasiado en eso. Vamos a llamarlo juego de Tic Tac Toe. Lo guardo y como es un archivo nuevo, nuevamente necesitamos agregar otro commit. Agregado, README.md. Perfecto. Ahora tenemos dos commits. Genial. No necesitamos ReadMe, no necesitamos a Gitignore porque ya tenemos Gitignore auto add it by vite. No necesitamos ninguna licencia. Doy clic en Crear Repositorio. Genial. Aquí dentro de la configuración ahora puedo configurar y de hecho puedo asociar mi repositorio recién creado en GitHub con mi repositorio local en mi computadora. Podemos seguir el aviso aquí. Si estamos creando un repositorio completamente nuevo, si no tenemos ningún archivo, pero ese no es el caso. Tenemos que elegir empujar un repositorio existente en primera línea común. Voy a copiar línea por línea aquí. Git remoto en origen. Una vez que haga eso, después de eso, puedo escribir git remote-v y voy a ver eso bajo origen alias, tengo este repositorio y si copio ese enlace y si abro en una nueva pestaña, me llevará hasta aquí, lo que significa que bien el enlace es correcto. Entonces nos sugiere escribir git branch-m main. No creo que vayamos a hacer eso. El problema con GitHub y Git Community es que no pueden decidir cuál es el mejor nombre para el para la rama principal predeterminada bien por lo general se llama master. Actualmente estamos en la rama maestra, pero la gente quiere que sea bastante sencilla. En lugar de maestro, algunas personas quieren ver principal. Nos vamos a quedar con el Maestro. Esto no es gran cosa después de todo. Qué vamos a hacer ya que ahora estamos asociados el proyecto con el repositorio remoto, que va a subirlo a GitHub escribiendo git push origin master. Origen es el alias que apunta al repositorio y master es el nombre de la rama objetivo en el repositorio donde vamos a empujar nuestro código actual. Yo hago ese comando. Puedes ver que algo pasó y si voy a refrescar la página aquí, voy a ver todos los proyectos aquí y el archivo Léame que hemos creado. Algo así. Felicidades a todos. Creamos y configuramos los proyectos de Tic Tac Toe. Nos vemos en el siguiente video. Por fin vamos a empezar a crear la app, y podremos ver cuáles son los componentes. Adiós. 42. 3 extensiones de Eslint y de primera clase: Oye, aquí tienes solo un recordatorio rápido sobre ESlint y Prettier. Ya que queremos asegurarnos de que estas herramientas estén integradas en nuestro Código VS y veamos todo en tiempo real, vemos los aspectos más destacados y formamos un desfiles cuando los guardamos, necesitamos asegurarnos de que las extensiones estén instaladas. Vaya a la parada Extensión aquí, y asegúrese de tener extensión del formateador de código Prettier instalada la extensión del formateador de código Prettier aquí, así como la extensión ESlint. extensión ESlint se asegurará de resaltar cualquier problema de ESlint, por lo que las advertencias, o errores que tengamos en el código, la extensión se encargará de eso. extensión más bonita se asegurará de que los archivos estén formateados contra el conflicto cuando estén seguros. No obstante, para la configuración de Prettier, necesitamos un poco más de configuración, para eso, hay que ir a ajustes JSON en VS Code. Abrir configuración de usuario JSON, y aquí dentro queremos asegurarnos que tenemos formato editor en save true, así como editor default formatter y JavaScript, editor default formatter. Todo eso se describe dentro de la página Extensiones. Simplemente abre esa página directamente en código VS, simplemente desplázate, copia eso así como copia el formato del editor y guárdala y ponla dentro tu configuración JSON, así como así. Después de eso, una vez que vayas a guardar los archivos, serán autoformativos. Para la extensión ESlint, no necesitamos ninguna configuración, simplemente funcionará. Nos vemos. 43. 04 Qué son los componentes y los accesorios de React: Oigan a todos, por fin averiguaremos qué tenemos dentro de la carpeta fuente. Primero veamos cómo Vite resuelve todo a la carpeta fuente. Si voy a ejecutar npm run dev, entonces Vite sirve al servidor dev y tenemos esto. Todo eso se crea y define dentro de la fuente. Pero, ¿cómo Vite realmente resuelve esto? Si miramos dentro de package.json y miraremos dentro del script dev, el script dev, lo que realmente hace, simplemente llama al comando Vite. Sin embargo, un argumento opcional al comando Vite es path to index.html, que sirve como entrada para que Vite entienda que, oye, este es nuestro punto de entrada. Index.html que tenemos aquí es la entrada, y por defecto, cuando se llama a Vite sin ningún argumento, busca index.html dentro de la carpeta actual, lo cual es correcto en nuestro caso. Dentro de index.html, tenemos marcado simple, así que Vite da como resultado ese index.html tan pronto como se inicia el comando, y ve que, bien, dentro del index.html, tenemos script que apunta a la fuente main.jsx. Source main.jsx es el punto de entrada para la aplicación React, mientras que index.html es el punto a la propia aplicación. Bueno, en una aplicación en realidad puedes tener múltiples aplicaciones de React, pero eso rara vez se ve. Tenemos script que apunta a main.jsx. Tenemos dev con ID establecido en root, y tenemos bastante ataques por defecto met aquí. De hecho podemos cambiarlo y llamarlo Tic Tac Toe. Una vez que lo guardo, se puede ver en el terminal se cambió a página para carga. Si vuelvo, se cargó automáticamente para mí. Yo no presioné nada y se cambió el título. Bastante increíble, ¿no? Si miramos dentro, fuente main.jsx. Aquí, finalmente llegamos a conocer a React. Tenemos algunas cosas importadas de React, y react-dom/client. Esta importación React de React, antes de React 17 se requería en cada archivo donde escribas código React. No obstante, a partir de React 18, esto es innecesario. Puede omitir la importación en React. Pero en nuestro caso, ya que usamos el espacio de nombres React para usar el modo estricto, todavía necesitamos importarlo solo aquí, pero en todos los demás archivos, no necesitamos escribir import React desde React. Esto fue necesario nuevamente solo antes de React 17. Dentro de eslintrc, tenemos plugin jsx-runtime para configurar eslint para entender que estamos usando React 18, por favor no nos digas que necesitamos importar React desde React. Eslint sabe de eso. Importamos ReactDom y en el objeto ReactDom, llamamos CreateRoot. Para el método CreateRoot, pasamos document get element by ID root. Tomamos elemento de index.html, que es solo un elemento vacío, y este elemento vacío se llama el punto de montaje. Este es el elemento justo vacío. Puede ser cualquier elemento HTML válido que deba estar presente dentro de HTML. Servirá como el recipiente para la aplicación React. Para el árbol de componentes. Creamos root a partir de ese elemento HTML. Lo obtenemos de nuevo desde index.html, los IDs deben coincidir si voy a escribir algo diferente que no coincida con root definir un index.html. No se creará nada en la página. Bueno, esto es obvio. Genial. Lo volvemos a enraizar y seguro que todo funciona. Una vez que tenemos el objeto root, en el objeto root, llamamos al método render. Al método render, tenemos que pasar el árbol de componentes que queremos que esté presente en la página. Bueno para renderizar método, básicamente pasamos nuestra aplicación React, nuestros componentes React. El componente App casi siempre representa los componentes principales dentro de la app React. Es casi siempre, estoy bastante seguro, se llama solo App. React StrictMode, es algo que recientemente se le presentó a React. Viene también como un componente, pero lo que hace, solo hace algunas cosas que nos avisarán sobre posibles problemas, o errores que podríamos tener en la app React. Simplemente lo guardamos así. Aquí no cambiamos nada. Lo que ves aquí es nuestro árbol de componentes, así como así. Todos los componentes siempre comienzan con una letra mayúscula. No verá un solo componente que comience con minúscula. Esto es imposible. La primera regla de oro es que los componentes siempre están en mayúscula. Siempre, pase lo que pase. Tenemos el modo React StrictMode y el componente App, y este es nuestro árbol de componentes. Ahora, finalmente echemos un vistazo dentro del componente App. Dentro del componente App, oh Dios mío, ya tenemos algo. Si pasamos el cursor podemos ver cualquier error de eslint que proviene de react/jsx-no target blank rule. Bueno, eso está bien no vamos a hacer nada al respecto de eso solo vamos a quitar ese marcado de todos modos así que realmente no nos importa. Eso es bueno. Ese eslint nos dice que esto no es seguro para mantener las etiquetas Anchor sin atributos específicos. Perfecto. Simplemente no lo tocamos entonces. Este es un componente. La función App que ves aquí es un componente se llama App, entonces es un componente App y tenemos algunas cosas ya creadas aquí pero vamos a eliminarlas no las necesitamos. Voy a quitar eso, voy a quitar eso algo que dijiste del que no sabemos nada, React logo, App.css. A lo mejor podamos mantener App.css. Entonces podemos quitar el resto. En su lugar, podemos simplemente escribir hola, eliminar el nombre de la clase en absoluto. Tenemos un solo div, hola y close div, lo guardamos. Entonces vamos a eliminar la carpeta de activos. No lo necesitamos. Vamos a eliminar index.css. No lo necesitamos dentro de main.jsx. Vamos a eliminar la referencia a index.css ya que acabamos de eliminar ese archivo. Solo tenemos main.jsx, que importa el componente App, y dentro del componente App tenemos App.css. Genial. Un componente es solo una función que devuelve el marcado JSX. Lo que ves aquí es HTML, pero en realidad, bajo el capó se traduce a JavaScript. Todo lo que escribes aquí es JavaScript. Este marcado HTML aquí se llama JSX. Si no me equivoco y si lo recuerdo correctamente, es la combinación de JavaScript y XML, no estoy seguro de eso, pero de todos modos, este marcado se llama JSX. Si puedes ver, también tenemos la extensión.jsx. Podríamos haber usado la extensión just.js en lugar de jsx, pero la cosa es, ya que Vite es una herramienta front-end y también de alguna manera necesita detectar dónde exactamente tenemos el marcado React y dónde exactamente tenemos JavaScript regular. Requiere que nombremos todos nuestros componentes, o todos nuestros archivos donde tenemos marcado jsx wit.jsx extensión. Es por eso que ves main.jsx porque tenemos marcado JSX dentro de una app.jsx porque bueno este es un componente y definitivamente va a tener marcado JSX dentro. Nuevamente, un componente es solo una función simple que devuelve el marcado JSX, que parece HTML y bajo el capó se traduce a JavaScript. Podemos escribir cualquier HTML válido aquí. Si voy a escribir span tag, o h1 tag y llamarlo título entonces lo guardo, luego vuelvo, puedes ver que se ha reflejado aquí. Genial. Si voy a inspeccionar el marcado dentro del navegador, veo div id root, que de nuevo es nuestro punto de montaje para la aplicación definida dentro de index.html, y luego nuestra aplicación React se monta dentro del div, tal como se ve aquí. El marcado que definimos dentro de App component, div y title. Tan simple como eso. Ahora, también tenemos App.css aquí. Como ya notaste, para crear algunos estilos, o para darle estilo a una aplicación React, hace lo suficiente para crear un archivo CSS. Escribe CSS regular aquí, luego impórtalo dentro del componente. Así como así. Nada especial. Para asignar clases a elementos que tenemos dentro del markup necesitamos pasar atributo className a elements, no class sino className, pues recuerda que aunque este es el marcado HTML, se traduce a JavaScript bajo el capó. Significa que es procesado por React. En React, en lugar de pasar solo class, pasamos atributo className. Dentro del atributo className especificamos qué nombres de clase debe tener este elemento. Pasemos algo al azar. Pasemos la clase de tarjeta que se define dentro de CSS. Sólo vamos a hacer tarjeta, y luego guardarla. Si inspeccionamos, puedes ver ahora este div tiene clase de tarjeta con el CSS que se define aquí. Funciona así como así. no tiene nada de especial. Entonces sigamos adelante y creamos nuestros propios componentes. Dentro de source, vamos a crear una nueva carpeta llamada Components. Dentro de esa carpeta de componentes, vamos a crear un nuevo archivo, que vamos a nombrar Square.jsx. Aquí, vamos a crear una nueva función llamada square, y por ahora, va a devolver un div simple, hola. De ese archivo vamos a exportar cuadrado predeterminado, así como así. Ahora, acabamos de crear como componente cuadrado y queremos usarlo dentro de otro componente. En la reacción, se utilizan componentes dentro de otros componentes. Todo es un componente en reaccionar. Volvemos a la app JSX, y aquí vamos a importar cuadrado de componentes cuadrados, y luego dentro de aquí, solo vamos a escribir cuadrado y autocierre. Puedes ver cuando quieres usar componentes, los usas como elementos HTML. No obstante, de nuevo, la primera regla, siempre están en mayúscula. Básicamente componentes, son muy similares a las etiquetas HTML reutilizables, pero son componentes con su propia lógica definida en su interior. Si volvemos a ir a la app, puedes ver hola se está agregando aquí. Este es nuestro componente y el mark up es dentro del cuadrado es sobre hola. Si lo cambio a otra cosa, se reflejará aquí. Tan simple como eso. Ahora bien, ya sabes que cualquier atributo HTML puede recibir algunos argumentos para pasar alguna información, para pasar algunos datos a ese elemento. Por ejemplo, tenemos etiqueta de imagen. La etiqueta de imagen espera dos atributos, source y alt, en caso de que la imagen no se cargue. Sigamos adelante e intentemos especificar ese vite.svg como fuente para esa etiqueta de imagen. Ya que vite.svg se sirve bajo root, porque recuerda esa carpeta pública mapeada a segmentos URL, solo voy a especificar vite.svg, guardarla, y verás que funciona. Nos apunta a vite.svg, que es correcto. Los componentes también tienen atributos, pero todos estos atributos están completamente definidos por nosotros dentro de la definición del componente. Estos atributos se llaman props. Al igual que los elementos HTML tienen atributos, los componentes tienen propts para pasar algunos datos dentro de ese componente. Contamos con componente cuadrado. Si abrimos componente cuadrado, esto es solo datos estáticos aquí , solo muestra hola. ¿Y si quisiera mostrar el componente cuadrado y cambiar lo que se va a mostrar en su interior? Digamos que podemos duplicar componentes cuadrados, así como así, y tendremos múltiples componentes cuadrados, por ejemplo hola, hola, hola, hola. Pero, ¿y si necesitan alguna información dinámica en tamaño, algunos datos dinámicos como hola 1, hola 2, 3, 4, etc.? Para ello, tenemos que pasar apoyos. Props es solo el objeto que recibe el componente como primer argumento. Así como así. Si vamos a cancelar los apoyos de registro, y si abrimos la consola, y si voy a actualizar la página, verás múltiples registros de consola aquí. ¿Por qué tenemos múltiples? Porque ejecutamos el componente cuadrado varias veces. Para cada componente, se imprime el registro de la consola. este momento es un objeto vacío. No es indefinido, es un objeto vacío. Lo que pase al componente como prop, aparecerá debajo del objeto props aquí. Así como pasamos atributos a elementos, pasamos props a componentes. Digamos a este último componente cuadrado, vamos a pasar prop. Nuevamente, va a ser totalmente personalizado. Vamos a llamarlo valor. Vamos a pasar la Cadena 5. Volvemos aquí, refresco la página, dentro de la consola del navegador, podemos ver valor 5. Se ha cancelado bloqueado dos veces. Bueno, eso está mal, que se ha cancelado dos veces. Creo que la razón podría ser el modo estricto aquí. Déjame intentarlo muy rápido y eliminarlo. Si me refresco, ahora solo tengo un registro de consola. Eso es raro. El caso es que cuando el componente se actualiza, se ha actualizado por dentro. Cuando el componente se actualiza, JavaScript se vuelve a ejecutar y la lógica dentro del componente se ejecuta de nuevo. Por alguna razón, el componente óseo estricto obliga al componente a volver a renderizar JavaScript dentro del componente para volver a ejecutar y vemos un registro de consola para el mismo componente varias veces. Mantengámoslo así. Tenemos valor 5. Para el resto de componentes que tenemos aquí, sigue siendo un objeto vacío porque bueno, no pasamos nada dentro de él, sino para el último componente, pasamos valor 5, pasamos el prop. Genial. Creo que está claro que como no pasamos nada aquí, para estos componentes, es un objeto vacío, pero aquí pasamos valor 5. Ahora, dentro del objeto props, tenemos valor clave con valor string 5. Dentro de la definición de componente cuadrado, ahora podemos usar ese valor aquí. Al ser un objeto, está disponible bajo props.value. Vamos explícitamente a la consola log props.value y refresquemos la página, vemos undefined y cinco, porque nuevamente, para todos estos componentes que no pasan valor prop, value será undefined, pero para el último componente el valor será string 5. Genial. Ahora, dentro del marcado JSX, podemos mostrar expresiones JavaScript. Ahora mismo si escribo algo o si quisiera, veamos, mostrar ese valor de props como un texto dentro de mi componente en lugar de hola, así que se siente dinámico. Probablemente escribiría props.value. Pero, ¿funcionará? Vamos a tratar de ver. Si abro mi página, veo props.value como un texto porque no funciona. Es sólo una cuerda. Pero si queremos evaluar props.value como JavaScript dentro de nuestro marcado JSX, tenemos que usar llaves. Así como así. Dentro de los corchetes podemos introducir cualquier JavaScript válido y éste será evaluado y eventualmente interpolado en el marcado que escribamos. Si volvemos aquí, sólo vemos cinco. Pero, ¿dónde están el resto de los componentes? Si inspeccionamos el marcado, simplemente están vacíos. Debido a que están vacíos, no ocupan ningún espacio en la página. Pero el último componente, que ha sido renderizado, tiene cinco desplegados en su interior. Exactamente, ¿qué pasamos aquí como utilería? Si seguimos adelante y pasamos otras cadenas aquí como hola, el valor va a ser mi nombre. El valor va a ser algo. Vamos a quitar este y lo guardamos y volvemos. Se puede ver que todo se muestra igual que nosotros pasamos. De esta manera, usando props, podemos pasar la información al componente. Aquí hay un consejo rápido, ya que siempre sabemos que el primer argumento a la función componente será el objeto props. Podemos usar destructuring en lugar de escribir props.something todo el tiempo. Lo que voy a hacer, sólo voy a aplicar desestructuración directamente dentro de los argumentos de función. Ya que desestructuramos el valor de key del objeto props, sólo voy a agarrarlo así. Ahora se ve mucho más limpio y no necesitamos escribir propas.algo. De esta manera podemos pasar tantos apoyos como queramos dentro del componente. También aparte de ese [RUIDO], podemos pasar otro prop predefinido especial llamado niños. Niños es algo que se pasa dentro del componente como su propio marcado. Lo que quiero decir con eso es que si miras dentro de componente cuadrado ahora mismo. Es autocerrado. Es y por dentro pasamos diferentes apoyos. No obstante, también podemos escribirlo así. Cuadrado luego ciérralo en una línea separada. Entonces dentro podemos pasar algo así como div, hola ahí. A lo mejor otro título dice, este es el título. En este caso, este componente ya no es autocerrado. Estos permanecen autocerrados pero esto es como un componente regular no autocerrado y por dentro pasamos el marcado. Todo lo que pasamos dentro del componente de esta manera. Este marcado aquí, hola, este es el título. Estará disponible dentro de la definición de componente. Como apuntalan los niños, es un nombre clave reservado específicamente para eso. Si voy a seguir adelante aquí y consola de registro niños. Si volvemos a abrir consola, se puede ver que para el resto de los componentes donde no pasamos niños, es indefinido. Pero para el primer componente, si lo abres, aquí hay algunas cosas raras. Este es el JavaScript que realmente se está utilizando bajo el capó detrás del marcado JSX. Podemos tomar a los niños y renderizarlo. Podemos usarlo como slot. En otras bibliotecas, se llama slots. En el reactor, se llama niños. Pasas algún marcado dentro del componente y luego el componente dentro usándolo como hijos puede decidir dónde exactamente se renderizará. Dentro de este marcado, voy a escribir, los niños se renderizarán a continuación. Dentro del div, voy a interpolar niños porque de nuevo, si solo voy a pasar niños así, se considerará como una cadena hijos. Pero como children es una variable dentro de esta función, necesitamos interpolarla en el marcado JSX. Así como así. Ahora bien, si miramos dentro de nuestro HTML, tenemos cosas diferentes aquí. Para el primer componente, tenemos algo entonces tenemos hijos se renderizarán a continuación. Entonces tenemos div, que es hijos que pasamos al componente dentro de él. Pasamos hola ahí y este es el título. Esto es exactamente lo que vemos aquí. Este HTTP de HTML se interpola dentro del componente cuadrado. Está disponible como un niño. Se ha expuesto como utilería infantil. Otra vez, no se puede cambiar. Siempre se queda así. Es el nombre de prop reservado niños. Nunca cambia y siempre se quedará así pase lo que pase. Para el resto de nuestros componentes, no se renderizará nada. Verás que será un div vacío. Siempre que intentes mostrar, o digamos lo que intentes e interpolar null indefinido. Dentro del marcado JSX, no se renderizará porque bien se considera como un valor vacío, no se mostrará. Si voy a seguir adelante y solo tratar de mostrar null por dentro, no habrá nada ahí. Será sólo un div vacío. Lo mismo ocurre con undefined y con false. Todos los valores falsos no serán evaluados en algo. Simplemente serán omitidos. Así como así, podemos crear componentes. Genial, ¿no? En el siguiente video, vamos a crear un componente de placa. Vamos a crear un componente de raíz cuadrada y vamos a tratar de abordar algunas funcionalidades en la aplicación. Nos vemos ahí. 44. Cómo aplicar los estilos CSS: Hola ahí. Sigamos construyendo la aplicación. última vez discutimos los componentes, cómo podemos crear componentes, cómo podemos pasar a los niños, cuáles son los componentes, cómo podemos mostrarlos, etc. Ahora, comencemos y demos vida a nuestra app. Lo que vamos a hacer ahora, vamos a crear el marcado que se utilizará en nuestro juego. Volvemos a la app JSX. Vamos a quitar todo de aquí. Vamos a quitar ese nombre de clase por ahora, vamos a quitar import of square, y vamos a seguir adelante y crear un nuevo componente dentro de la carpeta components, que vamos a nombrar board JSX. Representará a nuestra junta directiva y pondremos toda la lógica relevante dentro de ese componente. De nuevo, voy a crear la función word. Dentro por ahora, vamos a mostrar div como hola, y desde ese archivo, vamos a explorar ese componente de placa. Luego dentro de la aplicación JSX, vamos a importar placa de placa de componentes. Entonces vamos a correr por ello aquí como un componente de cierre automático. Ahora volvemos al navegador, vemos hola, que viene del componente de placa. Ahora, dentro del tablero, vamos a definir el marcador inicial. Vamos a darle un tablero de nombres de clase. Aún no se trata en ningún lado, ni en archivo CSS, ni en ningún lado. Vamos a etiquetarlo con el tablero de nombres de clase. En el interior, vamos a crear filas porque si recuerdas cómo nuestro juego va a ser tic-tac-toe y tiene que ser eso, digamos estructura tipo fila dentro de HTML. Vamos a crear tres filas. Vamos a tener tres divs. Cada div tendrá tablero de nombre de clase, fila, y dentro de cada fila tendremos tres cuadrados. Será básicamente solo una grilla, tres por tres. Dentro de cada fila, vamos a usar el componente cuadrado. Vamos a importar cuadrado de cuadrado. Por cierto, esto./ representa carpeta actual donde esta placa de archivos JSX en este caso la ubicó. Si escribo. /, representa esta carpeta de componentes. Significa que lo que escriba más adelante se resolverá desde esa carpeta. Importo default, export, este, un nombre, su placa interior cuadrada, y todo eso se importa de este archivo cuadrado aquí. Dentro de cada fila, voy a correr la plaza tres veces, así como así. Eventualmente, se ve algo así. Si actualizo, todavía tenemos marcado del último video, pero en realidad vamos a eliminarlo, y usemos solo el prop de valor. Pero aún tenemos que pasarla dentro de cada instancia de raíz cuadrada que ejecutemos. Voy a pasar el valor cero aquí. El valor va a ser uno. Por cierto, en el último video, paso el valor como cadena. Así como así. Se puede pasar una cadena sin ningún tipo de corchetes pero si intentas pasar cinco y quieres que sea un número en lugar de una cadena, tendrás que usar corchetes. Nuevamente, los corchetes en cualquier parte del marcado JSX le permiten usar cualquier expresión JavaScript válida dentro. Cero como número es una expresión JavaScript, y podemos pasarla como un prop de valor, y será solo el número 0 o el número uno. Si quieres que sea una cadena, simplemente puedes escribirla así y será una cadena. Una expresión que se evalúa en cadena. Pero si es una cuerda, puedes pasarla así. Si pasamos números, tenemos que usar corchetes. Valor 0, valor así. Déjame copiarlo rápidamente por todas partes y hacerlo así hasta las ocho. Podría tener una pregunta por qué parte de cero. Bueno, no te lo dije, pero vamos a tocarlo muy pronto cómo vamos a representar a la junta directiva, cómo vamos a manejar eso, y necesitamos representar a los cuadrados de alguna manera. Podemos representarlos por índices. Un aumento en la programación arranca desde cero. Ya que vamos a usar un raise para gestionar un juego de mesa, los índices comenzarán desde cero. Es por eso que por ahora damos a nuestros índices cuadrados y ellos parten de cero porque estos van a ser elementos array. Volvemos aquí y vemos esto. Bueno, si inspeccionamos HTML, esto es exactamente lo que escribimos. Ahora, hagámoslo un poco más elegante. Volvemos al cuadrado JSX y se podrá hacer clic en nuestras plazas. En lugar de div, podemos renderizar un botón con type button, y vamos a darle un nombre de clase de square, que vamos a definir en un momento. Ahora bien, se ve así, bueno, y no está tan mal, ¿no? Pero aquí vamos a aplicar nuestros propios estilos. Si volvemos a invitado aquí, exactamente esta página donde puedes tener toda la información proporcionada para ti si te desplazas aquí tenemos estilos.scss aquí. Bueno, SCSS es para archivos Sass. Sass es un preprocesador CSS que vamos a usar. ¿Qué es un preprocesador CSS? Básicamente es solo un lenguaje construido sobre CSS y tiene su propio conjunto de características. Eventualmente, cuando vamos a escribir esto algo punto SCSS, se compilará a algo punto CSS, y funcionará igual que un CSS normal. Pero tiene desventaja de sus propias características, por ejemplo, como anidar. En CSS regular, no se nos permite anidar selectores. Tenemos que escribirlos en línea, como rapero de historia de puntos luego espacio luego historia de puntos. En SASS, todo se puede anidar. Podemos tener variables y cosas diferentes. Puedes buscar en Google SASS, Hojas de estilo sintácticamente impresionantes. Puedes abrirlo, hacer clic en “Aprender SASS”, y pasar por esta página muy rápidamente. No es demasiado largo, es bastante corto, y cubre, y te muestra todas las capacidades de SASS, por ejemplo, variables. Al usar el signo de dólar, puedes tener variables en CSS. Bastante genial, y puedes tener anidación. Puedes ver si escribes este marcado SASS, se traduce en ese CSS, así que vamos a usar SASS. Para ello, necesitamos instruir a Vite. Tenemos que decirle a Vite que en lugar de CSS regular, también nos gustaría usar SASS, y Vite tiene soporte para SASS. Si volvemos a documentación de Vite y si hacemos clic en “Buscar” y buscamos SASS aquí y abrimos el primer enlace, tenemos la sección de preprocesador CSS, y Vite sí brinda soporte integrado para archivos SCSS. Entonces para ello, habilitamos el soporte que necesitamos para instalar el compilador SASS. compilador SASS está disponible como paquete npm llamado SASS. Puedes ver este comando aquí. Si escribo npm SASS, y pondré el primer enlace. Este es el paquete que nos da la posibilidad de compilar SASS en archivos CSS. Por lo que solo necesitamos instalarlo y Vite se encargará del proceso de transpilación en realidad. Yo solo voy a copiar ese comando, abrir terminal, detener el comando presionando Control C, así nuestro servidor diff se rompe, entonces voy a instalar SASS. Dash D es básicamente lo mismo que dash, dash save-dev. Sólo un atajo. Instalará SASS como una dependencia de desarrollador, y si miras dentro del paquete JSON ahora verás SASS bajo dependencias de desarrollo. Genial. Ahora necesitamos primero ejecutar npm run dev para volver a iniciar el servidor y podemos seguir adelante y realmente crear archivos SASS. Dentro de la carpeta fuente, voy a crear estilos.SCSS, ¿y qué voy a hacer? Yo solo voy a seguir adelante con el invitado y solo voy a copiar todo desde aquí y ponerlo dentro de estilo CSS. No necesitas entrar demasiado en detalles aquí. Este es el marcado final que vamos a tener en nuestra aplicación porque estos videos no son sobre CSS. Si necesitas cambiar algo o si quieres traer algo nuevo aquí, eres libre de hacerlo. Por favor, adelante, cámbialo , juega con él, vamos a usar este marcado. Dentro de estos estilos, tenemos cláusula de tablero definida. Luego dentro de la tabla, anidamos clase de fila de tabla, y luego dentro de la clase de fila de tabla, anidamos clase cuadrada. Bajo el capó, si vuelve a abrir SASS, anidamiento compila en estos selectores aquí, así que básicamente tablero, y dentro de la fila del tablero se compilará a algo así, y el cuadrado se compilará a algo así. Esto es muy conveniente, creo. Tenemos clases de tablero y tablero fila y raíz cuadrada, así que lo que vamos a hacer, vamos a importar el archivo punto SASS a nuestra aplicación. Ya no vamos a necesitar app dot CSS, así que simplemente la eliminamos. Después vamos al componente app, y en lugar de importar app CSS, vamos a importar estilos dot CSS, y va a funcionar. Ahora tenemos clases de tablero, fila de tablas y cuadrados aquí. Vamos a cuadrado, asignamos clase cuadrada, que va a resolver a ese CSS. Dentro de tablero, tenemos tablero, y tabla fila, que va a resolver a estas clases. Ahora, volvemos a la app, y boom, ya ves, se ve así. Sin embargo, se puede ver que algo anda mal o algo anda mal, en realidad es nuestro marcado así que necesitamos cambiarlo un poco. Si vamos a la aplicación aquí, vamos a dar el componente que envuelve todo nuestro marcado. vamos a dar la clase de app Aquí le vamos a dar la clase de app que definimos así. Así podemos darle un nombre de clase de App. Lo que va a hacer, nos dará el flex-box básico con la configuración de la columna. Si volvemos aquí, ya pueden ver que tenemos nuestra parrilla final, que se ve así . Bastante genial. Eso es todo sobre el estilo. Ahora ya conoces un truco más, cómo puedes darle estilo a tu app usando SASS. Si ya conoces algún otro preprocesador como Less, también puedes seguir adelante, y leer en la documentación de Vite cómo puedes enchufarlo o stylus. SASS es muy popular en todas las soluciones comunes en aplicaciones. Creo que es bastante genial y muy conveniente. Ahora en realidad empezamos con interactividad pero terminamos con estilos. Creo que por ahora, vamos a terminar con estilos, y de hecho en el siguiente video, vamos a hablar de interactividad. Creo que no le importa. Como ya hemos hecho mucho trabajo aquí, presentamos SASS, y creamos componentes de placa y cuadrados y tenemos nuestro bonito marcado aquí, en realidad vamos a comprometer todo. ¿Qué tenemos aquí? Eliminamos la app CSS, modificamos el paquete JSON, borramos un par de archivos. Entonces sólo vamos a seguir adelante y sumar todo al estado escénico. Voy a escribir “Git add dot” que todo aparezca bajo cambios por etapas y solo vamos a comprometerlo todo, y vamos a nombrar el commit como SASS instalado, y creamos componentes de tablero y cuadrado, bare-bones, algo así. Mensaje de compromiso muy raro, pero creo que servirá. Nos comprometemos todo. Para que todo aparezca en GitHub, necesitamos desplegarlo porque de nuevo, aquí tenemos que recordar que si cometes cambios, estos permanecen localmente en tu PC. Si vuelves a GitHub ahora mismo, no se cambiará nada porque todos tus cambios viven localmente, por lo que necesitas implementar en el alojamiento de GitHub cada vez que introduzcas nuevos cambios localmente, así que git push origin master. Yo hago eso, y me refresco, y ahora tenemos todo bien. Impresionante. Como prometí, siguiente video va a ser sobre interactividad, así que nos vemos ahí. 45. 06 Reaccionarás el Estado con el gancho de useState reaccionarás los eventos: Hola otra vez. En este video como se prometió, vamos a hablar de interactividad. lo que me refiero con interactividad. interactividad es algo que sucede cuando el usuario interactúa con la página web. Cuando hago clic en el botón, algo debe pasar. produce un evento y algo se actualiza en la pantalla. A esto se le llama interactividad. Ahora llegaríamos a ver cómo podemos manejar eso en React. En JavaScript crudo, en JavaScript simple sin ningún React, tienes un archivo JavaScript. Suele agarrar elementos con DOM API, algo así como document get element by ID. Agarras algún botón, luego escribes button.add event listener, y ese oyente, adjuntas alguna función que se ejecutará al hacer clic en el botón. Pero en reaccionar, es más o menos lo mismo. Se ve diferente, pero es casi lo mismo así que vamos a abrir JSX aquí. Sólo por un ejemplo, vamos a crear un botón y vamos a jugar con él. Por ahora me quité la tabla. ¿Dónde lo hizo el componente por ahora? No lo necesitamos. Tenemos editor eslint aquí, no hay variables no utilizadas. Produce un error en lugar de adjudicar, realidad vamos a convertirlo en ejecución por lo que es menos variables. En eslint, solo voy a no usar vars y quería producir una advertencia así que ahora va a producir una advertencia así que ahora va ser naranja en vez de rojo y no nos va a molestar mucho. Entonces voy a seguir adelante y crear un elemento botón y lo voy a llamar, camarilla, por favor. Ahora bien, lo que quiero hacer en ese botón, a lo mejor quiero actualizar algo o quiero cancelar log algo, y ver algún valor dentro de la consola del navegador. ¿Cómo podemos hacer eso? A cada elemento, a cada etiqueta HTML que se use dentro del marcado JSX, puede pasar un controlador de eventos para que tengamos eventos, evento click, evento mouse, diferentes tipos de eventos y siempre que diga controlador de eventos, me refiero a la función que se ejecutará cuando ocurra este evento. Por ejemplo, tomemos este elemento de botón. Si voy a intentar pasar atributo que comienza con on desde la inteligencia, puedo ver una lista bastante larga de diferentes eventos disponibles para ese elemento. onsubmit, onResize, onMouse, over onKeyUp, etc. Ahora mismo estamos interesados en el evento onClick así que solo voy a hacer onClick y para ese atributo en elemento button, necesito pasar un controlador de eventos, una función que se ejecutará cuando ocurra el click así que solo voy a pasar una función vacía aquí y dentro de esa función, voy a hacer console.log, “Hola” así que si lo guardo, vuelvo a la app. Ahora cada vez que haga clic en el botón, verá hola se imprime cada vez que haga clic en él para que realmente funcione. En JavaScript simple, todos los manejadores de eventos siempre reciben el objeto de evento como el primer argumento por lo que esta función aquí en JavaScript simple siempre recibe un objeto de evento que representa el evento. Intentemos cancelar el registro de este objeto aquí. A ver si hay alguna diferencia. Entonces, si hago clic en onbutton aquí, puedo ver hola y luego veo el objeto de evento así que este objeto de evento es un envoltorio alrededor del objeto de evento nativo que normalmente obtendrías con JavaScript simple pero en react, esto es algo llamado evento sintáctico por lo que básicamente es solo un wrapper alrededor evento nativo con las pocas propiedades react. Si lo inspeccionas, tienes un montón de propiedades diferentes aquí, así como tienes evento nativo al que puedes acceder con solo event.native event. De esta manera, si lo necesita, puede obtener el objeto de evento JavaScript nativo. Pero la mayoría de las veces tiene justo lo suficiente para referirse al evento sintético. La mayoría de las veces contiene la información que estás buscando en caso que necesites usarla así que en este caso no necesitamos ningún objeto de evento en absoluto. Estamos interesados en brindar algo de interactividad a la app así que ahora probémosla y veamos cómo podemos hacerlo. Digamos que tenemos un contador. Déjame seguir adelante y crear una variable. Vamos a llamarlo “Vamos a contrarrestar, que parte de uno”. Ahora lo que quiero hacer, solo quería mostrar ese contador aquí y cada vez que hago clic en el botón, me gustaría aumentar el valor uno, 2, 3, etc. dentro del manejador de eventos onClick, en realidad, intentemos mover esta función aquí a la app para que se vea más agradable. Se ve simplemente más atractivo y más fácil de leer así que solo podemos crear esa función aquí y podemos llamarla onbtnClick y solo voy a copiarla desde aquí, pegarla aquí y para el atributo onClick, voy a pasar en BTNClick. Así así así digamos dentro de ese manejador de eventos, me gustaría aumentar el contador aquí así que en lugar de registro de consola, tal vez vamos a mantenerlo. Sigamos adelante y digamos contador igual a contador más uno. Nada especial. Ahora, ¿ podemos ver que en realidad se ha incrementado? Vamos de cabeza y abajo. Vamos a mostrar el valor del contador así que voy a usar llaves para interpelar de nuevo el valor en solo seis porque tiene un contador variable. Yo lo guardo. Vuelvo aquí, veo uno. Simplemente lo tenemos inicialmente, genial. Si intento hacer clic en él, no pasa nada. Pero, ¿por qué es eso? El problema con este enfoque es que React no sigue exactamente las mismas reglas que JavaScript simple. Entonces, si estuvieras usando JavaScript simple y trataras de escribir una lógica muy similar, habría funcionado, pero no con React. En React, siempre que necesites un valor que cambie a lo largo de algún periodo de tiempo, después de que digamos que durante el periodo de interactividad acaba de devaluar los cambios, necesitas hacerlo como un estado. Entonces en React, un valor que cambia debe ser un estado. Apenas en un segundo, ya podemos crear nuestro primer estado. Pero antes de que vayamos a hacer eso, permítame explicarle rápidamente por qué esto no funciona. Voy a abrir la pintura y solo te escribo rápidamente cómo React maneja eso. En React, está el concepto de re-renders. Un re-render es básicamente cuando el componente está siendo repintado en la página web. Cuando usamos state, state siempre activa un componente para volver a renderizar, y el estado en el siguiente re-render se actualizará. Pero, si solo creamos variables así e intentamos actualizarlas, no va a hacer nada. La razón de eso es porque cuando solo intentamos mutar la variable así, no activará componente para volver a renderizar. Un ciclo de vida de un componente se basa en realidad en re-renders. Cuando actualizamos la página, el componente se está montando en la página. Significa que se está renderizando por primera vez. Entonces digamos que este cuadrado aquí representa un solo render. El componente se monta en la página, se ha renderizado, se ha mostrado. Ahora, por reglas de React, si quiero actualizar algo en la pantalla, si quería actualizar algo dentro de ese componente, necesito activar un re-render para eso. Aproximadamente en esta imagen se verá así. Este re-render se traducirá en un re-render diferente. Estos son marcos y React cambia sobre ellos. Entonces este es nuestro primer render. Digamos que actualizamos estado. Nuevamente estado será el valor que cambie a lo largo de algún periodo de tiempo. Estado ha sido actualizado, actualización de estado desencadena un re-render, y ahora tenemos un componente que se volvió a renderizar. Nuevamente, con variables, si las vamos a usar así así, no va a funcionar. El motivo de esa actualización de variables, esta línea número 9 no desencadena un re-render y esto es un problema. Nos quedamos en este primer fotograma e intentamos actualizar este contador más uno aquí, y esto no hace nada, no desencadena un re-render, lo que significa que necesitamos usar state para todos los valores que sabemos que serán cambiados en algún periodo de tiempo después de alguna interactividad. Cada re-render aquí, así que esto es primero re-render, segundo re-render, son oscilados entre sí, no saben nada el uno del otro. El primer re-render no sabe que habrá un segundo re-render, y así como el segundo re-render no sabe si hubo un primer re-render o un re-render anterior, son oscilados entre sí. Todo eso es gestionado internamente por el React, pero el punto principal aquí es que necesitamos saber que para poder actualizar algo, necesitamos activar un componente para volver a renderizar. Cada vez que un estado se actualiza, activa un componente para volver a renderizar. Ahora bien, si quisiéramos tener este contador actualizado y funcionar como se esperaba, desde React necesitaríamos explorar algo llamado UseState. En la parte superior, solo voy a importar UseState y aquí estoy usando named import from React. ¿Qué es UseState? En el React, hay un concepto de React Hooks. ¿Qué es un gancho? Hook es básicamente solo una función que nos permite manipular el ciclo de vida de los componentes. ¿Qué es el ciclo de vida de los componentes? ciclo de vida de un componente es solo un período de tiempo en el que algo está sucediendo dentro del componente. Se está montando, se ha actualizado, se está desmontando, está desmontando, por lo que este es el ciclo de vida de los componentes. Podemos usar React Hooks para manipular de alguna manera el ciclo de vida de ese componente. Por lo que UseState nos permite crear un valor que se cambiará a lo largo de un ciclo de vida de un componente. Cómo podemos usarlo. Dentro de nuestro componente, solo necesitamos llamar a UseState como una función. Nuevamente, todos los React Hooks son funciones. Por cierto, todos los React Hooks siempre comienzan con el prefijo de uso. Entonces esta es la convención en React. Siempre que veas usar algo, definitivamente es un React Hook. Lo llamamos como una función, y como primer argumento, tenemos que pasar el estado inicial. ¿Cuál será el valor predeterminado para ese estado? En nuestro caso, queríamos darle un valor inicial de uno, así que sólo vamos a pasar uno. Ahora, esta función UseState devuelve una matriz siempre. UseState siempre devuelve una matriz de exactamente dos elementos. Sigamos adelante y vamos a nombrarlo valor de retorno por ahora, y vamos a tratar de consola registrarlo, escribir directamente dentro del componente. A ver ¿qué tenemos aquí? Entonces refresco la página y aquí tengo justo como te dije, una matriz de exactamente dos elementos. El primer elemento será valor de estado en este momento en el re-render actual, y el segundo valor dentro de esa matriz será la función de actualización que necesitamos llamar para actualizar este estado. Déjame mostrarte a lo que me refiero. La mayoría de las veces verá que vamos a usar una redesestructuración porque sabemos que UseState siempre devuelve una matriz de exactamente dos elementos, por lo que podemos aplicar de manera segura una redesestructuración. El primer elemento va a ser nuestro estado y segundo, una función a la que necesitamos llamar para actualizar el estado. Estos se conocen como estado y la función de actualización del estado, y podemos nombrarlo como queramos. Nuestro estado va a ser llamado contador, y la función de actualización para establecer el estado vamos a llamarlo setCounter. Ahora voy a quitar este let counter es igual a 1 uno Voy a quitar este contador de línea contador más 1, realmente no lo necesitamos. Intentemos consolar nuestro mostrador. En realidad no necesitábamos cancelarlo log, ya lo tenemos aquí. Si la guardo, refresco la página, todavía tenemos una aquí. Este es nuestro estado inicial. Ahora, si queremos actualizar el estado, necesitamos llamar a la función de actualización de estado, setCounter. Dentro de entre clic y clic sucede, queremos aumentar el valor. Entonces, qué podemos hacer. Podemos llamar a setCounter, y por dentro solo necesitamos pasar un nuevo valor para este estado. Por ahora, pongamos un poco de valor estático. Digamos 10. Lo guardo, vuelvo al navegador, ahora hago clic en el botón, y ves que el valor se cambió a 10. Dentro de la consola importa que veas hola aquí. Lo que pasó es que al hacer clic en el botón, se llamó a SetCounter, se actualizó el estado de uno a 10. Entonces se llevó a cabo la re-renderizacion. Si volvemos a ese pequeño diagrama aquí, lo que pasó es que ese componente se renderizó en la página. Hacemos clic en el botón, actualizamos el estado, y esa actualización de estado activó el re-render. El segundo fotograma aquí representa nuestro re-render actual donde ahora state es 10. ¿Por qué vemos el registro de consola aquí? En realidad, vemos el registro de la consola aquí porque lo tenemos dentro de onBTNClick. Pero y si ponemos el registro de la consola aquí fuera de onBTNClick. Vamos a intentarlo de nuevo. Refresco la página. Primero vemos dos logs de consola, pero bueno, esto se espera porque como recuerdas, te dije en el video anterior sobre React StrictMode, fue intencional que renderizara el componente dos veces para atrapar errores, pero ese no es el punto, o tal vez ese sea el punto. Déjame simplemente eliminar React StrictMode por un segundo. Refresco la página. Vemos un registro de consola hola porque el componente se monta, la lógica dentro del componente se ejecuta, vemos el registro de la consola. Genial. Pero ahora, si hago clic en el botón, vemos que el valor se actualiza, el componente se renderiza y vemos hola segunda vez. Vemos eso porque de nuevo, en cada nuevo re-render, se está ejecutando de nuevo la lógica dentro del componente. Javascript se ejecuta de nuevo cuando el componente se vuelve a renderizar, por lo que el estado persiste porque el usEstate es la característica interna de React. Bueno, está totalmente gestionado en React por lo el valor que cambia a lo largo del periodo de tiempo es administrado por React. Se persiste. Todo está bien. Pero vemos el registro de consola aquí porque, bueno, esto es algo que traemos al componente y la lógica vuelve a correr, así que por eso la vemos por segunda vez. Si estamos a punto de actualizar el estado de nuevo cuando el componente próxima vez va a volver a renderizar, verá otro hola, etc. verá hola cada vez que el componente se vuelva a renderizar. Pero, ¿qué pasa si vuelvo a hacer clic en el botón? Ya ves, le hago clic una vez más y ya no vemos ningún hola. React es lo suficientemente inteligente como para detectar que el estado permanece igual, por lo que el valor permanece igual. React es lo suficientemente inteligente como para no actualizar componente todo el tiempo otra vez, otra vez. No ejecuta recálculos todo el tiempo si el valor de estado es el mismo. Sigamos adelante e intentemos y solo aumentemos el contador. Podemos hacer contador más 1, así como así. Ahora, si actualizo la página, hago clic en el botón, veo 2, veo hola, porque de nuevo componente se vuelve a renderizar. Vuelvo a hacer clic en el botón, y ahora el hola, vemos 3 y así sucesivamente y así sucesivamente. Sin embargo, este enfoque con estado de actualización así, cuando necesitamos establecer un nuevo valor para este estado y queremos calcular el nuevo valor de estado a partir del valor de estado actual, necesitamos usar un poco otro enfoque. En lugar de hacer un contador más 1, en realidad podemos pasar devolución de llamada alternativa a la función de actualización de estado. La función de actualización del estado puede recibir uno de dos argumentos. O bien un nuevo valor de estado, tal como viste, entonces 5, 10, nuevo valor que establecerá el escenario, o podemos pasar callback a esta función de actualización de estado, y dentro de esa devolución de llamada, primer argumento será value, que representa el estado actual. Digamos contador actual. Lo que sea que devolvamos de esa devolución de llamada se establecerá como el nuevo valor. A partir de esa devolución de llamada, ahora podemos devolver contador actual más 1. Será lo mismo y desde el punto de vista del usuario, no se cambiará nada, pero internamente, este es el enfoque correcto cuando se necesita calcular nuevo valor de estado a partir del valor de estado actual o anterior. Ya que este es el contador y nos gustaría aumentarlo, necesitamos conocer el estado actual del contador. Siempre que tengas esa situación, usa siempre el enfoque de devolución de llamada. Si solo quisiéramos configurarlo en solo número aleatorio, realmente no lo necesitamos porque no necesitamos estado actual para calcular el nuevo estado. Volvemos a la app. Refresco. De nuevo, igual que te dije, desde la perspectiva del usuario, nada cambió. Con algo así, eres capaz de manipular elementos en la página. Con base en ese conocimiento básico simple, conocimiento básico simple, todas las aplicaciones de React se están construyendo así como así. Tienes múltiples estados. Puedes crear tantos estados como quieras. Puedes manipularlos como quieras con diferentes eventos en evento click, en hover, cuando algo se abre, algo se cierra, todo se maneja con estados como ese. Creo que para este video, esto será suficiente. Ahora ya conoces los eventos de React que puedes transmitir algo. Para ese atributo, puede pasar cualquier controlador de eventos para ejecutar alguna función cuando ocurre algún evento. Ese manejador de eventos siempre recibe un objeto de evento como primer argumento en caso de que lo necesite. Si no lo haces, bueno, simplemente no lo uses. Si necesitas actualizar algún valor en la página, el contador de color, texto, lo que sea, tenemos estado para eso. Las variables no funcionarán porque React no funciona de esta manera. React se basa en el concepto de re-renders, y para persistir el valor entre los re-renders, necesitamos usar state. Podemos hacer eso usando el gancho de estado de uso. Los ganchos en React son solo funciones a las que llama durante el ciclo de vida del componente para manipular los datos dentro del componente. Algo así. En el siguiente video, veremos cómo podemos usar ese conocimiento y cómo podemos aplicarlo en nuestro juego. Vamos a crear estado de juego y vamos a manipular cuadrados así que cuando hagamos clic sobre ellos, alguna manera actualizará el estado. Nos vemos ahí. 46. 07 Cómo crear el estado de la tabla de juegos: Oye. En el último video platicamos sobre la interactividad, sobre el estado, qué es el estado, cómo nos puede ayudar. En este video, podemos continuar con estado, pero esta vez lo aplicaremos en nuestro juego. Del video anterior, he cambiado algunas cosas aquí. Sólo voy a referir estos cambios muy rápidamente, y tengo desactualizada la configuración de eslintrc. Pongo ningún rol de vars sin usar como advertencia. En realidad, agreguemos otro commit para eso. Las barras de adjudicación reducen el calentamiento. Bien, esto va a hacer genial. Ahora, sigamos con la interactividad. Entonces, si seguimos adelante a bordo, aquí vamos a crear nuestro estado de tablero, que básicamente representará nuestro tablero de juego. Pero la pregunta es, ¿cómo vamos a hacer eso? Si recuerdas, una vez mencioné que va a ser una matriz. Por eso tenemos nueve elementos aquí y todos empiezan con cero. Simplemente empiezan con cero no todos ellos. Entonces, voy a abrir la pintura aquí. Te diré cómo exactamente podemos representar el estado del juego con una matriz. Será una matriz de nueve elementos. Entonces, por defecto, será una matriz vacía con nueve elementos. Y por defecto, cada elemento será nulo, bien. Así que por defecto, inicialmente tendremos una matriz de nueve elementos, cada elemento va a ser nulo. Entonces cuando vamos a hacer click en un cuadrado. Entonces nuestros cuadrados serán representados por índices dentro de esa matriz. El primer cuadrado tendrá índice cero, segundo cuadrado tendrá índice uno, dos y así sucesivamente. Cuando vamos a hacer clic en un cuadrado, digamos que vamos a hacer clic en cuadrado con índice uno, cambiará su valor de nulo a x o cero en función de quién hizo clic en ese cuadrado. Y así, vamos a administrar el estado. Entonces, eventualmente, tendremos matriz de nueve elementos, cada elemento puede ser un nulo si no se hace clic en el cuadrado, o x, o cero si se hizo clic en el cuadrado. Sigamos adelante y dentro del tablero vamos a importar primero UseState de react. Dentro de tablero, vamos a crear un nuevo estado, que podemos nombrar cuadrados. Establecer cuadrados, va a ser UseState. Ahora, inicialmente, necesitamos crear una matriz de nueve elementos y cada elemento por defecto será nulo. Para eso, podemos usar solo JavaScript simple aquí, así que no podemos llamar al constructor de matriz con nueve como longitud de matriz. Entonces vamos a llamar al método de relleno de punto, Y vamos a llenar array con nulos. Eventualmente, producirá una matriz de nueve elementos donde cada elemento es nulo. Ahora bien, ¿cómo podemos asociar realmente cada cuadrado con cada componente que representa un cuadrado? En este momento pasamos 0,1,2,3 y 4. Entonces, en cambio, vamos a pasar los cuadrados cero. Entonces ya que los cuadrados es nuestro estado, siempre será una matriz que haya agarrado el primer elemento de esa matriz. Entonces para el segundo cuadrado, podemos agarrar el segundo elemento y así sucesivamente. Tenemos que hacer eso por cada plaza. Sigamos adelante y hagamos eso por cada plaza. Así que lo guardamos. Volvemos a la app. No se puede acceder a este sitio. Eso es porque no lo hice alrededor del servidor de desarrollo. Entonces, npm ejecutar dev. Vuelvo aquí y ahora podemos ver que nuestras plazas están vacías. Bueno, esto se espera porque tenemos valor nulo. Pasamos nulos. Y si recuerdas, si tratamos de mostrar nulo, no será evaluado. Dará como resultado nada y HTML. Ahora bien, ¿qué podemos hacer realmente? Se puede ver que necesitamos actualizar el estado de alguna manera, para actualizar los cuadrados, para actualizar el estado cuando hacemos clic en un cuadrado, ¿cómo podemos hacer eso? Así que nos hemos quedado dentro del tablero, pero tenemos toda la lógica sobre componente cuadrado dentro del componente cuadrado. Lo que podemos hacer, podemos usar utilería. Entonces podemos definir alguna función aquí dentro del tablero que manejará la lógica, y podemos pasar esa función como un componente prop a square. Entonces nuevamente, solo apuntalamos para pasar algunos datos, alguna información a los componentes. Entonces aquí, ¿qué vamos a hacer? Vamos a crear una nueva función llamada handle square click. Esa función recibirá un argumento. Vamos a llamar a esa función con una posición de argumento. Será el 0,1,2,3,4,5,6,7 y 8 será el índice de cuadrado. Y dentro de esa función, vamos a hacer algo. Por ahora, sólo vamos a mantenerlo vacío. Entonces como te dije, vamos a usar prompts para pasar datos al cuadrado. Lo que queremos hacer cuando hacemos clic en este cuadrado, este clic cuadrado de mango va a estar frío. Entonces, ¿qué podemos hacer, podemos pasarClick o en Squared Click como sea que hayas llamado ese prop. Vamos a nombrarlo OnClick. Y para esa proposición OnClick, vamos a pasar y construir click cuadrado. Pero el problema es que, ya que pasamos ese mango cuadrado pincha aquí, y si lo pasamos de esta manera, entonces vamos a agarrar ese onClick aquí dentro de cuadrado, y tendremos que llamar a esta función dentro de cuadrado y pasar la posición como argumento porque maneja cuadrados clic recibe argumento posición. Entonces, cuando llamamos a esa función, necesitamos pasar esa posición. Pero el problema es que la plaza realidad no necesita saber nada de eso. Qué queremos hacer idealmente, solo queremos agarrar esa función onClick aquí, y para el atributo onClick, queremos pasar esa función así. Y el cuadrado no va a hacer ninguna lógica al respecto. Todo será manejado aquí a bordo. Entonces para hacer eso, lo que podemos hacer por el prop onClick aquí, podemos pasar una función, y esa función llamará a handlesQuareClick con la posición que necesitamos. Entonces eventualmente se ve algo así. Incluso podemos simplificar eso y eliminar el cuerpo de la función. Ahora se ve más conciso y se ve así. ¿Por qué necesitamos pasar una función que llame a otra función? ¿Por qué podemos llamarlo así? Bueno, el problema es que como recuerdas, cuando los componentes se montan en la página, se ejecuta JavaScript dentro del componente, y con esta sintaxis, algo de JavaScript iremos línea por línea, y en cuanto JavaScript use luz, verá que solo llamamos a esta función aquí en esa línea. Entonces lo que va a hacer, llamará a esta función escribir de inmediato. Y cualquiera que sea la disfunción que devuelva seremos establecidos se pasará el valor para onClick prop aquí, ya que nuestra función no devuelve nada, será indefinida, y eventualmente onClick aquí dentro del cuadrado será undefined. No va a pasar nada. Tendremos esta función llamada write straightaway e undefined al final. Esto no es exactamente lo que queremos. En primer lugar, el manejador de eventos es función en primer lugar. Por eso pasamos una función, no otra cosa. Entonces pasamos una función que llama maneja rápidamente con los argumentos que necesitamos. Bueno, como puedes ver, tenemos que hacer eso por cada cuadrado de aquí, así como así y pasar diferente posición pero puedes notar que aquí hay una pequeña repetición. Tenemos muchas cosas que podemos simplificar aquí. Entonces, en lugar de enmarcar valores, cuadrados, luego índice de matriz, luego onClick, y repetir los manejadores hacen clic todo el tiempo, podemos simplificar esa función. Podemos simplificar esa sintaxis usando otra función. Entonces, qué podemos hacer aquí para evitar esa repetición, aquí dentro del tablero, podemos crear otra función a la que podemos llamar algo así como un render square. Este renderSquare recibe nuevamente la posición que va a ser índice cuadrado y dentro de esa función, entonces podemos devolver el marcado JSX. vamos a copiar aquí. Desde renderSquare, ahora podemos devolver square, así que en vez de cuadrados cero, vamos a pasar cuadrados position y handlesQuareClick. En lugar de cero, vamos a pasar posición. Eventualmente, algo así. Ahora dentro de JSX, usamos corchetes para interpolar JavaScript en él. Dado que aquí podemos interpolar variables, que son expresiones de JavaScript exactamente de la misma manera podemos llamar a funciones aquí porque las funciones también son parte de las expresiones JavaScript. En lugar de escribir cuadrados todos ellos así, lo que puede hacer, podemos simplemente abrir corchetes y llamar a renderSquare y pasar el índice cero dentro. Tan pronto como el componente rebote, esta función será llamada con cero como argumento que va a ser la posición dentro de ella. Devuelve el marcado JSX y este marcado JSX se interpolará en el lugar donde se llamó bien a esta función, básicamente aquí. Exactamente lo mismo vamos a hacer para el resto de nuestras plazas. Sólo voy a copiarlo dos veces. Elimino esto porque ya no lo necesitábamos y haré exactamente lo mismo por el resto de nuestras plazas, así que 3, 4, 5, 6, 7, 8. Ahora de nuevo, llamamos a función cuando el componente se monta, esta función devuelve el marcado JSX, y este marcado JSX se insertará en ese lugar donde se llama a esta función. Si acabas de hacer referencia a esta función así, no pasará nada. Si vuelvo, veamos qué pasa. Bueno, aquí vemos algunas cosas raras y si tratamos de ver, aquí solo tenemos dos cuadrados. Lo que estamos haciendo ahora mismo, básicamente estamos tratando de mostrar la propia función. No lo que devuelve la función sino la firma de función bien y reacciona no funciona de esta manera si intentas mostrar objetos tal como son, no podrás hacer eso. Primero hay que convertirlos en cadenas pero esto no es lo que vamos a hacer ahora mismo. Esto es algo avanzado y volveremos a eso en el futuro. esa función le llamamos, le pasamos un argumento y comprobamos que todo funciona. Básicamente solo refactorizamos ligeramente nuestro componente pero hace exactamente lo mismo. Se renderiza valor en el índice que especificamos aquí, valor de nuestra matriz de cuadrados, que es el estado. Dentro de HandlesQuareClick tenemos que hacer algo de lógica aquí, así que algo de lógica para mostrar de alguna manera cuadrados. Para actualizar el estado cuadrado, necesitamos llamar a la función de actualización del estado en nuestro caso al indexar sus cuadrados. Esto es exactamente lo que vamos a hacer. Dado que nuestro estado es una matriz que se cambiará a lo largo del período de tiempo y nuestro nuevo estado de matriz que habremos calculado debe calcularse a partir del estado actual, vamos a usar la versión de devolución de llamada de set state. Voy a pasar callback aquí y el primer argumento va a ser el estado cuadrado en este momento. Voy a llamarlo CurrentSquares y necesitamos manipular de alguna manera estado CurrentSquares y obtener nuevo, y obtener nuevo estado de cuadrados con valores actualizados. Un punto aquí que no mencioné en el video anterior es que no podemos mutar la variable de estado. ¿A qué me refiero con eso? Si usamos useState e intentamos tomar esos cuadrados e intentamos hacer algo como esto, cuadrados en alguna posición equivalen a algo. Lo que hacemos aquí, manipulamos directamente este estado en lugar de usar esta función de actualización de estado, esto no va a funcionar. Esto está prohibido de esta manera, estado no se actualizará. En React, no funciona de esta manera. Tenemos que llamar a la función de actualización del estado todo el tiempo para poder hacerlo, así que de nuevo, esto no va a funcionar. Llamamos setSquares y dentro de Setsquares, también tenemos currentSquares que representa estado a la vez. Si intentamos y volvemos a mutar el estado directamente aquí, esto no va a funcionar. Esto simplemente no va a funcionar. No es así como funciona React. Tenemos que llamar a la función y tenemos que devolver un nuevo valor. React no se trata de mutar valores directamente. Reaccionar se trata de devolver nuevos valores si eso tiene sentido para ti. Desde el setSquares, necesitamos devolver un nuevo valor. Lo que podemos hacer para recorrer todos nuestros cuadrados y de alguna manera actualizarlos, podemos usar el método Array.map y el método Array.map no muta el estado, sino que devuelve un nuevo valor de matriz. Por eso es seguro hacerlo. Un retorno currentsquares.map, así que vamos a recorrer nuestro estado cuadrado. Nuestro primer argumento será el valor que recorremos en este momento, por lo que va a ser nuestro SquareValue. Entonces tenemos índice de la plaza. Vamos a llamarlo solo pos. Como ya tenemos posición en esta función scope, si tratamos de nombrarla position, tenemos colisión de variables. Simplemente nos quedamos hechos pos. Siempre que regresé del.map para el elemento actual, asociará un nuevo valor para ese elemento. Aquí la lógica será bastante simple. La posición que pasamos a esa función es la posición en la que básicamente hacemos clic. Para no confundirnos, vamos a cambiarle el nombre a posición clicked y aquí, index inside Array.map, vamos a llamar position. Vamos a decir si posición clicada es igual a la posición del cuadrado que miramos, en este caso, vamos a devolver X por ahora desde el.map. De lo contrario, si el cuadrado que recorrerá en este momento no es el cuadrado en el que hicimos clic, simplemente devolvemos el mismo valor cuadrado. Ahora vamos a guardarlo, parece que cuando está formateado puede ser un poco confuso porque tenemos función que llama a función y dentro de función tenemos callback, solo acostumbrarnos a eso, así volvemos a la app. Ahora intentemos hacer clic en un cuadrado. Hago clic en el medio y boom, no pasa nada. ¿Por qué es eso? Vamos a probar en consola registrar el estado cuadrado aquí. Veamos qué tenemos. Tenemos matriz de tasa de nulls y si hago clic, en realidad no pasa nada. Veamos qué podría estar mal aquí. La parte equivocada aquí es que se puede ver el componente cuadrado no se guardó. Esto se debe a que, bueno, lo que sea que acabo de escribir aquí, no se guardó así que los cambios básicamente no se comprometieron. Lo guardo y ahora debería funcionar. Doy click en cuadrado y ya ves ahora tengo X aquí y si ves aquí, se actualizó el estado. Ahora, desde que hice clic en cuadrado con índice 4, 0, 1, 2, 3, 4, hicimos clic en ese cuadrado y dentro de esa matriz actualizamos el elemento en el índice 5, y establecemos su valor para que sea X que tiene genial exactamente lo que necesitamos. Si seguimos adelante y hacemos clic en todas estas casillas, verás que todas las casillas se llenarán de acceso, que es exactamente lo que queríamos y volvemos a ver todos estos registros de consola todo el tiempo. Porque desde que actualizamos este estado, el componente vuelve a renderizar la lógica dentro se ejecuta nuevamente y vemos el registro de la consola cada vez que se vuelve a realizar la lógica. Genial. Algo así, somos capaces de administrar nuestro estado. Por ahora, creo que esto va a ser suficiente. En el siguiente video, vamos a presentar a nuestros jugadores. De hecho tendremos al jugador actual, así podremos diferenciar quién va a hacer clic en esta casilla a continuación. Será o bien X o cero, así que ahora mismo se puede ver que solo tenemos X's, que no es exactamente lo que estoy buscando. En el siguiente video, vamos a abordar eso. Cuando hagamos clic en este cuadrado, será X o cero. Nos vemos ahí. 47. 08 Agrega jugadores X y S: Hola. En el video anterior platicamos de estos cuadrados de estado, y en realidad logramos poner X dentro del cuadrado cuando hacemos clic en él. En este video, vamos a agregar más funcionalidad, así que cuando hacemos clic en el cuadrado realmente podemos mostrar ya sea x o cero. En otros términos, tendremos un jugador. Antes de que lleguemos a introducir nuevos cambios, tenemos muchos cambios realizados hasta ahora del video anterior. Agregamos esa funcionalidad cuando hacemos clic en el cuadrado, mostramos X dentro de ellos. Bueno, sigamos adelante y cometamos esos cambios. Sólo voy a escribir git add. y voy a nombrar ese mensaje de compromiso llamado, digamos display X al hacer clic en un cuadrado. Volvamos a iniciar el servidor. Impresionante. Ahora, sigamos adelante y agreguemos una funcionalidad de jugador básicamente. El jugador es algo que cambiará a lo largo del ciclo de componentes. Significa, va a ser un estado. Lo que vamos a introducir un nuevo estado, y el estado será el jugador. Sin embargo, no vamos a hacer ninguna complicación al respecto. Será sólo un simple valor booleano, que nos va a decir quién va a ser el próximo jugador. Vamos a llamarlo algo así como, ISXNext. Si es cierto, establecemos el estado en x, lo contrario va a ser cero, tan simple como eso. Dentro de la placa, podemos seguir adelante y creamos nuevo estado y renombrarle el nombre isxNext, y actualizar las funciones establecer isxNext, y por defecto, será false. Como ya tenemos prácticamente todo lo que necesitamos, solo vamos a modificar esta línea 12. Aquí, devolvemos x. Aquí está codificado duro. Pero en cambio, sólo vamos a introducir otra condición simple si no. Vamos a preguntar. Si es xNext, entonces el valor que vamos a asociar al cuadrado clicado va a ser X, lo contrario, va a ser cero. Justo después de actualizar el estado de setSquare, también vamos a actualizar SetIsxNext, vamos a alternarlo ya que es un booleano. Voy a llamar a setISXNext, y como necesitamos alternarlo, y va a ordenar alternarlo, necesitamos conocer el toggle booleano actual, que en este momento es o un verdadero o falso, y simplemente lo voltearemos. Estamos de nuevo, vamos a usar la versión callback de set state updater. Vamos a presionar callback. CurrentisXNext o vamos a hacerlo más simple. Vamos a nombrarlo como P o prev para anterior, o vamos sin complicaciones, sea cual sea la monedaSxNext. Para alternar ese booleano, solo necesitamos aplicar la negación al frente, así como así, y eso es todo. Lo que va a hacer, tomará la actual etapa booleana. Será verdadero o falso, si es falso, aplicamos negación a falso, se convertirá en verdadero, y si esto es cierto, aplicamos negación, se convertirá en falso. Básicamente, volteamos el booleano y lo hacemos después de actualizar set squares state. Nosotros hacemos eso, volvemos a nuestra app. Hacemos click, y ahora tenemos cero primero. Ahora hacemos clic más, tenemos X y vamos a tener, y se puede ver que está alternado y volteado, y todo funciona como esperamos. No obstante, si vuelvo a hacer clic en cuadrado, se puede ver algo arrojado aquí. El problema es que cuando hacemos clic en el cuadrado, la lógica vuelve a correr y se actualiza el cuadrado en el índice en la posición en la que hicimos clic. Qué queremos agregar aquí, otra condición. Si el cuadrado ya tiene valor, si no es nulo, entonces simplemente no ejecutamos esa lógica. Aquí están los tiradores superiores interiores de clic cuadrado, podemos preguntar si los cuadrados todavía, clickedPosition, el valor es veraz. Valor veraz significa no nulo. Nuestro valor cuadrado puede ser nulo, X o cero. Si este valor es veraz, significa que no es nulo. En este caso simplemente volvemos de esa función. La palabra clave return sale de la función y no va más allá. Nosotros lo guardamos. A ver, nuestro va a quedar como. Hago clic en cuadrados e intento hacer clic en el cuadrado otra vez y no pasa nada porque de nuevo, comprueba el estado y sale de la función. Bastante genial. Algo así, agregamos jugador a nuestro juego. Nuestro siguiente paso va a ser mostrar el mensaje en la parte superior, quien va a ser el siguiente jugador. No obstante, vamos a hacer eso en el siguiente video. Por ahora, vamos a comprometer nuestros cambios actuales. Voy a nombrar ese commit. Lo que hicimos, vamos a repasar. Básicamente presentamos a un jugador aquí. Introdujo a un jugador al juego. Al hacer clic en un cuadrado, mostrar ya sea x o cero. Nos comprometemos a eso, desplegamos. Lo deletreé mal. Push Origin Master. Lo tengo sólo porque hice algo detrás de escena cuando apagué el video. Disculpe, no debería tener eso. Yo solo voy a usar la primera bandera así así, y ahora todo está en GitHub. Por favor, no te preocupes por esta parte, no la vas a tener. Genial. Nos vemos en el siguiente video. 48. 09 Muestra los mensajes del siguiente jugador y los ganadores: Oye. En el video anterior, logramos agregar funcionalidad de jugador a nuestro juego. En este video, procederemos y mostraremos el mensaje aquí en la parte superior de la grilla, que dice, el siguiente jugador es y si tenemos un ganador, vamos a exhibir ganador. En este video, cubriremos todo eso más el cálculo del ganador. En primer lugar, ¿qué queremos hacer? Tenemos que decidir qué es exactamente lo que queremos poner un marcado del mensaje. El siguiente jugador es x o cero. Bueno, queremos hacerlo dentro de App jsx. Aquí, solo una simple etiqueta H2 que dice que el siguiente jugador es por ahora alguien. Si vuelvo, se ve así por ahora. No obstante, ya tenemos un problema. Lo que necesitamos usar aquí para mostrar quién va a ser el próximo jugador. Como puede ver, toda la lógica y el estado vive dentro del componente de la placa. Significa que no está disponible para el mundo exterior. El único componente que conoce cuadrados y todo el estado y toda esa lógica es el propio componente de placa y puedes pasar cualquier dato que necesites de ese componente a sus componentes hijos. Por ejemplo, como hacemos con cuadrado. Si queremos tener acceso a ese estado o datos fuera del tablero, esto es imposible. Aquí tenemos dos opciones. La primera opción es mover realmente ese siguiente jugador es alguien mensaje dentro del componente del tablero. A lo mejor ponlo aquí. Tenemos todos los datos que necesitamos en el alcance de este mensaje para que podamos realmente obtener algo de él y eventualmente mostrarlo. Tenemos siguiente jugador esta o segunda opción es mover parte de esta lógica al componente padre. Por ejemplo, al componente de la aplicación, y luego pasar la información requerida al componente de placa a través los apoyos y luego pausar otra información necesaria para el mensaje aquí. Si tratamos de visualizarlo, si abrimos pintura, tenemos cuadro así. Tenemos componente de aplicación que renderiza componente de placa y también dentro de la aplicación, renderizamos el mensaje. No es componente por ahora, pero sigue siendo parte de la aplicación no forma parte de la junta. El estado se administra aquí dentro del componente de placa. Ya que el mensaje no forma parte de la junta directiva, no tiene relación con él. Vive como una hoja separada, entonces significa que es imposible acceder a lo que sucede dentro del tablero. La primera opción que mencioné es hacer que el mensaje forme parte del componente de la placa aquí. Si vamos a bordo y ponemos mensaje aquí, podemos acceder a los datos, que podamos gestionarlos aquí. Esa es la primera opción, pero no vamos a hacer eso, queremos que el mensaje sea parte del componente app. segunda opción es levantar la lógica, elevar el estado al componente padre, que es app, y luego pasar los datos requeridos a los componentes correspondientes usando props. La lógica vivirá dentro de App y luego pasamos datos a bordo a través de props y luego pasamos otros datos a mensaje, nuevamente usando props en el futuro. Por ahora no es un componente, pero la idea es la misma. Compartimos datos en componente de patente. Abrimos tablero y de tablero vamos a tomar el estado y moverlo al componente app. Lo mismo vamos a hacer con la importación. Lo pondremos dentro de la aplicación y manejaremos el clic cuadrado también. A partir de ahora, vivirá y se gestionará dentro del componente app. Lo copio aquí. Lo he puesto dentro de la app. Así como así. Guardamos tablero pero se puede ver eso dentro de tablero, ya no tenemos asa de clic cuadrado. Si pasamos el cursor manejamos la raíz cuadrada no está definida porque nunca se creó en ninguna parte de aquí, mismo con los cuadrados. El componente de la placa ahora tiene estos valores indefinidos. Bueno, significa que necesitamos acceder a él de alguna manera y lo haremos a través de utilería. Ya que ahora tenemos cuadrados y manejamos cuadrados haga clic aquí dentro de la aplicación, podemos pasarlo a componente de placa con props. Yo sólo voy a pasar cuadrados aquí así y manejar el clic cuadrado exactamente de la misma manera. Ahora dentro de la tabla, puedo aplicar enlace de destrucción y agarrar cuadrados y manejar clic cuadrado. Ahora bien, si guardo ambos archivos, vuelvo a abrir mi app. Todo funciona como antes, pero ahora el estado vive dentro de la aplicación, y todos los datos requeridos se pasan a los componentes de la placa a través de props. Genial. Significa que ahora el mensaje que mostramos en el componente app tiene acceso al estado. Podemos mostrar el mensaje. Nuestra lógica será bastante simple. Voy a crear una nueva variable aquí, y voy a decirte por qué. Lo llamamos mensaje o digamos mensaje de estado. Aquí vamos a hacer isxNext, devolvemos x string, de lo contrario, devolvemos cadena cero y mensaje de estado ya que está disponible, lo interpolaremos en JavaScript. Vamos a decir que el siguiente jugador es {Mensaje de estado}, o digamos que en lugar de mensaje de estado, llamémoslo siguiente jugador. El siguiente jugador es el siguiente jugador. Lo guardamos y tenemos siguiente jugador es cero. Impresionante. Hacemos clic. Efectivamente fue cero, y ves que cambió y continúa y todo funciona como se esperaba. Sin embargo, podría tener una pregunta, ¿por qué mostramos aquí como una variable? ¿Por qué no creamos ocho estados para eso quizá? El caso es que este siguiente jugador es algo llamado estado derivado o computado, y ¿por qué no creamos otro estado para ese usando estado de uso? El estado derivado o calculado es el valor que se deriva del último estado. Ya que tenemos ISXNext como estado, y sabemos que cada vez que se ejecuta el componente, la lógica dentro se ejecuta, lo que significa que esta línea de código se volverá ejecutar en cada componente re-render. El caso es que cuando el componente vuelve a renderizar, el estado se actualiza. Significa que para el re-render actual, el estado que tenemos aquí estará actualizado. Es el último estado que tenemos. Dado que esta lógica se vuelve a realizar, siempre usará el último estado aquí ISXNext. Por eso realmente no necesitamos crear otro estado para eso. Simplemente creamos un valor que se deriva del último valor estatal. Bueno, puede sonar un poco complicado, pero si piensas en eso, no hay nada sofisticado en eso. Ya tenemos algún valor que cambia y de hecho derivamos algo de ese valor. Nada más que eso. Por eso no necesitamos crear otro estado de uso, no tiene ningún sentido hacerlo. Ahora tenemos el mensaje que dice quién va a ser el próximo jugador, pero vamos más allá y mostremos al ganador. Siempre que tengamos un ganador, nos gustaría exhibir. El ganador es este tipo, el siguiente jugador X. Si volvemos al invitado que se compartió contigo al principio, y si por dentro buscas calculatewinner.js, tienes una función aquí, calcula ganador. Vamos a copiar esa función. Volvamos a nuestra aplicación y dentro de la fuente, vamos a crear un nuevo archivo y llamarlo winner.js. Si te diste cuenta, no nombramos ese archivo con la extensión dot.js6 porque este archivo no tiene ningún marcado js6. Es solo un JavaScript normal. A partir de aquí, desde el archivo js, vamos a exportar la función calculatewinner. Lo que hace, toma nuestra matriz de cuadrados, que de nuevo, si recuerdas, es una matriz donde almacenamos nuestros valores cuadrados; null, X, o ceros, y a partir de esa matriz, calcula ganador. Si no hay ganador para los cuadrados de algodón, devuelve nulo. Si hay un ganador, devuelve X o cero, lo que se lleva a cabo en la línea 15. ¿Cómo funciona? ¿Cómo funciona la función? Aquí tenemos un array de líneas definido, que básicamente representa todas las combinaciones ganadoras posibles en el juego tic-tac-toe. Por ejemplo, 0, uno y 2 es la combinación 0, 1 y 2, así que si tienes X en una fila. Puedes consultar todas las combinaciones posibles que veas aquí. Nuevamente, es solo un conjunto de todas las combinaciones ganadoras posibles. Entonces, ¿qué hacemos aquí usamos simple for-loop? Y recorremos estos. Repasamos cada combinación ganadora. Estoy diciendo muy sencillo. Comprobamos nuestra matriz de cuadrados actual con la combinación ganadora. Si tenemos esa combinación ganadora en nuestro estado de cuadrados y nuestra matriz de cuadrados, entonces simplemente devolvemos al ganador. Aquí utilizamos la desestructuración de matrices en la línea 13. Las líneas en la posición del ojo representan esta matriz. A partir de esa matriz, envolvemos primero, segundo y tercer elemento y los nombramos a, b c. Por ejemplo, para esta matriz, a va a ser cero, b va a ser uno, dos va a ser c. Entonces usando esa lógica if, vemos si hay algún ganador. Si realmente te interesa cómo funciona, solo trata de poner los valores en esa fórmula, digamos, tú mismo. Un poco de lógica aquí. Volvemos a app y podemos hacerlo simplemente ejecutando esa función dentro del componente app. Ya que necesitamos pasar estado cuadrado y calcularganador producirá como el ganador. No necesitamos crear otro estado. Esta variable ganadora que tenemos va a ser, nuevo, el estado derivado del estado cuadrado. Voy a seguir adelante aquí, tal vez encima, voy a crear la variable ganadora. Lo que voy a hacer, voy a importar calculatewinner. Esto se llama export, así que lo importo con corchetes de winner. Yo llamo a esa función aquí y por dentro paso nuestro estado cuadrado. Voy a tener un ganador aquí. Vamos a tratar de causar registrarlo y ver qué tenemos. Abro consola. Dentro de consola, tengo null porque, bueno, no tenemos ningún ganador. Cuando juego el juego, nulo, nulo. Vamos a crear un ganador. Si hago clic aquí ahora, voy a tener la combinación ganadora, y ya ves que aquí produce cero porque ahora, bueno, tenemos un ganador, que es cero. En este caso, necesitamos exhibir. Sigamos adelante. Ya tenemos el siguiente jugador es el siguiente jugador, pero vamos a modificar ligeramente ese mensaje. O quizá no lo toquemos. Aquí vamos a crear otra variable a que llamaremos mensaje de estado en este momento. Aquí, vamos a preguntar si tenemos ganador, entonces vamos a decir, ganador es ganador, la variable que tenemos. Sin embargo, necesitamos usar la plantilla de cadena aquí para aplicar la interpolación de cadenas. Voy a convertir esta cadena en plantilla de cadena reemplazando las comillas singulares regulares por las garrapatas traseras. Me permitirá usar la interpolación usando el signo de dólar y los corchetes, por lo que ganador es ganador. De lo contrario, si no tenemos ningún ganador, vamos a usar el siguiente mensaje del jugador que ya tenemos aquí. En lugar de mostrar que el siguiente jugador es el siguiente jugador, esta vez solo vamos a mostrar mensaje de estado. Lo deletreé mal. Va a ser mensaje de estado. Ahora, vamos a ver ¿qué tenemos aquí? Así que tenemos justo el siguiente jugador es el siguiente jugador. Ya veo. En cambio, tenemos que decir que el siguiente jugador es el siguiente jugador. Volvemos, tenemos siguiente jugador es cero. Juguemos el juego. Vamos a crear un ganador. Ahora vemos el mensaje, ganador es X. Genial porque tenemos un ganador. Fresco. Sin embargo, aquí hay un problema. Si intentas jugar el juego, si sigues, aún podemos hacer clic en cuadrados, pero esto se puede arreglar fácilmente. Ya tenemos la lógica para salir de la función si hacemos clic en el mismo cuadrado dos o tres veces solo varias veces. Aquí sólo vamos a extender esa condición y vamos a decir. Si hacemos clic en el mismo cuadrado dos veces o si tenemos ganador, simplemente vamos a salir de la función. Tan simple como eso. Vamos a intentarlo. Yo jugué el juego. Ya tenemos ganador. Si hago clic en alguno de los cuadrados, no voy a tener ninguna lógica ejecutada porque salimos de aquí porque esto produce tal vez falso tal vez cierto, no importa, pero aquí definitivamente lo hace cierto. Tenemos la condición de salida. Así como así, casi terminamos con nuestro juego. La única funcionalidad que agregaremos aquí va a ser la historia del juego. Podremos navegar por el historial del juego. Vamos a rastrear nuestros movimientos que hicimos y podremos viajar entre ellos, pero lo vamos a gestionar en el próximo video. Por ahora, estos cambios son suficientes. De hecho, vamos a comprometerlos con Git porque aquí vamos a introducir muchas cosas diferentes. Voy a abrir terminal, voy a agregar todo al escenario, y voy a nombrar todos estos cambios como, veamos, vamos a hacer un resumen. Primero, levantamos al estado de bordo. Apareció dentro del componente app y luego mostramos al ganador. Bueno, eso es mucho. Vamos a decir, levantamos el estado al componente de la aplicación y mostraremos el mensaje de estado al usuario. No hay mensaje de estado para el usuario, calcular el ganador. No nos compliquemos con los mensajes. Creo que esto será suficiente. Eventualmente, el plomo despliega todo en GitHub. En esa nota profunda, agreguemos este video. Te veo en la siguiente. 49. 10 Mostrando el cuadro de juego: Hola. En este video, seguiremos hablando de, en realidad, los mensajes que mostramos al usuario aquí. El único punto que nos perdimos del video anterior donde mostramos el mensaje de estado es el sorteo del juego. ¿Y si terminamos el juego pero finalmente no tenemos ningún ganador? En este caso, nos gustaría mostrar otro mensaje al usuario que, digamos, x y cero empataron, por lo que hay un empate. Para ello, necesitamos aplicar más lógica aquí. Pero vamos a hacer eso dentro un componente que vamos a crear específicamente para mensaje de estado. Dentro de componentes, voy a crear un nuevo archivo, que voy a llamar mensaje de estado. Este va a ser el nuevo componente. A partir de aquí, voy a crear un componente de mensaje de estado de exportación. Mensaje de estado. Así como así por ahora, será un div, que dice hola. Además, necesito exportarlo desde aquí. Después dentro de App JSX, voy a importar cuadrado de componentes cuadrados. Vaya, discúlpeme, no cuadrado, mensaje de estado. Entonces aquí en lugar del mensaje de estado H2, vamos a mostrar el componente de mensaje de estado así como así. Entonces quitamos esto. Ahora, se supone que el mensaje de estado está en algún lugar dentro del componente de mensaje de estado. Sin embargo, aquí no tenemos ningún dato, es por eso que nuevamente vamos a usar props para pasar todos los datos requeridos al componente de mensaje de estado. Tenemos siguiente capa y mensaje de estado aquí, que va a moverlo al componente de mensaje de estado directamente. No tenemos ISXNext, y no tenemos ningún ganador aquí. Entonces es por eso que esperamos que el ganador sea aprobado así como que se apruebe ISXNext. El cálculo del ganador se realiza aquí. No obstante, lo que pasa es que también necesitamos detectar cuándo no tenemos cuadrados vacíos y no tenemos un ganador? Tenemos que escribir esa lógica. Para mostrar el sorteo, necesitamos saber si todas las casillas están ocupadas con algo y todavía no tenemos un ganador, para obtener ese valor, ese booleano que indica que necesitamos volver a tener acceso a nuestro estado de plazas. También lo necesitaremos dentro del mensaje de estado. Nosotros también lo vamos a pasar aquí. Vamos a tener ganador, iSxNext y plazas se quedan aquí. Pasa todo como utilería. Entonces aquí cuando renderizo un componente de mensaje de estado, voy a pasar ganador, voy a pasar isxNext, y voy a pasar cuadrados. Genial. Ahora, aquí vamos a usar algo llamado renderizado condicional. Bueno, en realidad no lo sabes, pero ya aplicamos renderizado condicional aquí en la línea 3-5. La representación condicional es simplemente mostrar algo basado en la condición. Por ejemplo aquí, si abro llaves dentro de JSX y escribo, digamos, condición simple, cinco es menor que 10. En este caso, por favor muestre div, que dice cinco menos de 10. De lo contrario, mostrar otro div que diga otra cosa. Lo que ves aquí se llama renderización condicional. Es básicamente, esto es exactamente lo que hacemos aquí. En lugar de simplemente usar cadenas aquí, podemos escribir el marcado JSX, así como así, y todo finalmente se ve así. Pero no necesitamos el marcado JSX, necesitamos cadenas simples, así que lo mantenemos así. Ahora bien, ¿qué pasa con el sorteo? ¿Cuál es la lógica para mostrar el dibujo? Necesitamos saber que tenemos todas las plazas ocupadas en la parrilla y no tenemos ganador. Para obtener el booleano que indica si no tenemos cuadrados libres en el tablero, vamos a crear otra variable porque, nuevo, va a ser un estado derivado. Vamos a llamarlo no quedan movimientos. Va a ser cuadrados.cada.. cada método es el método que se puede llamar borrado. Devolverá ya sea verdadero o falso. Pasamos callback a cada. Esa devolución de llamada se ejecuta para cada elemento dentro de la matriz cuadrados. Si cada callback, si para cada elemento la devolución de llamada devuelve true, entonces eventualmente el valor final será true. Si al menos una devolución de llamada devuelve false, entonces el valor final será false. Ese es básicamente el nombre cada. La devolución de llamada tiene exactamente los mismos argumentos que el método map. Primero tenemos el elemento que va a ser valor cuadrado en nuestro caso. Esto es suficiente, no necesitamos índice y no necesitamos array en sí mismo. Simplemente verificamos si el valor cuadrado no es igual a nulo. lo comprobamos. Si cada valor no es igual a nulo, toda la condición devolverá true. Si al menos una raíz cuadrada no es nula, entonces toda la estructura, toda la condición devuelve false. Esto es exactamente lo que estamos buscando. Ahora, simplemente vamos y tenemos el div, y podemos aplicar múltiples condiciones aquí. Si tenemos un ganador, entonces podemos exhibir algo. Aquí está el truco, cómo también podemos aplicar renderizado condicional. Si tenemos ganador, podemos usar un final lógico y luego podemos mostrar cualquier JSX que queramos. Esto también es renderizado condicional y esto es una alternativa a escribir esto. Si tenemos un ganador, exhiba esto, de lo contrario , muestre nulo. Si recuerdas, nulo se evaluará a nada y eventualmente no se mostrará nada, pero esto puede ser tedioso escribir cada vez, por eso la gente suele elegir esta forma de escribir cosas. Pero hay que tener cuidado. Esta cosa de aquí, cuando verifiques la condición, debe ser un valor booleano. Si no va a ser un valor booleano sino que va a ser algo que es veraz, por ejemplo como cero, mostrará cero. Cero se considera un valor falso, pero este no es un booleano. Entonces la forma en que funciona el operador y, solo cuando esta condición devuelve exactamente false. Tenemos que asegurarnos de que este valor sea booleano si quieres usar este enfoque con final lógico. En nuestro caso, ganador ya es booleano, así que no necesitamos hacer eso. En el futuro definitivamente te toparás con esa situación, cuando recordarás de eso, sobre todo cuando vas a lidiar con una carrera y datos provenientes de APIs. Nuestra lógica es ser la siguiente. Si tenemos ganador, queremos mostrar ganador como ganador. Sólo voy a copiarlo y ponerlo aquí. Entonces podemos aplicar otra renderización condicional aquí y decir, si no tenemos ganador y no tenemos ningún movimiento, entonces podemos mostrar otra cosa. Si lo guardo, será autoformateado. Terminaremos con una estructura como esa. Entonces tendremos otra condición cuando no tengamos un ganador y no tengamos ningún nodo mover a la izquierda. Pero esta cosa no se ve fea, pero puede ser muy poco práctica y a veces muy difícil de leer. En lugar de hacer eso, podemos escribirlo de una manera más legible. Entonces, si recuerdas lo que hicimos de nuevo en el componente de placa, así creamos esa función cuadrada renderer de la que devolvemos el marcado JSX. Aquí, podemos aplicar exactamente el mismo enfoque, y podemos escribir las condiciones para el renderizado condicional dentro de esa función. Aquí lo vamos a contar. Algo así como renderiza el mensaje de estado, ¿de acuerdo? Esta función no aceptará nada como argumentos porque, bueno, aquí no tratamos ningún argumento. Obtenemos acceso a todos los datos que tenemos en el ámbito superior. Aquí sólo vamos a preguntar. Si tenemos ganador de esa función, vamos a devolver ganador es ganador. Entonces vamos a preguntar si no tenemos ganador y no nos quedan movimientos, significa que tenemos un empate, en este caso, mostramos cero y x altura. De lo contrario, técnicamente podemos agregar otra condición como si no tenemos ganador y no nos quedan movimientos, en este caso, los juegos continúan y mostramos, el siguiente jugador es el siguiente jugador, así. Sin embargo, podemos hacerlo como una sentencia return predeterminada de esa función porque no tiene ningún sentido aplicar esto si, porque esta es la última y entonces definitivamente se disparará solo cuando estos dos fallen, así que realmente no necesitamos verificarlo aquí o podemos hacerlo, vamos a verificarlo aquí o podemos hacerlo, mantenerlo así, vamos a verificar esa condición y en el final si no tenemos ninguna condición si que nos satisface en este caso devolvemos nada por si acaso algo sale mal para nosotros. Sin embargo, esto nunca sucederá. Vamos a envolverlo en div. siguiente jugador va a ser el siguiente jugador, no necesitamos ningún signo de dólar, en realidad ya no necesitamos nada de esto, solo tenemos render status message y en vez de toda esta extraña construcción, podemos simplemente llamar a la función de mensaje de estado de render. Ahora, se ve mucho más legible, ¿no? Volvemos a nuestro juego y vemos que el siguiente jugador es, lo cual es correcto, sigamos adelante y creamos un ganador y todo funciona como se esperaba pero vamos más allá y en realidad no tengamos ningún ganador aquí, bueno, eso es duro. Eso no es difícil, así que como puedes ver ahora, todas las plazas están ocupadas con algo, pero no tienes ningún ganador y eventualmente tenemos cero y x empatados, exactamente lo que estábamos haciendo lo cual es genial. Ahora, sigamos adelante y diseñemos eso porque puedes ver tenemos estos archivos de estilos aquí desde el principio, pero no hicimos mucho al respecto porque estábamos ocupados con toda esa funcionalidad, así que sigamos adelante y diseñemos ese mensaje de estado porque ya tenemos nuestros estilos aquí. Si miramos de cerca dentro de la historia, vamos a tratar con eso en el futuro, tenemos clase de mensaje de estado definir aquí, impresionante, así que vamos a mensaje de estado aquí y a ese elemento de envoltura a div. Vamos a agregar un mensaje de estado de nombre de clase, si guardamos, ya tenemos así, tenemos margen tal vez vamos a convertirlo en elemento H2, como era anteriormente pero realidad nada realmente va a cambiar porque tenemos tamaño de fuente, que se establece aquí, genial. Ahora vamos a agregar algo aquí porque como pueden ver, los elementos span que van desde un mensaje de estado también tiene font-weight normal, probablemente hay que pretendía que sea esta etiqueta H2. También tenemos clases aquí, texto verde y textos naranja, que podemos aplicar a nuestros jugadores x y cero, así que lo que voy a hacer, lo voy a hacer así, así que para este cero y x que tenemos aquí, podemos envolverlos en elementos span así, y a ese elemento span, realidad podemos agregar ventajas. X va a ser verde y cero va a ser naranja, así que agregamos las etiquetas verdes para x, para cero vamos a agregar más nombre del texto naranja, ahora se ve así, bastante genial. Entonces el siguiente, lo que tenemos que hacer es de alguna manera condicionalmente, cuando tengamos al siguiente jugador, es de alguna manera aplicar condicionalmente estilos, bueno, esto es algo nuevo de lo que no hemos hablado, así que necesitamos de alguna manera aplicar condicionalmente clases. Nuevamente, vamos a envolver al siguiente jugador en span y vamos a mostrar el siguiente jugador aquí, pero ahora necesitamos también aplicar dinámicamente clases basadas en el jugador, así que para span, vamos a pasar el nombre de la clase y en lugar de simplemente pasar cadena, vamos a pasar la expresión JavaScript, así que para eso de nuevo vamos a usar corchetes y aquí estamos va a preguntar. Si es Xnext, en este caso, vamos a aplicar textos clase verde de lo contrario vamos a aplicar texto clase naranja, así que como es un JavaScript, puedes usar cualquier método disponible para transformar de alguna manera aplicar, combinar, concatenar la cadena, y eventualmente será evaluada como la cadena de nombre de clase aquí, así que vamos a ver. Tenemos siguiente capa es cero y en realidad es naranja y a medida que jugamos el juego, puedes ver los cambios de color y los colores funcionan, lo que funciona de manera increíble encontrar. Entonces al final, también tenemos ganador como ganador así que la misma lógica que aquí, vamos a aplicar a ganador. Ganador es ganador, pero aquí esta vez vamos a preguntar si ganador es igual a x solo entonces usamos etiquetas verdes, lo contrario texto, naranja, vamos a comprobar rápidamente, genial, ganador es x Tal vez una cosa que podamos agregar aquí y que podría ser útil para el futuro y para nosotros ahora es que puedes ver ahora cada vez queramos exhibir algo, es siempre envuelto en un elemento, en este caso en etiqueta H2, en div pero ¿y si quiero no caer, no mostrar ningún div aquí en absoluto? Y si solo quiero mostrar ganador es, como es con la etiqueta span sin envolverlo en un div porque si abres markup, esta envuelto en el div, si no quiero hacer eso? Solo quiero mostrar ganador es y span sin ningún div, como directamente dentro de H2. En este caso, podemos usar algo llamado React fragment, así que React fragment es básicamente solo un elemento vacío, así que si elimino el div y si escribo React.fragment, así que importar React desde react porque ahora usamos nombres React es básicamente un componente, pero es como un componente vacío, solo un marcador de posición. Si voy a usar fragmento de React por todas partes aquí, refresco la página, juego el juego, abro marcado, aquí ves nada se rinde excepto ganador es, perdón, excepto que el siguiente jugador está en lapso, no tenía ningún elemento de envoltura. Nuevamente, React fragment básicamente representa un elemento vacío pero React fragment es una sintaxis muy amplia y es bueno saber que siempre puedes usarlo, sin embargo, el fragmento de React tiene una sintaxis más ligera. Si lo quitas y mantienes tus corchetes vacíos, así como así, esta es una versión corta del fragmento React. Podemos eliminar el espacio de nombres React de aquí y eliminar los fragmentos de React en todas partes, y simplemente mantener los corchetes vacíos así y funcionará, así que esto también es un fragmento de reacción, pero esta es una sintaxis corta del sin decir explícitamente react.Fragment, siéntete libre de usar cualquiera, prefiero usar esta sintaxis, menos código, mejor. Bien ya estamos terminados con mensajes de estado para siempre, así que sigamos adelante y cometamos nuestros mensajes, disculpe, comprometemos nuestros cambios porque bueno, hicimos mucho, hablamos de renderizado condicional, hablamos de estilos condicionales, estilos dinámicos, nombres de clases dinámicas y también mostramos el mensaje de sorteo, genial. Ahora, ya agregué todo al estado de puntada, esta vez vamos a usar la interfaz de usuario de VSCode, así que hago clic en el signo “más” aquí para escenificar todos los cambios, ahora están todos en el escenario y podemos escribir un mensaje aquí y presionar commit, pero prefiero seleccionar manualmente todo, pero prefiero seleccionar manualmente todo, pero quiero que se estadifique y luego escriba manualmente git commit y determine. Commit message va a ser esta obra o sí, mostrar mensaje de dibujo, aplicar estilos o componente de mensaje de estado , y eso es todo. En el siguiente video, vamos a comenzar con el historial del juego, vamos a hablar de cómo podemos introducir realmente esta característica de historia de juegos que podemos atravesar, esto va a ser divertido. Nos vemos ahí. 50. 11 Cómo implementar el historial de juegos: Hola. En este video, vamos a hablar sobre la historia del juego. En el último video, hablamos sobre el sorteo del juego se mostrarán los mensajes que aparecen aquí en la parte superior. siguiente jugador es, tenemos un ganador, tenemos empate, lo cual es increíble, pero esta vez vamos a hablar historia del juego para que podamos hacer click en cualquier movimiento que hagamos y luego recorrer la historia. Para lograrlo, necesitamos transformar realmente nuestro estado. La forma en que actualmente administramos un estado de juego, lo hacemos usando cuadrados y estados ISXNext. Eso está bien y vamos a seguir manejándolo de esta manera. No obstante, cambiaremos ligeramente su forma. Dado que la historia es algo de lo que debemos recordar porque podremos atravesar eso, necesitamos convertirla de alguna manera en una matriz. Déjame abrir Paint y mostrarte cómo exactamente vamos a representar el estado del juego. Debido a que es una historia, será una matriz de elementos. Será una matriz y dentro de esa matriz, cada elemento va a ser un objeto. Será básicamente una matriz de objetos y cada objeto en esa matriz tendrá dos claves, cuadrados e isxNext. Cada objeto en esa matriz representará estado del tablero de juego en el momento de nuestra mudanza. Para hacer un seguimiento de los movimientos que hacemos en el juego, nuestro CurrentMove, necesitamos un contador. Necesitamos rastrear de alguna manera cuál es nuestro CurrentMove para que podamos viajar en esa historia. Si hacemos clic en un elemento del historial, digamos que vamos a Mover Número 1, en realidad iremos a Mover Número 1 y nuestro CurrentMove será cambiado. Para eso, necesitamos otro estado para rastrear eso. Sigamos adelante y veamos cómo va a quedar esto en la realidad. Aquí en la parte superior dentro de App, voy a crear un nuevo estado, que vamos a llamar history y setHistory, y esto tiene que ser una matriz. Por defecto, ya tenemos estado de juego que está vacío, igual que tenemos aquí en la Línea 11 y 12. Vamos a crear una matriz vacía con un objeto dentro, y por defecto, serán cuadrados, que va a ser una matriz de nueve elementos llenos de nulos, y luego isxNext va a ser falso, tal como tenemos aquí. Podemos eliminar eso de manera segura. Entonces vamos a crear otro estado que va a representar nuestro CurrentMove. Seguimos adelante. Creamos CurrentMove y SetCurrentMove. Por defecto, nuestro CurrentMove será cero. Nuestro contador estará basado en cero. Genial. Ahora podemos ver ya que cambiamos todo, aquí tenemos muchos errores. Cambiemos eso. ¿Cómo podemos obtener último estado de tablero de juego que tenemos aquí? Podemos crear otra variable que va a ser nuestro valor derivado de los estados history y currentMove. Podemos llamarlo, digamos, GamingBoard. Esto va a ser historia y nuestro CurrentMove. En realidad, nos dará este objeto para nuestro CurrentMove. Ahora, en lugar de analizar solo cuadrados aquí, vamos a pasar gamingboard.Squares. Ya ves que hasta tengo el IntelliSense para eso. Impresionante. Ahora, HandlesQuareClick, vamos a tocar eso en un segundo. Vamos al mensaje de estado aquí. En este momento analizamos dos apoyos, ISXNext y cuadrados. Ahora todo está combinado bajo un solo objeto. Simplemente podemos pasar el objeto al mensaje de estado. Lo que voy a hacer, solo voy a analizar GamingBoard directamente al mensaje de estado. Voy a quitar estos dos apoyos. Voy a abrir mensaje de estado aquí. Ahora como analizo GamingBoard, en lugar de desestructurar ISXNext y cuadrados, haré GamingBoard. Aquí voy a desestructurar GamingBoard. Ahora, necesito escribir gamingboard.Squares, gamingboard.isxNext, y aquí también, gamingboard.isxNext. Pero en cambio, lo que voy a hacer ya que GamingBoard es solo un objeto con dos claves, cuadrados, e isxNext, voy a aplicar otra desestructuración aquí. Lo que voy a hacer desde el objeto GamingBoard, voy a desestructurar cuadrados e isxNext. Un recordatorio rápido. Esto es lo mismo. Esta sola línea nos reemplaza escribiendo gamingboard.Plazas así y gamingboard.ISXNext cada vez. Impresionante. Nos ocupamos del mensaje de estado. Vamos a tratar con todo lo demás. Para abordar, hacemos un análisis de cuadrados. Ahora tenemos gamingboard.Squares, y ahora de alguna manera tenemos que lidiar con HandlesQuareclick. Bueno, la lógica es que tenemos historia y cada vez que creamos un nuevo movimiento, cada vez que jugamos al juego, necesitamos extender nuestro array. Necesitamos agregar nuevos valores a esa matriz. Dentro de HandlesQuareclick, sigamos adelante y hagamos eso. Primero, ahora tenemos gamingboard.Plazas aquí. Entonces en lugar de establecer cuadrados, vamos a hacer SetHistory, y volveremos a esa lógica en un segundo. En lugar de setisXNext, ¿qué vamos a hacer? Sólo vamos a incrementar nuestro currentMove. Siempre que hagamos clic en un cuadrado, el movimiento, el contador se incrementará. Para eso, si recuerdas nuestro ejemplo de videos anteriores sobre contador, este es exactamente el caso. CurrentMove, y podemos nombrarlo como CurrentMove inside. No obstante, ya tenemos ese nombre aquí como nuestro estado, así que simplemente nombrémoslo mover. Mover va a ser movimiento más 1. Sólo vamos a incrementarlo de nuevo. Move va a representar nuestro estado actual para CurrentMove. Dentro de SetHistory, en lugar de CurrentSquares, vamos a llamarlo CurrentHistory, y ahora necesitamos extender de alguna manera la historia. En primer lugar, necesitamos conocer nuestro último estado de juego. Para hacer eso, necesitamos tomar el último elemento de la matriz de historia. Podemos hacer eso escribiendo. Vamos a nombrar tal vez esa variable lastGamingState va a ser historia, y vamos a agarrar el último elemento haciendo history.length menos 1. De esta manera, podemos agarrar último elemento de la matriz de historia, que de nuevo va a ser un objeto de esta forma. Ahora, lo que podemos hacer, en realidad podemos calcular un nuevo estado que vamos a agregar a la matriz de historia. Ya tenemos la lógica aquí. En lugar de return, vamos a ponerlo en una nueva variable llamada nextGamingState. En lugar de currentSquares, vamos a usar lastGamingState.squares, y en lugar de isxNext, vamos a hacer lastGamingState.isxNext. Ahora, para establecer el nuevo valor para el estado histórico, necesitamos regresar de esa devolución de llamada. A partir de esa devolución de llamada, lo que vamos a hacer, vamos a concatenar lo que acabamos de crear aquí, NextGamingState, a nuestro estado histórico actual. Podemos usar el método array.concat para eso. CurrentHistory.concat y vamos a introducir un nuevo objeto aquí. Necesitamos analizar un objeto de esta forma. Plazas va a ser SiguienteGamingState. Lo llamamos NextGamingState, llamémoslo NextSquaresState. Vamos a analizarlo así. ISXNext va a ser, nuevo, el flip de un booleano como lo hacíamos antes, pero esta vez nos vamos a referir a nuestro latestGamingState que tenemos aquí, así que latestGamingState.isxNext. Vamos a aplicar la negación para voltear al booleano y ahora todo va a funcionar mágicamente. Volvamos aquí y probemos el historial de registros de consola y CurrentMove, ambos, para ver qué está pasando realmente. Vamos a consola historial de registro y CurrentMove. Por cierto, estoy en consola registrando ambos dentro del objeto. Sólo estoy haciendo eso por mi preferencia personal. De esta manera, es más fácil verlas en consola. No hay ninguna razón especial detrás de ello. Puedes conectarlos en consola así así , uno tras otro. Pero si la consola los registra como un objeto, es más fácil de ver. Volvemos al juego, inspeccionamos, vemos la consola, abrimos ese objeto. Tenemos CurrentMove, cero, tenemos historia, que es una matriz. primer elemento es este objeto con cuadrados de nulos. Ahora, sigamos adelante y jueguemos el juego y veamos cómo cambia esto. Hago clic en algún lugar varias veces y si abro estos, puedes ver que nuestro siguiente movimiento índice currentMove se incrementó y en cada movimiento siguiente, se incrementa el índice. Crece. Inicialmente, era solo una matriz de nulos dentro del primer elemento, luego jugamos el juego, lo agregamos a la matriz de historia, luego jugamos de nuevo, agregamos más elementos a la historia, así que de esta manera somos capaces de rastrearlo. Ahora bien, la pregunta es, ¿cómo podemos realmente mostrarlo? Ya que tenemos una matriz, es muy fácil de hacer. Si volvemos al componente app, aquí necesitamos mostrarlo de alguna manera. Lo que sugiero es crear otro componente dentro de la carpeta del componente, que vamos a nombrar history. Este va a ser componente de historia de Yan. Vamos a exportarlo por defecto de la historia JSX. Por ahora, sólo será una función vacía. Dentro de la app, voy a importar el historial del historial de componentes. Me desplazaré hacia abajo y renderizaré ese componente histórico debajo del tablero. Lo guardo, y ahora dentro de la historia, queremos mostrar de alguna manera todos los pasos que hemos hecho. En la realidad, se ve así. Cuando tienes una matriz de elementos, normalmente quieres que cada elemento represente algo en el marcado. Por ejemplo, si tenemos una lista de frutas representadas como una matriz, digamos manzana, kiwi, y algo más en react, generalmente se ve así. Toma una matriz de elementos y asigna cada elemento de matriz al marcado JSX. Esta cadena de apple se transforma en div, que muestra esta cadena de apple, y lo mismo para el resto de los elementos. componente de historia, vamos a pasar nuestra matriz de historia como prop de historia. Dentro de la historia, podemos apuntalarlo usando distracción del objeto props. Desde el componente, vamos a volver al marcado JSX, los elementos envoltorios serán div, y vamos a usar un elemento de lista ordenada para eso. Aquí necesitamos mapear cada elemento de matriz en nuestra historia al marcado JSX. Voy a abrir llaves para interpolar JavaScript en JSX. Voy a hacer history.map. Ahora, sin ninguna lógica extra por ahora, que va a mostrar div, así que desde d.mapcallback, estoy devolviendo también el marcado JSX y estoy diciendo hola aquí. No te importa el mensaje rojo ahora, podemos adjuntarlo en un segundo. Sólo vamos a guardarlo y a ver qué tenemos. Tenemos hola. Jugamos el juego, y puedes ver que cada elemento de nuestro array está mapeado en realidad al div correspondiente dentro de HTML. Como tenemos seis elementos, cada elemento fue mapeado al div aquí. Por cierto, acabo de notar que también tenemos algo mal porque mostramos solo los de aquí. A ver. De alguna manera cambié la lógica. Vamos a comprobar rápidamente que funciona. Genial. Estaba hablando de que cada elemento de la matriz está mapeado al div correspondiente. Lo hicimos usando el método.map. Sin embargo, ya notaste que hay advertencia dentro de la consola, y además si me pongo el cursor aquí, será lo mismo, faltando prop clave para el elemento en iterador. El caso es que cuando utiliza.map dentro del marcado JSX para mapear el elemento de matriz a JSX, debe pasar siempre el prop clave para los elementos JSX que se están mapeando. La razón de eso es porque React necesita realizar un seguimiento interno de cada elemento que asignó al marcado JSX en caso de que se cambie en el futuro. La razón detrás de esto es porque esta matriz es dinámica, cada elemento JSX mapeado dentro esa matriz debe estar representado de manera única. Para ayudar a reaccionar representado de manera única, identificar de manera única cada elemento de la matriz, necesitamos pasar el prop clave y el prop clave debe ser único para cada elemento. En nuestro caso, cada elemento array es un objeto, cuadrados y claves IsNext, así que aquí no tenemos nada especial. Lo que podemos hacer en casos simples, podemos simplemente pasar un índice de elemento array como la clave porque será único para cada elemento, porque para el primer elemento será cero, para el segundo, uno, y así sucesivamente. Identificará de manera única el elemento dentro de esa matriz. Será suficiente para nuestro caso. Vamos a agarrar ese índice aquí. Primero, tenemos el objeto, con los cuadrados y IsNext. No lo necesitamos, pero aún así, necesitamos definirlo porque de lo contrario, no podremos agarrar índice, que va como segundo argumento. Ya que no vamos a usar objeto, que le va a nombrar guión bajo, y vamos a agarrar índice. Para la clave, vamos a pasar índice así como así. Si lo guardo, si me refresco, se puede ver ahora todo se quedó igual, pero ya no tenemos ningún problema con la clave, porque ahora cada elemento dentro la matriz se identifica de manera única. Ahora tenemos índice aquí, y en realidad también podemos interpelar eso dentro del div y podemos mostrar ese índice. Lo que podemos decir aquí mover es índice. A ver, ¿qué tenemos? Tenemos movimiento es uno, mover es 2, 3, y 4. Genial. Se ve bastante bien hasta ahora, pero antes que nada, no queremos mostrar el movimiento es cero. Queremos mostrar algo así como nuevo juego o poner en marcha el juego. Aquí vamos a aplicar renderizado condicional. En lugar de hacer eso, vamos a preguntar, si índice es igual a 0, entonces vamos a mostrar texto nuevo juego como este. De lo contrario, vamos a abrir backticks, y vamos a decir, ir a mover hashtag. Aquí mostraremos índice. Veamos cómo se ve esto. Si actualizo la página, tenemos nuevo juego por defecto. Si juego el juego, ya puedes ver que tenemos salida mucho más limpia. No obstante, en vez de nuevo juego, tal vez vamos a llamarlo, ir al inicio del juego. En realidad, se puede ver que no se puede hacer clic en absoluto. Vamos a convertir ese div en elemento botón de tipo un botón, lo guardo y ahora lo ves roto. No obstante, si recuerdas, tenemos nuestros estilos en styles.css. Para esta historia, en realidad podemos aplicar este conjunto de clases que ya están escritas aquí. Primero, tenemos history-wrapper, que podemos asignar a div history-wrapper. Entonces tenemos la historia misma. Este será nuestro historial de listas desordenadas. Después dentro de la historia, cada elemento li será estilizado. Bueno, en realidad, bien, porque olvidamos que tiene que ser li elemento. En lugar de botón, vamos a escribir li aquí y vamos a mover ese botón dentro. Todavía tenemos ese mensaje para la llave, porque te dije que la clave debe ser asignada, debe pasarse sólo al elemento envoltorio. Botón está dentro de ese elemento. El elemento en sí es un li. Necesito pasarle la llave al elemento li. Ahora lo guardo. También tenemos clase btn-move aquí. Podemos darle a ese botón className btn-move. A ver, el resultado. Se ve bastante bien hasta ahora. puede ver que se ve mucho, mucho más agradable. Pero la cosa es que ahora no podemos hacer nada. Necesitamos agregar de alguna manera la función de desplazamiento. La lógica, donde estamos vamos a hacer eso se va a colocar dentro de App jsx. Ya tenemos el estado CurrentMove, que representa en qué paso nos encontramos actualmente. Dentro de aquí, podemos crear una función que cambiará nuestro CurrentMove. Vamos a llamar a esa función moveTo. Ese MoveTo esperará un argumento. Llamémoslo mover. ¿Qué va a hacer? Simplemente actualizará el estado a la mudanza que se está aprobando. Siempre que los llamamos MoveTo, nosotros, digamos cinco, establecerá MoveTo cinco. Ahora sólo vamos a pasar esa función moveTo, a la historia como un apuntalamiento así. Dentro de la historia, vamos a agarrar MoveTo. Aquí podemos adjuntar ese MoveTo al evento onclick. Para ese elemento button, vamos a especificar el controlador de eventos onclick. Vamos a pasar una función que llamará moveTo con el índice de ese movimiento. Algo así. Yo lo guardo. Refresco la página. Juguemos el juego. Tenemos múltiples movimientos aquí. Siempre que hago clic aquí, tengo moveTo no es una función eso es porque de nuevo no guardé App jsx. Vamos a intentarlo de nuevo. Yo lo juego, hago clic en “Movimientos” y se puede ver el estado del juego realmente cambia. Funciona como se esperaba. Pero para que sea más fácil de usar, resaltemos nuestro movimiento actual en el que nos encontramos actualmente. Volvemos al código y aquí dentro de la historia, podemos volver a aplicar clases dinámicas. Si miramos dentro de estilos, tenemos clase activa aquí que se puede dar a btn-move. Ya tenemos la clase btn-move, pero es estática para todos los elementos. Ahora, vamos a abrir llaves. Vamos a pasar btn-move aquí. Vamos a convertir esa cadena en plantilla de cadena para que podamos aplicar interpolación de cadenas, lo que nos dará la posibilidad usar JavaScript dentro de esa cadena. Aquí, vamos a hacer una lógica muy sencilla. Si index o digamos si currentMove es igual a index, entonces este elemento va a estar activo y se aplicarán estas teselas. Vamos a dar una clase activa de otra manera, vamos a darle una clase vacía. Pero no tenemos CurrentMove aquí así que tendremos que recibirlo como propio de nuevo y dentro de App jsx. Voy a pasar nuestro currentMove justo aquí arriba. CurrentMove es igual a CurrentMove. Algo así. Ahorremos y veamos. Bueno, ahora, en realidad se está convirtiendo en verde. Inspeccionemos el marcado HTML. Tenemos btn-move, y tenemos clase activa. Exactamente lo que escribimos porque índice del primer elemento es cero y currentMove es cero por defecto, este es nuestro estado inicial. Jugamos el juego y podrás ver como cambia el className y el último elemento siempre tiene clase activa por defecto. Pero cuando vamos a hacer clic en “Historial” para recorrerlo, puedes ver cómo cambia ClassName. Bastante genial. Algo así. No obstante, intentemos jugar el juego. Ir a algún movimiento y después continuó jugando el juego. Se puede ver algunas cosas raras que están pasando aquí. El problema es que nuestro estado de juego no está sincronizado con el movimiento al que viajamos de regreso. Eso es problemático. Qué queremos hacer siempre que estemos viajando por la historia y si hacemos clic en la plaza, queremos sobrescribir la historia. Ahora, necesitamos agregar otra pieza de lógica aquí para lograrlo. Necesitamos detectar si estamos atravesando la historia y si estamos atravesando, queremos sobrescribir. De lo contrario, queremos mantenerlo como está ahora mismo. Volvamos a App jsx y los insights establecen el historial. Detectemos primero si estamos atravesando. Podemos hacerlo introduciendo una nueva variable iStreVersing. La lógica será la siguiente. Si nuestro currentMove más 1 no es igual a la monedaHistoria.longitud. Entonces podemos intentar y consola registrarlo y ver si esto es cierto y por qué estamos haciendo movimiento actual más 1. De nuevo, vamos a consolar un CurrentMove y vamos a la consola registrar history.length. Vamos a llamarlo su longitud de historia. Veamos por qué necesitamos agregar más 1 aquí? Si abro “Consola” y juego el juego, puedes ver que la duración de nuestra historia siempre es más 1. Entonces el CurrentMove que tenemos. Esto se debe a que el mínimo de longitud del historial es uno que se establece por nuestro estado predeterminado aquí, mientras que nuestro currentMove, basado en índices cero. Para normalizar eso, necesitamos agregar más 1 al movimiento actual para que coincidan entre sí. Simplemente verificamos. Si “CurrentMove” es igual a la longitud que tengamos, entonces sabemos que estamos en el último movimiento y no estamos atravesando la historia. Pero si no estamos en nuestro último movimiento, entonces estamos atravesando, algo así. Ahora, necesitamos de alguna manera también cambiar nuestro “LastGamingState” Porque cada vez que estamos en nuestro último movimiento siempre concatenar, agregamos al historial de juego actual al final de la matriz. No obstante, si queremos sobrescribir, queremos sumar a la historia, que está en el punto de este movimiento. No nos importa mudanza Número tres y lo que pase por debajo de ella. Solo nos importa la historia en este momento. Tenemos que escribir aquí la siguiente lógica. Tenemos que modificarlo. Podemos preguntar, si estamos atravesando, en este caso por favor tome la historia actual en la mudanza actual. De lo contrario, toma el último elemento de esa historia. La lógica con “NextSquareState” no cambia, y ahora aquí, en lugar de concat de historia actual, también necesitamos considerar una matriz base diferente a la que vamos a concatar nuevo estado de tablero de juego. Vamos a crear una nueva variable y nombrarla algo así como base tal vez. Aquí vamos a volver a preguntar, si estamos atravesando en este caso por favor, de la historia actual, corte solo estos elementos aquí. “Ir al inicio del juego”, “ir al movimiento 1”, “ir al movimiento 2". Cortamos del índice cero al índice historia actual del último más 1. De lo contrario, mantenga el historial actual como matriz base. En lugar de último queremos usar el último estado de juego, y en lugar de la historia actual quiero usar base. Volveremos a esa lógica en un segundo. Se ve aterrador lo sé, sobre todo con todos estos anidación. Pero veamos cómo se ve nuestro juego ahora mismo. Viajamos por la historia, todo está bien. Estamos en movimiento Número 3, y si quisiera sobrescribir el historial, ahora puedo hacerlo. Se puede ver que básicamente despojamos al resto de la historia y la anulamos con nuestro nuevo movimiento aquí. Así como así. Funciona a la perfección. Ahora, ¿qué pasa con la lógica aquí? Nuevamente, slice se usa para rebanar algunos elementos de esa matriz, de la matriz de historia actual. Cortamos desde el primer elemento hasta el índice de historia actual de más 1. Simplemente tomamos índice de menos estado de juego que tenemos y le agregamos uno porque, nuevamente, tenemos “CurrentMove” basado en cero. Puede ser confuso, pero solo repasarlo un par de veces y tendrá sentido. No es tan sencillo a primera vista, pero no hay nada demasiado complejo en ello, y realmente no es necesario pensar demasiado en ello. Ahora tenemos historia de juego y funciona increíblemente bien. Somos capaces de viajar, somos capaces de anular el historial sin ningún problema. Perfecto. Ahora, parece que hicimos mucho y en realidad hicimos mucho. Eliminemos ese registro innecesario de la consola y veamos si necesitamos agregar algo aquí. A lo mejor podamos agregar un mensaje aquí, algo así como el historial actual del juego. Veamos cómo se ve. Se ve así, lo cual está bien, y creo que esto será suficiente para este video. Intentemos comprometernos todo lo que hicimos aquí. Eso es mucho. Voy a detener la app, voy a agregar todo al escenario, y voy a comprometerlo todo y voy a llamarlo editar historial del juego. Básicamente esto es exactamente lo que hicimos. Transformamos este estado en una matriz. Modificamos nuestra lógica y ajustamos todo a la nueva forma de estado que introdujimos con la historia. GIT commit agregó el historial del juego.Impresionante. Quizás agreguemos realmente una cosa más aquí. Es completamente innecesario pero nos va a ayudar para el futuro video, y te voy a dar un pequeño ejercicio hasta el siguiente video. Voy a volver a iniciar el servidor, y lo que voy a hacer, voy a mover esa matriz como estado inicial fuera del componente. Lo voy a crear aquí y voy a llamarlo nuevo juego. Yo mayúscula todo porque esta es la definición de valor global constante que no vamos a cambiar, y le voy a dar esta matriz, así. Para estado inicial, voy a pasar nuevo juego. En realidad puedo moverlo dentro del componente, pero es mejor mantenerlo afuera. La razón de eso es porque si recuerdas, cada vez que tenemos un nuevo renderizado de fila, JavaScript dentro se ejecuta, y cada vez que JavaScript se ejecuta , vuelve a crear todas las variables nuevas, y como nuevo juego es algo estático que no necesitamos recrear en cada renderizado de fila solo podemos moverlo afuera. Esta es solo una optimización muy pequeña, pero nos servirá solo para GIT. ¿Por qué hicieron eso? En el siguiente video lo que vamos a hacer, vamos a agregar un botón en el que hacemos clic y en el que restablece el juego. Aquí tienes un pequeño ejercicio para ti hasta el siguiente video. Intenta hacerlo tú mismo. Crea un botón, muéstralo en algún lugar por aquí, y cuando haces clic en él, en realidad actualiza el estado de juego al estado inicial. Nuevamente, juegas el juego, haces clic en el botón, éste actualiza el estado. Intenta implementar eso usando esa nueva variable de juego que creamos fuera del componente. Voy a comprometer eso, y decir movido al nuevo estado del juego fuera del componente app, y voy a empujar todo para dominar y el siguiente video nos ayudará a implementar el reinicio del juego. Prueba y haz ejercicio. Nos vemos en la siguiente. 51. Cómo agregar el botón de restablecimiento del juego: Oye, ¿cómo estuvo tu ejercicio del último video? ¿Lograste hacer eso? A ver. En este video, agregaremos un botón que restablecerá nuestro estado de juego. Vamos. Entonces justo aquí arriba en el marcado, justo encima del historial actual del juego, vamos a agregar un elemento de botón de tipo botón y vamos a decir que va a empezar nuevo juego. Entonces cuando hacemos clic en él, se supone que debe hacer algo. Vamos a poner aquí el manejador OnClick, y para este evento OnClick, vamos a especificar OnNewGameStart, y que OnNewGameStart va a ser una función que vamos a crear aquí y esa función, lo único que hará, solo actualizará el estado. En el video anterior, al final, trasladamos nuevo juego al exterior del componente y esto nos ayudará ahora. Ahora en realidad podemos llamar, establecer historia y podemos pasar nuevo juego, que es nuestro estado inicial. Además de la historia, también necesitamos reiniciar el contador para nuestro movimiento actual. Vamos a seguir adelante y llamar a establecer movimiento actual y ponerlo de nuevo a cero. A ver. Si lo guardo, juego el juego, hago clic en “Iniciar nuevo juego”. Todo se ha refrescado ahora. Sin embargo, es unstyled y si miramos dentro del estilo CSS, tenemos aquí, .btn-reset class. Sigamos adelante y usémoslo. Entonces para ese botón, voy a pasar nombre de clase y voy a pasar btn-reset. Pero si ves, también tiene la clase activa aquí. Lo que quería hacer cuando presenté esa clase activa es que cada vez que tenemos un ganador, este botón se activa. Así que vamos a aplicar la lógica dentro del nombre de clase aquí. Porque vamos a aplicar JavaScript, nuevamente, usamos corchetes y antes que nada, esta va a ser plantilla de cadena con backticks. Vamos a darle estática, clase btn-reset y luego vamos a abrir las comillas de interpolación de cadena y dentro de estos corchetes para la interpolación de cadena, vamos a preguntar. Entonces si tenemos un ganador, por favor dale clase activa de lo contrario, manténgalo vacío. Algo así y ahora veamos. Entonces tenemos este bonito botón aquí y si jugamos el juego, y vamos a tener un ganador, y siempre que tengamos un ganador, este botón se activa. Si atravesamos la historia, todo vuelve a funcionar como se esperaba. Se ve bien. Eso es todo para reiniciar el botón. Como puedes ver, nada complicado así que sigamos adelante y lo cometamos. Voy a agregar estos cambios al estado escénico y luego me voy a comprometer. El mensaje de confirmación se va a agregar reinicio de juego o iniciar un nuevo botón de juego. Impresionante. Empujo todo a GitHub y te voy a ver en el siguiente video. 52. 13 Cómo destacar el ganador del juego (combinación ganadora): Hola a todos. En este video, ¿qué vamos a hacer? Podemos mostrar la combinación ganadora en caso de que tengamos un ganador, y también, pero cambiaremos el color de las casillas porque ahora son negras. Ahora mismo, tal vez comencemos primero con los colores. Si vamos al cuadrado de componentes, la lógica aquí será más o menos la misma ya que la tenemos dentro del mensaje de estado. Si recuerdas, aplicamos className dinámico aquí. Si ganador es X es texto verde de lo contrario es texto naranja. Las clases que hemos definido aquí dentro de estilos, básicamente solo le da el color al elemento definido por la variable SAS aquí. Aquí dentro del cuadrado, simplemente vamos a convertirlo a expresión JavaScript. Vamos a cambiar las cotizaciones de comillas dobles a backticks. Voy a seguir adelante y voy a preguntar si nuestro valor es X, entonces vamos a mostrar texto verde, lo contrario, vamos a mostrar texto naranja. Así como así, nada complicado. Se puede ver ahora todo convertido en hermoso sistema de colores. Si hacemos clic, si jugamos, funciona. Genial. Ahora, sigamos adelante y pensemos cómo podemos destacar realmente las casillas ganadoras. Para poder destacar las plazas ganadoras, necesitamos conocer las plazas. Necesitamos conocer sus índices. Necesitamos saber que si tenemos ganador X para esa combinación ganadora, tenemos casillas ganadoras e Índice 2. Entonces tenemos 0, 1, 2, 3, Índice 4 e Índice 6. Estas son nuestras plazas de ganancias. Calculamos ganador dentro de calcular función ganador, y devolvemos solo el cuadrado ganador, solo su valor. Sin embargo, a partir de esta función, también podemos devolver cuadrados ganadores. Porque aquí comprobamos contra todas las combinaciones ganadoras posibles. Ya tenemos estas variables a, b y c, están estructuradas aquí, que representan índices ganadores, la combinación ganadora. A partir de esa función calcular ganador, podemos devolver un objeto en lugar de solo nulo o el ganador. Podemos devolver un objeto con el ganador y las casillas ganadoras. En caso de que no tengamos ningún ganador, ahora mismo devolvemos nulo. Pero cambiémoslo a un objeto. Volveremos ganador o nulo, y ganar cuadrados va a ser un array vacío. Pero en caso de que tengamos un ganador vamos a devolver un objeto, ganador va a ser cuadrados c o cuadrados a o cuadrados b, no importa. Pero para ganar plazas, vamos a devolver líneas i o en realidad podemos devolverlo así. Podemos crear una nueva matriz y luego podemos especificar explícitamente que estamos devolviendo a, b y c, o podemos especificar una línea a líneas i. Ahora volvemos a J6. Ahora este ganador es un objeto. Si destaco también me muestra un objeto. Puedo usar esta estructura aquí. De la estructura de ID de objeto que regresa, llave ganadora y casillas ganadoras. Ganador y un cuadro ganador. Ahora podemos pasar estos cuadrados ganadores hacia abajo al componente de tablero como puntal y manejar esa lógica ahí. Pasaré casillas ganadoras a bordo, y dentro de tablero, agarraré casillas ganadoras y a ese componente cuadrado que entraría aquí. Puedo pasar un prop que dice si este cuadrado es un cuadrado ganador o no, y luego aplicar algo de lógica dentro del componente cuadrado. En render square voy a comprobar si el cuadrado es un cuadrado ganador. Voy a crear solo una variable dentro render square y llamarlo es ganar cuadrado. Los cuadrados ganadores son una variedad de índices ganadores. Como 0, 1 y 2. Por ejemplo, tomemos esa combinación. Tenemos que verificar si la posición de ese cuadrado está dentro de la matriz de cuadrados ganadores. Si esa es la verdad, entonces sabemos que la plaza es parte de la combinación ganadora. Simplemente podemos verificar winningsquares.Incluye esta matriz incluye la posición global del método. Eso es. Entonces podemos pasar este cuadrado ganador mientras me desplome al componente cuadrado. Si abrimos componente cuadrado, vamos a moverlo aquí. Dentro de la plaza ya que pasamos es ganar plaza. Agarramos este cuadrado ganador del objeto de utilería. Aquí podemos aplicar otro className dinámico basado en este cuadrado ganador booleano. El punto incluye método devuelve como un booleano que indica si esta matriz incluye este elemento. Ya aplicamos apellido dinámico aquí basado en el valor. Podemos hacer exactamente lo mismo para es ganar plaza. Yo sólo voy a extender esa cadena con otra interpolación y voy a preguntar si esto es ganar cuadrado, por favor aplique algún className y algo className va a ser, si abrimos estilos, CSS, dentro tenemos esa clase ganadora. Esa clase ganadora adjunta la animación de texto a escala definida aquí, lo que aumenta el tamaño de fuente de manera infinita. Volvamos a la plaza. Si se trata de una plaza ganadora, adjuntamos clase ganadora. De lo contrario, adjuntamos una clase vacía. Veamos si funciona y después de eso vamos a hacer algo al respecto a esta diapositiva porque ves que se ve un poco desordenada en este momento. Tengamos un ganador. Boom. Efectivamente funciona. Sólo mira eso. Aquí tenemos todo en su lugar. Bastante genial, ¿no? Siempre que atravesamos la historia, y si volvemos a últimos movimientos aún la animación estará ahí. Si inspeccionamos el marcado, tenemos la clase ganadora unida a cada cuadrado que forma parte de la combinación ganadora. Bastante genial. Ahora hagamos algo con esa cuerda porque, bueno, se ve un poco desordenada. realidad no podemos hacer mucho al respecto. Podemos dividirlo en múltiples variables y luego combinarlo todo junto, tal vez algo así como ColorClassName. Entonces podemos cortar esa lógica desde aquí, ponerla así, entonces tal vez podamos decir algo como WinningClassName, y luego exactamente hacemos lo mismo. Acabamos de cortar esa lógica, ponerla aquí. En lugar de usar esta lógica en línea, como hicimos ahora mismo, que va a pasar la variable. Esto va a ser ColorClassName. Interpolamos este valor de variable dentro esa cadena y hacemos lo mismo aquí, WinningClassName. Ahora, se ve mucho más limpio. Básicamente separamos la lógica en múltiples líneas. Lo que prefieras. Si quieres que sea un poco más limpio de esta manera está bien. Si te gustó de la manera desordenada, siéntete libre de hacerlo. Algo así tenemos la combinación ganadora, se ha destacado con la historia del juego. Genial. Creo que en el siguiente video, vamos a hacer los preparativos finales y vamos a darle algunas cosas más, tal vez solo texto adicional, más estilos. Finalmente tendremos la app preparada para ser desplegada en un hosting. Impresionante. Ahora, antes de que terminemos ese video, eliminemos los comentarios, los registros de la consola y cometamos todo. Vamos a hacer un resumen de lo que hicimos así que modificamos calcular cuando el retorno devolvió ese valor a un objeto con dos claves, cuadrados ganadores y ganadores, luego pasamos esos cuadrados ganadores a su componente de tablero. Dentro del tablero, detectamos si el cuadrado por el que pasamos es un cuadrado ganador, y en base a ese componente cuadrado interior, aplicamos dinámicamente nombres de clase para alternar la animación. Algo así. Vamos y cometamos todo. Git agrega eso. Mensaje va a ser resaltado combinación ganadora. Impresionante. Empujemos todo. Hasta la siguiente, nos vemos ahí. 53. 14 toques finales: Hola. En este video, le daremos un toque final a nuestra aplicación antes de su implementación. Bueno, si vamos a nuestros estilos, en realidad aquí, al elemento body, aplicamos esta fuente Roboto, pero realmente no la tenemos en nuestro PC. No lo tenemos en ningún lado. ¿De dónde vino? El caso es que en realidad no se aplicó. Vamos a arreglar eso. En el invitado que hemos compartido con nosotros, tenemos índice HTML aquí con algunas propiedades. Si miramos dentro de nuestro índice HTML, no tenemos ese enlace a la hoja de estilo que tenemos aquí. La hoja de estilo, lo que va a hacer, descargará la fuente Roboto de las API de Google. Sólo vamos a incluir eso y con esa línea, si refrescamos la app, nada cambia porque no ejecutamos el servidor dev. Ejecuto el servidor, vuelvo a la app. Ahora en realidad tenemos aplicada la fuente Roboto. Si elimino esta línea, verá los cambios de la familia de fuentes. Pero en cuanto no cargamos la fuente que especificamos en la hoja de estilo, todo funciona. Genial. Ahora agreguemos el título a nuestra app en la parte superior. Aquí dentro de la aplicación, justo encima del componente de mensaje de estado, vamos a mostrar una etiqueta de título h1 simple y le vamos a decir TIC TAC TOE. Para hacerlo más atractivo, podemos cambiar el color del TAC. Vamos a envolverlo en un elemento span y darle un nombre de clase de texto verde. Vamos a guardarlo. Ahora se ve mucho mejor, y creo que realmente deberíamos eliminar la propiedad font-weight bold título actual del historial del juego. Podemos hacerlo aplicando estilos en línea. Bueno, lo cual es genial. No lo escuchamos, o no lo vimos antes. La única forma en que aplicamos estilos hasta ahora en la aplicación era usando la propiedad de nombre de clase. Los nombres de clase se definen aquí dentro del archivo SaaS. Sin embargo, ¿y si no tenemos ningún archivo CSS o archivos SaaS? ¿Cómo podemos aplicar estilos? Bueno, sin React en solo archivo HTML, podemos tener dos tipos de estilos. Podemos dar a los elementos nombre de clase, o podemos pasar estilos en línea. Lo mismo podemos hacer aquí en React. A esta historia del juego, podemos pasar la propiedad de estilo y la propiedad de estilo debe ser un objeto. Debemos especificar estilos usando JavaScript, no con CSS, sino con JavaScript. Vamos a escribir CSS con la ayuda de JavaScript, y esto se llama inline styling. Queremos eliminar font-weight bold del elemento title que tenemos aquí. El estilo del elemento va a ser normal del font-weight. Aquí tenemos que pasar el peso de la fuente normal así como así. A ver si funcionó. Si inspeccionamos el elemento, puedo ver estilo, font-weight normal. Estos son estilos en línea. El objeto JavaScript que pasamos aquí se convirtió a esa cadena de estilo inline. Puedes ver que no especificé el guión entre las palabras de fuente y peso porque cuando especificas estilos en línea, tienes que usar la sintaxis del caso camel. Si tu propiedad tiene guión entre palabras, o tiene espacios, lo que sea, siempre lo reemplazas con estuche de camello. Por ejemplo, familia de fuentes. Tendrías familia de fuentes en camello case way. Algo así. Vamos a aplicar estilos en línea en otro lugar. Si vamos al historial de componentes, tenemos aquí este botón que representa este ítem en la lista. Hagámoslo audaz siempre que esté activo. Si abrimos los nombres de las clases, veamos si ahí está en negrita. En realidad es audaz. Lo que podríamos haber hecho si no hubiéramos usado ningún estilo, podríamos haber hecho lo siguiente si vamos a la historia. Aquí me hubiera pasado estilo y especifico, se pueden ver corchetes dobles aquí. Los primeros corchetes es especificar que usaremos JavaScript dentro y segundo entre sus corchetes significan que este va a ser un objeto al que pasaremos un objeto dentro. Por eso aquí tenemos corchetes dobles. Propiedad font-weight, podríamos haber preguntado, si el movimiento actual es igual al índice, será negrita, de lo contrario normal. Si no teníamos estas clases, vamos a eliminarlo y a ver si funcionó. Si me acerco, juego el juego, se puede ver que el elemento para el que esta condición es verdadera se vuelve audaz. Básicamente, nuestro movimiento actual se vuelve audaz. De lo contrario, tiene font-weight normal. No lo necesitamos para este elemento específico porque esto ya se ha gestionado dentro de CSS. Puedes ver que tiene font-weight bold cuando está activo, así que realmente no necesitamos estilos inline aquí. Creo que esto es todo. Yo diría que hemos terminado con nuestra aplicación. Tenemos toda la funcionalidad, tenemos todos estos estilos. Todo funciona a la perfección y se ve increíble. Siéntase libre de modificar cualquier cosa, siéntase libre de aplicar sus propios estilos, siéntase libre de jugar con él, extenderlo o tal vez cambiar algo. No hay requisitos estrictos de que esto tenga que hacerse específicamente de esta manera. Tú eres el desarrollador aquí, y tú eres el que decide. Si necesitas cambiar el título aquí, siéntete libre de cambiar el título. Si quieres incluir metaetiquetas adicionales dentro de la cabeza, siéntete libre de hacerlo. Ya terminamos aquí. Este es el estado final de nuestra app. En el siguiente video, vamos a hablar de despliegue. Pero antes de terminar este video, vamos a terminarlo y vamos a comprometerlo todo. Voy a abrir terminal; voy a comprometerlo todo. Voy a especificar los cambios que hicimos, así que agregamos la fuente y agregamos el título. Se agregó el título del juego TIC TAC y se incluyó la fuente Roboto. Vuelvo a empujar todo a GitHub. Como siempre, nos vemos en la siguiente. 54. 15 despliegue para aumentar: Hola ahí. En este paso, tenemos nuestra preciosa app terminada. Se ve hermosa. Tiene toda la funcionalidad. Ahora, es el momento de que compartamos esta aplicación al mundo exterior. Queremos publicarlo en Internet para que podamos tener el enlace real, la URL real que podemos darle a nuestros amigos. Cómo podemos hacer eso. Hay diferentes y toneladas de diferentes servicios que pueden alojar nuestros archivos estáticos de forma gratuita o no de forma gratuita. Vamos a utilizar servicios gratuitos. Pero la pregunta es, ¿cómo sucede exactamente esto? Cuando vamos a ejecutar el script de compilación definido en el paquete Json, vite construirá nuestra aplicación y producirá archivos estáticos, HTML, CSS, JavaScript e imágenes si tenemos alguna. Entonces podemos tomar esta carpeta y dársela a un proveedor de hosting. Ese proveedor de hosting servirá estos archivos en algún lugar sus servidores y los expondrá públicamente a través de URL autogenerada. Uno de los servicios que podemos utilizar para alojar nuestra aplicación de forma gratuita, para alojar nuestro HTML, CSS, JavaScript de forma gratuita, siempre será gratuito y es muy sencillo. El servicio se llama Surge. puede acceder a él yendo a surge.sh. Lo genial de Surge en su simplicidad, no necesitas ninguna configuración adicional. Lo que necesita hacer, solo necesita instalar el paquete global Surge y luego, mediante el comando Surge, puede implementar la aplicación así como así. Sigamos adelante y hagamos eso. NPM instala sobretensión global. Voy a pegarlo en mi terminal. Instalará paquete global de sobretensiones. Dice, una vulnerabilidad de gravedad crítica. Bueno, no tienes que preocuparte por eso. Siempre que veas vulnerabilidades, puede ser bastante común, especialmente con paquetes globales. Bueno, este es el problema del paquete. ¿Qué podemos hacer al respecto y cuáles son las vulnerabilidades? Vulnerabilidades en el código que descargamos de ese paquete y podría ser malicioso. Pero no hace falta que te lo tomes en serio. La mayor parte del tiempo en el mundo de los NPM, paquete se actualiza tal vez una vez al día, tal vez dos veces al día. Pero no siempre se puede mantenerse al día con los cambios, con las actualizaciones. Al menos verás vulnerabilidad crítica una vez. Tus opciones son, primero, no hacer nada y actualizar a la última versión y esperar que el autor del paquete arregle la vulnerabilidad. La segunda opción es no usar ese paquete. En nuestro caso, en realidad no podemos hacer mucho nada por eso seguimos. Ahora, tenemos instalado el paquete de búsqueda global y dice que necesitamos ejecutar el comando de búsqueda. Si hago eso, me pedirá que inicie sesión o cree una cuenta. Sólo voy a ingresar mi dirección de correo electrónico y luego ingresar mi contraseña. Ya tengo una cuenta, así que me va a iniciar sesión. Pero en tu caso, te creará una nueva cuenta. Ahora, me incita para el proyecto, pero en realidad no necesito nada en este momento. Entonces solo voy a hacer Control C para detener la publicación de mi app. Primero, tenemos que construirlo. Voy a ejecutar npm run build script y vite producirá la última compilación de nuestra aplicación. Genial. Ahora está ahí. Se ve minificado, apaciado, y todo así. Ahora queremos tomar la carpeta Dist y desplegarla para buscar. Entonces usamos el comando search y luego especificamos path a la carpeta que queremos desplegar relativamente a nuestra navegación actual. Desde nuestra navegación actual tictactoe-vite, y nuestra carpeta se encuentra en esa carpeta en el mismo directorio. No necesitamos volvernos locos por ello. Solo necesitamos especificar el nombre de la carpeta que queremos desplegar. En nuestro caso, esta es la carpeta llamada Dist. Si hago eso, solo ejecuto Search Dist. Me pide dominio. Por lo tanto, cada vez que se implementa en Surge, siempre se implementará en un subdominio. Siempre será algo punto oleada punto sh. No se puede cambiar la parte surge.sh, pero se puede elegir un único no tomado a partir de ahora subdominio. Por defecto, surge te generará automáticamente un subdominio que está disponible, pero puedes cambiarlo. Vamos a ir a llamarlo tictacgame.surge.sh. Yo elijo ese nombre. Pero en tu caso, tendrás que idear tu propio subdominio porque si vas a intentar implementar en un subdominio que ya es tomado por otro usuario de Surge, obtendrás permiso denegado o algo así. Te traerá que tu solicitud será abortada. Así que asegúrate de elegir algo único y quédate con eso. Yo elijo tictacgame.surge.sh. Despliego, y ahora se publica a tictacgame.surge.sh. Entonces ahora puedo tomar ese enlace y puedo ir allí. Como puedes ver ahora, mi app está en vivo. Cuenta con enlace HTTPS. Significa que el certificado SSL está presente. Es administrado por Surge. No tenemos que preocuparnos por eso. Todo funciona. Ahora puedes tomar ese enlace y compartirlo con tus amigos. Sólo mira eso. ¿Qué tan genial es esto? Genial. Ahora, para referencia futura, es posible que queramos simplificar el proceso de implementación. ¿Y si quiero cambiar algo y luego volver a implementar exactamente al mismo dominio? Entonces en este caso, lo que tengo que hacer, haré mis nuevos cambios, introduciré nuevos cambios en la app. Entonces voy a ejecutar npm run build de nuevo para producir una nueva carpeta dist actualizada y luego otra vez, tendré que ejecutar surge dist e ingresar al mismo dominio. No obstante, quiero que sea lo más sencillo posible. Entonces, ¿por qué no creamos otro script dentro del paquete Json, y lo llamamos deploy? Sigamos adelante y creamos un nuevo script de implementación. Eso va a hacer dos cosas. Lo primero, ejecutará el comando build, npm run build, y justo después de eso, usando el operador lógico y, podemos encadenar el comando que se ejecutará después de npm run build. Entonces queremos ejecutar surge dist y el dominio que tenemos hasta ahora. Surge, el nombre de la carpeta que queremos desplegar, dist, y luego el dominio. Sí, puedo pasarlo al comando de oleada como argumento y va a funcionar. Surge comprenderá que queremos implementar en este nombre de dominio. Así que podemos despojar HTTPS y solo mantener el nombre de dominio así. Ahora bien, si intento cambiar algo, tal vez dentro de la app, vamos a comprobar rápidamente si funciona. Entonces cambiemos tic a otra cosa, y ahora ejecuto npm run deploy. Verás que recoge el comando de compilación, y justo después de eso, recoge el comando de oleada. Se ha desplegado, dice publicado a titacgame.surge.sh. Si me refresco. Ahora, se ven nuevos cambios. Genial, ¿verdad? Todo bien. Volvamos todo aquí atrás y volvamos a desplegar de nuevo. Nuevamente, produjo una nueva construcción. Nuevamente, se desplegó y volvió a publicarse en ese subdominio. Impresionante. Eso es. Ahora tienes nuestra app en línea. Puedes seguir adelante y compartirlo con el mundo. Vamos a comprometer nuestro script de implementación que introdujimos, git commit agregó el script de implementación. Así que felicitaciones, construimos ese juego bastante genial aquí con no tanto esfuerzo. Lo publicamos en Surge service. Por lo que ahora está disponible para Internet y siempre será gratis. Se alojará gratis para siempre y ahora podemos presumir de ello. En el siguiente y último video sobre Tic-Tac-Toe, vamos a resumir qué aprendimos exactamente durante estos videos, qué conceptos captamos, qué somos capaces de hacer ahora con nuestro conocimiento. Nos vemos ahí. Felicidades por el despliegue. 55. Resumen de 16: Hola otra vez. En este video, vamos a resumir rápidamente lo que hemos aprendido exactamente hasta ahora a lo largo del juego tic-tac-toe. Vamos. Si miramos nuestra estructura, ya podemos decir que sabemos usar Vid. Conocemos las herramientas front-end que pueden construir nuestro proyecto. Si miramos dentro del paquete JSON, podemos ver que también aprendimos sobre hosting y cómo podemos alojar la aplicación de forma gratuita. Puedes elegir en Google cualquier servicio de alojamiento que te permita alojar archivos estáticos, HTML, CSS y JavaScript, y ver cómo puedes aplicarlos en caso de que necesites una alternativa para buscar. Ya conocemos los servicios de hosting. Si miramos dentro de la carpeta fuente y si miramos dentro de JSX principal, podemos decir que usamos React 18. Esta es la API de los encabezados React 18 y es diferente de React 70. Aprendimos a usar la última versión de React aquí. Si miramos dentro de App JSX, podemos ver diferentes lógicas aquí. Ya sabemos qué es el estado, cómo podemos administrar el estado, cómo podemos actualizar el estado y por qué es necesario. También sabemos qué es el valor derivado de este estado y por qué realmente no necesitamos crear otro estado para gestionar estos cálculos, como ganador o tal vez como tablero de juego. También sabemos de actualización de estado o función a la que se le puede llamar de múltiples maneras, ya sea con la devolución de llamada siempre que necesitemos establecer un nuevo estado a partir del valor de estado actual o simplemente una llamada regular sin devolución de llamada, solo el valor. Sabemos sobre el marcado JSX ahora. Sabemos cómo aplicar los nombres de clase. Conocemos estilos inline con solo el objeto style para que podamos escribir CSS usando JavaScript. Sabemos cómo podemos aplicar estilos dinámicos simplemente usando plantillas de cadena y un poco de JavaScript. Sabemos pasar apoyos. Las indicaciones son básicamente los atributos de los componentes que puede usar para pasar datos al componente. Aprendimos sobre el renderizado condicional. Sabemos que podemos renderizar marcado JSX basado en alguna condición, y podemos lograrlo de múltiples maneras. Podemos hacerlo en línea usando el operador AND directamente dentro de JSX, o tal vez podamos crear una función auxiliar y escribir la lógica dentro. Veamos qué más tenemos aquí. Si miramos dentro de la plaza, ya la platicamos. Si miramos dentro de la historia, no la hemos hablado a través. También sabemos ahora que podemos tomar una matriz y podemos mapear cada elemento del array al marcado JSX. En caso de que necesitemos mostrar listas, utilizamos el método de mapa de puntos. El método de mapa de puntos asigna cada elemento de matriz al marcado JSX si lo usamos dentro de JSX. Siempre que hacemos eso, recordamos que siempre necesitamos pasar el prop clave al elemento de envoltura porque React necesita identificar cada elemento mapeado dentro de JSX. Creo que ya está. Ya aprendimos tantos conceptos sobre React. Confía en mí, todos estos conceptos que has experimentado, forman la base que necesitas para construir cualquier cosa con React. Todo lo que ves aquí está presente en cualquier otra aplicación de React. Si te sientes flexible con él y puedes aprovechar eso, eso es increíble. Significa que en un futuro no tendrás ningún problema para construir ningún tipo de aplicación. Felicidades. En esa buena nota, vamos a terminar el proyecto tic-tac-toe. Nos vemos la próxima vez. 56. 17 adicionales: Hola a todos. En realidad, me olvidé de un pequeño detalle sutil para agregar a nuestra aplicación. Se trata de estilos. Se trata de estos círculos que vemos en el fondo. No los vemos ahora porque bueno, no los agregamos, pero me olvidé de hacer eso. Dentro de Style CSS, tienes la clase BG balls, que se encarga de los círculos de fondo. Solo necesitamos crear un elemento vacío en algún lugar dentro del marcado de App. Digamos div vacío. Le damos un nombre de clase de bolas BG. Si refrescamos la página, vemos que los círculos aparecieron en el fondo, responden y se ven bastante bien. Perdón por esa. No olvides volver a implementar la app y omitir ese cambio. Yo solo voy a seguir adelante y voy a agregar , agregé círculos de fondo. Después NPM ejecutar implementar. Los scripts de despliegue que definimos dentro [inaudible]. Bien, nos vemos. 57. Resumen de la aplicación de la oficina: Hola, bienvenidos a Taquilla. En este video, me gustaría presentarles rápidamente el proyecto, lo que va a ser esto. Ahora mismo, estás mirando Taquilla. Esta será la aplicación de búsqueda de películas y actores. Podrás buscar películas o actores, y los datos que busques serán tomados de la API. Por ejemplo, en la entrada, voy a escribir algo así como chicas, y cuando presione “Enter” o presione el botón de búsqueda, veré los resultados. Todos estos resultados serán tomados del servidor API externo, que está disponible públicamente. Podremos protagonizar espectáculos. Cuando hagamos clic en un programa, veremos esa animación genial. Para que un usuario entienda que este programa ya está protagonizado, podemos hacer clic en el Leer más, y en este caso, se abrirá una nueva página en una nueva pestaña. Aquí podremos ver toda la información que recuperamos de la API; detalles, temporadas, elenco, todo sobre el programa. Aquí volvemos a tu inicio Aquí botón en caso de que necesitemos regresar. Cerremos esta pestaña. Ahora, ya que aquí protagonizamos programas, estarán disponibles en otro lugar. Estarán disponibles en la pestaña Inicio. Cuando navegamos por aquí, todos los espectáculos que seleccionamos anteriormente ahora aparecen aquí en esa página. Incluso si cierro el navegador, o si cierro la pestaña, o actualizo la página, nuestros programas seguirán ahí. No se almacenan dentro de una base de datos, sino que se guardan en el almacenamiento del navegador, específicamente en el almacenamiento local. Volvamos a Inicio, y puedes ver que la entrada sigue ahí. Lo mismo sucede con la entrada, al igual que los programas que protagonizamos se guardan en algún lugar dentro del navegador, mismo hacemos con la entrada aquí. Si actualizo la página, la entrada sigue ahí. También, tenemos aquí esta caja de radio, botones de radio, si cambiamos a actores y luego buscamos algún nombre, por ejemplo, como James. En lugar de espectáculos, ahora veremos a los actores. Nuevamente, la misma API, pero a diferencia de los shows, los actores no tienen su propia página porque no recibimos demasiada información de la API. Esto es suficiente, solo tarjetas para personas, para actores, y esta aplicación también es una aplicación web progresiva. Significa que nuestra aplicación ahora se puede instalar como si fuera una aplicación nativa, ya sea que estemos en un dispositivo de escritorio o móvil. Por ejemplo, aquí en la esquina superior derecha, tengo este botón de instalación, y si hago clic en eso, me avisará a instalar este sitio web como si se tratara de una aplicación. Si hago clic en Instalar, justo después de eso, voy a ser, digamos, redirigido o abierto en una nueva ventana que se ejecuta por su cuenta y esta será mi aplicación. Justo después de eso, si vuelvo a mi escritorio aquí, veo esto, ya puedo. Este es mi atajo para la aplicación. Si la cierro y si la abro de nuevo, esta se abrirá en una pestaña separada y actuará exactamente de la misma manera. Bastante genial. Yo diría que esto es todo, esta es nuestra aplicación, esto va a ser muy divertido. Te veremos ahí. 58. 02 Creación de proyecto con la aplicación Create React: Oye, ahí. ¿Cómo te sientes después del tic-tac-toe? ¿Listo para continuar? Esta vez vamos a trabajar en Box Office, una aplicación web donde podemos buscar diferentes películas y actores. Vamos. Para Taquilla, vamos a usar Create React App. Se trata de una versión abreviada de React muy popular, que nos permite crear archivos de proyecto. En tic-tac-toe, utilizamos una herramienta llamada Vite. Esta vez vamos a usar Create React App. Create React App es como un santo grial de todas las plantillas para aplicaciones React. La razón detrás de eso es porque Create React App es mantenida por el equipo de React. Es lo que podemos llamar una plantilla oficial de React. Tienes una pregunta, ¿por qué elegimos Create React App cuando usamos Vite en tic-tac-toe? La respuesta para eso es muy sencilla. Simplemente porque no hay ninguna razón real detrás de esa decisión. Lo que sea que elijas, estarás bien. Pero por el bien de nuestro trading, queremos explorar tantas opciones como sea posible y ver qué podemos hacer y qué podemos lograr usando diferentes plantillas. Todos serán más o menos iguales. Pueden ser diferentes dependiendo de cuánto puedas ir con la personalización. Pero en general, son más o menos muy similares. este momento estoy actualmente en el sitio web oficial de plantillas de Create React App. Lo que podemos hacer vamos a Empezar. Desde aquí ya tenemos la sección Quick Start donde podemos simplemente copiar ese comando. Pero nuestra aplicación de taquilla va a ser algo que se llama una aplicación web progresiva. Vamos a hablar de la aplicación web progresiva. ¿Qué es eso? ¿Por qué es genial y por qué lo necesitamos o tal vez no lo necesitamos? Vamos a tocar todo eso más adelante en Taquilla, pero tenemos que tomar una acción específica antes de andamiar la aplicación. Más tarde, podremos usarlo. Si nos desplazamos hacia abajo y vamos a Plantillas, podemos ver que podemos ejecutar el comando Create React App con la bandera de plantilla. Si vamos a Uso avanzado o si vamos al desarrollo, déjame ver dónde está eso, construyendo tu app, haciendo una aplicación web progresiva. Si vamos a esa sección aquí, nos da este comando que podemos ejecutar con la plantilla como se especifica, que esta va a ser una aplicación web progresiva. Esto es exactamente lo que vamos a copiar y vamos a usar para crear nuevos archivos de proyecto. Entonces lo que voy a hacer, voy a ir a la carpeta donde me gustaría ver mi proyecto. Esta va a ser la carpeta de envoltura que tenía de nuevo en el video anterior. El enfoque es el mismo. Necesitas ejecutar este comando en la carpeta donde te gustaría ver tu carpeta de proyecto. Voy a abrir Git Bash, tú abres tu terminal. Puede ser cualquier cosa. No tendremos ningún problema de interactividad si estamos en Windows con Git Bash. Voy a ir al disco d, luego a la carpeta app. Aquí voy a pegar este comando en lugar de mi app aquí. Voy a elegir plantilla de taquilla, Crear plantilla de aplicación React PWA. Cuando presiono enter, se iniciará el comando. Tomará un par de minutos crear todos los archivos necesarios. No solo creará archivos, instalará todas las dependencias del paquete Jason, por lo que este comando podría tardar un tiempo. Si bien es a través del proceso de instalación, hablemos de la diferencia entre Vite y Create React App. En tic-tac-toe, utilizamos Vite. Vite es básicamente una configuración en la parte superior del módulo bundler roll-up con Create React App. Es casi lo mismo. Create React App es una configuración en la parte superior del agrupador de módulos llamado Webpack. Si bien Vite se puede usar para cualquier biblioteca front-end, para cualquier proyecto front-end, Create React App solo se dirige a React. Vite utiliza roll-up. La aplicación Create React usa Webpack, y ambas son configuraciones sobre estos budlers de módulos. No hay tanta diferencia qué elegir. La respuesta es que es muy subjetivo qué elegir. Yo personalmente prefiero Vite, pero Create React App tiene su propio conjunto de beneficios, por ejemplo tienen este soporte progresivo de aplicaciones web listo para usar, que es genial y que se ajusta perfectamente que es genial y que se ajusta perfectamente a las necesidades de nuestro proyecto. Déjame volver aquí a la terminal. Puedo ver que todo estaba instalado. Puedo ver el mensaje de éxito y el mensaje de bienvenida. Si abro mi carpeta aquí, tengo Taquilla, y dentro de mis archivos de proyecto. Ahora, voy a abrir VS Code y dentro de VS Code, voy a abrir ese laboratorio de carpetas. Esto va a ser taquilla. Aquí tenemos un par de cosas que son ligeramente diferentes de lo que teníamos antes en tic-tac-toe. Vamos a hablar de eso apenas en un segundo. Antes de continuar, abramos el invitado que hayas compartido contigo. A partir de aquí, vamos a configurar Prettier y ESLint. La configuración será prácticamente la misma que en tic-tac-toe, pero ligeramente diferente. Primero, copiemos la configuración de ESLint. Voy a crear eslintrc. Copia todo aquí, mismo voy a hacer por Prettier. En ESLint, ¿qué tenemos aquí? Exactamente la misma configuración que en tic-tac-toe, pero también tenemos el plugin aquí, React Hooks, y solo un par de reglas definidas aquí. Entonces necesitamos instalar dependencias. Al igual que antes, necesitamos instalar ESLint config Prettier. El plugin Prettier que extendemos, que tenemos que instalar plug-in de ESLint React y así como el plugin React Hooks. Yo sólo voy a copiar estos plug-ins aquí. El comando de instalación va a ser eslint-config-prettier, eslint-plugin-react y eslint-plugin-react-hooks. Así como necesito instalar las herramientas ellos mismos. Necesito instalar Prettier y ESLint. Genial. Ahora, esperemos a la instalación. Ya tengo seis de alta gravedad de vulnerabilidades. Bueno, entonces qué voy a hacer a continuación. A continuación, vamos a inspeccionar qué es exactamente lo que tenemos en el paquete Jason. Empecemos con guiones. Al igual que te dije, Create React App es una configuración en la parte superior de Webpack subyacente módulo bundler. Esta configuración oculta se nos expone a través del paquete de scripts React, que se distribuye a través de NPM. Al igual que hemos batido distribuido a través de NPM, tenemos scripts de React. Es por eso que en nuestros scripts, tenemos los scripts React start, build, test y eject. ¿Cuáles son estos guiones? En Tic-tac-toe tenemos el script dev, que ejecuta servidor de desarrollo local para nosotros. Aquí, se llama inicio. Bueno, por lo general se llama inicio, pero hace exactamente lo mismo. Se lanza servidor de desarrollo local. Entonces tenemos el script de compilación, nuevamente, para crear una compilación de producción, script de prueba que ejecuta pruebas. Vamos a tocar eso en un segundo y expulsar. Expulsar nos permite optar por no participar en la configuración de scripts de React y personalizar la configuración nosotros mismos en cualquier medida que necesitemos. Entonces tenemos muchas dependencias relacionadas con workbox. ¿Qué es eso? Todo esto está relacionado con hacer una aplicación web progresiva. Vamos a hablar de eso más adelante, no tocamos nada de eso. Vitales web, vamos a tocar eso en un segundo. React scripts es el paquete con la configuración. React dependencia, y biblioteca de pruebas, vamos a tocar eso en un segundo también, y nuestras dependencias de desarrollo que acabamos de instalar. Impresionante, ahora, si miramos dentro de la carpeta pública, el propósito de esta carpeta es exactamente el mismo que en el feed. Los archivos que coloquemos aquí están mapeados al segmento URL en nuestra aplicación. Aquí tenemos índice HTML dentro de la carpeta pública. Si en feed lo teníamos en la carpeta raíz, aquí lo tenemos en público. Esta es la primera, digamos, gran diferencia entre feed y Create React app. Aquí tenemos algunas cosas que son diferentes. Primero tenemos esta URL pública, variable global, esta URL pública será enviada por webpack. Cuando se compilará nuestra aplicación, webpack procesará el índice HTML y reemplazará esta URL pública con la ruta raíz de nuestra aplicación. En nuestro caso, se traducirá a algo así. Sólo favicon, y eso es todo. Ahora también tenemos el elemento raíz en el que se montará la aplicación. Más o menos lo que teníamos en tic-tac-toe. Entonces tenemos el archivo de manifiesto. El archivo manifiesto edita contra algo relacionado con hacer la Progressive Web App. Básicamente controlará el atajo que se utilizará para abrir nuestra aplicación. Vamos a cubrir eso una vez que volvamos a Progressive Web App, no pensamos en esto ahora mismo. Ahora bien, ¿qué tenemos en la carpeta fuente? En la carpeta fuente, tenemos una configuración muy básica. En realidad, ejecutemos el script Start para lanzar el servidor de desarrollo. A ver, qué tenemos aquí. Si vuelvo aquí, lleva algún tiempo abrir la aplicación. Mientras aún está abriendo, veamos qué tenemos dentro del índice que abrió. Veamos cómo se ve la app y volvemos a los archivos. Se puede ver que toma un par de minutos y ya tenemos problema instantáneo aquí. React se define pero nunca se usa dentro de App.js, porque así como te dije, en React 17 y anteriores, siempre tenías que importar React de react cada vez que usas JSX dentro de los archivos. A partir de React 18 esto no es necesario. Usamos la opción específica de plug-in aquí jsx-runtime, lo que nos dirá que no lo necesitamos. Por eso lo quitamos. En React 18, esto no es obligatorio. Ahora bien, esta es nuestra aplicación, es como se ve ahora mismo nada demasiado especial, configuración bastante básica. Vamos a explorar los archivos. Empecemos con Index.js nuestro punto de entrada, y aquí tenemos algunas cosas que nunca antes habíamos visto. En primer lugar, tenemos reactdom.createRoute, documento. Get element by ID root, que es el elemento que sacamos del índice HTML. Los identificadores deben coincidir. Aquí es donde se montará la aplicación. Nuevamente, tenemos un modo estricto que renderiza nuestra aplicación con una configuración bastante básica, pero también tenemos registro de Service Worker y hemos reportado signos vitales web. ¿Qué son esos? Registro de Trabajador de Servicio y Trabajador de Servicios GS. Estos son los archivos que harán nuestra aplicación web una aplicación web progresiva. No queremos realmente pensar en ellos en estos momentos. Esto es algo que usaremos más adelante. Simplemente los guardamos y por ahora, simplemente ignoramos lo que tenemos aquí sobre el registro de Service Worker. De nuevo, vamos a hablar de eso más adelante. Pero también tenemos reportar web vitals aquí. Si miramos dentro, web vitals, esto es lo que importamos. Aquí, es solo una función simple que importa algo llamado web vitals y después de eso, llama a un conjunto de funciones aquí. ¿Qué es una web vitales que se está importando aquí? Este es el paquete que tenemos aquí web vitals. Si volvemos al registro de NPM, dentro del registro de NPM, podemos buscar este paquete donde vitales y ver qué es exactamente lo que hace. En definitiva, web vitals es un paquete es solo básicamente un conjunto de funciones que ves dentro de reportar web vitals. Estas funciones que nos permiten medir el desempeño de nuestra aplicación. ¿Qué tipo de desempeño? El rendimiento se basa en diferentes métricas que podemos recopilar cuando se carga nuestra página. Puedes leer sobre ellos en detalle aquí en la página oficial de NPM del paquete. Es muy útil cuando quieres lograr la máxima optimización y máxima velocidad en tu app. Cómo funciona, es que dentro del índice, sí, llamamos a este reporte web vitals y aquí como callback, que se define de nuevo aquí en la entrada de performance aquí. La devolución de llamada que pasemos aquí se llamará en cada métrica. Si pasamos, simplemente cancela aquí. Significa que todas nuestras métricas de rendimiento serán canceladas. Déjame guardarlo y veamos qué es exactamente lo que necesito. Si vuelvo a la app, voy a Inspeccionar. Si miro dentro de la consola, puedo ver diferentes métricas aquí. Consola se registra como objetos con los diferentes valores. Esto es exactamente lo que hace el paquete web vitals. Mide el rendimiento y te da métricas. Nada más que eso. Realmente no lo necesitamos. Quizá, pero lo usaremos más tarde, pero no ahora. Así podemos mantenerlo como una simple función aquí. Veamos dentro de App.js. En realidad, una buena pregunta aquí sería, ¿por qué tenemos todos los archivos extensión with.js en lugar de JSX? Porque en Tic-Tac-Toe, en todas partes usamos.jsx. Bueno, Vite nos requirió que usáramos la extensión de.jsx y Vite funciona de tal manera que recoge todos los archivos con extensión JSX y entiende que esto es React. Aquí ya que Create React App está dirigido solo a las aplicaciones React, esto no es un requisito porque entiende que todo será React. Pero en Vite, era diferente ya que Vite también se puede usar para otras bibliotecas. También vamos a nombrar a nuestros archivos la extensión with.js. Vamos a cambiarles el nombre en el próximo video. En este momento no eliminaremos nada de aquí. Dentro de App.js, tenemos archivo de logotipo importado aquí. Solo quiero hacer una nota rápida aquí porque podemos tener nuestros activos estáticos como imágenes, fuentes, algo que es estático y no requiere ningún procesamiento, se coloca en público y luego hace referencia desde el código fuente. Pero aquí se importa. El archivo svg es una imagen. Se ha importado como si fuera algún script o algún módulo. Entonces lo que sea importante aquí se pasa como fuente. Si nos fijamos en HTML, lo siento, aquí tenemos imagen que apunta a la URL. Se puede ver que es como generado automáticamente o se le hizo algo a esa URL. Exactamente. Bajo el capó lo que hizo Webpack, así que ese paquete React scripts la configuración, entendió que queremos importar imagen. Después procesó esa imagen y automáticamente generó la URL para eso. Entonces básicamente fue procesado por el Bundler. Puede que tengas una pregunta por qué. ¿Por qué tenemos que mantenerlo separado? ¿Por qué algunos archivos, algunas imágenes que importamos así de origen y otras las mantenemos en público? En realidad, no hay ninguna razón especial detrás de ello, supongo. La diferencia es que estos archivos son procesados por el Bundler. Estos que están dentro de la carpeta pública no son procesados por el Bundler. Podríamos haber movido ese logo.svg dentro de Público. Entonces dentro de App.js, solo haríamos referencia a logo.svg, ¿verdad? Si lo guardo, me refresco, todo permanece igual y se puede ver logo.svg se sirve en ruta de aplicación porque lo tenemos dentro de carpeta pública y los segmentos URL están mapeados, como recuerdas. Se coloca dentro de la fuente, luego se está importando así así, y luego se especifica la fuente. De esta manera, se pueden cargar imágenes. Dice que no se puede resolver. Esto probablemente se deba a que necesito reiniciar mi aplicación para que pueda volver a recogerla. Hagámoslo por si acaso para asegurar. Pero creo que esto es todo lo que necesitábamos hacer. Lo que podemos hacer aquí para concluir eso, lo que acabamos de crear hasta ahora, necesitamos también en Git necesitamos subir este proyecto que acabamos de crear a GitHub y agregar otro commit porque instalamos nuevas dependencias. Voy a iniciar la app. Se puede ver que estaba funcionando bien y la URL fue exitosa. De todos modos, se puede ver que Git en realidad ya está en él aquí. Cuando creé la plantilla, cuando ejecuto npx Create React App, automáticamente inicializó Git dentro de esa carpeta. Si escribo git log, ya tengo un commit inicial aquí. El mando se encargó de ello. No obstante, desde que introdujimos nuestros propios cambios, los vamos a comprometer. A ver ¿qué tenemos aquí? Tenemos App.js, index.js. Yo solo voy a quitar todos los cambios que hicimos aquí porque realmente no los necesitamos. Vamos a hacer todo en el siguiente video. Solo nos interesa nuestra configuración de ESLint que agregamos y Prettier config que agregamos package lock y package.json porque instalamos las dependencias dev. Genial. Todo está dentro del escenario. Yo solo voy a comprometer todo y llamarlo instalado y configurado Prettier y ESLint. Impresionante. Ahora es un momento para que subamos ese proyecto a GitHub. Vamos. En mi cuenta de GitHub, voy a crear un nuevo repositorio en la esquina superior derecha. Mi nombre de repositorio va a ser Box Office App. Voy a hacerlo privado. No quiero agregar ninguna Read Me. Ya tengo gitignore. Si miramos dentro de gitignore, igual que antes, tenemos módulos de nodo así como tenemos ignorada la carpeta Build. Si en Tic-Tac-Toe, teníamos build generado dentro de la carpeta del disco, Create React App genera build dentro de la carpeta Build. En realidad, vamos a crear el repositorio y luego ejecutar el comando build. Entonces subiremos todo. Doy clic en Crear Repositorio. Entonces otra vez, siga exactamente el mismo procedimiento. Copio git remote add origin en la URL de mi repositorio. Lo coloco dentro de mi terminal, ejecuto ese comando. Entonces hago git remote menos v para verificar que origen del alias apunta a mi repositorio GitHub. Impresionante. Entonces voy a hacer git push origin master. Y ahora si actualizo mi repositorio GitHub, está ahí. Impresionante. Intentemos ejecutar el script de compilación al final solo para ver que realmente funciona. Npm ejecuta compilación como se define dentro de package.json. ¿Dónde están nuestros guiones? Aquí, y veamos que dice crear una compilación optimizada de producción. Bueno, tenemos React se define pero nunca se usa. Esto es exactamente lo que teníamos en realidad. Esto es bastante molesto que ningún par no utilizado produzca un error. Porque puedes ver que rompe la compilación porque ESLint produce un error para no usar vars. Sigamos adelante y específicamente para esa regla, si no me equivoco, hicimos exactamente lo mismo en Tic-Tac-Toe por no usar vars no utilizados. Vamos a decir, por favor danos una advertencia en lugar de un error. Una advertencia, es sólo una advertencia. Es sólo un mensaje para advertirte. No rompe la construcción ni nada. puede ver ahora se volvió amarillo y mi construcción pasó con éxito. Sólo voy a guardarlo como está, no voy a modificar App.js. Déjame quitar los cambios que he hecho. Aquí puedes ver ahora apareció la carpeta Build y si miramos en el terminal, tenemos la salida de que el proyecto fue construido, asumiendo que está alojado en la ruta entonces diferente conjunto de comandos, y si miramos dentro de build podemos ver esta es nuestra compilación de producción. Solo tenemos archivos estáticos. Tenemos archivos HTML, CSS, JavaScript, imágenes y Json, e incluso TXT. Contamos con licencia para un trabajador de servicios. Ahora tomaremos la carpeta Build y la subiremos para alojarla. Nuevamente, esto es lo que vamos a hacer al final. Se puede ver que funciona. Se ve perfecto, ¿no? Ahora, agreguemos este cambio de ESLint a Git. Entonces voy a comprometerme y nombrarlo, convertí no vars no utilizados en advertencia y luego subir todo a GitHub. Genial. En el siguiente video, vamos a limpiar todos estos archivos dentro de fuente. Después de eso, vamos a comenzar con el desarrollo. Nos vemos ahí. 59. 03 Limpieza de archivos redunant: Hola ahí. En el último video, creamos un nuevo proyecto usando la plantilla de aplicación Create React. En este video, solo vamos a hacer una pequeña limpieza, que va a eliminar estos archivos innecesarios que origen estos archivos innecesarios que no vamos a usar. Justo eso, iniciaremos el desarrollo. Vamos. primer lugar, en el último video, realmente no he cubierto nada sobre las pruebas de configuración y los paquetes de biblioteca de pruebas que tenemos aquí. Así que en realidad podemos probar las aplicaciones de React. Podemos escribir pruebas programáticas usando algo llamado biblioteca de pruebas React. No vamos a hacer eso aquí en taquilla. Es por eso que simplemente lo eliminamos porque quedará sin usar. Lo primero que voy a hacer, voy a eliminar “App.test.js”. Voy a eliminar “Setup.tests.js” de “package.json” voy a eliminar todas estas dependencias así como así. A ver, y eso es todo. Ahora eliminamos la biblioteca de pruebas del proyecto porque no la vamos a cubrir aquí. A continuación, tenemos “logo.svg”. Realmente no lo necesitamos. Tenemos "index.css “, en realidad podemos conservarlo. Tenemos "App.css ", realmente no lo necesitamos porque "index.css" contiene estilos globales para body, solo mantengámoslo ahí y no lo toquemos. Entonces tenemos “reportWebvitals.js”. Podríamos necesitarlo para medir el desempeño si realmente nos interesa, así que solo podemos conservarlo, por si acaso. "Service-worker.js" es algo que podemos adjuntar más adelante cuando vamos a tratar con la aplicación web progresiva. Y por cierto, si se mira dentro de service-worker, ya podemos ver que aquí tenemos algo que se resalta con rojo. De nuevo, son nuestras encantadoras reglas de eLint. Lo que podemos hacer al respecto, podemos simplemente deshabilitar eLint solo en estos dos archivos, dentro de "service-worker.js" y dentro de “serviceWorkerRegistration.js”. De nuevo, vamos a hablar de estos expedientes más adelante. Solo queremos asegurarnos de que estos archivos no produzcan ningún error o advertencia por parte de ESLint. Sólo vamos a usar eslint-deshabilitar así con una diagonal en asterix, para deshabilitar ESLint solo para ese archivo. Voy a copiar esa línea y pegarla dentro "serviceWorkerRegistration.js" en la parte superior. Ahora no tenemos ninguna advertencia o error de ESLint aquí. Impresionante. Lo siguiente que haremos, vamos a renombrar "index.js" y "App.js" para tener la extensión.jsx solo para diferenciar archivos con marcado jsx y archivos sin marcado jsx, solo archivos js regulares. Esto es específicamente importante para "service-worker.js" y "erviceWorkerRegistration.js”. Porque estos archivos no son sobre React en absoluto. Estos son archivos sobre solo front-end. Se pueden usar no específicamente en React. Volvemos a nombrar "index.js" para tener el marco.jsx. Exactamente lo mismo, vamos a hacer para "App.js”. Dentro de App.jsx, no necesitamos importar React desde React porque nuevamente, usamos React 18. Y React 18 no requiere que importes React al alcance de jsx. Eliminamos "logo.svg “, así que eliminamos la referencia al archivo no existente. Eliminamos "app.css “, nuevamente eliminamos la referencia a un archivo existente. Dentro del componente App, simplemente podemos mantener hola por ahora sin ningún nombre de clase aquí. Bastante simple. Bastante simple aquí también. Se guarda "Index.css", por eso importamos. Veamos qué más aquí también. Sea lo que sea que tengamos en público al final, vamos a reemplazarlo por nuestros propios íconos, con nuestras propias imágenes. No los borramos por ahora, y creo que esto es más o menos así. Lo único que tenemos que hacer, necesitamos ejecutar npm install para reflejar los cambios que hemos realizado en “package.json”. Ya que eliminamos aquí las dependencias de esta biblioteca de prueba, se eliminan de “package.json”, pero no se desinstalan de “node_modules”. Si ejecuto npm install, simplemente eliminará las dependencias inexistentes y “package.json” de la carpeta “node_modules”. Se puede ver, “Se quitaron 71 paquetes”. Nuevamente, tengo seis vulnerabilidades altas. Por favor, no me asustes con esos. Por ahora, vamos a comprometernos, git add. Ya está en etapa y “git commit” se va a eliminar o limpiar la carpeta fuente de la aplicación inicial de Create React. configuración. Impresionante. Empujamos todo para dominar, y en esa buena nota, nos vemos en el siguiente video. 60. Introducción de 04 React Router v6: Oye, en este video, por fin vamos a proceder con la codificación, y por fin vamos a empezar a construir algo. Vamos. Si recuerdas en Tic-Tac-Toe, solo teníamos una página en nuestra aplicación. No teníamos ninguna navegación entre páginas, y lo que pasa es que en React, no hay navegación que esté integrada en la biblioteca. Significa que si quisiéramos lograr cierta navegación entre páginas, tenemos que hacerlo nosotros mismos. Bueno, hay un paquete para eso, que manejen la navegación por nosotros. En realidad, existen múltiples paquetes que pueden proporcionar enrutamiento dentro de la App. Esa navegación entre páginas se llama enrutamiento entre páginas. Hay diferentes paquetes que pueden hacer eso, más o menos tienen la misma interfaz. El que vamos a usar es React Router. Si abro la documentación oficial aquí, puedo elegir que soy nuevo. No obstante, puedo estar de acuerdo en que su última documentación no es muy clara. No vi nada de lo que necesito ejecutar para poder instalar React Router y además ese tutorial es muy largo y lo cubre todo, pero ¿y si quiero hacer solo un inicio rápido? Para comenzar con el React Router, primero necesitamos instalar ese paquete y para ello, necesitamos ejecutar npm install react-router-dom. Nosotros hacemos eso, después de eso, aparecerá dentro del paquete json. Ahora, voy a ejecutar de nuevo el servidor de desarrollo, y veamos dentro de la documentación. Aquí, si pasamos por la configuración, en realidad nos impulsa a arrancar una nueva React App con Vite. Vamos a saltarnos este paso. Entonces después de eso, vemos “Agregar un Router” y aquí necesitamos crear algo así. Pero personalmente me parece un poco confuso siguiendo esta documentación, porque he conocido a React Router desde las versiones pasadas, por lo que actualmente está en la Versión 6 y cada versión principal, como 5, 4, 3, siempre cambia su API, su interfaz, porque ahora es completamente diferente a lo que era anteriormente. Para hacerlo sencillo, vamos a Conceptos principales a la izquierda y aquí vamos a esa sección llamada Renderización, si no me equivoco. Aquí, puedes encontrar un muy buen ejemplo del que queda claro qué hace exactamente React Router, y ¿qué vamos a hacer? En lugar de seguir toda esa larga documentación, tomaremos sólo lo que necesitamos. Vamos a tomar ese ejemplo y vamos a entender qué es exactamente lo que nos puede dar React Router. Podemos ver una llamada a crear raíz bastante básica que ya tenemos dentro index.jsx y vemos que necesitamos tener este árbol de clasificación. En primer lugar, necesitamos tener router de navegador. Vamos a importar eso y vamos a hacer todo eso probablemente dentro de App. De hecho, podemos importar enrutador del navegador y usarlo dentro de index.jsx, sin embargo, hagámoslo dentro de App. Primero necesitamos obtenerlo de alguna parte todos estos componentes, todos son importados de react-router-dom, y hay algún lugar dentro de esa larga documentación. De hecho puedes encontrarlos ahí. Necesitamos router navegador y necesitamos rutas, y necesitamos ruta. Entonces, vamos a importar algo de react-router-dom, así que necesitamos agarrar el enrutador del navegador y necesitamos tomar rutas, no enrutador, y necesitamos tomar ruta. Estos tres componentes. Ahora, lo que voy a hacer, sólo voy a copiar ese marcado y ponerlo dentro de App, así como así. Pero aquí, ahora no tenemos todos estos componentes que aquí se definen, eso está bien. En realidad, ¿qué está pasando aquí? Al usar esta estructura similar a un árbol, podemos definir rutas en nuestra aplicación React. Piense en rutas a partir de páginas, lo que cada ruta representada por una página. La ruta es básicamente solo un segmento URL. Si tienes, digamos para los equipos de path, siempre que sea la URL, digamos que slash teams, podemos mostrar ese componente de equipos usando la sintaxis. Pero no vamos a hacer eso. Por ahora, solo necesitamos exhibir al menos algo. Comentemos esto, estos componentes de rutas, y al mirarlos veamos qué podemos aportar nosotros mismos. Sólo vamos a seguir adelante y crear ruta en camino; ruta e índice. Un elemento va a ser algo. ¿Qué necesitamos mostrar aquí? Aquí necesitamos renderizar el componente que representará nuestra página. Lo que sugiero es que dentro de Source, luego crearía una nueva carpeta y la llamara Pages, y aquí vamos a crear componentes que representen nuestras páginas. Voy a crear un nuevo archivo aquí, llamémoslo casa.JSX. A partir de aquí, voy a crear un componente home así y luego lo voy a exportar por defecto así. A partir de ahora, será un div simple que dice Página de inicio. Entonces, para el índice de ruta para solo ruta, vamos a renderizar componente home y por cierto, se puede ver en cuanto escribo home y cuando mi cursor se coloca al final, tengo este IntelliSense aquí desde el desplegable. Si presiono “Tab”, será alto importado para mí, bastante genial, ¿no? Ahora, lo guardo así y si vuelvo a mi App, mira lo que tengo. Tengo la página de inicio aquí y si voy a cualquier otra URL, tengo una página vacía. Si inspecciono el margen de beneficio, abro cuerpo, tengo ruta. Pero dentro de ruta, no tengo nada. Eso es porque aquí, no definí ninguna ruta, ninguna página. React Router funciona en la forma en que coincide con el segmento URL aquí, nombre de ruta contra ruta que especifique aquí en renders, elemento correspondiente. Ahora, intentemos crear otra página. Vamos a llamarlo Contacto y aquí solo vamos a renderizar. Sólo para hacer un ejemplo, voy a crear div y decir contacto. Ahora si voy a contactar, veo el marcado, lo que he pasado como el elemento aquí, así como así. Ahora sabemos cómo funciona React Router. El resto que veas aquí en el ejemplo, vamos a cubrir eso en los próximos videos porque esto es algo sobre layout, así podemos tener layout que se puede compartir entre varias páginas. Ahí es cuando entra esta ruta sin ningún camino o sin ningún índice. Así como vamos a cubrir aquí esta columna, que va a ser la representación de una página dinámica, pero nuevamente, la vamos a cubrir más adelante. Este no es el momento. Lo que vamos a hacer por ahora, sólo vamos a crear nuestras páginas iniciales tal vez. Lo que te puedo decir aquí es que en Taquilla vamos a tener la página principal, y luego vamos a tener página estelarizada. Para la futura referencia, como ya creamos dos páginas, agreguemos otro componente de página, que vamos a llamar start basics, y solo voy a copiar todo lo que tengo dentro. Voy a cambiarle el nombre a estrellado. Entonces dentro del componente app, nuevamente, voy a importar componente estrellado, que representa nuestra página. En lugar de contacto, voy a mostrar estrellado y en vez de contacto, recorrido estrellado solo para verificar, si voy a estrellado, tengo mi página estrellada. Genial. ¿Qué pasa con estas páginas vacías entonces si vamos a ruta indefinida? No es 404 pero es página que no fue encontrada. React Router tiene una explicación para que cómo manejar eso. Si vamos a la sección de preguntas frecuentes aquí, podemos ver cómo agrego una ruta 404 sin coincidencia en React Router 6. Simplemente puedes usar esto. Vamos a colocarlo tal vez al final o en la parte superior, Si no me equivoco, se puede colocar en cualquier lugar. En lugar de no coincidir importante por ahora o tal vez no lo vamos a cambiar vamos a simplemente mostrar no encontrado. Vamos a intentarlo. Vamos a la app y cada vez que vamos a alguna ruta que no definimos, recibimos no encontrada. Pero si vamos a la página principal, tenemos homepage, si vamos a star, hemos protagonizado. Impresionante. Ahora bien, cómo podemos navegar entre estas páginas porque tenemos etiquetas de anclaje, pero realmente no podemos usar etiquetas de anclaje cuando usamos la biblioteca de enrutamiento del lado del cliente como React Router. Necesitamos usar un componente específico para eso. Vamos a casa y ahora aquí necesitamos algo llamado el componente link, que nuevamente importamos desde React Router dom link component. Solo voy a mostrar el componente de enlace así, básicamente es solo un envoltorio alrededor de la etiqueta de anclaje, pero es específico de React Router para React Router pueda entender que querías hacer la transición de una ruta a otra ruta y luego vamos a llamar ir a la página estrella. A ese componente de enlace, necesitamos pasar prop llamado para luego especificar la ruta a la que nos gustaría ir cuando hacemos clic en ese enlace. Ya que nuestro componente estrella se define bajo path estrellado, cuando hacemos clic en Ir a la página estrella, vamos a ruta estrellada. Ahora volvemos a casa, si nos fijamos en el marcado, puede ver bajo el capó que en realidad es una etiqueta de ancla que lleva a la ruta estelarizada. Si hacemos clic en él, ahora estamos en la página estrella. Genial, ¿no? Eso es. Bueno, estos son en realidad los conceptos básicos de React Router. Como puedes ver, su propósito es brindarte esa experiencia de navegación en la aplicación React. Porque nuevamente, React no tiene ninguna solución incorporada para eso, es por eso que necesitamos usar nuestra propia solución o instalar una biblioteca que nos brinde capacidades de enrutamiento. Creo que esto es todo para la introducción sobre React Router. En el siguiente video, vamos a empezar a construir diseños y vamos a continuar con nuestra aplicación. Al final, solo quería agregar una nota sobre React Router, y por qué en realidad las llamamos rutas, ¿por qué no las llamamos páginas? El caso es que estamos construyendo algo llamado una aplicación de una sola página. Una aplicación de una sola página es básicamente un solo archivo HTML de índice aquí, es por eso que se llama aplicación de una sola página. Siempre que navegamos entre rutas o las llamamos páginas, lo que realmente sucede es que React Router usa JavaScript para reemplazar el marcado HTML y luego mostrar los componentes correspondientes, lo llamamos navegación pero básicamente lo que hace, solo toma HTML existente, lo elimina, e inserta nuevo HTML, y luego reemplaza la URL con lo que sea que especificar como ruta. Todo aquí es gestionado por JavaScript. Todavía tenemos la misma página, no cambia que HTML no cambia aquí, el esqueleto, la plantilla, esa indexación no cambia, pero JavaScript en realidad imita esa experiencia de navegación por lo que al usuario final que consume la aplicación parece que estamos navegando por páginas. Bueno, podemos decir de hecho que lo estamos. Técnicamente hablando, esto es simplemente eliminar HTML e insertar nuevo HTML en la página y cambiar el segmento URL, eso es todo. En las aplicaciones tradicionales, cuando haces clic en otra página, la página se actualiza, y esto es cuando tienes como real, digamos navegación página a página. Aquí en el algo lo que llamamos navegación del lado del cliente, navegación del lado del cliente significa que realmente navegamos a través de páginas usando JavaScript. Ahora, vamos a comprometer los cambios que hemos hecho. Dentro de la app, sólo voy a guardarla tal vez. Vamos a guardarlo para la futura referencia. Vamos a sumar jsx, vamos a agregar home, vamos a agregar todo al escenario, instalamos React Router, instalamos React Router, y eventualmente vamos a comprometer todo y decir Edit, React Router dom a la app o tal vez instalado React Router dom. Perfecto. Nos vemos en la siguiente. 61. 05 diseños y navegación entre páginas: Hola otra vez. En este video, vamos a hablar sobre los layouts, cómo podemos administrarlos y cuáles son los layouts en primer lugar. En el último video, instalamos y digamos configuramos el router de reacción. Esta es la solución de enrutamiento que vamos a utilizar para nuestra aplicación. Ahora, vamos a ver cómo realmente podemos aplicar diseños porque tenemos página estrella y tenemos una página de índice, y digamos que comparten un diseño común. En ambas páginas, queremos ver la navegación. Lo que realmente podemos hacer, podemos ir a un componente del hogar y poner el enlace aquí. Entonces vamos al componente estrellado y ponemos el enlace aquí, pero esto es mucha repetición. Solo queremos tener algún marcado común que pongamos en un solo lugar y se muestre en todas partes. Mirando este ejemplo, si volvemos a la documentación, si vamos a Conceptos Principales, Renderizado, este es el lugar donde tomamos ese marcado del último video. Podemos ver algo llamado Layout Routes. Si lo lees aquí, dice básicamente que este elemento de ruta aquí que envuelve otras rutas es solo un componente que puede proporcionar alguna disposición a las rutas subyacentes. No representa la página en sí. Los buscapersonas solo están representados por rutas que definen el camino prop aquí. Para lograr la maquetación, podemos seguir este enfoque. Si necesitamos compartir el diseño entre la página principal y la página estrella, podemos envolverlos en ruta como aquí. Entonces, sigamos adelante. Vamos a crear componente de ruta. Vamos a envolver la página principal y la página estrella en esa ruta. Podemos especificar elemento un solo puntal sin ningún prop de trayectoria. Aquí, será nuestro layout que nos gustaría ver para estas páginas. ¿Cómo vamos a manejar eso? Dentro de las clases, crearíamos una nueva carpeta y le nombraríamos componentes. Aquí, vamos a colocar nuevo componente, que llamaremos MainPageLayout o vamos a llamarlo MainLayout. Aquí, voy a crear maquetación principal. Después exporte desde aquí, export default, MainLayout. Impresionante. Ahora, vamos a importar ese diseño de componentes, MainLayout. Entonces, en lugar de diseño de página, vamos a usar el diseño de página principal. Sin embargo, ¿cómo funciona exactamente? Porque si abro mi maquetación principal, está completamente vacía. No hay nada ahí dentro. Entonces, ¿qué se va a renderizar? Vamos a tratar de ver. Si volvemos a la app, ahora, nuestra app está vacía. Bueno, ¿qué pasa? El caso es que, si recuerdas, en React, tenemos algo llamado prop de niños. Si definimos un componente y digamos algo así, MainLayout y por dentro pasamos algo, lo que MainLayout y por dentro pasamos algo, pase dentro ese componente entre corchete de apertura y cierre, estará disponible como el prop hijos que podemos usar dentro del marcado JSX dentro de ese componente. Sin embargo, con el router React, no se ve así. No pasamos a ningún niño porque lo pasamos como un componente de cierre automático. Entonces, ¿cómo funciona? Si vamos a mirar aquí dentro de PageLayout, necesitamos para algo llamado outlet. Aquí a la derecha, está la sección llamada outlet. Outlet se utiliza dentro estos componentes que representan diseños. Básicamente representan a los niños, al menos, el concepto es muy similar a los niños. Paso por este conjunto de rutas. Este elemento tiene la disposición principal. Pero como no tenemos acceso a los niños aquí, necesitamos de alguna manera dejar que este componente MainLayout sepa que queremos renderizar lo que pase dentro. Para eso, el router React tiene este componente llamado tomacorriente. Outlet es básicamente como niños pero para todas las rutas que se pasan dentro de ese componente de ruta. Bueno, es confuso. Déjame en realidad solo mostrarte. Importamos algo de reacción para dom y ese algo va a ser salida. En lugar de escribir niños, tomacorriente es el reemplazo. No usamos niños, solo usamos outlet. Así como así. Aquí encima de nuestro outlet, vamos a decir que esto es un marcado compartido. Yo lo guardo. Vuelvo y se puede ver que lo que se está renderizando aquí es esto es marcado compartido y luego esta es la página estelar. Básicamente, outlet aquí representa lo que pasemos dentro de ese trazado definido por los componentes de la ruta. Ahora, si nos vamos a casa, veremos exactamente el mismo cuadro. Tenemos esto es marcado compartido. Ahora, vamos a seguir adelante y agregar una navegación que se compartirá entre páginas. Dentro de componentes, voy a crear nuevo componente, que voy a llamar Navs. Por ahora otra vez, como siempre, será div, que dice algo y luego exportar por defecto Navs. Genial. Entonces dentro principal en lugar de esto es el marcado compartido, vamos a mostrar el componente Navs. De nuevo, se puede ver que empecé a escribir mi cursor está al final. Tengo el desplegable con la inteligencia y si presiono “Tab”, ahora, boom, es auto importado. No obstante, ten cuidado con eso. Esta es una característica muy importante, diría de una manera que pueda importar fácilmente los otros archivos, no exactamente lo que se espera. Ten cuidado con eso y comprueba siempre tus entradas. Estamos bajo Navs aquí. Dentro de Navs, nos gustaría mostrar la navegación. Vamos a agarrar ese pedazo de código que ya tenemos en la página principal. El componente de enlace, recuerda que usamos para navegar entre páginas cuando usamos la biblioteca del lado del cliente react-router-dom. Voy a copiar el enlace de importación de react-router-dom. Voy a colocarlo dentro de Navs. Aquí, necesitamos mostrar la navegación. ¿Cómo vamos a hacer eso? En primer lugar, necesitamos definir nuestros botones en los que vamos a hacer clic y hacer una transición entre páginas. Sigamos adelante y definamos nuestra matriz de botones, matriz de elementos, que van a ser nuestros enlaces. Entonces mapearemos esos enlaces al marcado JSX exactamente igual que hicimos con la historia de vuelta en tic-tac-toe. Aquí fuera de Navs, voy a crear componente porque conocemos un componente solo una variable llamada links. Va a ser una matriz de objetos y cada objeto tendrá la siguiente forma. Tendrá texto, y tendrá que hacerlo. To va a ser algo que pasaremos al componente link y text es el texto visualizado. El texto va a estar en casa. Se irá a la ruta, a la página principal. Entonces vamos a agregar otro objeto aquí. Vamos a llamarlo Stareled. Nos llevará a la ruta estelarizada. Ahora, tenemos que tomar esa matriz y marcarla en el marcado JSX. Así que aquí, dentro de Navs, en lugar de div, podemos mostrar unos elementos UL, o tal vez dentro de div vamos a mostrar UL, vamos a mantenerlo así. Ahora dentro de esa UL, vamos a mapear nuestros enlaces. Entonces voy a abrir las llaves aquí. Voy a decirle a Links.map. Ahora tomamos el artículo. Nombremos ese objeto que mapeamos como ítem. Vamos a mapearlo al elemento li. Dentro de ese elemento li, vamos a decir, por favor muestre item.text y como clave, porque recuerdas cuando asignamos elementos siempre al marcado JSX al elemento de envoltura, tenemos que pasar alguna clave única que identificará ese elemento dentro del marcado JSX que se está mapeando. Entonces, en nuestro caso, el segmento URL que usamos aquí es único para cada elemento, o puede ser texto. Pero pasemos a como la clave. Item to va a identificar nuestro elemento. Tenemos que convertirlo también en un enlace. Usamos el componente link para eso, que importamos desde react-router-dom. Entonces, en lugar del texto del elemento, vamos a hacer el texto del elemento de enlace. Para el apuntalamiento de cola dentro del oponente de enlace, vamos a pasar item.to. Se va a quedar así. Ahora, volvemos a la app y lo que vemos, vemos navegación. Si hacemos clic en Started, vamos a la página Started. Si hacemos clic en Inicio, nos dirigimos a Inicio. Genial, ¿no? Felicidades, ahora tenemos componente de navegación, que funciona bastante bien, así como usamos layouts para gestionar eso. Ahora, limpiemos la página principal y deshagámonos del enlace aquí y solo digamos Inicio. Ahora, se ve así. Impresionante, ¿no? A lo mejor, sigamos aquí y agreguemos un título. Vamos a crear un nuevo componente aquí y llamarlo Título o, digamos AppTitle. Entonces a partir de aquí, tomemos otro enfoque porque siempre estuvimos creando una función y luego exportando eso por defecto. Entonces, en cambio, podemos simplemente decir export default y luego la función y lo que dice, vamos a ver a la definición del componente le falta el nombre para mostrar, claro. Entonces, lo que quiere que hagamos, quiere que hagamos algo así. Función AppTitle. Porque quiere que exportemos una función que realmente tenga nombre, no solo una función anónima como esa, sino con el nombre. Eso está bien. Eso hará que el código sea un poco más declarativo. A veces ayuda a rastrear errores que podrían provenir de diferentes funciones. En nuestro caso, este no será el caso. Pero aún así, vamos a explorar más de la sintaxis de JavaScript. Vamos a llamarlo así. Así que aquí en vez de Navs y outlet, podemos mostrar el título h1. Entonces el título va a ser el utilete que vamos a recibir. Nuevamente, desde que empezamos a explorar más de la sintaxis de JavaScript, en lugar de desestructurar, apliquemos la desestructuración en otro lugar. Entonces recibimos el objeto props. Aquí, en la siguiente línea, vamos a aplicar la desestructuración, en lugar de enlinear directamente eso dentro de los argumentos. Entonces vamos a agarrar el título así como vamos a agarrar el subtítulo. Subtitle va a estar dentro del párrafo, subtitle, y vamos a usar ese AppTitleComponent dentro del diseño principal, justo debajo de navs. AppTitle, de nuevo, IntelliSense y tab, y boom, se importa. Veamos cómo se ve. ¿No vi nada o me perdí algo? Déjame ver. No, no lo hice. En realidad, lo hice. Si inspecciono el marcado, puedo ver que tengo mi marcado pero está vacío. Bueno, ¿qué pasa ahí? Porque, bueno, te habrás dado cuenta, pero ejecuté el AppTitle sin que se pasara ningún props. Sin embargo, AppTitle renderiza el título y el subtítulo. Porque no los pasamos, están siendo vacíos. Significa que no están definidos. El título es indefinido, el subtítulo es indefinido porque de nuevo, no los pasamos. En este caso, necesitamos pasarlos, hola, y algo más. Boom, ahora es esto aquí, se ha exhibido, todo funciona. Pero aquí hay una alternativa. Digamos que tenemos situaciones en las que no pasamos accesorios en absoluto, solo por alguna razón. A lo mejor tenemos este componente que ha sido reutilizado en múltiples lugares, muchas veces, lo que sea, y no todo el tiempo pasamos utilería. Por esa razón, dado que los componentes son solo funciones, y sabemos que podemos aplicar argumentos por defecto a las funciones, podemos hacer exactamente lo mismo aquí dentro de Components. Entonces, desde el objeto props, objeto props siempre se define, está al menos vacío. De ese objeto, distraemos tu título, subtítulo que no están definidos en ese objeto porque no pasamos utilería. Pero podemos aplicar valores por defecto para ellos. Si no pasamos ningún título por defecto, será Taquilla y Subtítulo, aplicación de búsqueda de películas, o tal vez llamémoslo, ¿ buscas una película o un actor? Sólo una pregunta, algo así. Nuestra estructura final va a quedar así. Si miramos dentro, se puede ver, bueno, se están aplicando. Si vuelvo a maquetación principal, bueno, se puede ver que no paso nada, pero aun así tengo mis valores predeterminados. Si quiero cambiarlo o sobrescribirlos, simplemente los pasaría enseguida y van a funcionar. Sin embargo, como los definimos aquí dentro de appTitle por defecto, no vamos a pasar nada aquí a props. De hecho, pongámoslo encima de Navs. Entonces se ve así. Impresionante. Entonces creo que eso es todo para ese video. De hecho hicimos mucho y hemos cubierto muchos conceptos nuevos. Hemos cubierto diseños, cómo podemos administrar diseños que se pueden compartir en varias páginas. Si miramos dentro, usamos ese componente de salida, que es el reemplazo para niños, pero para la definición de ruta que tenemos aquí. Luego también cubrimos cómo podemos crear navegación usando el componente link y mostrarlo dentro del marcado compartido, así como title y argumentos por defecto, bueno, valores predeterminados para los argumentos o para los props. Se ve bien hasta ahora. Vamos a comprometerlo todo, y terminemos este video con una buena nota. Entonces voy a detener la app. Voy a comprometerlo todo con un mensaje. Voy a nombrarlo, “navegación agregada y disposición compartida para las páginas de inicio y inicio”. Asombroso. Nos vemos en la siguiente. 62. 06 entradas: Hola otra vez. En el último video, gestionamos layouts y navegación dentro de nuestra aplicación. Se ve bastante genial. Ahora somos capaces de navegar entre diferentes páginas. Sabemos crear rutas. Nuestro siguiente paso aquí va a ser el cuadro de etiquetas que tenemos en la página principal en la que ingresamos algo, luego damos clic en el botón. Después tomamos el texto del cuadro de texto y lo enviamos a algún backend, que nos devuelve los datos. Sin embargo, antes de que podamos implementar todo eso, necesitamos entender cómo podemos administrar los insumos en React. En este video, vamos a hacer exactamente eso. Así que vamos a navegar al componente home y aquí, vamos a crear una entrada simple de tipo text. Nada elegante. Si vamos a Inicio, ahora tenemos aquí este elemento vacío, cuadro de texto vacío. No podemos hacer mucho al respecto. ¿Y si quiero sacarle algo de valor? ¿Cómo puedo hacer eso? Porque, bueno, en el futuro vamos a agregar un botón aquí y cuando hagamos clic en ese botón, necesitamos de alguna manera envolver el valor de esa entrada. Desde Tic-Tac-Toe, usted sabe que necesitamos usar el estado siempre que tengamos un valor que cambie a siempre que tengamos un valor que cambie lo largo del periodo de ciclo de vida de los componentes. Siempre que escribimos algo en la entrada, este es el valor que cambia. Es por eso que por esta razón vamos a usar React, usar gancho de estado. Entonces, sigamos adelante. Desde React, igual que antes, vamos a volver nuevos. Entonces llamamos usestate hook y dentro necesitamos pasar valor por defecto que será el valor para nuestro estado inicialmente cuando el componente se monta. Ya que va a ser elemento de entrada y elemento de entrada siempre es una cadena y si no tenemos nada dentro, entrada solo libros de texto vacíos, sigue siendo una cadena pero vacía. Por eso vamos a pasar aquí una cadena vacía. El motivo de ello es porque si no especificamos nada para usestate, simplemente lo llamamos así, por defecto, valor inicial del estado será indefinido. Entonces, como recuerdas, usestate devuelve una matriz de exactamente dos elementos, donde el primer elemento es el propio estado. Entonces vamos a llamar a ese estado valor de entrada. La función de actualización de estado se va a establecer el valor de entrada. Ahora bien, ¿cómo podemos realmente escuchar estas actualizaciones que escribimos algo dentro del cuadro de texto? Si recuerdas, tenemos eventos disponibles en cada elemento HTML. Entonces empiezan con el prefijo on. Entonces, si tratamos con entradas, necesitamos usar el evento onChange. Entonces para ese evento onChange, voy a pasar un manejador de eventos, y veamos qué tenemos y cuándo se dispara este evento. Voy a crear una función aquí , llámala onInputChange. Si recuerdas, todos los manejadores de eventos siempre reciben el objeto de evento como primer argumento. Solo voy a registrar la consola del objeto de eventos y luego voy a pasar onInputChange como el manejador de eventos onChange. Ahora, cada vez que escribo dentro de la entrada, puedo ver algo que se registra en la consola cada vez y si expando ese objeto, tengo aquí la propiedad target que nos interesa. Por lo que el objetivo del evento representa el objetivo de ese evento. En nuestro caso, este va a ser el propio elemento input. Si lo expando aquí, tengo propiedad de valor, que representa el valor que el elemento de entrada tiene a la vez. Es por eso que podemos continuar y registrar la consola de destino de eventos. Primero consideremos el objetivo del evento solo para verlo una vez más que cada vez que escribimos, event target representa nuestro elemento HTML de entrada. En ese elemento HTML de entrada, tenemos esta propiedad value, que representa el valor de entrada a la vez. Siempre que escribo, ves ahora podemos acceder al valor que tenemos dentro del cuadro de texto. Bastante genial. Ahora podemos usar set input value, state of data into that state of data we can pass event target value to set the state. Ahora, cada vez que escribimos, actualizamos el estado con el valor objetivo del evento. Genial. Ahora bien, cómo podemos ver realmente ese valor de entrada es ser lo que escribamos dentro de los libros de texto. Como recuerdas, simplemente podemos ponerlo aquí, registrar la consola y verificar porque la actualización del estado activará el componente para que vuelva a ingresar y cuando los componentes sean inquilinos, JavaScript dentro se ejecuta de nuevo y en cada reingreso vamos a ver ese registro de consola. Vamos a intentarlo. Siempre que escribo, ahora, puedo ver que efectivamente casa.jsx6 en la línea 6. Sí, tengo este registro de consola, lo que significa que el componente vuelve a entrar, nuestro estado se actualiza correspondiente a la entrada. Con este enfoque, tenemos un problema. Lo que ve aquí se llama enlace de datos unidireccional. Entonces, en los marcos de bibliotecas, siempre tendrá este concepto de enlace de datos unidireccional o enlace de datos bidireccional. ¿Qué significa esto? Entonces con este enfoque, introdujimos el enlace de datos unidireccional, escucharemos los cambios dentro del cuadro de texto y actualizaremos el estado. Sin embargo, si actualizamos el estado, no actualizamos el valor de entrada. Vamos a tratar de ver a qué me refiero. Entonces, si quisiéramos mostrar ese valor de entrada en algún lugar de la página, solo podemos usar la interpolación. Así como así. Ya sabemos qué hacer. Aquí tenemos valor de entrada. Vamos a ver que funciona. Siempre que escribo, está siendo interpolado en J6 y siendo visualizado. Bastante genial. ¿Cómo podemos verificar que se trata de un enlace de datos unidireccional? Voy a crear un botón aquí con botón “Tipo”, actualizar al azar. Para deshacer clic, voy a decir, por favor establezca el valor de entrada a algo así como mi nombre. Veamos qué tenemos. Entonces cada vez que escribo, tengo mi estado siendo actualizado, pero si hago clic en “Actualizar a actualizaciones de estado aleatorias”, sin embargo, el texto dentro de la entrada no se actualizó. Entonces, ¿qué pasa aquí exactamente? La cosa es justo hasta que tengamos un enlace de datos unidireccional, le vinculamos los cambios que hacemos dentro de los libros de texto a estado, pero no vinculamos estado al cuadro de texto, a la entrada. Para solucionarlo, necesitamos pasar un atributo value al elemento input para que sea cual sea el valor dentro del estado que tengamos, será mapeado, se vinculará al valor de textbox. Entonces para el atributo value, voy a pasar el valor de entrada. Veamos si escribo algo aquí y luego hago clic en “Actualizar al azar”, ahora el texto se actualizó no solo aquí, sino que también se actualizó dentro del elemento input. Porque ahora tenemos enlace de datos bidireccional. Si actualizamos el estado, se actualiza el cuadro de texto, y si actualizamos el cuadro de texto, se actualiza el estado. Es bidireccional, funciona en dos direcciones, a diferencia de lo que teníamos anteriormente. Si seguimos adelante el cambio y aquí guardamos solo valor, será lo mismo. Será unidireccional de enlace de datos. Tenemos este error aquí que dice que proporcionaste un prop de valor sin un manejador OnChange. Incluso React te dice que algo no está bien aquí. Entonces, como puede ver, datos unidireccional puede ser muy complicado. Así que hay que recordar siempre cuál es el que más le convenga. Yo diría que en la mayoría de los casos es posible que ni siquiera note que datos unidireccional puede potencialmente traer sus problemas, y en la mayoría de los casos, no lo hará. Sin embargo, el enlace de datos bidireccional es importante y debe comprender la diferencia entre él y saber cómo aprovecharlo. En lo que va de este video, aprendimos a manejar el estado con insumos. Cómo podemos utilizarlos para los cambios dentro del elemento de entrada y actualizar el estado. También aprendimos qué es el enlace de datos unidireccional, qué es el enlace de datos bidireccional y cuál es la diferencia entre ellos, y por qué el enlace de datos unidireccional puede ser complicado. Siempre es mejor usar el enlace de datos bidireccional si no está seguro. Creo que esto es todo. Ahora ya sabes todo lo que necesitamos en el siguiente video. Vamos a crear un botón aquí. Vamos a agarrar lo que escribamos dentro del cuadro de texto y lo enviaremos a API. Veamos cómo se desarrolla. Nos vemos ahí. 63. 07 Presentación de formulario: Oye, ahí. Como recuerdas, en el último video, hablamos sobre las entradas, cómo podemos administrar las entradas, cómo podemos vincular el valor de entrada al estado, y la diferencia entre el enlace de datos bidireccional y unidireccional. En este video, vamos a enviar datos que escribimos dentro de un cuadro de texto a una API, y obtenemos resultados de API de vuelta a nosotros para que podamos mostrar algo en nuestra aplicación al usuario. En el último video, hicimos todo eso dentro de casa.JSX. En realidad, podemos quedárnoslo, solo vamos a colocar este botón aquí, justo debajo de la entrada, para que podamos escribir texto. Ya tenemos InputValue, y tenemos OnInputChange. Tal vez podamos nombrarlo algo así como SearchString, porque básicamente será nuestra cadena de búsqueda para los resultados de búsqueda. Podemos cambiar el nombre del estado para que sea SearchString, Searchs-t-r y establecer Searchs-t-r. No necesitamos sacarlo, value va a ser SearchString, y onChange va a ser onSearchString, o onSearchInputChange, y vamos a actualizar SearchString. Entonces para ese botón OnClick, vamos a eliminarlo por completo. Vamos a envolver estos dos en forma, y luego vamos a aprovechar el atributo formulario onSubmit. En realidad formas en reaccionar, funcionan ligeramente diferentes. En las aplicaciones de una sola página, trabajas con formularios ligeramente diferentes a los de las aplicaciones tradicionales. En las aplicaciones tradicionales, cuando haces clic en “Enviar” y tienes formulario, necesitas definir aquí una acción que te llevará a alguna otra página. Al hacer clic en “Enviar”, redirige al usuario y envía los datos a alguna otra página. En aplicaciones de una sola página y aplicaciones web modernas, no se administra así. ¿Cómo se maneja entonces? En el formulario, ponemos el método onSubmit, y ese método onSubmit será la función que llamaremos onSearch. Nuevamente, ya que es un manejador de eventos para el evento submit, tenemos el objeto event. Intentemos y por ahora, no hagamos nada, lo que va a pasar por onSubmit onSearch. Nuevamente, ya que es forma, en vez de tipo botón, para que podamos enviar el formulario, necesitamos especificar que este botón va a ser de tipo submit. Cuando hacemos clic en él, en realidad envía el formulario, y en lugar de actualizar al azar, va a ser búsqueda. Algo así. Intentemos y veamos así si escribo algo aquí y si presiono “Enter” o si hago clic en “Buscar”, déjame presionar “Enter”. ¿Ves que la app se ha actualizado? Puedes ver que la página se ha actualizado. Ahora tengo este signo de interrogación en la parte superior. Esto se debe a que no manejamos el formulario correctamente, porque piensa que el formulario, la acción, necesita ser manejado por alguna otra página. Intenta redirigir a alguna otra página para enviar datos. Sin embargo, al igual que una herramienta lo hace en las aplicaciones web modernas, no es así como se maneja la forma. Para que onSubmit evite la actualización de la página, necesitamos evitar la acción que realiza el evento submit. Para ello, llamamos event-prevent default. Al llamar a ese método, evitamos el comportamiento predeterminado de este evento. Si actualizo la página, permítame eliminar el signo de interrogación en la parte superior. Ahora, escribo algo, hago clic en “Entrar”. Ves que no pasa nada. En nuestro caso, en lugar de que no pase nada, necesitamos enviar datos a la API. ¿Cuál va a ser la API? ¿Cómo vamos a manejar eso? ¿Por dónde vamos a empezar? Si vamos a adivinar aquí, si nos desplazamos a recursos, puedes encontrar la API de TVMaze aquí. Abramos ese enlace. La API de TVMaze es una API pública que nos puede dar información sobre diferentes películas y actores. Es completamente gratuito y tiene cuota ilimitada, y es pública. Simplemente puedes abrir esa URL y seguir la documentación. Está bastante bien documentado con buenos ejemplos y buenas explicaciones para los puntos finales que tiene. Lo que nos interesa es en realidad ese primer párrafo aquí, que dice “mostrar búsqueda”. Tiene esta URL, y aquí hay un ejemplo. Intentemos abrir eso en una nueva pestaña. Como puedes ver, tenemos datos aquí. Simplemente accedemos a él y recuperamos los datos. Si le das un vistazo a la URL, aquí te suministramos el parámetro q, query string, y si lo cambio a otra cosa, me dará diferentes resultados basados en la cadena de búsqueda. Este parámetro q es básicamente la cadena de búsqueda. Puedes leer sobre ello dentro de la descripción de lo que hace este punto final. Vamos a usar ese punto final dentro de nuestra app. Volvamos y pongamos aquí. Voy a comentarlo. Ahora, tal vez tengas una pregunta. ¿Cómo enviamos una solicitud a esa API? Bueno, podemos acceder a él en el navegador, pero ¿cómo podemos hacerlo dentro de la app? Bueno, dentro del navegador, tenemos una API web llamada Fetch. La función Fetch está disponible globalmente dentro del entorno del navegador, por lo que podemos usarla dentro de JavaScript. Lo que hace Fetch, envía una solicitud a la URL suministrada. Podemos tomar esa URL, podemos llamar Fetch. Nuevamente, es una función que envía solicitudes y está disponible globalmente dentro del navegador JavaScript. Llamamos a esa función Fetch aquí y pasamos la URL dentro. Doy clic en “Entrar” y como pueden ver, nos devuelve una promesa, un objeto promesa. Significa que empezamos a trabajar con JavaScript asíncrono. Aquí es donde las cosas empiezan a ponerse interesantes. Para obtener valor de la promesa, tenemos que esperar esa promesa o resolverla. Por ahora, vamos a usar la sintaxis de.then aquí. Esa función Fetch se resuelve en el objeto de respuesta. La promesa que ha sido devuelta de los resultados de Fetch al objeto response, que representa la respuesta de esa solicitud. Vamos a llamarlo así. Voy a llamarlo respuesta, y vamos a tratar y respuesta console.log. Este es el objeto de respuesta que tenemos. Representa el estado de la respuesta, la URL que se utilizó, los encabezados y algunas cosas diferentes aquí. Sin embargo, también este objeto de respuesta tiene el método.JSON disponible en él respuesta a JSON. También es un método que devuelve una promesa. La promesa resuelve ante el cuerpo de respuesta. Lo que ves aquí dentro del navegador es cuerpo de respuesta. Es básicamente lo que se está devolviendo desde el servidor, la respuesta, así que la obtenemos en formato JSON. Por eso llamamos al método.JSON. Nuevamente, devuelve una promesa, que resuelve al cuerpo. ¿Qué vamos a hacer? Vamos a encadenar múltiples densos aquí desde primero.luego vamos a llamar al método.json en el objeto de respuesta. Entonces devolvemos esa promesa de.then callback, lo que significa en el siguiente.entonces se resolverá. Dentro de siguiente.entonces vamos a tener nuestra carga útil o cuerpo de respuesta. Vamos a llamarlo cuerpo y cuerpo console.log. Ahora, esa cadena nos dio esa matriz de 10 elementos. Si lo expandimos, puedes ver que estos son los datos que tenemos aquí dentro de la ventana del navegador. Fresco. Pero ahora lo gestionamos programáticamente usando la API de Fetch. Exactamente lo mismo, podemos hacer no sólo aquí, sino dentro de nuestro código, porque lo que escribimos aquí va a ser JavaScript del lado del cliente y acabamos de jugar con él aquí directamente dentro del navegador pero aún así no importa. Esto fue solo para darte una visión general de cómo va a ser esto. Pero lo vamos a hacer aquí dentro de nuestro código. Dentro de OnSearch, vamos a llamar a eso Fetch API tvmaze.com/search/shows. Ahora, en lugar de usar la sintaxis de.then, podemos usar asíncrono espera para hacerla más legible. Para poder usar esperar, si ves que pongo el cursor sobre él, dice, las expresiones de esperar solo están permitidas dentro de las funciones de sincronización por lo que significa que necesitamos marcar esa función como una sincronización, y ahora el mensaje desaparece. Esperamos a Fetch, luego obtenemos respuesta. Entonces tenemos cuerpo por esperar respuesta.json. Aquí, cuando escribo response y presiono “Dot”, puedes ver ahora tengo el IntelliSense, que me da el método.JSON. Si lo llamo, se puede ver que aparece la ventana, lo que significa que devuelve promesa. Ahora tenemos cuerpo. Si intentamos cancelar el cuerpo del registro aquí, y volvemos a nuestra aplicación, ¿dónde está? Aquí. En realidad, no importa. Si escribo algo aquí, puedo ver aquí los datos que vienen de la línea casa.JSX 16, de nuestra consola log aquí, lo que significa que acabamos de hacer la búsqueda programáticamente. Enviamos solicitud. Si abrimos la pestaña de red aquí y si hago clic en “Buscar”, puedes ver que enviamos una solicitud a esa URL que especificamos en Fetch, y si tenemos una vista previa, obtenemos los datos. Impresionante. Ahora, hagamos dinámica esta solicitud porque aquí tenemos la cadena de búsqueda, pero enviamos voz todo el tiempo. Aquí lo hemos declarado SearchString, así podemos pasarlo al Fetch reemplazando la cadena estática con backticks. En lugar de chicos, aquí, podemos interpolar nuestro SearchString. Ahora, probemos y el cuerpo del registro de la consola. Nuevamente, me refresco. Yo escribo chicas. Doy clic en “Buscar”. Si miro dentro de la pestaña de red, puedo ver que envío búsqueda muestra consulta chicas. Si escribo otra cosa, puedes ver que va a ser otra cosa. Si escribo algún galimatías, será un galimatías. Nuestra solicitud es dinámica. ¿Qué tan genial es eso? Ahora ya sabes cómo podremos recuperar datos. Se puede ver que todo está conectado ahora en una sola pieza de estas pocas líneas. Genial. Utilizamos la API de TVMaze. Puedes leerlo a través. Es muy sencillo con buenos ejemplos, solo rápidamente simplemente hojea por la caja. En el siguiente video, vamos a hacer que esta función sea reutilizable e intentaremos mostrar los resultados que recibimos aquí de la API. Este cuerpo, vamos a intentar mostrarlo dentro de nuestro marcado JSX. Déjame comprometerme los cambios que hemos hecho. Voy a dar click en el signo más. Voy a detener la app y voy a decir, déjame ver qué cambios hice? Digamos que busque películas o busque programas al hacer clic en el botón. Digamos que agregó cuadro de texto o búsqueda. Buscar espectáculos al hacer clic en el botón. Algo así. Después sube a GitHub y hasta el siguiente. Nos vemos ahí. 64. 08 Renderización de datos de show de la API de TV: Hola otra vez. En este video, finalmente mostraremos los resultados que obtengamos de la API. En el último video, llegamos a conocer cómo podemos consultar datos en función de lo que tecleamos dentro del elemento input. Esta vez, vamos a intentar mostrar los datos que recibimos de la API de TVMaze que usamos para consultar datos. Vamos. Si volvemos a nuestro código, tenemos la siguiente lógica para recuperar datos. Sin embargo, también vamos a usar la misma lógica en otras páginas también. ¿Por qué no hacemos un wrapper muy simple alrededor de estas funciones para que sea más fácil de reutilizar en otros archivos? Lo que voy a hacer dentro de source, voy a crear una nueva carpeta, que voy a llamar algo como API o tal vez como utils o puedes llamarla como quieras. Es sólo para separarlo del resto de la lógica del resto del archivo y será más fácil encontrarlo. Aquí, voy a ir a crear un archivo llamado tvmaze.js, y dentro de ese archivo, ¿qué voy a hacer? Voy a crear una función reutilizable a la que llamaremos ApiGet. Ese ApiGet recibirá solo el nombre de ruta de la URL, así que igual que ves en la documentación. Solo pasaremos ese segmento de URL a la función, y la función hará el resto. En lugar de hacer esto, llamaremos solo a ApiGet, y luego vamos a pasar programas de búsqueda y cadena de consulta, algo así. Sin embargo, podemos ir aún más allá y crear otro envoltorio para eso. En lugar de usar esta función así, podemos simplemente llamar a la función search for shows, y luego simplemente pasamos la cadena de búsqueda, y eso es todo y el resto, toda esa lógica aquí, se manejará dentro. Bastante genial. Sigamos adelante e implementemos eso. En primer lugar, necesitamos crear este ApiGet para que podamos usarlo así. Este ApiGet será una función que volverá como promesa, que será el cuerpo de respuesta, al igual que aquí. Eventualmente, va a quedar así. Sigamos adelante y hagamos eso. Pasamos aquí la QueryString. El primer argumento que recibirá esta función va a ser QueryString. Esta función va a usar fetch estas dos líneas. Voy a copiarlos desde aquí. Ya que aquí usamos la palabra clave esperar, pretendemos usar asíncrono espera, así que marco esta función como asíncrona, y desde esta función devolvemos el cuerpo. Sin embargo, obtenemos esta URL codificada aquí. Podemos moverlo afuera solo para declararlo de alguna manera en algún lugar en la parte superior para que sepamos cuál es el BASE_URL aquí. Aquí en la parte superior, solo voy a crear una variable llamada BASE_URL y será esta https://api.tvmaze.com sin barra diagonal principal. Entonces sólo voy a interpretarlo en la llamada de fetch BASE_URL. En lugar de usar slash search shows y luego search string, solo voy a aplicar esa QueryString que pasamos como argumento, que va a ser esta cadena con la barra diagonal principal. En lugar de todo eso, solo voy a usar QueryString. Eventualmente, nuestra URL se verá así. Tomará BASE_URL y tomará la QueryString que pasemos de los argumentos. Eventualmente, se formará este tipo de URL. Ahora, vamos adelante. Estuvimos de acuerdo en que llegamos más allá de ApiGet y creamos otra función encima de ApiGet que llamamos searchForShows, así que no pasamos programas de barra diagonal de búsqueda. Si quieres administrar eso, se gestionará en un solo lugar, en un solo archivo aquí dentro de tvmaze.js. A partir de aquí, voy a exportar porque vamos a usarlo más adelante dentro de la función home llamada export const searchForShows. Nuevamente, esta función recibirá solo la QueryString, justo lo que sea que tecleemos dentro de la entrada. Será de consulta. Sólo vamos a llamarlo consulta. Esa función llamaremos a ApiGet y va a pasar búsqueda, shows, y query va a ser query que pasemos. Esto llamaremos a ApiGet y lo que devuelva ApiGet será devuelto desde SearchForShows. Estoy usando aquí funciones de flecha sintaxis corta. Esta sintaxis sin usar explícitamente el cuerpo de la función con llaves devuelve lo que devuelve ApiGet. Esto es lo mismo que escribir return ApiGet. Para acortarlo, lo usamos así. Lo guardo, y ahora puedo usar ese searchForShows dentro de mi casa.jsx. Voy a importar desde, volvemos uno para el nivel arriba. Agarramos api/tvmaze, y agarramos searchForShows. Ahora, podemos eliminar todo eso y podemos llamar a searchForShows con la QueryString, que va a ser nuestra SearchString. Así. Si vemos los resultados, llamémoslo ApiData y registremos ApiData, y volvemos a la app. Sea lo que sea que escribamos aquí, inspeccionemos la pestaña Red. Tecleamos chicas, presionamos “Enter”. Se puede ver que la solicitud se está formando correctamente, URL de la solicitud es correcta. Todo funcionó a la perfección. Si miramos dentro de la consola, podemos ver eso en la línea home.jsx 15, exactamente donde tenemos nuestro registro de consola, esto es lo que recibimos. Este es nuestro APIData. Ahora, ¿qué podemos hacer? Podemos crear otro estado y cualquier dato que recibamos aquí, podemos colocarlo dentro del estado porque nuevamente, este APIData que recibimos son datos que cambian lo largo del ciclo de vida del componente porque estos son datos que buscamos. Puede estar vacío, no se puede cargar, algo podría troncarse con él. Voy a seguir adelante y aquí voy a crear nuevo estado, que vamos a llamar showsResult o vamos llamarlo solo ApiData y SetapiData, y se usará estado aquí. Por defecto, será un array vacío, o tal vez será nulo por defecto. Aquí lo que voy a hacer, esta variable longitud 15, llamaré como resultado o respuesta. Sí, vamos a llamarlo resultado y voy a llamar a SetapiData, y SetapiData va a ser el resultado. Cualquiera que sea la matriz que recibamos aquí, colocaremos dentro de nuestro estado APIData. Entonces ya sabemos qué hacer con las matrices Tú lo recuerdas. Podemos mapear cada elemento a algún JSX Barker y luego mostrarlo. Lo que haremos justo debajo del formulario. Vamos a crear un div aquí. Lo que vamos a hacer, vamos a crear una función aquí. En lugar de inlinear el método de mapa de puntos o primero vamos a alinear estos métodos de mapa de puntos. Hay una cosa a tener en cuenta a la hora de mapear. Vamos a llamar a APIData map. Tenemos datos aquí y por ahora, vamos a mapearlos a un div simple. Inspeccionemos qué tipo de datos tenemos aquí. ¿Cuál es la forma de los datos? Tenemos matriz de objetos. Si inspeccionamos este objeto de datos que representa este objeto que resalté, tiene score key y luego tiene show key. Dentro de show, tenemos nombre, tenemos ID URL. Por ahora, vamos a mostrar solo nombre. Necesitamos acceder a data.show. I Interpolo data.show.name. Siempre hay que recordar que hay que pasar el puntal clave. La clave tiene que ser algo único ya que tratamos con los datos de la API, los datos de la API cuando provienen de señas generalmente tienen ID y el ID representa de manera única el elemento. ID es el estuche perfecto para el soporte de la llave. Los datos muestran ID para identificar de manera única el elemento mapeado. Vamos a intentarlo. Vamos a la app y ¿qué tenemos aquí? Ya tenemos el error que dice, no se pueden leer propiedades de null, leyendo mapa. Si actualizo la página, siempre veré este error. ¿Qué pasa? El caso es que nuestro estado inicial aquí es nulo. Significa que cuando el componente se renderiza, los datos de la API de estado van a ser nulos. Debido a que no hicimos clic en ningún botón, no obtuvimos ningún resultado. El estado es nulo. Si intentamos mapear null, obtenemos este error porque básicamente, nuestro código se ve así, null.map. Bueno, esto está mal. Es por ello que vemos este error. Dice, no se pueden leer propiedades de null, leyendo mapa. Lo que significa que trata de hacer null.map. ¿Cómo podemos superar esto? Podemos hacerlo de múltiples maneras. La forma más fácil de lidiar con eso es cambiar el estado inicial de null a una matriz vacía. Déjame devolverlo a los datos de la API. Si lo cambiamos a un array vacío, siempre que no tengamos ningún dato, ya que array está vacío, no veremos nada. Porque bueno, nada será mapeado en última instancia. Cuando buscamos algo así como para chicos, y cuando obtenemos nuestros resultados de la API, cada elemento de la API se mapea al div correspondiente con el nombre del programa. Sin embargo, lo que quiero mostrarle alternativamente, en lugar de usar una matriz vacía como estado predeterminado, todavía podemos usar null, pero podemos manejar nuestra lógica ligeramente diferente. Vamos más allá y vamos a crear una función auxiliar a la que llamaremos RenderAPIData. En lugar de inlinear el método.map aquí directamente, que va a llamar como recuerdas ya lo hicimos, RenderAPIData y vamos a gestionar una lógica de renderizado condicionalmente dentro de esa función. Aquí voy a crear RenderAPIData. En lugar de usar esto, diré que nuestro estado inicial es nulo, recuerden. Cuando intentemos mostrar null, obtendremos un error porque bueno, no podemos mapear nulos. Simplemente podemos verificar si los datos de API son nulos o si nuestros datos de API son falsos, devolvemos nulos. De lo contrario, sabemos que definitivamente será una matriz una vez que esté establecida. O tal vez podamos invertir la lógica para que sea más legible y sea mejor. Se lo podemos decir. Si tenemos datos API, si los datos son veraces, no son nulos. Es algo por ejemplo como una matriz. En este caso, sí llamamos al método.map para devolver APIData, map, data, y luego la lógica que tenemos. De lo contrario, por defecto, si esta condición falla y nuestros datos de API son falsos, caerán por aquí, caerán por esta condición. Entonces por defecto, no devolvemos nada. Recuerde, los resultados nulos en nada se renderizarán dentro del marcado JSX. Si volvemos a la aplicación, se puede ver que no se muestra nada. Eso se debe a que los datos de nuestra API inicialmente están establecidos en nulos. Es por ello que hacemos nulos. Pero en cuanto busco la API, tengo mis datos aquí. Impresionante. Siempre que cambie de consulta, se actualizará. Solo mira eso, ¿cómo se ve? Una cosa más que quiero agregar aquí es en realidad el manejo de datos. Sé que ya cubrimos mucho y es mucho. Pero ¿qué pasa con los errores? haría, si nuestra solicitud que enviamos aquí, si miramos dentro de la red, si la solicitud que enviamos aquí falla por alguna razón, arroja un error. ¿Qué pasa en este caso? De hecho, podemos emular este error dentro de la búsqueda de programas o dentro de los datos de la API. Entonces, en lugar de solo hacer una búsqueda API, podemos simplemente lanzar error hasta que algo malo sucedió. Esto es exactamente lo que sucederá si esta solicitud falla por alguna razón, sucedió algo malo. Vamos a tratar de ver. Tenemos código inalcanzable, que de nuevo viene de eslint. Eslint me salvaste mucho. Por ahora, sólo vamos a comentar esto. Voy a buscar cualquier cosa, algo así como hola. Si hago clic, no pasa nada. Pero se puede ver aquí dentro de la consola, hemos descaptado en error de promesa, algo malo pasó. En este caso, necesitamos recordar siempre cuando tratamos con JavaScript asíncrono, cuando tratamos con API, siempre necesitamos atrapar y manejar errores pase lo que pase, incluso si estás seguro de esta API, lo grande que es y puedes pensar en cualquier error. Bueno, necesitas cambiar tu forma de pensar. Algo eventualmente traerá un error, así que debes asegurarte de manejarlo. En este caso, dentro de esta espera buscar espectáculos, podemos envolverlo e intentar catch block para atrapar cualquier error. Voy a mover estas dos líneas dentro try. Si algo dentro del bloque try falla , escupirá el error dentro del bloque catch. Podemos crear otro estado, y cualquiera que sea el error que recibamos aquí, podemos colocarlo dentro del estado. Aquí en la parte superior, voy a crear estado ApiDataError y el estado SetapiDataError. Por defecto, también será nulo. Voy a seguir adelante y dentro del bloque catch, solo voy a llamar a SetapiDataError a cualquier error que tengamos aquí. Ahora bien, si tratamos de cancelar el error de registro, el estado, por defecto, es nulo. Pero siempre que tengamos un error, podemos ver que tenemos el otro objeto dentro de nuestro estado. Podemos usarlo dentro de RenderAPIData y mostrar cualquier mensaje de error en caso de que haya un error. Podemos decir si tenemos ApiDataError. En este caso, por favor muestre div, que dice, ocurrió error, y podemos interpolar apiDataError.message ya que nuestro ApiDataError va a ser el objeto error. Vamos a intentarlo. Si recuerdas dentro de API Gateway lanzamos algo malo sucedió. Nosotros decimos que no importa. Hacemos clic en Buscar y ahora vemos que ocurrió un error, sucedió algo malo. Fresco. Sin embargo, también debemos recordar que necesitamos actualizar este estado en caso de que hagamos clic una vez Buscar, luego vemos que se produjo este error. Luego hacemos clic la próxima vez en Buscar, y luego la siguiente solicitud pasa por. Sin embargo, nuestros datos de API en nuestro estado están colgando. Todavía tiene su estado anterior, por lo que se mostrará. Tenemos que asegurarnos de limpiarlo antes de cada solicitud que enviemos. Llamamos SetapiDataError para conocer el estado inicial. Así como así, gestionamos todo el flujo de nuestra solicitud. Ahora podemos eliminar tirar nuevo error y común la lógica. Volvamos a ver todo en acción. Busco chicas, tengo chicas, tengo chicos, y tengo lo que sea que escriba aquí. Todo funciona como se esperaba. En caso de que tengamos un error arrojado por la API, éste será manejado aquí. ¿Cómo podemos probarlo? En realidad podemos simplemente escribir algún galimatías en el Euro y ver qué nos da la API. Yo mecanografié chicas. Doy clic en Buscar. Se puede ver dentro de la pestaña Red ahora es de color rojo. Dice 404, lo que significa que hicimos algo mal. Este punto final no existe obviamente. Nuestra API a la API de VMAs devolvió algún error. En nuestro caso, devolvió un error. Acaba de devolver un mensaje de estado 404. Fetch entendió que era un error, pero no tenía ningún mensaje de error. Dice que no se pudo recuperar por defecto. Ahora bien, si intentamos cambiarlo de nuevo. Si vamos a buscar chicos. Ahora, todo ha sido exhibido. ¿Qué tan genial es eso? Creo que se ve increíble. Manejamos todas las situaciones posibles que pudieran salir mal. Ahora tenemos una lógica bastante robusta, no sólo para crear datos sino también para manejar cualquier error, así como mostramos los datos que provienen de API, algo así. Creo que en realidad cubrimos mucho aquí. Hablamos de diferentes estados, hablamos de obtención de datos, hablamos de captura de errores, hablamos de mostrar datos. Eso es mucho. Vamos a envolverlo. Git add, git commit. Vamos a llamarlo buscar y mostrar datos de tvmaze api. Crear una función reutilizable para recuperar datos. A la función reutilizable, me refiero a la búsqueda de espectáculos. Impresionante. Compromémonos y empujemos todo para que domine. Te voy a ver en la siguiente. 65. 09 Fix Prettier no funciona: Hola ahí. Este video va a ser rápido porque acabo de notar un pequeño problema en la configuración del proyecto. El problema es este archivo prettierc. Entonces escribí mal el nombre del archivo y por eso, el conflicto que especificamos aquí no funcionó. No obstante, te habrás dado cuenta cuando estaba guardando archivos, estaban fuera de formativo. Esto se debe a que tenemos instalada la extensión Prettier y por defecto cuando esta extensión no pueda encontrar la configuración colocada en su proyecto, volverá a la configuración definida en algún lugar internamente dentro de esa extensión. Por eso aún funcionó. No obstante, no utilizó este conflicto. Para solucionarlo, permítame cambiar el nombre de ese archivo a prettierrc. Así que ahora en realidad se puede recoger. Si voy a, digamos componente app y lo guardo, ahora ves que en realidad tengo comillas simples como se define en conflicto más bonito. Sin embargo, para solucionar el pequeño problema, necesito repasar cada archivo dentro de la fuente. Puede ser tedioso y en realidad no tenemos muchos archivos, así que podemos hacerlo manualmente, pero aquí hay un consejo. Podemos usar una interfaz de línea común más bonita y escribir un pequeño script que formará una fuente interna de un archivo antiguo. Si voy a Prettier Documentation, hago clic en Docs y yo, en la sección Uso , puedo buscar CLI, puedo encontrar ese fragmento aquí. En la práctica, esto puede verse algo así. Yo sólo puedo copiar esta. Ir al paquete JSON, definir nuevo script aquí, que voy a llamar formato, donde voy a escribir más bonito guión guión escribir punto. Dot formateará todos los archivos en el directorio actual, pero no quiero hacer eso. Por eso voy a cambiarlo a source dot blast streaks, asterix, dot, luego corchetes, JS, JSX. No entre en pánico, esto es algo llamado glob pattern o una sintaxis glob. Se utiliza para hacer coincidir archivos y Prettier puede aceptar este patrón o sintaxis como argumento. Por lo que buscará todos los archivos dentro fuente y en subcarpetas antiguas y buscará solo archivos con extensión dot JS y dot JS6. Voy a salvarlo. Voy a hacer formato de ejecución NPM. Veamos qué tenemos. Ahora, podemos ver la salida. Entonces estos son todos los archivos que fueron formateados por el formato script por característica. Esta más bonita aquí a la que me refiero, se recogerá de los módulos Node porque lo tenemos instalado como una dependencia dev. Entonces escribimos más guapa aquí dentro de los scripts NPM y se resolverá al más bonito instalado desde los módulos Node, tan simple como eso. Ahora que tenemos todo arreglado, vamos a comprometerlo todo y digamos arreglado error de configuración más bonito, agreguemos script de formato al paquete JSON. Impresionante. Nos vemos en la siguiente. 66. 10 botones de radio: Hola ahí. En este video procederemos con nuestro desarrollo de la página principal, y esta vez, vamos a agregar botones de radio dentro de nuestro formulario que utilizamos para buscar los resultados, y podremos seleccionar si queremos buscar espectáculos o queremos buscar actores. Vamos. Voy a volver al componente home, dentro del componente home, justo debajo de la entrada de tipo text, voy a crear otra entrada aquí, ya que va a ser un botón de radio, lo colocaré dentro del elemento label, así será input de tipo. Etiqueta de radio serán espectáculos, nombre va a ser searchOption, el valor de ese botón de radio serán shows. Entonces voy a crear otra entrada, otro botón de radio, esta vez para actores. Actores, tipo radio, nombre permanece igual porque estos dos botones de radio comparten el mismo estado, valor serán actores. Vuelvo a mi marcado y puedo ver que hay casillas de verificación ahí, disculpe, botones de radio. Ahora bien, para que de alguna manera podamos incluir el valor, la selección de nuestras casillas de verificación en la solicitud API, necesitamos tener otro estado para estos botones de radio. En la parte superior, voy a crear otro estado, que llamaré SearchOption, algo así, configuro SearchOption por defecto, será shows. Nuestro estado SearchOption puede ser ya sea shows o actores, ya sea shows string o actor string. En base a eso, enviaremos solicitud relevante a TVMaze API. Ahora, necesitamos asociar ese estado que acabamos de crear con los botones de radio que escribimos anteriormente. Es más o menos lo mismo que con entrada de tipo texto, vamos a hacer enlace de datos bidireccional, ya tenemos valor, ahora necesitamos escuchar el evento change en estas entradas. lógica es exactamente la misma, voy a introducir aquí el manejador de eventos on change, que nombraré en cambio de radio, y será lo mismo para ambos elementos aquí en la parte superior derecha al lado de él. onSearchInputChange, voy a escribir en radio change, también recibe el objeto event, y ahora, para establecer el estado searchOption, puedo referirme al atributo value que pasamos a cada botón de radio correspondiente. Los botones de radio están representados por valores para que podamos acceder a event.target, que se resolverá al elemento HTML de entrada. Tienen atributo de valor y nos dará el valor correspondiente que asociamos con cada una de las radios. SetSearchOption será event.target.value, básicamente lo mismo que hicimos con onSearchInputChange. Ahora bien, esto es un enlace de datos unidireccional, como recuerdas, pero escucha los cambios dentro de la radio pero no asociamos el estado searchInput de nuevo con el elemento de entrada, así que ya tenemos atributo value aquí, pero el estado del botón de radio está representado no por el atributo value, sino por el atributo checked, y nuestro botón de radio shows marcado cuando nuestro searchOption es igual a shows, así podemos escribirlo así. Buscar espectáculos es igual a espectáculos. Esta expresión será verdadera cuando la búsqueda shows será string shows. Exactamente la misma lógica que vamos a aplicar para la entrada de los actores. Se va a verificar sólo cuando búsqueda de espectáculos sea igual a actores. Genial. Ahora echemos un vistazo. Vamos a registrar la consola SearchOption, y discúlpeme, todavía dice que usé la búsqueda de programas aquí, lo siento, quise usar SearchOption, si el estado es igual a shows entonces esta entrada será verificada. Lo mismo ocurre con los actores. Genial. Ahora probemos y console log SearchOption solo para asegurarnos de que hicimos todo bien. Por defecto, se muestra este es el estado inicial. Si selecciono actores, ahora, son actores, si selecciono programas de nuevo, siguen siendo shows, lo que significa que todo funciona perfectamente bien. Ahora, necesitamos conectar de alguna manera este estado SearchOption en nuestra solicitud y colocar la lógica correspondiente en algún lugar dentro del controlador de búsqueda. Ahora mismo, vamos a ponerlo muy simple, pero en el siguiente video, vamos a refactorizar ligeramente ese componente y vamos hacer que se vea mucho, mucho mejor. Pero, ¿cuál será la lógica en primer lugar? Si volvemos a la documentación de la API de TVMaze, usamos este punto final aquí para buscar los espectáculos. Si miramos dentro de la tabla de contenidos, hay otro enlace que nos lleva a la sección de búsqueda de personas aquí, y es casi lo mismo que con espectáculos. Se puede ver eso, bueno, la plantilla básicamente es más o menos la misma, pero esta vez buscamos personas en lugar de espectáculos, entonces cómo podemos lograr eso en nuestro código. Si volvemos a TVmaze.js, aquí ya tenemos esta función reutilizable llamada search for shows. Podemos copiar esa función y renombrarla searchForPeople, y en lugar de pasar /search/shows a API get, vamos a pasar /search/people, y todos los argumentos permanecen igual porque también tenemos cadena de consulta aquí. Impresionante. Volvemos a homejsx, esta vez importamos SearchForPeople. La lógica dentro del manejador de búsqueda será muy simple. Si SearchOption es igual a shows, por favor ejecuta esta lógica que ya tenemos, lo contrario, por favor ejecuta la misma lógica, pero llama a SearchForPeople. Se puede ver que tenemos una pequeña repetición aquí, pero vamos a ajustar eso en el siguiente video. Por ahora, no pienses demasiado en eso. Veamos cómo se ve. Volvemos a nuestra app, muestra seleccionados por defecto, buscamos algo, y puedes ver que todo funciona como se esperaba. Si seleccionamos actores y después hacemos clic en “Buscar”, tenemos una pantalla en blanco, ¿qué pasó? Si miramos dentro de la pestaña de red, aún podemos ver que la solicitud pasó por con el endpoint correcto /buscar/personas, pero si miramos dentro de la consola, tenemos ese encabezado, dice que no se pueden leer propiedades de nombre de lectura indefinido. ¿Qué pasó? Si miramos el cuerpo de respuesta que recibimos de la API, este es el objeto que tenemos, pero dentro del código, en realidad escribimos, si tenemos estado de datos API, vamos a renderizar data.show.id o data.show.name pero en el resultado de nuestros actores, no tenemos eso. No tenemos data.show, tenemos data.person. Básicamente estamos accediendo a los datos equivocados. Consola aquí, nos habla de eso. No se pueden leer las propiedades del nombre de lectura indefinido, porque data.show no está definido dentro de ese objeto de respuesta, y luego intentamos acceder a undefined.name, y esto es lo que vemos, no podemos leer propiedades de nombre de lectura indefinido. Este es nuestro problema. La solución para eso será que en algún lugar de aquí necesitaremos escribir, cuando busquemos actores o cuando tengamos, digamos resultados de actores, por favor muestre actores, pero cuando tengamos resultados de shows, por favor muestre programas, y no podemos hacer la misma lógica que aquí. No podemos confiar en nuestro estado, necesitamos confiar en la forma de datos que tenemos. Aquí dentro de la lógica, solo podemos hacer si, ¿dónde está? Tenemos una matriz, vamos a preguntar, si los datos de la API primer elemento tiene propiedad show, en este caso podemos decir que estamos trabajando con los shows, tenemos muestra datos de la API. De lo contrario, si no tenemos shows, si nuestro primer elemento dentro ese array no tiene la propiedad show, podemos decir que estamos trabajando con la gente de aquí, con ese objeto person. Vamos a decir lo contrario, por favor ejecute Apidata.map y los datos esta vez no se mostrarán sino data.person. Persona de datos, veamos, id también y persona de datos, digamos nombre, más o menos lo mismo que con los espectáculos. Ahora vamos a intentarlo. Se ve un poco desordenado, no te preocupes, vamos a arreglar todo eso un poco más tarde. Veamos que todo funciona. Busco shows, obtengo resultados de la API, se renderizan, perfectos. Me cambio a actores, y busco algo como Andrew y ya se puede ver que no tenemos ningún sumador, consola es clara, obtenemos respuesta en la pestaña de red y tenemos datos renderizados, así podemos decir que funcionó. Impresionante, ¿no? Genial. decir que hemos logrado lo que queríamos por ahora, vamos a comprometer nuestros cambios y en el siguiente video, vamos a refactorizar ligeramente ese componente y encapsular esa lógica que tenemos con el elemento form aquí en un componente separado. Pero por ahora, vamos a comprometernos todo, y nombre que se comprometan como déjame ver, agregó búsqueda de actores. Genial. Vamos a empujar a GitHub y nos vemos en la siguiente. 67. 11 Mover la lógica de formulario de búsqueda a su propio componente: Hola otra vez. En este video, seguiremos trabajando con nuestra lógica que hemos introducido en el video anterior. Agregamos una opción para seleccionar ya sea shows o actores y luego en base a esa selección, enviamos la solicitud correspondiente a TV maze API. puede ver que una vez que agregamos esa lógica, nuestro componente de hogar se hinchó un poco con mucha lógica diferente. De hecho podemos simplificarlo y esto es exactamente lo que vamos a hacer ahora. ¿Por qué no movemos toda esa lógica relacionada con el elemento form, todos estos estados, por qué no la movemos a un componente separado y ponemos ahí la lógica, y luego vamos a exponer solo lo que necesitamos a través de sondas? Vamos a tratar de hacer eso. Dentro de la carpeta de componentes, voy a crear un nuevo componente, algo así como searchformjsx. A partir de aquí, voy a exportar componente de formulario de búsqueda. Pero ahora será solo un div vacío con algo exportar formulario de búsqueda predeterminado. Entonces, ahora probemos un importante y veamos cómo aproximadamente queremos que se comporte este componente para que podamos escribir la lógica correspondientemente. Voy a importar búsqueda del formulario de búsqueda de componentes. En lugar de todo eso, que va a escribir formulario de búsqueda. ¿Qué necesitamos? Queremos realizar la búsqueda en algún lugar de aquí en ese componente porque este es el componente donde realmente renderizamos los datos. Si quisiéramos gestionar todo dentro del formulario de búsqueda, entonces no podríamos acceder a esa lógica desde el exterior. Vamos a administrar la lógica de estado con entradas dentro del componente pero la búsqueda en realidad va a estar sucediendo aquí. La lógica de búsqueda se escribirá dentro de casa JSX. Necesitamos de alguna manera encontrar una manera de exponer una sonda que nos permita buscar espectáculos aquí dentro de casa JSX. Podemos simplemente pasar esto en función de búsqueda al formulario de búsqueda y al formulario de búsqueda de información cuando hacemos clic en enviar que va a llamar a la función que se define aquí dentro de casa. Vamos a llamarlo algo así como en búsqueda y vamos a pasar nuestra función de concierto que ya tenemos pero vamos a modificar ligeramente la lógica. En lugar de escribir todo eso solo tendremos una sola línea. Ahora, copiemos ese marcado con el elemento form que tenemos, y pongámoslo dentro del formulario de búsqueda así. Ahora, necesitamos mover la lógica que tenemos en casa JSX a su estado como en el cambio de entrada de búsqueda y en el cambio de radio. Vamos a mover todo eso al formulario de búsqueda. Aquí, también estos estados, opción de búsqueda y cadena de búsqueda. Vamos a copiar estos dos. Pongámoslos aquí arriba. Tenemos que importar el estado de uso ahora. Voy a copiar esto también. Ahora, lo único que nos perdimos de aquí es el manejador en búsqueda. Sigamos adelante y definirlo aquí. En lugar de llamar a eso en la búsqueda, lo llamaremos al enviar, el motivo será el siguiente. Podemos pasar eso en el manejador de búsqueda aquí directamente como sonda y luego especificarlo directamente como en el controlador de envío pero vamos a exponer el objeto de evento, lo que significa que tendremos que escribir la lógica para evitar el evento submit. Sin embargo, el componente externo que es Home.JSX realmente no necesita saber sobre eso. ¿Por qué realmente necesito evitar alguna lógica predeterminada, algún comportamiento predeterminado? Podemos mover parte de esta lógica desde búsqueda directamente dentro del componente de formulario de búsqueda. Aquí, voy a crear la función de envío y la voy a pasar como en atributo submit. Nuevamente, tenemos el objeto event dentro de esa función. Evitamos la acción de envío por defecto llamando a event prevent default y justo después de eso, necesitamos ejecutar esta lógica. Pero esta lógica se definirá aquí. Podemos esperar el prop en búsqueda que va a ser una función y simplemente lo vamos a llamar aquí, así como así. Vamos a intentarlo. Aquí, en lugar de escribir event prevent default, no lo necesitamos porque ya está hecho dentro del componente de formulario de búsqueda, lo eliminaré. En este momento llamamos búsqueda propia sin ningún argumento, lo que significa que aquí no recibo nada. Sólo una función sin ningún argumento. Sin embargo, perdimos la opción de acceso a la búsqueda y perdimos el acceso a la cadena de búsqueda. Para solucionarlo, cada vez que llamamos la función on-search que definimos dentro de home, podemos pasar argumentos aquí porque sí lo tenemos aquí dentro del formulario de búsqueda. ¿Por qué no llamamos a la cadena de búsqueda en la web de búsqueda y la opción de búsqueda? Pero para que sea más fácil de usar, la API que exponemos desde el componente de formulario de búsqueda para que sea fácil de usar aquí, podemos pasar puede ser un objeto, algo así como opciones. Consulta, que sea solo Q será la cadena de búsqueda y la opción de búsqueda, mantengámosla como está. Eventualmente, tendremos un objeto llamado options con propiedad Q y propiedad de opción de búsqueda. Vamos a pasar ese objeto a la función de búsqueda. Aquí recibimos el objeto options y podemos hacer desestructurar directamente aquí. Vamos a desestructurar la propiedad Q y la propiedad de opción de búsqueda. Tomamos Q, agarramos la opción de búsqueda en lugar de la cadena de búsqueda. Ahora vamos a usar P. Vamos a tratar de ver. Si refresco la página no pasa nada porque no ejecuté el servidor de desarrollo. Déjame hacerlo muy rápido. Esperemos un segundo. Está aquí. Déjame refrescarme. A ver. Nuestra funcionalidad no debería cambiarse realmente porque solo estamos haciendo un factor más pequeño aquí. Esperamos que todo se comporte exactamente igual que antes. Chicas, tenemos chicas, funciona perfectamente, actores. Digamos, Garry, tenemos a Garry. Se puede ver que la funcionalidad permanece igual pero ahora nuestra lógica dentro de una casa JSX se simplificó drásticamente. Básicamente no tenemos casi nada aquí excepto la lógica relacionada con la búsqueda misma. La lógica que cuida la forma de todas las entradas se encapsuló dentro del formulario de búsqueda. Ahora, separamos las preocupaciones. Tiene sentido. Creo que sí. Eso es todo por ahora. En realidad, espera, no es eso. Todavía tenemos que hacer algo al respecto porque se puede ver que todavía tenemos la pequeña repetición aquí. De hecho podemos mantenerlo así y realmente no pensar demasiado en eso. No hay nada malo en esto pero podemos simplificarlo. Podemos decir primero crear una variable llamada result. Así entonces vamos a mover los datos de la API de conjunto aquí y solo vamos a hacer algo como esto. O tal vez incluso podamos hacerlo más simple al inlinear la lógica con operadores ternarios, muestra la opción de búsqueda, por favor espere buscar espectáculos de lo contrario espere a la gente. Pero creo que esta afirmación servirá. Impresionante. Ahora eso es totalmente. Comprometamos todo lo que acabamos de hacer. ¿Cómo podemos nombrar eso? Podemos nombrar eso de manera muy simple. Simplemente lo llamamos factorizado o digamos lógica de formulario de búsqueda oscilante y componente de formulario de búsqueda. Perfecto. Te veo en la siguiente. 68. 12 Mostrando cartas para ambos espectáculos y actores: Hola. En este video, continuaremos con el desarrollo, y procederemos a mostrar datos de la API de laberinto de TV. En este momento, nuestra lógica para mostrar datos es muy básica. Simplemente mapeamos el estado de los datos de la API y luego mostramos el acrónimo o el nombre del programa. Hagámoslo real esta vez. Entonces, en lugar de escribir eso, podemos, de nuevo, oscilar toda esa lógica en un componente separado, específicamente para actores, y en otros componentes, específicamente para espectáculos. Hagamos eso. Dentro de la carpeta de componentes, voy a crear dos carpetas más aquí, una para actores y otra para espectáculos. En estas carpetas, pondremos componentes específicos únicamente relacionados con espectáculos o relacionados con actores. Dentro de la carpeta de espectáculos voy a crear un nuevo componente, que voy a nombrar ShowGridJsx. Esto va a ser y ahora tan simple, div export default showGrid, y para la futura referencia, voy a copiar esta lógica y ponerla dentro de ActorsGrid también. Pero esta vez voy a cambiarle el nombre a ActorsGrid. Ahora volvamos a casa. Ahora, en lugar de hacer esto, en lugar de mapear elementos aquí directamente, podemos mostrar ya sea ShowGrid o ActorGrid. Cuando tengamos shows, vamos a mostrar ShowGrid. Se puede ver de nuevo el intellisense, desde el desplegable, presiono “Tab” y verifiqué que se importó correctamente. Bueno, lo fue, así puedo continuar. Lo mismo voy a hacer con los actores, en vez de mapear elementos aquí, voy a mostrar ActorsGrid. El intellisense, boom, importado. He verificado la entrada. Se ve genial. Ahora es mucho más sencillo, ¿no? Para que podamos mostrar datos dentro de estos componentes, necesitamos pasar datos para que de alguna manera puedan manipularlos desde adentro. Para ShowGrid, vamos a pasar shows prop, y van a ser datos API. Para los actores grid , van a ser actores, nuevamente, datos API. Por ahora, terminamos con el componente para el hogar. Toda la lógica se colocará en el componente de cuadrícula correspondiente. Empecemos primero con los espectáculos. Vamos a ShowGrid, aquí, recibimos el prop del programa que pasamos aquí desde homejsx. Genial. Ahora, dentro de la cuadrícula Mostrar, ahora vamos a mapear datos. Vamos a escribir showsgrid.map. Aquí tenemos nuestro objeto de datos. Por ahora, vamos a recordarnos rápidamente, ¿qué tenemos? Tenemos datos show.name si no me equivoco, y para la clave, voy a pasar datos, mostrar ID. Solo verifiquemos eso rápidamente. Volvamos a la aplicación. Escribo algo y tengo un error, que dice que no se pueden tratar propiedades de undefined. Creo que ya veo. El problema es que manejamos el caso cuando tenemos etapa es igual a nulo. Pero realmente no manejamos el caso cuando el escenario es una matriz vacía. Porque viste entré un galimatías ahora, pero si escribo algo sensato y en realidad tenemos resultados de la API, tenemos una matriz. Pero si escribo algo galimatías, será una matriz vacía. Si miramos dentro de la pestaña de red, puedes ver desde la API en tu vista previa, tenemos una matriz vacía y no manejamos esto aquí. Pero en la lógica que escribimos, por favor verifique contra el primer elemento dentro de la matriz. Pero como el primer elemento no existe, es indefinido, tenemos undefined.show, básicamente. Tenemos que arreglarlo. Tenemos que considerar el caso cuando tenemos una matriz vacía. Aquí, vamos a agregar otra condición if, si apidata.length es igual a cero. Se puede ver lo que hice aquí, hecho agregué ese signo de interrogación aquí. Esto se llama encadenamiento opcional porque si los datos API son nulos, y si voy a escribir null.length, obtendré un error. Para evitar este error y asegurarnos de que la duración del acceso de JavaScript solo sea veraz cuando los datos de la API sean veraces, podemos agregar este signo de interrogación aquí. Si los datos de la API son falsy, son nulos, no arrojará un error diciendo que no puede leer la longitud de la propiedad de null. Pero cuando sea veraz, procederá y utilizará la propiedad length. Si apidata.length es igual a cero, si nuestra matriz está vacía, vamos a mostrar ningún resultado. Vamos a tratar de ver que si escribo galimatías, obtenemos array vacío de la API, y esta vez no tenemos textos de resultados. A mi me queda bien. Escribamos algo que tenga sentido. Tenemos chicas, la lógica que muestra todos los shows más antiguos está escrita dentro de ShowGrid. Se ve perfectamente bien. Ahora, sigamos adelante y creamos el componente de tarjeta para el espectáculo. El componente de la tarjeta será nuestro estilo show-card, donde vemos todos los datos sobre el espectáculo en lugar de simplemente mostrarse en div simple. Dentro de la carpeta de espectáculos, voy a crear ShowCardJSX. Esto va a ser tarjeta de demostración. Nuevamente, div simple, y por defecto exportamos ShowCard. Ahora vamos a usar esa tarjeta de presentación aquí dentro de ShowGrid. En lugar de mapear cada elemento, cada objeto show a ese div simple, vamos a mapear cada elemento al componente show card. En lugar de hacer eso, mapearé cada elemento a ShowCard. De nuevo, entrada Alto, y voy a necesitar pasar apoyos al componente ShowCard. No obstante, es todo rojo porque de nuevo, necesito pasar el puntal clave. No importa si el elemento es tu propio componente personalizado o es solo un elemento HTML, siempre necesitas pasar la clave. La clave va a ser la identificación de demostración de datos. Ahora bien, ¿qué datos queremos mostrar dentro de ShowCard? Empecemos con algo sencillo. Entonces primero vamos a recibir el nombre prop, y probablemente vamos a recibir imagen o comencemos primero con el nombre. Dentro del div, vamos a mostrar eso dentro de la etiqueta h1. Vamos a interpolar nombre. Ahora tenemos que pasar ese nombre prop aquí. Cuando estoy mapeando el componente show card, voy a pasar name, equals data, show.name, algo así. Vamos a tratar de ver. Efectivamente, se puede ver ahora es todo grande y audaz. Esta es nuestra etiqueta h1. Entonces vamos a pasar imagen si inspeccionamos nuestros datos API. Vamos a tratar de ver. Tenemos imagen de espectáculo. Una imagen es un objeto con teclas medianas y originales. Vamos a tratar de ver si estos datos cambian de alguna manera. Imagen, todavía tenemos algunos pero te puedo decir que la imagen aquí podría ser nula porque no todos los shows que recibimos de esa API tienen imágenes. Es posible que no tengan ningún dato. En este caso, la imagen será nula. ¿Cómo podremos exhibir algo? Para estas situaciones, lo que sugiero hacer. En caso de que no recibamos ninguna imagen de la API, mostraríamos la imagen de marcador de posición al usuario, algo así como imagen no encontrada. Para eso, podemos volver al invitado que hayas compartido contigo. Aquí puedes encontrar ese marcador de posición para espectáculos, actores sin imagen de portada. Puedes hacer clic en esa imagen, luego hacer clic derecho sobre ella, guardar la imagen como y colocarla en nuestro proyecto. Voy a colocarlo dentro carpeta pública y voy a llamar a eso como no encontrado image.png. Genial. Si miro dentro del público, ahora apareció aquí y de hecho podemos referirnos a esa imagen PNG dentro de nuestro código fuente. Vamos a ver rápidamente cómo se ve. La fuente de la imagen no va a ser imagen enlazada porque nuestro archivo se coloca dentro del público y se sirve a través de la ruta de la aplicación. Lo guardamos, volvemos a la app y cada vez que buscamos espectáculos, tenemos esto, perfecto. Esta es la imagen que tenemos. Ahora dentro de show grid, vamos a pasar image prop, pero vamos a especificar si data.show.image es verthy en este caso, toma esta image.medium, data.show.medium, de lo contrario por favor show not found. ¿Cómo lo nombramos? No se encontró image.png. Genial. Ahora dentro de la tarjeta de demostración, podemos agarrar ese accesorio de imagen y podemos mostrarnos en algún lugar aquí arriba en la parte superior. Vamos a envolver la imagen en un div. Entonces fuente va a ser imagen que pasamos y salimos será el nombre del espectáculo. Veamos rápidamente qué tenemos. Aquí tenemos algo mal. A ver, no tenemos ninguna fuente. ¿Por qué es eso? Tiene que ser data.show.image.medium. Ahora se puede ver que funcionó bastante bien. Vamos a tratar de buscar actores, y ya puedes ver ahora que tenemos todas estas imágenes de portada. Bonito. Sigamos adelante y rellenemos los datos de la aplicación. ¿Qué más necesitamos mostrar? Nos gustaría mostrar tal vez solo un resumen y dentro de cada tarjeta, pero también tendremos un botón para el futuro para iniciar ese espectáculo. Cuando hagamos clic en ese botón, comenzará, así como cuando hagamos clic en la tarjeta, nos llevará a la página del espectáculo. Eso vamos a crear en el futuro. Dentro de la tarjeta de presentación, necesitaremos identificación. También necesitaremos resumen. Veamos cómo podemos exhibir todo aquí. Vamos a crear un div aquí. Un div será probablemente solo un enlace por ahora que importamos desde el [inaudible]. Dentro del enlace vamos a decir leer más. El enlace nos llevará por ahora a la ruta. No vamos a hacer nada al respecto por ahora. Entonces tenemos un botón aquí de tipo botón, que será estrella me por ahora en el futuro lo reemplazará con el icono. Acerca de resumen. Resumen vamos a mostrar en algún lugar por aquí y no vamos a mostrar resumen ya que eso simplemente no va a mostrar el prop que recibimos, vamos a transformarlo de alguna manera. La razón detrás de eso, si nos fijamos en la respuesta de la API, tenemos la cadena de resumen. Pero como puedes ver, es cadena HTML. Significa que solo podemos tomar ese HTML y usarlo. El problema es que es bastante largo. Queremos que sea breve. Aquí no queremos mostrar cientos de palabras. Sugiero transformar esa cadena de resumen en algo muy corto. Vamos a despojar todas las etiquetas HTML de aquí, y vamos a agarrar solo, digamos las primeras 10 palabras, probablemente. ¿Cómo podemos hacer eso? Supongamos que aquí recibimos esta cadena. Escribamos la lógica dentro de Browser Console aquí. Aquí tenemos esta cadena. En esa cadena, primero vamos a transformarla en una matriz llamando al método.split y vamos a dividirlo por espacios vacíos. Ahora tenemos algo así. Entonces vamos a tomar solo los primeros 10 elementos de esa matriz, .split después de eso, vamos a rebanar del índice cero al índice 10. Terminamos con una matriz de 10 elementos. Entonces vamos a transformar esa matriz de nuevo en cadena. Vamos a unir todos los elementos con una cadena vacía en el medio. Se ve así. Pero todavía tenemos etiquetas HTML aquí, así que necesitamos reemplazarlas. Voy a cambiar el método.replace disponible en todas las cadenas. Aquí, voy a pasar algo llamado expresión regular. Voy a hacer coincidir todos los caracteres innecesarios y luego reemplazarlos con una cadena vacía. Básicamente solo los quitará. No pienses en eso para igualar. La expresión regular que voy a escribir simplemente reemplazará todas las etiquetas HTML dentro de nuestra cadena actual. Se verá así. Simplemente no le pongas mucha atención a eso. Nuestro resultado final se verá así. Tomamos esa cadena HTML, acortamos y despojamos todas las etiquetas HTML. Sólo puedo copiar esta lógica. Acaban de escribir aquí, y voy a hacer algo como resumen despojado. Si no me equivoco, en el show el resumen también podría no estar presente, es por eso que aquí vamos a comprobar los valores falsy. Si tenemos resumen, entonces vamos a llamar al método split y a toda esa lógica para transformar nuestro HTML en cadena simple, lo contrario no vamos a decir ninguna descripción. Entonces vamos a exhibir resumen despojado. identificación por ahora no se usa, pero la vamos a mantener así. Guardamos el archivo, volvemos a mostrar grid y pasamos ID, que va a ser data.show.id y para nombre, ya lo tenemos. Al final, vamos a pasar resumen. Será bastante sencillo, solo data.show.summary. Sé que suena mucho pero créeme esto es solo una forma regular cuando trabajas con datos de la API. Tienes que pensar de alguna manera cómo quieres que muestre los datos. Esto es algo normal aquí. Lo guardo, vuelvo aquí, y si busco chicos esta vez, ¿dónde están mis chicos? Ellos están aquí. Ahora tengo la cadena de resumen que transformamos con enlace Leer así como el botón Star Me. Bueno, se ve genial, ¿no? Ahora, en realidad pasamos mucho tiempo en programas aquí. Envolvamos rápidamente a los actores que tenemos. Dentro de la cuadrícula de actores, podemos simplemente copiar esta lógica desde aquí. No necesitamos registro de consola. Yo solo voy a copiar la lógica de show grid, ponerla dentro de la grilla de actores. Rápidamente recibiré el apoyo de actores que pase aquí. Actores.Datos POP. Yo hago eso dentro de show grid. Necesito hacer eso dentro de la grilla de actores. Aquí recibo actores. Mapeo actores y los mapeo a tarjeta de actores. Actorcard.jsx. Voy a copiar esa lógica muy rápidamente de show card, colocarla dentro de la tarjeta de actores. Voy a cambiar el nombre de show card a actor card, y esta vez, ¿qué datos recibiré? En primer lugar, los actores también tienen nombres. También tienen imágenes, y también tienen identificaciones, o tal vez no. No necesitamos identificación porque tendremos una página separada para cada programa, pero no tendremos una página separada para cada actor. Vamos a necesitar un nombre, vamos a necesitar imagen, probablemente necesitaremos algo como género, su país, tal vez cumpleaños y día de la muerte. Entonces aquí dentro de la parrilla de actores, voy a usar esa tarjeta de actor aquí. Fue auto importado en lugar de pasar todos estos apoyos. Déjame quitarlo. Para clave, voy a pasar datos punto, déjame ver realmente. ¿Qué tenemos aquí? Mostrar tarjeta no está definida. Resumen no está definido. Vamos. Déjame buscar actores. Déjame ver la solicitud de la red. Aquí tengo persona. Esta es persona, entonces datos, persona. Dentro de persona, tengo cumpleaños, país nulo, día de muerte nula, género nulo, hembras. Ya ves que ya tienes muchos nulos. Bueno, eso no está mal. Vamos a pasar nombre. Simplemente va a ser la persona de datos.nombre. Entonces va a ser país. Si no estoy borracho, el país puede ser en realidad un objeto. Es un objeto con nombre aquí. Simplemente voy a pasar datos, persona, país.nombre. No obstante, el país puede ser nulo, por lo que tenemos que verificar contra eso. Si los datos, persona, país son veraces, entonces por favor tome nombre. De lo contrario por favor denle nulo. Entonces tenemos cumpleaños. Como viste cumpleaños no puede ser nulo, pero nosotros manejaremos esa tarjeta de actor dentro. Vamos a pasar datos, persona, cumpleaños. Entonces también tenemos el día de la muerte, que es más o menos lo mismo que el cumpleaños. Entonces también tenemos género. El género va a ser datos, persona, género. También, creo que nos olvidamos de la imagen. Imagen, creo que será más o menos lo mismo que con los espectáculos. Yo sólo lo voy a copiar. Preguntaré si existen datos, persona, imagen. Por favor, indique datos, persona, Imagen, medio, lo contrario no se encontró imagen PNG. Genial. Ahora bien, ¿cuál será el marcado para la grilla de actores? Déjame ver. La imagen permanecerá igual sin nombre. Dentro de H1, vamos a seguir mostrando nombre, pero junto al nombre también mostraremos género entre paréntesis si hay alguno. Podemos poner en línea nuestra lógica aquí. Recuerdas que podemos renderizar condicionales inline directamente dentro de JSX si el género está ahí, por favor muestra la cadena, que va a ser paréntesis y dentro de paréntesis, vamos a interpolar género, y este género puede ser nulo. Cuando usamos el operador y para renderizar condicionalmente esta lógica, queremos asegurarnos siempre de que el género sea un valor booleano. Por eso vamos a transformarlo en un booleano así para comprobarlo, o podemos aplicar la doble negación, que también la convertirá en un valor booleano. Al lado del nombre, vamos a mostrar país dentro de la etiqueta del párrafo, creo. Vamos a preguntar si se conoce país, entonces vamos a mostrar una cadena que dice viene del país. De lo contrario no le vamos a decir a ningún país, a nadie. Entonces tenemos cumpleaños y día de la muerte. Aquí vamos a hacer la misma lógica. Si tenemos cumpleaños, un valor booleano. Por favor, muestre la etiqueta p con nacido en el cumpleaños. Probablemente lo mismo para el día de la muerte o para un día de muerte en lugar de no mostrar nada cuando lo hace ahora, todavía podemos decir que esta persona está viva. Por eso vamos a crear la etiqueta p aquí y vamos a preguntar si tenemos el día de la muerte, por favor. Display murió en este día de la muerte. De lo contrario, por favor muéstralo vivo. Realmente no necesitamos ese div en la parte inferior. Nuestro marcado final se ve así. No necesitamos el componente link en la parte superior. Bueno, eso fue mucho y ya estoy cansado ahora escribiendo toda esa lógica bastante aburrida de mostrar datos. Pero aún así tenemos que pasar por esto. Busquemos espectáculos. Tenemos todo siendo exhibido. Ahora, nos hemos cambiado a actores. Esta vez buscaremos a Harry, no a Gary sino a Harry. Aquí tenemos imagen. Se puede ver si la imagen no existe , muestra imagen no encontrada. Entonces tenemos el nombre, el género entre paréntesis. Entonces no tenemos país, nadie vivo o no vivo, cuando nació la persona. Todos los datos que tengamos de la API se mostrarán de esta manera. Creo que esto es todo. Comprometamos todo y sigamos adelante. Voy a comprometerlo todo. Sé que viste esta advertencia que tenemos por esa identificación. Eso está bien. Vamos a mantenerlo ahí por ahora. Vamos a ocuparnos de eso más tarde. Vamos a comprometerlo todo y vamos a decir espectáculos mostrados y datos de actores. Empujemos todo para dominar y tomemos un descanso. Te voy a ver en la siguiente. 69. 13 páginas con contenido dinámico: Hola, ahí. En el último video hemos creado tarjetas para espectáculos y actores. Esta vez, vamos a hablar de páginas dinámicas. Como recuerdas en tarjetas para espectáculos, tenemos ese enlace leer más. Si volvemos al marcado, este es el componente de enlace que usamos de React Router dom. Por ahora resuelve a la página principal a la raíz. Básicamente no hace nada si hacemos clic en él. Ahora bien, lo que queremos hacer en su lugar, cuando hacemos clic en el “Leer más”, debemos ser navegados a la página específica del espectáculo. En primer lugar, tenemos que decidir cómo se representará exactamente nuestra página del programa. En este caso, y la mayoría de las veces, las páginas están representadas por Ids. Tenemos ShowID. Puede ser nuestro identificador único para la página, así que cada vez que hagamos clic en una página en la URL, alguna manera veremos ShowID. Aquí podemos considerar dos opciones. Primera opción, nuestra URL se verá algo así como slash show, y luego Id del programa se suministrará como parte de la cadena de consulta. Algo así. Segunda opción que podemos considerar, en lugar de suministrar Id como parte de la cadena de consulta, podemos convertir ShowID en segmento URL. Eventualmente, show page tendrá URL, algo así como slash show, slash showID, y ese Id se cambiará en función del programa en el que hagamos clic. La pregunta aquí es cómo se puede lograr esto con React Router. Si volvemos al componente app aquí, como recuerdas comenté ese marcado que tomé de la documentación para la futura referencia. Aquí tenemos estos equipos de ruta y dentro de ella tenemos algo con colon, tenemos equipo de colon Id. Lo que sea que veas aquí es algo llamado parámetro URL dinámico o segmento URL dinámico, porque es algo que cambia. Todos nuestros datos que tenemos dentro de nuestra aplicación son dinámicos, porque sea lo que sea que tecleemos en la entrada, será dinámico. Realmente no podemos predecir qué datos debemos esperar de la API. Tenemos que pensar de alguna manera cómo podemos escribir el esqueleto para los datos dinámicos. Lo que sugiero que hagamos es que consideremos la segunda opción que acabo de mostrarte, y nuestra URL se verá como slash show, slash showID. Ese parámetro dinámico de URL ShowID es lo que ves aquí en este ejemplo con dos puntos. Le damos algún nombre, digamos TeamID. Especificamos que este parámetro nombrado será algo dinámico que podamos tomar de la URL. En nuestro caso, lo que podemos hacer aquí, podemos crear otra ruta y la crearemos fuera del layout principal porque para la página del show, no usaremos principalmente ruta que hayamos creado anteriormente. Esa ruta tendrá path slash show, slash, colon showID. Ese segmento URL dinámico aquí, le di nombre, ShowID. Voy a tener parámetro URL, que será dinámico, y tendrá nombre, ShowID. Para esa ruta, me gustaría mostrar la página del espectáculo. Sigamos adelante y creemos uno. Debajo de las páginas, voy a crear otro componente llamado show, otro archivo llamado show, y el marcado por ahora será muy simple show page dentro de app. Voy a importar ese componente show page, e intentemos. Si navego para slash show, slash algo, verás que tengo página de show. En realidad funciona. React Router pudo hacer coincidir esta ruta y renderizarme el componente show. Si voy a solo show, tengo, no lo he encontrado, porque solo show sin segmento URL dinámico no coincidirá con esa definición de ruta. Por eso vuelve a caer, no se encuentra. Pero en cuanto vaya a mostrar algo de slash, tendré show page. Genial. Ahora la pregunta es, cómo podemos recuperar de alguna manera ese ShowID de la URL aquí y usarlo dentro de nuestro componente show. Nuestra estrategia será la siguiente. Siempre que naveguemos para mostrar la página y tengamos ShowID en el segmento URL dentro de nuestro componente, podemos tomar ese segmento URL, podemos tomar ese ShowID y luego usarlo dentro del componente para consultar la API de TVMaze y obtener los datos del show. Este es un enfoque muy común cuando se trata de páginas dinámicas. Tendrás parte dinámica dentro de la URL, y cada vez que navegas a esa página, tomas esa parte dinámica de la URL y usas dentro del componente para consultar datos. En nuestro caso, esto va a ser ShowID. Ahora bien, ¿cómo podemos tomar ese ShowID de la URL? Si volvemos a la documentación de React Router, la izquierda tenemos menú. Podemos desplazarnos hacia abajo hasta la sección de ganchos y aquí nos va a interesar el uso params hook. Puedes leer esa descripción rápida aquí así que use params hook devuelve un objeto, pares de valores clave de los parámetros dinámicos de la URL actual que coincidieron con la ruta de ruta. Vamos a probar eso. Se puede ver que ha sido importado de React Router dom. Yo haré exactamente lo mismo. Sólo voy a copiar eso muy rápido. No necesito ruta, así que solo necesito usar params y dentro de Show, solo voy a llamar use params. Voy a crear una nueva variable llamada params. Por ahora, simplemente cancelaré params de registro y veré qué tengo. Voy al navegador cancelar aquí, y aquí puedes ver que tengo un objeto donde ShowID equivale a lo que suministre en la URL. Esa clave aquí coincidirá con el nombre del parámetro que le dimos a ese segmento URL dentro de la definición de ruta. Si ponemos aquí algo así como, no sé, muy aleatorio, refresco la página puedes ver ahora los cambios de clave. Específicamente le di algo significativo como ShowID, para que más adelante podamos acceder a ese ShowID dinámico usando el gancho use params. Ya que va a ser un objeto, podemos usar esta estructuración. De ese objeto params, voy a agarrar ShowID. Intentemos una interpolación que dentro de nuestro JSX aquí. Mostrar página para ShowID. Intentemos y noté que mi app no está guardada, déjame guardarla. Puedes ver la página de show para mostrar lo que sea que ponga en la URL. Si fue show con Idl, tengo para, Mostrar 1. Así como así, ahora hemos creado una página dinámica que representará nuestro espectáculo. Hay una cosa más en eso. No vamos a cambiar la URL dentro del cuadro de búsqueda del navegador manualmente todo el tiempo, ¿no? Necesitamos modificar el enlace que tenemos dentro de la tarjeta de presentación. De hecho nos lleva a esa página dinámica. Vamos a tratar de hacer eso. Dentro de show, sabemos que para atributos, para props, podemos suministrar valores dinámicos usando JavaScript. En lugar de simplemente pasar una raíz de cadena estática, podemos abrir corchetes. Podemos decir, por favor ve a slash, show slash Id y esto es todo. Vamos a tratar de ver eso. Si buscamos hola, y cada vez que coloco el cursor sobre el enlace en la esquina inferior izquierda, puedes ver el show de barra diagonal de URL, barra cinco algo. Siempre será diferente para cada espectáculo. Si hago clic en él y lo navego hasta la página, déjame volver atrás y dar click en otra cosa Ya verás que es diferente. Así, podemos crear páginas dinámicas dentro de nuestra aplicación con React Router dom, y podemos tomar parámetros dinámicos de la URL usando el gancho use params, y luego los usa dentro del componente para obtener datos. Eso lo vamos a hacer en el siguiente video. Por ahora, vamos a comprometer todo lo que hicimos aquí. Vamos a hacer un resumen. Aplicación Insight, creamos una nueva multitud dinámica, que se basa en el parámetro ShowID. Nombramos ese parámetro como ShowID. Dentro del componente Show que hemos creado y ese componente representa nuestra página, agarramos ese parámetro ShowID, usando el gancho use params. Dentro de la tarjeta corta, modificamos el enlace para redirigirnos realmente a la página del espectáculo. Impresionante. Voy a nombrar todo como página de show dinámico creado, y creo que esto va a estar bien, empuja todo a GitHub y te voy a ver en la siguiente. 70. 14 Introducción al gancho de uso: Hola ahí. En el último video creamos página de show dinámico. Ahora es el momento de que vayamos a buscar algunos datos dinámicos en esa página. En este video, vamos a hablar sobre las formas, cómo se puede lograr esto. Para que podamos entender la forma en que funciona, necesitamos conocer otro gancho de React llamado UseEffect. Anteriormente, recuerdas que hablé con uno sobre el ciclo de vida de los componentes. El ciclo de vida del componente es ese período de tiempo desde que el componente se monta hasta que se desmonta de la página. Echemos un vistazo más de cerca al ciclo de vida de los componentes. Podemos diferenciar tres puntos diferentes de tiempo cuando los componentes se montan. En segundo lugar, cuando el componente ya está montado, y se vuelve a renderizar cada vez que cambia el estado interno. re-renderizado y el tercer punto en el tiempo serán desmontados o justo cuando el componente se desmonta. Estos tres puntos en el tiempo representan el ciclo de vida de los componentes. Para nuestra estrategia de obtención de datos, solo nos interesa ese punto de tiempo en el que se monta el componente. Porque nuestra lógica será la siguiente. Tan pronto como abrimos la página dinámica para mostrar, tomamos show ID de la URL, y luego usamos ese show ID para buscar datos solo una vez cuando el componente se monta. No queremos volver a ejecutar esa lógica de obtención de datos cada vez componente se vuelve a renderizar. Esto es importante para entender que necesitamos ejecutar la lógica solo una vez. Ahora probemos y veamos cómo el UseEffect Hook puede ayudarnos a lograrlo. Déjame navegar probablemente al formulario de búsqueda. En este componente, vamos a jugar con este UseEffect Hook y entender cómo funciona y cómo nos puede ayudar. Voy a poner aquí estos tres puntos sobre el ciclo de vida de los componentes. Entonces en la parte superior de React, voy a importar UseEffect. Ahora, intentemos usar ese gancho. Dentro del componente, voy a llamar a ese gancho, y ese gancho recibe dos argumentos. El primer argumento es la función, la devolución de llamada que ejecutará la lógica que queremos y segundo, argumento, es algo llamado un array de dependencias. Vamos a hablar de array de dependencias un poco más tarde. Por ahora, solo pasemos una matriz vacía. Ahora, nuestro primer caso de uso será cuando los componentes se monten. Queremos ejecutar la lógica solo una vez cuando el componente se monta. Por cierto, esta devolución de llamada se llama el efecto del useEffect. Vamos a referirnos a esa devolución de llamada como el efecto. Mi efecto será que solo voy a ejecutar registro de la consola y decir montajes de componentes. Nada complicado. Ahora volvamos a nuestra app, abrir la consola y dentro de la consola vemos monturas de componentes, se imprime dos veces. Se imprime dos veces porque tenemos el modo estricto de React. Si recuerdas en desarrollo, intencionalmente equivale a componente dos veces para detectar cualquier error potencial. No queremos este comportamiento cuando trabajamos con UseEffect. Por ahora, sólo voy a eliminar el modo estricto de React. Volvamos a nuestra app. Cuando actualizo la página y el componente se monta, el componente de formulario de búsqueda se monta, veo mi registro de consola aquí. Si trato de actualizar uno de estos estados, si escribo algo en input, se volverá a renderizar el componente. Pero verás que los montajes de componentes nunca volverán a funcionar. Déjame intentarlo. Tecleo algo en la entrada, ese componente se vuelve a renderizar. Sin embargo, los montajes de componentes nunca volverán a funcionar. Para que sea más amigable para nosotros observar, aquí, voy a agregar registro de consola y decir componente re-render. ¿Qué tenemos aquí? Monturas de componentes. Vemos re-render de componentes. Esto está bien porque es la primera vez que se monta el componente. Entonces realmente vemos el mensaje que usamos dentro de useEffect. Ahora bien, si actualizo este estado, solo verá el componente re-renderizado. Nunca vemos montajes de componentes. Así como así, solo podemos ejecutar la lógica una vez cuando se monta el componente. Ahora, observemos aquí el tercer caso de uso. Cuando el componente se desmonta. En UseEffect dentro de ese efecto, dentro de la devolución de llamada, puede pasar algo llamado la función de limpieza. Básicamente es la función que se devuelve de la devolución de llamada. Función de retorno. Esta función aquí, se ejecutará cuando el componente se desmonte. Vamos a tratar de ver. Dentro de la función de limpieza, voy a escribir desmonta componente. A ver. Primero tenemos exactamente el mismo comportamiento que antes. Pero en cuanto cambien la página, la navegación, si voy a la página de inicio, este formulario de búsqueda de componentes será desmontado de la página. Veamos qué pasa. Voy a empezar y se ve desmonta componente. La lógica definida dentro de la función de limpieza se ejecutará justo antes de que el componente se desmonta de la página. De esta manera, podemos engancharnos en el punto desmontado en el tiempo. Hasta el momento, nos enganchamos en dos puntos de tiempo cuando el componente se monta y cuando el componente se desmonta. Con el segundo caso de uso, cuando el componente se vuelve a renderizar, se vuelve un poco complicado con useEffect. Digamos que me gustaría ejecutar alguna lógica, siempre que cambie la opción de búsqueda. UseEffect es capaz de ejecutar cierta lógica cuando algo cambia. Ese segundo argumento, la matriz de dependencias sirve exactamente para ese propósito. Define, instruye al useEffect para ejecutar esa lógica desde la devolución de llamada cuando algo cambia. Dentro de la matriz de dependencias, enumeramos los valores para los que nos gustaría escuchar, y cuando este valor cambia, instruimos useEffect, vuelva a ejecutar la lógica. Vamos a probarlo y ver. Voy a comentar la función de limpieza, en lugar de monturas de componentes, diré algo como cambios en las opciones de búsqueda. Como la matriz de dependencias, como uno de los valores dentro de la matriz de dependencias, pasaré la opción de búsqueda. A ver. Refresco la página, no se imprime nada porque actualmente estoy en la página de inicio. Tan pronto como voy a Página principal, vemos que los componentes vuelven a renderizar y los cambios en las opciones de búsqueda. ¿Por qué vemos cambios en las opciones de búsqueda cuando especificamos algo dentro de la tasa de dependencia? El caso es que UseEffect siempre se ejecuta al menos una vez, pase lo que pase. UseEffect se ejecuta al menos una vez, pase lo que pase. Ahora bien, si intento escribir algo dentro de la entrada, solo vemos re-render de componentes, nunca vemos cambios en las opciones de búsqueda. Pero tan pronto como actualice el estado de las opciones de búsqueda llamando a la opción set search, el useEffect volverá a ejecutar. A ver. Vemos cambios en las opciones de búsqueda. Lo cambiamos de nuevo, y cada vez que se cambia el valor , el efecto vuelve a ejecutar. Tan simple como eso. Aquí, puedes enumerar tantas dependencias como quieras. Si uno de ellos cambia, el efecto se volverá a ejecutar cada vez. Básicamente, escuchamos los cambios de valor y si ese cambio de valor tiene lugar, el efecto vuelve a ejecutar. Al usar este método, podemos engancharnos a la lógica de re-render del componente y ejecutar nuestra propia lógica aquí usando, nuevamente, el gancho useEffect. Sin embargo, vamos a llamarlo 2.5 caso de uso, cuando queremos ejecutar la lógica antes del siguiente re-render. Puede sonar sofisticado, y en cierto grado lo es, pero veamos cómo funciona. Nuestro 2.5 será lógica antes de los próximos tres re-render. La función de limpieza aquí, anteriormente te lo dije si quieres ejecutar alguna lógica antes de que las cantidades del componente, puedes devolver esa función desde el efecto y lo que pongas dentro se ejecutará antes de que el componente se desmonta. Sin embargo, esto solo funciona cuando la matriz de dependencias está vacía. Si tenemos dependencias dentro de la matriz de dependencias, la función de limpieza se ejecutará para cada efecto. Cuando termine el efecto actual, la lógica se ejecutará para ese efecto antes de que se ejecute el siguiente efecto. En lugar de cantidades de componentes, digamos cambios en las opciones de búsqueda, y aquí dentro del mismo registro de consola, también vamos a poner opción de búsqueda. Podremos ver el valor del estado. Vamos a intentarlo. Refresco la página. Veo cambios en las opciones de búsqueda. Actualmente hace espectáculos. En cuanto cambien la opción, veamos qué pasa. Vemos el re-render de componentes como de costumbre, vemos cambios en las opciones de búsqueda. Digamos opción de búsqueda, digamos antes de que cambie la siguiente opción de búsqueda, o digamos antes de la próxima ejecución de UseEffect. Vamos a intentarlo de nuevo. Vemos cambios en las opciones de búsqueda, espectáculos. Ahora cambiamos la opción, y lo que veo antes siguiente, useEffect run vemos espectáculos. Esa función de limpieza se ejecuta para cada ejecución de efectos. Nuestra actual carrera aquí de ese efecto es para actores estatales. Debido a que nuestro estado actual son actores, aquí es cuando corre el último efecto. La próxima vez que se ejecute el efecto, la función de limpieza se ejecutará para nuestro efecto actual para actores. Si lo vuelvo a cambiar a shows, veremos antes del próximo useEffect ejecutar con actores y luego veremos cambios en las opciones de búsqueda con shows. Vamos a intentarlo. Vemos antes de la próxima ejecución de UseEffect, en realidad a partir de ahora para nuestra ejecución UseEffect anterior y nuestra nueva ejecución de useEffect. Bueno, suena complicado. En realidad, a primera vista lo es. Sin embargo, en realidad tiene sentido. Hay muchos casos de uso en los que desea utilizar cada una de estas opciones. Al usar UseEffect, podemos ejecutar cierta lógica durante el ciclo de vida competente bajo diferentes condiciones y circunstancias. Podemos usar la matriz de dependencias para instruir a useEffect cuando queremos ejecutar esa lógica. este momento, miramos UseEffect, y la consola registramos el valor del estado de las opciones de búsqueda cada vez que cambia una opción de búsqueda. Puede que tengas una pregunta, ¿por qué usamos UseEffect aquí si podemos simplemente poner el registro de la consola directamente aquí sin useEffect, como lo hicimos con los componentes re-render. Bueno, la cosa es que con useEffect de nuevo, tienes el array de dependencias. Este re-render de componentes de registro de consola se ejecutará en cada re-render competente, pase lo que pase. El componente se renderiza, siempre verá ese registro de la consola. Sin embargo, con el useEffect, solo escucha los valores que cambian, y estos valores se especifican dentro de la matriz de dependencias. Si especifica una matriz de dependencias vacía, entonces estos useEffect se ejecutarán solo una vez cuando el componente se monta. Esta lógica, la función de limpieza aquí se ejecutará cuando el componente se desmonta. Incluso si tienes la dependencia, cuando el componente se desmonta, verás que la función de limpieza también se ejecutará. Observemos eso. Cambiamos de actores y tenemos nuestra carrera antes del siguiente useEffect. Cuando el componente se desmonta, verá antes de la próxima ejecución de UseEffect. Básicamente, la función de limpieza, tal como te dije, limpia la ejecución actual de UseEffect. Al usar este enfoque, podemos obtener datos una solo podemos obtener datos una vez cuando se monta el componente. Especificaremos una matriz de dependencias vacía para indicar a useEffect que se ejecute solo una vez cuando el componente se monta. Dentro del efecto, vamos a buscar lógica de la API. Tan simple como eso. Ahora que sabemos un poco más sobre el ciclo de vida competente, ahora sabemos que podemos usar UseEffect para manipular la lógica competente durante el ciclo de vida de los componentes, podemos recuperar datos y finalmente mostrar algo. En el siguiente video, haremos exactamente eso. Por ahora, volvamos a reaccionar al modo estricto y vamos a hablar de eso una vez más. Por ahora, eso es todo. Te voy a ver en la siguiente. 71. 15 datos de la API de laberinto de TV con useEffect: Hola otra vez. En el último video, hablamos sobre el UseEffect Hook, cómo puede ayudarnos a manipular la lógica dentro del componente durante el ciclo de vida del componente. Intentemos aplicar UseEffect en nuestra página de presentación dinámica para obtener algunos datos. Vamos. Voy a ir a páginas, mostrar.JSX. Aquí, como recuerdas, agarramos el ShowID de la URL. Busquemos espectáculos. Digamos, muchachos. Vamos a leer Más. Tenemos esta URL. Sea lo que sea que tengamos en la URL, nuestro parámetro dinámico, lo agarramos usando el gancho UseParams. Ahora, vamos a importar useEffect desde el paquete React, y ahora dentro, que va a hacer useEffect. Como queremos FetchData solo una vez, queremos ejecutar la lógica solo una vez cuando el componente se monta. Por esta razón, especificamos una matriz vacía de dependencias. Dentro de ese UseEffect, vamos a FetchData. Veamos cómo se verá el punto final. Eso nos dará información del espectáculo. Si vamos a TVMaze API y buscamos la sección de espectáculos aquí, tenemos este endpoint/shows/id, y puedes ver este ejemplo. Abrámoslo y veamos. Al proporcionar la identificación del espectáculo, podremos obtener todos los datos requeridos. Vamos a crear otra función reutilizable dentro del tvmaze.js donde consultamos este punto final. Exploremos otra función desde aquí que llamaremos getShowById. Como argumento, vamos a especificar ShowID, y dentro vamos a llamar a ApiGet, y vamos a llamar a esta URL, este punto final. Como ID es algo dinámico que suministramos a través del argumento, vamos a usar backticks para que podamos aplicar interpolación de cadenas. Nuestra función se verá así. Ahora, dentro de show jsx, podemos importar getShowById desde API TVMaze. Luego dentro de useEffect, podremos llamar a getShowID y pasar ShowID dentro. Nos gustaría usar una sintaxis sync esperar porque es más fácil de usar, pero no se puede hacer que la devolución de llamada de useEffect sea asincrónica. Si hago eso, verán aquí esta advertencia, que viene de esta regla de las reglas de los ganchos de ESLint. Dice, las devoluciones de llamada de efecto son sincrónicas para evitar condiciones de carrera, poner la función asíncrona y el sitio. Puedes ver este ejemplo aquí. Bueno, vamos a hacer exactamente eso. Vamos a crear una función asíncrona dentro de useEffect y luego llamar a esa función dentro. Vamos a probar eso. En nuestro caso, se verá como FetchData. No marcamos la devolución de llamada como asíncrona, que se llama fetchData. Dentro de FetchData, vamos a llamar a un weight get show by ID, y vamos a suministrar ShowID que agarramos de la URL. Ahora, en cuanto use ShowID dentro de useEffect, notarán que ahora tengo esta advertencia aquí que dice, React hook useEffect tiene una dependencia faltante, ShowID. Si tienes algo definido dentro del componente, y usas ese algo, ese valor dentro de useEffect, idealmente, tiene que especificarse como la dependencia de ese useEffect. La razón de eso es porque digamos nuestro ShowID aquí podría ser también dinámico, por ejemplo podría ser nuestro estado, y queremos ejecutar ese useEffect cada vez que ese valor cambie. Si no suministramos ninguna dependencia aquí, mantenemos nuestra matriz de dependencias vacía, la lógica se ejecutará solo una vez cuando el componente se monte. Pero, ¿y si este ShowID cambia, digamos de 1-2? En este caso, tiene sentido para nosotros refetch datos, para agarrar el último programa con ID es igual a dos. Pero si mantenemos la matriz de dependencias vacía, el efecto nunca se volverá a ejecutar. Para que podamos arreglar eso, sea lo que sea que usemos dentro de useEffect, todos los valores aquí que podrían ser potencialmente dinámicos o cambiar, necesitamos especificarlo. Esta es nuestra dependencia de esta devolución de llamada useEffect. Es por eso que voy a enumerar ShowID como parte de UseEffect. Ahora, obtenemos nuestros datos aquí. Vamos a probar y consolar los datos de registro. Volvemos aquí. Ahora lo que vemos, vemos dos logs de consola. Nuevamente, la razón de eso es el StrictMode que tenemos. StrictMode es problemático, y se introdujo en React Versión 18, pero ya se puede ver que tenemos este problema en el desarrollo de que el componente se vuelve a renderizar dos veces. Dado que FetchData dentro de UseEffect, significa que hemos obtenido datos dos veces. Esto no es realmente lo que queremos. En este caso, el equipo de React recomienda que a partir de React 18, si quieres FetchData, deberías estar usando algo más en lugar de UseEffect. Vamos a hablar de eso un poco más tarde, sin embargo, esto es muy polémico. Anteriormente antes de React,18 en la Versión 17 y anteriores, la forma muy básica y predeterminada FetchData era exactamente eso, mediante el uso de UseEffect. Bueno, con React 18, nada cambia mucho, excepto que ahora tenemos React StrictMode. Por ahora, sugiero que eliminemos React StrictMode, y lo encenderemos más adelante cuando vayamos a ver una alternativa al uso del gancho UseEffect para FetchData. Por ahora, dentro del índice jsx, solo voy a eliminar React StrictMode. Nuestro useEffect no se ejecutará dos veces en el desarrollo. Ahora, lo guardamos. Actualicé la página y ya ves, tengo datos aquí. Si abro la pestaña Red, actualizo la página. Aquí, puedo encontrar esa llamada a TVMaze API con ShowID que recibimos de la URL. Si tengo una vista previa, estos son los datos que tenemos. Ahora, vamos a crear un estado y poner estos datos dentro del estado. Vamos a llamarlo ShowData, y establecer los datos del programa. Esta será la convocatoria de UseState. Por defecto, los datos serán nulos. Entonces vamos a crear otro estado para captar algún error en caso de que falle la solicitud. Voy a crear ShowError, SetShowError. Por defecto, las llamadas son nulas. Voy a envolver una manera de getShowID, getShowByID en try catch block. Dentro del bloque catch, llamaré a set showError a null. Entonces, cuando obtengo datos, llamo a setShowData, y configuro estos datos como parte del estado. Ahora, aquí podemos usar renderizado condicional para mostrar cualquier dato que hayamos agarrado, y podremos usar el estado ShowData. Podemos escribir la lógica de renderizado condicional directamente dentro del componente, no solo dentro del marcado JSX, no solo usando, digamos, una función auxiliar en la que definimos lógica, también podemos escribirla directamente dentro del componente. Aquí, solo voy a preguntar, si tenemos ShowError esa función, de nuestro componente, por favor devuelva div, que dice que tenemos un error, que será showError.Message, porque ShowError será el objeto error. Aquí lo puse en null, perdón, tiene que ser el otro objeto que atrapemos aquí. Ahora, en caso de que tengamos un error, devolvemos el marcado JSX con error. Si tenemos ShowData, en este caso, obtuvimos los datos del show. Por ahora, vamos a cancelar. A ver. ¿Qué tenemos? Tenemos nombre, así que déjalo ser ShowData name. Por defecto, si no se mantiene ninguna de estas dos condiciones, podemos decir que los datos se están cargando. Puedo ver que no utilicé búsqueda ShowError. Aquí, no lo usé de hecho. A ver. Obtuve datos del espectáculo chicos. Cuando me refresque, puedes ver que parpadea aquí, y este parpadeo es que estos datos se están cargando. Los datos se cargan tan rápido que ni siquiera podemos notar que los datos están cargando mensaje. Pero si esta llamada a la API tardó, digamos, 10 segundos, veríamos que los datos se están cargando. Al usar este enfoque, puede obtener datos cuando se monta el componente. En el siguiente video, nos presentaremos un nuevo término, que se llama React Hooks personalizados. Por ejemplo, aquí, solíamos useState, y usamos useEffect así como useParams. Independientemente de lo que importe de React directamente, estos ganchos se denominan ganchos React incorporados. Pero puedes ver desde react-route-dom, importamos algo llamado UseParams. También es un React Hook, pero no forma parte de la biblioteca React. Es algo personalizado que fue creado por react-router-dom. En el siguiente video, vamos a hablar de eso, y vamos a crear nuestro propio gancho personalizado. Pero antes de terminar este video, vamos a comprometer todo lo que hicimos. En primer lugar, deshabilitamos el StrictMode, por lo que en el desarrollo, nuestro useEffect no se ejecutará dos veces. Luego creamos una función getShowById que obtiene datos y dentro del componente show mediante el uso del gancho useEffect, el fetchData. Git add dot commit todo. Vamos a decirle a fetchData dentro del componente show o fetch show data dentro del componente show, así como así. Siguiente video, ganchos personalizados. Nos vemos ahí. 72. 16 ganchos de reacción personalizados: Oye, ahí. En el último video, recuperamos datos dentro del componente show con la ayuda de useEffect. La última vez mencioné que en este video vamos a hablar la diferencia entre los hooks de reacción incorporados y los hooks personalizados que podemos importar desde otras bibliotecas. El caso es que estos ganchos personalizados son en realidad solo más lógicos además de los ganchos de reacción incorporados que ya viste, como UseEffect o UseEstate. ¿Cuál es la diferencia entonces? Estos ganchos UseParams por ejemplo, son solo ganchos con lógica extra así que no necesitamos escribir esa lógica dentro del componente. La pregunta está aquí, ¿por qué necesitamos ganchos personalizados? Se puede ver que en el último video, realidad usamos tres ganchos diferentes, en realidad dos ganchos, pero los usamos tres veces dentro de nuestro componente, useEstate, useEstate y luego useEffect aquí. Ahora, digamos que quiero reutilizar esa lógica dentro de otros componentes. ¿Cuál es mi opción entonces? Un enfoque muy ingenuo es simplemente copiar esta pieza de código y usarla en algún lugar dentro de otros componentes. Pero se puede ver que es mucha repetición. Si no hablamos de reaccionar específicamente, si podemos mirar el ejemplo de programación para que de alguna manera podamos reutilizar la lógica, usamos funciones o si queremos simplemente extraer algo del lugar, también usaríamos una función para no colorear el espacio donde esta lógica está presente. Exactamente lo mismo se aplica a los ganchos. Si quieres reutilizar la lógica de hooks, o si solo quieres extraer la lógica del componente, puedes colocarla dentro de un reactor personalizado. Esta es la razón por la que las usamos. Se utilizan para reutilizar la lógica de hooks y segunda opción es cuando se quiere extraer la lógica del componente para que no ocupe mucho espacio dentro de ese componente. En nuestro caso, esta lógica no se reutilizará en ninguna parte de la aplicación porque solo tenemos un lugar donde obtenemos un programa específico dentro del componente show. Pero imaginemos que teníamos otro lugar donde queríamos recuperar los datos de ese espectáculo. En lugar de copiar y pegar la lógica, podríamos haberla puesto en un gancho personalizado dentro de todos los componentes donde necesitamos buscar ese espectáculo. Déjame mostrarte a lo que me refiero. Encima del archivo, voy a crear una función custom hook que voy a llamar algo como UseShowByID. Puedes darle el nombre que quieras. Pero todos los ganchos de reacción tienen esa convención de que deben comenzar con el prefijo de uso. Si quieres nombrar tu gancho personalizado, asegúrate de que comience con el uso, useShowById, va a ser solo una función simple y voy a copiar mi lógica a FetchData del componente al gancho UseShowByID. Puedes ver un par de cosas aquí. En primer lugar, dentro del gancho, no tenemos acceso a la variable ShowID. Pero como es una función, podemos recibirla como argumento. Hagámoslo. Se puede ver que dentro del componente show, ahora, no tenemos ningún acceso a ShowError o ShowData. Exactamente el mismo enfoque. Si nuestro useShowByID es solo una función, podemos devolver algún valor de ella. Vamos a decir devolver un objeto con dos claves, ShowData y ShowError. Ahora podemos usar ese gancho UseShowbyID dentro del componente show. Simplemente llamamos a ese gancho dentro pasamos ShowID y este gancho nos devuelve un objeto con dos claves, ShowData y ShowError. Vamos a desestructurarlos. Ahora, mira nuestro resultado final. Tenemos una sola línea y la lógica está escrita en otra parte. Si lo escondo, puedes ver ahora nuestro componente es mucho más limpio de lo que era antes, y nuestra lógica para buscar datos para ir a buscar mostrar vidas en otro lugar. Ahora bien, si quisiera reutilizar esa lógica en otros componentes, simplemente llamaría a useShowByID, pass, ShowID como argumento, y luego recibiría mis ShowData y mi ShowError, por ejemplo vamos a copiar esta línea. Si quisiera buscar show dentro del componente app, solo usaría ese gancho en pasado cualquier programa quiera como argumento y tendré acceso a ShowData y ShowError. La lógica con ganchos personalizados, la idea con ganchos personalizados es la misma que con las funciones en la programación, pero con ganchos personalizados, escribes lógica encima de los ganchos incorporados u otros ganchos de reacción. Tan simple como eso. Ahora eso es todo. Pero recuerdas que en el último video cuando introdujimos ese gancho useEffect, tuvimos este problema con modo react strict en el desarrollo, react strict mode renders el componente dos veces. Es por ello que nuestro UseEffect siempre se ejecuta al menos dos veces. Eso fue problemático. La solución que recomienda la reacción es usar otra cosa en lugar de UseEffect. En el siguiente video, vamos a hablar de eso. Vamos a hablar de la alternativa a UseEffect para recuperar datos. Finalmente podremos recuperar nuestro modo estricto de React, y no tendremos ningún problema con la obtención datos solo una vez cuando se monta el componente. Por ahora, vamos a comprometerlo todo y terminemos este video con una buena nota como siempre. Mi mensaje de compromiso va a ser muy simple, extraer la lógica de procesamiento por lotes de datos en un gancho personalizado UseShowByID. Impresionante. Nos vemos en la siguiente. 73. 17 Datos con bibliotecas: Hola otra vez. En el último video, hablamos sobre la diferencia entre los ganchos React incorporados y los ganchos React personalizados. Básicamente, los ganchos React personalizados son los ganchos que escribimos con nuestra propia lógica encima de los ganchos React incorporados. La razón detrás de eso es que queremos extraer alguna lógica, o si queremos hacer que la lógica de los ganchos sea reutilizable. En este caso, utilizamos ganchos personalizados. También obtenemos datos de la API de TVMaze solo una vez cuando se monta el componente. Eso lo hacemos con la ayuda del gancho UseEffect. Pero si recuerdas, desactivamos React StrictMode porque obliga al componente a volver a renderizar dos veces en el desarrollo, lo que significa que useEffect siempre se ejecutará al menos dos veces en lugar de solo una vez. Esto es problemático para nuestra situación específica y para evitarlo, el equipo de React recomienda buscar datos con otra cosa. No recomiendan usar el gancho UseEffect para obtener datos cuando tenga activado React StrictMode. Hablan de otra cosa. ¿Qué es esto? Bueno, en front-end, existe el concepto de algo llamado bibliotecas de obtención de datos. Dos ejemplos aquí pueden ser React Query, y usar SWR; ambos son muy populares y ambos son muy similares entre sí. Pero lo que realmente hacen, por ejemplo en la página use SWR, podemos ver ese ejemplo muy sencillo al que llamamos el use SWR hook con, digamos la ruta que queremos recuperar, y luego la función que obtiene datos. Entonces, el gancho nos da error de datos que podemos usar dentro de nuestra aplicación. Ahora bien, si comparamos eso con lo que escribimos aquí, puedes encontrar nota muy similar, sin embargo, nuestro gancho aquí está dirigido específicamente a buscar programas de TVMaze API y recuperarlos por ID. Así que esta es la lógica específica que está estrechamente acoplada a TVMaze API para obtener mostrar específicamente por ID. Si tuviéramos, digamos, mucha lógica de búsqueda diferente dentro de nuestra aplicación a través de, digamos, cientos de componentes, en este caso, tendríamos que idear algo más abstracto para hacer nuestra lógica de obtención más reutilizable y no estrechamente acoplada a una implementación específica. Bibliotecas de obtención de datos, hacen exactamente eso; nos dan el gancho abstracto que podemos usar para recuperar datos dentro del componente. Por lo que es más fácil para nosotros reutilizar esa lógica a través de la aplicación que escribimos, que construimos. Por ejemplo, en React Query vamos a encontrar Quick Start. Se puede ver que la lógica es bastante similar; tenemos algo llamado clave de consulta y función de consulta, vamos a hablar de eso en un segundo, pero la lógica es la siguiente. Tenemos algún gancho abstracto para obtener datos, a ese gancho abstracto, suministramos nuestra lógica para recuperar datos, y ese gancho personalizado nos da error de datos y está cargando variables que podemos usar dentro del componente. Existen para hacer que la obtención de datos sea más optimizada, más reutilizable y más fácil de usar para los desarrolladores. Intentemos instalar una de estas bibliotecas. En nuestro caso, vamos a UserReact query, eso es sólo porque decidí así. Si quieres puedes probar UseDWR, la sintaxis es bastante similar. Dentro de la documentación, voy a ir a la página de instalación. A partir de aquí, sólo voy a copiar NPM tanstack/react-query instalado. Voy a agregar esta dependencia a mi proyecto. Aparecerá dentro del paquete Jason aquí en la parte superior. Genial. Ahora iré a Quick Start y seguiré el ejemplo. Primero, necesitamos crear un cliente, luego necesitamos usar algo llamado proveedor de cliente de crédito y pasar ese cliente ahí. Luego dentro de los componentes, podemos usar el gancho UseQuery. Veamos cómo nos puede ayudar. Yo solo voy a copiar estas entradas de aquí, voy a ir al componente app aquí, en la parte superior, voy a importar solo cliente de consulta y proveedor cliente crítico así así , entonces voy a crear nuevo cliente de crédito fuera del componente, después voy a usar proveedor de cliente de crédito, digamos en algún lugar de aquí y cerrarlo al final. Eventualmente, mi app ahora se ve así. Genial. Ahora puedo ir a la página del show y en vez de usar el use show by ID hook, usaremos el gancho USequery aquí. Comentemos lo que tenemos aquí, llamemos a useQuery, que se puede importar también desde tanstack/react-query. Hagámoslo. Solo necesitaremos useQuery y dentro del componente, vamos a llamar a UseQuery así. Ahora tenemos que pasar opciones aquí. Options es solo un objeto con diferentes claves que suministramos. La clave de consulta y la función de consulta son opciones requeridas que necesitamos pasar. La clave de consulta identificará de manera única nuestra lógica de consulta, nuestro factor como GetsTodos en toda la aplicación. función de consulta es la lógica para recuperar datos. Veamos cómo podemos usar eso. Primero tenemos que pasar la clave de consulta, y se puede ver ahora mismo que es una matriz. En nuestro caso podemos nombrarlo algo así como espectáculo tal vez y luego nuestro programa se identifica por identificación como recuerdas. Vamos a pasar show y showID. Entonces tenemos que pasar fetcher. Sin embargo, se puede ver que en este momento en el ejemplo se le pasa solo la función de consulta es getsTodos. Pero en nuestro caso, necesitamos de alguna manera obtener acceso a ShowID dentro de nuestro fetcher. Nuestro fetcher es esta función que creamos anteriormente llamada getShowById. Si miramos dentro de la documentación, está escondida en algún lugar dentro, voy a decirte dónde. Está aquí bajo la sección Claves de consulta. Si vamos aquí y si nos desplazamos hacia abajo hasta el fondo y podemos ver aquí toda esta sección, si su función de consulta depende la variable incluida en su clave de consulta. Nosotros sólo vamos a seguir este ejemplo aquí. Sólo voy a copiarlo y ponerlo así. La clave de consulta se mostrará en lugar de todoID, vamos a colocar ShowID en lugar de FetchToById, vamos a llamar a getShowById. Pasaremos ShowID. UseQuery nos devuelve el resultado. Si intentamos usar IntelliSense a partir de este objeto de resultado, puede ver que aquí tenemos muchas cosas, pero nos interesan específicamente los datos y el sumador. Vamos a tratar de hacer eso. Del objeto resultado, voy a tomar datos y voy a agarrar error. Voy a cambiarles el nombre. Podemos usar datos en lugar de ShowData, pero vamos a cambiarles el nombre, voy a poner dos puntos al lado clave desestructurada y lo llamaré ShowData. De esta manera. La clave de datos que desestructuré se renombrará a ShowData. Del objeto resultado, todavía desestructuré datos, pero solo quería tener otro nombre, ShowData. Lo mismo va con el error, será ShowError. Ahora, en realidad puedo volver a mi aplicación y ver cómo funciona. Pero necesito volver a iniciar la app, npm run start, vuelvo aquí. Vamos a refrescarnos. Se puede ver, bueno, nada cambió, sin embargo, ahora mismo, usamos el gancho UseQuery. Es una lógica de gancho personalizada de la cual se escribe en algún lugar dentro de la biblioteca tanstack/react-query. Solo lo usamos para obtener datos. Puedes ver que este gancho nos da esa interfaz abstracta para que podamos envolver esa función en un gancho como USequery y recuperar datos solo una vez dentro del componente. Esta clave de consulta aquí se parece algo a esa matriz de dependencias dentro de useEffect. Si algo dentro de la clave de consulta cambia, los datos aquí se recuperarán al igual que con UseEffect, muy similar. El equipo de React en realidad nos aconseja usar algo así para obtener datos. Esta es en realidad una muy buena recomendación. No querías lidiar con toda esa lógica repetitiva cada vez en tu aplicación. Estas bibliotecas tienen muchas opciones, estas bibliotecas están optimizadas para obtener, tienen estas claves de caché y pueden hacer mucho más que simplemente obtener datos simples montajes de componentes puntiagudos. En las aplicaciones modernas de React, biblioteca de obtención de datos es una muy buena manera de hacerlo. Vamos a usar USequery para nuestro ejemplo específico. Ahora podemos quitar la lógica que escribimos antes y en realidad ahora podemos incluir React.strictMode de nuevo, porque ahora nuestra lógica de consulta no se ejecutará dos veces. A ver eso. Si actualizo la página, aquí, solo tengo una llamada a la API, lo que significa que nuestra lógica que escribimos aquí no será recuperada dos veces y aún así tenemos acceso a React StrictMode. Con este enfoque, matamos dos pájaros de un tiro. Espero que no haya sido demasiado complicado ni sofisticado entender cómo funciona la obtención de datos en React. Comenzamos con el mínimo desnudo con useEffect, porque useEffect se puede usar para manipular datos y manipular la lógica a un ciclo de vida de un componente, usamos useEffect para recuperar datos solo una vez cuando el componente se monta, pero tuvimos que deshabilitar React StrictMode ya que de lo contrario necesitamos escribir alguna lógica para superar de alguna manera doble re-render dentro del modo de desarrollo. Para superar eso, utilizamos una biblioteca de obtención de datos. En nuestro ejemplo, instalamos React Query. React Query nos da ese gancho abstracto USequery que podemos usar para recuperar datos dentro del componente. Ojalá tenga sentido. Estas bibliotecas de búsqueda son un camino a seguir cuando trabajas con las aplicaciones modernas de React. Comprometamos los cambios que hemos hecho. Lo que hicimos, básicamente acabamos de instalar React Query, luego reemplazamos nuestro gancho personalizado a fetchShowByID por el gancho USequery. También devolvimos React StrictMode a la aplicación porque ya no tuvimos ningún problema con obtención de datos dentro de UseEffect. Ahora, agreguemos todo a stage, vamos a comprometernos y digamos instalado react query, replaced, useShowbyID con useQuery hook. Impresionante. Hasta la siguiente. 74. 18 asignaciones: Hola ahí. En el último video hablamos de bibliotecas de obtención de datos. Hablamos de React query e integramos la consulta de React en nuestra app. Usamos el gancho de consulta de uso dentro del componente show para obtener datos por show ID. No obstante, si volvemos a Home jsx, su componente de hogar, puede ver que también obtenemos datos aquí. Es ligeramente diferente a solo hacer una simple solicitud GET cuando se monta el componente. Debido a que tenemos básicamente filtros, tecleamos algo dentro del cuadro de búsqueda luego podemos elegir diferentes botones de radio y luego hacemos clic en el botón Buscar solo después eso se está enviando la solicitud. Sin embargo, las bibliotecas de consulta y obtención de datos de React también pueden manejar estos escenarios. Tengo una tarea para ti. ¿Puedes integrar el gancho Usar consulta en la página de inicio para que podamos reemplazar estos estados de uso aquí con un solo gancho de consulta de uso? Adelante, intenta integrar el gancho Usar consulta dentro del componente home. Aquí tienes un consejo que te puedo dar. Puedes ir a la documentación de React Query específicamente a bajo chicos y conceptos que puedes buscar. Déjame ver deshabilitando, recortando pausando consultas, y en la parte inferior, tienen este ejemplo con consultas perezosas. Puedes usar este ejemplo aquí para integrar, Usar consulta dentro del componente home. La lógica será muy similar a ese ejemplo, pero hay que ajustar esa lógica a nuestro caso de uso. Adelante, intenta hacer eso, y luego compararemos el resultado en el siguiente video. Nos vemos ahí. 75. 19 Cómo usar la consulta de React para buscar datos en la página de inicio: Hola. ¿Cómo fue tu asignación? ¿Pudiste lograr lo que queríamos? ¿Pudiste integrar el gancho UseQuery dentro de los componentes del hogar? Vamos a tratar de ver. Justo como te dije, puedes referirte a ese ejemplo para implementar la lógica con el gancho USequery. Lo que voy a hacer, voy a copiar estos dos aquí, y colocarlos encima. También necesitamos importar, USecuery desde react-query. Pongamos la entrada encima. Entonces no necesitamos usar React.usEstate porque importamos UseState directamente de la biblioteca, y ahora necesitamos ajustarlo a nuestro caso de uso. En primer lugar, ¿qué es esta clave habilitada aquí? El caso es que hay situaciones en las que queremos recuperar datos condicionalmente, porque esta lógica por defecto, se ejecuta cuando el componente se monta. Los datos se obtienen cuando se monta el componente. Sin embargo, esto no siempre es cierto. Y si tenemos algunos un toggle, y cuando este toggle es verdadero, o cuando aplicamos el filtro solo entonces queremos recuperar la lógica. En este caso, podemos usar la opción habilitada aquí para que react-query entienda que queremos ejecutar o no ejecutar esa lógica. En nuestro caso, tenemos filtros. Nuestros filtros son la cadena de consulta, sea lo que escribamos dentro del cuadro de búsqueda. Entonces también tenemos la opción de búsqueda, que es el valor para leer tu botón que seleccionamos, ya sea shows o actores. Estos son filtros que tenemos. Ya que administramos toda la lógica relacionada con ingresar estos filtros para seleccionar y leer tus botones, administramos todo eso dentro de SearchForm. Luego pasamos los datos de vuelta a casa usando la función OnSearch aquí. Tenemos que pensar de alguna manera cómo podemos pasar esa información de filtro al gancho USequery. Podemos usar, digamos, estado de los ayudantes para los filtros, y luego podemos pasar ese filtro como parte de la QueryKey. Si el filtro es nulo o está vacío, no seleccionamos nada, simplemente deshabilitamos la consulta, porque cuando entramos a la página, no queremos recuperar datos porque bueno, no tenemos ningún filtro. No entramos en nada. En nuestro caso, filtrar por defecto, en lugar de una cadena vacía, será nula y la pasamos a la opción habilitada. Si filtro verthy sólo entonces podemos consultar los datos. En este caso, se habilitará el gancho. Después también pasamos filtro como parte de la QueryKey. Significa que si el filtro cambia, si este valor cambia de alguna manera, en nuestro caso será un objeto. Si se va a cambiar este objeto, ReactQuery lo entenderá y la QueryKey cambiará, y ellos UseQuery hook revalidará la consulta. Volverá a ejecutar la consulta con la nueva QueryKey. Básicamente, se ejecutará QueryFunction que suministramos aquí. Nuevamente, actualizará los datos y repoblará la variable de datos que tenemos aquí. Basta de hablar, por fin hagamos algo. En primer lugar, tenemos que establecer ese filtro aquí. Eso lo haremos dentro la función Onsearch que tenemos aquí. No necesitamos todos estos bloques de try-catch. Yo sólo voy a comentarlo. Dentro de Onsearch solo voy a llamar a setFilter, y voy a establecer setFilter a cualquier cadena de consulta que tengamos y cualquier SearchOption que tengamos. Entonces, igual que te dije, pasamos filtro como parte de la QueryKey en lugar de todos. Vamos a llamarlo algo así como búsqueda, realmente no importa. Dentro de QueryFunction necesitamos de alguna manera colocar esa lógica que tenemos aquí basada en la SearchOption. Dentro de esa QueryFunction, vamos a preguntar si filter.searchOption, esto es lo que establecemos, y para cuando escriba la lógica dentro ese filtro QueryFunction se definirá, no será nulo. Porque como recuerdas, la consulta se deshabilitará cuando el filtro sea nulo en nuestro caso. Significa que es seguro escribir aquí Filter.searchOption sin preocuparse de que el filtro pueda ser potencialmente nulo, y nos arrojará un error. Algo así como no se pueden leer propiedades searchOption de null. Si filter searchOption = muestra, en este caso, favor de SearchForShowsFilter.q de lo contrario, SearchForPeopleFilter.q. Eso es todo. Ahora podemos eliminar la lógica que teníamos previamente dentro en la búsqueda. Podemos eliminar aquí estos dos ganchos de UseState, datos que desestructuramos del gancho de UseQuery, vamos a llamarlo como ApiData, un error que desestructuramos lo vamos a nombrar como ApiDataError. Eso es. Elimino este comentario no deseado y veamos qué tenemos. Inspeccionemos la consola. Inspeccionemos la pestaña Red. Voy a escribir algo como hola. Haga clic en “Buscar” y podrá ver que funcionó. Bueno, el mismo comportamiento que teníamos anteriormente. Si me cambio a actores y tipo chicos. Por ejemplo, aquí tenemos la solicitud, si la vuelvo a cambiar a shows y luego vuelvo a hacer, algo más como chicas, verás que se van a buscar datos. Porque de nuevo, el filtro cambia cada vez que presionamos el botón Buscar. Siempre que hacemos clic en el botón Buscar, actualizamos el estado del filtro. estado de los filtros se actualiza, QueryKey obtiene, digamos invalidado, cambia. Significa que ReactQuery volverá a buscar datos con el último filtro, con la última QueryKey que pasamos. Así como así. Probablemente ya notaste ese comportamiento extraño, cuando puedes ver múltiples solicitudes pasando por. El caso es que ReactQuery tiene algo llamado re-buscar datos en re-focus. Esta es una de las características de estas bibliotecas de obtención de datos. Siempre que intentes reenfocar la ventana, se actualizarán los datos. Puedes ver si hago clic dentro de trabajo de red, luego vuelvo a hacer clic en algún lugar dentro de la página, siempre envía la solicitud. Este comportamiento, la mayoría de las veces podría ser deseado, pero en nuestro caso, este comportamiento definitivamente no es deseado. Podemos inhabilitar eso. Dentro de opciones, voy a pasar RefetchOnWindowFocus, y si pasas el cursor puedes leer la descripción qué hace exactamente esta opción, que va a mantenerla como falsa. A ver. Busquemos algo. Si intento volver a enfocar la ventana , no pasará nada. Algo así. Ahora, tenemos a USequery también dentro del componente del hogar, enhorabuena. De veras espero que hayas clavado esa tarea. Podría ser bastante desafiante, y definitivamente fue porque es algo nueva biblioteca, nueva lógica. Pero puedes ver una vez que te acostumbras, al final no es nada realmente complejo. Comprometamos los cambios que hemos hecho. Va a ser bastante sencillo. Sólo vamos a decir que edita o usa, usSequery en la página de inicio para obtener datos de búsqueda. Impresionante. Empujando todo a GitHub, y hasta el siguiente. 76. 20 Mostrando información en la página de Mostrar: Hola de nuevo en el último video agregamos el gancho de consulta de uso a la página principal y ahora tenemos el ciclo completo de obtención de datos dentro de nuestros componentes. Pero como creamos la página del programa, necesitamos mostrar los datos de la demostración en esa página. Esto es exactamente lo que vamos a hacer en este video, vamos a rellenar datos en la página del programa dentro del componente show, vamos. ¿Qué datos necesitamos mostrar? Si echamos un vistazo a la respuesta de la API esto es lo que recibimos en nuestros datos. Tenemos que decidir qué es exactamente lo que queremos mostrar en la página del programa así que vamos a crear algunos componentes y ya tengo una idea así que sigamos adelante. En primer lugar bajo la carpeta show voy a crear un nuevo archivo llamado ShowMainData.jsx. Esto va a ser un componente. Pero ahora devolverá un simple div export default show main data. Entonces también voy a crear, déjame ver otro componente que voy a nombrar detalles, detalles jsx entonces probablemente vamos a agregar algo más. Por ahora esto es suficiente volvemos a mostrar la página. Aquí tenemos este show data, ShowData.name. En lugar de eso vamos a usar show main data component que importamos de los componentes, muestra ShowMainData donde ahora lo guardamos así. Después de eso vamos a mostrar detalles. Aquí podemos decir los detalles bajo la etiqueta h2 y luego mostrar los detalles y necesitamos importarlo también de los detalles de espectáculos. Bien déjame guardarlo déjame volver a la página del espectáculo y aquí tengo hola, hola, exactamente lo que tenemos dentro de nuestros componentes por ahora. ¿Qué vamos a mostrar dentro de ShowMainData? Creo que vamos a necesitar show name, algo así como rechinar, resumen e impuestos, déjame ver. Tenemos nombre aquí, tenemos géneros, tenemos promedio o no promedio, promedio calificación así que vamos a mostrar todo eso dentro de ShowMainData pasémoslo ahí. En primer lugar también necesitamos una imagen y si recuerdas tenemos ese medio de imagen original así como puede ser nulo. Vamos a manejar casos nulos dentro del componente esta vez así que vamos a pasar showData.image luego pasaremos name que va a ser showData.name luego vamos a pasar rating. La calificación va a ser solo déjame encontrarlo, solo calificación promedio vamos a pasar el objeto y manejar.promedio dentro del componente, ShowData rating entonces necesitaremos resumen como recordamos versión muy corta de resumen dentro dentro de tarjeta de show esta vez vamos a mostrar resumen completo en la página del show. Vamos a pasar resumen que se encuentra aquí. Esta es la cadena HTML como recuerdas resumen de ShowData y luego pasaremos géneros. Déjame encontrar géneros aquí. Esto es solo una variedad de géneros de este programa, géneros ShowData. Impresionante. Ahora entremos en ShowMainData y tomemos todas estas indicaciones. Vamos a agarrar imagen, vamos a agarrar nombre, calificación, resumen y géneros. Ahora lo que vamos a escribir dentro de ese div, antes que nada necesitaremos mostrar la imagen. La fuente va a ser imagen.Mediano como recuerdas pero esta vez vamos a mostrar la imagen original en lugar de la vista previa del tamaño mediano. Sin embargo, necesitamos manejar los casos de uso nulos como recuerdas así que vamos a preguntar si imagen es veraz, ¿las imágenes están definidas? Entonces por favor use imagen original de lo contrario por favor use imagen no encontrada. Si vuelvo al show card o a show grid tengo una lógica bastante similar por aquí, solo voy a reutilizar esa imagen no encontrada png y ponerla aquí y si recuerdas se coloca dentro de la carpeta pública, se sirve debajo de la raíz. Al lado de la imagen tal vez también agreguemos alt aquí que se mostrará nombre entonces vamos a mostrar la información así que separemos ese bloque con un div. Aquí vamos a poner algo así como nombre como título entonces vamos a mostrar aquí rating para que podamos haber puesto rating como promedio, este objeto pero rating también puede ser nulo o si no me equivoco rating promedio puede ser nulo o no definido o puede ser cero no estoy seguro eso pero el promedio de calificación esta estructura siempre será la misma. En este caso podemos hacer algo si la calificación promedio es algo veraz o digamos que no es cero, podemos usar el operador u. Lo que quiero decir es que supongamos que tenemos calificación promedio cero. Vamos a crear ese promedio aquí, es cero así que vamos a mostrar ya sea promedio o hola y puede ver hola se imprime que significa que el promedio no pasó por porque es falsamente y cero se considera como un valor falsamente en estos casos favor de mostrar hola. vamos a aplicar exactamente la misma lógica Aquí vamos a aplicar exactamente la misma lógica así que si el promedio es cero o si es falsamente en este caso por favor muestra N/A, ¿tiene sentido? Entonces vamos a mostrar el resumen pero aquí está la cosa. Intentemos y solo hagamos eso, veamos qué vamos a tener. Volvamos a nuestra app y tenemos una imagen bastante grande aquí. Eso está bien, solo aumentemos y desplázate hacia abajo. Aquí puedes ver que obtenemos la cadena HTML tal como está. La cadena HTML en realidad la considera como una cadena, no como HTML. Si miramos dentro de los datos es solo una cadena y React no sabe que esto es HTML. Para que podamos tratar HTML como si fuera HTML, necesitamos usar lo siguiente. En primer lugar vamos a convertir ese div en un componente de cierre automático y a ese div podemos pasar algo llamado dangerOuslySet innerHTML. Este es un prop especial de React, este debe ser un objeto y ese objeto tiene propiedad HTML y pasamos resumen dentro. Con esta construcción, React entiende que queremos tratar HTML en realidad como HTML. Vamos a tratar de ver. Ahora puedes ver que aquí no tenemos ninguna etiqueta HTML y si inspeccionamos el marcado sea cual sea el HTML que recibamos en realidad se trata como HTML. ¿Por qué se establece esto como dangerouslySetInnerHTML? El caso es cuando quieres, digamos mostrar HTML o inyectar HTML en la página, puede contener JavaScript malicioso así que para evitarlo, React te advierte que si quieres asegurarte de que quieres insertar HTML en la página esta es totalmente tu decisión y la precaución es que necesitas usar dangerouslySetInnerHTML porque es peligroso. Al lado de resumen vamos a exhibir géneros. Podemos decir géneros y por qué tengo un signo de interrogación aquí. Los géneros van a ser, déjame ver así que lo tenemos es una matriz lo que significa que podemos mapear cada elemento al marcado jsx. Vamos a usar el método.map vamos. Vamos a crear otro div aquí y los géneros van a ser géneros. mapa. Aquí tendremos género y vamos a mostrar tal vez una etiqueta span y dentro podemos mostrar género y cuando usemos el.map para mapear el marcado jsx necesitamos pasar la clave única al elemento map. Déjame ver que los géneros son bastante únicos, diría, para que podamos pasar al género en sí como la clave única. Vamos a tratar de ver. Me acerco tenemos géneros, familia de comedia. Creo que este espectáculo tiene sólo un género. Cuenta con comedia y familia. Debido a que no tenemos espacio, parece que esta es una sola cadena sin embargo no lo es. No pongas atención por favor que esto es por ahora sin estilo. Por ahora tratamos solo con la lógica dentro de nuestra aplicación. Nos ocuparemos del estilo al final. Ahora déjame ver, así que usamos cada problema que queríamos. Por ahora creo que ya está. Vamos más allá y tratemos de los detalles. ¿Qué detalles interiores vamos a mostrar? Déjame ver qué tipo de datos tenemos aquí? Probablemente vamos a exhibir algo así como el estado del programa, ya sea que siga funcionando, terminado o tal vez acaba de estrenarse y cuándo exactamente se estrenó este programa, y tal vez la red, donde exactamente se publicó el programa. En qué región, en qué canal de televisión, algo así. componente de detalles, voy a pasar primero de todo el estado y esto va a ser solo showData.Status, entonces probablemente cuando se estrenó el programa, así que será solo showData.Estrenado luego red. La red es solo un objeto, ShowData.network. Fresco. Yo lo guardo. Esta vez voy al componente Detalles aquí, paso status premiered network y voy a agarrar status premiered network o tal vez solo tomemos otra sintaxis esta vez solo para hacer otra vez, digamos uso casual de JavaScript. En lugar de destructurar los apoyos directamente dentro de los argumentos de función, lo haremos en una línea separada solo porque queremos que sea de esta manera, nada de especial en eso. Aquí en vez de “hola” sólo voy a decir, a lo mejor añadir una etiqueta de párrafo y decir “status is status”. Entonces dentro de otro párrafo diré “estrenado en esta fecha” y luego mostraremos la red. No obstante, esta red, también puede ser nula porque no todos los espectáculos contienen esta información, por lo que necesitamos manejar este caso. Tenemos que asumir que en realidad esa es una buena práctica cuando se trabaja con algo desconocido, es muy bueno asumir que algo puede ser nulo o indefinido o podría no estar ni siquiera pasado. Vamos a preguntar a la red, si es de confianza, si existe? En este caso, vamos a mostrar una cadena, algo así como estrenada en esta fecha en un canal o país específico. Probablemente elijamos solo nombre, estrenado en esta fecha en network.name. Usé backticks para especificar que queremos usar interpolación de cadena dentro la cadena y luego interpolar nombre de red dentro de la cadena de nombre de red. De lo contrario, muestre nulo, no muestre nada o podemos asegurarnos de que usamos el valor booleano aquí. Podemos convertir la red en un valor booleánico y en lugar de usar el operador ternario, podemos usar final lógico. En este caso, en el nombre de la red se mostrará solo cuando la red sea veraz. Ahora, veamos qué tenemos y tenemos estatus terminado y estrenado en esta fecha en CBC. Impresionante. Ahora, parece que mostramos casi todo lo que queríamos. Sin embargo, podemos dar un paso más y mostrar más datos, como información sobre temporadas e información sobre el reparto. ¿Qué necesitamos en este caso? Si miramos dentro de los datos de API que recibimos, no tenemos ninguna información sobre cast o shows. Pero si volvemos a TV Maze API, aquí tenemos esta sección, déjame ver, sobre la incrustación. La incrustación nos permite cargar más datos sobre el espectáculo, y aquí hay un ejemplo. Déjame abrirla. La URL se ve así. Tenemos episodios incrustados, elenco incrustado y si nos desplazamos hacia abajo, veremos esta sección de subrayado incrustado con episodios y reparto. Esto es exactamente lo que vamos a hacer, pero necesitamos modificar nuestra función para buscar show. Vamos a copiar esta parte incrustada entonces usamos esa función getShowById para obtener datos. Aquí a la URL, podemos agregar embed, episodios y cast. Pero en lugar de episodios, vamos a incrustar temporadas. También podemos obtener información de temporadas. En lugar de episodios, vamos a especificar temporadas. Lo guardamos, volvemos al show, y ahora se ha revalidado porque recuerdas cuando cambias de enfoque entre ventana y otra cosa, los datos se van a actualizar porque usamos el gancho USequery, y podemos evitar que se comporte usando RefetchOnWindowFocus. Si no quieres este comportamiento, en realidad probablemente no necesitemos ese comportamiento, voy a deshabilitarlo igual que lo hicimos dentro de la página principal. Veamos qué tenemos en este caso. Ya puedes ver que tenemos esta sección de subrayado incrustado, aquí tenemos información de reparto y temporadas. De hecho, copiemos esa URL, abramos aquí e inspeccionemos la forma de los datos de las estaciones y el reparto. En primer lugar, necesitamos crear los componentes correspondientes para temporadas y reparto. En la carpeta Espectáculos voy a crear cast.jsx y voy a crear temporadas.jsx. Rápidamente voy a copiar el marcado, así que por ahora será div, props los vamos a desestructurar en línea y lo llamaré Cast. Lo mismo voy a hacer por Seasons. Ahora vamos a usar estos componentes dentro de show aquí. Entonces en el siguiente div, tendremos algo así como div otra vez otra etiqueta de título que dirá Seasons. Aquí vamos a mostrar el componente Seasons. Fue auto importado. Si miro la parte superior, fue importada de componentes show seasons. Voy a copiar eso. En lugar de temporadas, ahora voy a exhibir elenco y luego volveré a importar elenco. ¿Cómo importar? Presiono “Tab”, boom, importado en la parte superior. Genial. ¿Qué datos pasaré? Para el componente Seasons, voy a pasar Seasons prop, y Seasons serán temporadas incrustadas de subrayado. Esto es lo que recibimos de la API, así que voy a pasar show data underscore embedded. Asegúrate de que no lo escribas mal, .temporadas, y exactamente lo mismo haré para el elenco pero en vez de pasar temporadas pasaré el prop del elenco, ShowData embedded.cast. Ahora, dentro de Seasons, voy a desestructurar ese apoyo de temporadas que pasamos. Veamos qué voy a mostrar aquí. En primer lugar, queremos saber cuántas temporadas tenemos en total. Si vuelvo a la app, tengo este problema inesperado patrón de objeto vacío. Arreglemos eso rápidamente Si vamos a Cast, solo voy a quitar eso. Entonces dentro de Temporadas lo que voy a exhibir. En primer lugar dentro de la etiqueta p, voy a mostrar Temporadas en total. Verifiquemos que tenemos esto, Temporadas en total. Aquí vamos a agregar temporadas.longitud. Si miramos nuestros datos, las estaciones son solo una matriz. Entonces, cada temporada es un elemento de matriz, lo que significa que el número de elementos es igual al número de temporadas. Bueno, parece que es lógico, así que vamos a usar temporadas.longitud. Al lado de temporadas en total vamos a mostrar episodios en total y vamos a decir, déjame ver. Como tenemos temporadas como matriz y dentro de cada elemento tenemos orden de episodios, y básicamente ¿cuántos episodios tenemos dentro de una sola temporada? Necesitamos calcular de alguna manera el número total de episodios a lo largo de toda la lista de temporadas. Podemos usar algo array.reduce para calcular eso. Entonces vamos a contar temporadas.reducir. Las temporadas reducen va a ser por defecto ahora así que vamos a reducir todos nuestros arreglos de temporadas en un número. Comprimiremos esa matriz de estaciones en un número. Simplemente haremos un bucle sobre cada elemento de la matriz y resumiremos el orden de los episodios. Aquí esta va a ser nuestra suma y el segundo elemento aquí va a ser elemento actual de la matriz que recorrerá. Esta va a ser temporada. Así que vamos a decir por favor devuélvanos algunos más el orden de la temporada.episodio. Vamos a tratar de ver si no tenemos ningún pedido. Tenemos temporadas en total una, episodios en total 13. Genial, funcionó. Ahora al lado del párrafo vamos a mostrar los datos de cada temporada así que básicamente, esta información, lo que significa que necesitamos mapear cada elemento de temporada al marcado jsx. Vamos a usar el método de mapa de puntos. Vamos a contar temporadas.mapa, temporada. Vamos a mapearlo a un div o ahora que sea hola o clave, vamos a pasar temporada. déjame ver los datos. Season tiene id que está representado de manera única para que podamos usarlo de manera segura como clave. Vamos a decir por favor muestra temporada, temporada.número, entonces el número de temporada. Genial. Entonces vamos a mostrar la etiqueta p. Vamos a contar episodios cuántos episodios tiene esta temporada. Probablemente temporada episodio orden podemos usarlo, ¿por qué no? Entonces vamos a mostrar cuándo se emitió esta temporada, y podemos usar la fecha de estreno y la fecha de finalización. Genial. Entonces déjame separarlo en div separado entonces voy a decir transmitido. Lo que voy a hacer voy a decir temporada.Premieredate, seasonEndDate. Probablemente esto, sí. Vamos a tratar de ver. Tenemos temporadas en total, episodios en total entonces tenemos la primera temporada que tiene 13 episodios y se emitió desde esta fecha hasta esta fecha. mi me queda bien. Si necesitamos agregar algo más lo haremos más adelante, por ahora esto va a hacer. Vamos a trabajar en el componente de reparto esta vez. Al componente fundido pasamos el puntal fundido. Así que aquí dentro del componente de reparto voy a agarrar el prop de reparto, y pensemos qué datos vamos a mostrar aquí. Inspeccionemos la API. El reparto también es solo una matriz y cada matriz tiene a esta persona, personaje, yo y voz Keith. Veamos qué vamos a hacer. Probablemente solo vamos a mapear cada elemento de la matriz con alguna información y mostrarla aquí. Hagámoslo. Entonces simplemente vamos a hacer cast.map. Vamos a llamarlo ítem y lo mapearemos a un div por ahora. La clave va a ser, déjame ver, item person.id, probablemente esto. Creo que esto va a ser bastante único. Dentro del div, antes que nada, vamos a mostrar, déjame ver, probablemente imagen real. Vamos a tratar de hacer eso. Envolvamos esa imagen en un div por ahora. La imagen va a ser item.person.image, pero recuerdas que la imagen puede ser nula así que necesitamos manejar esto. Si item.person.image existe, en este caso usa item.person.image.medium. De lo contrario use de nuevo, vamos a agarrarlo, vamos a usar imagen no encontrada png. Genial, vamos a guardarlo. Entonces junto a esa imagen vamos a mostrar, déjame ver, tenemos item.person.name entonces vamos a mostrar el personaje dentro de ese show en ese show. El personaje va a ser el nombre del personaje, por lo que esa persona jugó item.character.name. ¿Y sabes qué? Es bastante repetitivo escribir item dot algo cada vez, así que a partir de ese ítem vamos a desestructurar persona y carácter. En lugar de escribir item dot cada vez que estamos solo va a escribir person.character. Así carácter.nombre. Déjame ver cómo podemos usar otra cosa. Tenemos este yo y esta voz aquí. La voz probablemente se refiere a si esto era solo la voz en off y el papel no se jugó directamente en el programa. Fue solo una voz en off de esa persona para que podamos usar eso tal vez. Podemos desestructurar la voz desde aquí también porque es la clave de nuestro artículo y vamos a preguntar si esta persona se encarga de la voz en off. Sólo vamos a mostrar algo así como otra pipa porque esto es lo que usamos aquí y vamos a decir voice over de lo contrario una cadena vacía o podemos volver a usar el operador and y queremos asegurarnos de que esto va a ser un booleano, pero creo que este valor aquí será siempre un booleano así que no necesitamos girar esa variable, ese valor en un valor booleano aplicando doble negación o usando constructor booleano. Esto va a ser suficiente, creo. Ahora intentemos ver nuestro resultado final. Tenemos la siguiente página del espectáculo. Déjame hacerlo más pequeño. Ahora mismo sé que está sin estilo pero nosotros nos encargaremos de eso, no se preocupe. Tenemos todo lo que queremos del espectáculo. Incrustamos resumen, mostramos la calificación promedio, mostramos géneros, mostramos detalles cuando se emitió, tal vez cuando se terminó, mostramos información sobre temporadas y mostramos información sobre el reparto. Cuál era la persona que interpretó ese papel y era esa persona un personaje de locución o era simplemente cualquier personaje dentro del programa. Creo que esto es todo. En realidad fue mucho. Trabajamos con datos API, creamos los componentes correspondientes para mostrar los datos. Donde ahora vamos a comprometerlo todo. Vamos a repasar rápidamente lo que tenemos aquí. Modificamos la función get show by id para obtener datos, incorporamos temporadas, incrustamos cast luego usamos la información que obtenemos de la API y mostramos esa información en la página de show. Creamos los componentes correspondientes, pasamos los apoyos correspondientes y luego manejamos todo dentro de cada componente correspondiente, algo así. Voy a agregar todo al escenario y mi mensaje de compromiso se va a mostrar los datos detallados del espectáculo en la página del espectáculo. Fresco. Una cosa más que me gustaría señalar aquí es que, como recuerdas deshabilitamos este comportamiento RefetchOnWindowFocus de la consulta de uso quien. Ahora cuando volvamos a validar, discúlpeme, déjame volver a iniciar la app. ¿Dónde está nuestra página del espectáculo? Vaya, lo cerré accidentalmente. Lo que quiero decir es que cuando reenfocamos ventana ahora los datos no son refetched todo el tiempo pero ¿qué pasa si nuestro show id es inexistente? Vamos a tratar de ver. Probemos algo galimatías. A ver ¿qué tenemos? Vemos que los datos se están cargando y podemos ver este comportamiento de reintento. puede ver que la solicitud se envió tres veces en realidad, y si en el momento que llega la tercera solicitud todavía tenemos un error de nuestra solicitud solo entonces use query mostrará error. Puede ver que la biblioteca de obtención de datos es algo más que simple, por favor, busque mis datos cuando se monte el componente. Esta búsqueda de datos supone que las solicitudes pueden fallar potencialmente y si falla, las vuelve a intentar automáticamente varias veces con algo llamado retroceso exponencial. Por ejemplo, si nuestra solicitud falló por primera vez entonces la solicitud se reintentará después de un segundo, entonces si falla entonces el siguiente rejuicio tendrá lugar después de dos segundos y siguiente reintento se llevará a cabo después de tres segundos. Usar consulta se encarga de eso. Bastante genial. Eso es. Nos vemos en la siguiente. 77. 21 Agregar el botón de atrás en la página de Mostrar: Hola otra vez. En el último video, creamos componentes donde mostramos datos sobre espectáculos específicos en la página del programa. Fue una bastante larga. Ahora necesitamos pensar un poco más sobre la experiencia del usuario. ¿Qué quiero decir con eso? Supongamos que estamos en la página de inicio, buscaremos espectáculo específico, luego damos clic en Leer más. Terminamos en la página del programa. Ahora, aquí no tenemos ningún botón extra para la navegación, lo que significa que el usuario necesita hacer clic en, Volver a la página anterior, y si volvemos a esa página, vemos que todos nuestros datos se han ido, necesitamos comenzar la búsqueda de nuevo. Qué podemos hacer ante esta situación. En primer lugar, necesitamos agregar en la página del espectáculo un botón que devuelva al usuario a la página principal. Esto será solo un poco más conveniente para el usuario. Pero aún así, no resuelve el problema de que los datos se hayan ido cuando el usuario regresa a esa página y taquilla, nosotros no manejamos eso, pero idealmente, necesitamos recordar de alguna manera la última búsqueda que hicimos cuando el usuario vuelve a esa página, sigue ahí. No vamos a cubrir eso en Taquilla, vamos a introducir una alternativa. ¿Y si buscaremos el espectáculo y cuando damos clic en Leer más, lleva al usuario a la nueva pestaña? Abre esta página del espectáculo en la nueva pestaña. Sigamos adelante y hagamos eso. Si volvemos al componente show card que tenemos, usamos ese componente link aquí. Usamos componente de enlace porque usamos biblioteca de enrutamiento del lado del cliente react-router, y para que podamos manejar la navegación correctamente a través de enlaces, usamos este componente de enlace especial importado del enrutador React dom. Pero si queremos abrir algo en una nueva pestaña, esto de alguna manera no está relacionado con el enrutamiento cliente-sitio. En este caso, podemos usar una etiqueta de anclaje simple en lugar de usar el componente de enlace del enrutador React dom. Así que simplemente podemos eliminarlo, y en lugar de usar clink, vamos a mostrar la etiqueta de anclaje. etiqueta de anclaje tiene una propiedad de canal. Ahora podemos suministrar otro atributo de etiqueta de anclaje llamado target y especificamos subrayado en blanco. Tan pronto como especifico en blanco como el objetivo, obtengo este error del enlace ES proveniente de React JS x target blank que por favor use relación no referida. Sólo voy a copiar sin especificar. Esta es solo una medida de seguridad muy pequeña. Yo lo guardo. Ahora, intentemos. Si hago clic en Leer más, abre mi página de show en una nueva pestaña. Bastante genial. Sin embargo, nuevamente, como acordamos hacer la experiencia del usuario un poco más conveniente, vamos a agregar, volver al botón Inicio en algún lugar en la parte superior. Vamos al componente show page. Aquí arriba, justo encima de mostrar los datos principales. Aquí podemos agregar dos cosas. Podemos o bien agregar un componente de enlace que nos lleve de vuelta a casa, algo como esto, volver a casa, y esta es una solución totalmente fina. En realidad vamos a usar esta. Pero solo quiero que veas la alternativa a esto. Porque el enrutador React es una biblioteca de enrutamiento. Tiene algo que ofrecer. Vamos a echar un vistazo a eso. Pero aún así, podemos usar el componente link. En lugar de usar clink por ahora, vamos a agregar botón, y vamos a decir, “Vuelve a casa”. En ese botón de tipo botón, vamos a poner el manejador on click, Volver atrás y eso en volver atrás, va a hacer algo por nosotros. Si volvemos a la documentación de react-router, tiene algo llamado use navigate. Usar el gancho de navegación, mirando este ejemplo, nos permite navegar programáticamente entre las páginas, aún usando el enrutador React dom. En lugar de usar el componente link, digamos más declarativamente, usamos la función que hará la navegación básicamente programáticamente y de manera más imperativa. Al mirar ese ejemplo, puedo agarrar, usar navegar desde React router dom. En realidad, ya importé, así que simplemente lo haré así. Disculpe, no use params, use navigate. Entonces llamaré a usar navegar aquí. Ese uso navigate nos devuelve una función a la que necesitamos llamar para navegar a una página específica. Navega a, lo llamaré así. Cuando hacemos clic en, volvemos a casa, vamos a llamar a navegar y luego especificamos, volvemos a la página principal. Volvamos a la aplicación. Encima, tenemos este botón aquí. Nuevamente, este botón, no vincula componente, es un botón. Si hacemos clic, volvemos a casa. En caso de que necesites navegar programáticamente o redirigir al usuario a una página, puedes usar el gancho de navegación de uso. Pero en nuestro caso, realmente no necesitamos convertir el botón en un enlace programáticamente. Podemos usar directamente el componente link porque en realidad tiene más sentido. Por eso no vamos a usar, usar navigate, que va a pegarse con el componente link. Tan simple como eso. Ahora, vamos a tratar de ver. Si miramos dentro del marcado. Ahora en realidad es la etiqueta ancla. Fresco. Si hacemos clic en él, seguimos regresando a casa. Pero requiere que usemos menos código. En realidad es mejor porque ahora hace el marcado adecuado, marcado HTML adecuado para navegar entre las páginas ya que es una etiqueta de anclaje. Fresco. Ahora aumentamos ligeramente la experiencia del usuario. Ahora se ve mucho, mucho mejor. Eso es todo por ahora. Comprometamos los cambios. Agregamos volver a casa y abrimos la página del espectáculo en una nueva pestaña. Voy a contar dentro de mi mensaje de confirmación botón Abrir o Leer más trae al usuario a una nueva pestaña ahora, agregado Volver al enlace de inicio en la página del programa. Eso es. Empuja todo para levantarte. Te voy a ver en la siguiente. 78. 22 Introducción al useReducer como alternativa al useState: Oye, ahí, en el último video platicamos un poco de experiencia de usuario. Ahora cuando hacemos clic en Leer más, se abre mostrar página dentro de nueva pestaña, así como agregamos el botón “Volver a Inicio” . Todo esto es genial. No obstante, nos falta funcionalidad para el botón “Star Me”. Siempre que hagamos clic en ese botón, queremos protagonizar ese espectáculo. Posteriormente, cuando naveguemos a la página estrellada, podemos ver nuestra lista de estrellas aquí. Cómo podemos lograrlo. Antes de que podamos hacer eso, necesitamos mirar la alternativa para usar el estado. Volvamos a nuestro componente. Digamos a la página principal probablemente. Aquí vamos a jugar con el nuevo gancho. Como ya sabrás, si queremos tener algún valor que cambie a lo largo del ciclo de vida de los componentes, necesitamos usar el gancho UseState. Básicamente es sólo un valor que cambia. Nos da la variable de estado y la función que podemos usar para actualizar este estado. Esta es nuestra manera de gestionar el estado local de un componente. Existe una alternativa para usar el estado llamado UserEducer. Es una alternativa, significa que no reemplaza a UseState, igual que UseState no reemplaza a UserEducer. Puedes usar lo que quieras y lo que creas que es más apropiado. Si tenemos UseState y tenemos, digamos set filter function que podemos llamar para liderar el estado con userEducer, tenemos algo llamado actions. En realidad iniciamos una acción y luego esa acción es manejada por una función, y esa función decide cómo actualizar el estado en función de una acción. Vamos a echar un vistazo al ejemplo de un mostrador. El gancho del que estaba hablando es UserEducer. Vamos a definir qué es un reductor en un segundo. Aquí arriba, voy a llamar a UserEducer. Este userEducer como primer argumento recibe algo llamado reductor. Encima, voy a crear la función reducadora. Ahora será una función vacía y la pasaré a UserEducer. Como segundo argumento, necesito pasar estado inicial. Al igual que en el caso de UseState, nuestro estado por defecto va a ser cero porque vamos a implementar contador. Cuando hacemos clic en un botón, queremos incrementar o disminuir. UserEducer, al igual que UseState, nos devuelve una matriz de exactamente dos elementos. Vamos a desestructurar estos dos elementos. El primer elemento, de nuevo va a ser el estado, igual que con el UseState. Digamos contador. Segundo elemento va a ser algo llamado despacho. Ahora bien, ¿qué debo hacer para actualizar de alguna manera el estado? El concepto reductor, por lo que este gancho UserEducer se basa en el concepto de reductores. Déjame abrir pintura y explicarte algo. Simplemente visualice la idea de UserEducer. Con UserEducer, tomamos enfoque de acciones que son manejadas por una sola función llamada reductor. Tenemos múltiples acciones sucediendo a nuestro estado. Por ejemplo, en caso de contador, tenemos incremento. Déjame hacerlo un poco más grande y luego tenemos decremento. Digamos que tenemos otra acción llamada algo así como reset counter, reset. Entonces todas estas acciones son despachadas por esta función de despacho a la lógica interna de React. Entonces tenemos una sola función llamada reductor, que maneja todas estas acciones entrantes. Siempre que se está despachando acción, está manejando la función reductora y lo que sea que devuelva la función reductora será el nuevo estado. Todo este flujo reemplaza al gancho UseState y se basa en el concepto reductor. Ahora bien, ¿qué es el reductor? Al igual que mencioné anteriormente, reductor es solo una función que de alguna manera maneja estas acciones. Pero, ¿cuáles son estas acciones? Ese es el punto. Necesitamos definir las acciones nosotros mismos. Una acción, en este caso es solo un objeto que transmite algunos datos. Por ejemplo, podemos definir una acción para incrementar los datos. Por lo general, cuando hablamos de reductores, cuando hablamos todo este concepto una acción siempre será un objeto. Con el tipo, digamos incremento y alguna carga útil adicional. Puede ser cualquier cosa. Puede ser un nuevo valor, lo que sea. Este objeto puede tomar cualquier forma. Pero generalmente tiene este tipo, clave y carga útil solo para hacerlo más consistente. Necesitamos definir estas acciones nosotros mismos. Después se manejan dentro del reductor. Voy a ir aquí. Dentro del marcado JSX, voy a decir contador va a ser contador, interpelar el estado. Entonces voy a añadir dos botones aquí. Uno será incremento, el segundo será decremento y el tercero se restablecerá. Cada función tendrá este OnClick y vamos a nombrar estos controladores como OnIncrement, luego OnDecrement y onReset. Ahora necesitamos crear estas funciones. Hagámoslo aquí arriba. Tenemos OnIncrement, luego tenemos OnDecrement, y tenemos onReset. Algo tiene que pasar. Tenemos que despachar acciones para que de alguna manera actualice el estado. Podemos llamar a despacho. Aquí tenemos que pasar una acción. Por ejemplo, cuando ocurren incrementos, despachamos una acción. Una vez más, una acción es sólo un objeto. Tomemos este en realidad. No necesitamos ninguna carga útil aquí por ahora. Sólo vamos a despachar una acción y será un objeto el cual tiene el tipo INCREMENT. Cuando decrementamos, queremos despachar una acción DECRETAMIENTO. Si tenemos al reiniciar, podemos enviar una acción de tipo RESET. Nuevamente, estos son los objetos que nosotros mismos definimos para nosotros. Será más fácil para nosotros entenderlos. Siempre que se llame a este despacho esta acción será manejada por la función reductora. Esta función reductora debe devolver un nuevo estado. Por ahora, volvamos a cero. Esta función reductorarecibe dos argumentos. En primer lugar, recibe currentState. Al igual que en caso de función de actualización de estado con UseState cuando pasamos callback. Tenemos acceso a CurrentState como primer argumento. La misma idea está aquí dentro del reductor. Tenemos CurrentState, llamémoslo CurrentCounter. El segundo argumento es la acción que nosotros despachamos. Voy a registrar currentCUNTER y acción. Volvamos aquí. Tenemos algo así. Inspeccionemos la Consola. Siempre que hago clic en Incremento, veo dos cosas siendo Consoladas. Veo CurrentCounter es igual a cero. Este es nuestro estado actual. Tenemos acción. La acción es justo lo que pasemos cuando llamamos a la función de despacho, esta será esta acción aquí. partir de lo que pasamos, en base a lo que despachamos, podemos escribir nuestra lógica dentro de una sola función. Por lo general, cuando trabajas con reductores, trabajas con caja de interruptores. Vamos a cambiar action.type. En caso de que tengamos tipo INCREMENT. En este caso, desde el reductor, devolvemos CurrentCounter más 1. Incrementamos el contador. Nuevamente, lo que sea que se devuelva del reductor se fijará como el nuevo estado. En caso de que tengamos decremento, decimos CurrentCounter menos 1. En caso de que llamemos a RESET, por favor devuelva 0. En caso de que ninguno de estos partidos por defecto, vamos a devolver 0. Vamos a guardarlo y veamos. Si hago clic en Incremento, el contador se incrementa. Si hago clic en Restablecer, se ha restablecido a cero. Si decremento, se está decrementando. Como puede ver, mediante el uso esta función reductora y mediante el uso de las acciones que nosotros mismos definimos y luego las manejamos dentro de la función de registro. Podemos lograr esta lógica para gestionar el estado a partir de acciones. Y nuevamente, esta es una alternativa al uso del gancho UseState. Usa el reductor igual que el estado de las manijas estatales, pero con el concepto de reductores y acciones de despacho, cuál usar. Depende del caso de uso y realidad lo que prefieras más. Lo más común es usar UseState, pero digamos que si tu lógica para actualizar el estado incluye muchas, digamos diferentes acciones por ejemplo Increment, Decrement Reset, establece valor específico digamos Increment by 10, que puedas tener tu lógica para actualizar el estado basado en acciones específicas puedes usar el gancho UserEducer. Por qué te estoy diciendo todo eso es porque para nuestra lógica implemente, Start Shows, vamos a usar el gancho reductor de usuario porque tendremos algunas acciones como Start Show y OnStart Show. Anteriormente mencioné que a esa acción puedes pasar cualquier dato aquí. Veamos a qué me refiero con eso. Justo como te dije, tenemos un solo lugar donde manejamos la lógica y lo que sea que se devuelva de la función reductora se establecerá como el nuevo estado. Por qué no definimos aquí otra acción llamada SET_VALUE, algo así. Entonces simplemente voy a crear otro botón aquí y decirle a Set que digamos 500. Luego onClick OnSetToValue. Voy a crear esa función aquí y despacharé el tipo SET_VALUE para que pueda ser manejada por el reductor. Voy a pasar valor, o digamos nuevoContraValue 500. Ahora, como tenemos acceso al objeto action dentro del reductor, y sabemos que el objeto action es justo lo que despachemos podemos decir return action.newCounterValue. Lo que pase como newCounterValue será devuelto desde la función reductora, y será el nuevo estado. Vamos a tratar de ver Incremento, Decremento, Fijado a 500, es 500, algo así. Cualquier dato que pase aquí está disponible dentro de la función reductora. Eso es básicamente. Nada más que agregar sobre reductores tal vez es que si probablemente escuchaste sobre redux, una biblioteca para administrar el estado global en las aplicaciones React. Redux se basa en el concepto reductor. En un redux, despachas acciones así y luego las manejas todas dentro de reductores. Fresco. Vamos a deshacernos de todo eso. Ojalá estuviera claro por qué UserEducer podría ser útil como alternativa a UseState. En realidad, tal vez yo añadiría que todas estas acciones en incremento, en decremento, pueden ser fácilmente reemplazadas por usEstate hook. En lugar de manejar toda la lógica dentro del reductor, puedes simplemente hacer algo como setCounter, digamos CurrentCounter más 1. Lo mismo se puede hacer dentro sobre decremento. Disculpe, será así, CurrentCounter menos 1. Básicamente escribirías la misma lógica que haces dentro del reductor. Cuando usas, usEstate hook y si en reset, sería solo setCounter saber y podría ser más fácil. Depende. Es por ello que se le llama alternativa. Depende de ti lo que se adapte a tus necesidades. Ahora que sabemos sobre UserEducer, en realidad podemos usarlo para implementar nuestra lógica para iniciar shows. Fresco. Nos vemos en la siguiente. 79. 23 estrellas muestra p1: Oye, ahí. En el último video hablamos UserEducer como una alternativa al gancho de UseState. Se puede utilizar para administrar el estado cuando tenemos definidas múltiples acciones y nos gustaría actualizar estado en función de algunas acciones. Vamos a usar UserEducer para implementar nuestra lógica para estudiar espectáculos. Vamos. En primer lugar, ¿cómo vamos a manejar la lógica detrás de los espectáculos estelarizados? Siempre que vamos a hacer click en, 'Start Me button”, vamos a agregar show ID a la matriz, que va a ser nuestro estado. El estado de los espectáculos de inicio será solo una matriz de ID de programa. Si hacemos clic en un programa, agregará ID a la matriz. Si hacemos clic en eso dos veces, se eliminará de esa matriz. Entonces cada vez que vamos a la página de inicio, tomamos esa matriz de espectáculos estelarizados y luego usamos para consultar datos de la API de laberinto de TV. Bastante simple. La pregunta es, ¿dónde vamos a escribir esa lógica? Contamos con componente para el hogar. Sin embargo, en todo el componente, que se muestra ya sea mostrar cuadrícula o cuadrícula real en base a los datos que tenemos. Vamos a escribir la lógica dentro de show grid por ahora, y más adelante, vamos a extraer esa lógica a un archivo diferente. Será más fácil acceder a eso dentro de otros componentes, por ejemplo, iniciar componente porque nuestra lógica será compartida entre múltiples archivos eventualmente. Vamos a empezar simples. Dentro de show grid, voy a importar UserEducer de react. Entonces te voy a llamar con, por ahora, digamos shows estelarizados reductor que vamos a crear en un segundo. Nuestro estado inicial va a ser una matriz vacía. UserEducer regresa como una matriz de dos elementos donde primer elemento va a ser el propio estado, así que los espectáculos estelarizados, y luego la función de despacho, digamos inicio de despacho. Ahora necesitamos crear shows estrellados reductor, una función que manejará la lógica para actualizar el estado así como necesitamos definir acciones. Básicamente vamos a tener aquí sólo dos acciones. Para espectáculo estelar y desestelar espectáculo. Vamos a definirlos. Siempre que hagamos clic en star me, vamos a despachar una acción de tipo star me o simplemente digamos estrella, y los datos que pasarán serán mostrar ID. La segunda acción será unstar. De nuevo, vamos a pasar el show ID al reductor. Dentro del reductor, el primer argumento es nuestro estado actual. Nombrémoslo como inicio actual. segundo argumento va a ser un objeto, la acción que se está despachando. Entonces aquí usando nuevamente el caso del switch, escribiremos la lógica para manejar las acciones que están siendo despachadas. Escribimos lógica basada en el tipo de acción. Cambiamos de tipo de acción. En caso de que tengamos estrella, en este caso, por favor devuelva actualStarred.concat acción ShowID. Sea cual sea el ID del programa que pasemos por la acción, agregue este valor a nuestra matriz actual de estrellas. segunda acción va a estar en estrella que vamos a manejar. En este caso, necesitamos eliminar ese ID de show de nuestra matriz de estado actual. Podemos tomar uso del método de filtro de puntos, que está disponible en la matriz. Para los elementos, así que antes que nada, el método filter espera una devolución de llamada en la que escribimos la lógica para filtrar elementos dentro de la matriz. Este método de filtro de puntos, al igual que el mapa oscuro, recibe exactamente los mismos argumentos. primer elemento es value, el elemento actual que recorremos más que el índice de ese elemento y la referencia a la matriz en sí, solo necesitamos el valor que va a ser show ID. Sea lo que sea que devuelva este filtro de puntos, puede ser verdadero o falso. Si esta devolución de llamada devuelve true para ese elemento, entonces este elemento permanecerá dentro de esa matriz, si la devolución de llamada devuelve false para el elemento que recorremos, no se incluirá en la matriz final. Sólo vamos a decir si show ID no es igual acción show ID. Con esta lógica, podemos filtrar todos los elementos que no cumplan con esta condición. Por defecto, si pasamos algo desconocido en este caso, por favor devuelva el mismo estado estrellado del patrón. Vayamos aquí y creamos una función que manejará la lógica cuando hagamos clic en, “Botón Star Me”. Vamos a decirle const on star, me click. Dentro de esa función, vamos a escribir la lógica. En primer lugar, al protagonizarme click va a ser una función que recibirá show ID como argumento. Este será show ID, el show ID correspondiente con el botón, Star Me. Se referirá a mostrar ID en el que básicamente hacemos clic. Entonces dentro de aquí, vamos a necesitar determinar si el programa ya está protagonizado. Si show no tiene estrellas, entonces vamos a despachar la acción de inicio de lo contrario, vamos a despachar la acción UnStar. Podemos crear una variable llamada estrellada y simplemente vamos a preguntar si el array de shows estelarizados incluye show ID en el que hicimos clic. Si este programa es estrellado, vamos a despachar estrellado. La acción va a ser del tipo OnStar, y mostrar ID, tenemos que pasar el show ID aquí, será lo que llamemos OnStar me click width. De lo contrario vamos a llamar a despacho estrellado de tipo estrella Ahora necesitamos de alguna manera usar eso OnStarmeClick. Bueno, podemos usar esa función dentro de ShowCard. Podemos, digamos, pasar un argumento, pasar un prop llamado onStarClick, y podemos pasar el directorio OnStarMeClick aquí, así, o digamos onStartMeClick será onStarmeClick. Dentro de ShowCard, vamos a agarrar esa sonda OnStarmeClick que pasamos ahora. Puedes ver que este onStarmeClick está siendo llamado con el argumento ShowID, lo que significa que cada vez que llamamos a onStarmeClick, necesitamos pasar ShowID. En este botón de aquí, OnStarMe, vamos a decirle a OnClick, por favor llame a OnStartmeClick, y pase el ID del programa. Fresco. Ahora, ya tenemos el flujo completo, intentemos cancelar log starredShows para ver qué es exactamente lo que tenemos dentro de nuestro estado. A estas alturas, inicialmente es una matriz vacía, esto es lo que establecemos. Si hago clic en OnStarMe, ahora veo que este ShowID fue agregado a este estado. Bastante genial. Vamos a tratar de agregar otro. Ya podemos ver que tenemos tres elementos. Si hago clic en el mismo programa dos veces, se está quitando de la tarifa estatal. Nuestra lógica central para protagonizar un espectáculo unstar funciona bien. No obstante, dado que este gancho vive dentro del componente ShowGrid, cada vez que navegamos a Start, y luego digamos de vuelta a Home, nuestro estado volverá a la inicial nuevamente, razón porque es que este estado es local a ese componente, cuando el componente se desmonta, el estado se ha ido. Tenemos que pensar cómo podemos realmente persistir esos datos. Podemos hacerlo, digamos, guardando StarredShows dentro del almacenamiento del navegador para que más adelante podamos recuperarlo. Esto va a estar algo avanzado porque lo primero que me viene a la mente cuando necesitamos compartir estado entre varias páginas, entre múltiples componentes, podemos levantar ese estado, digamos en algún lugar a tal vez app. Si tenemos nuestro estado manejado aquí, este estado entonces se puede pasar como un apoyo a, digamos componentes infantiles a estrellados y a casa. Pero en este caso, elevamos todo a la cima, así que todos, nuestro componente raíz sabe algo de este estado. Esto no está mal, y esta es una forma bastante predeterminada de administrar el estado compartido entre componentes en React. Pero vamos a introducir una alternativa a eso. ¿Por qué vamos a hacer eso de esta manera y no elevar el estado al componente app? Porque aunque compartamos estado entre páginas dentro de la app, cuando vamos a refrescar la página, este estado se habrá ido. Pero no queremos hacer eso. En cambio, queremos de alguna manera persistir el estado, así que cada vez que actualizamos la página, nuestro starredShows sigue ahí. Incluso si cerramos el navegador o tal vez cerramos esta pestaña, nuestros StarredShows no se irán. Lo que vamos a hacer en este caso, podemos usar algo llamado almacenamiento de navegadores. Podemos usar específicamente almacenamiento local o almacenamiento de sesión. Esto es como una pequeña base de datos que vive dentro del navegador, y puedes usarla para almacenar datos temporales dentro del navegador. Es una base de datos de tipo key value, lo que significa que bajo clave específica, puedes guardar un valor específico, y cuando refrescas la página, o digamos cerrar el navegador y volver a esa página, para esa URL específica, para ese sitio web específico, este almacenamiento es persistente. Los valores siguen ahí, a menos que sean limpiados por la propia aplicación o manualmente por usted, por el usuario. Vamos a almacenar nuestra página de inicio dentro del almacenamiento local. Sigamos adelante y pensemos cómo podemos hacer eso. Necesitamos pensar cómo podemos escribir el estado que tenemos dentro de nuestra aplicación al almacenamiento local. Necesitamos sincronizarlo, porque cada vez que cambiemos este estado, queremos guardarlo también dentro del almacenamiento local, guardarlo en la base de datos, y luego cuando vamos a actualizar la página, nos gustaría recuperar los datos de este almacenamiento y luego usarlos dentro de nuestra app. Con eso, podemos escribir, digamos, lógica adicional encima de UserEducer. Para eso, podemos crear un gancho personalizado encima de UserEducer con lógica adicional que persiste en el estado dentro del almacenamiento local. Esto es algo avanzado, pero no hay nada, digamos, confuso al respecto. Sigamos adelante y tratemos de hacer eso. Ya tenemos el gancho UserEducer, y queremos escribir la lógica que hace todo exactamente igual que UserEducer, pero también sincroniza el estado con el almacenamiento local. Podemos crear un gancho personalizado llamado algo así como usePersistedReducer, tal vez. adelante y hagamos ese gancho personalizado en la parte superior, lo vamos a llamar usePersistedReducer. Queremos retener la API del hook incorporado, lo que significa que queremos usar exactamente los mismos argumentos, queremos devolver exactamente los mismos elementos, así que todo va a ser prácticamente igual. Sigamos adelante y tratemos de hacer eso. Dentro de UsePersistedReducer, vamos a usar UserEducer. Ya que este gancho va a ser, digamos, reutilizable, no queremos, digamos, acoplar fuertemente la lógica a específicamente starredShows aquí, será algo, digamos, abstracto y reutilizable para manejar múltiples casos de uso. Vamos a nombrar este parche como despacho, y en lugar de starredShows, solo vamos a llamarlo estado. Luego dentro de ese UserEducer, necesitamos pasar el reductor ya que vamos a retener la API de UsePersistedReducer. De hecho lo vamos a usar como UserEducer, usePersistedReducer, vamos a pasar , digamos, un reductor, entonces queremos pasar la clave inicial, y luego también queremos pasar la clave de almacenamiento local bajo la cual se guardarán los valores aquí. Ahora como necesitamos pasar tres argumentos necesitamos recibirlos dentro de usePersistedReducer, así que recibimos reductor, recibiremos InitialState, y recibimos LocalStorageKey. Pasamos a UserEducer. El reductor pasamos initialState y pasamos algo llamado initializer. ¿Qué es esto? Cuando actualizamos la página, queríamos recuperar datos del almacenamiento local y utilizarlos como nuestro estado inicial. Queremos ejecutar esa lógica solo una vez cuando el componente se monta, para que podamos usar la función inicializadora. Es el tercer argumento que se ejecuta sólo una vez para inicializar InitialState. Este inicializador recibe un argumento, InitialState. Básicamente lo que pasemos aquí estará disponible como argumento dentro del inicializador. Esto se hace en este caso si el inicializador se crea como una función separada en algún lugar fuera. En este caso no vamos a hacer eso, vamos a simplemente inline el inicializador directamente aquí que lo va a llamar inicial. Este argumento inicial será básicamente solo ese estado inicial que pasamos aquí. Ahora la lógica será la siguiente. Primero tenemos que verificar si ya tenemos datos dentro del almacenamiento local. almacenamiento local está disponible en el objeto window, es digamos una variable global lo que significa que solo podemos iniciar almacenamiento local y luego boom simplemente funciona. Aquí vamos a preguntar PersistedValue. Si el almacenamiento local getItem bajo clave específica, primero tenemos que entender si este valor existe dentro de la base de la capa o no. Tal vez juguemos un poco con LocalStorage para que puedas hacerte la idea. LocalStorage podemos setItem bajo una visión clave específica. Digamos bajo clave bajo puedo decir valor alto. Ejecuto esa lógica vuelvo a localStorage. Aquí por si acaso lo refresque, se puede ver que bajo clave bajo ahora tengo valor alto. Puedo almacenar tantos valores aquí, puedo reescribirlos. Ahora como este valor se almacena dentro del almacenamiento de los navegadores, solo puedo llamar a getItem y luego especificar la clave bajo la cual quería obtener mi valor. Especifico getItem bajo, recibí mi valor alto. Lo que pasa con localStorage es que solo puede funcionar con cadenas. En nuestro caso el estado con el que trabajamos va a ser una matriz lo que significa que cuando vamos a escribir localStorage vamos a convertir nuestra matriz en una cadena y cuando recuperemos eso cada uno de almacenamiento local necesitamos convertirlo de cadena en una matriz nuevamente. Cómo podemos hacer eso. En primer lugar desde localStorage tenemos getItem bajo localStorageKey. Nuestro valor persistente va a ser nulo o una cadena. Nulo en caso de que este valor no exista dentro del almacenamiento local, lo contrario será una cadena siempre porque localStorage nuevamente funciona solo con cadenas. Aquí, lo que sea que regresemos del inicializador se establecerá como el estado inicial final. Lo que especificamos aquí viene como argumento al inicializador y luego el inicializador decide cuál será el InitialState final. Si no tuviéramos ese inicializador, simplemente podemos pasar initialState y funcionará. Pero si trabajamos con inicializador y trabajamos con inicializador porque hemos trabajado con localStorage, agregamos toda esa lógica encima. Aquí vamos a preguntar si el valor persistente es veraz, en este caso por favor aplique el método JSON.parse. ¿Qué es JSON.parse? Tenemos una matriz de digamos elementos 1, 2. Lo convertimos en una cadena usando el método llamado JSON.stringify. Ahora nuestra matriz se convirtió en una cadena y cuando recuperemos de localStorage, este valor persistido será esa cadena. Ahora necesitamos convertir esa cadena nuevo en objeto, de nuevo a matriz. Podemos usar JSON.parse a diferencia de JSON.stringify para deserializar nuestro valor de localStorage y podemos ver que tenemos inesperado no blanco. Debido a que esto ya es un objeto tiene que ser una cadena, así que digamos que pasamos una cadena que es esta matriz y todavía tenemos este problema; no es un JSON válido. ¿Qué está pasando? Probablemente quiera que use esto. A ver. Ahora, paso la cadena válida y se puede ver que analiza la cadena de nuevo a la matriz. Ahora bien, esta estructura de datos tiene el tipo de matriz no solo una cadena. Ojalá tenga sentido. Aquí analizamos PersistedValue, lo contrario si persistedValue es nulo, si el valor no existe usa el valor inicial, que va a ser el InitialState. Ahora finalmente terminamos con la lógica para inicializar el estado cuando se está actualizando la página o volvemos a la página. Fresco. Ahora necesitamos de alguna manera también sincronizar las actualizaciones de estado dentro del gancho UsePersistedReducer en el que trabajamos. Podemos usar UserEffect porque recuerdas, UserEffect nos permite engancharnos al ciclo de vida de los componentes y ejecutar la lógica cuando algo cambia. Voy a importar UserEffect, y desde aquí voy a llamar UserEffect y voy a pasar el array de dependencias en el que voy a especificar. Si nuestro estado cambia así como si nuestra clave; localStorageKey cambia, en este caso por favor ejecute esa devolución de llamada. Nuevamente, si los estados cambian o si localStorageKey cambia, llamamos a esa función. Esa función sincronizará el estado con localStorage, así que vamos a decirle a localStorage.set. La clave del ítem será LocalStorageKey y el valor será estado. Sin embargo, necesitamos convertirlo en una cadena antes de poder escribir en localStorage. Vamos a llamar al estado JSON.stringify. Al final de ese gancho, queremos que devuelva una matriz de exactamente dos elementos por lo que nuestro reductor de gancho usePersisted se asemeja al gancho UserEducer original. Vamos a decir [inaudible]. Estado y devuelva estos paquetes y ya está. Este va a ser nuestro último gancho. Básicamente es solo una lógica adicional además de UserEducer incorporado que sincroniza el estado con localStorage. Justo como te dije es un poco avanzado, sin embargo, si le das un vistazo en realidad no es nada complicado aquí. Ahora en lugar de usar UserEducer, aquí dentro de ShowGrid vamos a llamar a usePersistedReducer y como clave como tercer argumento vamos a decir starredShows. Ahora vamos a tratar de ver. Si volvemos a la app vamos abrir el almacenamiento local de la aplicación. Vamos a limpiarlo por ahora, busquemos espectáculos. Puedes ver tan pronto como el componente se monta en la página, este gancho usePersistedReducer ejecuta el estado se inicializa ya que nuestro estado cambia y useEffect se ejecuta al menos una vez. Ya comenzó a sincronizar el estado con localStorage aquí. Bajo key start shows, colocamos nuestra matriz vacía, nuestro initialState. Si trato de empezar algo boom, show es editar aquí. Está sincronizado. Si hago clic en “Star me” a otra cosa siempre se ha sincronizado con localStorage lo que significa que funcionó. Impresionante. Por ahora creo que esto va a ser bueno porque bueno, creo que ya es suficiente por ahora. En el siguiente video vamos a platicar cómo podemos proceder con esa lógica, así que de alguna manera podemos mostrar si este programa está protagonizado o no. De alguna manera visualmente decirle al usuario que este programa ya está iniciado y luego probablemente vamos a buscar todos esos datos dentro de la página estrella. Por ahora vamos a comprometernos con eso; lo que ya tenemos, para que no perdamos los cambios. Aquí voy a decir, agregó lógica inicial a espectáculos estelares con UserEducer. Creó usePersistedReducer para sincronizar el estado con LocalStorage. En el siguiente video vamos a proceder con eso. Nos vemos ahí. 80. 24 estrellas muestra p2: Hola, ahí. En el último video comenzamos a trabajar en la funcionalidad estelar. Creamos reductor persistente de uso de gancho personalizado, que sincronizó nuestro estado starredShows con almacenamiento local para que cada vez que lo refresquemos, seamos capaces de reinicializar el estado desde el almacenamiento local. No lo mostré en el video anterior, pero si intentamos cancelar log starredMuestra si refresco la página, déjame volver a casa. Si refresco la página y cuando el componente se monta, nuestro estado inicial se recupera del almacenamiento local, lo que sea que tengamos aquí. Si lo limpiamos, si eliminamos todo del almacenamiento local, refrescamos la página y buscamos shows, nuestro estado predeterminado es un array vacío. Fresco. Ahora tenemos que pensar cómo podemos realmente, digamos, reutilizar ese gancho a través de múltiples páginas, a través de casa y comenzar. Pero primero, vamos a decirle al usuario si este programa se inicia o no. Vamos a volver a ShowGrid aquí y a la ShowCard, podemos pasar otro prop llamado IsStarted. Este isStarred va a ser bastante sencillo solo vamos a preguntar si StarredShows. Estado que tenemos incluye estos datos mostrar ID. Por lo que este isStarred será un booleano que indicará si este programa ya está presente dentro de la matriz StarredShows. Entonces dentro de ShowCard solo vamos a agarrar IsStarted como utilería. Aquí por ahora, solo vamos a preguntar si este programa ya está protagonizado, por favor muéstralo en Star me por favor, o simplemente Unstar me o Star me. Vamos a tratar de ver. Siempre que hago clic aquí se convierte en Unstar me. Si hacemos clic en “Hola mañana” sigue siendo Unstar me. Ahora bien, si refresco la página, vuelvo a buscar hola, si me desplazo puedes ver que los valores se están persistiendo. Incluso si cierro mi navegador, cierro esta pestaña y vuelvo a esa página nuevamente a los shows específicos, seguirán mostrándome Unstar porque nuevamente sincronizamos el estado con el almacenamiento local. Fresco. Ahora procedamos y extrayamos esa lógica que escribimos aquí desde ShowGrid en un archivo separado, para que más adelante podamos reutilizar la misma lógica dentro de la página de inicio. Vamos. Probablemente dentro de fuente o tal vez vamos a crear una nueva carpeta llamada biblioteca, lib para abreviar. Aquí vamos a crear un archivo llamado UseStarredShows. Dentro de ese archivo, voy a poner toda esa lógica relacionada con los ganchos que escribimos anteriormente. Esto será usadoPersistedReducer, este será StarredShowsReducer, esta será esta llamada usePersistedReducer y la importación de UserEducer y UseEffect. Entonces si quisiéramos, digamos, usar exactamente el mismo gancho dentro de otro componente, digamos dentro de las páginas estrelladas, simplemente lo copiaríamos así. Tenemos que llamar nuevamente a usePersistedReducer, necesitamos pasar de nuevo StarredShowsReducer, especificar la misma clave , pero podemos ir un paso más allá, podemos crear otro gancho personalizado encima de esto, y digamos ocultar la lógica ahí. Dentro de UseStarredShows vamos a crear un nuevo gancho llamado useStarredShows y a este gancho llamaremos usePersistedReducer y en lugar de solo valores de destrucción aquí, vamos a devolver cualquier valor usePersistedReducer aquí devuelve. Aquí probablemente no vamos a pasar nada porque queremos, digamos, ocultar la lógica justo detrás de ese gancho, así dentro de nuestro componente, así dentro de nuestro componente, podemos simplemente llamar useStarredShows y vamos a guardarlo, luego exportarlo desde UseStarredShows, y luego importarlo de library, useStarredShows y el hook va a ser useStarredShows. Lo llamamos y simplemente obtenemos StarredShows y simplemente obtenemos DispatchStarted. Ya se ve que se ve mucho, mucho más limpio que antes. Ahora también es reutilizable, lo que significa que dentro del componente estrellado podemos hacer exactamente lo mismo, solo podemos llamar a useStarredShows y soltar los mismos datos. Hagámoslo. Dentro de estrellado voy a importar UseStarredShows y aquí probablemente no necesitaremos DispatchStarred, no necesitaremos la función de despacho, así que no lo vamos a desestructurar vamos a agarrar solo el primer elemento, los starredShows. Ahora, aquí podemos escribir la lógica para acreditar los datos, vamos a hacer eso en el siguiente video. Por ahora, solo vamos a probablemente página estrellada, estrellada, starredshows.length, que va a mostrar el número de programas que hemos protagonizado hasta ahora. Vamos a tratar de ver si funcionó. Si vamos a la página de inicio, podemos ver que tenemos dos espectáculos estelarizados, esto es lo que vemos dentro de nuestro estado que se persiste dentro del almacenamiento local. Si tratamos de limpiar el almacenamiento local, y si refrescamos la página, estrella va a ser cero porque eliminamos todo, se reinicializó el estado, algo así. Por ahora, vamos a comprometer todo lo que hicimos aquí. Extraemos la lógica de gancho en un archivo separado que creamos otro gancho personalizado encima de nuestro usePersistedReducer para StarredShows específicamente y lo llamamos UseStarredShows. Entonces usamos ese gancho personalizado dentro, componente estrella para mostrar por ahora el número total de programas que hemos agregado y usamos ese gancho dentro de ShowGrid, useStarredShows así como el usuario notificado visualmente mostrando los textos Star me o Unstar me basados en show ID, ya sea dentro de la matriz de estado o no. En realidad, me pareció mucho. Sin embargo, no fue tanto, ¿verdad? Así que agrego todo al escenario y digo que creé usoStarredShows, gancho personalizado colocó toda la lógica de gancho colocado todo o digamos colocado usestarredShows hook logic en un archivo separado. Dígale al usuario si el programa está mirado o no. Dígale al usuario si el programa está mirado o no. Eso es. Vamos a empujar a GitHub y nos vemos en la siguiente. En el siguiente video, vamos a buscar todos estos programas a los que tenemos acceso dentro del componente start. Ahora, vamos a ir a buscarlos de TV hace API y mostrarlos finalmente. Nos vemos. 81. 25 estrellas muestran p3: Hola, ahí. En este video, vamos a terminar la página del programa estelar. En el video anterior, hemos creado hook personalizado llamado user stars shows que es un gancho en la parte superior del uso reductor persistido que también es un gancho personalizado en la parte superior del reductor de uso pero con lógica extra que sincroniza el estado con el almacenamiento local. En este video, tomamos esos programas estelarizados que tenemos dentro del componente estrellado y luego los traemos de la API de TVMaze. En primer lugar, tenemos una serie de ID de show. Si miramos dentro documentación de TVMaze no tenemos ningún punto final. Intenta buscarlo donde podamos tomar múltiples espectáculos a la vez. Entonces, en nuestro caso, vamos a enviar múltiples solicitudes a la API. Pasemos al componente estrellado. Aquí por defecto, usaríamos use effect para tomar datos de la API solo cuando el componente se monte, pero ahora como usamos la biblioteca de obtención de datos, usamos query, podemos usarla para agarrar datos. Déjame copiar eso del componente de casa, voy aquí, dentro de estrellado importo consulta de uso de la biblioteca de consultas de React. Ahora, nuestra clave de consulta va a ser estelarizada y vamos a pasar la matriz de programas estelarizados que tenemos como clave de consulta. Luego dentro de la función de consulta, necesitamos obtener todos nuestros espectáculos. ¿Cómo podemos hacer eso? El primer enfoque e ingenuo es que en realidad podemos usar el sencillo for-loop, luego recorremos cada programa que tenemos dentro de la matriz de shows estelarizados, tomamos cada ID de programa, y luego enviamos la solicitud. No obstante, puedes ver que todas estas solicitudes que podamos enviar, digamos que tenemos dos identificaciones de espectáculos dentro del estado y vamos a enviar dos solicitudes. Cuando podamos recorrer cada elemento enviará la primera solicitud, luego solo cuando esté terminada entonces va a enviar la segunda solicitud. Esto no es eficiente porque las solicitudes que vamos a enviar para espectáculos, no son dependientes entre sí. Queremos que eso suceda lo más rápido posible. Es por ello que necesitamos enviar múltiples solicitudes al mismo tiempo. Para lograr ese comportamiento, vamos a usar promise.all. Déjame mostrarte a lo que me refiero. Dentro de la función de consulta, vamos a escribir la siguiente lógica. Antes de hacer eso, eliminemos habilitado y vamos a mantener refetch en Window Focus. Aquí la lógica será la siguiente. Que sea solo una función y una función de sincronización. Aquí primero vamos a mapear nuestro, ¿dónde está? API TVMaze. Esta función Obtener Mostrar por ID. Vamos a mapear esa función que devuelve promesa en una matriz. Suena ya complicado pero déjame mostrarte a lo que me refiero. Lo que vamos a hacer aquí. Diremos, digamos promesas de solicitud de API. Haremos starredshows.map. Vamos a mapear show ID a API para obtener show by ID así. Aquí vamos a especificar la identificación del espectáculo. Con este enfoque, vamos a terminar con una serie de promesas. Porque mapeamos cada ID de show para obtener show by ID que devuelve una promesa. Eventualmente, terminamos con una serie de promesas. Para manejar array de promesas y para asegurarnos de que estas solicitudes serán manejadas, digamos en paralelo al mismo tiempo, podemos usar el método promise.all. Vamos a decir esperar promesa.todos. En realidad podemos, ¿sabes qué?, mover toda esa lógica de aquí a una función reutilizable dentro de TVMaze.gs. Solo vamos a decir get shows por IDs esta vez y recibiremos los ID de show aquí. En lugar de simplemente hacer API Get Here, vamos a convertir esta función en una función de sincronización y pondremos la lógica que escribimos aquí dentro de get show by IDs. Vamos a mapear cada ID de show a una promesa, luego dentro de promise.all, y ya vemos que promesa no está definida viniendo de ES lint en realidad. Bueno, eso es interesante. Supongo que esto se debe a que dentro de ES lint RC necesitamos instruir a ES lint para que entienda que usamos la última sintaxis de JavaScript, la moderna, así que vamos a decirle a ES6 va a ser verdad. ES6 significa ECMAScript Versión 6 y superior. Ahora, creo que no tenemos ningún error, eso es cierto. Para promes.all vamos a pasar promesas de solicitud de API o simplemente llamémoslo promesas para hacerlo más simple. Lo que hace promise.all, resuelve una serie de promesas en paralelo, y se resuelven todas a vez y se manejan en paralelo. Bajo el capó, parece promesa 1, promesa 2, promesa 3 prometer de nuevo, una serie de promesas. Promise.all los resuelve todos a la vez. Luego promes.all da como resultado una matriz de valores resueltos. Si tenemos una serie de promesas digamos promesa 1, promesa 2, promes.all las resuelve todas a la vez. Promise.all devuelve una matriz de valores resueltos. Si la promesa 1 resuelve digamos el valor 1, recibiríamos una matriz con digamos el valor resuelto 1. Han prometido resolver a otra cosa, recibiríamos resolución, valor resuelto 2. Si la promesa no resuelve a nada, tal vez a null, a valor indefinido sería undefined o null. Pero se conserva el orden. Cualquiera que sea el orden que esté presente aquí en el mismo orden, las promesas se resuelven al usar promise.all. Un punto aquí, promesa.all también devuelve una promesa, así que tenemos que evadirla. Esto es importante. Ahora, podemos llamarlo como resultado. Aquí pasamos promesas y devolvemos resultado. Porque en nuestro caso, cada promesa resolverá mostrar datos, eventualmente recibiremos una serie de promesas resueltas lo que significa que vamos a recibir una serie de espectáculos. Vamos a registrarlo en consola solo para ver con qué trabajamos exactamente. Dentro de inicio J6 vamos a llamar a esto get show by IDs. A lo mejor, ¿sabes qué? Dentro de get show by ID incorporamos datos. Pero dentro de la página de inicio, no lo necesitamos. En lugar de llamar a get show by ID aquí solo vamos a llamar a ApiGet sin la parte embed. Algo como esto. Ahora, dentro de la página estrellada, vamos a especificar, por favor llame a get shows por IDs. Dentro de la función de consulta y dentro pasar espectáculos estelarizados, que tenemos. Ahora habremos protagonizado y protagonizado error. No nos confundas con nombrar. Probablemente lo llamemos programa estelar, shows estelarizados IDs. Aquí solo serán StarredShows y starredShows a prueba de errores. Ahora vamos a aplicar renderizado condicional simple aquí, igual que antes lo hicimos dentro página de show con si y si giras. Vamos a preguntar si StarredShows en realidad es verdad. En este caso por favor devuelva ShowGrid porque usamos show grid para mostrar todos los shows que tenemos, así que el cual va a usar ShowGrid pero primero necesitamos importarlo. Importar ShowGrid. Ya se autocompleta para mi a partir de componentes muestra ShowGrid. Si hemos iniciado shows vamos a devolver ShowGrid y ShowGrid espera que pasemos los shows aquí. Vamos a tratar de hacer eso, shows es igual a starredShows eligió y por defecto, fin de semana y mostrar hola. Primero probemos y veamos qué tenemos. Nuestra app no se está ejecutando porque no iniciamos el servidor div bien ahora tenemos nuestros shows intentemos agregar algo estrella me. Ahora vamos a página de inicio y boom, tenemos una pantalla en blanco y si miramos dentro de la consola, vemos que no se pueden leer propiedades de ID de lectura indefinida. ¿Qué pasa si miramos dentro de ShowGrid? ¿Dónde está? Recibimos shows, que se supone que es una matriz y dentro de esa matriz, cada elemento tiene.show property.show key pero si vamos a mirar en nuestro resultado y esto es lo que hacemos el registro de consola dentro obtiene shows por IDs aquí. Se puede ver que tenemos array de elementos y cada elemento array no tiene el. mostrar propiedad. Tenemos que arreglarlo de alguna manera. Necesitamos ajustar esa forma de datos a la forma de datos que se espera que se use dentro del componente. La pregunta es, ¿dónde exactamente tenemos que hacer eso? Esa es una buena pregunta. Bueno, si queremos hacer esta función, digamos, reutilizable posible en nuestro caso, en nuestra app, esto no es cierto, pero aún así, una buena práctica para hacer los cambios necesarios solo donde son necesarios y si queremos que sea reutilizable, no queremos dejar decir, alguna manera modificar la forma de los datos aquí. Vamos a hacer esa lógica dentro de la función de consulta. Aquí dentro de getShowsByIDs, no necesito registrar el resultado en la consola ya no necesito registrar el resultado en la consola o en realidad vamos a guardarlo por ahora, y más adelante, nos desharemos de eso. Pero dentro de la función de consulta aquí, vamos a hacer lo siguiente. Cuando getShowsByids se resuelva la promesa, vamos a usar el punto esa sintaxis ahora porque va a encajar mejor con, veamos esta sintaxis que tenemos aquí. En lugar de usar asincrónico esperar, podemos eliminar asincrónico de aquí así que cuando esta solicitud getShowsByids termine cuando la promesa se resuelva con ese resultado entonces lo que haremos, mapearemos sobre cada elemento del array y anidaremos cualquier dato que tengamos aquí bajo la clave show, bajo la propiedad show, que coincidamos con para que coincidamos con la estructura que se espera ser utilizado por el showGrid porque necesitamos una matriz de elementos donde cada elemento tiene la propiedad show dentro. Lo que vamos a hacer, vamos a decir resultado. map obtendremos mostrar datos aquí y de esa callback, que va a devolver ShowData para hacerlo más sencillo, en lugar de usar la sintaxis más larga con return vamos a decirle a return showData con llaves. Ahora, si tratamos de cancelar log starredShows aquí, todavía tenemos este problema. Déjame ver. Tenemos ShowData. Esto se debe a que mapeamos se puede ver cada elemento del array para tener la clave ShowData, pero esperamos que se muestre solo. Aquí en lugar de mostrar datos, podemos usar show y show. Ahora intentemos ver que nos refrescamos y boom, todo funciona mágicamente ahora. Si buscamos en resultado, tenemos estos datos que recibimos de los getShowsByIDs y luego mapeamos los datos. De hecho, anidamos esos datos bajo la clave show dentro de cada elemento del array, algo así. Ahora por fin podemos eliminar ese resultado de aquí y simplemente devolver promise.allpromises. Aquí no necesitamos cambiar nada esta es nuestra lógica aquí. Ahora tenemos que manejar el caso cuando no tenemos ningún programa estrella. Digamos que limpio el almacenamiento local, refresco la página, no se muestra nada pero idealmente, queremos decirle al usuario que, oye, no tenemos ningún StarredShows. Ya escribimos esta condición if, que funcionará para ambos si tenemos shows y si no tenemos shows, porque una matriz vacía también es un valor verdadero así que solo podemos decir si starredShows.length es mayor que cero si tenemos al menos un show y usamos el encadenamiento opcional aquí porque nuestro estado inicial va a ser indefinido por consulta de uso. Pues bien, la solicitud no sucede de inmediato así que este starredShows puede ser indefinido y no arroje ningún error, por ejemplo, déjame quitar eso, lo refresco, voy a consola y veo no puedo leer propiedades de undefined, porque inicialmente, este estado vuelve a estar indefinido, la solicitud no ocurre inmediatamente. Podemos usar encadenamiento opcional aquí o podemos preguntar si starredShows es verthy entonces usando el operador add, este starredShows, ese momento se definirá podemos escribir de forma segura starredShows.length pero para simplificar eso, usamos encadenamiento opcional. Si la longitud de starredShows es mayor que cero, mostramos ShowGrid luego agregamos otra condición en parte superior si estrellaMuestra la longitud es igual a cero en este caso, mostramos div algo así como que no se estrellaron programas. Entonces vamos a agregar otra condición en caso de que tengamos algún error. Si hemos iniciado espectáculos sumador, vamos a decir error ocurrido y vamos a decir StarredShowserror.message. Por defecto, si no se mantiene ninguna de estas condiciones en este caso, estamos diciendo que los espectáculos están quietos o simplemente los shows se están cargando. Este es nuestro mercado final, por ahora, intentemos y veamos. Si me refresco rápidamente, puedes ver un parpadeo rápido porque inicialmente, este estado está indefinido significa solo por un corto periodo de tiempo, estas condiciones no coincidirán y vamos a ver shows cargando si la solicitud lleva más tiempo del esperado, veremos que los programas se están cargando entonces vemos que no se protagonizaron programas. Si nos vamos a casa, buscamos shows nosotros protagonizamos algunos shows aquí este, entonces buscamos otra cosa, como, oye amigo, oye, volvemos a protagonizar puedes ver ahora tenemos estos shows aquí. Aunque refresquemos la página, los espectáculos siguen ahí. Bastante genial. Ahora tenemos el ciclo completo y completo de esta funcionalidad estrellada. Felicidades. Por ahora, eso es todo, vamos a sumar todos los cambios al escenario. Primero instruimos a ES link que estamos usando JavaScript moderno para que no nos dé ningún error cuando escribamos constructor de promesa como este. Agregamos otra función aquí para buscar para todos los espectáculos, conociendo los ID de show. Usamos el método promise.allpara manejar todas las solicitudes al mismo tiempo porque estas solicitudes no son dependientes entre sí, necesitan ser manejadas en paralelo, y luego resolverse todas a la vez esto es exactamente lo que hace promise.all. Luego dentro del componente estrellado, usamos el gancho de consulta de uso para recuperar datos ya sabemos lo que hace y por qué lo usamos luego aplicamos renderizado condicional para mostrar datos. Eso es. Genial. Vamos a comprometerlo todo y digamos que los datos de los shows obtenidos, con estrellas y display. ShowGrid para ellos. Fresco. Empujo todo a GitHub y en esa buena nota, te veré en la siguiente. 82. 26 Asignación: Hola de nuevo, tengo otra pequeña asignación para que recuerdes que para poder implementar programas de inicio para persistir los datos dentro del navegador. Cuando refrescamos la página, nuestro estado sigue ahí. Utilizamos almacenamiento local, almacenamiento dentro del navegador que puede persistir los datos. No sería bueno si también podemos persistir lo que escribamos dentro del cuadro de búsqueda, dentro del componente home. Entonces si refresco la página, lo que esté dentro del cuadro de texto sigue ahí. La idea aquí es muy la misma. Entonces si para espectáculos de inicio, creamos nuestro propio gancho que sincroniza el estado llamado fusible reductor persistido. Podemos crear un aro muy similar que se llama Hughes estado persistido en la parte superior del estado de Estados Unidos esta vez, y luego usar ese estado para implementar esta fecha para el cuadro de búsqueda. Esta es la tarea para ti. Adelante, prueba eso. Y esta vez en lugar de almacenamiento local, tal vez puedas usar el almacenamiento de sesión. La diferencia entre el almacenamiento local y almacenamiento de sesión es que el almacenamiento local persiste los datos, incluso si cierra la pestaña y cierra el navegador, almacenamiento de sesión solo los datos hasta que cierra el toque, cierra la pestaña y luego vuelve a la página. Nuevamente, el almacenamiento de sesión estará vacío, lo que es, podría ser un mejor ajuste para el cuadro de texto porque no es algo que nos gustaría guardar cuando cerramos la pestaña o cerramos el navegador. Entonces la API no es lo mismo, lo que significa que solo en lugar de almacenamiento local, vas a escribir almacenamiento de sesión y el resto permanece igual, obtener elemento y elemento del sitio. Así que adelante y tratar de crear ese uso persistente estado y luego implementado para persistir el estado del cuadro de búsqueda. Buena suerte con esa. Nos vemos en la siguiente. 83. 27 Implementación de un uso de gancho personalizado: Hola otra vez, ¿cómo fue tu tarea? ¿Pudiste lograr lo que queríamos? ¿Pudiste conservar los datos dentro del almacenamiento de sesión? A ver. Si volvemos al formulario de búsqueda, aquí tenemos ese use state call para tener el estado de la cadena de búsqueda. Ahora bien, si queremos persistir dentro del almacenamiento local o almacenamiento de sesión, necesitamos escribir una lógica extra. Podemos extraer toda esa lógica en algún lugar dentro de otro archivo, y luego aquí dentro del formulario de búsqueda, simplemente íbamos a llamar a use persisted o tal vez usar search string, que nos devuelve nuevamente una matriz de dos elementos, string y search string para que no cambiemos la API del use state hook. Será más o menos lo mismo. Sigamos adelante e implementemos todo eso. Bajo carpeta biblioteca que tengo aquí donde se encuentra use start chose, voy a crear un nuevo archivo llamado use search, STR, search string. Aquí voy a exportar const, usar cadena de búsqueda. Nuestro gancho no tomará ningún argumento, vamos a manejar todo dentro, así que el estado inicial será definido por el gancho dentro. No queremos preocuparnos por eso siempre que usemos ese gancho. Entonces lo guardo por ahora. Entonces desde aquí voy a importar de biblioteca usar cadena de búsqueda. El look final será este. Más o menos lo mismo que teníamos anteriormente pero toda la lógica ahora vamos a entrar. En caso de uso inicio muestra semanalmente ayudado ese gancho personalizado llamado uso persistió reductor. Podemos hacer exactamente lo mismo con use state pero en vez de use-reductor, vamos a usar use state. Voy a comentar eso para la referencia. Utilice un factorable nuevamente, necesario para sincronizar este estado con el almacenamiento de sesión. Te voy a necesitar estado y aquí voy a crear uso estado persistido. Usar estado persistente recibirá estado inicial como argumento. Aquí, voy a llamar al estado de uso y pasar al estado inicial aquí. Pero a diferencia del reductor de uso, use state puede recibir ya sea el estado inicial como argumento o la función inicializadora, que se ejecutará sólo una vez para inicializar el estado. En caso de usar reductor, era el tercer argumento, en caso de que algunos estados, simplemente sigue siendo el mismo argumento, pero solo pasa ahí la devolución de llamada. Aquí dentro de la lógica será más o menos lo mismo que hicimos con el almacenamiento local. En primer lugar, nos referimos al almacenamiento de sesión, obtenemos la clave de almacenamiento local del artículo. Tenemos que conseguir esa clave de almacenamiento local aquí. En nuestro caso, será clave de almacenamiento de sesión. Vamos a agarrarlo del uso de argumentos de estado persistidos. Al lado del estado inicial, podemos pasar la clave de almacenamiento de sesión. Entonces otra vez hemos persistido valor, si el valor existe, lo desoralizamos de la cadena, lo contrario usamos el valor inicial que pasamos, que va a ser argumento estado inicial. Impresionante. Aquí recibimos la función de actualización de estado y estado. Entonces exactamente la misma lógica con efecto de uso. Simplemente lo tomaremos de aquí y decimos, siempre que cambie el estado o cuando cambie clave de almacenamiento de sesión, por favor llame al ítem de conjunto de puntos de almacenamiento de sesión, clave de almacenamiento de sesión JSON, stringify, state. Entonces a partir de la etapa de uso persistido, nuevamente para mantener exactamente la misma API que para usar state hook, vamos a devolver una matriz de dos elementos donde el primer elemento es el estado, y el segundo es la función state update. Ahora, podemos eliminar estos comentarios aquí y dentro usar cadena de búsqueda. Podemos llamar a use persistent state, dentro pasamos el estado inicial, será una cadena vacía y la clave de almacenamiento de sesión va a ser cadena de búsqueda. Impresionante. Ahora bien, cualquiera que sea este uso persisted state devuelve y devuelve una matriz de dos elementos donde el primer elemento es el estado, segundo es la función state update, exactamente la misma API que para el use state hook. En lugar de escribir esto y luego escribir return state y set state, simplemente podemos devolver lo que devuelva la función use persisted state. Devolver, usar estado persistente. Ahora, esto es todo. Ahora podemos usar ese gancho que hemos creado dentro del formulario de búsqueda y funcionará mágicamente. Vamos a tratar de ver. Si actualizo la página, se puede ver que dentro del almacenamiento de sesión, tengo la cadena de búsqueda de claves, lo que sea que especificemos aquí como la clave de almacenamiento de sesión por lo que el estado se inicializa con el valor que pasamos aquí por defecto una cadena vacía. Ahora, lo que sea que escribamos dentro del cuadro de búsqueda, se desviará como valor dentro la clave de almacenamiento de sesión bajo cadena de búsqueda porque usamos efecto para que eso sincronice el estado. Si actualizo, puedes ver lo que sea que tengamos dentro del almacenamiento de sesión ahora se está mostrando como estado inicial dentro del cuadro de texto si actualizo. Esto es muy conveniente por ejemplo, si digamos que refresco accidentalmente la página, ojalá tenga sentido. No demasiado complejo como puedes ver, y realmente espero que hayas implementado más o menos la misma lógica. Por ahora, vamos a comprometer todo y decir que este fue el uso de search string hook, commit message va a persistir de tercera forma, valor de cuadro de texto en almacenamiento de sesión. Toda la lógica en uso, búsqueda, cadena, gancho. Empujo todo a GitHub. Nos vemos en la siguiente. 84. 28 Introducción a los componentes con estilo: Hola ahí. En el último video, diría que terminamos toda nuestra lógica dentro de la app. Ahora es el momento de que hablemos de estilos. Cómo vamos a darle estilo a la aplicación. En este video, vamos a hablar del enfoque que vamos a tomar y aquí hay un spoiler para ti, el enfoque será componentes de estilo. En este video, veremos cómo funcionan los componentes con estilo. Por qué exactamente los elegimos y al final, compararemos los componentes estilizados la forma tradicional de vender aplicaciones con solo estilos CSS regulares. Vamos. ¿Qué son los componentes de estilo? Eso es solo una biblioteca para diseñar o reaccionar aplicaciones con un enfoque llamado CSS-IN-JS. CSS en JavaScript es un enfoque que nos permite escribir el marcado CSS con la ayuda de JavaScript. este momento estoy en la página oficial de componentes de estilo, documentación oficial. Lo que vamos a hacer ahora mismo en este video, pasaremos por lo básico para entender cómo exactamente podremos usar esa biblioteca. Si me desplazo un poco hacia abajo, pasaré por el sencillo proceso de instalación. Volveré a mi solicitud. Abriré una nueva instancia de terminal aquí y ejecutaré npm install styled components. Una vez que esté instalado, simplemente cerraré la instancia. Eso lo hice sólo porque no para detener la aplicación en sí. Ahora tenemos componentes estilizados aparecieron bajo paquete Jason. Dependencias dentro de la documentación podemos ver tu primer componente estilizado. Necesitamos importar styled desde styled-components y luego usar algo como esto. Vayamos al componente home y podemos aplicar con componentes de estilo aquí en la página principal. En la parte superior, voy a importar styled from styled-components. Entonces voy a hacer styled.button y al final voy a dejar backticks vacíos para ello. Ahora, ¿qué es esto? Al llamar a style, elemento style.HTML que tienes en esa lista muy larga eres capaz de crear, digamos, el elemento subyacente que quieres darle estilo, por ejemplo botón estilo. A partir de ese elemento, styd-components creará un componente y ese componente tendrá estilos. Si volvemos a la documentación y nos desplazamos un poco hacia abajo, aquí encontraremos este ejemplo básico, style.button back-ticks y luego marcado CSS Como puedes ver, marcado CSS se escribe dentro de los retro-ticks. Por cierto, el resaltado de sintaxis que puedes ver aquí viene de la extensión VS Code, que se llama VS Code styled components. Si quieres que tu sintaxis se resalte y complete automáticamente, instala esta extensión. Somos capaces de escribir CSS aquí dentro de back-ticks. Styled-component usará elemento button y básicamente va a tomar ese elemento de botón HTML nativo y aplicaremos estos estilos que escribimos aquí encima de él y al final, producirá el componente button que podemos usar dentro de nuestro marcado. Sigamos adelante e intentemos. Dentro del marcado, voy a usar ese componente de estilo de botón que se creó y saludar aquí. Yo lo guardo. Vuelvo a mi app y ¿qué tenemos aquí? Si miramos dentro del marcado, tenemos este bonito botón estilizado aquí con este nombre de clase único. Todos los estilos se fusionaron y vamos a desglosar qué tenemos aquí. En primer lugar, este componente de botón renderiza el elemento de botón HTML exactamente lo que especificamos aquí como el elemento base para aplicar estilos, lo que significa que este componente de botón aquí básicamente renderiza el elemento de botón HTML nativo, lo que significa todos los apoyos que tiene este styled.something, podemos pasar directamente a ese componente. Si el elemento button tiene un atributo llamado type, podemos pasar type aquí. Si lo guardo, verán que se reflejará. Tengo botón tipo ahora, exactamente lo mismo harás con cualquier regular, digamos atributos HTML nativos en el elemento button si quieres que pase algo como al click, o si quisieras pasar algo como atributos de datos, algún atributo personalizado, lo harías, entonces funcionará. Fresco. Ahora, tenemos ese nombre de clase único aquí. ¿Qué es esto y por qué se ve así de muy extraño? El caso es que estos mosaicos que escribes aquí específicamente para ese elemento están abarcados solo a este elemento, lo que significa que estos estilos son únicos. Ese nombre de clase es único y fue generado automáticamente por styled-components. Los componentes estilizados garantizan la singularidad de las clases que escribes para ese elemento. Si creo otro componente de estilo, que se ve exactamente igual, pero tiene un nombre diferente, no importa. Puede ser, digamos, cualquier cosa, y luego uso ese componente de cualquier cosa junto a ese componente de botón, tienen exactamente los mismos estilos. Visualmente se ven iguales. Pero si comparas los nombres de sus clases, son diferentes. Lo que hicieron los componentes de estilo, generó un nombre de clase único basado en estos estilos. Nuevamente, los componentes de estilo crean estilos únicos y con alcance local , específicamente para el elemento. ¿Tiene sentido? Creo que sí. También tenemos aquí un estilo dinámico disponible para nosotros. Si volvemos a la documentación, si nos desplazamos hacia abajo, aquí, podemos encontrar otro ejemplo, ejemplo extendido con interpolación de cadenas aquí. Vamos a copiar esa interpolación de cadena. Volvamos a nuestro botón, y aquí, solo voy a usar esa interpolación de cadenas. También necesito importar CSS llamado export de componentes con estilo. Ahora, si volvemos a la app, no se cambiará nada. Pero, ¿qué hace exactamente esta interpolación de cadenas? En primer lugar, podemos usar la interpolación de cadenas aquí porque escribimos CSS aquí dentro de backticks. Dentro de los backticks, somos capaces de interpolar JavaScript usando el $ y los corchetes. Aquí pasamos una función que devuelve este CSS, digamos, otro marcado CSS aquí. ¿Qué está pasando? Aquí usamos algo llamado argumento props. Ese argumento va a ser un objeto que tiene la propiedad de clave primaria, pero nada cambia. Estos apoyos aquí se refieren a los apoyos que realmente pasamos al componente. Si paso primaria aquí, será un prop personalizado para ese componente de botón, lo que significa que estará disponible aquí debajo de ese objeto props. Si vuelvo a la app, verás ahora estos estilos cambiados. Si miro en el marcado, estos son los estilos que se aplicaron cuando pasamos el prop primario. Sobrescriben nuestros estilos base. Para que quede más claro, vamos a crear otro botón llamado también hola, pero sin pasar el atributo primario, sin pasar prop primario. Ya puedes ver que estos son diferentes. Tienen la misma clase base aquí, generada de manera única, pero la segunda clase es única. De esta manera somos capaces de aplicar estilos dinámicos utilizando componentes con estilo. Básicamente puedes pasar cualquier utilería aquí. Puede ser cualquier cosa no primaria. Digamos que puede ser como tamaño de fuente y puedes especificar cuántos píxeles querías, por ejemplo, 20. Luego dentro de la interpolación de cadenas , al usar esa función, puedes devolver CSS basado en los props que pases al componente. Por ejemplo, digamos que queríamos especificar el tamaño de fuente dinámicamente para cada botón, volveríamos a especificar el tamaño de fuente dinámicamente para cada botón, llamar a otra interpolación de cadena dentro este componente de estilo, y aquí simplemente pasaríamos. En tamaño, si pasamos tamaño de fuente, por favor incluya CSS, que tiene propiedad de tamaño de fuente con contra la interpolación encoger props.fontsize píxeles que pasamos. Básicamente interpolamos JavaScript en el marcado CSS. Ahora bien, si volvemos aquí y si inspeccionamos el elemento, aquí tenemos tamaño de fuente, 20 pixeles. Acabo de notar que también tenemos este atributo de tamaño de fuente adjunto al elemento button. Esto podría no ser necesario y eso podría no ser deseado en absoluto. Creo que cuando pasamos algo aleatorio para iniciar componentes y queremos que esté disponible solo como argumento como parte de este objeto props aquí, queremos prefijarlo con el $ para que los componentes styled entiendan eso, por favor no dejes decir, interpolar. No pase ese tamaño de fuente como el atributo real del elemento subyacente. Hágalo disponible solo dentro de esta interpolación de cadenas cuando aplicamos estilos. Ahora nos referiríamos al tamaño de fuente props aquí, props tamaño de fuente con el prefijo $ si no me equivoco. Sí, ahora mismo puedes ver que todavía tenemos los estilos y aún así funciona. De esta manera, podemos aplicar estilos dinámicos. Si volvemos a la documentación aquí, podemos encontrar otro ejemplo de componentes estilizados. Creamos otro componente de estilo llamado contenedor. Sigamos adelante y hagamos eso en la parte superior. Voy a crear este estilo de tiempo, el div, el componente al final que tendremos será contenedor. Ahora podemos envolver nuestros botones en el componente contenedor. Si inspeccionamos, nuevamente, verá un nombre de clase único que identifica específicamente a este componente que tiene los estilos correspondientes. Yo diría que esta es una buena introducción para componentes de estilo. puede ver que es muy fácil darle estilo a la aplicación usando este enfoque porque aquí todo es un componente. Podría ser, digamos, confuso diferenciar entre componentes regulares, componentes instalados pero estos son los inconvenientes. Necesitas encontrar la media dorada donde quieres tener tus estilos o donde quieres tener tus componentes regulares. Pero los componentes de estilo son una solución muy popular. Yo diría. Además, una cosa que también proporciona es algo llamado tema global o configuración global. Si volvemos a los documentos de componentes con estilo, y si en la esquina superior derecha buscamos tema, podemos encontrar esa referencia de proveedor de temas, y la referencia de proveedor de temas es algo que vamos a probar ahora mismo. Vamos a importar proveedor de temas de componentes de estilo aquí en la parte superior. Luego, siguiendo ese ejemplo, vamos a pasar el prop del tema al componente proveedor de temas. El tema que tenemos que pasar aquí debe ser un objeto. Vamos a definirlo en alguna parte superior. Vamos a llamarlo tema. Será solo un objeto y este objeto, lo que sea que especifique aquí, estará disponible dentro interpolación de cadenas dentro de cada componente de estilo. Lo que significa que aquí, puede definir cualquier configuración global que le gustaría que se use dentro de los componentes con estilo. Pueden ser colores, puede ser, digamos tamaños de fuente, puede ser font-family, en taquilla. Cuando vamos a darle estilo a la app, vamos a usar colores y familia de fuentes, por ejemplo, aquí podemos especificar colores. Digamos que el principal solo será rojo. Luego pasamos el objeto temático a través del proveedor de temas aquí. Ahora, dentro de la interpolación, donde quiera usar ese conflicto de tema global que tiene aquí, solo escribe color volverá a ser reabierto interpolación. Pasamos una función que debe devolver una cadena de marcado CSS. Será, digamos, utilería. Props.theme y props.theme se referirán a ese objeto aquí. Props.theme.Colores.Main. Ahora, si volvemos a la app y vemos, color será rojo. Ahora, en lugar de escribir rojo en todas partes en cada componente de estilo, solo te referirías a props.theme.colors.main. Entonces en lugar de cambiar este color en todos los lugares, tendrás un solo lugar donde se define este color. Por ejemplo, ahora decidí cambiar mi color principal de rojo a azul. Yo solo escribiría azul aquí y se reflejará en todos los componentes donde se refiere prompts.theme colors main. Vamos a tomar este enfoque para crear, digamos, alguna configuración global en taquilla. Ahora bien, esta fue una introducción a los componentes estilizados. Ahora comparemos qué es exactamente lo que nos da y cuáles son exactamente los inconvenientes y cuál es la diferencia entre, digamos, usar componentes celulares y una forma tradicional de usar CSS. Voy a abrir Paint. A la izquierda, tendremos algo llamado CSS estático y en la esquina derecha, tendremos algo llamado CSS de tiempo de ejecución. Los componentes con estilo son parte del CSS en tiempo de ejecución, pero vamos a comenzar con la primera estática. ¿Qué es el CSS estático? De la manera tradicional, cuando escribimos CSS los escribimos dentro de los archivos CSS, y luego los archivos CSS se están importando a la app. Por ejemplo, si echamos un vistazo a GitHub, usan CSS estático para darle estilo a su sitio web. lo que me refiero con eso, si miramos dentro su marcado, dentro del hashtag, cargan archivos CSS, y si abrimos uno de estos estilos, uno de los CSS, quizá abramos otro. Hay uno global. Tiene estos nombres de clase como color frontera inversa, tal vez como BG gris algo. Importan archivos CSS estáticos que se definieron en el momento de construir, y luego usan los nombres de clase que provienen de estos archivos CSS dentro del marcado. Vamos a abrir la etiqueta corporal. Aquí puedes ver nombres de clase regulares, comprensibles y completos. Pero si miramos dentro de los componentes-estilo, es ligeramente diferente. Nombres de clase estáticos, sin importar lo que se defina en el momento de la compilación. Si quisiéramos aplicar nombres de clase dinámicos o si queremos aplicar estilos dinámicos con nombres de clase CSS estáticos enfoque con CSS estático. Digamos que tenemos un botón aquí el cual puede ser primario, crearíamos, digamos, con la clase regular de botón de punto CSS, entonces crearíamos la clase primaria de punto, y luego cuando vamos a darle estilo a ese botón, solo vamos a alternar los nombres de clase. Por defecto, digamos que era un elemento de botón que tendrías aquí como punto, digamos clase botón aquí, y luego cuando haces clic en algo, este botón tiene nombre de clase adicional llamado primario. De esta manera puedes usar nombres de clase estáticos, estilos CSS estáticos para crear nombres de clase dinámicos específicamente para elementos. Con styled-components o con CSS en tiempo de ejecución es diferente. CSS es digamos construido en defly. lo que me refiero con eso. Si miramos dentro de nuestra app aquí, en el hashtag no tenemos ningún archivo CSS conectado. La pregunta es ¿de dónde vienen exactamente estos estilos? Ellos vienen de. Déjame ver. Si abrimos sombrero. Aquí tenemos la etiqueta de estilo. La cosa es CSS en tiempo de ejecución, lo que hace, los componentes de estilo biblioteca inyectan estilos dinámicamente en la página mediante el uso de la etiqueta de estilo. Si abrimos componentes de estilo , marcado, documentación oficial, ellos tienen estos, déjame ver sombrero, tienen exactamente la misma etiqueta de estilo aquí donde se inyectan estos estilos. Esto está vacío, no estoy seguro de por qué. Veamos esta, esta es alguna combinación global. Estos no son estilos dinámicos. Todos estos estilos que ves aquí se inyectan en la etiqueta de estilo. Aquí está vacío. Déjame probar con la fuente de la página. Aquí no está vacío. Todos estos estilos aquí se inyectan aquí dentro de la tecnología de estilo. El caso es que estos archivos se inyectan en defly. No se definieron en el momento de la construcción. Lo que significa que cuando accedo a esta página, primero, la etiqueta de estilo estaba vacía. Pero cuando realmente voy a esa página, los componentes de estilo, las partes, cualquier JavaScript que haya aquí dentro de los backticks. Entonces lleva algún tiempo procesarlo, analizar lo que sea que escribamos aquí, luego crea ese marcado CSS y luego inyecta ese marcado CSS aquí dentro de la etiqueta de estilo. De esta manera, los estilos se inyectan en tiempo de ejecución, durante las interacciones del usuario. Lo que pasa con este enfoque es que cuando cambias entre páginas, solo inyecta los estilos que se necesitan para mostrar el contenido en esta página específica. Significa que carga estilos solo necesarios para el contenido actual. Nunca inyectará estilos que no sean requeridos por esa página específica. A diferencia de las aplicaciones tradicionales aquí, importas ese archivo CSS grande y grande, tiene muchos nombres de clase diferentes, pero es posible que no se usen en la página. Componentes con estilo, en primer lugar, inyecta estilos dinámicamente en tiempo de ejecución y si digamos que algo es dinámico, por ejemplo, cambiamos la sonda aquí, estos estilos también se inyectarán dinámicamente, agregarán a las etiquetas de estilo para que estén disponibles en la página. Con las aplicaciones tradicionales, esto no es correcto. Todo necesita ser predefinido por adelantado y cargado a través de archivos CSS. El problema con esta solución CSS NGS, específicamente con JavaScript en tiempo de ejecución, es que lleva tiempo. Se necesita tiempo para analizar ese JavaScript para traducirlo a CSS, e inyectarlo en la página. Es computación, lleva tiempo. Significa que si tienes un árbol de elementos muy grande, digamos en la página que es un componente de estilo, podría convertirse en un cuello de botella en algún momento porque el JavaScript, lleva tiempo procesarlo. Si tienes millones de cientos de componentes en la página, podría tomar un segundo, un par de segundos, mientras que los estilos se inyectarán en la página. Pero en la mayoría de las aplicaciones, este no es el caso. Pero realmente deberías tener en cuenta esa opción si trabajas en aplicaciones más grandes y eres tú quien toma decisiones. Pero de nuevo, la mayor parte del tiempo, no estoy aquí para asustarte. La mayoría de las veces esto está totalmente bien y los usuarios finales ni siquiera verán la diferencia. Para taquilla vamos a usar componentes estilizados. Vamos a probar esa opción. Las ventajas de los componentes estilizados es que son fácilmente nos permiten definir primero la configuración global con JavaScript. Creamos el objeto theme y proporciona todo a través la interpolación dentro de los componentes de estilo. La segunda ventaja es que podemos aplicar fácilmente nombres de clase dinámicos usando, nuevamente la misma interpolación de cadenas, y tercero, todo es JavaScript. No es necesario crear archivos CSS en absoluto. Todo está escrito aquí directamente. Los inconvenientes es que antes que nada porque esto es JavaScript, lleva tiempo de cómputos. Nuevamente, en aplicaciones muy grandes, podría ser un cuello de botella. En aplicaciones más pequeñas, esto ni siquiera será visible en absoluto. Segundo inconveniente, puede ser confuso porque ahora todo es un componente y es fácil confundirse entre componentes regulares y componentes de estilo. Creo que esto es todo. Por ahora, sólo vamos a eliminar todos los cambios que hicimos dentro de casa GS6. Voy a mantener la instalación de componentes de estilo y luego en el siguiente video, finalmente vamos a estilizar toda la aplicación usando styled-components. Nos vemos ahí. 85. 29 Estilizar la aplicación p1: Hola ahí. En este video seguiremos hablando de estilos. En este video, vamos a darle estilo a nuestra aplicación, no del todo, sino que vamos a hacer el mayor aparte. Vamos. En el video anterior, ya instalé styled-components, acabo de ejecutar npm install styled-components, puedo volver a ejecutar este comando si acaso para asegurar que el paquete esté definitivamente instalado. Justo después de eso, voy a iniciar el servidor de desarrollo local y veamos dónde exactamente vamos a empezar a diseñar nuestra aplicación. Los estilos que voy a usar en este video serán compartidos contigo a través del invitado al que ya tengas acceso. Empecemos desde aquí. En primer lugar, vamos a conectar Google font, específicamente Roboto a nuestra aplicación y tal vez cambiar el título. Porque ahora mismo es solo la aplicación React. Yo sólo voy a ir aquí, StylingPart1.md y voy a copiar ese índice HTML que tengo aquí. Entonces voy a navegar a index.HTML. Aquí en vez de título, conectaré esta fuente, cargaré esta hoja de estilo y además cambiaré el título a Taquilla. Ahora, aparecerá bajo Taquilla. Mi app aparece en la taquilla y tengo esta fuente Roboto conectada aquí. Impresionante. Ahora, del video anterior, recuerdas que hablé tema de componentes de estilo, usamos proveedor de temas. Sigamos adelante y creamos ese tema. Si navego de regreso a invitado, tengo este objeto aquí. Este objeto aquí va a ser nuestra configuración de tema global. Solo un par de colores más la fuente global que vamos a usar, el Roboto que acabamos de conectar dentro del índice HTML. Voy a tomar ese objeto temático, voy a ir a, déjame ver, app JS6. Aquí, voy a agregar este objeto de tema, y ahora necesito usar proveedor de temas y pasar ese objeto de tema a los componentes subyacentes. Antes que nada, vamos a deshacernos de ese marcado aquí, ya no lo necesitamos, se comentó. Entonces a partir de componentes de estilo, voy a importar proveedor de temas. Aquí abajo consulta al proveedor del cliente, o encima de él. Realmente no importa, voy a llamar proveedor de temas, voy a envolver mi router de navegador en proveedor de temas y como objeto de tema, voy a pasar ese objeto de tema que tenemos aquí que lo hemos copiado del invitado. Ahora, se puede ver que en realidad fue esta nueva edición, digamos que con este nuevo objeto temático, nuestra app j6 se contaminó un poco. Lo que podemos hacer en este caso, tal vez podamos oscilar o extraer parcialmente lógica que hemos escrito hasta ahora aquí en un archivo separado. Por ejemplo, de alguna manera podemos extraer ese proveedor de temas y el objeto theme en un archivo separado y administrar todo desde allí. Lo que quiero decir con eso es que dentro de la carpeta fuente, podemos crear un nuevo archivo llamado theme.jsx. Ahora aquí podemos mover el objeto theme, y aquí podemos crear nuestro propio componente, que se llamará algo así como tema global, tal vez. Vamos a tratar de crear eso, const, GlobalTheme. Este GlobalTheme vamos a usar dentro de appjsx en lugar de proveedor de temas. No necesitaremos importar proveedor de temas de componentes con estilo, administrar el objeto temático aquí dentro, luego usar proveedor de temas pasar el objeto de equipo, podemos extraer toda esa lógica dentro del tema jsx, administrar todo desde aquí. Para eso, podemos crear solo un componente llamado tema global, y no podemos envolver el enrutador del navegador en el componente de tema global, así como así. Que vamos a importar de considerado jsx. Déjame hacer eso. Sólo voy a importar desde el tema global. Este GlobalTheme necesita ser exportado a, voy a llamar a export const, GlobalTheme. Ahora se ve mucho más limpio. Este GlobalTheme debe entregar a todos sus hijos que se pasan dentro. Significa que dentro del componente GlobalTheme, voy a desestructurar el prop infantil, y a partir de ese componente, solo voy a devolver el proveedor de temas, que se importa de componentes con estilo, y los niños mayores entrarán. Para el tema prop, pasaré el objeto theme aquí. Ahora, hemos creado el tema, manejamos la lógica en el tema jsx sin embargo, también necesitamos aplicar algunos estilos globales. este momento, tenemos algunos estilos globales definidos aquí dentro del índice CSS pero para nuestra solución de estilo, usamos componentes con estilo. De hecho, podemos usar componentes de estilo para crear un tema global, que no es, digamos de alguna manera alcance a algún componente específico. Así que algunos estilos definidos por componentes de estilo que están disponibles globalmente. En lugar de usar CSS índice, en realidad podemos eliminar ese archivo. Dentro de index jsx ya podemos eliminar referencia a un índice CSS existente. Ahora, necesitamos de alguna manera crear estilos globales. En componente de estilo, tenemos una cosa llamada crear estilo global. Podemos buscarlo en documentación. Déjame ver. Crear estilo global, referencia APA, crear estilo global, solo web. Es sólo una función a la que llamas. Nuevamente backticks, escribes estilos globales, CSS global, y luego solo lo usas como componente. Básicamente lo mismo que el uso de componentes de estilo regular, pero esta vez no se alcanzará a componentes específicos. Los estilos se aplicarán globalmente. Vamos a llamar a crear estilos globales aquí pero tenemos esa llamada dentro de invitado que se comparte con nosotros. Entonces solo podemos tomarlo de aquí, copiémoslo y pegarlo. Yo solo llamo crear estilo global que fue importado de componentes con estilo y luego especifico algunos estilos globales, específicamente aquí para la cubierta de presupuesto. Aquí lo que hago, utilizo interpolación de cadenas para interpolar ese objeto temático y grab font-family que se define aquí. Recuerdas porque aquí usamos backtest, se nos permite usar interpolación de cadenas, debemos pasar una función que devuelve algún CSS que será interpolado directamente aquí. En el video anterior, utilicé props, justo entonces hice props.theme. Pero como el primer argumento es un objeto que contiene la clave del tema, podemos desestructurar clave del tema directamente dentro de los argumentos. Esto es totalmente opcional. Esto es solo para, digamos, simplificar y acortar esta sintaxis. Yo solo voy a desestructurar el tema de aquí y usar la familia de fuentes temáticas. Nuevamente, el objeto theme se refiere a eso, al objeto que aquí definimos y luego lo pasamos al proveedor de temas. Es por eso que está disponible dentro de nuestra definición de componentes estilizados. Entonces solo usamos estos estilos globales dentro de nuestro marcado, como componente irregular. Ahora, todo esto mágicamente se vuelve disponible. Si volvemos a nuestra app, y si buscamos body tag, déjame encontrarla, puedes ver que se aplicaron los estilos. Tenemos font-family, Roboto sans-serif, tal como definimos en el tema y el resto de CSS que colocamos aquí. Genial. Ahora, ¿cuál será nuestro próximo movimiento? Creo que primero vamos a empezar con la navegación porque tenemos una pequeña cosa que tenemos que discutir. lo que me refiero con esa pequeña cosa, cuando navegamos entre páginas, queremos indicar qué página está actualmente activa. Por ejemplo si estoy en la página principal, me gustaría mostrarle al usuario que este enlace está siendo activo. Si navego para iniciar quiero indicar que el enlace de inicio está activo en este momento. ¿Cómo puedo hacer eso? Si volvemos a los componentes, Nav.sjsx aquí tenemos este sencillo marcado, simplemente mapeamos nuestra matriz de enlaces al elemento LI con el componente link que se importa desde react-router-dom. Cómo podemos de alguna manera comprobar que este enlace que renderizamos aquí está siendo activo. Pero ese router React tiene componente específico y si vamos a la documentación y si nos fijamos debajo de los componentes para NavLink, podemos leer de la descripción que un NavLink es un tipo especial de enlace que sabe si está o no activo. Si leemos más, dice que por defecto se agrega una clase activa a un componente NavLink cuando está activo, así que en definitiva, lugar de usar link, podemos usar el componente llamado NavLink y cuando esté siendo activo entonces la clase activa se adjuntará a ese enlace por defecto. Vamos a tratar de ver. Reemplacé link con navlink de React-router-DOM, vuelvo a mi app, inspecciono el marcado. Miro la etiqueta [inaudible] aquí, y se puede ver que ahora mismo estoy en la página de inicio, y veo que plus active se agregó a ese enlace. Si navego a casa, ahora más activo se está apegando a casa. Así como así, el enrutador React nos dio esa capacidad de diseñar nuestro enlace activo con solo reemplazar enlace por navlink. Tan simple como eso. Puedes leer más lo personalizable que puede ser este NavLink, tal vez basado en algunas condiciones pero en nuestro caso, quiere ser cambiado de alguna manera, la interfaz, por ejemplo si miramos la documentación, podemos usar esta etiqueta de estilo, que puede ser una función que recibe esta es clave activa desde el primer argumento. No vamos a ir más lejos con eso, solo volveremos con nuestro invitado aquí y ya preparé los estilos para nosotros. Déjame explicarte lo que tenemos aquí. En primer lugar, vamos a copiar ese componente estilo de lista de Nav, y lo vamos a colocar en algún lugar en la parte inferior. En primer lugar, necesitamos importar estilo. En la parte superior, vamos a llamar estilo de importación de componentes con estilo. Aquí creamos un elemento UL simple, este con estilos. Ahora sólo vamos a sustituir a UL, por novelista, y todo dentro del marcado interior va a ser estilizado. Nuevamente, creamos estilos puntean un elemento de lista ordenada con estilos y luego también especificamos que cada elemento LI dentro tendrá margen con 10 píxeles. Vamos a probarlo y ver. Volvemos a la app, se puede ver que se cambió el diseño. Si nos fijamos en la clase L, al igual que antes, hemos generado de forma única clase específicamente para ese elemento de la lista Nav, específicamente para ese elemento UL, podemos ver los estilos. Si inspeccionamos el elemento LI , también tiene estilos. Genial, funcionó. Pero ahora ¿qué pasa con los enlaces? Porque no tocamos ningún componente NavLink. Si volvemos aquí al invitado, también tenemos link styled aquí. Déjame copiarlo y te explicaré qué tenemos. Styled components es, digamos lo suficientemente versátil como para que nos permita no estilizar elementos básicos, digamos elementos HTML nativos. También nos permite diseñar otros componentes. Aquí estoy llamando a styled como una función y paso el componente NavLink dentro como argumento. De esta manera, ampliamos componente NavLink con estos estilos que tenemos aquí. De esta manera, al final, este estilo de enlace será solo componente NavLink, pero con esta hoja de estilo CSS, tan simple como eso. Ahora en lugar de usar NavLink aquí, puedo usar con seguridad Link styled o tal vez incluso podamos llamarlo estilo NavLink si quieres, mantengámoslo estilo link. Lo que hacemos dentro, solo especificamos de nuevo color del objeto theme y luego aquí tenemos el ampersand, y luego tenemos.active lo que significa cuando este elemento, entonces este ampersand se refiere a sí mismo, que significa que ampersand aquí se refiere al propio componente NavLink, y luego cuando este componente, cuando este elemento, cuando este NavLink tiene la clase activa, especificamos que habrá coloreado este y luego el otro marcado para lograr el efecto que queremos. Vamos a tratar de ver. ¿Qué tenemos? Volvemos aquí y ya ves que tenemos esta bonita navegación. Cuando navegamos, ahora se indica la página que actualmente se encuentra activa. Genial, sigamos adelante. Si volvemos al invitado aquí, tenemos un momento más aquí llamado Radio Custom. Para estos botones de radio que tenemos aquí, digamos que vamos a crear botones de radio personalizados. Cuando se trata de estilizar entradas como casillas de verificación o radios personalizadas, es un poco alboroto, pero nada realmente complicado. Si vamos al componente de formulario de búsqueda que tenemos aquí, vemos que tenemos dos etiquetas. Dentro de cada etiqueta, tenemos entrada de tipo radio. Si necesitamos crear un elemento de radio Custom que queramos que esté completamente estilizado, necesitamos tomar un poco otro enfoque que ese para hacerlo, digamos reutilizable. Lo que quiero decir con eso es que nos sugiero crear un componente que llamaremos Radio personalizada. Bajo componentes, voy a crear un nuevo archivo llamado Custom radio.jsx, así que aquí voy a crear radio personalizada. Aquí, por ahora , sólo será una etiqueta. Voy a ponerlo a un lado y veamos qué tenemos. Tenemos etiqueta, y dentro tenemos texto, y luego tenemos entrada. Así que podemos simplemente copiar ese marcado aquí y ponerlo en radio personalizada. Ahora bien, ¿qué queremos hacer y qué interfaz queremos darle a ese elemento de radio personalizado? Solo evaluemos cómo exactamente nos gustaría usarlo. Así que ahora mismo creamos etiqueta, pasamos entrada dentro en su lugar. Desde ahora va a ser un componente llamado radio personalizada. Vamos a llamar radio personalizada, y a esa radio personalizada, idealmente, nos gustaría pasar todos los apoyos, todos los atributos que pasamos al elemento de entrada de tipo radio. Entonces solo voy a copiar todo eso, tal vez sin tipo radio porque este componente ya se trata de radio. Vamos a pasar nombre, cheque de valor sin cambios. Pero ¿qué pasa con la etiqueta? ¿Cuáles son nuestras opciones? primera opción es que tal vez podamos pasar esta etiqueta de niños, por ejemplo así. Esta podría ser una opción, pero en cambio, personalmente prefiero pasarla como atributo. Entonces vamos a decir definir un atributo más, un prop más, que vamos a llamar etiqueta y vamos a pasar espectáculos aquí. En lugar de usar hijos, será un componente de cierre automático con un accesorio adicional más llamado label. Ahora bien, ¿cómo podemos manejar todo eso dentro de la radio personalizada? En primer lugar, vamos a especificar apoyos aquí y a partir de los apoyos, vamos a desestructurar. En primer lugar, vamos a tomar ese atributo label, ese apoyos etiquetados que vamos a pasar label, luego dentro del markup, vamos a interpolar esa etiqueta, y ahora nuestro objetivo es tomar todos estos apoyos, el resto de utilería que pasemos, no importa cuáles sean estos props, sabemos que todos ellos serán de alguna manera redirigidos al elemento input aquí. Entonces la pregunta es, ¿cómo podemos hacer eso? No vamos a desestructurar todos los apoyos uno por uno, ¿verdad? No queremos hacer eso. Sabemos que tomamos etiqueta y el resto definitivamente irá al elemento input. En React, dado que el objeto props sigue siendo solo un objeto JavaScript, se aplican las mismas reglas. Podemos usar esta estructuración, podemos usar el operador spread, podemos usar el operador rest. Por lo que se aplican todas estas reglas. Lo que sugiero es que en realidad podamos usar el operador de spread. Podemos llamar a tres puntos aquí y especificar accesorios de entrada. Al usar esta sintaxis aquí, tal vez pueda integrarla directamente aquí. Así que agarramos solo la etiqueta prop aquí, y luego lo que pase, el resto de props estará disponible bajo el objeto de props de entrada. Ahora podemos tomar ese objeto de props de entrada y difundir todos estos props que pasamos usando el operador spread así como así. En primer lugar, usamos el operador resto para dejar decir, acumular todos los props que pasamos a radio personalizada, todos ellos estarán disponibles bajo props de entrada, objeto, y luego esparcimos todos los props, todas las claves dentro de los apoyos de entrada, como props, como atributos al elemento input. Ahora, desde la radio personalizada, vamos a exportar por defecto la radio personalizada, y ahora necesitamos darle estilo a todo eso de alguna manera. Entonces, si volvemos al invitado aquí, tenemos la radio estilizada. Copiemos todo eso y luego colóquelo en la parte inferior. Ahora, primero tenemos que importar styled de componentes styled. Aquí creamos etiqueta de punto con estilo, y yo llamo al componente que regresa como radio estilizada. En lugar de etiqueta, solo podemos usar radio estilizada, y ahora todo va a funcionar mágicamente. Entonces todo ese marcado CSS es solo para crear un botón de radio personalizado completamente estilizado con el tema que tenemos y los colores que definimos dentro de ese tema. Ahora, vamos a guardarlo. Además, necesitamos agregar un marcado adicional aquí, solo un elemento span vacío. Así como así. Se utilizará dentro del marcado, se estilizará. Ahora, volvamos y dentro del formulario de búsqueda, usemos esa radio personalizada. Entonces ahora en lugar de usar una etiqueta y así así, primero vamos a importar una radio personalizada. Importe componentes ROM de radio personalizados desde radio personalizada, así como así, y la radio personalizada se exporta por defecto, lo que no necesito usar exportación con nombre, importación de nombre. Esto está mal. Ahora, solo voy a usar radio personalizada voy a pasar el prop etiquetado y el resto de props serán redirigidos, digamos al elemento de entrada subyacente. Entonces lo mismo voy a hacer con los actores. Ya no necesito esa etiqueta aquí. Yo sólo voy a copiar ese sello de radio personalizado serán actores y los accesorios serán el resto. Una cosa más que noté aquí, especificamos que esta entrada será de tipo radio. Sin embargo, no lo especificamos en ninguna parte que nuestra entrada subyacente también tenga tipo radio. Primero, digamos, todos estos apoyos que pasamos a radio personalizada redireccionan al elemento de entrada subyacente, pero sea lo que pase, podemos sobrescribirlo con los apoyos que definamos aquí por, digamos, incluyéndolos después de hacer el spread. Entonces nuestra entrada será de tipo radio. Cuando especificamos props después de hacer este spread, lo que especifiquemos será sobrescrito por eso. Por ejemplo si aquí a radio personalizada, voy a pasar tipo, digamos texto, esto será sobrescrito por lo que especifique después de este spread. Pero si especifico aquí dentro de radio personalizada, escriba radio antes del spread, el spread anulará, digamos apoyos predeterminados que paso aquí. Pero si se define después, se sobrescribirá. Exactamente las mismas reglas que aplicarías spread dentro de un objeto simple. Entonces difundes algo aquí, digamos accesorios de entrada, y luego lo especificas. El tipo va a ser radio. Básicamente, lo que sea que tengamos en la línea 12 se traduce aproximadamente. Lo que se ve dentro de estas líneas tres a seis, más o menos lo mismo. Especificamos tipo radio, no necesitamos especificar el tipo texto aquí. Ahora solo podemos guardarlo todo. Podemos volver a nuestra app, y vemos que ahora tenemos elementos estilizados, pero nos olvidamos de eliminar la etiqueta aquí y ahora puedes ver que funciona. Si especifico, busca chicos, ahora, en realidad busca actores. Después me cambié a espectáculos y funciona. Entonces todo está bien aquí, y creo que esto será específicamente para este video. Hemos cubierto, digamos las cosas esenciales para el estilo. Creo que logramos hacer mucho. Por ahora, limitémonos con eso y comprometernos todo. Vamos a repasar rápidamente lo que hicimos. En primer lugar, dentro de index.HTML, agregamos ese enlace a la fuente Roberta, establecemos el título en Taquilla, dentro de app.jsx, usamos el componente de tema global que hemos creado dentro del jsx. Así que creamos ese componente global que es solo un envoltorio encima del proveedor de temas y estilos globales a partir de componentes con estilo. La lógica se maneja dentro del tema jsx. Creamos ese objeto temático global que usamos dentro de nuestros componentes de estilo en toda la aplicación. Luego dentro de navs.jsx, hemos usado el componente nav link porque este no es un componente que nos proporciona el link activo. Entonces el enlace activo recibe la clase activa, y luego usamos esa clase activa dentro nuestro marcado CSS para darle estilo al enlace activo. Luego creamos y usamos componente de radio personalizado, que es un botón de radio personalizado que hemos creado nuevamente, con la ayuda de componentes de estilo. También llegamos a conocer este nuevo pequeño truco aquí cuando necesitamos redirigir, digamos, o pasar los props al elemento subyacente usando los operadores resto y spread. Así que en realidad podemos extender un objeto en un elemento y cualesquiera que sean los valores clave que tenga, todos serán considerados como props, como atributos al elemento. Eso sonó como mucho. Vamos a comprometer todo y digamos que instalamos componentes de estilo, entonces vamos a decir que creó haz global con SC. Simplifiquemos con componentes estilizados. creó radio personalizada. Se utilizó el enlace de navegación del enrutador React para diseñar el enlace activo. Suena increíble. Vamos a empujar todo a GitHub y en el siguiente video, vamos a seguir con los estilos. Nos vemos ahí. 86. 30 Estilizar la aplicación p2: Hola otra vez. En el último video, comenzamos a darle estilo a la aplicación usando componentes de estilo. En este video, continuaremos. Si volvemos al invitado compartido contigo, puedes encontrar stylingpart2.empty. Este es el archivo al que podemos referirnos. Tenemos mucho marcado CSS, y escribir todo eso va a ser muy largo y aburrido. Para evitar eso, solo vamos a usar la hoja de estilos existente, así que tú y yo no necesitaremos anotar todo eso nosotros mismos. Vamos uno por uno. Lo que tenemos dentro StylingPart2.md. Primero tenemos Apptittle.jsx y tenemos componente estilo Titlewrapper aquí. Vamos a copiarlo. Volvamos a nuestra app. Vamos a dónde está? ¿Cuál era el archivo? Apptittle.jsx? Vamos a Apptittle.jsx, y aquí en la parte inferior, vamos a usar ese titlewrapper y vamos a importar styled de componentes styled. Ahora en lugar del div de aquí, vamos a usar Titlewrapper, y todo este texto h1 y p dentro se diseñará como de acuerdo a nuestros estilos dentro de div styled aquí. Vamos a guardarlo. Volvamos a la aplicación y veamos. Ahora, boom, tenemos este título bastante centrado. Impresionante. Vamos a continuar. A continuación, tenemos formulario de búsqueda en la lista. Copiemos todo eso, y naveguemos para buscar. En el último video aquí, ya creamos ese componente CustomRadio. Ahora vamos a agregar estilos adicionales, así que toda nuestra forma queda bien. Todos estos componentes estilizados los voy a poner dentro en la parte inferior. No obstante, solo por mencionar, puedes poner estos componentes estilizados en cualquier lugar. Puede crear searchform.style.jsx, y colocar todos los componentes con estilo allí y luego importarlos dentro del formulario de búsqueda. Esto es en caso de que no quieras contaminar el propio archivo del formulario de búsqueda. Debido a que los componentes de estilo, CSS, se necesita mucho espacio. Por si acaso no quieres escribir todo eso aquí, puedes escribirlo en un archivo separado y luego importarlo aquí en el sitio. En nuestro caso, vamos a escribir todo en la parte inferior. Primero necesitamos importar estilo, presiono la inteligencia para abrir el menú desplegable. Aquí importo styled de componentes estilizados como siempre. Ahora, usemos estos componentes. Primero tenemos el estilo del elemento de entrada. Tenemos esa entrada de tipo text, así que solo en lugar de usar input, vamos a usar search input component, styled component que hemos creado. A continuación, tenemos este div estilo RadiosWrapper. Este será un div adicional aquí, estilo o ¿cómo lo llamé? Fue RadiosWrapper. Será solo un div que envolverá nuestras dos radios personalizadas así como así. Al final, también tenemos el contenedor de botones de búsqueda, que será otro div envoltorio adicional para ese elemento button. Podemos usar el envoltorio de botón de búsqueda, y vamos a colocar botón de tipo submit dentro. Esto es lo que escribimos dentro de estilos. Vamos a guardarlo. Volvamos a la forma y ahora solo mira eso. Se ve tan bien hasta ahora. Vamos a tratar de buscar chicos. Puedes ver que nuestra tarjeta aún no está estilizada. Vamos a arreglar eso en el momento. Pero la forma se ve genial. Por cierto, no tenemos ningún marcador de posición aquí dentro de este cuadro de búsqueda. lo mejor vamos a agregarlo. Voy a pasar indicador de marcador de posición al componente de entrada de búsqueda, que en realidad no es como un componente. Sigue siendo el elemento de entrada. marcador de posición será buscar algo. Vamos a tratar de ver. Ahora, se ve mejor. Genial. Vayamos más allá. Además, tenemos un conjunto de archivos que están prefijados con común. Estos son componentes de estilo que se compartirán en múltiples archivos dentro de nuestra aplicación. Se importarán en múltiples otros componentes. Es por ello que tienen el prefijo de común. Significa que dentro de los componentes, probablemente vamos a crear una carpeta llamada common, y vamos a colocar estos componentes con estilo ahí. Primero tenemos flexgrid.jsx. Vamos a copiar eso. Vamos a crear un nuevo archivo aquí llamado flex grid. Dentro de ese archivo solo exportamos el componente flexgrid. Nada especial. Entonces tenemos tarjeta de búsqueda. Este será un conjunto de componentes que vamos a utilizar para darle estilo a la tarjeta de búsqueda. Tanto para espectáculos como para actores, copiamos esa marca. Lo pondremos aquí. Desde aquí exportamos dos cosas, buscar envoltorio de imagen y luego buscar componentes de tarjetas. Usaremos estos dos para diseñar tarjetas de búsqueda. Ahora vamos más allá. Aquí tenemos a StariCon jsx. Vamos a crear este , StariCon, jsx. Esto va a ser interesante. Esto es solo un div de estilo. Sin embargo, aquí vamos a usar un prop llamado active. Vamos a pasar prop activo para cambiar el color de este StariCon. Vamos a tocar eso en un momento volvamos a ese componente, cuando lo vamos a usar. Ahora tenemos una cosa más aquí llamada centro de texto. Aquí no hay nada especial. Sólo un div que centrará el texto en su interior. Lo siguiente que tenemos se llama Pages Show.jsx. Vamos a copiar todo eso. Vamos a Pages Show.jsx. Al igual que antes, vamos a usar todos nuestros componentes de estilo. En la parte inferior, vamos a importar styled de componentes styled. Veamos cómo podemos usar estos componentes. Envoltura de regreso a casa. Tiene estilo div, y en su interior estiliza la etiqueta de anclaje. Aquí tenemos ese enlace que nos lleva a la página principal. Vamos a envolver eso en el componente envoltorio de regreso a casa. Eventualmente se ve algo así. Entonces tenemos show page wrapper, que será el wrapper para todo el marcado aquí. Yo sólo lo voy a usar así. Booms. Mostrar envoltorio de página y la etiqueta de cierre mostrar envoltorio de página. Entonces también tenemos InfoBlock, InfoBlock es este div reutilizable para nuestra información adicional para el show. Aquí estarán los detalles de InfoBlock, las temporadas de InfoBlock y el elenco de InfoBlock. Aquí también tenemos esto. Tenemos un error, los datos se están cargando. En lugar de solo usar div, podemos reutilizar ese componente de estilo de centro de texto que creamos dentro de la carpeta actual. Voy a importar desde componentes, centro de texto común, y voy a importar centro de texto, y en lugar de usar estos divs aquí, voy a aplicar centro de texto. Impresionante. Ahora probemos y veamos si hago clic en alguno de los programas en leer más. Así es como se ve nuestra página en estos momentos. Sin embargo, todavía tenemos datos principales del programa sin estilo, todavía tenemos detalles sin estilo, temporadas y elenco. Si volvemos a ser invitados aquí, tenemos espectáculos elenco, muestra detalle, temporadas, show card. Vamos a darle estilo a todo eso ahora mismo. Empecemos con el reparto. Voy a copiar todo eso y ponerlo dentro de shows cast. En el. En la parte inferior, el estilo se importará de los componentes con estilo y lista de reparto será el envoltorio para el reparto. En el interior tenemos cosas que se estilizarán una lista de nombres de clases. De hecho, podemos usar estos nombres de clase dentro de nuestro marcado y serán estilizados porque esto es lo que especificamos para el div, los estilos. Cast list dentro tenemos este div, que va a ser de nombre de clase cast item. Entonces tenemos pic wrapper, que será nuestro envoltorio de imagen en realidad, yo lo llamo así, y luego tenemos actor, que será este actor de nombre de clase. Impresionante. Ahora bien, si volvemos aquí, no tenemos disponible ningún elenco para este programa. Probemos otra cosa. Tenemos una imagen muy grande. Conoce lo que hay aquí. Vamos a lidiar con eso en un momento, pero ya puedes ver que ahora, nuestro elenco está estilizado. Se ve bastante genial. Ahora, vayamos más allá. Vamos al componente de detalles aquí. Muestra los detalles serán estos detallesrapero. Nada realmente especial aquí dentro del componente de detalles, en lugar de div, solo podemos aplicar DetailsWrapper. Volvamos y veamos los detalles. Nada realmente especial, solo margen adicional aquí. Volvamos a divs. Ahora, tenemos temporadas aquí. Vamos a copiar todo eso. Vamos a las estaciones. En la parte inferior, voy a importar, nuevo estilo a partir de componentes estilizados. Tenemos temporadasrapero. Este es el estilo div, SeasonsWrapper. Vamos a usarlo así. Entonces adentro, ¿qué tenemos? ¿Por qué no se utilizó? Porque olvidé la S. También tenemos SeasonList aquí. Usemos eso para ese div cuando mapeamos el marcado. Aquí dentro, también diseñamos artículos de temporada. Después pasamos clase izquierda, luego pasamos clase derecha. Nuestro ítem de temporada será este div que mapeamos. El apellido será el elemento de temporada como se define dentro del componente de archivo. Artículo de temporada. Entonces nos hemos ido de clase y escribimos clase. Pero aquí, tenemos el siguiente marcado, lo que significa que queremos mostrar temporadas y episodios. Veamos en el lado izquierdo y el resto en el lado derecho. Podemos envolver temporadas y episodios en div. Justo en el div, podemos dar nombre de clase de izquierda. Después al div, le daremos nombre de clase de derecho. fecha de estreno de esta temporada y la fecha de fin de temporada, tal vez podamos ponerlos dentro la etiqueta fuerte para que sea audaz. Intentemos ver qué tenemos al final. Ahora, tenemos esto, veamos. lado izquierdo y el lado derecho son como aquí definimos. Aquí no vemos ninguna audaz, pero ahora, sí vemos porque la tenemos. Inspeccionemos el marcado. Genial. Nuestras fechas ahora son audaces porque están dentro de la etiqueta fuerte. Perfecto. Ahora, sigamos adelante. También tenemos ShowCard aquí. Esto va a ser interesante finalmente. Dentro de ShowCard en la parte inferior, voy a colocar esta sección de acción y sección StarBTN. Permítanme importar estilo de componentes estilizados como de costumbre. Lo primero que me gustaría hacer aquí es lo siguiente. Si volvemos a nuestra app, y si miramos el resumen que sacamos aquí, como recuerdas, recibimos HTML sin formato. Reemplazamos todas las etiquetas HTML, caracteres HTML. Pero parece que solo se está cortando sin razón alguna. Al final, solo podemos agregar tres puntos para hacerlo más, digamos fácil de usar. Podemos o bien aplicar plantilla de cadena así y al final, podemos agregar tres puntos. Pero para hacerlo, digamos menos detallado, podemos simplemente concatenerlo usando el operador plus y nos va a dar exactamente el mismo resultado, pero se ve mucho mejor, creo. Es un mejor ajuste en este caso. Si miramos, ahora, vemos tres puntos al final, lo cual es impresionante. Ahora, usemos los componentes estilizados que tenemos aquí. En primer lugar, no tenemos ninguno, digamos componente de estilo que envolverá nuestro marcador, que proporcionará, digamos estilos para la tarjeta, solo para algo específico como sección de acción y StarBTN. Pero creamos ese archivo de componente de estilo común llamado SearchCard.jsx y en su interior, tenemos tarjeta de búsqueda y envoltura de imagen de búsqueda. Usemos estos dos dentro de ShowCard y usaremos estos dos dentro de la tarjeta de actor más adelante. Voy a importar desde SearchCard común dentro. Especificaré que importo SearchCard e importo SearchImageWrapper. Ahora, SearchCard será el div envoltorio. Entonces el div que envuelve la imagen será en realidad SearchImageWrapper. Esta ActionSection aquí será el div que define nuestra sección de acciones, Leer más en los botones StartMe. Entonces también tenemos aquí StarBTN, que es elemento de botón estilo, que es este. Ahora, vamos a tratar de usarlo. Veamos cómo se ven nuestras tarjetas ahora mismo. Se puede ver que no se ven mal. Todo parece ser válido, pero no tenemos, digamos, ningún icono aquí. El icono que hemos creado antes es este StariCon. Esto es solo un div de estilo con este atributo CSS específico, digamos clip-path. Intentemos usarlo y veamos cómo va a quedar. En lugar de usar los textos IsStarred UnStar me y Star me. Voy a comentarlo. dentro, pasaré componente StariCon, pero también necesito importarlo de StariCon común. Genial. Ahora, veamos. Ahora, tenemos aquí la estrella, que se logra con la propiedad CSS de ruta de clip. Pero puedes ver si hago clic en él, si intento iniciar el show, no pasa nada. Tenemos que hacerlo de alguna manera activo. Necesitamos que los usuarios sepan que este espectáculo es inicio. Anteriormente, usábamos renderizado condicional, Star me y Unstar me. Pero ahora, como tenemos componentes de estilo, podemos aplicar estilos dinámicos muy fácilmente usando interpolación de cadenas dentro de componentes con estilo. Acabo de pasar esta función y especifico. Si tenemos props.active pasado al componente de icono de estrella, por favor, aplique este color amarillo. De lo contrario, por favor, aplique ese color gris blanco. Lo que tenemos que hacer aquí es simplemente pasar el prop activo aquí al componente de icono estrella, que va a ser IsStareled. Cuando isStarred a true, active prop será true, lo que significa que se utilizará dentro del componente de estilo para elegir el color amarillo. Cuando es falso, aquí será el color gris. Vamos a probarlo y a ver. Yo lo guardo todo. Ahora, puedes ver que en realidad es amarillo porque este programa ahora está protagonizado. Si hago clic en él, los estilos serán cambiados. Vuelvo a darle clic, boom, el espectáculo está protagonizado. Bastante impresionante. Fresco. Hemos terminado con ShowCard aquí. Ahora, pasemos a nuestro invitado. Aquí, también tenemos nuestro último componente aquí dentro de los invitados ShowMainData. De hecho, copiemos todo desde aquí. ¿Dónde está? Simplemente se fue volando. Volvamos a ShowMainData. En la parte inferior, tenemos muchos componentes aquí en realidad. Pasemos a la cima y veamos. Primero tenemos MainDataWrapper. Este será el div que envuelve todo, así que abriendo el soporte, cerrando el soporte. Boom, lo tenemos. Luego tenemos image-wrap y luego dentro tenemos el estilo de texto de imagen lo que significa que necesitamos modificar un poco el marcado aquí. Vamos a agregar envoltorio div adicional para la etiqueta image y className para el div será image-wrap. Fresco. Ahora bien, este div aquí que envuelve el resto del marcado será esta sección de datos que tenemos aquí. Vamos a usarlo. Genial. Ahora, también tenemos titular y también tenemos resumen y géneros. Nuestro titular será el envoltorio para el h1 div y span. Es un poco demasiado abstracto, pero el titular será solo la etiqueta h1 aquí, ese div y tal vez icono de inicio que no hemos usado aquí anteriormente. Déjame envolver h1 y div aquí. Tenemos Headline el cual tiene ahora el titulo que tienen el div con rating, pero dentro del div también podemos agregar digamos StariCon. Déjame usar rating.average aquí y de acuerdo a nuestros estilos tenemos el elemento span inside dive, así que realmente podemos envolverlo en un lapso. Entonces aquí podemos usar el StariCon que vamos a importar de StariCon común. Vamos a simplemente llamar componente StariCon y pasamos que va a estar activo siempre. Siempre tendremos el color amarillo. Eventualmente el marcado se verá así. Vamos a probarlo y ver el resultado. Al final tenemos por aquí esta estrella amarilla que siempre será amarilla junto a la calificación. Fresco. No se ve mal. Aquí también tenemos resumen y géneros. Summary va a ser justamente ese div estilizado y géneros también styled div; vamos a usarlo, o ese div envoltorio o tal vez no. Los géneros serán solo el div que suelte el método.map. Vamos a tratar de ver, y ahora solo mira nuestra página lo hermosa que es. Es totalmente receptivo. Puedes intentar cambiar el tamaño de la ventana, acceder a ella en tu teléfono móvil. Se verá genial en todos los dispositivos. Volver a Inicio, tenemos esta página estilizada. Tenemos casi todo estilizado, pero echamos de menos algunas cosas. Por ejemplo, puedes ver esta lista de tarjetas es digamos que no está estilizada en absoluto. Queremos tener una grilla. Veamos qué cosas no diseñamos aquí. No nos estilo show grid, así que volvemos a ShowGrid. Aquí para ese div, vamos a usar ese componente de estilo reutilizable que hemos creado llamado FlexGrid. Sólo voy a usar ese FlexGrid dentro de ShowGrid y dejarme cerrar todos estos componentes porque tenemos muchos archivos abiertos. Vuelvo a ShowGrid. Aquí uso FlexGrid y lo importo de /common/FlexGrid. Impresionante. Vuelvo a la página y ves que todo se ve bien. Es totalmente receptivo y se ve bien. Ahora, ¿qué pasa con los actores? Déjame buscar actores. Se puede ver que los actores están desestilizados porque nos olvidamos por completo de ellos. Vamos a arreglar eso. Aquí vamos a actores. Para ActorCard, vamos a importar este componente SearchCard común de SearchCard común será SearchCard y envolverá todo en una SearchCard si miraremos dentro del archivo SearchCard. También tenemos SearchImageWrapper aquí, así que para el div que envuelve la etiqueta de imagen vamos a usar SearchImageWrapper que también se importa de SearchCard común. Veamos, tal vez sí necesitamos cambiar cualquier cosa de aquí según los estilos pero no creo que no necesitemos hacer eso. También necesitamos usar FlexGrid realmente para hacer una cuadrícula con nuestras tarjetas. Vamos a ActorsGrid, y al igual que antes solo vamos a usar FlexGrid que ha sido importado de FlexGrid común. Ahora, solo mira eso. Se ve increíble. Los actores tienen estilo, los espectáculos son estilo, todo se ve increíble. Tenemos este StariCon, pero si vamos a la página Stareled también vemos que todo se ve bien porque dentro del componente Stareled dentro de la página Stareled, utilizamos el componente ShowGrid reutilizable. Veamos el resto. ¿Qué tenemos aquí? Dentro de otras páginas, también usamos solo algunas cosas. Por ejemplo, dentro de Started, usamos esos divs vacíos sin ningún estilo. Podemos reemplazarlos con componente sensorial de texto que se encuentra dentro de la carpeta común. Esto está en la página con estrellas. En lugar de solo mostrar div no se protagonizaron espectáculos. Vamos a usar TextCenter y este TextCenter necesita ser importado de Componentes/Common/TextCenter'. Así como así. En lugar de ese div vamos a usar TextCenter, muestra nuestro TextCenter cargando. En todas partes está TextCenter. Lo mismo nosotros probablemente vamos a hacer. Déjame ver. Dentro de casa JSX en lugar de mostrar este div y div sin resultados, solo vamos a mostrar TextCenter IntelliSense importado de TextCenter común, sin resultados TextCenter, y creo que esto es todo. Déjame ver. Si voy a casa y escribo algo completamente galimatías, entonces definitivamente no tenemos resultados. Aquí vamos a tener este mensaje, sin resultados. Si vamos a Starred y si vamos a borrar el almacenamiento aquí y refrescamos la página, veremos ese mensaje No se protagonizaron espectáculos. Por último, nuestra aplicación ahora está completamente estilizada. Tenemos de todo y nos encargamos de cada página dentro de la app. Genial. Ahora vamos a comprometer todo aquí. ¿Permitiría? Fue un largo viaje en este video. El mensaje de confirmación va a ser estilizado, toda la aplicación usando componentes con estilo. Impresionante. En el siguiente video, agregaremos solo un poco de digamos cosas de estilo más pequeño a la aplicación. Para hacerlo aún más interactivo, esto va a ser interesante. Nos vemos ahí. 87. 31 Estilizar la aplicación p3: Hola, felicitaciones por diseñar toda la app. Ahora tenemos todo en su lugar. No obstante, podemos mejorar algunas partes, por lo que se verá un poco mejor, en mi opinión. En primer lugar, lo primero me gustaría mencionar es que, cada vez que buscamos tarjetas, simplemente aparecen sobre nosotros. ¿No sería bueno proporcionar alguna animación cuando aparecen estos elementos, por ejemplo, la animación de desvanecimiento? En el registro de NPM, puede encontrar ese paquete llamado react fade in, que es solo un componente que importa. Lo especificas igual que nosotros usamos los componentes de estilo. Muy parecido a eso y luego proporciona animación para sus elementos hijos. Se desvanecen y se desvanecen con el retraso. Este paquete es muy sencillo de usar, sin embargo, sigue siendo un paquete. Quiero decir que para un caso de uso tan simple, en realidad puede que no necesitemos un paquete en absoluto. Simplemente puedes instalarlo y no piensas en escribir ningún CSS, pero menos paquetes tienes, mejor porque tiene menos dependencias en tu app. Primero quería usar ese paquete, pero luego decidí que en realidad podemos escribir solo un marcado CSS muy pequeño que logrará un efecto muy similar. Si volvemos a la esencia aquí, estilizando el archivo MD de la parte tres puntos, aquí puedes encontrar eso, digamos cuadrícula de banderas mejoradas que ya tenemos dentro cuadrícula flex común jsx con esta animación y fotogramas clave. Déjame copiar todo eso y solo reemplazarlo. Ahora, siempre que se monte un componente de rejilla flexible, tendrá esta animación de desvanecimiento, según lo definen estos fotogramas clave. Simplemente traerá la capacidad de cero a uno y lograremos un efecto muy similar lo que hace react fading, pero sin la demora. Vamos a tratar de ver. Ahora cada vez que busco actores o espectáculos, igual que cada vez que tengo el componente flex grid usado dentro de alguna parte, verás que se desvanece en la animación estando en juego, ya sea para espectáculos, ya sea para actores, ya sea en la página de inicio. Efecto muy similar, pero sin ninguna dependencia. También debes considerar que en tu futuro, cuando vayas a instalar algo desde npm, primero, hazte una pregunta. ¿Realmente necesitas esa dependencia o puedes hacerla tú mismo? Esto es muy importante cuando vas a trabajar en proyectos reales. Genial. Ahora bien, lo siguiente que me gustaría añadir es que, cada vez que iniciamos un espectáculo, ahora mismo, nuestra estrella que tenemos aquí simplemente se vuelve amarilla. Esto no está mal, pero podemos hacerlo más fácil de usar y podemos proporcionar, digamos, una animación cuando empezamos en botón, cuando iniciamos ese espectáculo, la estrella en realidad, digamos que de alguna manera se está animando. Si volvemos a esto aquí, también podemos encontrar esto bajo el estilo de la tercera parte MD que muestran la tarjeta JSX con componente de estilo StarBTN mejorado. Vayamos a espectáculos, show card. Aquí tenemos ese StarBTN, si lo comparamos. Aquí definimos otra clase llamada Animate y tenemos algo nuevo aquí. Vamos a copiarlo y vamos a inspeccionar qué tenemos. En primer lugar, definimos esa clase de animación, que también tiene animación como la definen esos fotogramas clave pero también tenemos aquí esa interpolación y tenemos aquí el icono de estrella, lo que hace. Ya sabes que dentro del marcado CSS, dentro del componente styled, podemos especificar similar a SAS, el anidamiento de elementos. Aquí, interpolé icono de Inicio y significa que lo que sea que interpolé aquí realmente se resolverá a los componentes de estilo existentes como engranaje de referencia. Dentro de esa clase animada, siempre que este elemento StarBTN tenga clase animada, dentro de ese elemento starBTN, desplazamos nuestro icono. Siempre que haya StarBTN, tendrá clase activa, tendrá clase animada, por favor estilo componente icono estrella, que se utiliza dentro de él. De esta manera podemos resolver comenzar el estilo de icono específicamente. Ese elemento, siempre que StarBTN tenga alguna clase. Vamos a tratar de ver. Nos gustaría darle a ese nombre de clase de componente StarBTN animar cada vez que se inicia el programa. Que solo va a especificar por favor cuando se inicia el show, por favor anexa la clase de animación. Vamos a tratar de ver. Volvamos a nuestra aplicación y acabas de ver esa animación. Siempre que hago clic en el programa, ahora se está incrementando y disminuyendo de tamaño. Funciona. Se ve bien hasta ahora, pero si vamos a página de inicio y si refresco la página seguirás viendo la misma animación y no hice nada. Esto se debe a que cuando el componente se monta, esta clase de animación se está agregando porque nuestro show ya está comenzando y vemos la animación. Esto no está mal, pero este no es exactamente el comportamiento que queremos lograr. Solo queremos ejecutar la animación cuando el componente está realmente arrancado, no cuando el componente está siendo montado. Para lograr el resultado que queremos, vamos a introducir un nuevo gancho llamado use ref. ¿Qué es eso? En primer lugar, vamos a importarlo desde React. Este es uno de los ganchos incorporados que necesitarás durante tu futura carrera de desarrollador. ¿Qué es este gancho? Usar ref es solo un gancho al que llamas así y este gancho te devuelve una referencia. Una referencia que luego especifique, o digamos que asocie esa referencia con algún elemento. Vamos a tratar de ver. Por ejemplo, queremos darle una referencia a ese StarBTN. Llamemos a esta referencia como ref de StarBTN, así como así. Ahora bien, para que asociemos esta referencia, así que acabamos de llamar al gancho, obtuvimos nuestra variable ref starBTN, pero aún no está asociada con ninguno de estos elementos. Para hacer eso, necesitamos pasar a starBTN, un prop, en realidad un atributo llamado ref y a esa ref, especificamos, starBTN ref. Simplemente puedes pasar ref a tus componentes personalizados, digamos. Si tengo esto, déjame ver por ejemplo, título de la app que utilizo dentro del layout principal, no puedo simplemente pasar ref y luego especificar otra cosa. Ref se está pasando solo a elementos HTML nativos subyacentes. Si quisieras pasar ref a tus componentes personalizados, éste debe ser manejado correctamente, y vamos a hablar de eso en el futuro. Pero por ahora, nos vamos a limitar con elementos nativos, ya que StarBTN es básicamente un elemento HTML nativo, porque bajo el gancho, sigue siendo solo un botón. Es un componente creado por biblioteca de componentes con estilo y maneja las referencias correctamente. Básicamente, lo que pase aquí, vamos a ser redirigidos al elemento nativo HTML botón subyacente. Pasamos ref como StarBTNRef. Ahora bien, ¿qué podemos hacer con eso? ¿Por qué haríamos eso? Intentemos refacturar ese manejador OnClick aquí que pasamos a StarBTN. En lugar de pasar una función que llame a onStarMeClick, vamos a crear una función llamada handleStarClick que vamos a crear aquí. HandleStarClick inside, que va a llamar a onStarMeClick y pasar ID dentro. Pero también, vamos a registrar la consola StarBTNRef y veamos qué tenemos. Si abrimos una consola, cada vez que haga clic aquí, veremos el objeto con una sola propiedad llamada current. Siempre que creas una referencia así, siempre tienes un objeto pase lo que pase, con la clave actual. Se puede ver que la propiedad actual apunta al elemento button, al elemento HTML llamado button, no llamado button 2, solo al elemento button subyacente. Esto es en realidad equivalente a escribir document.getElementById, por ejemplo. Cuando agarras algún elemento por ID, este es el equivalente. En React, siempre que necesites acceder al elemento subyacente directamente con la API DOM, en lugar de usar document.getElementById, document.getElementByClassName, por otra cosa, usarías referencias, y luego usarías starbtnref.current y luego obtendrías tu elemento. Lo guardo, Starbtnref.current. Nuevamente, hago click en el botón, verás ahora tengo este elemento, que significa que solo puedo usar lo que quiera aquí y jugar con él usando la API DOM. Pero es importante asociar elementos y pasar la ref. Porque si no hago eso, mi referencia estará vacía. Déjame tratar de ver. Refresco la página. Doy click, ahora mi starbtnref.current me da undefined porque ahora mi referencia esta vacia. No se asoció con nada. Siempre que uses ref, no olvides pasar el atributo ref. Desde ahora tenemos StarbtnRef.current apuntando al elemento DOM subyacente, podemos usar la API DOM para manipular nuestra lista de nombres de clase. Aquí solo voy a crear una variable llamada, digamos StarBtnElement. Será Starbtnref.current. En primer lugar, nuestra corriente, como acabas de ver, puede ser indefinida, así que aquí solo vamos a hacer una comprobación segura. Si StarbtnRef.element es falso, por favor, salga de esa función. De lo contrario, continuamos y decimos, si el show es estrellado, en este caso, por favor haga lo siguiente. Acabo de notar que se llama inicio en lugar de estrella. Déjame cambiarle el nombre a StarBTNElement. StarbtnElement.classlist.remove (animar). De lo contrario, llamamos star.btnelement.classlist.add (animate). En primer lugar, la lógica no se suma aquí. En primer lugar, veamos si esto funciona y luego vamos a discutir eso. Siempre que hago clic, puedes ver que mi programa está siendo protagonizado y veo la animación solo cuando hago clic aquí. Pero si vuelvo a protagonizar, todavía tengo esa animación. Esto se debe a que aquí uso este className. Déjame quitarlo. Ahora vamos a tratar de ver. No se ejecuta ninguna animación en este momento. Déjame volver a la página principal. Pero cuando estoy tratando de protagonizar el espectáculo, se puede ver que la animación está ahí. ¿Por qué usamos esta lógica aquí? Para cuando se ejecute esta función, IsStarted seguirá siendo el estado anterior. Simplemente léelo como el código está escrito aquí. Nuestro programa está actualmente protagonizado. Cuando hacemos clic en él, no queremos ejecutar ninguna animación. Cuando nuestro programa está actualmente protagonizado y cuando lo desestarizamos, eliminamos la clase animada. No queríamos hacer ninguna animación aquí. Pero si nuestro programa es actualmente sin estrellas, esta otra condición se dispara. En este caso, agregamos la clase de animación para proporcionar la animación. De esta manera, mediante el uso de la API DOM, mediante el uso del aro UseRF, podemos manipular los nombres de las clases directamente, digamos imperativamente usando la API DOM en lugar de usar la interfaz className que nos proporciona React. Así como así, podemos agregar animación y conocimos el nuevo gancho llamado UseRef. Nuevamente, para resumir rápidamente, UseRef se puede utilizar como referencia para elementos HTML nativos subyacentes en caso de que desee obtener acceso a la interfaz DOM de ese elemento, algo así. Vamos a agregar todo al escenario, y vamos a comprometernos. Primero, en realidad no usamos el paquete React Fade-In. Utilizamos nuestro CSS simple para lograr un efecto de fade-in muy similar. Luego, en lugar de usar solo className para proporcionar animación para el elemento estrella, usamos el gancho UseRef para obtener acceso al elemento DOM subyacente. Entonces usamos esa API DOM, propiedad ClassList del elemento DOM para agregar y eliminar la clase animate imperativamente para agregar o eliminar la animación, que se define dentro de nuestro componente styled. Ahora, podemos comprometerlo y decir, agregó animación a FlexGrid. Digamos que se agregó animación de fade-in a FlexGrid. Se agregó la animación StarBTN, o digamos que se agregó animación a escala a StarBTN. Impresionante. Eso es todo por ahora. Te voy a ver en la siguiente. 88. 32 implementaciones en páginas de Github: Hola ahí. En este video finalmente desplegaremos Taquilla, así que al final tendremos URL públicamente disponible que podremos compartir con nuestros amigos. En el proyecto anterior, en Tic Tac Toe, utilizamos un servicio llamado Search.SH, esta vez vamos a probar algo nuevo. El hosting que vamos a usar va a ser GitHub Pages. ¿Por qué GitHub Pages y no Buscar? En primer lugar, son muy similares, ambos se utilizan para alojar archivos estáticos, pero queremos explorar, queremos probar cosas nuevas, queremos ver alternativas. Al final podrás comparar lo que más te gusta, Páginas de GitHub, o Buscar, o tal vez incluso algo más. Vamos. En primer lugar vamos a navegar a la documentación de Create React App. Si hacemos clic en “Comenzar”, a la izquierda podemos buscar la sección de despliegues. Dentro de la sección de implementación podemos buscar Páginas de GitHub. Lo que vamos a hacer solo seguiremos ese sencillo tutorial paso a paso. Lo primero que nos pide hagamos es abrir package.json, y agregar el campo homepage para tu proyecto. Hagámoslo. Simplemente copiaré homepage, open package.json, en cualquier lugar de package.json vamos a agregar homepage. Pero aquí tenemos que cambiar algunas cosas. En primer lugar, mi nombre de usuario.github.io. Mi nombre de usuario debe ser reemplazado por tu nombre de usuario en GitHub. Voy a tomar el mío. Mi aplicación necesita ser reemplazada por tu nombre de repositorio en GitHub. En mi caso, será box-office-app. Eventualmente la URL para mí se verá así. Muy similar, debe ser para ti también. Yo guardo paquete.json, vuelvo al tutorial. Veamos el paso número 2. Entonces necesitamos instalar un paquete llamado gh-pages, y luego agregar un script deploy a package.json. Primero instalemos la dependencia. Yo sólo voy a copiar el comando. Voy a detener mi app y luego ejecutar el comando de instalación. Mientras se está instalando veamos qué necesitamos empaquetar.json. Necesitamos agregar dos scripts más, implementar y pre implementar. Vamos a copiarlos. Volvamos a package.json. A estas alturas ya tenemos instalada la dependencia. Vamos a navegar a los scripts, y al final agreguemos pre-deploy e deployment. No necesitamos ninguna ventaja que se copiaron, guardamos y aquí lo que vemos. Tenemos definido el script deploy y luego tenemos pre-deploy. Npm digamos que es lo suficientemente inteligente como para entender que implementación previa debe ejecutarse antes del script de implementación. Así que cada vez que vamos a ejecutar el script deploy, se ejecutará predeploy. Predeploy construirá la aplicación, compilación de la aplicación se producirá bajo la carpeta de compilación, y luego especificamos que por favor, despliegue la carpeta de compilación aquí, para que la compilación que vea en la línea 35 se refiera a esa carpeta de compilación dentro de la raíz de nuestro proyecto. Entonces si vamos más allá en el tutorial, si en su lugar estás implementando en una página de usuario de GitHub, ten en cuenta que este no es nuestro caso. tercer paso es simplemente ejecutar npm run deploy. Vamos a tratar de hacer eso. Ahora ya podemos hacer npm run deploy. Veamos la salida. Primero vemos npm run build, esto viene del script predeploy, luego tenemos el gh-pages menos el comando build, y ahora dice publicado, pero no tenemos ninguna URL, ¿ a dónde tenemos que ir? La página de inicio que especificamos en package.json es realidad la URL que necesitamos visitar para acceder a nuestra aplicación. Vamos a copiar esa URL. Vamos a abrirlo en una nueva pestaña. Pero en cuanto naveguemos por aquí, veremos que no se encuentra, es 404. Entonces, ¿qué pasa? Investiguemos. Si volvemos a nuestro repositorio, aquí hay una cosa que no mencioné anteriormente, es que GitHub Pages está disponible forma gratuita solo para repositorios públicos. En mi caso, el repositorio es privado. Está marcado aquí en la esquina superior izquierda, Privado, así que para poder usar GitHub Pages de forma gratuita, necesito asegurarme de que este repositorio sea público. Vamos a Configuración, y en la Configuración vamos a cambiar visibilidad de nuestro repositorio de privado a público. Vamos a la página de Configuración, nos desplazamos hacia abajo hasta la parte inferior, y aquí bajo Zona de peligro, cambiamos la visibilidad del repositorio, cambiamos a pública. Sí, quiero hacerlo público. Sí, estoy seguro. También podría solicitarte tu contraseña, eso está bien. Ahora mi repositorio se hizo público. No obstante, si intentamos acceder de nuevo a la URL, seguirá siendo la misma, no encontrada. Necesitamos instruir hosting, necesitamos instruir a GitHub Pages que queremos publicar nuestra aplicación ahora. En primer lugar, ¿cómo funciona? Si vamos a la página principal del repositorio aquí, veremos dos sucursales ahora disponibles. Anteriormente sólo era uno. este momento si hacemos clic en esas dos sucursales veremos la rama gh-pages aquí. Si hacemos clic en esa rama, verás todos los archivos que tenemos dentro de la carpeta de compilación. Básicamente el comando deploy aquí, lo que hizo, usó esa carpeta de compilación, creó una nueva rama en nuestro repositorio, y subió todos los archivos de la carpeta de compilación a la sucursal de gh-pages en GitHub. La forma en que funciona el alojamiento de GitHub Pages es que toma una de tus sucursales en tu repositorio y todos los archivos que se encuentran aquí están alojados en los servidores de GitHub. De esta manera somos capaces de alojar archivos que se encuentran dentro de nuestro repositorio. Para configurar correctamente las Páginas de GitHub para que apunte el alojamiento a esa rama específica de gh-pages a estos archivos, nuevamente necesitamos ir a la página de Configuración de nuestro repositorio. la izquierda buscamos la sección Páginas, página Páginas, y aquí especificamos, que, bien, fuente para nuestro despliegue se desplegará desde una sucursal. Esto es por defecto, esto es lo que deberías tener por ahora, y para la sucursal especificas que por favor aloje nuestros archivos desde la rama gh-pages. Hacemos clic en “Guardar”, y justo después de que se active ese despliegue. Ahora tardará un par de minutos, uno o dos minutos en desplegar todos tus archivos desde la rama gh-en tu repositorio hasta el hosting. Si vamos a Acciones aquí, esa pestaña Acciones en tu repositorio, aquí verás ahora esta ejecución de flujo de trabajo. Si haces clic en eso, verás el progreso de tu implementación. Una vez que esté terminado verás una marca verde aquí, significa que tu app será publicada aquí, bajo esa URL. Esperemos hasta que esté hecho y luego me pondré en contacto contigo. Ahora parece que nuestra app fue desplegada. Se puede ver que todo es verde. Ahora también tengo esa URL que apareció aquí. Si hago clic en eso esto es lo que veo. En primer lugar, mi aplicación tal como estaba anteriormente está disponible bajo la misma URL que especificas en la página de inicio, debajo de la clave homepage dentro de package.json. Pero si accedemos a él, vemos Not Found. ¿Por qué es eso? El caso es que en realidad se desplegó pero por alguna razón dice no encontrado, y definitivamente viene de nuestra aplicación, porque si inspeccionamos el marcado, esto se asemeja a nuestra aplicación, lo que tenemos dentro de index.html, nuestro esqueleto. Dentro de público, tenemos ese esqueleto. Es nuestro. Tenemos la misma cabeza, tenemos lo mismo todo. Pero, ¿qué pasó? El caso es que, si volvemos al tutorial dentro de la documentación de Create React App, tiene esta nota llamada Notes, sobre el enrutamiento del lado del cliente. El problema es que el alojamiento de GitHub no está realmente configurado para manejar aplicaciones del lado del cliente, para no manejar aplicaciones de una sola página que usan enrutamiento del lado del cliente. En realidad puedes leer más información aquí dentro de la documentación oficial. Vamos a usar algo llamado HashRouter, de React Router. Esta es una de las soluciones que aquí se ofrecen . Hagámoslo. Volvemos a la app, abrimos código, App.jsx. Aquí usamos BrowserRouter, que se importa desde React Router dom. En lugar de eso podemos usar algo llamado HashRouter, y eso es todo. El resto estará en React Router dom. No vamos a necesitar pasos adicionales para eso. Para entender lo que hace, primero volvamos a ejecutar el servidor de desarrollo local, npm run start. Esto es lo que tenemos ahora. En primer lugar, nuestra aplicación es ahora, aunque se sirve localmente, aunque se sirve localmente, está disponible bajo el prefijo /box-office-app, sea cual sea el prefijo que especifiquemos dentro la página de inicio en el paquete JASON. La aplicación Create React es lo suficientemente inteligente como para entender que podemos implementar bajo el prefijo de la aplicación de taquilla. Es por ello que se guarda aquí. Pero cuando sirves aplicaciones bajo prefijo, debes considerarlo como tu URL base. lo que me refiero con eso, si buscamos, muestra por ejemplo, aquí si pasamos el cursor sobre leer más, vamos a esa página /show/show ID. Cuando podamos estar en el alojamiento de GitHub, nuestra URL se verá así , /box-office-app/show/show ID. Pero no vamos a tener ese prefijo, igual que tenemos aquí en host local. Será problemático porque de lo contrario no se encontrará nuestra página. Lo que quiero decir con eso es que primero implementemos la aplicación y la verás tú mismo, y luego vamos a arreglarlo con una adición muy pequeña a nuestro código existente. Acabo de ejecutar de nuevo el script de despliegue. De nuevo construye mi app y luego vuelve a publicar en GitHub Pages. Si volvemos al repositorio en la pestaña Acciones, volveremos a ver otra ejecución de flujo de trabajo. Solo esperamos hasta que se despliegue y luego vamos a checar. Ya está desplegada. Volvamos a la aplicación. Si volvemos a nuestra app, seguiremos viendo no encontrado. Pero si me refresco, ahora tenemos la aplicación. Se ve perfectamente bien. No obstante, si nos fijamos en la URL, ahora tenemos ese hash aquí. Se utilizará para manejar correctamente el enrutamiento del lado del cliente cuando implementemos en GitHub Pages. Pero aún así tenemos un problema más que acabo de mencionar anteriormente sobre el enlace, sobre este botón Leer más. Si hago clic en ese botón, verá que navegamos a /show/show ID. No tenemos el prefijo de la app de taquilla, y por eso, tenemos 404. Para resolver el problema, primero tenemos que entender por qué sucede. Vamos a leer más y a marcar. Esto serán componentes, espectáculos, show card. Aquí usamos una etiqueta de anclaje simple que apunta a /show/show ID. Eso está bien, y va a funcionar. Funcionará si nuestra aplicación fue servida bajo la ruta no bajo el prefijo. Tenemos que arreglarlo de alguna manera. Una solución ingenua es solo ingresar manualmente cualquier prefijo que tenga aquí. Funcionará, pero esta no es una buena solución. Tenemos que resolver de alguna manera automáticamente a cualquier prefijo que tengamos aquí. React Router se encarga de eso. En el pasado, reemplazamos el componente de enlace que usamos de React Router con esa verificación de anclaje porque realmente no necesitábamos ese componente de enlace. No obstante, ahora lo volveremos a recuperar. Voy a importar enlace de React Router dom. Entonces en lugar de etiqueta de anclaje, voy a usar un enlace de nuevo, una vez más. En lugar de href, voy a especificar a, y voy a mantener blanco objetivo y atributos de relación. De esta manera seguiremos teniendo el mismo enlace igual que antes, pero esta vez el componente link de React Router dom se encargará del prefijo. Se resolverá automáticamente a la URL correcta. Ahora, intentemos ejecutar nuevamente el script de implementación, reimplementemos la aplicación y veamos el resultado final. Te veo una vez que esté desplegado. Esperé otro minuto. Aquí está mi tercer despliegue que se acaba de publicar hace un minuto. Volveré a mi app. Voy a refrescarme. Busco espectáculos y ahora si hago clic en Leer más, ahora mi URL se resolvió correctamente porque ahora la manejaba la biblioteca React Router. Así como así, pudimos implementar nuestra aplicación. Felicidades. Ahora, volvamos a nuestro código y cometamos todo. En primer lugar, instalamos gh pages library con el fin de implementar en GitHub Pages, el campo homepage en el paquete JSON especifica dónde exactamente se implementará la aplicación. Nuevamente, desplegamos la carpeta de compilación que es producida por el comando npm run build. Ahora, también reemplazamos el enrutador del navegador enrutador hash porque GitHub Pages no maneja correctamente el enrutamiento del lado del cliente. Una forma de solucionar ese problema es usar el enrutador hash como se sugiere dentro de la documentación de la aplicación Create React. Luego también cambiamos una etiqueta de anclaje simple al componente de enlace de React Router dom porque necesitamos resolver el prefijo una vez que nuestra aplicación se implementa en GitHub Pages. Agreguemos todo al escenario y vamos a comprometernos y digamos implementar, implementar la aplicación en GitHub Pages, usar HashRouter, usar link en lugar de etiqueta de anclaje nativa. Fresco. Empujo todo para que domine, vuelvo a mi repositorio por si acaso para asegurarme de que todo esté desplegado. Mi último cambio, hace 10 segundos. Tengo segunda sucursal llamada gh pages. Siempre que ejecutes npm run deploy, actualizará GitHub Pages y actualizará los archivos alojados en tu URL que puedes usar para compartir con tus amigos. Una cosa más simple que agregaría aquí es que en realidad podemos tomar esa URL donde vive nuestra aplicación. Vamos a visitarlo una vez más. Sí, efectivamente está aquí. Podemos agregar esa URL a nuestra sección Acerca de en la página del repositorio. Hago clic en el signo de Configuración aquí. Debajo del sitio web, agrego el enlace, hago clic en Guardar cambios. Ahora boom, aparece aquí. Esto es solo para que pueda acceder fácilmente a su aplicación en el futuro. Eso es todo por ahora, nos vemos en la siguiente. 89. 33 PWA (aplicación web progresiva): Hola otra vez. En el último video, finalmente desplegamos taquilla para vivir ambiente. Esta vez, vamos a hablar de trabajadores de servicios. Como recuerdas en el primer video cuando creamos ese proyecto, tenemos al trabajador de servicio, registro de trabajador de servicio, así como teníamos el punto de registro de trabajador de servicio en el registro y te dije que vamos a hablar de eso más adelante. Ahora bien, este es el momento. Ese trabajador de servicio es necesario para hacer nuestra aplicación, para hacer taquilla en la aplicación web progresiva. ¿Qué es una aplicación web progresiva? Una aplicación web progresiva es cualquier otra aplicación web, cualquier otro sitio web que siga una lista de cosas específicas y cuando la aplicación DevUp del sitio web cumple con esa lista de opciones, este sitio web se convierte en una aplicación web progresiva. Significa que la aplicación se vuelve disponible sin conexión. La aplicación se puede instalar como la aplicación móvil real, ya sea que esté en el escritorio o en un dispositivo móvil. La pregunta aquí, ¿cuáles son estas opciones que hacen de un sitio web una aplicación web progresiva? En el navegador Chrome, si vas a herramientas para desarrolladores de Chrome, si expandes esta sección a la derecha, puedes ir a la sección faro. Lighthouse es una herramienta incorporada en el navegador Chrome. Nos permite evaluar el rendimiento del sitio web midiendo su velocidad, tiempo de lote y algunas métricas diferentes. Aquí bajo categorías, tenemos esta comprobación progresiva de aplicaciones web. Hagámoslo ahí y luego hagamos clic en Analizar carga de página, y veamos qué va a pasar. Solo tardará un par de segundos hasta que audite el sitio web y ahora tenemos que tenemos casi todo perfecto green, pero no estamos realmente interesados en ninguno de esos. Si lo eres, puedes ir fácilmente uno por uno, expandir diferentes secciones y leer lo que se puede mejorar, qué se puede cambiar. A lo mejor no necesitas cambiar nada pero en la parte inferior, tendrás sección PWA, app web progresiva. Una lista de cosas que ves aquí es básicamente lo que el sitio web necesita seguir para convertirse en una aplicación web progresiva. En primer lugar, aquí no tenemos algunas cosas. Nuestra aplicación no es instalable, por lo que para que nuestra aplicación sea instalable, necesitamos introducir un trabajador de servicio. ¿Qué es el trabajador de servicios? Trabajador de servicio en realidad es más fácil cuando voy a visualizarlo. Tenemos el sitio web aquí. Nuestro sitio web aquí a la izquierda. Entonces a la derecha, tenemos solicitudes de salida. Así como así. Tal vez inspeccionemos eso nosotros mismos así que vamos a la pestaña de red y cuando refresquemos la página, vemos una lista de solicitudes así que este es nuestro navegador hace una solicitud al servidor de páginas de GitHub para obtener el índice HTML, para obtener archivos CSS JavaScript del servidor de alojamiento. Un trabajador de servicios es solo un guión. Vive dentro del navegador, en algún lugar dentro del navegador, fuera de nuestro trabajador de servicio de aplicaciones y lo que hace, simplemente intercepta todas estas solicitudes, solicitudes salientes y hace algo con él. En nuestro caso, service worker será solo un proxy que interceptará todas estas solicitudes salientes y las pondrá dentro del almacenamiento de caché dentro del navegador así que próxima vez que se acceda a estos archivos, en lugar de dejarlos pasar, service worker utilizará almacenamiento en caché, recuperará todas estas solicitudes, todos los archivos que fueron recuperados previamente desde el almacenamiento de caché, y servirlos a nuestra página web. De esta manera, nuestra aplicación puede estar disponible fuera de línea, que significa que cualquiera que sea la solicitud que se envíe, trabajador del servicio los interceptará. Se verificará la caché y si estas solicitudes están presentes en la caché, serán atendidas desde la caché por service worker. Para resumir rápidamente, un service worker es solo un script que se encuentra en algún lugar dentro del navegador. Es solo un proxy que intercepta las solicitudes salientes desde el navegador. Algo así. Si volvemos a nuestra aplicación, vemos que tenemos el archivo JS del trabajador de servicio aquí. Este es el script en sí, el propio service worker, que se ejecutará dentro del navegador, fuera de nuestra aplicación. Este archivo que ves aquí se ubicará en algún lugar dentro del navegador. Pero la pregunta es, ¿cómo podemos manejarlo? Cómo podemos realmente hacer algo con eso. Antes de que podamos responder a esa pregunta, tenemos cuadro de trabajo aquí. Qué son estos y si miramos dentro del paquete Json, tenemos muchas dependencias de caja de trabajo. Estas son básicamente solo bibliotecas que nos permiten de alguna manera, escribir fácilmente alguna lógica dentro del script de service worker. puede ver que este script se generó automáticamente al crear la aplicación React y la lógica que se escribe aquí, simplemente intercepta todas las solicitudes y las pone dentro del almacenamiento en caché. Realmente no necesitamos pensar mucho en eso. no vamos a escribir Aquí no vamos a escribir nuestra propia lógica para service worker, vamos a usar la lógica existente, y bastará con almacenar en caché todo y el word box es solo un conjunto de funciones que importamos y usamos para lograrlo. Como ese archivo fue descubierto generado por create React app, no vamos a modificarlo, no nos interesa. Esto nuevamente será suficiente. Ahora también tenemos registro de trabajadores de servicio. Para que el navegador entienda que queremos de alguna manera usar ese service worker JS, necesitamos registrarlo dentro del navegador porque si solo lo vamos a poner como parte de nuestra aplicación, no pasará nada así que necesitamos registrar de alguna manera ese service worker dentro de nuestra aplicación y ese registro de service worker tiene dos funciones aquí. La primera función se llama registro, que se ha exportado desde aquí y segunda función se llama unregister. Nuevamente, toda esta lógica se genera automáticamente al crear la aplicación React, y nuevamente será suficiente para nuestro caso de uso. La función de registro registrará al trabajador de servicio JS cuando se ejecute nuestra aplicación y la función de cancelación de registro dará baja al trabajador de servicio existente dentro de nuestra aplicación. Si miramos dentro del índice jsx, aquí tenemos entrada todo como trabajador de servicio desde el registro de trabajador de servicio. Significa que bajo registro de trabajador de servicio objeto de importación, tenemos dos funciones, registrarse y darse de baja y todo el tiempo en realidad fue dar de baja para nosotros porque no estábamos interesados en trabajador de servicio. Para poder registrar a un trabajador de servicio, necesitamos llamar a la función de registro. Sin embargo, si vas a usar register, funcionará en ambos entornos cuando vayas a desarrollar localmente y cuando se implementará en vivo digamos que el alojamiento de páginas de GitHub. Pero como va a usar el almacenamiento en caché y la estrategia de almacenamiento en caché aquí es agresiva, significa que almacenará en caché todo así que lo que sugiero hagamos es verificar primero si actualmente estamos dentro del desarrollo local, no queremos llamar a esa función de punto y registro. Pero si estamos dentro del ambiente vivo, entonces por favor sí, llamó a la función de registro. ¿Cómo podemos comprobar eso y cómo finalmente podemos ver cómo funciona esto? Dentro de la aplicación, tenemos acceso a algo llamado process.env. Esto es solo un conjunto de variables de entorno a las que tenemos acceso. Las variables de entorno son variables que se establecen globalmente por el entorno donde se ejecuta nuestro código. Vamos a probar y consola log process.env, y si escribo punto tengo intellisense aquí, tengo nodo ENV. Si vuelvo el mouse, en realidad se puede ver que tiene tres valores potencialmente diferentes: desarrollo, producción y prueba. Pero en nuestro caso, todavía vamos a cancelar log js para ver. Digamos ENV actual, y por ahora todavía la daremos de baja. Voy a ejecutar servidor de desarrollo local, y voy a arreglar también ese proceso no se define problema viniendo ESLint porque protest es algo que se ejecuta en el nodo JS lado, no desde JavaScript que se ejecuta dentro del navegador así que necesitamos dejar el ESLint entienda que también ejecutamos dentro del entorno node.JS, no solo dentro del navegador. Node true, este nodo true vamos a dejar que ESLint entienda que estamos dentro del entorno JS del nodo en este momento. Esto no hará nada excepto que simplemente eliminará ese error. Eso es. Ejecuto mi app localmente. Si voy a consola, veo que la ENV actual es igual al desarrollo. Lo que voy a ejecutar el comando build aquí para crear producción construir este nodo variable ENV se establecerá en el tiempo de compilación así que cuando usemos servidor de desarrollo local, esto es desarrollo build. La app está construida pero justo debajo del capó, eso no lo vemos. Es por eso que vemos el nodo ENV establecido desarrollo porque este es nuestro desarrollo construido y nuevamente, esta variable se establece durante el tiempo de compilación. Cuando vamos a ejecutar el comando build, nuestra aplicación tendrá el nodo ENV configurado producción y de hecho podemos usar esa variable para registrar o dar de baja al service worker. Vamos a tratar de hacer eso. Aquí vamos a agregar una condición simple. Si process.env.node ENV es igual a producción, en este caso, favor de llamar registro de trabajador de servicio, registrarse. Fresco. Ahora, intentemos volver a implementar la aplicación. Una vez desplegada, veremos cómo cambió todo. Nos vemos ahí en un segundo. Hola otra vez. Ahora nuestra aplicación está desplegada. Mi primer flujo de trabajo de implementación aquí. Ahora volvemos a nuestra aplicación, y si la actualizamos, ahora algo cambió. En primer lugar, tenemos este icono de Instalar aquí en la barra de búsqueda, pero vamos a tocarlo en un segundo. Estamos interesados en la pestaña Aplicación aquí. Si vamos a la sección de Service Worker aquí, ahora tenemos service-worker.js. Este service-worker.js fue nuevamente registrado por esa función de registro que se importa desde el archivo ServiceWorkerRegistration. Eso es función de registro, pulsa a ese "service-worker.js”, que está disponible en el box-office-apps/service-worker.js. Es registro, ese service worker dentro del navegador cuando se accedió a nuestra aplicación, y ahora ese service worker se está ejecutando, lo que significa que ahora ese service worker está activo e intercepta todas las solicitudes que salen y las almacena en caché dentro del navegador. puede ver que si lo vuelvo a actualizar, mis archivos, por ejemplo, ese índice HTML, están siendo servidos desde ServiceWorker, al igual que el resto de archivos aquí. Déjame “Caché Vacío Y Recarga Dura”. Hazlo de nuevo. En realidad nada cambió, pero aún así la aplicación está siendo servida desde ServiceWorker. Si no me equivoco, está en algún lugar dentro del almacenamiento de caché aquí. Puedes verlo debajo la sección de caché debajo de la pestaña Aplicación. Bajo almacenamiento en caché, ahora verá dónde está la caja precache, archivos que se están almacenando dentro de la caché. Así como así, podemos dirigir el Faro. Comando de nuevo y vea qué tenemos a partir de ahora para la lista de verificación progresiva de aplicaciones web. Vamos. Tenemos auditando mi app. Apenas un par de segundos, vamos al fondo, y ahora vemos que la aplicación web progresiva ahora es instalable y no realmente optimizada. Bueno, en realidad está optimizado, pero aquí solo tenemos un punto. Manifest no tiene un icono enmascarable, pero vamos a arreglarlo en el siguiente video cuando vamos a personalizar el icono, el nombre de nuestra app, y el resto de un par de cosas. Por ahora, podemos ver que nuestra aplicación es instalable. Ese icono que vemos aquí en la esquina superior dentro de la barra de búsqueda, podemos dar click en eso y podremos instalar nuestra aplicación como si fuera alguna app nativa. Si estuvieras en un dispositivo móvil, también tendrías la ventana emergente una vez que accedas a tu aplicación para un dispositivo móvil. Tendrás el pop up que, Oye, en realidad puedes instalar este sitio web como una aplicación. Si haces clic en “Instalar”, agregaría el sitio web a tu pantalla de inicio como si fuera una aplicación nativa. Ahora bien, si vuelvo a mi escritorio, aquí, tengo esta app llamada Create React App Sample. Ahora mismo tiene este nombre raro porque esto es lo que se especifica bajo archivo de manifiesto que vamos a personalizar en el siguiente video. Pero lo que pasa es que ahora esta es una aplicación, es instalable. Si hago clic en él, se puede ver que ahora no se abre dentro de un navegador. Se abre dentro de su propia ventana como si se tratara de alguna aplicación real nativa. Funcionará bien como estaba funcionando anteriormente. Bastante genial. puede ver que realmente abrió esa nueva pestaña dentro del navegador. Esto es lo que pasa con las aplicaciones web progresivas. Idealmente, no deberías abrir nada dentro de nuevas pestañas, sino que deberías usar la pestaña actual y usar solo, digamos una página para la navegación sin usar nuevas pestañas. Pero aún así, ahora tenemos la aplicación que se ejecuta como una aplicación nativa. Todo esto se logró mediante el uso de ServiceWorker, que nos dio la lista de verificación verde para la aplicación web progresiva. Para resumir, una aplicación web progresiva es solo una aplicación web, que sigue una lista específica de cosas. Por ejemplo, debe tener service worker, la aplicación debe usar algún almacenamiento en caché, por lo que puede estar disponible sin conexión. Entonces también se debe servir desde HTTPS y algunas otras cosas que puedes encontrar dentro de Lighthouse. Intentemos volver a ver. ¿Qué más tenemos aquí? están abriendo múltiples pestañas. Déjame refrescarlo. ¿Qué quieres? Analizar la carga de la página. Vamos a ver rápidamente la lista de nuevo. Dentro de la lista tenemos, déjame ver, color del tema, pantalla de presentación personalizada configurada, icono táctil, esa etiqueta de ventana gráfica específica y ese manifiesto que vamos a encargarnos muy pronto, service worker. Todas esas cosas solo hacen que un sitio web, aplicación web progresiva, sea tan simple como eso. Una vez más, el service worker que se registró como proxy dentro del navegador para interceptar la solicitud es el corazón de todo eso. Sólo porque un trabajador de servicio, pudimos lograr esa sección instalable aquí. Nuestra aplicación ahora se convirtió en instalable y también está disponible sin conexión. Creo que estaba bastante claro qué es exactamente la aplicación web progresiva, qué es service worker y cómo funciona todo aproximadamente. Por fin, volvamos a nuestra aplicación y comprometamos los cambios que hemos realizado. Primero, editamos Eslintrc, para que podamos usar el process.env sin ninguna advertencia o error, y comprobamos. Si estamos en la etapa de construcción, utilice ServiceWorkerRegistration.Register. Eso registrará ese archivo service-worker.js dentro del contexto del navegador. Fresco. Compromémonos estos cambios. Habilitar trabajador de servicio en producción env. Actualizo mi repositorio GitHub, y eso es todo por ahora. En el siguiente video, vamos a manejar ese problema que vimos en Lighthouse, por lo que será 100 por ciento verde. Nos vemos ahí. 90. 34 Fijar la URL de la base para resolver las imágenes de forma correcta en las páginas de Github: Hola ahí. En el último video, hemos creado esa genial aplicación web progresiva llamada Box Office. Pero aquí hay un problema que realmente me perdí y nuevamente se trata de la URL base dentro de nuestra aplicación. Si te diste cuenta cuando buscas shows específicos y cuando no tienen una imagen, tratamos de mostrar esa imagen no encontrada PNG. Sin embargo, todos nuestros archivos se sirven bajo el prefijo de la aplicación Box Office en el alojamiento de GitHub Pages. Pero esta imagen no se carga porque se puede ver que siempre es 404 porque no existe en la ruta que intentamos cargar. No especificamos el prefijo. ¿Cómo podemos arreglarlo? Si volvemos a nuestra app y si vamos a buscar imagen no encontrada, especificamos así como así. Solo ruta específica estática. Pero como tenemos el prefijo, necesitamos entenderlo de alguna manera. Una forma de arreglarlo es en lugar de usar la imagen dentro de la carpeta pública, hecho podemos colocarla dentro la carpeta fuente y luego usarla como si fuera, digamos un módulo. Luego se procesará mediante configuración subyacente de Webpack y la ruta base se resolverá automáticamente. Lo mismo que hicimos con etiqueta ancla y el componente link. Bueno, al menos la idea es la misma. Yo solo voy a mover la imagen no encontrada a alguna parte para, digamos carpeta de biblioteca, no se encontró imagen PNG. Ahora en vez de hacer referencia no encontrada imagen PNG por todas partes, solo voy a importar imagen no encontrada de biblioteca, no encontrada imagen PNG. A lo mejor voy a nombrarlo no se encontró fuente de imagen y sólo voy a especificarlo así. Entonces voy a copiar esa importación y hacer la misma importación en todas partes. Aquí, esto es lo que acabo de hacer dentro del elenco también. Aquí déjame ver el camino correcto. Volvemos una carpeta, segunda carpeta, biblioteca, no encontrada imagen PNG. Especificamos fuente de imagen no encontrada, mismo haremos dentro de show grid. Importar fuente de imagen no encontrada de. Volvemos otra vez, atrás biblioteca, no se encontró imagen PNG, no se encontró fuente, y lo mismo. Por fin, lo haremos dentro de ShowMainData. No se encontró la fuente de la imagen de la biblioteca, no se encontró la imagen PNG. Ahora, intentemos volver a implementar la aplicación y veamos cómo exactamente esto se verá reflejado en nuestro código final. Te veré en un minuto una vez que se despliegue este código. Ahora la aplicación se implementó con éxito. Volvamos a nuestra app. Ahora, refresquemos la página. Nuestra última búsqueda fue “Hola”. Lo buscamos de nuevo. Esta vez también vemos no encontrado. ¿Por qué es eso? El problema es que nuestra imagen en estos momentos, nuestra imagen anterior, es atendida desde Service Worker. No fue actualizado. Se sirve desde la caché, lo que significa que necesitamos borrar la caché para ver las actualizaciones. Voy a hacer clic derecho en el botón Refrescar en la esquina superior izquierda y hacer clic en “Empty Cache” y “Hard Reload”. Alternativamente, puedo ir a la pestaña Aplicación, ir a Almacenamiento, y hacer clic en “Borrar datos del sitio”. Se limpiará todo el caché dentro del navegador específicamente para este sitio web. Déjame hacer clic en “Borrar datos del sitio”. Entonces solo me refresco. Entonces busco “Hola”. Esta vez nuestra solicitud se resolvió con éxito. Se puede ver que en lugar de la URL real, vemos esta imagen de datos base 64. ¿Qué es eso? Nuevamente, debido a que nuestra imagen nos la trajo la aplicación Create React, la configuración subyacente de Webpack se encargó de ello. Dentro de la documentación de la aplicación Create React, en alguna parte se mencionó que si la imagen tiene un tamaño menor que el umbral específico, en lugar de digamos, procesar el archivo y servir el archivo dentro de la carpeta pública. La imagen se convierte al formato base 64 y luego digamos inlined esto, digamos, long string representa nuestra imagen, no como un archivo, sino como una cadena. Bastante genial. Ahora todo se ve bien hasta ahora. En el siguiente video, como se prometió, vamos a darle un toque final a la aplicación. Vamos a usar iconos personalizados, nombres personalizados, así que nuestra aplicación será perfecta. Nos vemos ahí. 91. 35 toque final: Hola, ahí. En este video, finalmente vamos a darle un toque final a nuestra app. Vamos a crear íconos, vamos a cambiar títulos para que la aplicación finalmente quede perfecta. Vamos. Pero antes de hacer eso, en realidad vamos a comprometer los cambios que hicimos en el video anterior. En el video anterior, como recuerdas, arreglamos nuestro problema con la imagen. Rápidamente agreguemos todo al escenario y luego cometamos todo diciendo movida no encontrada imagen del público o simplemente movamos imagen no encontrada a la fuente y luego la importemos en lugar de servir desde la carpeta pública. Bastante largo, pero es digno. Entonces empujo todo para dominar, y por fin volvamos a nuestros íconos. En primer lugar, tenemos que decidir sobre un icono que vamos a usar dentro de la pestaña aquí. Si volvemos al invitado que tenemos para Taquilla, aquí tenemos este ícono de dinero que preparé para nosotros. Sólo podemos descargar ese icono aquí. Voy a colocarlo en la carpeta Descargas. Entonces necesitamos generar un conjunto de iconos que vamos a colocar en la carpeta pública. Ahora mismo, tenemos estos iconos básicos de reacción que ahora podemos reemplazar, pero primero necesitamos generar este conjunto de iconos. lo general, lo que harías primero decides por un icono que quieras usar. Puede ser tuyo, por ejemplo. No es obligatorio usar esta específica. Si tienes el tuyo, siéntete libre de usarlo. Vamos a Resources.md. Aquí en la parte inferior, podemos encontrar este generador de favicon que dejé para nosotros. Vamos a esa página. Damos click aquí, subimos la imagen que queremos que se utilice para conjunto de iconos. Nosotros descargamos. Dentro de la carpeta Descargas, ahora tenemos este favicon_io. Está en archivo. Ahora mismo voy a extraerlo todo a una carpeta. Este es el conjunto de iconos que finalmente tengo. No vamos a usar todo eso. Vamos a reutilizar los que ya están presentes dentro de la carpeta pública. Yo sólo voy a abrir esa carpeta pública aquí. En lugar de logo192 de React, solo voy a usar el que tengo aquí. Yo lo copio. Yo cambio el nombre. Borro el anterior. Le renombro a éste. Entonces mismo voy a hacer con este logo. Yo lo borro. Muevo ese aquí del mismo tamaño. Le doy el mismo nombre. Favicon será reemplazado por completo. Eso es. todo está listo. Si vamos a manifest.json, aquí hacemos referencia a todos estos iconos. Estos iconos se utilizarán cuando tu aplicación esté siendo instalada en la pantalla de inicio. Sea lo que sea que especifique aquí, ese archivo de manifiesto instruirá Progressive Web App para que use esa información. Por ejemplo, si aquí especificamos la aplicación React como un nombre corto, esto es lo que verán los usuarios cuando agreguen su aplicación en la pantalla de inicio. No tenemos ningún nombre largo para nuestra aplicación. Solo vamos a usar Taquilla para nombre corto y Taquilla para nombre regular. Los iconos se quedan aquí, pero si volvemos a nuestra aplicación y si recordamos nuestra carrera anterior para Lighthouse, tuvimos ese problema con el icono enmascarable. Veamos una vez más qué exactamente teníamos ahí. De nuevo, corro Faro desactualizado. Aquí toma un par de segundos. Vamos al fondo y vemos que nuestra aplicación es instalable. Todo está bien, pero no tenemos un icono enmascarable. Vamos aquí. Aquí lees sobre íconos enmascarables. Se trata de un nuevo formato. Básicamente, solo necesitamos agregar otro icono a manifest.json y especificar que tendrá este propósito de icono enmascarable. Podemos usar ese editor de Maskable.app para convertir un icono existente en un icono enmascarable. A lo mejor vamos a hacer eso rápidamente. En la esquina derecha, hago clic en el botón Subir, especifico nuestro icono. Ahora bien, se ve así, pero yo quería tener, digamos, un fondo blanco, así nuestro icono enmascarable se verá así. Fresco. Este será nuestro icono enmascarable. Eso resolverá nuestro problema con esta lista de verificación en Lighthouse. Hacemos clic en Exportar. Digamos que será el tamaño máximo. Nosotros descargamos. Mostrar en carpeta. Este será un icono enmascarable que vamos a poner en la carpeta pública. Lo muevo aquí, y ahora necesitamos especificar ese icono enmascarable. Este dentro de mi manifest.json y decir que maskable_icon.png, los nombres deben coincidir, será de tipo, déjame ver. ¿Dónde está? ¿Dónde está esta información sobre los iconos enmascarables? Aquí. Tendrá propósito enmascarable. Volvemos aquí, especificamos propósito enmascarable. Ahorramos. Esto es. Ahora nuestra aplicación se verá increíblemente bien en todas partes, con nuestros propios títulos, con nuestros propios íconos. Vamos a desplegar todo de nuevo. Espera, discúlpeme. Fui por el camino equivocado. Yo quería desplegar todo al principio. Npm ejecutar implementar. Ahora solo esperemos un par de minutos, y te veo una vez desplegada la aplicación. La aplicación se implementó correctamente. Volvamos a la app y veamos el resultado final. Antes de hacer eso, antes de que vayamos a refrescar la página, solo vamos a borrar de nuevo el almacenamiento para borrar todas las caches, lo que sea que hayamos guardado dentro del navegador, Empty Cache y refresh. Ahora, puedes ver que tenemos nuestro ícono personalizado aquí, títulos personalizados. Ahora todo se usa como especificamos dentro del archivo de manifiesto. De hecho, puede hacer clic debajo de la pestaña de la aplicación aquí en Manifiesto y ver diferente información sobre su aplicación. Ahora, veamos cómo va a quedar cuando se está agregando a la pantalla de inicio. En uno de los videos anteriores, cuando agregamos uno de los trabajadores del servicio, cuando lo registramos, agregamos nuestra app a la pantalla de inicio. Sin embargo, puedes ver que no se ha actualizado aquí. En realidad vamos a ejecutarlo y primero, vamos a desinstalarlo e instalarlo de nuevo. Lo que voy a hacer, sólo voy a hacer click en tres puntos aquí. Haga clic en Desinstalar Crear muestra de la aplicación React. Marque la marca. También borra los datos de Chrome. Ahora se ha ido. Regresaré a mi aplicación dentro del navegador, y la instalaré una vez más. Instalar Taquilla. Instalar. Ahora, boom. Vuelvo a mi pantalla de inicio otra vez, en mi caso es de escritorio. Ahora tengo mi aplicación de taquilla, que se parece a cualquier otra aplicación en mi computadora. Si hago clic en él, todavía tenemos todo igual. Yo diría que esto es todo. Ahora ustedes construyen esta increíble aplicación que funciona sin conexión, que es instalable, que funciona con los diferentes datos dinámicos de las API. Aprendiste muchos conceptos. Yo diría que potenciaste significativamente tus conocimientos de React con este, pero ahora esto es todo. Pero antes de que terminemos este, vamos a comprometer todos nuestros íconos que hemos agregado. Voy a sumar todo al escenario. Voy a comprometerlo todo. Digamos que se agregaron iconos personalizados y se actualizaron manifest.json. Vamos a empujar todo a la rama master para que los cambios se reflejen en el repositorio de GitHub. Esto es. Enhorabuena por esa. En el siguiente video, concluiremos exactamente lo que hemos aprendido con la taquilla. Nos vemos ahí. 92. Resumen de 36: Oye, sí. En este video, vamos a concluir todo lo que hemos aprendido hasta ahora en Taquilla. Ahora tenemos esa increíble aplicación web progresiva, que funciona sin conexión, que es instalable, que funciona con API, y se ve genial, ¿no? Pasemos tal vez a nuestro historial de compromiso y rápidamente pasemos por eso. En primer lugar, como herramienta, digamos como un boilerplate para crear taquilla, utilizamos Create React App, que utiliza la configuración subyacente del paquete web, que consumimos mediante el paquete react-scripts. Ahora ya sabes lo que es react-scripts. Ahora ya sabes qué es Create React App, lo que significa que sabes cómo trabajar con Create React Boilerplate. También usamos Prettier y ESlint, pero esto no es algo nuevo. Ya conoces estas herramientas. A ver. Aprendimos sobre React Router porque como sabes, por defecto y react, no tenemos ninguna solución incorporada para el enrutamiento dentro de nuestra aplicación. Reaccionar se trata de renderizar, pero no se trata de navegación tan simple como esa. Es por ello que utilizamos una biblioteca llamada React Router para lograr la navegación dentro de nuestra aplicación. A ver. Luego después de React Router, agregamos diferentes funciones para trabajar con datos dinámicos, para trabajar con API. Usamos una API de navegador integrada llamada “Fetch” Para obtener datos de la API, llamada “Fetch” Para obtener datos de la API, creamos muchas funciones reutilizables que usamos en toda nuestra aplicación, y se ven muy simples. Manejamos todos los sumadores potenciales dentro de los componentes en caso de que algo salga mal, manejamos los errores correctamente usando bloques try-catch dentro de nuestros componentes. También llegamos a saber que si queremos recuperar datos cuando el componente se monta, cuando hacemos algunas interacciones en la página, en lugar de usar “useEffect” podemos usar una biblioteca de obtención de datos. En nuestro caso, llegamos a conocer la biblioteca React Query, cual nos ayuda a consultar datos cuando el componente monta o realizamos búsqueda en la página. Ahora ya conoces las bibliotecas de obtención de datos. Las bibliotecas de obtención de datos son un camino a seguir en las aplicaciones React modernas. Hay forma recomendada de trabajar con datos porque a medida que tu aplicación crezca, tendrás cada vez más y más requisitos. Las bibliotecas de obtención de datos nos ayudarán a administrar todo eso con facilidad. Ahora que también mencioné “useEffect”, ahora sabes lo que hace “useEffect”, “useEffect” nos permite ejecutar alguna función de efectos secundarios Cuando algo dentro del componente cambia, tenemos array de dependencias dentro de useEffect. Déjame encontrarlo aquí en el código. Tenemos un rayo de dependencias aquí, y cuando algo dentro de la tasa cambia, si el valor cambia, ejecutamos esa función de efectos secundarios. Sin mencionar que también creamos nuestros propios ganchos personalizados en la parte superior de “UseState”, y “UserEducer” y “useEffect”. Estos ganchos personalizados son solo, como cualquier otro gancho, pero con lógica extra. Ahora sabes que en caso de que necesites crear una lógica reutilizable para Hooks incorporados, solo tienes que crear un Hook personalizado y poner toda la lógica dentro. Eventualmente, se vuelve reutilizable. También trabajamos con el almacenamiento de navegadores, trabajamos con almacenamiento de sesiones, trabajaremos con almacenamiento local. Sabes que ahora puedes persistir los datos dentro del navegador. Por supuesto, esto no es un reemplazo para una base de datos. Pero si necesitas retener de alguna manera información como la entrada de búsqueda o las preferencias del usuario, puedes usar ese almacenamiento muy bien. A ver ¿qué más tenemos aquí? Volvamos al historial de compromiso. Aquí también creamos estas páginas dinámicas. Esto también forma parte de React Router pero ahora conoces el concepto de páginas dinámicas. Creas una plantilla o un esqueleto, y luego agarras el parámetro dinámico de la URL, en nuestro caso, era show ID, así que si busco algún show, voy a mostrar la página dentro de la URL, tenemos show ID que agarramos dentro del componente y luego usamos ese show ID para buscar datos. De esta manera podemos lograr páginas dinámicas. Ahora ya conoces este concepto. Veamos, ¿qué también tenemos aquí? Nuevamente, “UseQuery” sobre los datos de Consulta, Diferente lógica inicial con Hooks personalizados, esto es lo que hemos comentado, también instalamos componentes con estilo. Una solución de tiempo de ejecución CSS y JS para diseñar componentes. Ahora puedes decidir qué es lo mejor para ti. O bien usar componentes de estilo o algo muy similar o usar de manera tradicional con archivos CSS. Porque ahora conoces los inconvenientes, ahora sabes cuáles son las ventajas y eres tú quien decidirá lo que vas a usar. Personalmente prefiero la forma tradicional de diseñar aplicaciones y no soy realmente un gran fan de CSS y JS. Además, agregamos esta animación de desvanecimiento como reemplazo para el paquete que mencioné, React-fade-in. Lo mencioné sólo una vez, pero no le puse mucho estrés a eso. Necesitamos menos dependencias en nuestras aplicaciones. Menos dependencias mejor, porque hay que manejar menos cosas. Creo que sí tiene sentido, y en el futuro te apegarás a esa regla porque será por tu propio bien. También conocimos las aplicaciones web progresivas. ¿Qué es la Progressive Web App? Es solo una aplicación web que sigue lista específica de cosas por ejemplo, necesita tener la aplicación necesita tener un archivo de service worker necesita ser atendido a través de HTTPS, necesita tener ese archivo de manifiesto, y cuando la aplicación, el sitio web cumple con todos estos requisitos, se convierte en una Aplicación Web Progresiva. Es como un sitio web titulado y el título es Progressive Web App. La aplicación estará disponible fuera de línea debido a service worker. Ahora ya sabes que service worker es un script que se ejecuta en algún lugar dentro del navegador, fuera de nuestros contextos de aplicación, y hace proxy de todas las solicitudes, todas las solicitudes salientes, y hace algo con ellas. En nuestro caso, utilizamos service worker para almacenar en caché toda la solicitud saliente. La aplicación funcionará sin conexión una vez que esté instalada en algún lugar de la pantalla de inicio. Al final, agregamos nuestros propios iconos personalizados usando el [inaudible] que genero que compartí contigo pero realmente no importa, puedes usar cualquier generador pero la cosa es que ahora puedes ver el flujo completo, cómo se construye la aplicación desde cero hasta el despliegue, hasta el estilo y haciendo algunas modificaciones en el futuro. Algo así. Felicidades, tú, hiciste un muy buen trabajo. Por ahora, eso es todo. Te veo en la siguiente. 93. ¿Qué es la base de Firebase?: Hola, bienvenidos a la nueva sección aquí. Vamos a hablar de volver en solución para nuestro proyecto final. Siempre que construimos una aplicación de una sola página con el fin de comunicarnos con la base de datos, normalmente crearíamos nuestro propio servidor AP I o utilizaríamos uno existente. modernas, aplicacionesmodernas, pequeñas o medianas no necesariamente de vuelta derecha y de huesos desnudos su cuenta la mayor parte del tiempo que lo hacen, pero depende del tipo de aplicación. ¿ No estaría bien si tuviéramos algún tipo de capa de obstrucción alrededor de la espalda? Y así no necesitamos configurarlo nosotros mismos y enfocarnos más en la aplicación? Bueno, firebase nos puede ayudar a lograr eso. Se llama como solución de servicio que nos da la capa de abstracción alrededor de la espalda y y lo hace. Aún más Firebase es Emma Bil y Web Platform, que se construye encima de Google Cloud Platform. Significa que se puede utilizar junto con cualquier servicio en la nube de Google. A partir de ahora, no necesitamos preocuparnos por crear nuestro propio archivo de mantenimiento de base de datos AP I alojando todo ya está ahí y esperándonos. Entonces en nuestro código, en lugar de enviar una solicitud a un A P I para recuperar datos. Simplemente usaríamos una biblioteca que tenga funciones ya bastante bien para nosotros. Al igual que obtener este documento por I t. Y esta función interactuará con la base de datos. Tiene realmente tiempo de cantar soporte y consultas más rápidas. Y también está bien documentado, lo cual es realmente importante de entender. Bachir. Cuál es la base de Fuego en el siguiente video pero pasará por los servicios de base de incendios y vamos a tratar evaluarlos. Nos vemos ahí. 94. Descripción de los servicios de Firebase: Oye, exploremos rápidamente la Base de Bomberos y sus servicios. Para este video, abrí Dashboard basado en fuego fuera de nuestro proyecto final Aquí. Podemos monitorear y administrar cada servicio que utilizamos dentro de un proyecto firebase. Podríamos gestionar múltiples APS. Puede haber múltiples APs de vuelta, y eso compartirá la misma base de datos. O si tuviéramos aplicaciones Android, IOS y Web, podríamos gestionarlas todas desde un solo dashboard a la izquierda. Dentro de la barra lateral. En desarrollo, puedes ver una lista fuera de los servicios principales de Firebase. Vamos uno por uno. Una sindicación. Con el servicio, podemos iniciar sesión y autenticar usuarios a través de nuestras aplicaciones. Esto es realmente genial porque, digamos que si miramos con Google en la página web y más adelante, miramos en la aplicación android con la misma cuenta, los datos serán los mismos. Hay un montón de signos y métodos diferentes disponibles para nosotros, y la cosa es que todos ellos son configurables. Fueron sólo unos clics. Este servicio está completo. Se ha construido en un sistema de correo que maneja todas las verificaciones de correo electrónico y receso. Necesitamos que solo personalices la plantilla fuera del correo electrónico. Además, es compatible con la verificación por SMS, que también es realmente genial. Después va base de datos. Firebase tiene a base de datos solicitada ahora tienda de incendios y base de datos de tiempo riel. Ambos están basados en Jason bases de datos sin secuelas con soporte para actualizaciones en tiempo real. ¿ Cuál es la diferencia y cuál usar? Depende de muchos factores, pero aquí hay tres diferencias clave. En primer lugar, modelo de precios Tienda de bomberos se cobra por operación. Leer, escribir, borrar o actualizar. Esto no es bueno para escrituras de datos de alta frecuencia Base de datos en tiempo real tiene más adecuado para esto ya que se cobra por almacenamiento y ancho de banda, que es el caso de uso perfecto para algo así como una aplicación infantil. Segunda Consultas. Fire Story nos da consultas más avanzadas y compuestas en comparación con la base de datos en tiempo real Así que la base de datos en tiempo real tiene realmente pobre constructor de consultas, pero es lo suficientemente bueno para manejar no a estructuras de bases de datos complicadas. Tercera estructura ambos están basados en Jason Fire Store cuenta con documentos, colecciones y sub colecciones, colecciones y sub colecciones, que hacen que la base de datos sea más robusta. La base de datos en tiempo real es solo un objeto Jason grande. Por eso tiene peculiar muy soporte y la mayoría de las veces necesitamos de normalizar un k un dato duplicado para nuestro proyecto. Usaremos base de datos en tiempo real porque tendremos muchas operaciones de Faried y escritura. Y no requerimos consultas complejas. Si no fuera una aplicación de chat, habría llegado al máximo la tienda Fire ya que tiene consultas más sofisticadas y estructura de base de datos . Además, no estamos limitados a usar en la base de datos Lee uno. Podemos combinar tanto la tienda de bomberos como la base de datos en tiempo real en una sola aplicación. Después tenemos almacenamiento. Nada demasiado especial. Por aquí. Aquí burbuja Porter, imágenes de usuario y archivos de audio Firebase hosting aquí. Vamos a desplegar nuestra página web. Solo soporta archivos estáticos. Entonces si tenemos una aplicación de renderizado del lado del servidor, este hosting no funcionará. Las funciones de nube en nuestra aplicación también fueron capaces de escribir de nuevo personalizado e informar fuera del servidor últimas funciones de nube que se pueden llamar desde dentro del abrigo. Vamos a desplegar sólo uno que enviará notificaciones a los usuarios. Hablaremos más de servidor último cuando nos metamos en la máquina de temas. Lauren, consigue increíble herramienta que proporciona utilidades de aprendizaje automático como el reconocimiento de imágenes y las otras. Pero desafortunadamente sólo está disponible para IOS y Android APS en la parte inferior. Contamos con otros servicios. Todos ellos son complementarios y se utilizan para monitorear y analizar aplicaciones desplegadas. Podemos administrar el rendimiento fuera de nuestra página web, lo rápido que baja y algunas otras métricas. Incluso podemos integrar Firebase Analytics, que básicamente es Google Analytics pero envuelto como un servicio firebase y en el fondo confinamos los servicios para involucrar a los usuarios para nuestro proyecto. Utilizaremos únicamente la mensajería en la nube de firebase que nos permitirá enviar notificaciones en tiempo real a los usuarios si el navegador tiene soporte para ello. Y eso es básicamente todo. Esto fue visión general de alto nivel fuera de chimenea. Pero, ¿qué pasa con la seguridad? ¿ Es lo suficientemente seguro? Nos enteraremos de que en los próximos medios nos vemos ahí. 95. Seguridad de base de fuego: Oye, veamos qué tan segura Firebase iss. Ya que no tenemos ningún código del lado del servidor, vamos a acceder a la base de datos desde el lado del cliente. ¿ Cómo vamos a exponer algún dato sensible? Sí y no. En chimenea se accede a bases de datos vía Euro Público. Esto es parte del conflicto. Digamos que tenemos algunos datos dentro de la base de datos. Tenemos publico su el No. Uno también. Y si Aleatorio Persona intenta acceder a los Ural y no protegíamos la base de datos, esta persona puede obtener todos los datos, ya sea que significara ser públicos o no, para evitar el acceso no autorizado, sus reglas de seguridad. Estas reglas definen cómo se puede acceder a los datos y quién. Significa que el nivel de seguridad depende de cómo se escriban las buenas reglas de seguridad. Es una buena práctica echar un vistazo a la base de datos por defecto y luego solo gobierna. A medida que escribimos código reglas de seguridad aplican sobre Lee a sus clientes. I Si escribimos backend personalizado con funciones en la nube, estas reglas no se aplicarán cuando crezca la aplicación. A algunas personas les resulta difícil escribir buscar rituales. Por esta razón, utilizan funciones de nube y realizan servidores en la validación ellos mismos. Lo mismo se aplica al almacenamiento en la nube. Tenemos público que está enfermo y gobierna por defecto. El almacenamiento solo puede ser accedido por usuarios iniciados. Para la mayoría de los casos, funciona bien. Pero no quiere decir que si subimos una imagen que queremos compartir, esta imagen estará bloqueada. Cada archivo subido puede tener Europa pública. Está bien, eso es todo por seguridad. Espero que fuera integral y conciso. Ahora, ¿qué pasa con los precios? ¿ Está libre firebase? voy a averiguarlo en el siguiente video. Nos vemos ahí. 96. Precios de base de Firebase: Oye, veamos si necesitamos pagar algo para usar la base de fuego. En cuanto a fuera, hay dos plantas disponibles. plan chispa y blaze chispeado es completamente gratuito y viene con algunas limitaciones. Plan policiaco es pagar a medida que vas modelo. Ambos tienen muy generales freakier Y aunque estés suscrito al plan blaze a menos que tu APP tenga muchos usuarios activos, no pagarás nada por nosotros para asegurarnos de que no nos cobraremos el plan de Spark está bien. No obstante, con las recientes actualizaciones a tu base de fuego y Google Cloud para poder utilizar las funciones de la nube , necesitamos tener habilitado el plan blaze para nuestro proyecto. Pero no te preocupes, pero nos meteremos en eso cuando empecemos con funciones en la nube. Hasta entonces, plan desatado es nuestra elección Para más detalles, por favor navegue a la página de precios para Avala todo usted mismo. Está bien, supongo que eso es todo lo que quería cubrir para firebase en producción. En el siguiente video, vamos a finalista comenzó a construir nuestro proyecto. Nos vemos allí 97. Resumen del proyecto: Hola, bienvenidos a la nueva sección. ¿ Te tomaste un descanso? Porque ahora mismo les voy a mostrar cómo se verá nuestro proyecto final cuando ahora nos comprometimos a la página web. Pero veremos la página de inicio de sesión. De aquí. Podemos continuar ya sea con Facebook o Google. Eligamos a Google. Entonces voy a elegir por segunda cuenta y luego estoy dentro de la app. Entonces a la izquierda, puedo ver que el tablero crea nuevos fondos de chatroom y lista fuera de las salas de chat disponibles a la derecha. Si hago clic en cualquiera de las salas de chat, veré sus mensajes y algunas otras cosas que vamos a cubrir apenas en un segundo. Empecemos primero con dashboard, así que si hago clic en él desde aquí, puedo administrar mi cuenta. Entonces en la parte superior, puedo ver que ahora mismo estoy conectado a Google, y también puedo asociar mi cuenta con Facebook. Por lo que si hago clic en un enlace a Facebook, me solicitará mis credenciales de libreta de frases si es necesario. Y ahora mismo estoy conectado al frasebook. Significa que la próxima vez cuando buscaré con Facebook para comprar app, estaré vinculado a esta cuenta. Terminaré con la misma cuenta, entonces tengo un apodo y puedo editar desde aquí. Por lo que si hago clic en el botón de edición, podré cambiarlo. Entonces cambiémoslo un poco, y si hago clic seguro, se actualizará. Además, puedo editar mi ómetro si hago click en Seleccionar Nuevo Avatar, y si elijo esta imagen, podré añadirla un poco sobre desarrollar estado. Y luego haré clic en un subido y se actualizará mi Al Atar. Y desde aquí, también puedo cerrar sesión. A continuación, tenemos crear nuevo botón de chat room. Entonces vamos a especificar en Europa nombre, digamos whoa y descripción va a ser Whoa! Si hago clic en él, aparecerá por aquí, y la sala de chat estará completamente vacía por ahora. Entonces vamos a seleccionar la primera sala de chat porque ya está poblada con algunos mensajes. Entonces, ¿qué tenemos aquí? Entonces, en cada mensaje, si la tenemos en él, podemos ver esto como botón. Te mostrará cuántos me gusta este mensaje en particular medio. Por lo que si hago click en él, voy a quitar dedo como si vuelvo a hacer clic como se añadirá a este mensaje. Y también podemos ver si este usuario está en línea o fuera de línea. Entonces si la tenemos en este círculo, podemos ver que este usuario estaba desconectado en este día en particular en este momento en particular. Y esta es mi cuenta. Por eso actualmente estoy en línea. También, tendrías aquí si hacemos click en el apodo del usuario Global Sea Motile window con su de un auto . Es nombre completo Miembro desde esta fecha. Entonces cuando este usuario se unió a la aplicación y también podemos controlar el permiso de administrador de este usuario si actualmente somos un administrador fuera de este grupo, vamos a echar un vistazo al permiso de administrador justo en un momento. Entonces, ¿qué más tenemos? Por lo que todos los mensajes se dividen en fechas. Se agrupan por fechas. Por lo que pueden ver hoy mando este mensaje es ayer hubo estos mensajes y así uno también tenemos paginación off. Mensaje es que significa que no bajamos todos nuestros mensajes de la base de datos. Cuando veamos el chat sólo una carga, digamos 15 mensajes. Y luego cuando pinchemos sobre cargar más, veremos más mensajes cargados a nuestra aplicación. Muy bien, entonces podemos enviar mensajes de texto normales a nuestro Chad. Entonces también somos capaces de enviar archivos. Entonces si hago clic en botón de apego, veré a este mortal. Entonces hago clic en subir. También puedo seleccionar archivos normales. Asim pica. Entonces voy a seleccionar este archivo, esta imagen, que lo voy a abrir. Aparecerá por aquí que voy a dar clic, enviar al chat. Y como pueden ver, si envío un archivo normal, condono Cargarlo con sólo hacer click en esta su salida. Si se trata de una imagen, se mostrará por aquí. Y si hago click en él, veré la vista previa. Y además, voy a tener esta vista fondo original. Y si hago clic en él, el original se abrirá en el nuevo grifo. Además, somos capaces de enviar archivos de audio. Entonces si hago clic en este botón por aquí, se iniciará el registro ing y puedo ver esto puedo. Por aquí, significa que actualmente está grabada en mi micrófono. Por lo que si hago clic en este botón una vez más, se guardará mi mensaje de odio. Eso fue grabarlo justo ahora mismo. Y podré reproducirlo si es compatible con el navegador. Muy bien, ¿Qué tenemos más? Por lo que en la parte superior, podemos ver el nombre de la habitación, podemos ver mensaje de difusión. Y este botón azul por aquí, están relacionados, pero vamos a echar un vistazo apenas en un momento. En eso, podemos hacer click en la información de la habitación para ver la descripción de esta sala de chat. Y además, si somos un admin fuera de este grupo, podemos ver a este Aiken. Por lo que si hacemos click en él, podemos agregarlo. Información de la habitación como nombre y descripción. Por lo que si vuelvo a hacer clic en botón editar, puedo por cualquier nombre que quiera. Y entonces soy capaz de guardarlo, y se actualizará con éxito. Muy bien, Así que ahora, sobre mensajes de difusión. ¿ Cuáles son esos? Permítanme mostrarles en primer lugar cómo se puede controlar el permiso de admisión. Entonces déjame realmente buscar en estas app desde mi teléfono, y eliminaré el permiso de administrador. Entonces en este momento estoy dentro en la app, y se puede ver que el estado ha sido cambiado. Y ahora mismo puedo ver el verde oscuro. Está bien, así que voy a eliminar el permiso de administrador para esta cuenta que puedes ver ahora mismo. Entonces, ¿qué voy a hacer? Daré click en mi perfil y haré click en habitación de permiso Admitir, pero desde mi teléfono. Por lo que ahora mismo, eliminé el permiso de administrador. Y ahora solo puedo tener este botón de notificación y la información de la habitación. Está bien, Ahora, me voy a dar permiso de aumento a mí mismo, y ya puedes ver ahora está actualizado y todo está en tiempo real. Entonces, ¿qué está pasando aquí? Entonces en primer lugar este botón de notificación, Así que significa que quiero suscribirme o darse de baja de las notificaciones que recibiré de admite fuera de esta sala de chat. Por lo que ahora mismo, estoy suscrito. Y si cambio de opinión, estaré en suscripción, y no recibiré ningún mensaje en absoluto. Entonces, ¿cuáles son esas notificaciones? Estas son notificaciones en tiempo real que están siendo mostradas por el navegador en el dispositivo. Por lo que son estos permisos o notificaciones que si hago clic en este fondo, puedo ver notificaciones por aquí y ahora mismo se permiten. Entonces, ¿qué va a pasar? Déjame enviar una notificación desde mi teléfono a todos los usuarios dentro de esta sala de chat. Por lo que ahora mismo, desde mi teléfono, voy a dar clic en mensaje de difusión aquí. Voy a especificar título y mensaje, y luego voy a publicar mensaje. Entonces veamos qué va a pasar. Entonces yo Steidl, voy a seleccionar, Digamos web sordo y para mensaje, voy a escribir hola desde el teléfono y luego publicar mensaje. Y como pueden ver en este momento, tengo esta web medio de esta sala. Yo ayudo hola desde mi teléfono. Y también tengo esta notificación dentro de ventanas. Entonces, ¿qué? Significa que si actualmente estoy en el sitio web, recibiré este tipo de notificaciones que puedo cerrar si digamos fuera del navegador o simplemente cierro el navegador por completo. Y si recibo una notificación, déjame mandar otra y sí, puedo ver que aún tendré notificación dentro de windows o dentro de tu sistema operativo si es compatible. Entonces esto es lo que nuestros mensajes de tiempo riel de esta manera no se puede si yo sus usuarios para involucrarlos . Entonces esto es más o menos sobre nuestra aplicación, muchas cosas por cubrir y lo haré lo más integral posible. Creo que lo disfrutarás. Y te voy a ver en el siguiente video. Empezaremos. Nos vemos ahí. 98. ¡Las actualizaciones de la aplicación de chat están llegando!!: Hola chicos. En este video, me gustaría hacer referencia a las próximas actualizaciones para la aplicación de chat. Ambos proyectos, Tic-tac-toe, y taquilla, se actualizaron, pero las actualizaciones para las aplicaciones de chat aún no han surgido. Para que la transición de las actualizaciones de Box Office a la versión anterior de la aplicación de chat sea fluida posible, existe este video. Lo que vamos a hacer, vamos a usar la plantilla que tengo preparada para nosotros. Tenemos ese repositorio de inicio de aplicaciones de chat. El enlace se compartirá contigo en los recursos, por lo que tendrás acceso a él. Terminas en esta página, vas a esta página, luego lo que necesitas hacer, necesitas hacer click en el botón de código verde, Luego haces clic en “Descargar Zip”. Después vas al lugar donde descargaste ese archivo zip, lo desempaques. Yo sólo agarro esa carpeta. Lo puse en descargas, y aquí tengo el proyecto. Después voy a VS Code. Abro esa carpeta como el proyecto en VS Code. Aquí, éste y yo veo esto. Aquí puedes encontrar el proyecto de inicio. Tienes todas las dependencias necesarias instaladas como compilador Sass, biblioteca rsuite, las desviaciones son importantes. Después tenemos React Router, y Firebase Library instalada. ESLint y Prettier están configurados aquí. No hace falta que te preocupes por eso. Dentro de fuente, tienes estilos aquí. Aplicación básica con React Router de versión anterior que se utiliza en videos de aplicaciones de chat. Tienes todo configurado, estilos importados, ya estás todo listo. Lo único que debes hacer es primero, necesitas inicializar Git aquí. Escribes git init, luego agregas todo a stage, luego lo cometes. Justo después de eso, necesitas asociar este nuevo proyecto Git con tu repositorio GitHub. Vas al repositorio de GitHub, creas un nuevo repositorio, luego obtienes la URL del repositorio y luego haces git remote, agregas origen y URL del repositorio que copiarás cuando vayas a crear un nuevo repositorio aquí en GitHub. Justo después de eso necesitas instalar dependencias. Como puede ver, no hay carpeta de módulos de nodo. Lo único que hay que hacer, es simplemente escribir npm install, e instalará todas las dependencias listadas en el paquete Jason. Después de eso, ya estás listo. Deberá usar el script start ejecutando npm run start, y continuar con el desarrollo. El resto permanece igual. Simplemente continúe viendo la aplicación Chat, y todo estará bien. Eso es. Nos vemos ahí. 99. Cómo Scaffolding el proyecto: Hola, bienvenido. Ahora mismo vamos a usar scufled nuestra protección como antes, vamos a usar la app de crear reactor y para crear en tu proyecto, necesitamos abrir carpeta de todos para poner nuestro proyecto en la terminal. Entonces desde mi terminal, voy a ejecutar y p x crear reaccionar hacia arriba, y luego el nombre de carpeta, que va a ser Chad app. Y luego voy a poner uso NPM porque tengo hilo instalado en mi sistema. Y ahora se creará para nosotros el proyecto de la UE. Esperemos hasta que todo esté hecho. ¿ Todo bien? Parece que hemos terminado. Ahora abramos el código V s. Y desde aquí, abramos nuestra nueva carpeta. Entonces, ¿qué tenemos dentro como antes? Bajo fuente, tenemos nuestros archivos iniciales para paquete Jason. Tenemos nuestros guiones y así sucesivamente. Entonces vamos a realizar nuestra limpieza inicial para que no necesitemos ap CSS. Entonces tampoco necesitamos todo esto dentro de nuestro componente de app. Así que vamos a limpiarlo así lleva a eliminar este nombre de clase, vamos a poner sólo Hola. Vamos a Tillett logo e importamos para nosotros. Sí. Ha presentado entonces no necesitamos AP Test GS de cuatro índice CSS. Bueno, en realidad no lo necesitamos también, entonces para índice? Sí, eliminemos el modo calle porque vamos a recibir errores cuando usaremos otras bibliotecas. Es totalmente normal. Entonces eliminemos Índice CSS y comentemos Trabajador de servicio por ahora, así como esto, entonces no necesitamos logo SVG. No necesitamos pruebas de configuración y ya terminamos aquí. Ahora, ¿qué hacemos? Instalaremos otras dependencias, y las obtendremos de la carpeta Activos. Entonces vamos a abrir esta carpeta y vamos a abrir andamios. Doug Jason. Entonces desde aquí vamos a copiar comentarios para instalar dependencias. Entonces vamos a copiar la primera línea y vamos a ponerla dentro de nuestra terminal integrada así como así . Ahora, mientras se está instalando, vamos a crear predicador y excelentes archivos de configuración. Entonces por excelente, va a ser, sí, tierra RC. Y para predicador, va a ser más guapa, RC, RC, y también vamos a copiarlos de nuestro andamio a archivo Jason. Entonces para sí, inclinados tenemos esa. Pongámoslo aquí y guárdalo. Y por año lo tenemos todo bien. Entonces, sí, pelusa y predicador son Don, ajustemos nuestro guión del NPM. Entonces vamos a copiar todo eso y ponerlo dentro. Empaqueta Jason, dentro de esta sección de guión en la parte inferior, así como así. Y también tenemos el guión claro para borrar la carpeta de proyectos de ley. Entonces justo antes de producir nuestro construido vamos a correr y PM, Ron Clear como un muerto. Está bien, así que terminamos con guiones. ¿ Qué más tenemos dentro del archivo de despliegue de disco? Tenemos otra línea para dependencias de instalación, que es notas. Culo son traje reaccionar router y reactor para tonto. Vamos a copiarlo. Y déjame explicarle qué va a pasar. Por lo que para nuestro sistema de estilo, usaremos SAS contigo. Yo biblioteca nombrada están aquí, y podemos echar un vistazo a nuestro traje si no calibramos a su documentación oficial. Entonces, ¿qué es una biblioteca Y? Se trata de una biblioteca que nos da ya bastante encontrar componentes que podemos utilizar. Y eso es básicamente todo. Veremos que cuando vamos a empezar a usarlo es bastante simple, y que impulsa nuestra velocidad de desarrollo. Eso lo verás. Está bien. Y siempre que veamos que nuestro traje no es suficiente para nuestros casos usaremos dice Ok. Además, instalamos, reaccionamos router y reaccionamos Rotterdam Muy bien, así que básicamente eso es todo. Pero una cosa a hacer es también copiar esta carpeta de estilos para nuestro proyecto. Entonces, ¿qué es esta carpeta Estilos? Por lo que viene con Assad off clases predefinidas. Entonces vamos a copiar en realidad esta carpeta. Entonces voy a copiar esta carpeta. Entonces abriré ese archivo en ah, revelaré en File Explorer, luego dentro de llagas. Voy a pegar esta carpeta de estilos y echemos un vistazo. ¿ Qué tenemos dentro? Entonces tenemos nuestro archivo principal, que es básicamente nuestro índice CSS o simplemente nuestro archivo principal para estilos aquí definiría, Digamos, realmente algunas clases fuera que usaremos. Te llevará mirar y ellos Son realmente simples. Nada demasiado complicado. Entonces tenemos utilidad y tu facilidad colores que importamos a Maine CSS. Por lo que ahora podemos gestionar nuestros archivos. Entonces, para utilidad aquí tenemos clases que son algo similares a las clases de utilidad bootstrap, por lo que las usaremos mucho en nuestro código. Por lo que por favor echarles un vistazo. No son tan difíciles de manejar. No tengo colores de utilidad. Estas son básicamente clases para colores. Aquí no hay nada demasiado especial. Y entonces tenemos anulación como él SS. Por lo que este año la biblioteca estoy segura de que está destinada a aplicaciones de escritorio. Por lo que algunos fuera de sus componentes no son realmente buenos para mostrarlos en dispositivos móviles y para ajustarlos para pantallas móviles. Yo un poco modifiqué su CSS Anulo un poco sus clases. Por lo que ahora se ven bien en los dispositivos móviles también. Esto es sólo para hacer que todo sea bueno. Policías echan un vistazo a todo eso. Es muy sencillo. Tan solo asegúrate de que sepas lo que está pasando. Entonces dentro de Abdel Gs, lo que necesitamos hacer, necesitamos importarlo. Entonces vamos a importar. Ah, somos estilos CSS principal igual que eso. Y también necesitamos configurar nuestro traje y avanzar. Entonces si navegamos a su página oficial y si vamos a empezar y si hacemos click en uso en Creta, reaccionamos app desde aquí, podemos ver que necesitamos importar también sus soluciones CSS por defecto copiar esta línea de código y ponerlo antes de importar nuestros estilos principales así como eso. Por lo que ahora estamos listos para ir con nuestro conflicto por ustedes. Yo Una cosa que hacer aquí es conectar realmente nuestro proyecto para conseguir ayuda. Así que abramos terminal integrada y cometamos todos fuera de nuestros archivos. Entonces primero, vamos a sumar todo al estado escénico, y luego nos vamos a comprometer. Digamos que andamios el arriba algo así. Ahora mismo vamos a abrir Teoh. Estamos conseguirle cuenta. Entonces vamos a crear un repositorio. Entonces le daremos un nombre a su app de chat. Hagámoslo privado, y vamos a crear un nuevo repositorio Justo después de eso, podemos copiar este comando en la parte inferior. Obtener a distancia en origen. Copiémoslo y pacer en nuestra terminal. Ahora nuestros archivos locales lo van a asociar a este repositorio remoto y necesitamos empujar nuestros cambios locales en línea para conseguirla. Usemos get push origin mostaza. Y ahora echemos un vistazo para que todo esté desplegado. Si actualizamos la página, nuestro proyecto estará en línea. Entonces lo tenemos todo. Chraidi. Y en el siguiente video comenzaremos a construir. Nos vemos allí 100. Crear y configurar el proyecto de Firebase: Oye, en este video, vamos a crear un nuevo proyecto firebase y editarlo a nuestra aplicación. Vámonos. Entonces abramos Google. Y aquí vamos a teclear base de fuego. Entonces abramos primero tu L y terminaremos en base de fuego. Página web oficial. Dado que Fire Base forma parte de la plataforma Google Cloud, Google gestiona todo. Significa que no necesitamos crear una cuenta nueva o algo así. Si tenemos una cuenta de Google, que supongo que todos sí, entonces asociaremos nuestra cuenta de Google con Firebase Project. Entonces vamos a dar click en Empezar y aquí hacemos click en Agregar Nuevo Proyecto. Entonces vamos a especificar nuevo nombre del proyecto, que va a ser chat Web app. Digamos entonces vamos a dar click en Continuar. Entonces desactivemos Google Analytics. En realidad no lo necesitamos. Y esperemos unos minutos hasta que se cree nuestro proyecto. Está bien, bien. Parece que el proyecto está listo. Sigamos. Después terminamos en el salpicadero de la base de incendios. Por lo que desde aquí vamos a manejar todo. Y como pueden ver, actualmente estamos en el plan de chispas, por lo que significa que no se nos cobrará nada. Muy bien, ahora necesitamos agregar nuestra aplicación Web a nuestro proyecto firebase. Así que vamos a hacer clic en este botón de configuración y luego elegir la configuración del proyecto. Entonces, aquí en la parte inferior, veremos a nuestros APS desde aquí. Vamos a hacer clic en esta aplicación de laboratorio, y luego vamos a introducir el nombre de nuestra app, que va a ser, Digamos, solo chatea y no vamos a configurar el hosting firebase. Demos click en Registrarse. También tomará unos segundos, y en este momento nuestra aplicación está lista. Vamos a dar click en, Continuar a la asesoría. Ahora necesitamos configurar servicios que usaremos dentro de nuestra aplicación. Entonces primero, vamos a configurar base de datos. Entonces vamos a dar click en él. Y en esta página somos capaces de configurar ya sea cloud fire Store o base de datos en tiempo real, así que asegúrate de no usar Cloud Fire Store. Utilizas una base de datos en tiempo real aquí en la parte inferior, así que hagamos clic, creemos base de datos y seleccionemos inicio en modo bloqueado para que todas nuestras reglas sean vistas hacia abajo. OK, entonces vamos a habilitarlo, y tomará unos segundos solo crear una nueva base de datos para nosotros. Está bien, ya está hecho. Ahora necesitamos configurar también el almacenamiento para nuestra aplicación. Entonces vamos a dar click en él y luego empezar. Nos pedirá reglas. Vamos a dar click a continuación. Entonces necesitamos seleccionar ubicación para nuestro almacenamiento. Es muy importante y realmente influye en esta velocidad, así que solo selecciona la más cercana a ti. Para mí, es algo, supongo, con Europa. Por lo que selecciono Europa Oeste tres. Después hago clic en Estiércol y tomará unos segundos crear una nueva historia para nosotros. Esperemos. Está bien, Perfecto. Parece que el almacenamiento está listo. Nuestra última cosa es configurar la autenticación para nuestra aplicación. Entonces, vamos a hacer clic en la autenticación aquí. No tenemos ningún usuario registrado. Por ahora, vamos a dar click en Signo y Método, y desde aquí podemos ver todos los proveedores de firma que podemos usar. No usaremos el correo electrónico, y la contraseña usará sólo Google y Facebook. Entonces primero, vamos a dar click en él. Y luego vamos a hacer clic en habilitar así. Entonces seleccionemos soporte y correo electrónico y luego proyectemos nombre público frente. Vamos a decir tal vez algo como chat, app y vamos a hacer clic seguro, y después de eso va a configurar todo automáticamente. No necesitamos preocuparnos por nada. Google Sinan ya está habilitado. Ahora, ¿qué pasa con Facebook? Inicia sesión Así que vamos a dar click en él. Y desde aquí no tendremos ninguna configuración automática. Tenemos que hacerlo manualmente. Así que vamos a dar click en habilitar aquí. Tenemos que rellenar APP, idea app secret. Y necesitamos usar esto. Redirige tu l Entonces, ¿qué tenemos que hacer dentro de Google? Necesitamos teclear desarrollador de Facebook. Entonces vamos a ir a Facebook para desarrolladores. Y aquí en esta página en la parte superior, vamos a dar click en mi APS y desde aquí vamos a dar click en Crear APP, vamos seleccionados. Y este nombre de juego va a ser algo así como gráficos recién disparados lloraron. Todo bien entonces vamos a dar click en Crear aplicación I d. Entonces vamos a realizar comprobación de seguridad enviada y ah fueron se creará aplicación de Facebook . Entonces desde aquí lo que tenemos que hacer necesitamos ir a ajustes, luego ir a básico Y aquí encontraremos nuestra app yo d y hasta secreto. Llamemos a p app I d y luego pasarlo por aquí. Entonces necesitamos también obtener nuestro secreto de aplicación. Vamos a dar click en show y vamos a llamarlo también y pegarlo aquí dentro de la base de fuego. Y también tenemos que sumar esto. Redirige tu l aquí, vamos a copiarlo. Entonces vamos a guardar nuestros cambios. Y aquí bajo Prokes, vamos a dar click en plus Firmar. Por lo que cuando hacemos clic en él, necesitamos seleccionar Facebook. Mira y vamos a dar click en Configurar. Y luego tenemos que seleccionar que vamos a poder iniciar sesión en Web, luego sitio tu l. no lo sé. Simplemente pon algo que realmente no importa. En realidad, no, no necesitamos esto. Hagamos click en ajustes porque ya tenemos Facebook. Logan en ello Fue apenas inicio rápido desde el equipo de Facebook. Por lo que aquí para estos válidos Redirecciona tu mas necesitamos añadir este tu l que tenemos en base de fuego . Entonces sólo asegúrate de que esté aquí. Por lo que ahora es editar. Hagamos click en guardar cambios. Y ahora nuestra aplicación de Facebook está lista. Entonces vamos a guardarlo. Y ahora nuestro Facebook en configurarlo y lo configuramos todo dentro de la web firebase . Ahora en realidad podemos añadirlo a nuestro código. Entonces volvamos al código V s y a partir de aquí. Abrimos primero nuestra terminal. Creo que tenemos que hacer necesitamos instalar Global Seelye desde base de fuego. Entonces para esto, vamos a escribir NPM instalar Dash G firebase tools e instalarlo. Ya lo tengo en mi máquina, así que no lo voy a instalar dos veces después de eso. Cuando tenemos estas herramientas de base de fuego, necesitamos escribir base de fuego en ella y eso es todo. Después de eso, te lo pedirá. Autómese usted mismo, por favor complete las instrucciones. Y después de eso, cuando ejecute este comando, voy a ver esto luz en el trabajo. Por lo que estoy listo para proceder. Sí. Entonces necesito seleccionar los servicios que quiero inicializar. Por lo que necesito sólo base de datos. Por lo que navego con flechas y selecciono con espacio y ademas necesito hosting Onley. Esos dos no seleccionan almacenamiento. Entonces pego Enter Entonces elegiré usar un proyecto existente y luego voy a seleccionar chat Web app que acabo de crear. Seleccioné qué archivo se debe usar para rollos de residuos posteriores. Vamos a golpear sólo entrar de qué directorio público quiero usar en lugar de público. Vamos a escribir construido y luego quiero configurar mi aplicación como una aplicación de una sola página. Eso es cierto. Entonces, vamos a dar click. Sí, y el HTML de índice construido ya existe sobre, ¿verdad? Sí. Yo quiero que anules. Muy bien ahora. La base de fuego es asociativa. Digamos que nuestro proyecto remoto que acabamos de crear aquel asociado a nuestro proyecto local podemos ver Firebase Jason Fire Besar Ver que contiene nuestro proyecto I d que dentro las reglas de base de datos. Tenemos nuestras reglas de base de datos y dentro de firebase Jason, tenemos nuestra descripción de proyecto digamos. Por lo que para bases de datos se implementan reglas desde ese archivo para hosting, tenemos carpeta pública, que se construye. Entonces tenemos ignorar archivos que no desplegaremos en el hosting firebase y también reescribe. Entonces, ¿recuerdas cuando intentamos subir nuestro proyecto en hip hop? Entonces cuando refrescamos la página, no nos encontraron. Entonces esto se debe a que tenemos aplicación de una sola página y Firebase resuelve este problema con tan solo escribir todas las rutas y configurarlo para rap de una sola página. Por lo que no vamos a tener ningún problema con eso. Está bien, así que eso es todo. Ahora en realidad podemos instalar biblioteca en nuestro proyecto. Entonces para eso, solo tecleemos PM install firebase. Y esperemos hasta que se haga. Muy bien, tenemos firebase instalada como biblioteca. Ahora lo que tenemos que hacer bajo carpeta fuente vamos a crear en tu carpeta que vamos a nombrar MISC y aquí vamos a crear un nuevo archivo firebase dot gs. Aquí configuraremos nuestra base de fuego dentro de nuestra app. Entonces primero pensamos que tenemos que hacer tenemos que volver a la página web, luego volver de nuevo a la configuración del proyecto. Y si nos desplazamos hacia abajo desde aquí, podemos encontrar este conflicto de base de fuego. Entonces vamos a copiar eso. Y aquí vamos a crear un nuevo valioso digamos, solo conflicto constante y vamos a pegarlo así como así ahora capaz. También importar bibliotecas firebase. Por lo que vamos a teclear base de fuego de importación desde la aplicación firebase. Es importante no importar desde firebase porque importará toda la biblioteca y toda la biblioteca es realmente, realmente grande, y agregará todos los archivos de ella. Entonces nos aseguramos de que solo importamos app firebase que lo que necesitamos hacer necesitamos llamar fire base dar inicializar app y dentro Necesitamos votar nuestro archivo de conflicto Así que pongamos ven grueso. Y ahora esto para inicializar la aplicación regresa como una instancia fuera de la aplicación basada en fuego. Entonces pongámoslo en un valioso vamos a asignarlo a, digamos, solo app así. Y ya estamos listos para irnos. Usando esta app valiosa, estamos listos para acceder a servicios firebase como up off ab native abejas, función Fire store, mensajería todo eso. Entonces pero esto es lo que vamos a hacer en el próximo video para cómo estamos hechos. De lo único que quiero hacer antes de terminar este video, quiero comprometer nuestros cambios para conseguir ayuda. Entonces olvidemos en punto Entonces vamos a poner, conseguir commit y diremos ese proyecto firebase inicializado Algo así. Muy bien, Perfecto. Nos vemos en el siguiente. 101. Crear páginas: rutas privadas y públicas: Oye, ahora tenemos firebase inicializada dentro de nuestro proyecto. Empecemos a construir el proyecto en sí. Lo primero que voy a hacer voy a abrir mi terminal y voy a ejecutar y PM Run empezar a desarrollar servidor. Pero justo antes de ejecutar este comentario, voy a crear nuevo archivo, que es dot e n v dot local y lo pondré en el directorio raíz y aquí rivales pacifican navegador a ninguno. Esto es para evitar y PM Ron comience a iniciar la aplicación al instante dentro de mi navegador. Por lo que realmente odio este comportamiento. Si te gusta, no hagas este navegador. Nada. Entonces ahora voy a ejecutar este comando y necesito ir manualmente al navegador y acceder al host local 3000. Entonces aquí voy a ver el mensaje hola que especifiqué dentro de Abdel Gs cuando el riesgo desdobló el proyecto. Ahora lo que tenemos que hacer necesitamos definir nuestras páginas al principio. Pero no inicializamos reaccionar rotor cuando el riesgo desplegó la aplicación así que vamos a navegar a índice togs y aquí para inicializar reactor importará rotor del navegador de reaccionar router tonto y luego necesitamos envolver nuestro componente de aplicación alrededor del navegador, componente rotativo. Y ahora somos capaces de usarlo. Está bien, bien. Vámonos. Teoh Abdel Gs y escucha qué rutas vamos a definir. Primero usemos switch en su lugar. Fuera de esto, def. Entonces voy a poner interruptor de reaccionar más rudo que dentro del interruptor. La gente define ruta. ¿ Y qué rutas debemos poner aquí? Bueno, tendremos unas rutas que encontrar, y una de ellas es firmando página y la página principal. Y el caso es que no podremos acceder a la página principal hasta que estemos firmados en la APP. Por lo que necesitamos definir algún tipo de trucha privada que sólo puede ser acceso si estamos firmados . Entonces lo que vamos a hacer lo primero que la gente lo haga creará nueva carpeta en las páginas de nombres accesibles de recursos. Aquí crearemos dos nuevos componentes y que representarán nuestras páginas. En primer lugar va a ser un letrero de página de inicio de sesión y ella está aquí. Voy a andamio y tú componente con la extensión francotirador. Y vamos a sólo para firmar así. Entonces crearé otro componente, Holmdel Gs y haré exactamente lo mismo. Y voy a nombrar un solo hogar ahora ¿Cómo podemos definir estas filas por aquí? Podemos poner ruta y luego podemos poner primer registro para que se defina esta ruta. Pero, ¿qué pasa con casa? ¿ Cómo podemos hacerlo privado para esto va a crear otro componente. Lo nombraremos ruta privada e imitará este componente de ruta que viene de reaccionar Router. Pero se mejorará y se comprobará contra alguna condición. Entonces bajo llagas, vamos a crear nuevos componentes de carpeta Aquí vamos a poner nuevo archivo ruta privada al igual que eso. Por lo que imitará este componente de ruta. Entonces, ¿cómo es pacificar este componente de ruta? ¿ A qué problemas nos encaminamos? Lo que los Niños hacen un camino. Por lo que necesitamos especificar ruta. Entonces para firmarlo va a ser solo firmando. Entonces ahora sobre el privado Rauer. Entonces definamos cómo lo vamos a usar. Por lo que va a ser ruta privada en el interior. Tenemos que verter un componente o simplemente Niños que queremos renderizar. Va a ser nuestra página principal así como así y para utilería. Tenemos que especificar también que vamos a renderizar este componente en tan solo slash. De acuerdo, ahora dentro de ruta privada. Sabemos que cualquier cosa que pasemos a este componente viajado privado como utilería será en realidad una especie de redirigido a este componente de ruta. Entonces aquí vamos a d estructurar todo y ponerlo dentro. Digamos apoyos de ruta. El único propiamente que necesitamos sacar de ella son los Niños reales que queremos renderizar. Entonces vamos a d estructurar Niños y todo lo demás estará disponible bajo apoyos de ruta. Y necesitamos verter una condición simple por aquí. Digamos que por ahora. Ya que no tenemos ningún perfil, vamos a crear el toro invaluable Digamos perfil y ponerlo en falso. Y ahora qué vamos a hacer vamos a preguntar si nuestro perfil está puesto en tontos. Si no tenemos ningún perfil, entonces vamos a regresar y tu componente que no hemos usado antes de que se vaya a redirigir, que también viene de reaccionar paquete rotor. Y este redireccionamiento básicamente se redirigirá para especificar pase. Por lo que recibe sólo un prop, que es para y para que esto especificará. Entonces si no tenemos ningún signo y dato. Si no tenemos perfil, redireccionaremos a la firma. Está bien. Bastante simple. Ahora bien, si esta condición no toma lugar, entonces normalmente usaríamos nuestro componente que pasamos como Niños. Entonces en lugar de devolver este def, simplemente regresaremos ruta de reaccionar rotor de cuatro apoyos. Vamos a especificar todos los apoyos que lo reunamos a partir de aquí. Entonces los vamos a difundir por este componente de ruta con sólo esta sintaxis y dentro del pasado verbal Niños igual que eso. Y si lo guardamos, vamos a comprobarlo. Si realmente funcionó ahora, si intentaré acceder a slash a slash home page, me redirigirán al instante porque siempre tenemos condición falsa. Por lo que significa que siempre seremos redirigidos a la página de inicio de sesión. Entonces si dije que es demasiado cierto ahora si voy a intentar acceder a la página principal, estaré ahí. Entonces esto es todo. Es así como podemos hacer la ruta privada. Y además, cuando estamos iniciados, no queremos ver la página de inicio de sesión. Queremos ser redirigidos también a, digamos, a nuestro tablero o a la página principal. Entonces lo que podamos hacer, vamos a crear otro componente al que llamaremos público público público público público. Entonces vamos a crear ruta pública. No lo hagas Sí, y en realidad vamos a copiar todo de ruta privada. Y aquí, vamos a renombrar ruta privada a ruta pública. Y aquí la cosa será la siguiente. Entonces si tenemos perfil, entonces vamos a ser redirigidos a la página principal. De esta manera, si estamos iniciados, no podremos ver la página de inicio de sesión donde se redirigirá instantáneamente a domicilio. Entonces la lógica es una especie de la misma. Pero se invierte ahora cómo podemos realmente es muchedumbre desechable en realidad de la misma manera que usamos nuestro privado voy. Entonces aquí, en lugar de solo ruta será pobre público Rauer que importamos desde la carpeta Components. Ahora no necesitamos esta importación desde el router de reaccionar. Vamos a guardarlo. Y en realidad nada va a cambiar porque no tenemos ningún dato para el perfil. Entonces eso es básicamente todo. Es así como somos capaces de gestionar nuestras multitudes privadas y públicas en el router reaccionar. Ahora cometamos nuestros cambios y terminemos este video, así que vamos a poner llegar a todo, entonces vamos a comprometer nuestro mensaje creado rutas públicas y privadas para bien. En el siguiente video, comenzaremos a construir la página de inicio de sesión. Nos vemos ahí. 102. Página de inicio: interacción con Firebase: Hey, bienvenido en este video, vamos a empezar a construir página de diseño. Vámonos. Antes de que empecemos. Yo sólo quiero mencionar que vamos a usar el traje reaccionar. Tú. ¿ Por qué biblioteca que hemos instalado? Lo vamos a utilizar mucho. Por lo que por favor abra esta documentación en su siguiente paso, que siempre tenga acceso a ella. Así que vaya a la página principal, luego haga clic en los componentes. Y aquí en esta página puedes encontrar todos los componentes que esta biblioteca nos proporciona poniente. Es muy sencillo de usar, y todos son en su mayoría intuitivos. Entonces digamos que si vamos al componente de botón desde aquí en cada página de la empresa, puedes encontrar muchos ejemplos y casos de uso diferentes. Y además, si haces click en mostró la fuente, confías cómo se puede utilizar este componente en tu abrigo. Siempre puedes copiarlo y pegarlo. Y además, si solo necesitas saber qué componente recibe como utilería, puedes desplazarte hacia abajo hasta el fondo y confías todos los apoyos posibles que se pueden transmitir a este componente en particular. Está bien, así que dentro de nuestro código, cuando voy a escribir esto, no voy a hacer referencia Puede que sean algunas veces, pero la mayoría de las veces, porque es mejor intuitivo. No voy a explicarlo. Entonces si aún no sabes qué va a pasar, por favor navega a esta documentación. Está bien, así que empecemos. Por lo que vamos a navegar a nuestro código y vamos a abrir la página de inicio de sesión. Y aquí vamos a empezar primero, vamos a quitar este def, y vamos a poner componente contenedor de nuestro traje. Se podría pensar que es muy similar a contender desde bootstrap porque es contenedor tener alguna vez en esta biblioteca. No lo es. Simplemente nos da el display off Flex. Entonces vamos a usar arenilla. Y en esta biblioteca, genial es más o menos lo mismo que en Bootstrap. Pero a diferencia de Bootstrap, tiene sistema de 24 columnas. A diferencia de las botas, gota con 12 peines. Muy bien, entonces dentro de rejilla, tenemos crecer y dentro de fila, tenemos columna así. Por lo que nuestro colon va a ser salud fuera de su máximo con dispositivos en medios. Por lo que en dispositivos muy pequeños, vamos a pobres viejos 24 columnas en medio y arriba. Vamos a poner 12 ahora, dentro de esta columna vamos a poner componente de panel, y básicamente nos va a dar unos cuantos fuera de palmaditas. OK, entonces adentro vamos a poner def. Y dentro de esta difícil definir edad a etiquetar que dirá, Bienvenido al chat Debajo pondremos Pitak que dirá, plataforma de chat progresiva cuatro peleas de comida, algo así. Está bien, vamos a comprobarlo. Si refresco la página, puedo ver este extraño, extraño fondo. Eso es porque importé columna de nuestro traje Leap Carrusel. Yo no quería esto. Esto es un poco complicado cuando utilizas intel exterior Essence asegúrate de importarlo solo de nuestro traje. Si lo guardo ahora, puedo ver que realmente funcionó. No obstante, nuestro texto no está centrado. Queremos hacerlo centro para que podamos usar una de nuestras clases de utilidades que pobres dentro utilidad, como aquí dice, y son casi como bootstrap, por lo que podemos definir nombre de clase, centro de texto y lo hará trabajo. No obstante, podemos ver que si inspeccionamos, nuestro componente no está completamente centrado en dispositivos grandes. No obstante, en el móvil, está bien. Eso es porque cuando aplicamos este sistema de 12 columnas, nuestro elemento no lo es, Digamos que lo tiremos. Tenemos que aplicar. Offset. Otra vez es muy similar, como en Bootstrap. Por lo que para 12 columnas necesitamos aplicar Offset off seis columnas antes que él. Entonces vamos a poner offset vacío de seis columnas. Y ahora mismo nuestro gran elemento se centrará, Como se puede ver a partir de este relleno de aquí. Está bien. Se ve bien ahora bajo un Disney, si vamos a poner otro def. Y aquí definiremos nuestros botones, firmando con Google e iniciaremos sesión con Facebook. Entonces primero voy a poner botón. Entonces, como utilería, pasaré. Va a ser un botón de bloque. Se quitará todo con fuera de su padre. Entonces pondré color, y lo pondré en azul. Y eso es todo por ahora. Entonces dentro de este fondo, voy a verter componente Aiken de nuestro traje, y como pueda, voy a especificar puedo apuntalar cuatro Facebook así como así. Y luego pondré un texto sencillo, seguiré con Facebook, pero capitalizado y lo mismo haré por firmar con Google. Voy a especificar un color verde. Y en lugar de frasebook, puedo voy a especificar Google Aiken y luego seguir con Google así como así. Ahora, ¿qué hay de echar un vistazo? De acuerdo, parece bien, pero queremos agregar algún margen. Entonces para Disney, si pongamos nombre de clase y margen top tres, algo así. OK, se ve bien. Ahora tenemos que hacerlo así de centrar verticalmente. O tal vez a algún margen a los elementos superiores. Por lo que se ve más bonito. Entonces para este gran componente, vamos a definir nombre de clase, y vamos a poner margen página superior. Entonces esta es clase que definí en uno fuera de los archivos de utilidad, por lo que solo da mucho margen a los elementos. Entonces si lo inspeccionamos como puedes ver, margen top nos da 150 picos más. Está bien, así que se ve bien. Ahora bien, ¿qué pasa con la funcionalidad? Cómo realmente podemos manejar nuestro fichaje y finalmente empezar a agregar esta ciencia de Facebook y Google . Entonces, ¿qué necesitamos hacer dentro de Firebase gs donde inicializamos nuestra aplicación? Tenemos que importar fuera de la biblioteca desde la base de incendios. Entonces aquí vamos a importar firebase fuera así. Entonces aquí bajo app, vamos a exportar const in available, que nombrará justo fuera y llamaremos app dot off y nos dará el objeto que podemos usar para interactuar con la base de fuego. Entonces vamos a guardarlo dentro de la firma. Vamos a definir nuestros manejadores para on click event para botones. Entonces vamos a ponernos primero, digamos que Facebook inicia sesión, y luego haré lo mismo para Google en Google firmando y su funcionalidad es casi la misma. Entonces voy a crear 1/3 función que llamaré dentro en Facebook firmando y dentro en firma de Google. Por lo que le nombraremos algo así como iniciar sesión con proveedor y proveedor como Facebook o Google. Muy bien, entonces como argumento recibirá a este proveedor y luego haremos algún think insight. Por lo que dentro en Facebook, inicia sesión. Vamos a llamar, iniciar sesión con proveedor y Rubble pase un proveedor hablará un proveedor de pelea en un momento y aquí también firmando con proveedor ahora cómo podemos realmente firmar así dentro firmando con proveedor, nosotros solo puede teclear e importado de nuestro archivo misc firebase este objeto off que obtuvimos de aquí Si acabamos de poner punto de la inteligencia. Podemos ver muchas cosas fuera que suceden por aquí. Podemos acceder al usuario actual. Podemos confirmar reset password y diferente. Si solo escribimos firma, aquí podemos tener cosas diferentes. Nos consignamos con correo electrónico y contraseña con número de teléfono con pope arriba con redireccionamiento. Por lo que pasan muchas cosas aquí nos interesa firmar con pop up y si llamamos a esto montado en el interior, necesitamos pasar al proveedor y se va a proporcionar que vamos a recibir como argumento . Entonces lo pondremos aquí. Entonces, ¿qué es este proveedor? Por lo que este objeto proveedor necesitamos importar desde, Digamos, biblioteca firebase y es estático. Entonces lo que tenemos que hacer aquí, necesitamos importar base de fuego desde firebase slash AP nuevamente, es importante importar desde firebase slash ap Así que aquí, como proveedor, vamos a pasar nueva firebase dot auth dot facebook off provider y necesitamos llamarlo nos devolverá y tu proveedor objeto que pasaremos como indocumentados a disfunción y el mismo rebelde hacer para la firma de Google. Vamos a apagar nueva base de fuego, pero esta vez Google fuera de proveedor igual que eso. Ahora, ¿qué es realmente asociar esto? Manejadores con botones. Entonces para en evento click para patrón de Facebook vamos a poner en Facebook firma y para Google, vamos a poner en click en Google, Inicia sesión así como eso. Está bien, se ve bien. Ahora este fichaje con pop up si sin embargo, es una promesa. Por lo que tenemos que esperarlo. Convertimos nuestro fichaje con proveedor a en una función de fregadero y esperamos este fichaje con Pope arriba. Y luego pongamos los resultados en resultado viable. Y veamos cónsul y veamos. ¿ Qué recibimos, sin embargo, si refresco la página abrí consejo, entonces puedo ver que respondió con 400 Arkwright. Eso está bien. Demos click en Continuar con Google, por ejemplo. Está bien, se puede ver que en realidad haciendo algo, y en este momento puedo seleccionar una de mis cuentas de Google. Muy bien, vamos a seleccionar mente de mis cuentas. Y ahora se puede ver que tengo resultado por aquí. Por lo que es un objeto que tiene tres objetos diferentes información adicional del usuario para que podamos ver que este es nuestro nuevo usuario. Podemos obtener correo electrónico nombre dado, ideas diferentes. Podemos obtener foto si se verifica nuestro correo electrónico. Por lo que estos datos provienen de Google y se puede ver proveedor. Eso le degollo a Google. Después tenemos credencial, diferentes tokens de acceso y luego tenemos objeto de usuario. Por lo que este objeto de usuario representa actualmente firmado en usuario. Es general. Y desde aquí podemos entender si nuestro usuario ha iniciado sesión. No lo estamos. Hablaremos de este objeto de usuario en detalles en próximos videos. Entonces ahora lo que podemos hacer En realidad podemos volver a Firebase Debilitar, Ir a la autenticación. Aquí podemos recargar nuestra autenticación. Digamos que inicie sesión en base de datos. Y aquí limitamos nuestro correo electrónico con proveedor cuando fue creado y creado Usuario I d. Entonces, primer lugar, esto no es una base de datos. Esto es igual que una pequeña base de datos dentro de esta biblioteca de autenticación. Todavía necesitamos almacenar a nuestros usuarios dentro de la base de datos. Esto es sólo para rastrear. ¿ Cuántos usuarios hemos iniciado sesión dentro de nuestra app o algo así? Muy bien, así que ahora en realidad modifiquemos ligeramente nuestro código y almacenemos a nuestro usuario dentro de la base de datos. Entonces, en primer lugar, déjame poner, tratar , atrapar, mirar por aquí porque trabajamos con promesas y queremos asegurarnos de que siempre manejamos cualquier otro. Y por cierto, solo para notificar al usuario que actualmente iniciamos sesión o si tenemos algún error, podemos utilizar el componente de alerta que nuevamente viene de nuestro traje. Entonces si tenemos algún error, vamos a llamar a alerta, y luego si ponemos punto podemos ver podemos tener acceso a atter info y mensajes de éxito y advertencia . Entonces pongamos por mensaje. Entonces como primer argumento, vamos a poner error ese mensaje, y luego tenemos que poner la duración fuera de este mensaje de alerta. Entonces vamos a pobres por segundos en especificado en milisegundos. Y si estamos firmados, vamos a poner alerta. Digamos que el éxito. Y luego vamos a poner firmado con otra vez tiempo fuera fuera cuatro segundos. Está bien. Parece bueno. Ahora qué podemos hacer con ese resultado. Como recuerdan, recibimos un objeto. Recibimos información adicional de usuario y también recibimos objeto de usuario. Ahora, al comprobar si la información adicional del usuario es tu usuario, por lo que si nuestro usuario es el que actualmente se está firmando, es un nuevo usuario la almacenará dentro de la base de datos. Entonces, ¿cómo podemos hacer eso? Volvamos a navegar de nuevo a Firebase Thaci s aquí. Vamos a importar otra biblioteca, que va a ser base de datos de barra de fuego para interactuar con la base de datos y similar a off. Vamos a exportar base de datos const ap dot base de datos así. Por lo que bajo esta base de datos, valiosa podemos interactuar con base de datos. Vamos a saborear así desde adentro firmando, vamos a referir base de datos, que importamos de misc firebase. Entonces vamos a poner punto aquí. Tenemos que especificar referencia, que es básicamente camino en nuestra base de datos en la tienda ritual nuestros datos. Entonces vamos a almacenar nuestra información de usuario bajo perfiles slash slash usuario i d Así que vamos a abrir la interpolación de cadenas. Y como usuario I d. vamos a referenciar usuario dot Podemos tener visualización de correo electrónico, nombre retrasado y muchas otras cosas relacionadas con este usuario. Pero nos interesa el usuario I d. Entonces este usuario yo d va a ser el mismo que este usuario. D dentro de la biblioteca de autenticación. Por lo que va a ser como creamos un nuevo usuario. Se ha agregado a la autenticación el usuario I d se genera automáticamente, y luego usaremos este usuario I d para almacenar al usuario dentro de la base de datos. Muy bien, entonces ahora cuando tengamos la referencia, podemos poner otro punto Y desde aquí, necesitamos llamar al método del SAT. Y como se puede ver en la descripción, escribe datos en esta ubicación de base de datos. Entonces si lo llamo aquí, almacenaremos un objeto porque tenemos formas de datos basadas adyacentes. Entonces nuestro objeto va a verse así. Tendremos nombre y nombre va a ser usuario dot display name. Entonces también habremos creado en el que diremos, cuando se haya creado la cuenta. Por lo que para poner vamos a una marca de tiempo adecuada a nuestra base de datos otra vez necesita usar algo estático. Veamos propiedad que viene de la Biblioteca Firebase. Por lo que obtenemos un reporte firebase dot base de datos punto servidor marca de tiempo punto, y pondrá sello de tiempo sanitizado a nuestra base de datos. Está bien, así que este punto dicho también devuelve esa promesa. Entonces cada vez que hacemos algo con base de datos o lo que sea, interactuamos con cualquier cosa. Lo más probable es que vayamos a interactuar con promesas. Entonces por eso necesitamos esperarlo y todo quedará atrapado por este bloque catch y el usuario será notificado. De acuerdo, vamos a guardar todo eso porque parece, realmente mucho. Ahora vamos a dar click en, Continuar con Google. Seleccionemos mi correo electrónico y ahora estoy registrado. Pero en realidad es un realmente extraño. Eso probablemente sea porque ya tengo esta cuenta agregada Aquí, tal vez me dejaste repartir esta cuenta. Y ahora intentémoslo una vez más porque necesitamos recibir un asunto. Muy bien, entonces hacemos click en, continuamos con Google, luego vamos a volver a seleccionar nuestra cuenta. Y ahora tenemos permiso denegado esta noche. Y tenemos esto no dentro para Pongamos punto en su mensaje. Pero la cosa es que tenemos permiso denegado y esto es porque si abrimos nuestra base de datos , bien, vamos y pinchemos, creamos base de datos. Entonces vamos a las reglas. Y aquí creamos la base de datos bloqueada por defecto. Entonces lo que sea que tratemos de hacer con la base de datos, esta noche tendremos este permiso porque, como pueden ver, tenemos permiso de lectura y derechos establecido para que caiga por todos fuera de nuestra base de datos. Entonces para evitar que lo que podemos hacer aquí justo antes de decir estas reglas, vamos a decir eso para perfiles, y tenemos que desafiar digamos, esque EBA para nuestras reglas de seguridad. Y no es esa forma estándar de definir algo con seguridad, pero solo toma tiempo acostumbrarse. Confía en mí, es muy fácil trabajar con. Por lo que tenemos nuestro camino de perfiles. Sólo tenemos que seguir el pasado. Por lo que almacenamos nuestros datos bajo perfiles barra usuario i d. Así que lo vamos a poner como un objeto. Entonces tenemos perfiles, entonces vamos a necesitar poner una llave. Y como va a ser algo dinámico que va a cambiar, vamos a poner un signo de dólar, y luego podemos poner algo como usuario, i d Esto es sólo para referirlo dentro de objeto anidado. Déjame explicarte a qué me refiero. Entonces bajo este pasado, vamos a abrir otra vez otro objeto, y dentro, vamos a poner otra llave que va a ser dot treat y dot ¿Verdad? Exactamente lo mismo que tenemos aquí. Entonces para punto Lee lo que vamos a hacer. Vamos a hacer referencia si este usuario i d. que recibimos de aquí. Ahora va como disponible. Podemos referirlo dentro de este ámbito. Digamos que acabo de destacar. Entonces si el usuario yo d cual es que uno iguala fuera y fuera aquí en esto digamos contexto off rules es un valioso global al que podemos acceder para que podamos leer datos de perfiles slash usuario i d. Sólo un usuario i d Eso podríamos tratar de acceder nos iguala usuario dot i d. Así que significa, en realidad, sólo el propietario fuera de este documento. Sólo el usuario real puede leer sus propios datos. Cualquier otra persona, cualquier otro usuario obtendrá acceso denegado. De acuerdo, así es como definimos las reglas para no tratar. Entonces vamos a copiarlo y vamos a aplicar lo mismo para el punto ¿Verdad? Entonces, ¿qué va a pasar aquí? Cómo entenderá los dos años firmados en Bueno, volvamos al código cuando llamemos a este inicio de sesión con pop Pop. Ahora nuestro usuario está conectado internamente a los servicios de firebase. Entonces cuando tratemos de acceder a base de datos después, firebase la recogerá y este usuario I d será conocido por la base de datos y va a ser este usuario auth dot i d. Y entonces lo revisaremos contra la ruta que escribimos. Ahora vamos a dar click en Publicar. De acuerdo, publicado Reglas. Ahora volvamos a la base de datos y en realidad, vamos a copiar, Visita ALS y vamos a pegarlos, también. Reglas de base de datos a Jason. Por lo que siempre están ahí. ¿ Verdad? Después vuelve a la autenticación. Eliminemos a este usuario y empecemos de nuevo. Por lo que voy a dar click en, Continuar con Google. Voy a seleccionar mi cuenta, y ahora no tengo ningún error. Ahora, estoy inscrito. Entonces ahora si vuelvo a la base de datos, puedo ver que tengo datos. Tengo perfiles y que tengo usuario me d exactamente lo mismo que tenemos aquí. Entonces así es como funciona con base de fuego. Está bien, entonces si lo ampliamos, podemos ver que tenemos nuestro nombre, que se enfría 16 que es mi nombre en la cuenta de Google. Y entonces hemos creado a la que se almacena milisegundos internamente por base de fuego. Muy bien, entonces ahora creamos al usuario y gestionamos nuestra página de firma. Enhorabuena. Supongo que no fue demasiado complicado para ti. porque aquí hay un montón de cosas que cubrir. Firmar entrada que esta base de datos que las reglas de seguridad. Y todo va a la vez. Sé que eso es duro, pero confía en mí, sólo déjalo ir después de una hora o tal vez un día cuando le echarás un vistazo a todo eso una vez más. No será tan complicado. Está bien, así que cometamos nuestros cambios y terminemos este video, así que vamos a tirar, ponernos en todo, y luego vamos a cometer algo como editar inicio de sesión página y firmar y con facebook slash Go chica. Está bien. Perfecto. En el siguiente video, continuaremos nuestra charla con la autenticación, e iniciaremos nuestra gestión de usuarios. Nos vemos eso. 103. Crear contorno de perfil - API de Context y la gestión del estado global global: Oye, en este video, me gustaría hablar de contexto, un p I y de gestión estatal global. Cuando se trata de administrar el perfil de usuario cómo podemos acercarnos a esto, sabemos que debe ser accesible globalmente la mayor parte del tiempo dentro de cada componente. Imagina un componente muy menos en la APP. Este componente necesita mostrar nombre de usuario que actualmente está firmado en cuestión es donde gestionamos este usuario exactamente. Supongamos en el componente APP. Entonces para obtener nombre de usuario, debemos pasarlo a través de los apoyos a cada siguiente componente todo el camino por el árbol. Pero esto no es genial. Tenemos, como, como, 10 componentes arriba, y cada componente está jugando un papel en que esto se llama perforación de prop. Cuando se está pasando algún valor, los apoyos en niveles mucho fuera de profundidad, esto no es bueno y se debe evitar para evitar problemas arrodillados. Hay contexto, un P I en reaccionar. Introduce el concepto off provider y consumidor proveedor es un componente que proporciona todos sus Niños algún valor o contexto. El consumidor es un componente que consume el contexto y obtiene el valor usando el contexto. AP I. Podemos gestionar fácilmente a nuestro usuario en componente proveedor y luego consumidores. En cualquier componente. Queremos evitar la perforación de sondas y componentes intermediarios. Crearíamos contexto de usuario y pondríamos nombre de usuario como su valor. Entonces envolveríamos componente alrededor del proveedor de usuarios. Entonces básicamente todos los componentes obtienen acceso al contexto del usuario para consumirlo dentro del componente donde necesitamos obtener el valor de contexto que llamaríamos use context hook. De esa manera, somos capaces de obtener nombre de usuario desde cualquier lugar dentro de nuestra app. No hay limitaciones fuera del uso del contexto. Podemos ponerlo en cualquier parte del componente APP alrededor de la página principal alrededor del formulario de varias páginas y así sucesivamente. Muy bien, vamos a ver en realidad cómo el contexto AP I funciona en el ejemplo fuera de nuestra aplicación de chat. Vámonos. Entonces en la carpeta de recursos, vamos a crear otra carpeta que llamaremos contexto. Y aquí vamos a poner todo nuestro contexto creado. Vamos a crear nuevo archivo y nombre móvil no tal vez contexto de usuario, sino contexto de perfil. Creo que es más adecuado en nuestro caso, Así que pongamos perfil dot context perrito s. Entonces, ¿cuál es nuestra estrategia? Vamos a crear este contexto y lo vamos a poner dentro de nuestro componente APP, para que cualquier otro componente dentro de nuestra aplicación pueda obtener acceso a él. Entonces, ¿qué necesitamos dio para crear un contexto? Simplemente necesitamos llamar a crear contexto que provenga de reaccionar paquete. Entonces pongámoslo en disponible. Y digamos que va a ser contexto de perfil igual que eso. Ahora necesitamos crear un proveedor, un componente, un componente, y que brinde a todos sus Niños este contexto de perfil. Entonces vamos a pobres exportar CONST. Proveedor de perfiles. Y va a ser un componente. Entonces esta va a ser una función igual a esa. Muy bien, ahora ¿qué necesitamos abordar aquí? ¿ A qué se va a devolver? Se va a devolver perfil context dot provider Y luego dentro de este proveedor, necesitamos soporte todos fuera de nuestros componentes, lo que sea que pasemos dentro. Entonces van a ser nuestros Hijos. Este proveedor de perfiles es solo un rapero, Así que vamos a destruirlo como un prop por aquí y ponerlo dentro del componente proveedor igual que eso. Está bien, ahora, si tenemos o podemos ver reaccionar debe estar en alcance. Muy bien, déjame importar reaccionar. Y algunas personas se deshacen de esta advertencia ahora cómo somos capaces de hacer realmente cualquier cosa. Entonces, debido a que este es un componente, podemos hacer nuestra gestión estatal directamente por aquí. Navegemos Teoh nuestra ruta privada, y aquí sabemos que ponemos esto por ahora. Ponemos en valor a este toro. Esto simplemente cae por defecto. Entonces vamos a tratar eso y él consumirá nuestro contexto. Entonces pongamos esto. Digamos, lingotes. Dentro de este contexto, vamos a crear, Vamos a ver perfil y dicho Perfil como estado usado, que va a ser, digamos, Abul en valor por ahora, solo para demostrar cómo el contexto funciona con el fin de pasar a valor a estos contextos, necesitamos ponerlo como un prop para proporcionar su componente por aquí. Y necesitamos pasar nuestro perfil así como así y vamos a conocer perfil establecido. Simplemente no lo destruyamos así. Está bien, estamos listos para irnos. Esto es todo. Es así como podemos gestionar nuestro contexto ahora para usarlo realmente dentro de nuestra aplicación dentro de nuestro componente. Tenemos que ponerlo aquí en componente de la aplicación justo alrededor del interruptor. Entonces tecleemos lo que le llamamos proveedor de archivos raw. Y eso es todo. Y pensarán en contexto que puede ser muy personalizable porque esto es sólo un componente. Digamos si necesitamos conseguir usuario con específico I d. simplemente podemos pasar a este usuario i D como un prop, y luego podemos agarrarlo de utilería por aquí y luego poner nuestro A P I call o cualquier otra gestión estatal relacionada con este usuario en particular i d. Esto es realmente, realmente genial, Muy bien, ahora que proporcionamos todos nuestros componentes con proveedor de perfiles sin puede consumirlo. Entonces, ¿cómo podemos hacer eso? Como recuerdas mencioné usar el gancho de contexto. Entonces dentro de nuestra ruta privada, En lugar de hacer esto, simplemente podemos hacer perfil constante iguala contexto uso que viene de reaccionar paquete y luego dentro de los registros dentro de parent es es necesitamos especificar contexto que creamos. Va a ser este contexto de perfil, y es realmente tedioso referir contexto de perfil cada vez que lo llamamos con contexto de uso . Entonces para evitar eso, podemos crear otro gancho, un rapero para el contexto de perfil para hacerlo más accesible. Por lo que de contactos de perfil Sí, archivo, podríamos exportar Const. Digamos Usar perfil Hook, que se va a usar contexto, contexto de perfil igual que eso. Y ahora dice que no se puede llamar. Oh, discúlpame. Va a ser una función que devuelva lo que este contexto de uso devuelva. Y este contexto de uso nos devuelve un valor. Entonces de nuestro código, simplemente podemos llamar a perfil de uso y eliminemos el contexto de uso de aquí. Y ahora mismo, este perfil va a ser este valor que pasamos por aquí. Entonces ahora podemos comprobar si no hay perfil, entonces lo vamos a redirigir y hagamos exactamente lo mismo para el perfil público. Entonces desde aquí, en lugar de falso, vamos a poner perfil de uso, y eso es básicamente todo. Ahora ya lancé la app, Así que si tenía un fresco, nada ha cambiado. Como pueden ver, si intento acceder a la página principal, me están redireccionando para iniciar sesión por lo que no se ha cambiado nada. No obstante, ahora gestionamos nuestro perfil ya que vamos a un estado global al que podemos acceder desde cualquier componente no sólo de la multitud pública. Por lo que cada componente que está dentro del proveedor de perfiles puede acceder a su contexto. Muy bien, con contexto de uso, Hook y creamos un envoltorio alrededor de contexto de uso con contexto de perfil, el cual se utiliza perfil. Por lo que ahora como aún más fácil de usar para nosotros el acceso. Además, es muy importante mencionar que digamos que creamos este contexto de perfil. O tal vez imaginemos que desfilamos algo así como contexto de contador. Digamos 12345 bien, y dentro de nuestra app. En lugar de usarlo así, lo usamos varias veces. Así que digamos por la página de inicio de sesión que tenemos, digamos contador contador contador contador de contexto como este todo bien, y lo mismo va para casa. Entonces lo tenemos así. Ahora tenemos dos contactos diferentes. Su definición es la misma, pero son diferentes. Entonces si dentro de la página de inicio de sesión, digamos intentar y acceder al contexto fuera del mostrador, entonces llegaremos a uno. Bueno, tú, si tratamos de acceder al mismo contexto con contexto de uso, enganche dentro de la página principal pero obtendrá otro valor porque ellos también, tienen estados diferentes. Está bien, entonces es como lograr separar estados pero con una definición hace sólo para señalar que es diferente. Entonces eso es básicamente todo en el siguiente video, lo que vamos a hacer, seguiremos trabajando con nuestro proveedor de perfiles y la gente finalmente gestionó nuestro usuario de firebase firmado . Nos vemos ahí. 104. Gestión del estado del perfil global con el contexto: Hey, bienvenido en este video. Vamos a gestionar nuestro usuario firmado en firebase con contexto. AP I Vamos En el video anterior cuando llegamos a conocer contexto AP I creamos proveedor de perfiles . Entonces ahora usemos el estado real en lugar de sólo un toro de valor. Entonces vamos a reemplazar falso por nulo. Y llamemos también, Definamos la función de actualización de perfil establecido. Muy bien, entonces vamos a usar el acto Yousef para conseguir usuario de la base de fuego cuando el componente se monte. Entonces usemos tu hecho y escuchemos lo que haremos. Vamos a llamar a off Estado cambiado. Entonces desde firebase gs, vamos a usar nuestro objeto. Y si ponemos punto si tecleamos, vemos que podemos usar en ambos estados cambiados. Por lo que esto en el estado estadounidense cambió. Permitirnos suscribirnos al usuario actualmente firmado en el interior de la base de fuego. Y dentro de esta suscripción, podemos acceder fuera del objeto. Entonces pongámoslo así y para análisis. Cónsul, cierre la sesión del objeto. Ahora, si navegamos de nuevo a la app si abrimos nuestro consejo, veremos esto fuera de objeto. Y si ampliamos es exactamente el mismo objeto cuando iniciamos sesión con el ya sea Facebook o Google. Por lo que así es lo fácil que se puede manejar. Si fuéramos firmados a la app, no veríamos este objeto. Sería ahora. Entonces la cosa es por qué lo estamos viendo actualmente? Porque sesiones de gerentes de firebase para nosotros, no necesitamos implementar todo. Una vez que hayamos iniciado sesión, autor, objeto será automáticamente poblado para nosotros y gestionado para nosotros. No necesitamos hacer todo lo que necesitamos para solo iniciar sesión o cerrar sesión, y luego el objeto de usuario estará aquí. Está bien, entonces usando esta información, qué podemos hacerlo en lugar de solo Cónsul, mira, vamos a preguntar si ambos objetos existen. Si está poblada con algún valor, entonces vamos a hacer algo. De lo contrario, si este objeto Earth no es el objeto, si todavía lo está entonces el usuario no ha iniciado sesión. Por lo que esto on off state cambió, llamado al menos una vez cuando se monta el componente y si no estamos iniciados, entonces se va a configurar para saber también si salimos de la aplicación porque esta es la suscripción. Será recogido por esta convocatoria. Atrás y fuera del objeto será tal conocer. Entonces dentro de esto más vamos a establecer perfil para ahora y aquí cuando tengamos el objeto podemos llamar, establecer perfil y poner algunos datos de perfil que vamos a definir por aquí. Por lo que nuestros datos de perfil van a ser el siguiente va a ser primer usuario I d. que vamos a obtener de ambos objeto dot tu i d Que podemos ver por aquí. Y reflejará a nuestro usuario me d inthe e off muchas biblioteca que vimos en base de fuego. Y también fui usuario me d dentro de base de datos en tiempo real. Entonces también queremos tal vez correo electrónico. Entonces vamos a pasar el email de punto de objeto, y también, necesitamos nuestros datos de base de datos en tiempo real, por lo que necesitamos realmente conseguirlo aquí. Entonces lo que vamos a hacer como podamos ver, perfil ya está declarado. Está bien, tal vez menos. Simplemente nombra datos y dichos datos de perfil. De acuerdo, así que aquí para obtener datos reales de la base de datos para este usuario, necesitamos volver a llamar a base de datos desde MISC Firebase. Entonces vamos a volver a poner referencia, vamos a perfiles. Entonces vamos a verter off object dot tu i d Entonces cambiamos cotizaciones por string contar población y luego queremos verter suscripción de tiempo aéreo para nuestro líder de usuario. Entonces si algo cambió, entonces queremos que nos notifiquen al respecto. No queremos manejar todo manualmente. Entonces con base de datos en tiempo real y con realmente cualquier base de datos y base de fuego, es muy fácil. Entonces para obtener datos solo una vez llamamos método de punto una vez para poner una suscripción en tiempo real a estos datos necesitamos ponernos, entonces necesitamos llamarlo como una función y primer argumento. Tenemos que especificar el objetivo, el evento. Digamos que así sobre el valor. Queremos ejecutar este Colback. Por lo que siempre que nuestros datos en estas rutas dentro de la base de datos cambien como cualquier cosa, estos Colback serán despedidos como cada vez y vamos a recibir una instantánea. Así que vamos a la instantánea del Cónsul Luck así. Entonces ahora estamos dentro de casa porque en realidad obtenemos algunos datos de perfil. Y como recuerdan, dentro de ruta privada, verificamos contra perfil para que no veamos la página de inicio de sesión. Está bien, eso está bien. Por lo que Nuestra instantánea de datos tiene referencia de nodo clave y algunas otras cosas y meta datos relacionados con esta instantánea en estos path dentro de la base de datos. Bueno, dentro de la instantánea tenemos este método. Se llama snapshot dot value snap shirt, dark value. Y nos dará los datos de la base de datos, Informar off objeto JavaScript. Así que pongamos digamos que los datos de perfil son iguales a instantánea, no valor. Y ahora vamos a venir Salak datos de perfil como este. Vamos a comprobarlo. Ahora. Si actualizo la página, puedo ver tener un objeto con anuncio creado y nombre, que es ella se ve 16. Exactamente los mismos datos que tenemos dentro de la base de datos. Ahora, ¿qué tenemos que hacer? En realidad podemos destruir este perfil. Los datos debilitan la estructura D, el nombre y crearon eso así. Y aquí podemos mover este objeto de datos a esta suscripción así, y luego qué podemos hacer. También podemos mover esto en datos de perfil por aquí. Y para estos datos podemos poner nombre y crear al igual que eso. Por lo que nuestro perfil al final habremos nombrado creado en tu correo i D. ¿ Verdad? Entonces esto es todo. Y ahora pasamos este perfil de datos estado por el contexto. Por lo que dentro de nuestra privada afuera, también necesitamos de alguna manera hacer un seguimiento si actualmente nos están registrando. Por lo que necesitamos poner el estado de carga para poder poner un spinner o algo más. Entonces pongamos otro estado que vamos a nombrar es la carga y set se está cargando por defecto. Se va a poner en verdad. Y justo después dijimos el perfil que vamos a llamar set se está cargando y ponerlo en falso. O si no tenemos ningún perfil, vamos a llamar a Set está cargando y poner caídas también. Muy bien, Ahora esto se está cargando. Vamos a pasar junto con nuestro contexto. Entonces en lugar de simplemente pasar perfil dentro, vamos a pasar un objeto con está cargando estado y también perfil. Por lo que ahora, dentro de nuestra ruta privada, cuando usamos perfil de uso, recibimos un objeto con su perfil y objetos de perfil dentro. Entonces vamos a d estructurar nuestro perfil a partir de él y el mismo móvil hacer cuatro uso perfil. Entonces ahora lo que podemos hacer aquí, dentro privado afuera podemos usar en realidad Esto es bajando. Entonces vamos a d estructura se está cargando y lo que vamos a preguntar. Entonces vamos a poner otro si por aquí, y vamos a preguntar si nuestros datos se están cargando y aún no tenemos ningún dato de perfil. Entonces vamos a devolver contenedor de nuestro traje y dentro, vamos a poner Ley Orden. Va a ser un spinner, también un componente de nuestro traje, y se va a centrar. Se va a centrar Vertical e lobo tamaño whoops. Tamaño fuera igual a M d Entonces el contenido va a estar cargando, y la velocidad va a ser lenta. Y movámoslo para evitar que se la prestara. Vamos a moverlo justo a la cima así. Muy bien, entonces esta es nuestra primera condición, y luego necesitamos modificar también esa. Vamos a preguntar si no tenemos perfil, y si no tenemos estado de carga solamente, entonces vamos a redirigir. Está bien, así que vamos a comprobarlo. Ahora. Cuando refrescamos la página, podemos ver el spinner Bastante cool, ¿ verdad? Y sólo cuando obtenemos los datos, en realidad vemos la página de inicio. Muy bien, hagamos exactamente lo mismo para la multitud pública. Entonces vamos a copiar esta lógica y vamos a ponerla por aquí. Vamos Destructor está cargando y vamos a preguntar si tenemos está cargando y no tenemos perfil entonces vamos a poner de nuevo estado de carga como este si tenemos perfil y, bueno, podría ser un poco complicado. Entonces si tenemos perfil y está cargando se establece en falso, entonces vamos a redirigir. Muy bien, esto es básicamente todo. Yo solo quiero que Teoh haga un paso más importante aquí porque estamos trabajando con suscripciones en reaccionar. Siempre que trabajamos con oyentes en tiempo real de los datos, utilizamos una suscripción. Por lo que siempre que tengamos una suscripción, necesitamos darse de baja de ella cuando no la necesitemos. Por lo que esto en escenario estadounidense cambió. Si puedes verlo devuelve base de fuego dado de baja. Por lo que nos devuelve una función a la que necesitamos llamar para darse de baja de esta suscripción en off state cambiada. Entonces pongámoslo, digamos off on sub y cancelaremos esto en sub y nuestra función de limpieza fuera del acto Yousef . Entonces vamos a devolver una función y aquí vamos a cancelar. Entonces así como eso y lo mismo realmente aplica para nuestra referencia de base de datos por aquí. Entonces en estos pasados, ponemos un oyente en tiempo real que está en valor, y es nuestro Colback. Por lo que queremos asegurarnos de que también nos dimos de baja de esa. Entonces aquí, digamos, dentro de este uso de los hechos, vamos a verter, deja que un usuario haga referencia. Entonces vamos a asignar Usar una referencia a la base de datos de referencia en esta ruta como esta y luego usuario áspero en valor. Ejecutaremos esta devolución de llamada siempre que no tengamos ningún dato. Si nuestro usuario no ha iniciado sesión, Si no tenemos ningún otro objeto, vamos a preguntar si el usuario ref está definido. Entonces vamos a llamar, usar punto áspero apagado porque si pongo punto por aquí, me puedo poner me podría poner una vez y también puedo posponer y esto apagado como puedes ver desmonta Una devolución de llamada previamente adjunta con para que podamos. De esta manera, podemos dar de baja de estos call back desde estos path dentro de la base de datos. En realidad, mismo haremos dentro de nuestro efecto de limpieza para uso. Entonces éste cada vez que firmamos y éste cada vez que montemos el componente, Así que aquí vamos a preguntar si el usuario Raph, entonces vamos a usar un ref dot off darse de baja de esta referencia de usuario. Muy bien, entonces esto es básicamente todo. Espero que no fuera causa demasiado confusa para mí. ¿ Cuándo? Por primera vez. Cuando lo vi, lo era, pero al final, sí tiene sentido. Muy bien, cometamos nuestros cambios y terminemos este video. Vamos a poner ponerte en todo. Entonces vamos a comprometer todo con el mensaje. Algo así como el usuario de la edad del hombre con contexto de perfil Ponga riel time subs algo como esto. Está bien, nos vemos en el siguiente video. 105. Comienza a construir el Sidebar y el panel de trabajo: Hola, bienvenido. Ahora que tenemos flujo de firma completo, por fin empecemos a construir nuestra página de inicio. Empezaremos desde el sitio izquierdo. Entonces primero vamos a construir nuestros botones que lista de chatroom y luego iremos a Maine. Chatt Ventana. Vamos Así que dentro de las páginas en lugar de este def. Definamos nuestra arena. Entonces va a ser gran componente, que va a ser fluido y clase Nombre va a ser un Chuan 100. Haremos que sea de altura completa. Entonces dentro vamos a controlar elemento y luego vamos a verter elemento de columna de nuestro traje. Por lo que para dispositivos pequeños, tomará todas las columnas, que son 24 columnas y comenzando desde dispositivos medios. Vamos a ponerlo algo así como ocho. No salud, sino ocho. Y dentro de esta columna vamos a usar componente de barra lateral, pero no el que viene de nuestro traje. El que vamos a crear nosotros mismos. Vamos a guardarlo. Y bajo componentes, vamos a crear nuevo archivo, que vamos a nombrar Sidebar perrito s. Abrámoslo y vamos a pedir una carpeta para un rapping. Dave, voy a poner el nombre de la clase fuera de altura completa y luego un poco fuera de palmaditas en la parte superior. Por lo que dentro lo vamos a dividir en dos elementos. Por lo que tendremos la parte superior con nuestros botones y en la parte inferior tendremos una lista de salas de chat . Así que primero creemos def para nuestra parte superior y en la parte inferior porque aún no tenemos ninguna charla en la lista. Sólo pongamos abajo texto como este. Por lo que dentro de este diferente se verterá malabares de tablero que creará en un momento y lo guardará . Por lo que otros componentes. Vamos a crear nueva carpeta, que nombraremos aquí el informe. Bubble definió dos archivos. En primer lugar se va a indexar togs, que va a ser nuestro componente de dashboard, pero vamos a manejar todo, pero por ahora lo vamos a mantener vacío. Entonces démosle un nombre, informe papá y solo ponga hola insight y segundo elemento va a ser malabares de tablero. Entonces aquí definiremos nuestro botón y el propio drover. Entonces primero queremos deshacernos del envoltorio Div. Entonces definiré un botón por aquí, que va a ser nuestro Tobler. Digamos que va a ser un elemento de bloque. Tendrá cuello azul y por dentro iban a poner Aiken que importamos de nuestro traje. Aiken va a ser esa palabra. Y entonces el texto va a ser dashboard así. Ahora digamos en realidad con y veamos, ¿qué tenemos? Entonces si actualizamos la página dentro de la barra lateral, no tenemos dashboard hasta que vaya, Vamos a importar. Y también dentro de casa No tenemos barra lateral. Vamos a importar también. Está bien, vamos a comprobarlo. Correcto. Entonces tenemos botón. Pero cuando hacemos clic, no pasa nada. Entonces definamos nuestro componente Drover on o Drover, elemento aquí junto a Button. Voy a poner a Drover que viene de nuestro paquete de traje y no es tan elemento de cierre dentro. En realidad necesitamos verter elementos drover, pero los vamos a definir dentro de este archivo NGS adulto índice. Entonces para esta lucha, sólo necesitamos definir esta propiedad show y va a ser Debe ser un valor de bowline que indique cuándo se abra este drover. Entonces necesitamos definir sobre evento de altura y luego también necesitamos definir la colocación. En nuestro caso, va a ser a la izquierda o derecha ahora necesitamos definir realmente nuestros manejadores o estado para nuestro drover. Tenemos que hacer un seguimiento sobre su estado por nuestra cuenta. Y como vamos a tener mucho fuera de moteles o drovers en nuestra aplicación, y vamos a volver a usar mucha de la misma lógica, propuse crear una esperanza personalizada de que nombraremos use model state y expondrá solo tres elementos está abierto en altura y en exhibición. Por lo que bajo MISC, vamos a crear nuevos archivos personalizados ganchos GS. Aquí vamos a definir una nueva función, que va a ser nuestro gancho, que vamos a nombrar use model state. Recibirá valor por defecto. Digamos que el valor predeterminado, que se establecerá en falso si no está definido. interior, vamos a definir estado, y por defecto este estado será nuestro valor por defecto que pasamos como argumento y también aquí vamos a definir algunas funciones auxiliares. Digamos que sí. Primera función va a estar abierta y será un envuelto alrededor use frío de antemano para que se optimice, y él llamará, dijo ST, y lo pondremos en verdadero y lo mismo aplicaremos para cerrar. Pero en lugar de cierto, vamos a echar falso por aquí y de este gancho, vamos a devolver nuestro estado. A lo mejor vamos a renombrarlo también está abierto, y el conjunto aquí está abierto. Entonces a partir de este gancho, vamos a regresar es abrir, abrir y cerrar las funciones de ayudante. Y que no se olvide de exportar el estado modelo de este año desde ganchos personalizados. Está bien, así que dentro de Árabe o toggle, vamos a usar este estado modelo de uso que nos devuelve está abierto. Después nos vuelve cerca y abierto. Por lo que ahora podemos usarlo. Entonces en altura, vamos a especificar con nuestra propia función de ropa que definimos en el show de gancho. Es un toro en valor, por lo que poco precisar está abierto y también para nuestro botón. Cuando hacemos click en él, queremos mostrar el Drover. Por lo que para este botón para en evento click, especificaremos Solo abre. Está bien. Y ahora en realidad necesitamos poner algo dentro de Rover. Va a ser este elemento. Entonces definamos dashboard y verás que se importará de punto Significa que se importará de nuestra carpeta actual. Entonces, ¿por qué ponemos a Index Gs así? Entonces si lo usamos en cualquier otro componente, digamos dentro de las páginas y la forma en que lo importamos, va a ser así. Vamos a importar de componentes. Ese informe no especificará Dashboard Index GS porque se nombra como índice. Sí, podemos especificar sólo el nombre de la carpeta donde este índice dot gs re sitios y funcionará. Está bien, así que ahora vamos a guardar todo y echemos un vistazo. Ahora si hago clic en tablero, funcionó perfectamente. Entonces supongo que eso es todo para este video. En el siguiente video, seguiremos y haremos que nuestro mortal sea un poco más receptivo. Porque si sólo voy a hacer clic en él, si voy a, ya sabes, sólo cambiar el tamaño de la ventana, puede ver que se mantiene estática. Esto no es un comportamiento amigable para el usuario, por lo que lo arreglaremos más adelante. Pero por ahora, cometamos nuestros cambios, y diremos, iniciando o empezamos a construir el componente de barra lateral. Está bien. Perfecto. Nos vemos en el siguiente. 106. Sidebar responsivo con la consulta de medios: Hey, bienvenido en esto. Vamos a hacer que nuestro trabajo, er, er, que creamos en el video anterior respondiera. A lo que quiero decir es que ahora, si intentamos inspeccionar nuestro elemento y si abrimos Drover, si cambiamos el tamaño de la ventana, se mantiene estática. Bueno, no responde en absoluto lo que podemos hacer para arreglar esto para Drover. Ahí está disponible esta sonda, que está llena, lo que significa que Drover estará disponible para pantalla completa. Vamos a revisar esta propiedad completa y vamos a ver, ¿qué tenemos? Por lo que ahora mismo cuando lo abrimos cuando estamos en dispositivos de escritorio, podemos ver que es a pantalla completa. No obstante, si estamos en dispositivos móviles, se ve bien. Entonces, ¿qué? Debilitar a Dio? Idealmente quisiéramos habilitar esta propiedad de pantalla completa solo cuando estemos en dispositivos móviles . Entonces necesitamos que algunos lo hayan determinado programáticamente bien, realidad podemos usar consultas de medios, pero solo están disponibles y CSS Pero con ganchos, podemos lograr el mismo resultado programáticamente. Entonces vamos a abrir el archivo de activos la carpeta de activos y aquí confinado uso media query gs. Vamos a abrirlo y vamos a copiar este gancho ahora Vamos a pasar este gancho a nuestros hogs personalizados dgs y vamos a importar usar un hecho de reaccionar. Entonces ahora lo que hace este gancho se engancha en ventana mucho medios a p I, y nos permite manipular consultas de medios. Programmáticamente no me sumergiré en detalles aquí. Vamos a ver cómo funciona. Entonces voy a guardar el archivo. Entonces volvamos a Dashboard Tuggle. Y aquí vamos a llamar a este gancho de consulta de medios de uso y dentro necesitamos pasar un punto de ruptura de medios . Entonces digamos que abriremos nuestros alivios de padres y vamos a pasar Max con píxeles de 1992. Y ahora este gancho regresa en Bullen que indicará si es cierto o falso. Entonces, usando esto, podemos comprobar si actualmente estamos en dispositivo con 992 píxeles. Entonces vamos a pobres es móvil Y este Bullen vamos a pasar con dientes, prop completo. Por lo que cuando estemos en dispositivos móviles, tendremos propiedad completa habilitada. Cuando estemos en dispositivos de escritorio, esto se establecerá en caídas y no tendremos esta propiedad completa si la guardamos. Volvamos a la app ahora si estamos en dispositivos móviles. Si nuestro tamaño de pantalla es de menos de 992 píxeles, tenemos nuestro Drover completo y funciona perfectamente. Y si estamos en dispositivos de escritorio, tenemos este Drover estático que no se cambia. Bueno, este es exactamente el comportamiento que queríamos. Entonces aquí terminamos con nuestra capacidad de respuesta. Terminemos este video y comprometamos nuestros cambios. Pongamos todo al get y vamos a nombrar a nuestro commit como edit use media query hook e hizo Drover responsive. Está bien, Perfecto. Nos vemos en el siguiente. 107. Crear tablero de tablero: parte 1: Hey, bienvenido en este canjeable. Continuar construyendo nuestra barra lateral y comenzaremos a construir exactamente Dashboard. Vámonos. Entonces primero, abramos togs índice Y aquí en lugar de visitar si vamos a usar elementos Drover. Entonces como no tenemos rapero porque lo definimos dentro del aeropuerto toggle estos Drover, usaremos la perspicacia de fragmento de reaccionar así. Por lo que nuestro trabajo, er elementos serán drover dot No titulado sobre punto Heather Inside header. Vamos a obtener título drover dot y porque off V s código corteza con fragmento de reaccionar Ahora tengo esta duplicación de datos, pero eso está bien. Entonces siguiente tuviste er tendremos cuerpo drover dot Y entonces tendremos drover dot pie de página así como así. Por lo que dentro del cuerpo iban a mostrar los datos del usuario. Entonces aquí vamos a puerto. Digamos h tres elemento y luego diremos, Hey, usuario o tenemos perfil. Contamos con nombre de punto perfilado. Por lo que este perfil será nuestro perfil que obtengamos de uso perfil gancho. Ese es nuestro contexto. Entonces vamos a llamar perfil de uso y no tengo inteligencia. Entonces vamos a abrir el contexto de perfil. Y ahora, si pongo inteligencia será importante para mí. Está bien. Bien. Por lo que dentro del cuerpo, tenemos texto mostrado dentro de título. Vamos a tirar solo dashboard y dentro de pie de página, vamos a agregar Botón Cerrar sesión. Entonces vamos a agregar elemento de botón. Va a ser un elemento de tipo. Tendrá color rojo y para desrecortado especificaremos en Cerrar sesión y vertimos Cerrar sesión como texto. Está bien, así que tal vez solo eliminemos un clic por ahora y eliminemos este H tres tachuelas en la parte inferior. Vamos a comprobarlo. ¿ Qué tenemos como resultado? Tenemos razón. Perfecto. Entonces ahora tenemos odio. Ella luce 16 que es nuestro nombre de usuario. Y luego hemos firmado botón, pero aún no tiene ninguna funcionalidad, así que vamos a agregarla. Bueno, cuando cerramos la sesión de la aplicación, queremos que también cierres esta ventana de modelo. Pero esta función cercana recita dentro de Data Board Togo. Por lo que propuse definir un cierre de sesión, función dentro del dashboard togo, y luego pasarlo hacia abajo al componente de tablero. Entonces aquí vamos a poner const en firmar. Y porque tenemos esto es estado abierto por aquí, cada vez que lo abrimos y lo cerramos cada vez. Tendremos una nueva copia fuera de esta en función de cierre de sesión. Por lo que queremos conservar esta copia. Queremos que lo memorices. Entonces vamos a usar usar usar call back con anticipación y adentro iban a poner la siguiente lógica. Tenemos que llamar a Cerrar sesión, que está disponible en el juramento. ¿ Objeto? Ah, no cerrar sesión. Simplemente cierra sesión. Y eso es todo. Eso cerrará la sesión por completo. Nuestro usuario actual. Todo es manejado por base de fuego. Entonces tenemos que poner alerta, que va a ser un in para la alerta. Diremos, firmado. Durará cuatro segundos y luego cerraremos también el Drover. Entonces debido a que proviene de nuestro gancho personalizado, necesitábamos pasarlo como dependencia. Pero eso está bien. Función de ropa se memoriza dentro de uso estado modelo porque la ponemos dentro. Usa CLO de vuelta como recuerdas. No, vamos a pasar. Cerrar sesión en el panel de control y dentro del panel. Vamos a consumirlo en. Cerrar sesión. ¿ Está capitalizado? Sí, lo es. Entonces cuatro en. Cerrar sesión. Haga clic. Vamos a poner en función de cierre de sesión. ¿ Todo bien? Parece que está bien. Ahora vamos a comprobarlo. Si abrimos nuestra pizarra, si hacemos click en cerrar sesión ahora mismo, estamos firmados. Y la pregunta potencial podría ser por qué se nos redirige a la página de inicio de sesión. Eso es porque dentro de nuestro contexto, tenemos esto on off state cambiado. Entonces cuando cerramos la sesión porque es una suscripción en tiempo real, firebase la recogerá. Se cerrará la sesión del usuario, y este Colback será despedido. Entonces cuando no tenemos off object, llamamos set profile para saber. Y cuando hemos establecido perfil ahora o indefinido, si miramos dentro de ruta privada, redireccionamos usuario para iniciar sesión. Entonces esto es exactamente lo que sucede. Por lo que ahora tenemos el sistema completo de firma y cierre de sesión, que funciona a la perfección. Está bien, así que para comprobar que todo funcione. Bien. Vamos a iniciar sesión una vez más y voy a volver a seleccionar exactamente la misma cuenta. Ahora me redireccionan. Yo estoy firmado y de nuevo, tengo odio. Ella luce 16. Tan perfecto. Funciona como debe funcionar. Ahora cometamos nuestros cambios y terminemos este video. Vamos a puerto, llegar a todo, luego a comprometernos. Empezó a construir un tablero y cerró sesión botón y mostrar nombre de usuario. Muy bien, nos vemos en el siguiente. 108. Crear tablero: componentes reusables y editables (parte 2): Hey, bienvenidos en este líder fueron seguir construyendo ese cerdo y verbal crear un componente que vamos a reutilizar varias veces a través de nuestra aplicación en unos pocos lugares. Entonces va a ser una entrada con los dos botones que mientras yo estaba demasiado editado. Entonces cuando lo guardamos, en realidad actualizamos los datos dentro de la base de datos. Vámonos. Entonces primero, lo que propongo es crear el componente real. Entonces bajo componentes, vamos a crear nuevo archivo acreditable en puerto por ahora. Que esté vacío. Vamos a poner hola por aquí. Primero definamos cómo lo vamos a usar. Abramos ese archivo de palabras aquí bajo Hey, nombre del perfil. Pongamos divisor de nuestro traje. Y luego definamos Edita ble import. Entonces, ¿qué? Los apoyos deben volver a pasar la perspicacia. Entonces, en primer lugar, vamos a pasar valor inicial, que será triste para la entrada. Entonces pongamos valor inicial, que va a ser perfil nombre oscuro. Muy bien, entonces también necesitamos definir en función segura y que se disparará cuando vamos a guardar la entrada. Entonces pongámonos a salvo y definámoslo aquí. Por lo que vamos a poner seguro y esta función de devolución de llamada, recibirá el mismo valor que un argumento. Entonces pongamos nuevos datos y para nuestros dejemos esta función vacía. También, queríamos reportar tal vez alguna etiqueta frente a la entrada, por lo que tendremos una opción de pasar un componente reactivo como un accesorio al componente amplio comestible . Entonces definamos algo así como los seis años. A lo mejor, pongamos que va a ser Nick name y el nombre de clase va a ser margen inferior a porque queremos agregar algún espacio entre nuestra etiqueta y entre la entrada real. Y también podemos pasar otros apoyos que serán redirigidos elemento Judy Input. Entonces tal vez también podamos pasar algo así como nombre, que va a ser, en nuestro caso, apodo. Entonces, ¿qué va a ser entrada con nuestro apodo de que podremos agregarlo? Muy bien, Cool. Entonces abramos nuestro componente y empecemos a construir. Entonces primero tenemos valor inicial. Trabajé uno de los principales apoyos. Entonces vamos destructor en seguro venerable también tenemos etiqueta, que va a ser esta edad de seis años, y hay una posibilidad y que esta etiqueta no se pase. Entonces pongamos ahora VT fold y luego también algunas otras cosas, como placeholder. A lo mejor así. Vamos a pobre Marcador de posición. Y por defecto, se dirá, Elige algo así como derecho, Tu valor. Está bien. Y entonces también, lo que propongo es verter un prop que representará nuestro mensaje vacío cuando alguien intente guardar nuestra entrada y está vacía para que podamos poner como un valor global que dirá que entrada está vacía. Pero ¿y si queremos personalizarlo? Entonces pasémoslo también como un mensaje vacío de prop. Y por defecto, si no se especifica en utilería, diremos que va a ser en la corte, su vacío todo bien, y cualquier otro prop va a ser nuestros apoyos de entrada. Está bien, entonces para esto en vivo lo que vamos a hacer Así que aquí, justo antes del elemento de importación real, vamos a puerto etiqueta. Muy bien, entonces vamos a verter entrada que viene de nuestro traje. Entonces para este insumo, en el primer prop, pasaremos nuestros cultivos de insumo, y vamos a sobrescribir algunos de ellos. Entonces vamos a sobrescribir el placeholder, que va a ser este tenedor del lugar de los apoyos. Entonces también tendremos otras cosas que manejaremos dentro de este componente, como su estado interno. Entonces cuando lo vamos a editar, vamos a manejar todo desde aquí. Entonces pongámoslo aquí con anticipación. Entonces vamos a definir nuevo estado, que va a ser, digamos, solo entrada y luego establecer en puerto por valor inicial predeterminado. Va a ser nuestro valor inicial el que pasemos por aquí. Entonces pongamos valor inicial. Muy bien, entonces tenemos manejador de cambios propio que necesitamos especificar. Entonces vamos a verter el cambio de entrada. Por lo que normalmente, como recuerdas , recibe un objeto de evento. Pero en nuestro traje, es ligeramente diferente como el primer argumento para sobre evento de cambio. Entonces si pongo sin cambios por aquí, si me inclino sobre él, se puede ver que el primer argumento va de valor. Por lo que se acaba de hacer para que seamos más amigables de usuario, por lo que tendremos valor en su lugar, fuera referenciando incluso el valor de punto objetivo. Entonces aquí, vamos a poner también uso call back porque no vamos a tener ninguna dependencia y queremos optimizarla de antemano desde aquí. Llamada a la burbuja solo establece entrada a su valor así. Y para estos en cambio, vamos a verter el cambio de importación, está bien. Y además, no olvides asociar el valor real con nuestro insumo, y ya casi terminamos aquí. Ahora, también queremos hacer nuestra edición de entrada a base de hierbas. Entonces va a ser solo un valor de lingotes lo que indicará Así que vamos a crear su estado acreditable es un deseable y por defecto, se establecerá en falso. Muy bien, por lo que esta entrada se desactivará cuando tengamos es acreditable, establecido en falso. Entonces, ¿cuándo es comestible tal el verdadero? Podremos gestionar nuestra consulta. Entonces vamos a crear botón real que indicará que Así vamos a pobre grupo de entrada no pondrá solo botón porque tendremos los dos botones dentro de nuestra importación ya sea cerrar o editar . Entonces vamos a poner grupo de entrada para que parezca tientas, ¿sabes? Entonces grupo de entrada en botón y dentro de este botón, vamos a poner yo puedo y esto vengo será el siguiente. Entonces si nuestra entrada va a ser comestible, venerable display close button. Entonces de lo contrario, cuando veamos la entrada real y no pretendemos editarla, recibiremos agregado a Así que esto es solo un ícono con, como , lápices, así podemos ver que podemos añadirla. Muy bien, entonces para esto en el botón click, vamos a verter en editar click y este click sin editar vamos a definir por aquí. Entonces en editar Haga clic también lo cotizará alrededor, use call back con anticipación porque no tendremos dependencias o realmente con usted. Pero no importa, Corneau. Entonces vamos a poner Set es acreditable para revertir valor de nuestro estado actual. Por lo que llamaremos a esta función la cual revertirá el valor de los bolos. Y luego también, queremos asegurarnos de que si hacemos click en cancelar, volvamos al estado inicial. Por lo que también queremos llamar a set input y por si acaso, volver a ponerlo en valor inicial. Por lo que ahora aparece como una dependencia. Entonces pongámoslo aquí. Y digamos en realidad con y veamos qué está pasando aquí. Muy bien, Cool. Entonces ahora lo tenemos así, y se ve casi genial, pero parece que soy algo. Ah, sí, en realidad, porque usamos grupo de entrada, necesitamos envolverlo alrededor del grupo de entrada. Ese es mi mal. Grupo tan importante. Y voy a poner esto al final así. Ahora, echemos un vistazo. Está bien, Así que ahora se ve bien. No puedo agregarle entrada ahora mismo, porque es comestible tal para caer. Por lo que cuando haga clic en este botón ahora, podré agregarlo. Este botón. Y como pueden ver, cuando haga clic en este botón, se activará la función on edit click. Entonces si no tenemos este valor inicial de entrada establecida cuando haga clic en este botón, no se volverá a establecer al valor predeterminado. Por lo que queremos asegurarnos de que siempre sea inicial si lo cancelamos. Está bien. Entonces, ¿qué más necesitamos hacer? Tenemos que definir otra botella la cual se mostrará cuando realmente hacemos click en editar. Por lo que podemos saborear aquí. ¿ Qué? Vamos a verter. Vamos a verter. Si nuestra importación es acreditable, entonces vamos a renderizar otro fondo de grupo de entrada. Vamos a copiarlo y ponerlo aquí. Por lo que para al click, vamos a poner un click seguro. No va a ser lo mismo en Guardar eso. Pasamos como prop. Vamos a definir otro sobre click seguro por aquí. Por ahora. Que sea así. Entonces, por este botón, lo que vamos a su cambio pasivo fireable. Yo puedo puedo se va a ser un Aiken estático. Y esto puedo es si recuerdo que es cheque. Echemos un vistazo. Muy bien, Vamos. Sí, lo es. Consulta. Entonces parece que tenemos el marcado. En realidad definamos la funcionalidad para en click seguro. Entonces, ¿qué vamos a hacer aquí? En primer lugar, vamos a hacer una validación muy primitiva. En primer lugar, vamos a obtener el valor recortado para evitar espacios innecesarios alrededor de nuestro texto. Entonces pongamos valor recortado y va a ser ajuste de punto de entrada. OK, entonces vamos a comprobar si nuestro valor recortado va a ser solo un espacio vacío. Entonces vamos a alertar se pacificó. Mensaje vacío como prop. Podemos poner este mensaje vacío por aquí y pongamos el tiempo fuera cuatro segundos. Está bien. Entonces al final, vamos a poner Set es acreditable a caídas porque cuando hacemos click en seguro, queremos que no sea acreditable como antes. Y ahora aquí, vamos a chequear contra uno más. Piensa que va a ser si recortado no va a ser nuestro valor inicial. Entonces vamos a comprobar si realmente editamos algo y nuestro valor es diferente Onley, entonces vamos a llamar a nuestra propia llamada segura de vuelta que especificamos aquí dentro del panel. Por lo que va a estar en una función de fregadero. Entonces vamos a pacificarlo, ya que va a estar enfrentándolo va a ser una promesa, por lo que tenemos que esperarla. Entonces vamos a echar un fregadero y vamos a echar un peso sobre seguro que pasemos aquí. Y como recuerdas, esta devolución de llamada recibirá nuevos datos como argumento. Por lo que aquí necesitamos pasar nuestro insumo real. Entonces vamos a pobres no entrada o tal vez recortados al valor, porque no queremos ponerlo con los espacios apenas innecesarios a su alrededor. Está bien, así que ahora vamos a comprobarlo. Y aquí, vengamos agotados. Mira, Nuevos datos para ver si realmente funcionó. Ahora parece bastante terminado. A lo mejor en el futuro lo ajustaremos un poco para que se ajuste a nuestros requisitos. Pero por ahora, se ve bien. Abramos nuestro tablero. Abramos, Cónsul, y echemos un vistazo. Entonces ahora si lo edito, si cancelo, todo está bien. Entonces si vuelvo a hacer clic en seguro, nada cambia. Y no tenemos esta llamada de vuelta en caja fuerte disparada. Entonces si lo cambio y si lo guardo ahora, tengo el nuevo valor que está siendo cónsul bloqueado de esto en manejador seguro. Entonces en realidad funcionó. Y supongo que ya terminamos aquí en el siguiente video. En realidad aplicaremos alguna funcionalidad a este componente, o tal vez alrededor de este componente. Por lo que actualizamos nuestro apodo riel. Pero por ahora, terminemos este video y cometamos nuestros cambios. Entonces voy a poner entrada creada reutilizable, acreditable. Muy bien, Perfecto. Nos vemos en el siguiente. 109. Crear tablero de tablero: actualiza la nieta del usuario de la nieto (parte 3): Hey, bienvenido en este video. Vamos a seguir construyendo nuestro tablero comestible actualizar nuestro apodo real dentro de la base de datos riel Time. Vámonos. En el último video, creamos entrada acreditable. Y lo definimos en función segura que pasamos abajo para editar entrada herbal. Por lo que esta función de devolución de llamada va a recibir nuestra entrada final cuando hacemos clic en el botón de guardar Entonces, ahora usemos estos datos y actualicemos nuestra base de datos. . Entonces, como antes, vamos a usar nuestra base de datos, objeto para acceder a base de datos. Entonces necesitamos elegir pacificar referencia a la base de datos. Entonces vamos a poner perfiles slash Vamos a usar cadena de su policía aquí. Pondremos perfil. No usuario, yo d Ahora necesitamos actualizar solo apodo. No queremos haber creado eso. Por lo que necesitamos ser más precisos a la hora de referenciar algo dentro de la base de datos en tiempo real . Por lo que necesitamos referirnos aquí a este nombre. De lo que podemos hacer, realidad podemos referirnos de dos maneras. Podemos poner tu listón aquí y poner el nombre o prefiero otra forma solo de hacerlo, ya sabes, más fácil de usar. Pondría niño por aquí y por aquí. También necesito especificar ruta, pero esta ruta será una relativa a la ruta que especificamos dentro de primera referencia. Entonces vamos a empujar este nombre. Entonces vamos a especificar niño fuera de este camino dentro de la base de datos, está bien. O en realidad, vamos a ponerlo en un valioso vamos a ponerlo, digamos, usuario Nick name, ref. Entonces vamos a definir un bloque try catch porque vamos a trabajar con datos asíncronos y promesas. Entonces aquí vamos a verter, esperar, esperar, y luego simplemente llamamos nombre de usuario apodo ralf dot sat, que escribirá datos en la base de datos. Y aquí vamos a poner nuevos datos que recibimos como argumento. Después de eso, no lo haremos Si usuario con mensaje de éxito y diremos apodo tiene Bean actualizado y nuevo por segundos y para cualquier otro vamos a poner a su mensaje donde pondremos nuestro mensaje como su texto y también cuatro segundos. Está bien, parece bonito. Vamos a comprobarlo. Volvamos a navegar a la app cuando haga clic en editar déjame cambiar mi apodo para entrar than I click safe y nickname ha sido actualizado Y si volvemos a base posterior. Se puede ver que se cambian los datos reales. Probemos una vez más. Pongámoslo solo sí sé nd hago clic seguro. Se ha actualizado el apodo. Se actualiza la base de datos. Todo parecía agradable de distancia. Si aún tienes una pregunta. ¿ Por qué exactamente esto? Oye, Andy siendo actualizado cuando actualicemos los datos reales dentro de la base de datos. De acuerdo, Una vez más para la explicación. Dentro de nuestro contexto de proveedores, utilizamos suscripciones, oyentes en tiempo real para nuestros datos. Por lo que para usar una referencia, que es nuestra ruta de base de datos bajo perfiles, usuario I d Ponemos oyente en tiempo real estos devolución de llamada. Por lo que esta espalda fría disparó cada vez que algo cambia bajo estos caminos dentro de la base de datos. Entonces si digamos cambios de nombre bajo usuario yo d que se dispararán estos devolución de llamada y actualizaremos el estado del perfil con este objeto de datos, que será nuevo en el momento en que se dispare estos Colback. Por lo que lo mismo aplica para creado en o para cualquier otro relleno. Entonces si tuviéramos algo así como la edad por aquí, y si se ha cambiado la edad que estos Colback serán despedidos y así uno está bien, supongo que está bien. Y lo consigues. Ahora cometamos nuestros cambios y terminemos el video. Entonces vamos bien a llegar a todo. Entonces pongamos Pete commit, Digamos apodo actualizado dentro de la base de datos. Está bien. Se ve bien. Nos vemos en el siguiente. 110. Crear tablero de consolación: los proveedores de redes sociales de redes sociales de enlazar (parte 4): Oye, en este video, vamos a seguir construyendo el componente aeroportuario y asociaremos cuenta de usuario con múltiples proveedores de firma o múltiples métodos Sinan. Entonces, por ejemplo, si me conecto o si miro con Facebook y luego si miro y miro con Google, termino en la misma cuenta. No tendré dos cuentas separadas diferentes. Está bien, así que hagámoslo. En primer lugar, volvamos a nuestro código. Y aquí bajo panel de control, vamos a crear su archivo, que llamaremos Bloqueo de proveedores por ahora. Que sea un componente vacío y editemos a nuestro tablero dentro de Index GS justo después Hey Perfil Nombre proveedor Bloque. Perfecto. Ahora para continuar, necesitamos saber cómo podemos realmente acceder a nuestros datos de usuario actuales donde los datos de objeto del usuario sean más específicos. Entonces en lugar de usar nuestro gancho de perfil de uso para obtener los datos, en realidad podemos usar off object, y luego podemos acceder al usuario actual. Entonces vamos a babearlo y a ver ¿qué recibes? Entonces si ahora voy a ese tablero, si miro dentro de Cónsul ahora, tengo el objeto de usuario apagado actualmente firmado en usuario, lo que es administrado por base de fuego. Aquí confinamos diferentes tokens de acceso, tokens actualización, nombre para mostrar, correo electrónico y otros datos. Pero nos interesa ahora mismo los datos de proveedores que tenemos por aquí. Entonces es básicamente una matriz fuera de proveedores o array fuera de los métodos de Simon que estamos usando este momento. Entonces, como pueden ver, ahora mismo, sólo tenemos un elemento, que es google dot com. Por lo que usaremos esa información para mostrar que actualmente estamos conectados no fueron a este proveedor específico. Y la cosa es que si recuerdas, ponemos oyentes en tiempo real para nuestros datos de perfil. Entonces cada vez que actualizamos algo, se actualiza en todos los lugares con los proveedores. No funciona en tiempo real, por lo que necesitamos manejarlo usando estado de reacción. Entonces está bien, volvamos al bloque de proveedores. Y aquí vamos a definir un nuevo estado, que vamos a nombrar está conectado, y no va a ser un valor de bolos. Va a ser un objeto que indicará si estamos conectados a Facebook o a Google. Por lo que tendremos un objeto con dos claves, google dot com y facebook dot com, que es Proveedor i d se puede encontrar que dentro de esta matriz, por lo que como puedes ver para Google, es google dot com. Muy bien, entonces para google dot com, vamos a comprobar si estamos conectados. Por lo que vamos a acceder a los datos actuales del proveedor de puntos del usuario. Por lo que es una matriz, y en la lluvia, podemos aplicar algunos para comprobar si algún elemento es realmente justifica la condición. Entonces vamos a tener aquí nuestros datos, y vamos a comprobar si algunos fuera de nuestro donde elementos array tiene proveedor I D o google dot com. Si proveedor de datos yo d es igual a google dot com y lo mismo haremos por Facebook. Entonces vamos a copiarlo. Y vamos a reemplazar google dot com por facebook dot com. Está bien, bien. De esta manera, ahora tendremos disponible está conectada. Eso indicará lo que estamos conectados a Google o Facebook. Ahora definamos realmente nuestro marcador. Por lo que dentro de este def, vamos a verter nuestros botones o ataques que lo indiquen. Y aquí tendremos una carga fuera de representación condicional. Pero por ahora, escucha. Desafío, marcado estético. Por lo que primero se va a abordar elemento. Por lo que el elemento stack estará cerca, herbal, y tendrá color verde porque van a ser cuatro Google dentro, tendremos Aiken. Y esto lo puedo tener puedo fuera de Google y dirá conectado. Está bien. Y también ahora tenemos esta mañana. Pongámoslo aquí arriba lo mismo. Aplicaremos Facebook. Entonces vamos a copiarlo. Y vamos a reemplazar el color por el azul y puedo con Facebook. Está bien. Parece bueno. Ahora vamos a comprobarlo. Si vamos al dashboard ahora, estamos conectados. Por lo que esto se mostrará cuando realmente estemos conectados a nuestros proveedores. Muy bien, entonces vamos a definir otras cosas que serán nuestros botones para conectarnos realmente a estos o aquel proveedor. Entonces pongamos un poco fuera, fusionémonos en este bloque, y luego vamos a definir nuestros fondos. Por lo que el primer botón va a ser para Google. Por lo que va a ser un elemento de bloque. Tendrá color verde y por dentro otra vez. Ya veremos y vengo y puedo estar, Digamos, también Google y vamos a nombrar X vinculado a Google. Lo mismo será para Facebook. Vamos a copiarlo. Y vamos a reemplazar el color por el azul Lynn a Facebook. Y yo puedo va a ser Facebook. Está bien, vamos a comprobarlo. Está bien. Se ve bien. Por lo que tendremos esto a botones inferiores para conectarnos realmente al proveedor. Y estos dos al decir que la gente tiene cuando estamos conectados. Está bien. Entonces vamos primero a verter nuestro renderizado condicional para el caso cuando ya estamos conectados. Entonces para estas etiquetas, vamos a poner si está conectado, entonces porque es un objeto podemos acceder a sus propiedades. Entonces si estoy conectado a google dot com on Lee, entonces voy a renderizar este elemento de etiqueta y lo mismo en realidad, lo haremos por Facebook. Por lo que ahora tendremos un exhibido en Lee cuando estemos conectados. Está bien. Se ve bien. Y para estos botones, aplicaremos el siguiente. Entonces si no estamos conectados a Google que vienen, entonces vamos a mostrar este botón y lo mismo hará cuatro facebook. Entonces si no estamos conectados a tu Facebook, entonces mostraremos este tipo de botones. Está bien, vamos a comprobarlo. Si abro mi panel, estoy conectado a Google y no estoy conectado a Facebook. Muy bien, así que ahora lo que pasa es realmente hacer algo de funcionalidad para aplicar todo con un estado. Muy bien, así que primero tenemos que definir eran manejadores. Por lo que tendremos en total para manejadores, a manejadores a UNL Inc desde Google y Facebook, y dos manejadores a un enlace a Facebook y Google. Entonces vamos a definirlos primero va a estar en un link en Facebook como este. Entonces habremos desvinculado a Google. Entonces habremos vinculado a Facebook y LinkedIn Google y enlazado a Google así. Muy bien, Primero, vamos a hacer tal vez funcionalidad desvinculada, por lo que va a ser algo igual, y en realidad es muy fácil de hacer. Entonces vamos a crear otra, como, como, una función común a la que llamaremos dentro en link Facebook y permitiendo a Google que llamaremos , ya sabes, solo en link, y luego nosotros vas a recibir aquí proveedor I d proveedor. A mí me gustaría esto. Está bien, así que vamos a llamar a esto desvinculado de Facebook desvinculado así, y luego vamos a poner facebook dot com y lo mismo haremos por Gogol. Vamos a poner en link google dot com así. Muy bien, así que desvinculaste al proveedor real. Vamos a hacer lo siguiente que vamos a poner primer intento, catch block, y vamos a preguntar en primer lugar si sólo queda un método de inicio de sesión para el usuario. Por lo que es posible que nos desvinculemos de Google, y luego terminamos sin proveedores de inicio de sesión en absoluto de esta manera, se abandonará la cuenta y no tendrá ningún método de inicio de sesión, por lo que significa que será tipo de eso. Por lo que queremos evitar eso. Y vamos a comprobar si off dot usuario actual dot proveedor data dot length es igual a uno. Y queríamos y vincularlo. Por lo que sólo tenemos un método de inicio de sesión y hacemos click en desvinculado. Recibiremos una advertencia. Vamos a lanzar nuevo editor, y vamos a decir que no se puede desconectar para, um proveedor I d. que recibimos como argumento por aquí. Y ahora atraparemos este asunto que tiramos por aquí, y lo vamos a poner alerta y editor de arte, diremos mejor mensaje por cuatro segundos. Está bien, Así que si todo está bien aquí Y si tenemos digamos a los proveedores conectados y queremos desconectarnos de uno de ellos, es seguro. Entonces vamos a desactivar dot usuario actual punto desvinculado este método, si lo llamo, se puede ver en enlaces a un proveedor de cuenta de usuario y necesito pasar proveedor I D, que va a ser proveedor yo d de nuestros argumentos. Entonces es una promesa lo que vamos a hacer, vamos a esperar. Y debido a que es un índice de pensar espera, necesitamos poner un canto frente a la función. Entonces después de que esperábamos, necesitamos actualizar nuestro set está conectado. Tenemos que actualizar nuestro estado local. Entonces, ¿qué podemos hacer? En realidad podemos crear otra función solo para actualizar nuestro estado para que podamos llamarlo algo así como esta actualización está conectada, y dentro podemos pasar proveedor yo d y luego solo valorar si es verdad o cae. Entonces aquí, reportar proveedor i d. Y cuando nos desvinculamos, queremos ponerlo a fuerza. Entonces vamos a crear esta actualización está conectada vamos a recibir proveedor I d. como argumento. Y entonces vamos a recibir en realidad, el valor, algo así. Entonces dentro de esta función vamos a llamar set está conectado aquí, vamos a recibir valor previo dentro de la devolución de llamada. Y aquí tenemos que volver y valoras porque es un objeto. Queremos asegurarnos de que mantenemos la estructura. Entonces vamos a regresar. De acuerdo, tal vez lo pongamos más explícitamente a partir de esta semana de devolución de llamada a cambio Y Alba jet aquí, vamos a fusionar el estado anterior así y luego a actualizar el proveedor real i d Necesitamos abrir este tipo de corchetes. Entonces necesitamos cotizar proveedor yo d como clave y luego revela pacificar el valor. Muy bien, entonces de esta manera, actualizará el objeto con el especificado de ya sea i d y valor. Está bien. Bien. Se ve simplemente bien. Vamos a tal vez también, y otra alerta por aquí con alerta, tal vez solo info, y diremos, desconectado del proveedor desconectado del proveedor me gustaría esto a menos que ponga cuatro segundos por aquí . Está bien. Ahora, en realidad vinculemos estos manejadores a nuestros botones, por lo que necesitamos desvincular Facebook. Tenemos que ponerlo aquí al elemento saco. Por lo que aquí podemos tener esto en evento cercano. Entonces para este evento unclos, masticable especificar en enlace Google, realidad, y lo mismo para Facebook. Entonces aquí nos vamos a poner ropa y vamos a poner en link Facebook esta vez. Está bien. Ahora cuenta con funcionalidad suficiente para probarlo. Entonces vamos a abrir tablero. Hagamos click en este elemento de cierre. Entonces cuando hacemos clic en él, no se puede desconectar de google dot com que porque sólo tenemos el método de firma de Google solo uno de él. Entonces si nos desconectamos de ella, vamos a hacer nuestra cuenta que todo bien para ir ahora es en realidad y nuestra funcionalidad de enlace . Por lo que de nuevo, será lo mismo casi igual. Entonces vamos a crear una función común como UNL Inc. Así que pongamos, tal vez por aquí y lo vamos a nombrar. Vamos a enlazar. Está bien, Así que va a recibir no un proveedor i d. Pero el prestador objetan lo mismo que usamos en el interior. Página de inicio de sesión. Veamos este nuevo proveedor firebase Auth firebase. Está bien, así que lo copié. Entonces déjame comentarlo. Y aquí vamos a llamar a este enlace y luego firmamos. Tenemos que pasar objeto proveedor que vamos a recibir como argumento. Entonces para Facebook, vamos a llamar a nueva base de fuego fuera de Facebook fuera de proveedor. Primero importemos base de fuego desde la base de fuego hacia arriba. Está bien, mira, el entrenador y lo mismo va a hacer para Link Google. Entonces vamos a copiarlo. Y aquí vamos a llamar al proveedor de Auth de Google. Está bien, se ve bien. Ahora asociemos de antemano a estos manejadores con nuestros botones. Entonces al click, vamos a enlazar Google Y para este botón al dar click en un link Facebook. Está bien. Se ve bien. Entonces ahora ¿cuál será nuestra estrategia? Por lo que en realidad es muy, muy simple con base de fuego otra vez, necesitamos usar nuestro objeto de autenticación. Y aquí vamos a llamar a nuestro usuario actual y luego enlazar con pop up link con pop up. Tenemos que especificar sólo el objeto proveedor que recibimos como argumento que va a ser uno de esos, bien. Entonces, nuevo, es una promesa que necesitamos esperar. Y después de que se actualice con éxito, lo que se convierte a ti función de carreras después de que se actualice con éxito, se lo notificaremos a los usuarios con alerta en cuatro. Digamos conectados o tal vez ligados dos. Proveedor. Usemos la preparación de Rincón. Y porque está en objeto proveedor. Esta vez este objeto proveedor tiene proveedor I d como su clave. Y nuevamente especificaremos cuatro segundos en caso de cualquier otro. Vamos a poner alerta a su mensaje y vamos a poner nuestro mensaje aquí así. Y al final del día, necesitamos actualizar también nuestro estado local. Entonces vamos a llamar lo mismo que antes de que se conecte la actualización. Y esta vez vamos a tirar proveedor punto proveedor I D. Y entonces vamos a poner realidad porque vinculamos nuestra cuenta. Muy bien ahora parece que está bien. Vamos a comprobarlo. Parece que tenemos toda la funcionalidad. Déjenme doble comprobación. Está bien, luce bien. Ahora vamos al panel de control. Si hago clic en enlace a Facebook, veamos qué va a pasar ahora. Se me pedirá que busque en mi busto de Facebook porque ya me inscribí. Ahora me he vinculado a Facebook. Si voy a la autenticación y si tenía un fresco, puedo ver que tengo que iniciar sesión proveedores asociados a este usuario. Por lo que en realidad funcionó. Ahora, si Dejemos un click en Desconectar de Facebook Ahora, me he desconectado de facebook dot com. Si hago clic en Google, no se puede desconectar de Google porque es el único que queda. Y si me refresco de nuevo, se puede ver a Facebook desaparecer. Entonces, en realidad, todo funciona. Está bien, así que fue mucho, en realidad, supongo que ese es el buen momento para terminar este video. Entonces vamos a agregar todo al estado escénico, y luego vamos a conseguir comprometer vinculado Facebook y Google a una cuenta creada proveedor Block Who? Está bien, nos vemos en el siguiente. 111. Crear tablero de tablero: crear avatar (parte 5): Oye, en este video, seguiremos construyendo dashboard, y vamos a empezar nuestra gestión con avatares de perfil de usuario. Por lo que en este video crearemos un botón y podremos seleccionar una imagen de nuestro PC que luego subiremos a base de fuego y usaremos como nuestra imagen de avatar. Vámonos. Entonces primero, vamos a crear un nuevo archivo en su panel de control. Ese nombre problemario de un auto aplaude a Bt en. Entonces vamos a crear un componente vacío. Por ahora, pongamos hola dentro que en Index GS, que es nuestro tablero justo después de la entrada comestible. Hagamos referencia avatar subir Bt de esta manera. Está bien, bien. Ahora empecemos a construir nuestro componente. Por lo que nuestro elemento superior va a ser un desarrollo para el nombre de clase. Le vamos a dar un poco de margen fuera en la chuleta, que va a estar vacía tres. Y entonces queremos mantener todo centrado. Por eso ponemos Centro Tributario. Muy bien, entonces estamos necesita especificar entrada fuera del tipo de archivo, pero no queremos usar el nativo porque no se ve de la mejor manera. Entonces, por ahora, dejémoslo como texto Y tal vez si quieres, puedes cambiarlo. Para ello. Tenemos que poner un dif por aquí. Entonces vamos a especificar la perspicacia de la etiqueta. Y dentro de esta etiqueta, vamos a poner selecto nuevo Avatar y también junto a este texto dentro de etiqueta. Vamos a poner en archivo tipo posponer, pero vamos a darle display off ninguno. Por lo que en realidad hacemos click en este texto. No obstante, al mismo tiempo, hacemos click en esta entrada. Entonces vamos a verter puerto fuera de tipo archivo así. Y además, vamos a darle nombre de clase off, mostrar ninguno. Y tenemos esta advertencia en etiqueta diciendo que debe estar asociada con el control. Entonces para esta entrada, definamos una idea algo así como subir Al Atar. Y vamos a dar esta idea a html four para disquete dis. Por lo que HTM de cuatro va a ser avatar. Aplauden. Está bien. También para este sello, vamos a darle nombre de clase a este bloque de juego. Además, va a ser puntero más áspero, y va a estar un poco acolchado así. Está bien, vamos a comprobarlo. Ahora. Si voy al dashboard, se ve bien. Ahora tenemos este botón. Por lo que cuando hacemos clic en él, en realidad podemos seleccionar archivos. Hagámoslo de esta manera que podamos seleccionar sólo imágenes por aquí. Entonces para esta entrada, vamos a poner otra prop, que es, excepto y va a ser una cadena de tipos de archivos aceptados. Pero vamos a especificar estos tipos de archivo fuera del componente. Por lo que en el futuro, es más fácil navegar dentro de este componente. Vamos a atar tipos de importación de archivos, y va a ser como bebida fuera de los tipos de archivos referenciados por coma. Entonces primero vamos a aceptar archivos PNG que archivos J PAC y también J empacar esta extensión. Está bien, entonces para esto excepto prop, vamos a pasar tipos de importación de archivos y estamos listos para salir Ahora vamos a comprobarlo. Si hacemos clic aquí, podemos ver los archivos P y G y J de vuelta. Está bien. Se ve bien. Ahora, ¿cuál será nuestro próximo paso? Entonces cuando seleccionamos una imagen, queremos que se abra un nuevo modelo, y dentro de este mortal, vamos a ver la vista previa. Por lo que necesitamos definir el motor de Indo. Entonces aquí, junto a etiquetar vamos a usar el elemento modelo de nuestro traje. Y dentro de este modelo, vamos a poner modelo punto Heather que junto a él. Tendremos cuerpo y también pie de página así. Por lo que para el modelo, necesitamos especificar show property. Se trata de una viñeta que indica si está abierta o no que en el manejador de altura cuando este modelo está cerrado. Por lo que necesitamos usar nuestra propia costumbre. Esperar que creamos antes use estado mortal para realmente obtener esos valores. Entonces vamos a importarlo. Y vamos D estructura está abierta, abierta y cerrada. Por lo que para en evento de altura, vamos a llamar a Close Handler y para show especificaremos está abierto. Entonces dentro de Moto Heather, vamos a port model dot title Así que este título va a ser un justo y aplaudir Tal vez así, aplaudan nuevo avatar y eliminemos este título en la parte inferior por aquí. Entonces dentro del cuerpo. Vamos a especificar otra cosa. Y dentro del pie de página, vamos a poner un fondo que en realidad subirá nuestro avatar. Entonces vamos a escribir aplaud Nuevo Avatar y para estos botones especificará apariencia. Digamos fantasma, y también lo daremos con off 100 especificando que va a ser un elemento de bloque . De acuerdo, así que ahora, como pueden ver, no tenemos ningún gatillo para abrir realmente nuestra moto. Tenemos que determinar de alguna manera cuando seleccionamos el archivo. Entonces para esto, vamos a usar en evento de cambio disponible en importación fuera de tipo archivo. Entonces pacifiquemos el propio cambio. Y para este cambio, vamos a crear una función que vamos a nombrar en el cambio de entrada de archivos. Muy bien, ahora, vamos a crear aquí en la parte superior y esta función porque es un manejador para un evento. Esta función recibe un objeto de evento. Muy bien, por lo que este objeto de evento tendrá objetivo y bajo objetivo. Podremos acceder a los archivos reales que seleccionemos, y siempre viene como una matriz fuera de archivos. Por lo tanto, pongamos los archivos actuales bajo incluso los archivos de destino. Entonces como va a ser siempre una matriz, tenemos que comprobar que seleccionamos solo un archivo. Entonces vamos a revisar. Si archivos actuales esa longitud es igual a uno, entonces vamos a aplicar nuestra lógica. Entonces, primero tomemos nuestro primer elemento de la matriz. Entonces pongamos archivo, y vamos a poner archivos actuales y hacer referencia al primer elemento. Entonces necesitamos realmente comprobar si el archivo que seleccionamos es el archivo válido, porque no importa lo que especifiquemos. Por aquí. Puedo buscar cualquier archivo y cambiarlo a todos los archivos, y luego puedo comprar May bistec upload, Digamos adyacente. Por lo que queremos comprobar si este archivo es en realidad una imagen. Entonces aquí en la parte superior, especifiquemos tipos de medias que son accesibles por nosotros. Para eso, vamos a especificar cualquier disponible, Digamos, tipos de archivo aceptados. Entonces aquí íbamos a especificar una matriz fuera de cadenas. Entonces primero, nuestro tipo de haz va a ser imagen slash p y G. Entonces tendremos image slash j pack. Entonces si no me equivoco, es la correcta. Y también vamos a tener imagen slash p j pack. Muy bien, Bien. Ahora necesitamos crear una función auxiliar que compruebe si este archivo satisface array off media tipos. Entonces si nuestro tipo de archivo es uno de ellos, entonces vamos a crear una nueva función de ayudante la cual nombrará es archivo válido y recibirá archivo como argumento, y se va a comprobar el tipo de archivo contra esos valores. Por lo que simplemente vamos a comprobar tipos de archivo aceptados Incluye tipo de archivo hija. Está bien, entonces devolverá un valor booleano. Está bien, así que ahora aquí, adentro. Ah, eran manejador. En realidad podemos preguntar si vamos a preguntar si es válido, archivar nuestro expediente, entonces vamos a hacer algo. De lo contrario vamos a mostrar un error al usuario eso. Oh, chico, seleccionaste la hora equivocada del archivo. Entonces pongamos alerta. Entonces vamos a poner advertencia, no un error, y vamos a especificar, tal vez tipo de archivo incorrecto, y luego vamos a pobre tipo de hija de archivo como este, y vamos a especificar cuatro segundos. Muy bien, entonces ¿qué vamos a hacer cuando tengamos el expediente válido? En primer lugar, en realidad vamos a abrir nuestra ventana móvil. Pero justo antes de abrirlo, necesitamos establecer de alguna manera nuestra imagen que aplaudimos. Entonces para esto, vamos a crear un nuevo estado. Entonces vamos a crear un nuevo estado con estado de uso, que vamos a nombrar. Digamos que sólo la imagen y establecer la imagen por defecto. Se fijará para ahora. Pero cuando hemos desarrollado imagen seleccionada. Vamos a llamar imagen de conjunto, y vamos a poner archivo como nuestro estado así. Está bien, Ahora, vamos a comprobarlo. Entonces si voy al dashboard, si selecciono nuevo avatar, si subo una imagen, está bien, se abre Motile. Ahora, hagamos lo mismo. Pero vamos a seleccionar el archivo Jason. Si hago clic en abrir, tengo aplicación de tipo de archivo incorrecta, Jason. Por lo que en realidad funcionó. ¿ Todo bien? Ahora, ¿cuál será nuestro próximo paso? Nuestro siguiente paso es mostrar la vista previa y ajustar la imagen. Entonces cómo podemos hacer eso, usaremos reaccionar paquete editor avatar que viene de un PM Me gusta mucho este mini paquete. Nos da la oportunidad de personalizar la imagen cargada. No vamos a sumergirnos en demasiados detalles, pero sólo podremos escalar nuestra imagen para necesitarla de tamaño. Entonces primero, vamos a instalarlo. Entonces voy a abrir mi terminal y desde aquí, que tengo otra Muy bien, está bien. Voy a npm instalar reaccionar avatar, editor Y esperemos hasta que realmente esté instalado o bien. Parece que nuestro paquete ha sido instalado. Vamos a volver a ejecutar el AP y P. M Run , empezar y vamos a ver cómo realmente podemos usar este paquete. Entonces déjame copiar el comando de importación. Déjame ponerlo aquí en la parte superior. Y como pueden ver, necesito usar este componente así. Entonces vamos a copiar esto. Vamos a copiar este componente que dentro de nuestro código para cuerpo modelo. Vamos a especificar este componente, pero primero, vamos a comprobar si tenemos nuestra imagen definida dentro del estado. Entonces vamos a mala imagen. Si tenemos imagen, vamos a mostrar esto sobre nuestro componente editor y para imagen. Vamos a especificar nuestro archivo que tenemos estado de EU para With y Height Mobile limitado a 200. Entonces para frontera, vamos a poner digamos, sólo 10. Y esto es ese borde por bordes de lo que no necesitamos color. No necesitamos escala, pero necesitamos radio fronterizo. Queremos hacerla circular. Entonces vamos a especificar radios fronterizos 100. Está bien, ahora, vamos a comprobarlo. Si refresco la página de lo que hago clic en modelo Seleccionar nuevo Avatar. Si hago click en este auto y golpeo abierto ahora, puedo ver que tengo este elemento Converse, que es este paquete. Y ahora soy capaz de agregarle un poco mi imagen. Está bien, así que se ve bien, pero no se centro. Significa que necesitamos agregar mercado adicional para esta imagen para este editor de avatar. Pongamos otro def a su alrededor así. Y para este def. Especifiquemos display flex. Entonces vamos a poner el flex de pantalla. Justificar, digamos , centrar, alinear elementos centro y ponerlo altura completa así. Ahora, si tenía un fresco, vamos a comprobarlo. Permítanme volver a seleccionar una imagen. Pero aún así, no se ve bien porque no está justificado. Centro. Está justificado Centro de contenido. Ahora, déjame intentarlo. Seleccionar Nuevo Avatar. Está bien, ahora se ve bien. Está centrado. De acuerdo, entonces supongo que esto es todo para este video, y nuestro siguiente paso será realmente subir la imagen. Pero va a ser el tema de nuestro próximo video sobre este paso. Comprometamos nuestros cambios y terminemos este video. Entonces vamos a sumar todo a este estado etapa que nos vamos a comprometer, y vamos a poner digamos, empezamos a trabajar con el avatar del usuario. Aplauden. Está bien. Se ve bien. Nos vemos en el siguiente. 112. Crear tablero de tablero: sube el avatar a los avatar a la base de los pasos (parte 6): Oye, en este video, seguiremos trabajando en la subida de avatar entre componente, y terminaremos subiendo que sera waters. Vámonos. Lo primero que discutió que ibas a definir un manejador para un evento de un clic para aplaudir tu botón de avatar. Entonces vamos a pacificar en evento click y vamos a crear una nueva función que vamos a nombrar al subir . Haga clic. Entonces vamos a poner este manejador justo después en el cambio de importación de archivos, y ahora necesitamos de alguna manera obtener acceso a la imagen real. Esta vez esta imagen es editada. Por lo que necesitamos obtener acceso a este elemento converso. Entonces si lo inspeccionamos, es un converso dentro de Dom porque se trata de nuestro componente editor que utilizamos desde el paquete. Muy bien, Entonces para entender lo que realmente está sucediendo, cómo podemos obtener la imagen que necesitamos para navegar a su documentación que si nos desplazamos hacia abajo , confinamos un ejemplo fuera accediendo a la imagen resultante. Aquí confinamos este método obtener imagen escalada para conversar. Pero como podemos ver en este ejemplo, utiliza componente basado en clases, y también utiliza algo llamado referencias. Por lo que las referencias en reaccionar es la forma de acceder directamente a los elementos Dom o reaccionar directamente a los elementos donde más apropiadamente sería decir programáticamente. Entonces averigüemos cómo podemos realmente poner una referencia a nuestro componente editor de avatar dentro de un componente basado en funciones. Entonces primero, necesitamos importar un gancho que no hemos visto antes de reaccionar, que se utiliza ref, que significa referencia de uso. Ahora necesitamos crear una nueva referencia, y vamos a nombrar a este gráfico de editor de avatar de referencia, y vamos a llamar a este gancho así. Ahora, necesitamos pasar esta referencia a este componente. Entonces vamos a especificar Raph, y luego vamos a verter editor de avatar en bruto. Entonces ahora somos capaces de acceder a esto, Digamos, avatar, editor componente usando esta referencia, que es nuestra agua lo hice demasiado áspero. Por lo que al subir haga clic. Vamos a poner Echemos un vistazo. Tenemos que acceder a este editor. Obtén habilidad de imagen para encuadrar para acceder al valor real de esta referencia. Tenemos que poner el siguiente así que pongamos converse, y vamos a decir que vamos a acceder a avatar edita ralf dot current. Por lo que es elemento actual fuera de esta referencia porque también puede ser indefinido. Por lo que nos aseguramos de que accedemos al elemento actual. Por lo que a continuación podemos acceder al método real, que va a ser conseguir imagen escalada, dos cámaras. Entonces llamémoslo. Y ahora en realidad podemos tener nuestro elemento converso. Pero la cosa es que no podemos trabajar con el converso. No podemos subirlo. En realidad no podemos hacer nada con eso. Entonces primero necesitamos convertirlo a algún ex que podamos aplaudir a base de fuego para que realmente podamos convertir Converse a un archivo blob. Y un archivo tipo es solo un archivo de pieza fuera representado en formato binario. Por lo que usando este formato, podemos aplaudir. Entonces, en cada elemento inverso, tenemos este método que se llama a bloquear, y la cosa con esto a bloquear método que solo acepta devoluciones de llamada. En realidad no podemos usar ninguna promesa. Entonces para esto quiero convertir este método basado en Colback a una promesa. Entonces para hacer eso, haremos lo siguiente aquí en la parte superior. Vamos a definir una nueva función que llamaremos get block, y esta función recibirá un converse como esta y esta función va a regresar y prometes objeto. Entonces pongamos retorno nuevo, te lo prometo. Por lo que no lo hemos visto antes. Entonces para crear una promesa real, necesitamos poner una visión de devolución de llamada que reciba dos argumentos, resultado y rechazo. Por lo que llamaremos a este método para realmente resolver o rechazar la promesa. Entonces aquí, adentro, ¿qué vamos a hacer? Vamos a llamar a Converse a Bluff. Entonces vamos a especificar esta devolución de llamada con el con el resultado que será el bluff real. Y dentro de esta espalda fría, vamos a revisar. Si nuestra sangre existe y todo está bien, entonces vamos a resultar de esta promesa la vamos a resolver. Por lo que resultado y valor va a ser el consejo de soplado real. Si no tenemos ningún bloque elementos iban a rechazar con nuevo error y por mensaje de error , vamos a decir de algo así como protestas de archivo alguna vez. Muy bien, así que usando así ahora, convertimos un método frío, basado en la espalda en una promesa. Entonces ahora podemos usar este get blow up y lo que podemos hacer, vamos a poner a tratar de atrapar bloque por aquí y ahora lo que vamos a hacer vamos a llamar a esto get explote up así. Entonces vamos a poner lona dentro. Y porque es una promesa, ahora tenemos que esperar. Y en caso de que tengamos algún error, será atrapado por estas cuadra de aquí. Entonces debido a que usamos esperas, Index, necesitamos convertir esta función a cualquier función. Está bien, Así que el resultado va a ser nuestra explosión que podemos aplaudir al almacenamiento de archivos ahora sobre el almacenamiento . Cómo podemos hacer esto. Todavía no hemos subido nada. Bueno, volvamos a Firebase Doggy s. y aquí, vamos a importar otra biblioteca desde Firebase. Esta vez va a ser firebase slash storage ahora para realmente acceder al almacenamiento exactamente de la misma manera que vamos a exportar, const storage app dot storage todo bien. Y el almacenamiento Un pastel es muy similar al almacenamiento de base de datos. Tenemos que especificar la referencia que en realidad es la ruta a archivar, y luego tenemos que aplaudirla. Entonces ahora aquí. En primer lugar, vamos a especificar el camino bajo el cual almacenaremos nuestra imagen. Va a ser, digamos, digamos referencia de archivo avatar como esta para que íbamos a acceder a nuestro objeto de almacenamiento desde misc firebase. Entonces vamos a poner punto y luego vamos a llamar referencia. Entonces vamos a almacenar nuestros archivos sobre su pasado, que s slash perfil slash usuario i d. Así que necesitamos llevarte ahí. I d Así que usemos el gancho de perfil, Así const perfil, vamos a obtener del perfil de uso. Entonces vamos a especificar perfil dot tu i d y vamos a convertirlo en interpolación de cadenas . Y entonces, en realidad, vamos a acceder a niño y niño va a ser avatar. Muy bien, entonces lo que estamos haciendo aquí, en realidad especificamos estos path dentro de nuestro almacenamiento, por lo que representará nuestra carpeta y este niño va a ser un archivo llamado Avatar. No vamos a poner ninguna extensión porque será automáticamente recogido por la base de incendios. Muy bien, ahora, lo siguiente discutido, en realidad subirás el archivo. Entonces pongamos const upload avatar resultado. Entonces vamos a poner un archivo de avatar de peso Arraf dot put. Y luego si lo llamamos, podemos ver que en realidad podemos poner ya sea blob o array buffer array. Entonces, en realidad pongamos nuestro blub por aquí, y luego Vamos también segundo argumento. Podemos especificar los meta datos. Entonces para los datos de la materia, especifiquemos cabecera de control de efectivo. Por lo que realmente podemos cobrar nuestras imágenes dentro del navegador. Entonces pongamos un control de efectivo. Y para el control de efectivo, vamos a especificar público que Marx Age. Nos vamos al puerto 3600 que representa una hora en segundos. Entonces vamos a multiplicar por 24 para obtener el valor real de un día, y luego vamos a multiplicar por tres. Entonces ahora tenemos marcas de edad apagado. Tres días especificados en segundos. Está bien, así que ahora que tenemos ah, Petar, subir resultado déjame quitar de aquí esta columna Sammy. Ahora que tenemos un resultado de avatar de Plourde, necesitamos sacar el No cargar tu l de nuestro archivo para poder guardarlo en nuestra base de datos. Entonces aquí vamos a poner descarga constante, Ural. Por lo que vamos a llamar subir nuestra referencia de punto de resultado del agua. No te engañes, y no llames directamente descarga tu l Porque, como puedes ver, es desuso ID usar referencia que obtienes no cargar euro. Entonces vamos a llamar a Ralf, y sólo entonces vamos a llamar. Get no cargar euro. Devuelve una promesa. Entonces esperémoslo. Y ahora en realidad podemos almacenarlo dentro. Nuestra base de datos deja pobre usuario avatar Raff el cual representará nuestra referencia dentro de la base de datos en tiempo real . Entonces, ¿cuál va a ser base de datos Daut Ralf de lo que va a ser? Perfiles slash profile dot tu i d Y entonces vamos a poner hijo de un auto. Y ahora vamos a llamar al usuario Avatar Raff, set, no cargues euro. Y justo después de eso, vamos a llamar alerta punto info de un auto tiene frijol aplaudido. Y pongamos cuatro segundos. Y por si fuera algún editor, vamos a alertar lo que sea y diremos nuestro mensaje con cuatro segundos también. Y también justo antes de guardar este archivo, en realidad vamos a especificar también el estado de carga. Entonces aquí simplemente vamos a crear es cargando y set está cargando que por defecto, se establecerá tu false. Entonces cuando realizamos todas las operaciones justo antes de eso, llamamos a set se está cargando a true. Y luego cuando terminemos, llamamos set está cargando a false Y en caso de que falláramos, también llamamos Set se está cargando a false ahora cuando realmente lo usamos, en realidad lo usamos para este botón para desactivarlo. Por lo que deshabilitado va a ser sólo cuando tengamos habilitado su estado de carga. Está bien, así que fue mucho. Ahora, vamos a probarlo en realidad. Entonces déjame refrescar la página. Déjame abrir, tablero. Déjame seleccionar Nuevo Avatar. Ahora voy a dar click en este auto. Voy a dar click en Aplaudir nuevo Avatar, y puedo ver que Avatar ha sido aplaudido. Muy bien, ahora revisemos primero dentro de nuestra base de datos. Entonces parece que ahora tenemos avatar aquí. Como pueden ver ahora, tenemos a este público que está enfermo, lo que lleva al almacenamiento de la base de fuego. Vamos a comprobarlo. Nuestro almacenamiento. Y aquí podemos ver una carpeta. Vamos a dar click en él. Entonces tenemos usuario I d. Y dentro tenemos archivo avatar. Entonces cuando hacemos click en él, puedes ver tenemos esta tu l que podemos dar click, y nos abrirá la imagen en tu tap. Pero la cosa es que ahora cargamos con éxito archivo al almacenamiento base de fuego. Muy bien, entonces ahora ¿cómo podemos realmente mostrar esta imagen? Bueno, supongo que este es tema para nuestro próximo video, porque ahora mismo se está haciendo demasiado largo. Está bien, así que vamos a guardar todo para conseguir sistema. Vamos a venir nuestros cambios y digamos subidos Avatar de usuario. Está bien, nos vemos en el siguiente. 113. Crear tablero de consolas: muestra las avatar de usuarios y los nombres de los nombres (parte 7): Oye, en este video, vamos a mostrar la imagen de avatar cargada dentro de nuestro tablero. Vámonos. En primer lugar, quiero mostrar el componente de nuestro traje, que es el alquitrán de Allah. Por lo que navegé a su documentación, y abrí Alit están bajo visualización de datos. Entonces aquí lo genial de este componente que en realidad puede mostrar iniciales de nombre si no tenemos ninguna imagen. Entonces, abramos un ejemplo. Y veamos cómo podemos realmente poner iniciales de nombre si no tenemos ningún archivo fuente. Por lo que necesitamos simplemente pasar estas iniciales al componente Avatar. Entonces lo que propuse hacer, propuse crear un envoltorio alrededor de este componente. Entonces siempre que no tengamos una imagen rebelde nombre mostrar iniciales. Por lo que bajo componentes, vamos a crear nuevo archivo, que vamos a nombrar perfil Avatar. Entonces que sea un componente que devuelva esto Ah, ¿qué son componentes que viene de nuestro traje así? Entonces, ¿qué apoyos debemos especificar para estos Avatar? Entonces vamos a necesitar el nombre de usuario, así que vamos a pasarlo como utilería. Entonces vamos a nombre destructor y lo que sea que vaya a estos componentes, será redirigido al componente avatar de nuestra serie. Entonces pongámoslo, Teoh Avatar apoyos. Y luego vamos a extenderlo por todo el elemento. Muy bien, Bien. Ahora, dentro de este avatar, necesitamos dar nombre a las iniciales. Pero digamos que nuestro nombre es algo así como Andrew, y algo va después. Entonces cómo podemos obtener las iniciales de nombre real vamos a crear una función de ayudante. Entonces, eliminemos esto. Y bajo MISC, vamos a crear nuevo archivo que llamaremos ayudantes perrito s y hittable definir todas nuestras funciones razonables que nos ayudarán durante el código. Entonces vamos a crear una nueva función que vamos a nombrar, Digamos, obtener iniciales de nombre. Recibirá nombre de usuario como argumento, y nuestra lógica será la siguiente. Primero, lo vamos a dividir en array off awards, y luego vamos a comprobar si tenemos dos o más palabras en nuestro apodo, Entonces vamos a sacar las primeras letras primero a los pupilos. Entonces primero obtengamos el área real. Vamos a ponerle nombre, Digamos nombre dividido. Entonces vamos a hacer nombre punto a ópera. El caso se convertirá en mayúscula de antemano, y luego lo vamos a dividir por espacios vacíos. Entonces de esta manera, terminaremos con una matriz fuera de las palabras. Y luego vamos a comprobar si split name array doc length es mayor que uno. Entonces si tenemos dos premios, al menos entonces vamos a devolver Nombre Split, Primera palabra. Y luego desde la primera palabra, necesitamos obtener la primera letra. Entonces vamos a abrir segundos corchetes, y vamos a poner primer elemento. Entonces vamos a poner signo más para venir cortado en un distrito. Entonces vamos a poner en contra del nombre Bleidt esta vez referencia Hubble. El segundo elemento. La segunda palabra. Entonces vamos a poner una y otra vez, vamos a hacer referencia a la primera letra. Ponemos cero. Muy bien, En caso de que sólo tengamos una palabra por defecto, vamos a volver. Simplemente divide el nombre cero, que es Primera Palabra. Y luego primer elemento primera letra. Está bien. Y también exploremos esta función desde aquí. Ahora, dentro de nuestro perfil avatar aquí dentro de corchetes rizados , en realidad podemos llamar, obtener nombre y se muestra, y podemos pasar nombre que recibimos de los apoyos. Está bien, ahora, vamos a Avatar. Aplauden Bt y componente. Y aquí, usemos este componente. Entonces vamos a poner el perfil de carro de Allah como fuente. Vamos a especificar perfil de punto avatar y luego por nombre. Vamos a especificar el nombre del punto del perfil. Entonces de esta manera, cuando tengamos un archivo fuente, entonces se mostrará el archivo fuente. Si no lo tenemos, ahí estarán nuestras iniciales de nombre. Está bien, vamos a guardarlo y echemos un vistazo. ¿ Qué tenemos? Volvamos a navegar de nuevo a nuestro tablero Y ahora mismo puedo ver que no tengo ninguna imagen de avatar . Está bien, tal vez un Vamos a subir uno. Abrámoslo. Subiremos Nuevo Avatar Avatar se ha subido, y aún así puedo ver cualquier dato. Está bien, entonces eso es porque en realidad, no modificamos nuestros contactos. Nuestros contactos de perfil. Vamos al perfil contexto y datos que pasamos por aquí no tiene ninguna Ah, qué hay pero dentro de Al Atar Aplaud BT en fuente estadounidense. Yo especificé perfil Avatar. Este perfil proviene del contexto de perfil de uso. Entonces, ¿qué tenemos que hacer ahora que re datos de base de datos? En realidad podemos simplemente destruirla desde aquí desde nuestra instantánea, ¿ verdad? Tan simple como eso. Entonces también se lo pasaremos a nuestros contactos Muy bien, vamos a guardarlo. Y ahora echemos un vistazo. Si voy a mi tablero ahora tengo esta imagen. Pero antes que nada, se ve realmente raro, Así que vamos a modificarlo un poco. Vamos al perfil Avatar y por defecto, justo antes de que repartimos todos los apoyos. Vamos a poner círculo para que quede en círculo por defecto. Vamos a comprobarlo. Ahora está en círculo, pero el tamaño es realmente, realmente pequeño. Entonces, ¿qué, podemos dio dentro de avatar botón subir? Podemos aplicar nombres de clase y eso lo arreglará. Sabemos que nuestra imagen, nuestra conversa que especificamos para nuestro editor de alquitrán es de 200 por 200. Entonces vamos a aplicar con 200 altura 200 píxeles, esas clases que confinaste dentro de clases de utilidad. Entonces vamos a guardarlo. Y si vamos al dashboard ahora, tenemos el tamaño correcto para el gotero M A. Pero la imagen en sí es realmente pequeña, por lo que necesitamos recitar la imagen real. Por esto. Creé este nombre plus que también puedes encontrar dentro de utilidades, que es imagen de tamaño completo, y le dará con una altura 100% a la imagen. Entonces ahora se ve bien. No obstante, hay un pequeño problema. Si retrasé esta imagen, entreguémosla desde aquí ahora. Como puedes ver, si no tenemos ninguna imagen, obtengo iniciales de nombre, pero también son demasiado pequeñas, así que necesitamos ajustar también el tamaño del teléfono. Entonces para esto, pongamos frente tamaño enorme y todo estará bien. Vamos a comprobarlo. Ahora. Tengo el tamaño correcto para mi texto también. Entonces ahora tal vez cambiemos el apodo y pongamos dos palabras. Pongámoslo y ser. Y vamos a comprobar si tenemos dos letras como nuestras iniciales y en ¿Tenemos una exhibida aquí ? Agradable. Intentemos aplaudir el auto de New Allah. Vamos a seleccionarlo. Y Avatar se ha subido, se ve bien y funciona a la perfección. Está bien, bien. Supongo que ese es el buen momento para terminar este video. Entonces cometamos nuestros cambios con mensaje. Algo así como mostrado tienen un avatar de usuario de alquitrán. Está bien, Perfecto. Nos vemos en el siguiente. 114. Añade el botón y la función de Create-Room y: Hey, bienvenido en este video. Vamos a añadir nuevo panel de abajo de billow que nos encantará crear una nueva sala de chat . Vámonos. Volvamos a navegar de nuevo al código y otros componentes. Vamos a crear nuevo archivo que llamaremos Crear habitación bt n motile No. Sí, Vamos a ir lleno Este componente por ahora. Que sea solo hola y en realidad lo usemos por dentro. Dentro de nuestra barra lateral Abramos la barra lateral. Y aquí debajo del dashboard Tuggle, vamos a poner crear habitación Bt y Moto. Está bien, ahora no nos enganchemos al oponente de disco. Y aquí vamos a definir un botón que abrirá una ventana modelo con forma dentro que vamos a llenar para realmente crear una sala de chat. Entonces va a estar bien, tal vez un componente diff. Entonces adentro vamos a poner botón que será nuestro remolcador para abrir la ventana de la botella. Entonces vamos a poner yo puedo a la vista. Por lo que esto puedo tener icono apagado puede ser creativo, y el texto va a estar creando nueva sala de chat. Está bien, entonces este botón va a ser un bloque elementos tendrá color verde y al click vamos , Teoh, abre nuestra moto. Entonces, en realidad usemos nuestro gancho personalizado para gestionar el estado mortal. Por lo que se utiliza este gancho Estado modelo a partir de aquí comenzado, la infraestructura está abierta, abierta y luego cierra. Y para click de botón, Vamos a verter abierto. Muy bien, ahora, definamos nuestra ventana móvil. Entonces vamos a poner elemento modelo de nuestro traje. Tendremos, como siempre, mortal Heather. Entonces vamos a tener cuerpo y flaquear. Está bien, bien. Entonces dentro de Heather, vamos a poner más título. Ellos puntearán título y por dentro. Vamos a poner algo así como nueva sala de chat y vamos a sacar este ídolo de aquí. Muy bien, Dentro de cuerpo, vamos a definir la forma y dentro del pie, o vamos a poner botón para enviar el formulario. Entonces, primero creemos el botón. Por lo que va a ser un elemento de botón. Se va a bloquear. Componente y apariencia va a ser primaria. De acuerdo, supongo. Apariencia establecida en primaria por defecto. Pero dejémoslo como está. ¿ Todo bien? Crear nueva sala de chat. Ahora vamos a guardarlo y vamos a ver, ¿Qué tenemos? Por lo que ahora tenemos esto crear nueva sala de chat, tener siempre. No tenemos el margen, así que vamos a algunos. Entonces para este rígido, pongamos nombre de clase y añadamos margen top dos. Está bien. Se ve bien ahora dentro de este cuerpo iban a definir nuestra forma. Entonces vamos a pobre elemento de forma de nuestro traje. Y dentro de este nacido, vamos a definir nuestros elementos de entrada, y se agrupan bajo componentes de grupo formados. Entonces vamos a pobres formar grupo y dentro de esta forma. Pero abierto tendrá primera etiqueta Control. Y luego vamos a poner control de forma, que va a ser la propia importación real. Actuemos así. Entonces dentro de la etiqueta Control, vamos al nombre de la sala de puerto al principio y el control de formularios va a ser nombre, nombre, y placeholder va a ser un placeholder va a ser algo así como entrar nombre de la sala de chat y tres patos, y va a ser un componente de auto cierre porque es un insumo. Está bien, así que si floto en este grupo de formularios, digamos que no define, así que vamos a importarlo de nuestro traje. Muy bien, entonces definamos nuestra segunda entrada. Digamos que en realidad lo haría y ver, qué tenemos. Entonces si vamos a dar click en crear nueva sala de chat, no va a pasar nada porque no especificamos show prop for móvil window. Entonces pongamos está abierto y en altura, vamos a poner manejador de ropa. Está bien, se ve bien. Ahora vamos a comprobarlo y veo que agregamos mucho espacio fuera por aquí. Entonces vamos a pobre margen top uno todo ahora mismo lo es. De acuerdo, vamos a abrirla. Y aquí podemos ver que tenemos nuestro insumo, pero está un poco apagado, no lleno de. Entonces vamos a arreglarlo rápidamente. Y cuatro días forman elementos. Lo haremos para que lo haga quitar todo con fuera del elemento envoltorio. Está bien, se ve bien. Ahora sigamos adelante y creemos un segundo Grupo Extranjero, que va a ser la descripción de la habitación. Entonces para este grupo de reforma, también, vamos a copiar etiqueta de control en control de formulario como este Para esta etiqueta de control, especificaremos descripción, y para este control de formulario, vamos a verter un componente de área de texto. Entonces vamos a pobre propiedad de clase de componente. Va a ser área de texto que su Rose. Por defecto será igual a cinco. Nombre va a ser descripción. Y el positor va a ser Digamos que entre en Roma. Descripción. Está bien. Se ve bien. Ahora, echemos un vistazo si hago clic en él. Está bien. Tengo descripción. Tengo nombre real. De acuerdo, ahora, tal vez definamos nuestro estado para los datos reales. Entonces, ¿aquí qué? Vamos a Ford, vamos a definir tu estado que nombraremos, formaremos, formaremos valoraremos y estableceremos valor extranjero como la función de actualización. Entonces tu estado va a ser el siguiente va a ser un objeto, y yo lo que sugiero sugerí ponerlo fuera del componente porque lo vamos a recitar a valor inicial cuando lo vamos a presentar. Pero vamos a presentar el formulario. Entonces pongamos en la forma de espectáculo. Y va a ser un objeto con conocimiento de nombre y descripción. Está bien. Igual que tenemos nombre prop para nuestra entrada. Está bien, así que te quedaste por aquí. Por defecto va a ser forma inicial. ¿ Todo bien? Además, gente necesita el estado de carga. Vamos a definirlo de antemano. utilizaremos cuando entreguemos el formulario. Entonces tu estado va a ser falso. Muy bien, ahora, primero tenemos que manejar cuando tenemos que tomar los datos. Entonces cuando usamos evento de cambio propio Así que vamos a cuatro const en cambio de forma Y la cosa con nuestro traje, cuando usamos en evento de cambio, automáticamente nos da el valor como su primer argumento, no el objeto de evento. Entonces tendremos valor aquí. Entonces vamos a verter el valor de forma CET como valor. Y en realidad es ligeramente diferente con nuestras formas de traje. Cuando tenemos un componente de formulario en nuestro seguro, automáticamente te da no el valor de la entrada real que lo agregas. Pero te da el valor de toda la forma, por lo que es realmente conveniente usarlo con estado de uso. Muy bien, entonces en esto en cambio de formulario, vamos a puerto para nuestro componente de formulario. Por lo que en el manejador de cambios va a estar en cambio de forma. Ahora. También necesitamos validar de alguna manera nuestros datos y primero, vamos a asociar el estado real con el formulario. Por lo que tiene esta propiedad llamada valor de forma. Por lo que debe ser un objeto que interactúe con el con la forma justo nuestro estado. Muy bien, entonces vamos a pobre valor de forma. Y esto on change event nos dará el nuevo valor de forma cuando actualicemos cualquier elemento fuera este formulario. Entonces, ¿cuál va a ser nuestro objeto al final? Está bien. Entonces, como dije antes, ahora necesitamos validar de alguna manera los datos, el formulario cuando enviamos. Bueno, nuestro traje nos proporciona si con métodos de ayudante para lograr eso, podemos definir un esquema que podamos someter a nuestro seared, y entonces nuestro traje comprobará contra este esquema. Entonces definamos nuestro esquema. Yo aquí en la parte superior para nuestra forma, Vamos a definirlo modelo. Y aquí vamos a usar esquema que importamos de nuestro traje de lo que vamos a poner modelo. Y dentro de este modelo, necesitamos poner un objeto que representará a nuestro estado. Entonces tendremos nombre. Debe tener la forma igual que nuestro estado. Entonces el nombre va a ser tipo de cadena, que en realidad viene de los tipos de esquema. Entonces hagámoslo estructurar cadena o tal vez esquemas tipos de puntos de este objeto, vamos a d estructura tipo cadena. Entonces usaremos el tipo de cadena para definir que el nombre va a ser un encogimiento. Entonces tipo de cadena, entonces vamos a poner se requiere para realizar la validación y otro mensaje se va a disparar. Nombre se requiere todo bien, y lo mismo servirá. Descripción de cuatro. Vamos a copiarlo. Vamos a renombrar a descripción y digamos descripción se requiere el cool Piense en esta validación de esquema moral que se validará en tiempo real. Ahora tenemos que presentar este esquema en nuestro formulario. Entonces vamos a encontrar este componente de formulario. Y aquí como móvil, vamos a especificar nuestro esquema Moto, nuestro objeto modelo aquí. Muy bien, ahora necesitamos realmente crear la función de envío. Entonces, antes que nada, vamos en realidad al cambio de forma. No está optimizado aquí porque tenemos mucho estados fuera que cambian constantemente, por ejemplo, es valor abierto y extranjero. Entonces cada vez que vamos a tener en forma cambio siendo creado y se copia fuera de esta función. Entonces vamos a memorizarlo de antemano para que sea más optimizado. Muy bien, Y ahora realmente vamos a crear nuestra función on submit. Entonces vamos a llamarlo digamos en enviar y va a ser una función de sumidero por adelantado y aquí el primer paso será realmente validar los datos. Entonces, ¿cómo podemos hacer esto? Cómo puede validar nuestros datos contra el esquema que aquí definimos. Necesitamos realmente usar una referencia para hacer referencia a nuestro componente de formulario y luego usando esta referencia, podemos llamar a sus métodos internos para validarlo. Entonces, ¿qué podemos hacer ahora? Sabemos que podemos usar ref de reaccionar. Entonces pongámoslo aquí. Vamos a nombrarlo forma, ref, y luego vamos a llamar uso ref desde reaccionar. Entonces vamos a pasar este formulario ref a este componente de formulario. Tan áspera va a ser la forma, respiración y el oído. El primer paso va a ser si form ref dot current dot check. Por lo que este método de comprobación está disponible en este componente de formulario al que accedemos directamente por aquí , Así que esta comprobación validará estos datos validará nuestro valor de formulario, que es nuestro estado contra el esquema que aquí definimos. Entonces si todo está bien, volverá al verdadero valor Bullen. Si no lo es, será falso. Por lo que vamos a comprobar si nuestro cheque de valor de formulario no pasó. Entonces si tenemos un valor falso, entonces simplemente vamos a regresar de esta función como consejo. Vamos a actualizar nuestra base de datos con el con la nueva sala. Entonces vamos a verter CET se está cargando a true antes de cualquier tarea asíncrona. Y aquí vamos a crear un nuevo objeto que vamos a guardar en la base de datos. Entonces digamos nuevos datos de habitación. En realidad va a ser, ah, ah, donde nuestro valor de forma estatal. Pero también vamos a subir otra propiedad en la que se va a crear así que aquí vamos a difundir todo el valor de forma que tenemos, y luego vamos a poner creado en y luego vamos a importar base de fuego desde la base de fuego para arriba y luego aquí ha creado en vamos a verter firebase dot base de datos punto valor del servidor dot timestamp. Por lo que ahora tenemos los datos complejos de neuronas que necesitamos guardar en la base de datos. Entonces pongamos try catch blawg antes de cualquier tarea asíncrona. Y por si fuera mejor, vamos a verter. CET se está cargando a falso, y vamos a matar punto de alerta Mejor mensaje de error con cuatro segundos. Está bien. Se ve bien. Ahora vamos a llamar a base de datos de espera para Project desde Firebase. Entonces vamos a poner al Dr. Ralf para este ref. Vamos a especificar solo habitaciones por lo que mantendremos nuestras habitaciones debajo de las habitaciones, camino dentro de la base de datos y para empujar. Y tú, digamos que valore dos bases de datos para que la clave se genere automáticamente. Vamos a llamar método push, así y dentro de las escuelas iban a pasar nuevos datos de habitación. Entonces después de que tengamos datos dentro de nuestra base de datos, vamos a establecer está cargando dos caídas y vamos a restablecer nuestro estado inicial. Entonces llamemos al valor de forma sat. Va a ser forma inicial, y después de eso debemos asegurarnos de que también nos acerquemos a la ventana del motel. Entonces llamemos también a la ropa. Y luego pongamos otra alerta con info y vamos a decir valor foráneo. Déjame abrir cotizaciones aquí. Vamos a decir nombre de punto de valor extranjero O en realidad, déjame llamarlo antes de que así. Entonces el valor de la forma va a ser diremos que se ha creado. Y luego otra vez, cuatro segundos como siempre. Está bien, así que se ve bien. Ahora realmente necesitamos usar está cargando y en formulario enviar. Lo vamos a poner para este botón que vamos a poner en click aquí y vamos a pasar a presentar así. Y ahora para usar esto es estado de carga. Lo usaremos para este botón. Haremos que se deshabilite cuando tengamos está cargando configurado en true. Está bien, fue mucho. Ahora vamos a probarlo en realidad. Entonces ahora déjame refrescar sólo para asegurarme. Déjame entrar. Hola, entonces voy a poner otra cosa. Y aquí, si lo dejo vacío, se puede ver que se requiere la descripción. En realidad, el formulario está siendo validado en tiempo real. Eso se debe a que definimos el esquema. Muy bien, vamos a pobres Hola. Y pongamos descripción de esta habitación. Demos click en Crear nueva sala de chat y podemos ver que alerta no es una función. Está bien, tal vez vamos a moverlo como esta Alerta. Está bien. Punto de alerta El error fue el problema real. Llamé solo e r R, pero es error. Entonces esa es mi apuesta. Está bien, ahora, probémoslo una vez más. Crear nueva sala de chat. Vamos a poner hola descripción. Oye, tres nuevos permisos de charlatán esta noche. Eso está bien, porque también necesitamos definir reglas de seguridad para nuestra base de datos. Entonces abramos reglas y aquí vamos a definir nuestro próximo esquema. Entonces los próximos dos perfiles, vamos a copiar esto. Vamos a puerto también habitaciones y para habitaciones vamos a especificar. Por lo que para leer y escribir para todo lo que hay dentro de aquí, lo vamos a permitir sólo cuando el usuario esté autenticado. Entonces en cambio, fuera de usar esta verificación, vamos a decir que el permiso de lectura y escritura sólo se permite cuando está apagado, no es igual ahora y lo mismo vamos a hacer por básicamente todo aquí, lo vamos a poner aquí en lugar de idea futura, vamos a tener, Digamos, sala I d. Y luego también para leer. Vamos a pacificar autor, no igual nieve y fuera, no igual ahora. Está bien. Se ve bien. Vamos a copiarlo. Y también lo sincronicemos con nuestro archivo local, que son reglas de base de datos. Jason. Vamos a guardarlo. Y echemos un vistazo. Por lo que ahora se publican nuestras reglas. Si hago click en crear nueva sala de chat ahora, hola se ha creado. Y si miras dentro de la base de datos ahora debajo de las habitaciones, tenemos una nueva clave que fue generada automáticamente por la base de datos. Y luego tenemos nuestros datos creados a descripción y nombre. Está bien. Se ve perfecto. Supongo que ese es el buen momento para terminar este video. Déjame comprometerme todo. Y luego vamos a especificar botón crear para crear nueva sala de chat. O tal vez en nuevo botón en la parte inferior para crear nueva sala de chat. Está bien, nos vemos en el siguiente. 115. Crear las listas de habitaciones de chat - Parte 1: Oye, En este video, comenzaremos a crear Chatham List Dentro de la barra lateral Aquí en la parte inferior. Vámonos. Esperemos dentro de Bardo GS en primer lugar. Y aquí, justo después de una criatura en Bt y Moto, vamos a poner componente divisor de nuestro traje y dentro de burbuja pasado. Unirse texto de conversación. Y además, movamos esta importación a la parte superior para evitar una excelente advertencia. Vamos a comprobarlo. Se ve bien. Ahora necesitamos definir realmente los componentes. Por lo que en la carpeta Componentes, vamos a crear nueva carpeta que la gente nombre habitaciones aquí. Vamos a poner dos nuevos archivos chat room list dot GS y elemento de habitación. No lo hagas Sí, por lo que el artículo de la habitación ya estará vacío. Y en realidad lo mismo aplica para la lista de chatroom dentro de lado Bardo Gs Aquí en la parte inferior. En lugar de este texto que usamos como marcador de posición, usemos la lista de salas de chat. Está bien, vamos a guardarlo. Echemos un vistazo. En realidad podemos ver el texto Hola por lo que funcionó. Perfecto. Ahora definamos el mercado. Esperemos en Chatham List y aquí vamos a poner suficiente componente de nuestro traje para que los apoyos pasen apariencia Satel. Entonces va a ser vertical e invertirse. Y para nombre de clase, pasaremos el siguiente. Por lo que necesitamos hacer que este componente estos elementos gateen un ble. Entonces vamos a pasar desbordamiento en ¿Por qué? Pergamino de acceso. Por lo que veremos siempre la barra de desplazamiento. Y también vamos a pasar Aduanas Crow para que sea estilizado. Muy bien, Y luego dentro de burbuja pasado suficiente punto itim y luego artículo de la habitación así. Está bien, echemos un vistazo. Está bien. Se ve perfecto. Podemos apoderarnos de la palancla, y podemos ver que está un poco de estilo. Está bien, bien. Ahora definamos nuestro marcado para elemento de habitación. Entonces lo dividiremos en dos. Dave por dentro arriba, parte y abajo, parte por dentro. En parte inferior, vamos a definir nuestro texto. Entonces vamos a poner elemento hilado, y no vamos a poner mensajes todavía por ahora y por el nombre de la clase. Vamos a especificar que va a ser display flex align items center, y aplicaremos texto black off 70% de capacidad. Está bien. Para la parte superior, vamos a poner aquí nombre de la habitación y ¿cuánto tiempo hace? Se ha publicado el último mensaje. Entonces definamos clase. Nombre fuera de display flex, luego justifique el contenido entre dos espacios publicitarios entre nuestros elementos y luego alinee el centro de elementos . Muy bien, entonces nuestro primer elemento va a ser de tres años de edad con el nombre de la habitación dentro. Entonces primero vamos a definir texto estático, y cuando tengamos los valores dinámicos reales, los borraremos. Entonces para H tres, vamos a especificar que el texto desaparezca para evitar el desbordamiento. Y segundo Element en realidad va a ser un nuevo componente que la gente instale. Entonces por ahora, pongamos span y echemos un vistazo primero al navegador. Vamos a comprobarlo. Cómo se ve Ok, se ve bien. Pero en lugar de esta x X, vamos a usar el tiempo atrás React para mostrar un tiempo relativo como este ha sido publicado hace cinco minutos. dos horas. Llega un día. Entonces vamos a instalarlo. Voy a abrir perros y sólo copiar este Encomio. Entonces voy a detener mi app e instalé este paquete. Esperemos y luego seguiremos. De acuerdo, Paquete ha sido instalado. Empecemos de nuevo el up y usemos estos paquetes. Por lo que a partir de la documentación, voy a copiar esta importación. Entonces voy a importar a artículo de la habitación y vamos a copiar d empresa misma. Y pongámoslo en lugar de este lapso para que no necesitemos localizarlo. Entonces vamos a usar nueva fecha por ahora. En cambio, fuera de estas fechas beben para solo mostrar la hora actual. Está bien, así que actualicemos la app y echemos un vistazo. De acuerdo, entonces ahora tenemos justo ahora perfecto. Y pensarán en esta biblioteca que actualizará este temporizador, Digamos en tiempo real, pero no me gusta la aparición de este texto. Entonces voy a cambiar el nombre de la clase hace tiempo fuera, componente un poco. Por lo que se va a formar normal. Y también texto negro. Digamos 45 opacidad. Echemos un vistazo ahora mismo. Está bien. Se ve mucho mejor. De acuerdo, sigamos adelante. Y nuestro último pensar aquí será en realidad hacer que este componente haga de esta lista de chatroom altura completa. Entonces para esto, necesitamos calcularlo porque nuestro chat es de página completa. Entonces, ¿cómo podemos hacer esto? ¿ Cómo podemos acercarnos a esto? Sabemos que nuestra página completa es del 100%. Podemos sacar la altura de la parte superior de la barra lateral, y luego podemos restar esta parte superior de 100 entonces conoceremos la altura de descanso, que es nuestra lista de salas de chat. Vámonos. Entonces no vamos a grande edad para deslizar Bardoczky s Y nuestra parte superior es este elemento Def. Para obtener la altura real de esto, def, necesitamos usar referencias. Entonces vamos a crear nueva referencia, que vamos a nombrar topside, Bar Arraf y vamos a utilizar el gancho ref. Entonces vamos a pasar este topside despojado a este respiro def va a ser topside por ref , y vamos a poner altura a estado para que lo seguiremos rastreando. Entonces vamos a definir que etapa, que nombrará altura y se sentó apretado por ahora, por defecto, será tal que ahora o 20 realmente no importa dentro efecto uso. Vamos a sacar la altura real de este def y luego lo dijimos a afirmar. Entonces pongamos efecto de uso. Y dentro de este efecto de uso, preguntemos al siguiente. Entonces si tenemos topside por ref dot current porque puede ser indefinido en algunos momentos, Así que vamos a comprobar si realmente se definió, entonces vamos a establecer altura a topside por Ralf, no altura de desplazamiento de puntos actual. Entonces cuando tratamos de acceder a topside desprovisto de corriente, es como si tratáramos de acceder al elemento cuando lo obtenemos con documento. Obtener elemento por i t Así que es muy útil en algunos casos como este. También queremos ejecutar esta función de devolución de llamada de efecto siempre que nuestros fueran topside. barra F cambia. Muy bien, Ahora pasemos este estado esta altura a la lista Chatham para que podamos calcular la altura real . Entonces pasemos por encima de la altura del elemento como altura y dentro de la lista jet room se d estructura por encima de la altura del elemento y luego qué vamos a hacer. Vamos a aplicar estilo en estilo Lyons, que va a ser altura, incurable, incurable, usar la función de cálculo CSS. Entonces vamos a alco de cerdo. Entonces vamos a usar 100% de edad menos por encima del elemento por encima de la altura del elemento y al final, vamos a poner píxeles porque esta altura calma en píxeles. Ahora echemos un vistazo. Si la aplicación se actualiza, en realidad no pasa nada. Eso se debe a que no hicimos cascada eran altura de página completa. Entonces, ¿qué está pasando que dentro de casa dudoso s aquí? Quién dijo h 100 sobre Lee al gran componente, pero para que funcione para unos componentes anidados también. Necesitamos establecer la altura de 104 todos los Niños para todos los componentes anidados. Entonces para fila, vamos a especificar edad 100 y para columna hará lo mismo Ahora. Dentro de alambre lateral, ya aplicamos H 100 a su elemento de crianza, por lo que funcionará. Ahora echemos un vistazo e inspeccionemos el componente. Como puedes ver, ya tenemos altura completa y se calcula automáticamente y no tendremos ningún desbordamiento. Siempre se ajustará a la altura de página completa. Entonces si inspeccionamos este elemento, podemos ver que la altura se calcula automáticamente para nosotros. Por lo que tenemos 138 píxeles, que es la altura de la parte superior. Fuera de la barra lateral. Está bien, así que se ve bien. Y supongo que esto es todo para este video y el siguiente vamos a seguir. Entonces vamos a sumar todo al estado escénico y comencemos a trabajar con lista de salas de chat . Nos vemos en el siguiente 116. Crear una lista de salas de chat - contexto de las habitaciones" (parte 2): Hola ahí. En este video, seguiremos trabajando en Chatham List. La última vez definimos Mark up. Esta vez vamos a crear y administrar el estado. Vámonos antes de entrar en el código. Yo quiero definir cómo vamos a acceder a este estado. Así que las salas de chat. Es algo deuda a la que accederemos globalmente dentro de la página principal. Entonces vamos a usar context a p I para poder acceder a él desde dentro del componente de barra lateral, pero también desde dentro de la ventana de chat que aún no hemos creado. Navegemos a Carpeta Contactos y aquí vamos a crear su contexto de salas de archivos. El G s. Aquí vamos a crear nuevo contexto habitaciones dame indatables contexto con crear función de contexto que viene de reaccionar. Entonces necesitamos definir un componente, un proveedor que brinde el contexto a todos sus Niños. Entonces vamos a exportar const habitaciones proveedor como argumento. Recibirá Niños y se va a devolver habitaciones context dot provider, y pondremos Niños dentro como valor. Por ahora, sólo pongamos una cuerda. Y si la tenemos en este componente, dice, reaccionar debe estar en alcance. Entonces vamos a importar reaccionar de reaccionar. Está bien. Bien. Ahora definamos el estado. Entonces va a ser sencillo. Por eso podemos usar estado. Por lo tanto, definamos las habitaciones y las salas de los sáb por defecto. Se establecerá para montar, y obtendremos nuestros datos dentro efecto de uso cuando el componente se monte. Entonces vamos a usar efecto y dentro primero, almacenaremos nuestra referencia a las formas de datos. Entonces si abrimos base de datos, recordamos que almacenamos nuestros datos debajo de las habitaciones, slash cuarto I d. Y luego va datos. Entonces lo que haremos, pondremos un oyente en tiempo real en las habitaciones para que podamos obtener actualizaciones en tiempo real. Vamos a crearte valioso que vamos a nombrar lista de habitaciones en bruto y va a ser base de datos dot ref rooms. Entonces ahora tenemos la referencia. Entonces vamos a poner un oyente en tiempo real usando el punto en el método. Entonces llamemos lista de habitaciones. Ralf pensó en el valor y luego para la devolución de llamada. En cuanto a ahora, recibe playera a presión. En cuanto a ahora, vamos a Cónsul look, snapshot dot value right. Y debido a que es un oyente en tiempo real, necesitamos darse de baja de él porque se trata de una suscripción. Por lo que haremos esto dentro de la función de limpieza. Efecto de uso apagado aquí. Vamos a poner lista de habitaciones punto áspero Off it desconectará a todos los oyentes en tiempo real de esta referencia dentro de la base de datos. Está bien, vamos a guardarlo. Y usemos realmente este contexto. Navegemos a la página principal. Y aquí vamos a envolver todo alrededor proveedor de habitaciones. De acuerdo, digamos con y echemos un vistazo. Si voy a consola, puedo ver que tengo valor de instantánea, que es un objeto donde cada clave es idea de habitación y luego va datos. Entonces tenemos a este capataz porque tenemos base de datos basada en Jason. Pero estos no son exactamente los cuatro meses con los que queríamos trabajar. Necesitamos una vía aérea. Entonces vamos a crear una función auxiliar que transformará este tipo de objeto en una matriz. Entonces vamos a definir una nueva función dentro de los togs ayudantes que vamos a nombrar. Vamos a una transformación de dos array con I d. recibirá valor de snapshot como argumento y volverá. Lo siguiente primero es comprobar si existe valor de instantánea. Si nuestros datos no lo son ahora, si tenemos algún dato. Entonces si este es el caso, entonces vamos a poner la lógica. De lo contrario volveremos y vaciaremos. Correcto. Entonces, ¿cuál será nuestra estrategia? Vamos a llamar al objeto el método beso para verter todas las ideas de habitación en una matriz. Y entonces mapearemos cada valor, cada habitación que d a estos datos. Vámonos. Por lo tanto, pongamos las teclas de punto de objeto fuera del valor de la instantánea para obtener a todos los niños como una matriz. Entonces vamos a mapear cada valor de esta zona donde cada elemento es habitación i d a un objeto que serán todos los datos de nuestra habitación. Podemos acceder a ella con snapshot value off room I D. Y entonces vamos a adjuntar i d otra propiedad, que va a ser habitación I d Muy bien, vamos a navegar dos habitaciones contexto y aquí en su lugar, off usando el valor de punto de instantánea, vamos a transformarlo menos grandes nuevos datos valiosos aquí. Vamos a poner transform to array con i d. Y pasaremos snapshot dot value insight. Está bien. Y vamos a los CTA's consulares más tarde para ver qué realmente recibimos. Ahora, Como puedo ver, tengo una matriz fuera de habitaciones y tengo datos y también tengo d como propiedad. Está bien, así que esto es lo que yo quiero. Ahora, realidad actualicemos el estado. Llamemos a salas de juegos y pongamos los datos dentro. Y luego pasemos este estado al contexto como nuestro valor del cual son las habitaciones. Está bien, esto es todo por ahora. Supongo que en el siguiente video, terminaremos esto y mostraremos nuestras habitaciones desde la base de datos. Pero por ahora, terminemos este video cometiendo nuestros cambios. Get commits dash M y para el informe de mensajes creado habitaciones contexto. De acuerdo, nos vemos en el siguiente. 117. Crear la lista de habitaciones de chat - muestra las habitaciones y los usarlas como enlaces (parte 3): Hola ahí. En este video, mostraremos salas de chat que almacenamos dentro de la base de datos, utilizando el marcado y contexto que creamos en los videos anteriores. Vamos, Abramos nuestro código. Y aquí vamos a abrir el componente de lista de salas de chat. Aquí la gente consume nuestro contexto. Y de nuevo como antes, en lugar de usar cues context y luego especificar el contexto importando el archivo, vamos a crear un gancho auxiliar dentro de habitaciones, contactos. Vamos a exportar. Const. Lo nombrará. Usa salas, y va a ser una función que nos devuelva el valor de los contactos. Entonces pongamos a usar el contexto y pacificar el contexto de las habitaciones. De esta manera, evitaremos llamar cues contexto con habitaciones, contexto cada vez pero usar habitaciones. Muy bien, así que dentro de la lista de componentes destrozados. Llamemos a esto uso habitaciones gancho y ahora obtenemos el valor de contexto. Ahora lo que pasa es que estas habitaciones podrían ser nulas para el momento en que tratemos de acceder a ella, porque nuestro estado inicial es aburrido y solo cuando se monta componente obtenemos los datos reales. Por lo que necesitamos poner corrida condicional, beber y comprobar en contra de ella aquí dentro. Suficiente. Pongámoslo si no tenemos habitaciones. Entonces vamos a mostrar el componente Lauder que viene de nuestro traje. Estará centrado, y estará centrado. Vertical E. Además, tendrá contenido, lo que dirá carga y tendrá baja velocidad. Está bien. Y además, especifiquemos talla a tamaño mediano. Está bien, cita. Ahora, vamos a mostrar el segundo renderizado condicional para mostrar realmente los datos vamos a mapear cada elemento de matriz, que son las habitaciones que transformamos con la transformación para llegar con I d a un elemento j seis. Entonces preguntemos si tenemos habitaciones y habitaciones punto terreno es mayor que cero Onley. Entonces vamos a llamar a cuarto, iniciar mapa dentro tendremos poco mi Tim y tenemos un mapa. Esta habitación me tiento a amar componente de artículo así. Y no lo olvides, cuando usamos este mapa de puntos, necesitamos especificar la prop clave. Entonces pongamos a la habitación oscura. Yo d. Y entonces vamos a pasar todo el objeto de la habitación como una habitación, propiedad a elemento de habitación como este. Está bien. Se ve bien. Ahora abramos elemento de habitación el siguiente aquí, vamos a destruir chur o propiedad propia, y dentro del componente, vamos a volver a conseguir nuestro equilibrio por estructurar el objeto de habitación esta vez. Por lo que habremos creado en y también tendremos nombre de habitación. Entonces en lugar de esta estática gravada, vamos a mostrar el nombre de la habitación que nos estructura D y también hace cuatro tiempo componente. Si no tenemos ningún mensaje, vamos a mostrar el tiempo cuando se haya creado esta sala. Así que solo pasemos Nueva fecha creada bien, Ahorremos y echemos un vistazo. Perfecto. Ahora podemos ver que la habitación ha sido creada hace un día y el nombre de la habitación es Hola, Tal vez intentemos crear una habitación más. Entonces vamos a dar click en nuestro Moto. Pasemos si conocía Roll name y lo que sea reporte para descripción. Si haces click en esto, podemos ver que los datos se están actualizando en tiempo real, por lo que todo funciona perfectamente. No obstante, también quiero convertir este componente en un enlace. Entonces cuando hacemos clic en él, realidad vamos a la página de chat. Muy bien, así que volvamos al código y vamos a ir a la lista de la sala de chat aquí para este artículo snuff. En primer lugar. Creo que quiero hacer, quiero especificar clase de componente por lo que renderiza este ítem suficiente usando este elemento proporcionado para una clase competente. Se va a vincular componente que viene del router del reactor tonto para este componente de enlace , vamos a pacificar su propiedad, que también lo es. Entonces pongamos dos. Y usemos la interpolación de cadenas para especificar qué ruta habrá si hacemos click en ella. Por lo que va a ser chats slash room I d. Así que vamos a abrir string contar población y pongamos idea de habitación. Está bien, genial. Vamos a comprobarlo. Ahora. Si hago clic en él, se puede ver que el Ural cambia y en realidad tenemos la funcionalidad. Pero también quiero activar este ítem siempre que tengamos la ruta correcta correspondiente al enlace. Entonces lo que necesitamos hacer como antes con taquilla, necesitamos obtener nuestra ubicación actual. Por lo tanto, usemos el gancho de ubicación que viene de reaccionar Router paquete abajo. Ahora para este snuff, vamos a pasar una propiedad más, que va a ser clave activa, por lo que la clave activa va a ser la ubicación, no el nombre de la ruta. Entonces necesitamos pacificar o, digamos, asociar cada elemento de amor con su corriente. Vamos a una llave. Entonces para esto, necesitamos pasar una propiedad más, que va a ser clave de evento. Y debe corresponder a la clave activa, que es nombre de ruta de punto de ubicación. Por lo que será slash chats, slash room I d Así que para la clave de evento, vamos a especificar exactamente lo mismo que para a la propiedad. Y ahora va a funcionar. Vamos a comprobarlo. Y ahora mismo, cuando coincida nuestra ubicación, tenemos la animación cool y tenemos la clave activa. Por lo que funciona perfectamente. Pero quiero modificar una. Piensa en lugar de chats, quiero usar solo chat así. Está bien, vamos a comprobarlo una vez más. Si cambio a la página de chat, tengo este elemento activo. Está bien. Bien. Entonces esto es todo. Terminemos nuestro video. Pongamos todo al estado escénico, y luego llamemos, concédete con las salas de chat mostradas. Está bien, genial. Esto es todo para este video. La próxima vez vamos a construir nuestra parte derecha fuera del sitio web y vamos a empezar a construir ventana de chat. Nos vemos allí 118. Crear diseño anidado para la página de inicio: Oye, En este video, crearemos Lee nuestro para la página principal. Entonces por ahora, ya construimos la parte izquierda, cuál una barra lateral? Ahora mismo vamos a definir nuestra parte correcta, y vamos a ver cómo van a jugar un responsive vamos. Entonces abramos home togs archivo. Y aquí tendremos un nido, una sequía. Entonces cuando hacemos click en una sala de chat, podemos ver que vamos a chat slash room i d. Para eso, necesitamos crear un acidamente fuera porque lo vamos a mostrar en la página principal. Entonces lo que le propuse dio aquí en lugar de solo usar un archivo directamente, vamos a crear para no la carpeta home. Y aquí vamos a poner todas las sequías de Nestor y casa DGS va a estar dentro de togs índice . Entonces vamos a crear nueva carpeta home adentro vamos a poner a casa de lo que vamos a renombrar a index dot gs. Y aquí nuestro nido la sequía va a ser página de chat. Entonces vamos a crear nuevo archivo que vamos a nombrar Chat Doggy s. y por ahora, va a estar vacío. Solicitous port. Hola? Muy bien, entonces dentro de este índice Si lo guardamos, actualicemos No se puede abrir directorio. Está bien, tal vez reiniciemos la app y funcionará. Déjenme refrescar. Está bien, ahora parece bien. Bien. Sigamos. Por lo que se va a definir nuestro primer paso. Ah, ¿dónde? Néstor Sequía. Entonces aquí, junto a esta columna, definamos la sentencia switch y aquí vamos a verter la ruta del chat y la barra lateral Se persistirá porque es nuestro diseño. Entonces dentro de esto, que vamos a derramar y porque nuestra página principal ya es privada, no necesitamos verter sequías de nido. También rutas privadas. Podemos usarlos como públicos porque nuestros padres son privados. Significa que esos ya están protegidos. Por lo que va a ser ruta exacta y camino va a ser slash chad slash chat I d seguir la grilla. También tenemos que poner una columna por aquí. Entonces pongamos columna y dentro vamos a verter chat y vamos a importarnos también de esta carpeta. Entonces déjame especificar el chat y vamos a usar el chat. Está bien, ahora se ve bien. Definamos cómo tomará Maney las columnas de la página de chat. Por lo que en dispositivos pequeños, tomará las 24 columnas y en dispositivos medianos. Nos vamos a quitar el resto de esto así que van a ser 16 y luego clase Nombre también va a ser una iglesia 100. Ahora echemos un vistazo y veamos. Está bien, ¿tenemos Hola, Inspeccionemos y tratemos de rece hielo. Muy bien, entonces vemos que cuando estamos en dispositivos pequeños, tenemos esto, digamos, de arriba a abajo, Lee fuera. Eso no es lo que queremos. Queremos ocultar este hola en dispositivos pequeños y porque necesitamos no solo ocultar esto, también queremos asegurarnos de que cada vez que vamos a la sala de chat, no veamos la barra de navegación. El bar lateral. Entonces por eso necesitamos poner algún tipo de ah, digamos condición complicada. Entonces, en primer lugar, necesitamos definir nuestro punto de ruptura cuando estamos en el escritorio, y esto es cuando tenemos 992 píxeles. Entonces primero definamos es el escritorio, y va a ser el resultado fuera de uso de media query hook que definimos antes. Y aquí vamos a preguntar si hombres con IHS 992 pixels, ¿ verdad? Entonces en este caso, tendremos escritorio. Además, necesitamos tomar nuestra segunda condición cuando estamos exactamente en la página de inicio para que podamos mostrar barra lateral en dispositivos pequeños, no en la página de chat, por lo que se ocultará. Entonces definamos es exacto así. Vamos a destruirlo de uso, no de uso. Media Query usado ruta mucho. Es otro gancho que proviene del router reaccionar, lo mismo que la ubicación de uso. Pero este cocinero nos da, digamos, piensa relacionado con nuestra ruta actual y partido de sequía. Por lo que uno de estos apoyos es exacto y dirá si estamos actualmente en esta ruta definida , que es la página de inicio. Por lo que cada vez que vamos a estar en sólo slash nos va a dar es exactamente igual a la verdad. Muy bien, entonces ahora definamos nuestra condición. Entonces vamos a pobre puede renderizar barra lateral y vamos a preguntar si es escritorio para si es exacto pasado en Lee, entonces podremos renderizar barra lateral. Entonces ahora aquí, vamos a verter la siguiente lógica. Entonces si podemos renderizar barra lateral, entonces vamos a poner esta columna y ahora aquí tenemos que definir también, Digamos, un cuatro a Digamos, cuatro horas o si alguien abre una página de chat rota, podemos vivirla vacía y estará bien. Pero hagámoslo elegante y salgamos aquí y aquí. Vamos a preguntar si es sólo escritorio. Entonces queremos mostrar columna, y tendrá, supongo, supongo, el mismo lee fuera de aquí. Entonces, solo copiémoslo. Y adentro, vamos a tirar de ella. Digamos solo texto que dirá Por favor seleccione chat y nombre de clase va a ser gravado centro y margen superior derechos de Fage. Ahora echemos un vistazo. Por lo que siempre que ahora estamos en chats slash menos espacio yo d Podemos ver sólo charla en página. Si elimino esto y navego a la página principal, puedo ver solo barra lateral, por lo que queda bien. Si lo redimensiono, puedo verlos a los dos para poder ver mi sala de chat, pero en cambio fuera del chat real. Siempre que no esté seleccionada, puedo ver a policía seleccionar tiro al fondo completo para fuera, lo que funciona como 404 y si selecciono uno de los chats, puedo ver la ventana de chat real. Supongo que esto es todo para este video. La próxima vez seguiremos. Pero por ahora, sólo cometamos nuestros cambios. Pongámoslo a todo. Get commit y digamos creado nosotros nuestro para la página de inicio y creamos Shat page para la derecha. Impresionante. Nos vemos en el siguiente. 119. Crear la creación de la página de la de Chat y: Hey allá, en este video, vamos a crear Lee fuera para parlotear página que podemos ver a la derecha en lugar de esto . Hola? Vámonos. Volvamos a navegar para decodificar. Y aquí bajo la carpeta Components, saludamos y tu carpeta y que vamos a nombrar Chatt Window dentro. Vamos a crear tres nuevas carpetas más y cada una representará cada parte fuera esta página. Entonces vamos a tener primero Folder va a ser mensajes. Entonces vamos a verter arriba y abajo así, un interior un lugar de burbuja, todos los componentes correspondientes. Entonces dentro de fondo, pongamos togs índice y estará vacío por ahora que lo mismo que haremos por el resto. Entonces aquí vamos a poner índice togs, pero un nombre que mensajes que vamos a poner mensajes dentro, Vamos a guardarlo y cerrar. Y nuestro último componente va a ser esta charla. Entonces vamos a crear otro togs índice. Y pongamos la parte superior con la perspicacia del texto superior. Está bien, vamos a guardarlo y vamos a navegar a la página de chat. Entonces aquí, dentro de este def, vamos a echar otro def. Eso será un rapero para Chat Top, y lo importaremos apenas en un segundo. Entonces vamos a echar otro Dave. Y dentro pondremos mensajes y lo mismo. Aplicaremos el fondo Chad, todos los derechos y para cada uno de estos Daves. Si abrimos hija principal un CSS. Aquí tenemos clases gráfico arriba, Chad abajo y tiro medio. Entonces usémoslos para el chat de Porter de alto nivel Los cuatro mensajes principales. Pondremos un tipo medio y para Pero, um, vamos a poner nombre de clase Chad abajo. Muy bien, ahora, vamos a importar estos componentes. Entonces primero, vamos a importar chat. Tell up desde Navegemos dos componentes, ventana de chat y top. Entonces voy a copiar tres veces. Entonces voy a usar el fondo y los mensajes, y luego los reemplazaré por el fondo del chat y los mensajes. Está bien, se ve bien. Echemos un vistazo. Entonces ahora si con un fresco podemos ver, tenemos mensajes de arriba y abajo y vamos a quitar este envoltorio, def. Y echemos un vistazo una vez más. Ahora tenemos mensajes de arriba y abajo en la parte inferior. Está bien, bien. Ahora definamos nuestra lógica inicial para la página de chatroom. Entonces primero que nada, vamos a agarrar este Chad I D. Desde nuestros perímetros como recuerdas dentro de la página principal con pacificado como solo chatear yo d Así que vamos a agarrar de uso programas gancho que podemos usar usando reaccionar paquete rotor. Y luego podemos agarrar todas nuestras habitaciones que tenemos dentro del contexto como recuerdan. Entonces usemos el gancho de habitaciones que creamos antes. Y ahora realmente obtengamos nuestros datos actuales de la habitación. Entonces, ¿qué tenemos que hacer? En primer lugar, tenemos que comprobar en contra de esta habitación porque puede ser no por defecto, como recuerdan. Entonces preguntemos si las habitaciones no existen o si este valor es ahora, entonces vamos a verter componente de orden público que viene de nuestro traje. Y nuevamente se centrará verticalmente como antes. Tendrá tamaño mediano. Tendrá carga de contenido y la velocidad va a ser lenta. Está bien. Nuestro siguiente paso es sacar nuestra habitación actual de esta habitación es una tarifa. Entonces vamos a puerto const La habitación actual va a ser habitaciones dot find obtendremos artículo de la habitación. Entonces vamos a pedir a i d igual chat. Yo d. Está bien. Y luego al final, si no tenemos habitación actual. Entonces si ponemos un aleatorio tu l que no existe dentro de la matriz de esta sala, entonces vamos a devolver H six elemento con el nombre de clase, centro de texto y página superior del margen. Eso va a decir, Chad, yo no había encontrado. Está bien. Se ve bien. Quitemos esto, Lauder. Vamos a mover esta importación a la parte superior. Vamos a ahorrar. Echemos un vistazo. Tan carbonizado, Este no encontrado. Está bien, estoy corriendo aquí. Déjenme poner la negación delante de ella. Por lo que ahora va a funcionar. Muy bien, Así que hemos hablado mensajes abajo. Y si ponemos un loquero aleatorio por aquí, pero nos dispararán no encontrado. Está bien, Perfecto. Entonces esto es todo para este video en el siguiente video, me gustaría hablar de problemas de contexto y por qué es mala idea usar directamente salas de uso , gancho. Comprometamos nuestros cambios y terminemos ese. Entonces vamos a todo lo que obtienes sistema que vamos a comprometer nuestro mensaje y diremos creado Klay, nuestra página cuatro carbonizada. Está bien, bien. Nos vemos en el siguiente. 120. Problema de la API de context y una solución potencial; y la solución potencial: hola contexto. AP es increíble, ¿no? Pero siempre con cualquier buena herramienta, también hay un lado negativo. El problema con el contexto es que podemos seleccionar una parte de su valor. No podemos definir un selector por esa razón. Siempre que el contexto se consume con el gancho de contactos de uso, incluso si el valor no se usa y cambia, el componente se renderizará. Imagínese el contexto que pasa hacia abajo y objeto con la siguiente estructura. En un componente donde se muestra Título, nos gustaría obtener solo impuesto sobre títulos, derecho para que podamos destruir el texto de tu título a partir del valor de contexto y parece estar bien. No obstante, para el contexto, no importa si es destructor o si intentas seleccionar elementos parcialmente. Siempre te da todo el valor de contexto a partir de ahora, ya que el componente de título obtiene el valor cada vez que cambia algo dentro de nuestro objeto. Por ejemplo, buscar puesto, el componente título será para renderizar, y eso es malo. Para resolver esto, realidad podemos dividir el contexto en dos proveedores de contexto separados uno por clave de objeto. De esa manera, dividimos responsabilidades y render no se activará porque vamos a consumir sólo lo que necesitamos dentro de un componente de proveedor no se limitaron a usted. Sólo un contexto puede combinar múltiples contextos bajo un solo proveedor. Es muy útil cuando pasamos por los contactos, por ejemplo, el resultado del estado de uso, estado y su función de actualización para ellos. Eso serán dos contextos separados agrupados bajo un solo proveedor. Entonces ahora, si dentro de un componente consumimos contexto que proporciona el componente de la función de actualización no se renderizará . Cuando este estado cambie, sólo se renderizará si se cambiará el valor real fuera del contexto consumido, que es la función de actualización. En este caso, esto funcionará para la mayoría de los casos. No obstante, hay situaciones en las que nos gustaría pasar un objeto grande por el contexto, y crear un nuevo contexto para cada clave será una exageración. Para estas situaciones. Existe un selector de contexto de uso de paquetes que nos proporciona funcionalidad para seleccionar parcialmente el valor del contexto. Viene con las pocas limitaciones, pero cuando se usa sabiamente, los renders se pueden evitar en absoluto. Tan sólo para señalar, todo eso es considerado a la hora de usar patos credos en lugar de contexto un P I. Para la gestión estatal, sin embargo, Redox tiene una curva de aprendizaje y trae más complejidad, dependiendo de la app. Probablemente no lo necesites. Por eso usamos el contexto. A p i en el siguiente video vamos a instalar use context selector y veremos cómo nos puede ayudar a verte que 121. Problema de la API de context en la práctica: crear un sitio actual: hi en este medio creará contexto para la sala de chat actualmente abierta usando cues Context Lecter paquete. Antes de empezar, vamos a explorar cómo se va a manejar todo. En este momento hay contexto de habitaciones que roba toda la página de inicio. Datos de contexto es lista de chatroom con suscripción en tiempo real. Significa que si algo cambia en algún contexto fuera de la habitación, el valor se actualizará dentro de las habitaciones de Shadow GS. Se está consumiendo el contexto. Por lo que cualquier actualización a cualquier habitación provocará una rendición. Dos actualmente abren la página de chat, pesar de que la fecha AB no ha estado relacionada con ella. Por lo tanto, dentro de Chad Ogea s, proporcionaremos un nuevo contexto que nombraremos contexto de sala actual y vamos a pasar actualmente abre datos de sala para estos contextos. Vamos a usar selector de contexto. Imagine una situación cuando actualmente se actualiza el nombre de la habitación abierta. Creará una rendición por habitación actualmente abierta y también se obviarán los valores que pasaremos al contexto actual de sala. Hay un componente que consume contexto de habitación actual y muestra sólo descripción, no nombre, no nombre, porque fuera de uso selector de contexto, ese componente no se renderizará. Los cambios afectarán en Lee el componente que muestra nombre. De acuerdo, pongamos todo en práctica. Ya abrí oficial get happy pagina para uso context Selector paquete Y si me desplazo hacia abajo desde la parte de instalación, puedo ver que necesito copiar este comando. Entonces hagámoslo. Volvamos al código y dentro de Terminal Integrada lo voy a ejecutar y esperemos hasta que esté instalado. Perfecciona los paquetes ahí. Ahora ejecutemos la app y no volvamos a la documentación. Entonces, desde la parte de uso, podemos ver que en realidad no es diferente de cómo usamos el contexto de creación normal. Por lo que volvamos al código. Y aquí en su contexto, carpeta menos gran nuevo archivo que vamos a nombrar contexto de sala actual. Dodgy. Sí, Aquí. Vamos a crear contexto de habitación actual y vamos a usar crear contexto, el que viene de no reaccionar. Convertiremos Teoh una joya de seis mo y de uso selector de contexto. Muy bien, así que la siguiente parte va a ser crear el componente proveedor. Entonces pongamos export const proveedor actual de habitaciones para que reciba Niños y luego también recibirá datos por lo que llevará algunos datos que pasaremos a este proveedor. Entonces aquí vamos a devolver la corriente del proveedor de Context Dar. Y vamos a pobres Niños ahí y por valor. Vamos a pausar los datos, así que el componente proveedor va a ser como un intermediario. Está bien, Entonces si tenemos nuestra reacción, debe comenzar alcance. Entonces vamos a importar reaccionar de reaccionar o me voy. Ahora veamos realmente cómo podemos seleccionar algunos datos de aquí? Por lo que necesitamos usar contexto, selector. Entonces necesitamos dar contexto que queremos consumir. Y luego proporcionamos el Colback que pique nuestro valor donde el argumento es nuestro estado actual . Entonces vamos a navegar un poco hacia abajo desde aquí. Podemos ver que en realidad podemos usarlo así. Entonces vamos a copiar esto y ponerlo aquí en el contexto actual de la habitación. Entonces lo que haremos, lo convertiremos en nuestro propio gancho personalizado. Vamos a importar usar selector de contexto desde el propio paquete, y luego lo vamos a convertir en un gancho. Entonces vamos a convertirlo a la función. Y en lugar de nombre, vamos a usar el cuarto actual y también la exportemos. Y para este uso sala actual, sólo pasaremos selector. Entonces pasemos selector aquí. Y en lugar de contexto de persona, vamos a verter el contexto actual de habitación y para selector, vamos a proporcionar selector. Ya estamos aquí. Ahora, no volvamos a nuestra página de chat. Y aquí, en lugar de este corchetes vacíos en lugar de reaccionar fragmento, usemos este proveedor. Entonces vamos a poner actual proveedor de habitaciones, y necesitamos pasar datos que vamos a poner a este contexto. Entonces pongamos datos Y para los datos, vamos a crear un objeto que vamos a nombrar, Digamos que datos actuales de la habitación. Entonces aquí vamos a crear este objeto, y aquí vamos a pasar los próximos valores. Entonces desde nuestra habitación actual, vamos a apogeo nombre y descripción destruyendo los valores. Y luego vamos a pasar nombre y descripción a corriente de datos que pasarán al contexto D. Muy bien, Así que si lo guardamos y si guardamos todo aquí ahora, si volvemos a nuestra app, en realidad nada cambiará. No obstante, si digamos que vamos a chatear arriba aquí, vamos a usar el gancho de habitación actual que creamos. Entonces vamos a seleccionar tal vez un nombre y para selector vamos a pasar Estado y de estado, vamos a escoger nombre o tal vez no, state. Pongamos envidia por valor así. Y ahora en lugar de top, vamos a mostrar este nombre desde el contexto. Está bien, Así que si digo eso, si me refresco, puedo ver Hola el nombre de la habitación que pasamos a los contactos Y si cambio, se cambiará. Entonces esto es todo. Es así como en realidad podemos alcanzar valores máximos desde el contexto. Y también es muy importante señalar que estos valores que escogemos del estado que escogemos del contexto es importante entender que podemos seleccionar objetos porque los objetos se comparan mediante referencias. Y si abrimos la documentación para este paquete, si nos desplazamos hacia abajo a limitaciones, podemos ver que el disparador del proveedor renderiza Onley si el valor del contexto se cambia preferentemente , por lo que los objetos son preferencialmente cambiado. Por lo que debemos tener cuidado con eso. Necesitamos seleccionar sólo tipos primitivos qué objeto no es. Y además, si miramos dentro de las limitaciones, necesitamos envolver nuestro componente alrededor de reaccionar, mamá. Entonces vamos a importar también mamífero de reaccionar y vamos a envolverlo alrededor así. Por lo que ahora se memoriza nuestro valor. Y si algo cambia para esta corriente a partir de los datos, vamos a una descripción. Y dentro de este componente superior, solo consumimos nombre. Este componente no se actualizará cuando se cambie la descripción. Entonces esto es todo. Algo a señalar aquí es que, como mencioné anteriormente, si consumimos habitaciones contexto dentro de este componente, y si algo cambia, se renderizará todo el componente. Entonces incluyendo este chat top mensajes y chat bottom. Pero porque aquí usamos mamífero, Teoh, memoriza nuestros componentes. Redujimos significativamente el árbol de actualización por lo que solo se actualizarán estos saltos de envoltura en cada cambio. Los componentes subyacentes chatean mensajes en el fondo del chat no se renderizarán. Entonces esto es todo. Esta es la cueva. Está fuera de contexto. AP I Terminemos este video. Entonces vamos a comprometer todo y vamos a poner el siguiente mensaje creado contexto de sala actual con selector de contexto de uso. Está bien, nos vemos en el siguiente 122. Crear un chat inicial: parte principal: Hola. En este video iniciaremos una página de chattel edificio. Vamos, Vamos a navegar de nuevo al código y vamos a abrir togs índice que representa en la parte superior aquí. En lugar de este nombre, vamos a verter otro def. Ese será otro superior. Entonces para este difícil nombre de clase de salida en display flex, justifique contenido entre el centro de líneas de ítems dentro vamos a tirar de la tachuela de cuatro años y dentro de pantalla rebelde Ah, eran nombre de chat. Entonces aquí de un nombre vocal y nombre de clase para este pan va a ser texto desaparecer y también vamos a poner y puedo por aquí frente a este texto cuando estamos en dispositivos móviles para que no podamos volver a la página principal. Entonces aquí, vamos a abordar y yo puedo y clase competente va a ser un eslabón que viene de reaccionar Router tonto que el propio Eiken va a ser círculo Flecha. El tamaño izquierdo va a ser doble X Y debido a que es un componente de enlace, también necesitamos proporcionar a la propiedad lo que llevará a la página de inicio, ¿ verdad? Y también vamos a verter nombre de clase condicional para este Aiken. Entonces vamos a preguntar si estamos en dispositivos móviles. Entonces vamos a poner nombres de una clase. Y si estamos en el escritorio, vamos a poner otros nombres de clase para eso. Vamos a usar el gancho de consulta de medios que usamos antes, y vamos a crear el Bullen, que es móvil. Y luego vamos a usar Media Query desde ganchos personalizados y dentro de un puerto de burbujas marcas con apagado 992 píxeles. Muy bien, entonces cuando estemos en dispositivos móviles, vamos a tirar de la pantalla en bloque de línea que bateo va a ser margen cero derecho para texto Azul y Lincoln estilo para hacer nuestro elemento de enlace totalmente sobre estilizado. Y si estamos en dispositivos de escritorio, entonces simplemente no mostramos este Aiken. Entonces vamos a ahorrar y vamos a inspeccionar. ¿ Qué tenemos? Entonces ahora tenemos nombre de habitación. Si inspecciono y redimensiono la ventana, puedo ver este botón por aquí. Cuando hago clic en él, vuelvo a la página principal para ver el Chatham. Está bien, se ve bien. Sigamos. Entonces aquí, junto a esta h cuatro, pongamos barra de herramientas de botones que viene de nuestro traje, y esto iba a ser nuestro para hacer Así también, pongamos nombre de clase fuera de Ws No rap. Muy bien, unificado un fresco. Muy bien, Entonces esto es para hacer al lado de este día si vamos a poner otro def y va a ser nuestra parte inferior. Por lo que para esta parte inferior, vamos a poner, mostrar, flexionar, justificar contenido entre y alinear elementos centro dentro. Vamos a verter como elemento divertido Eso también será nuestro que hacer. Y además, vamos a poner un botón por aquí, así que cuando hacemos clic en él, se abre una ventana modelo y podemos ver la descripción de la habitación. Entonces va a ser otro componente que vamos a crear y lo vamos a nombrar Groom Info, BT y Moto Dar g s bien. Por ahora va a estar vacío. Usémoslo adentro. Indice togs aquí. Vamos a verternos de info bt y Moto, ¿verdad? Digamos con y ahora definamos nuestro componente. En primer lugar, aquí vamos a mostrar la descripción de nuestra habitación y el nombre de la habitación también. Entonces para esto usaremos contexto, Elector. Entonces antes que nada, vamos a mala descripción por aquí, y se va a utilizar auto y gancho tirado. Por lo que obtenemos nuestro valor y a partir del valor crecemos descripción. Y ¿recuerdas que te dije que es importante no seleccionar objetos porque se comparan referenciales e Así que significa si necesitamos seleccionar múltiples valores de un objeto , necesitamos seleccionarlos por separado. Por lo que se convierten en un valor primitivo porque la descripción es una cadena. De ahí que sea un tipo primitivo. Por lo que también necesitamos mostrar nombre. Entonces vamos a hacer exactamente lo mismo. Usa habitación actual, y vamos a pico nombre de punto de habitación. Muy bien, Ahora, dentro de nuestro marcado, vamos a verter un elemento de botón de nuestro traje dentro. Vamos a verter la información de la habitación y la apariencia va a ser parpadeo y clase Nombre va a estar palmaditas en el acceso X es cero ahora, porque tenemos un móvil vamos a utilizar de nuevo nuestro propio gancho personalizado, cual se utiliza estado mortal. Entonces déjame importarlo. Y de este gancho que vamos a agarrar está abierto, cerrado y abierto. Ahora, junto a este botón elementos podemos permitirnos un componente moral que para show property que vamos a establecer está abierto para en altura. Vamos a poner ropa. Y dentro de este mortal, como siempre, tendremos punto mortal Heather. Entonces vamos a tener cuerpo y pie de página. Entonces vamos a reemplazar esos valores, Littlefoot ella. De acuerdo, entonces para Model Heather, vamos a verter título de punto modelo y para título, vamos a verter alrededor de que sobre este nombre de habitación que para pie de página. Vamos a echar otro botón que acabará de cerrar la moto. Entonces pongamos ropa entonces vamos a especificar en Click va a ser ropa Y también va a ser un elemento de bloque, acuerdo? Y somos cuerpo, que va a especificar algo sencillo, que va a ser un seis tachuelas. Y vamos a poner descripción y nombre de clase va a ser margen inferior uno en entonces irá la descripción en sí. Entonces pongamos descripción. Y ahora vamos a guardar Y vamos a quitar este def que cae y reemplazarlo por el contexto reaccionar . También movamos la importación a la parte superior. Y también no usamos este manejador abierto. Pongámoslo por días. Botón en click va a estar abierto. Está bien, vamos a guardarlo y echemos un vistazo. Ahora tenemos botón de información de habitación que parece un enlace. Y cuando le damos click, tenemos una ventana moral que dice de Hola. Descripción Descripción. Oye, cierra. Vamos a probarlo por en tu propio nombre otra vez. Tenemos esta extraña descripción y todo funciona bien. Entonces esto es todo para este video. Comprometamos nuestros cambios. Dejar que la gente se meta en todo luego se puede comprometer. Digamos, comenzó a construir Chat Top Creó una descripción de la habitación. Modoff. Muy bien, Perfecto. Nos vemos en el siguiente. 123. Datos de descolonización: crear un contacto: hola. En este video, comenzaremos a crear fondo carbonizado. Vámonos antes de que empecemos. Quiero mencionar que en el video anterior, cuando empezamos a crear chat Top, olvidé mencionar algunos detalles. En primer lugar, necesitamos agregar algunos nombres de clase más y va a ser esta edad para Element. Entonces pongamos nombre de clase y vamos a poner texto desaparecer para evitar que los impuestos se desborden si es demasiado largo. Y luego vamos a añadir las banderas de visualización y alinear Items Center para asegurarnos de que cuando estamos en dispositivos móviles, este Aiken y el texto estén centrados verticalmente, a la derecha y también un detalle más. Si abrimos la habitación en para Betty Inamoto, usamos el selector de contexto, Así que para que funcione, también necesitamos frotar el elemento alrededor del mamífero. Eso es lo que olvidamos dio dio. Entonces pongamos memo aquí en la parte inferior y también vamos a importar de reaccionar Ahora use contexto. Selector funcionará como se esperaba. Está bien, sigamos adelante y empecemos con Chad Bottom. Navegemos Teoh Index Dodgy s dentro de la carpeta inferior. Y aquí definamos nuestro mercado así que Primero que nada, vamos a verter para grupo y dentro de este grupo de entrada, vamos a poner la entrada real con el placeholder, ¿ verdad? Y tu mensaje aquí y tres puntos al final. Junto a esta importación, vamos a verter un elemento de botón. Entonces definamos el botón de importación Grupo Dar. Y este botón tendrá color azul y apariencia Primaria dentro de este grupo granero, vamos a verter. Yo vengo y puedo se me va a mandar. Muy bien, digamos que espere y veamos, ¿qué tenemos? Entonces ahora tenemos esta importación y tenemos el fondo. Por lo que cuando hacemos clic en este botón, se enviará el mensaje. Muy bien, ahora, definamos nuestra funcionalidad. Entonces, en primer lugar, necesitamos estado. Entonces vamos a crear importación y dicho en pobre, y por defecto se establecerá en un encogedor vacío. Entonces necesitamos especificar en el manejador de cambios para en evento de cambio para nuestra importación. Y también necesitamos asociar nuestro insumo con el estado real. Entonces definamos el valor. Va a ser importador. Y para un evento de cambio, vamos a especificar sobre cambio de importación. Heller. Definamos esto en cambio de importación y podemos optimizarlo de antemano donde usan callback porque tenemos estado de entrada que cambia con frecuencia y en cambio de importación no tendrá ninguna dependencia. Por lo que este evento sin cambios nos da valor como primer argumento y evento. Por lo que necesitamos obtener el valor real de aquí, y luego llamaremos dicho, importar con valor. Y sólo por mencionar que porque usamos este insumo que viene de nuestro traje como componente , por eso recibimos valor como primer argumento. En cualquier otro caso, solo recibiremos el objeto de evento. Ahora necesitamos agregar funcionalidad a nuestro botón para realmente enviar el mensaje. Entonces por eso vamos a especificar una nueva función que vamos a nombrar en Enviar Click. Va a ser nuestro manejador para al click Evento en este botón. Entonces pacifiquemos. Entonces foran click, vamos a verter en enviar click Y en primer lugar, aquí vamos a hacer un simple cheque Si yo estuviera en puerto. Si nuestro mensaje no está vacío así que vamos a especificar importar punto trim igual mensaje vacío. Si es el caso, entonces simplemente saldrá de la disfunción. A continuación necesitamos armar el mensaje. Y en el futuro también habremos presentado mensajes. Entonces para esto, vamos a crear una función común que será llamada para ensamblar el mensaje para que adjunte propiedades comunes a nuestro mensaje. Entonces aquí en la parte superior, vamos a crear nueva función que vamos a nombrar, ensamblar, enviar mensajes, y como argumento recibirá perfil de usuario. Y digamos Chad, yo d ok, y entonces nos va a dar un objeto con la habitación i d que se va a revisar, yo d. Entonces tendremos objeto autor y aquí vamos a de datos normalizados antes de continuar. Permítanme explicar la estructura que tendremos. Entonces si abrimos nuestra base de datos ahora mismo, tenemos habitaciones y perfiles y nuestros datos ahora son planos y realmente fáciles de administrar. No obstante, ahora tenemos habitaciones y necesitamos crear mensajes. ¿ Cómo podemos acercarnos a esto? Obviamente podemos poner mensajes dentro de este objeto, Sin embargo, con datos en tiempo real basados porque somos consultas limitadas, necesitamos decidir sabiamente sobre nuestra estructura. Por lo que con base de datos en tiempo real, es realmente importante mantener la estructura lo más plana posible. Significa que idealmente, no queremos crear objeto anidado. Entonces por eso vamos a crear otro Vamos a ver, objeto de ruta que vamos a nombrar mensajes y perspicacia. Vamos a poner nuestros datos de mensajes y luego a referirnos que este mensaje pertenece a esta sala en particular. Vamos a especificar habitación I d dentro de este mensaje. Y también vamos a de Datos Normalizados de Normalización significa que vamos a copiar y duplicar nuestros datos. Esto es para evitar realizar múltiples consultas en nuestra base de datos cuando necesitamos mostrar algo. Por ejemplo, chat con mensaje de chat. También queremos mostrar el nombre del perfil de usuario, Avatar y otras cosas. Entonces cuando mostramos mensaje, si no duplicamos datos, necesitamos enviar una segunda solicitud a nuestra base de datos y obtener el medidor de perfil real. Por lo que para evitar realizar múltiples solicitudes, lo duplicaremos. Por lo que esto es normal en ninguna base de datos SQL. Vámonos. Entonces para armar mensaje para autor, vamos a verter nombre que se va a perfilar el nombre entonces vamos a verter también tu i d , que va a ser perfil tu i d entonces creado en va a ser perfil creado en, y también necesitamos verter avatar condicional. Entonces si ahí no tienes ningún árbitro, no lo ponemos dentro de este objeto para eso. Vamos a verter tres puntos. Entonces vamos a mal perfil en Avatar, y vamos a preguntar si existe el regalo. Entonces vamos a verter llave avatar con avatar puerta perfil. Entonces de lo contrario, vamos a verter un objeto vacío. Entonces cuando exista avatar de perfil, vamos a especificar este objeto. Y porque fuera de tres puntos, no podemos difundir este objeto a este objeto global. Por lo que de esta manera, adjuntará esta propiedad a este objeto. De lo contrario, extenderemos el objeto vacío, que no agregará nada. De acuerdo, Así que a continuación tu autor, vamos a agregar, creado en y aquí vamos a especificar firebase. Pero vamos a importar en primer lugar. Déjame poner importar base de fuego desde la aplicación firebase, y va a ser valor del servidor de base de datos firebase. Marca de tiempo. Está bien, ahora, usemos este mensaje ensamblar y pongámoslo aquí. Por lo que vamos a crear un nuevo disponible que dará nombre a los datos del mensaje. Entonces vamos a llamar, armar mensaje con perfil y Chad I D. Así que vamos a obtener perfil de nuestro contexto. Entonces vamos a pobre perfil de uso perfil de gancho que tenemos de perfil contexto, use perfil. Y además, necesitamos conseguir chat idee. Y lo podemos conseguir con la ayuda de uso Paramus que viene de los programas juveniles de React Router . Está bien, bien. Ahora a estos datos del mensaje, necesitamos adjuntar el texto del mensaje real. Entonces aquí, apaciguemos el mensaje. El texto de datos va a ser nuestro insumo. Está bien. Y ahora lo que pasa es que necesitamos realizar una operación atómica para actualizar datos en múltiples lugares dentro de la base de datos con base de datos en tiempo real. Es realmente fácil de hacer, y eso me encanta. Espere. Entonces, ¿qué vamos a hacer? Crearemos un nuevo mensaje dentro de la ruta de mensajes. Y además, actualizaremos las habitaciones. Y aquí vamos a poner otro prop, nombre vegetal, último mensaje. Esto es para mostrar el último mensaje aquí dentro de esta lista de salas de chat. Muy bien, entonces lo que vamos a hacer, vamos a crear un nuevo objeto. Será un objeto vacío por defecto, que va a ser actualizaciones. Y la lógica será la siguiente dentro de este objeto modelamos nuestros datos de actualización dentro de la base de datos relacionados Lee a la ruta fuera de la base de datos. Por lo que tendremos el pase de actualización como clave. Y para esta clave, tendremos los datos actualizados reales, y luego llamaremos a esta actualización a la ruta fuera de la base de datos, y lo realizará como una operación atómica. De verdad me gusta así. Entonces lo que quiero decir es que primero necesitamos definir un nuevo mensaje que d de antemano. Entonces para eso, vamos a crear nuevo mensaje variable I d. aquí. Vamos a poner base de datos. Esta vez será base de datos que viene de Déjame de nuevo, cómo importarlo, ¿no? No funciona. Hagámoslo manualmente. Entonces vamos a importar base de datos de MISC. Muy bien, volvamos a carpetas. De acuerdo, Un nivel más. Base de fuego Misc. Muy bien, Perfecto. Entonces, base de datos, entonces vamos a necesitar especificar referencia a nuestros mensajes. Entonces vamos a empujar piso, y luego vamos a conseguir mantener de esta manera podemos obtener y clave única de la base de datos de tiempo riel sin crear el documento real. De acuerdo, Ahora necesitamos actualizar este objeto de actualizaciones. Entonces pongamos actualizaciones y nuestra primera propiedad va a ser mensajes. Entonces vamos a especificar mensaje que d por aquí. Y para este mensaje, yo d. vamos a pacificar los datos del mensaje que segundo objeto va a ser habitaciones, slash chat I D y slash último mensaje y para último mensaje, vamos a pacificar todos nuestros datos de mensajes y también encima de ello, vamos a adjuntar mensaje i d. Así que mensaje I d va a ser mensaje me d como este. Ahora necesitamos actualizar la base de datos real. Entonces aquí, vamos a poner a probar, atrapar bloque, y aquí vamos a llamar una espera y vamos a convertir la disfunción Teoh una función de fregadero. Vamos a llamar a nuestra base de datos con Treff. Entonces obtenemos referencia a la carretera fuera de nuestra base de datos sin especificar la ruta, Entonces que va a llamar a actualización y vamos a pasar nuestro objeto de actualizaciones, y va a pico Toda la actualización pasó de Keys, y actualizará estos pasados dentro la base de datos justo después de que se actualicen nuestros datos. Vamos a llamar a set input a una cadena vacía otra vez, y también vamos a poner el error de la puerta de alerta y vamos a especificar algún mensaje dock, ¿de acuerdo? Y también tal vez Definamos el estado de carga. Entonces junto a esta importación, vamos a crear está cargando y triste es el préstamo, que se establecerá en falso por defecto. Entonces vamos a llamar a dicho está cargando justo antes de que hagamos cualquier tarea asíncrona. Por si fallamos, lo vamos a llamar como Satya Falls. Y cuando hayamos terminado, también, vamos a llamar Falso. Ahora usemos el estado de carga de dis para este botón. Entonces pongamos a Onley desactivada cuando nuestros datos se están cargando ahora mismo, tal vez vamos a ahorrar y echemos un vistazo. ¿ Qué tienes? Entonces si envío algún mensaje a la base de datos, tengo permiso esta noche y eso es porque no especificamos ninguna regla de seguridad. Navegemos a las reglas. Y entonces sólo copiemos todo eso. Vamos a pegarlo aquí en la parte inferior. Vamos a renombrarlo a sus mensajes y vamos a especificar mensaje I d Guardémoslo y vamos sincronizarlo con nuestras reglas locales. Y ahora intentemos enviar un nuevo mensaje. Entonces si hago clic ahora, abramos nuestra base de datos y aquí puedo ver un nuevo camino, que es mensajes que tengo clave recién generada, que es en realidad este mensaje que d que creamos con esta línea de código. Si lo abrimos aquí, hemos creado al pertenecer estofado Esta sala I, d autor de texto, es la siguiente persona y dentro de habitaciones. Si abrimos ahora, también hemos perdido un mensaje, que es este mensaje que enviamos. Por lo que se ve simplemente bien. Lo único que quiero hacer aquí es en realidad quiero tal vez en un nuevo manejador para on key down event. Por lo que cuando también hacemos clic en Enter Button, se está enviando el mensaje. Entonces para esta importación, pongamos también en evento key down y vamos a especificar en key down handler, Vamos a ponerlo a continuación, Teoh en el cambio de entrada. Y esto en Qi abajo va a ser O tal vez vamos a ponerlo aquí en la parte inferior, junto a en enviado click dentro en clave abajo. Recibiremos un objeto de evento esta vez, y vamos a preguntar si evento Kiko o igual a 13. Si nuestro botón que presionamos es entrar, entonces primero vamos a llamar evento prevent default para evitar cualquier funcionalidad predeterminada definida para este botón. Entonces vamos a llamar al clic enviado. Está bien, ahora, intentémoslo una vez más si vuelvo a saludar. Si hago clic en enter right message ha sido enviado y la base de datos ha sido actualizada. Entonces supongo que eso es todo. Terminemos este video. Comprometamos todos nuestros cambios llamando bueno a todo. Entonces consigue commit y, vamos a especificar creado fondo carbonizado Enviados mensajes a de chat. Espléndido. Nos vemos en el siguiente. 124. Mostrar el último mensaje en la lista de la sala: Hola. Ahora que tenemos mensajes dentro de nuestra base de datos y tenemos propiedad de mensajes de lujuria disponible en los datos de la sala de chat, podemos mostrar este último mensaje dentro de la lista de chatroom Inside room element. Hagámoslo. Vamos a navegar de nuevo al código y vamos a abrir el componente de elemento de habitación aquí en la parte superior, donde d estructura alrededor de las propiedades. También d estructurar último mensaje que primero aquí dentro hace tiempo en lugar de mostrarte fecha creada en Preguntemos, si hemos perdido datos del mensaje, entonces vamos a mostrar nueva fecha fuera del último mensaje creado en so cuando este mensaje fue creado. De lo contrario lo vamos a mantener como estaba antes de que vamos a mostrar cuando se creó la sala, entonces aquí abajo, donde no mostramos mensajes. No obstante, en lugar de eso, vamos a pobre representación condicional. Entonces si tenemos el último mensaje, entonces vamos a mostrar el marcado del último mensaje. De lo contrario, será como antes. Vamos a mostrar span. Todavía no hay mensajes. Entonces dentro de este fragmento de reaccionar, vamos a poner Primer usuario Avatar y luego el mensaje real. Entonces este def va a ser rapero para el componente de avatar de perfil que creamos antes como recuerdas. Entonces vamos a importarlo y para utilería. Especifiquemos fuente va a ser el último mensaje. Echemos un vistazo. Último mensaje Hija autora Nora al atar dot autor Lord Avatar Nombre en caso de que si Avatar no está definido va a ser último mensaje Autor nombre de punto y tamaño va a ser humo. Y para este sordo vamos a verter para mostrar Flex y un centro de ítem de línea. Te aseguras de que el elemento avatar es 10 para leer verticalmente. Entonces a continuación deciden si vamos a deshacernos de esta corteza para reaccionar fragmento junto a este avatar de perfil . Vamos a mostrar otro sordo con etiquetas de nombre de clase desaparecen para evitar ataques de desbordamiento y margen a la izquierda. Vamos a ponerte dentro. Vamos a poner def. Eso dirá último mensaje dot autor nombre de punto. Y el próximo año tras nombre, vamos a pobre lapso. Último mensaje, texto de perro y hacia este nombre de autor, vamos a mostrar texto en cursiva solo para distinguir entre el nombre del autor y el último mensaje. Está bien, vamos a guardar todo. No volvamos a nuestra solicitud. Puedo ver eso inesperado. Está bien, entonces otra vez, esto reacciona fragmento buck. Ahora bien, si digo lo que puedo ver que tengo el mensaje real. Puedo ver el nombre del autor. Puedo ver mi mensaje y puedo ver mi camada Ah. Ahora tal vez. Probemos un nuevo mensaje. Entonces déjame saludar del futuro. Si envío este mensaje, puedo ver que se ha enviado ese mensaje. Justo ahora otra vez, mi avatar, mi nombre y hola de futuro. Está bien, así que esto es todo. Fue bastante fácil, ¿verdad? Comprometamos nuestros cambios. Pongamos todo para obtener sistema y cometamos diciendo mostrar último mensaje dentro del elemento de la habitación, de hecho. Nos vemos en el siguiente. 125. Trabajar con datos Denormalized: Oye, ahora tenemos mensaje de lujuria dentro de lista destrozadora. Pero aquí está el problema porque ahora duplicamos datos. Si digamos que voy a mi tablero y actualizo mi apodo a otra cosa, vamos a guardar para mostrar look 16. Entonces también actualizan mi avatar. Si lo subo, se está subiendo. Pero el último mensaje no se está actualizando porque estos datos se duplican dentro de la base de datos. Por lo que necesitamos ocuparnos de eso cuando actualicemos los datos reales. Si hacemos algunos cambios, nos aseguraremos de que también actualicemos todas las referencias que duplicamos. No volvamos al código y vamos a navegar al panel, Vamos a Dashboard Togo y luego vamos al dashboard. Y aquí, en lugar de este apodo de usuario conjunto áspero nuevos datos. Tenemos que encontrar la manera de actualizar todas las referencias. Entonces lo que me propuse hacer, quiero proponer crear una función auxiliar que conseguirá todas las referencias dentro de nuestra base de datos, y luego podremos actualizar nuestra base de datos con esa antigua referencia. En realidad, será lo mismo que hicimos dentro de Chad fondo cuando creamos este objeto de actualizaciones y especificamos varias pasadas para realizar una operación atómica, por lo que será básicamente la misma. Por lo que podemos llamar a esta función así. Definamos cómo lo haremos. Entonces en lugar de un apodo de usuario de peso Raff set, vamos a llamar, Digamos que vamos a recibir actualizaciones y como vamos a acceder a nuestra base de datos, será en una operación de sentencia. Lo vamos a nombrar. Digamos que obtenga actualizaciones de usuario en el interior. Pasaremos Usuario I d que va a ser perfil adorar tu i d Entonces pasaremos la clave que necesitamos actualizar. Entonces en nuestro caso, será nombre y luego pasaremos el valor real, que va a ser nuevos datos como este. Por lo que ahora necesitamos crear disfunción. Vamos a navegar dos ayudantes, ella s y aquí en la parte inferior, vamos a exportar función de nombre de problema obtener actualizaciones de usuario. Por lo que va a ser cualquier función y recibirá usuario i d. Entonces recibirá clave para actualizar y también recibirá valor. Y tal vez pasemos también el objeto de base de datos junto con nuestra función. Entonces aquí vamos a pasar también este objeto de base de datos que tenemos dentro de misc chimenea solo por conveniencia como esta. Por lo que ahora dentro de ayudantes, también podemos tener base de datos por aquí. Ahora vamos a crear un objeto vacío. Actualizaciones de carbón indefinibles que nuestra primera actualización será el valor real que estamos tratando de actualizar por lo que las actualizaciones. Entonces irá perfiles slash usuario i d que slash clave para actualizar, y se establecerá en valor. Ahora necesitamos obtener las referencias reales. Por lo que nuestras referencias son Vamos a echar un vistazo mensajes mensaje I D. Que autor que avatar creado en en también habitaciones. Último mensaje. Entonces, ¿qué vamos a hacer? Definiremos algunas promesas porque hay múltiples promesas. No queremos hacerlos uno por uno. Queremos ejecutarlos de inmediato. Por eso vamos a definir nuestras promesas. Y luego los esperaremos a todos con punto de promesa Toda nuestra primera promesa va a ser conseguir mensajes y va a ser db dot Ralf dar mensajes, luego para conseguir mensajes donde Digamos este autor, yo d te iguala nuestro usuario, I d. necesitamos primero orden completo por niño. Entonces necesitamos precisar qué niño. Fuimos a referencia. Entonces en nuestro caso los mensajes de referencia Así tenemos el objeto mensaje. Entonces tenemos autor slash user i D. Así que pongamos orden por autor usuario slash i d. Y entonces esta clave será igual al usuario i d. que recibimos como argumento y luego vamos a poner el valor de uno para obtener el valor real . Entonces nuestra segunda promesa va a ser conseguir habitaciones de usuario, que van a ser salas de barras de referencia DB. Entonces de nuevo, necesitamos poner orden por niño. Y esta vez, si abrimos las habitaciones, tenemos menos mensaje slash autor slash usuario i d. Así que vamos chico último mensaje Autor, usuario I d. Y luego igual al usuario i d. Y de nuevo una vez valor. Ahora que tenemos estas dos promesas en estado sin resolver, necesitamos resolverlas. Por esta razón, vamos a crear una promesa de peso de que todo dentro necesitamos pasar una matriz de promesas que va a ser conseguir mensajes y conseguir habitaciones como esta y obtener mensajes nos devolverá instantáneas de mensajes y conseguir habitaciones voluntad devuélvanos una instantánea fuera de las habitaciones. Entonces aquí los vamos a d estructurar. El primer elemento es obtener mensajes. Entonces primero vamos a recibir mensaje, instantánea o mensajes. Camisa a presión. Un segundo van a ser habitaciones, snap shirt, que nombraremos correspondiente Klay am snatcher y Air Snapshot. Entonces por cada mensaje que tengamos con idea de usuario, vamos a llamar para cada instantánea de mensaje para cada mensaje que recibamos, vamos a obtener instantánea de mensaje, y aquí vamos a llamar a actualizaciones. Entonces vamos a mensajes pobres slash message snapshot dot key, que representa el mensaje i d. Entonces tendremos un objeto con todos estos mensajes, y key va a ser esta idee off message. Muy bien, así que clave de mensaje slash autor slash clave para actualizar. Entonces de esa manera, nos referimos a mensajes autor y al chico que queremos actualizar, ya sea que se trate de Alá nombre de auto tu yo d o creado en. Y luego para que esta clave se actualice, vamos a poner valor y exactamente lo mismo haremos por nuestra instantánea. Entonces vamos a copiarlo en realidad. Y en lugar de m snapshot, vamos a pobre instantánea de aire, que es habitación, camisa de encaje y luego para actualizaciones, vamos a poner habitaciones, entonces vamos a obtener la tecla de punto instantánea de habitación, que se ser la habitación i d Entonces aquí tendremos el último mensaje. Entonces tendremos autor y luego clave para actualizar con valor. Está bien. Y justo después de eso vamos a devolver el objeto de actualizaciones que hemos creado. Ahora digamos lo que Vamos a navegar a ti dashboard deja y comentamos, y vamos realmente importante este objeto de los ayudantes, pero parece que se puede importar automáticamente. Así que vamos a importar obtener actualizaciones de usuario de Vamos a referirnos a nuestros ayudantes misc ayudantes y parece que no se encuentra bien, así que lleguemos allí. Actualización. Está bien, llévate ahí. Actualizaciones como esa. Está bien, Perfecto. Ahora que tenemos actualizaciones, en lugar de llamar a esta función por aquí y en lugar de hacer referencia a los datos reales, en realidad podemos llamar solo base de datos dot ref door update con actualizaciones. Entonces esperaremos y quitaremos todo eso y también todo eso. Ahora vamos a guardarlo y en realidad también abramos. Aplaude Bt, en el que sube nuestro avatar y encontremos la lógica. Entonces aquí de nuevo, como así lo hicimos oímos dentro de dashboard lo copiamos y en su lugar, apagamos de nuevo el referenciando al elemento hijo y luego actualizando así. Pongamos actualizaciones obtendría tus actualizaciones que para perfil i d Vamos a actualizar avatar esta vez y Avatar va a ser No cargue euro así. Ahora eliminemos esta referencia. Quitemos este conjunto de avatar de usuario. Seamos atrapados esta lógica. Pongámoslo aquí y ahora echemos un vistazo. Si realmente funcionó, volvamos al código. Déjame el fresco por si acaso voy a dashboard, si hago click en cambio, mi apodo Ok, tal vez voy a saludar. Nuevo nombre. Si hago clic seguro apodo se ha actualizado y todavía tengo y estar por aquí. De acuerdo, tal vez me dejes revisar Dashboard uno. Mi tiempo. Tengo nombre por aquí. Vamos al cónsul log actualizaciones y echemos un vistazo. ¿ Qué pasa aquí? Si inspecciono, voy a consola actualizo mi apodo. Recibí este tipo de actualizaciones, mensajes, perfiles, está bien, pero no actualizo mi último mensaje. Entonces eso es raro. Navegemos ayudantes Teoh. Y aquí echemos un vistazo. Clave de autor para actualizar. De acuerdo, camisa de broche perdida. Autor, tu I D Vamos a revisar nuestra base de datos. Último mensaje. Autor, Tu I D Que es usuario I d que pasamos. Oh, discúlpame. Aquí no debe ser el último aquí. Debe ser menos mensaje. Vamos a guardarlo. Y ahora una vez más. Cambiemos nuestro apodo. Tiu. Digamos que se ve 22. Si actualizo mi apodo, se está actualizando por aquí. Perfecto. Ahora comprobemos por Al Atar Si vuelvo a subir una nueva imagen, Avatar ha sido obviado. Echemos un vistazo dentro. Último mensaje. Sí. Ah, ¿Qué se han actualizado? De acuerdo, si acaso una vez más. Aplauden. Avatar ha sido actualizado. Perfecto. Echemos un vistazo. Sí, se ha actualizado, por lo que realmente funcionó. Está bien. Perfecto. Ahora quitemos esta suerte Cónsul que ponemos aquí y cometamos nuestros cambios. Esto es todo. Abordemos todo al estado escénico y cometamos. Actualizar todas las referencias de usuario si se actualizan los datos. Está bien. Perfecto. Nos vemos en el siguiente. 126. Muestra los mensajes de chat: Hola ahí. En este video, mostraremos los mensajes de chat aquí en el medio dentro de la página de chat. Vamos, Vamos a navegar de nuevo al código y vamos a encontrar nuestros mensajes de ventana de chat de carpeta. Y aquí tenemos índice togs ya menos grande, y usted archiva que dará nombre al elemento del mensaje. Por ahora , estará vacía. Entonces vamos a poner hola dentro. Y dejémoslo así dentro de los mensajes aquí en primer lugar, vamos a definir nuestro estado que vamos a manejar con el estado de uso. Por lo que le nombraremos mensajes y mensajes sat. Y por defecto, será tal saber. Entonces también necesitamos agarrar nuestro chat I d que actualmente abrimos. Entonces para eso usaremos Paramus Hook que viene de reaccionar rotor y vamos a conseguir niño, yo d ahora dentro efecto uso. Vamos a hacer una llamada a nuestra base de datos. En primer lugar, vamos a agarrar nuestra referencia a la ruta del chat dentro de la base de datos, que son los mensajes. Entonces vamos a pobres mensajes ásperos. Entonces vamos a llamar a base de datos, pero no a la que viene del paquete Firebase uno que viene de RG basados en fuego. Entonces vamos a importar esa. Entonces vamos a especificar los mensajes de referencia de la slash. Ahora pondremos a un oyente en tiempo real en espera mensajes que están relacionados con el parloteo abierto . Entonces vamos a ver pacificar mensajes, Ralf, Orden de puerta por niño. Y aquí vamos a pacificar habitación I D. Y esta es una propiedad que tenemos en cada mensaje, que es habitación I. D. Así que esto de idea será igual a chatear i d que recibimos de Paramus. Ahora, apareció como una dependencia, Así que vamos a editar. Y justo después de eso, pongamos a un oyente en tiempo real Así que vamos a poner valor y honorables pacificar devolución que recibirá instantánea. Ahora, como recuerdan, esta instantánea será un objeto donde cada clave es el mensaje I d. Y luego obtenemos los datos reales. Por lo que necesitamos transformarlo. Y ya lo hicimos con la transformación a array con I d función. Entonces lo llamaremos una vez más. Entonces vamos a pobres datos y luego vamos a poner transform to array con i d Entonces vamos a llamar a snapshot dot value y pasarlo a esta función. Y luego actualizaremos el estado con datos así y porque es un oyente en tiempo real . Se trata de una suscripción que necesitamos para darse de baja. Entonces usemos Ah, somos función de limpieza para efecto de uso. Y aquí vamos a echar mensajes, balsa y perro fuera, y podemos especificar valor. Entonces de esta manera nos vamos a dar de baja de todos los oyentes en tiempo real en este camino. De acuerdo, ahora, nuestro siguiente paso es realmente mostrar los datos. Y primero, necesitamos conseguir en realidad algunos valores de bullying que nos ayuden a dar condicionalmente nuestros mensajes. Por lo que nuestro primero va a ser es baleado vacío y carbonizado. Vaciar va a ser sólo cuando tengamos los mensajes definidos y luego los mensajes de punto longitud igual 20 Así que cargamos todos los mensajes, pero no hay mensajes en absoluto. Correcto, entonces también podemos tener puede mostrar mensajes que indicarán si podemos renderizar nuestro elemento de mensaje que creamos. Entonces si tenemos mensajes y mensajes la longitud del punto es mayor que cero. Entonces podríamos realmente poner esta condición directamente aquí dentro de nuestro marcado, Pero solo para ser más aseados, ya sabes, los ponemos aquí. Entonces dentro de este def, vamos a poner la siguiente lógica. En primer lugar, no va a ser un diff. Va a ser una u L. Entonces el nombre de la clase va a ser lista de mensajes y también crecen las costumbres que dentro vamos a verter está carbonizado vacío. Entonces vamos a mostrar un elemento aliado porque te tenemos, yo y vamos a decir que no hay mensajes todavía. Y luego si podemos mostrar mensajes, entonces vamos a verter mensajes, Doc map y vamos a mapear cada mensaje al elemento del mensaje. Abrámoslo para elemento de mensaje de inteligencia. Él va a ser puerta de mensaje i d. Y entonces pasaremos mensaje con un mensaje como ese Ahora dentro de mensaje necesitamos de estructurar esta propiedad. Entonces pongamos mensajes y aquí en el nivel inferior D estructura de los mensajes, pero no de los mensajes. Disculpe del mensaje. Vamos a renombrarlo a mensaje. Guardemos lo que también cambia al mensaje. Y a partir de este mensaje vamos a destructor autor problema D estructura creada en y vamos a destructor texto. Ahora va a ser un elemento l i y tendrá nombre de clase off parted y margen inferior uno. Entonces pondremos aquí a Dave. Esa será la parte superior de nuestro mensaje. Y entonces pondremos otro def. Y dentro de este diferente pondremos span que mostrará nuestro propio mensaje detecta y nombre de clase va a ser Ward romper todo para evitar que el texto se desborde si es demasiado largo. Entonces para nuestra parte superior, vamos a especificar nombre de clase fuera de pantalla banderas alinear elementos fuente central va a ser más audaz y margen inferior uno, entonces aquí vamos a verter Primer perfil Avatar, Vamos a abrirlo. Perfil todos Matar. Y ahora usemos la inteligencia para importar. Entonces como fuente, vamos más barato. Autor dot avatar por nombre. Nos vamos a verter o doc Nombre cuatro nombre de clase. Se va a quedar margen a la izquierda. Una talla va a ser exceso. Y luego junto a este avatar, vamos a poner Spawn Element si vamos a mostrar fuera nombre y nombre de clase va a ser margen a la izquierda y después de esa columna se mostrará cuando se haya creado este mensaje. Entonces vamos a poner hace tiempo. Entonces vamos a abrir artículo de habitación. Vamos a atrapar ser esta importación fuera de tiempo atrás. Pongámoslo a la chuleta. Llamemos a p hace el mismo tiempo y lo pongamos aquí en lugar de esta fecha. Tiempo vamos a mostrar. Acaba de crear en y para nombre de clase para normal y texto negro. Lo vamos a mantener como está, pero también vamos a mostrar margen izquierda a quién? Fue mucho. Ahora echemos un vistazo. Como pueden ver, tenemos nuestros mensajes. Y ahora si digo, ejecutando tu mensaje, digamos hola ahí. puede ver que aparece por aquí. Y también se aparece aquí dentro del último mensaje. Por lo que ahora en realidad tenemos nuestros mensajes siendo mostrados. Y funcionará también para cualquier otra sala de chat. Digamos hola desde aquí. Ahora tenemos mensaje por aquí. Está bien. Perfecto. Entonces esto es un cometeremos nuestros cambios. Olvidemos en todo. Pongámoslo, comete. Y el nombre de la gente muestra mensajes dentro de la página de chat. Está bien, nos vemos en el siguiente. 127. Datos de perfil de usuario de la visualización de los usuarios: Hola. En este video, vamos a añadir una nueva ventana de modelo. Por lo que cuando hacemos clic en el nombre de usuario de alguien, podemos observar el perfil de usuario. No volvamos al código. Y aquí debajo de la carpeta Mensajes, saludemos tu archivo. Nombre vegetal Perfil Info. BT y Moto GS. Vamos a crear un nuevo componente. Y por ahora, vamos a mantenerlo vacío. Abramos el elemento del mensaje. Y aquí en lugar del elemento span donde mostramos el nombre del autor, Vamos a mostrar el perfil en para BT y Moto y para este componente porque necesitamos obtener datos de usuario , necesitamos mostrarlos dentro. Pasaremos prop de perfil y vamos a pasar. Solo autor y todo lo demás se gestionará desde dentro del componente. Entonces desde aquí, vamos a destruir tu perfil por ahora y vamos a definir el mercado. Entonces, en primer lugar, vamos a poner botón y este botón dirá nombre corto de nuestro usuario. Entonces vamos a crear aquí nuevo viable que nombraremos nombre corto y sólo jugará en Lee el primer pupilo off apodo. Por lo que si es un nombre completo como nombre segundo nombre, mostraremos solo nombre. Entonces pongamos perfil nombre del puesto. Entonces lo vamos a dividir con espacios vacíos y luego agarraremos el primer elemento. Ahora mostraremos sólo el nombre de pila porque va a ser modelo. También necesitamos conseguir estado mortal. Entonces usemos nuestro gancho, que se utiliza modelo de estado. Aquí vamos a recibir está abierto, cerrado y abierto. Muy bien, ahora junto a este cuerpo y vamos a verter modelo. Y dentro de este modelo, definamos primero la propiedad show que va a ser está abierta y en el escondite va a haber ropa que dentro de esta moto. Tendremos hija mortal, Heather como siempre. Entonces tendremos cuerpo y tendremos pie de página así. Por lo que dentro de Heather tendremos título de puerta mortal y dentro de título moral vamos a mostrar perfil de nombre corto, luego dentro de cuerpo o tal vez dentro de pie de página, pantalla de burbujas inferior que va a ser un elemento de bloque al click Se cerrará nuestra moto y va a estar apenas a punto de cerrar esta mortal que dentro del cuerpo. Primero lo vamos a poner clase Nombre fuera del centro de texto Así que dentro de una burbuja pobre exactamente la misma imagen de avatar que hacemos en Avatar. Un Bt de sangre en el que es sí, este perfil avatar. Entonces vamos a copiarlo y vamos a ponerlo aquí. Ahora vamos a importar perfil Avatar. Y junto a ella, vamos a mostrar H four donde mostraremos el nombre completo de este usuario. Entonces, primero tomémoslo. CONST. Se va a agarrar nombre del perfil. Y tal vez también agarremos Avatar y digamos creado en Así que ahora no necesitamos Teoh la estructura o no necesitamos especificar perfil por aquí. Entonces para esta edad, para verteremos margen platicar para agregar algún margen en la parte superior. Y luego vamos a mostrar miembro desde y después vamos a verter miembro desde variable que vamos a crear. Entonces vamos a pobre const miembro desde y vamos a poner nueva fecha creada en y entonces simplemente llamaremos a cadena de día local para ex nuestra fecha. No. Por lo que no usamos abierto. Entonces pongámoslo para esto en click. Está bien, bien. Ahora vamos a abrir el elemento del mensaje. Se ve bien. Se ve bien. Ahora echemos un vistazo. Entonces, como pueden ver ahora, tenemos el botón. Cuando hacemos clic en él, podemos ver que se ve 22. Perfilar nuestra imagen, nombre completo, escenas miembro y cerrar Perfecto. Pero no quiero que se lo muestre así. Entonces vamos a sólo unas cuantas cosas. Por lo que todo lo demás que se pasará a este componente como prop será redirigido a los apoyos de botón. Y además, vamos a deshacernos de este def como elemento rapping. Que sea solo un botón al final, por lo que todos esos apoyos se pasarán a este botón. Entonces vamos a difundir Bt y objetos de utilería sobre este componente así. Por lo que para este perfil en cuatro beat y modelo, podemos pasar la apariencia, que va a ser enlace. Y también podemos pasar nombre de clase. Añadamos relleno. Zito Dan. Añadamos margen izquierdo uno y también texto negro. Guardémoslo y echemos un vistazo ahora mismo. Se ve bien. Si tengo o puedo ver que es algo que se puede hacer clic. Si hago clic en él, puedo obtener datos de usuario. Está bien, Perfecto. Entonces esto es todo. Ahora cometamos nuestros cambios. Obtén todo, consigue commits. Digamos que mostraban datos de usuario con ventana maro. Está bien, nos vemos en el siguiente 128. Agrega presencia en tiempo real: parte 1: hola. En este video, gestionaremos la presencia de tiempo rial en nuestra aplicación con Fire Base. Es bastante fácil de hacer. Averiguemos cómo podemos manejar esto. Vayamos a Google y solo tecleemos firebase riel tiempo presencia. Entonces podemos ir al primer enlace construido presencia y tienda de incendios de nube. Y aquí ya tenemos una solución usando presencia en base de datos en tiempo real. Por lo que necesitamos simplemente atrapado ser este fragmento de código y luego usarlo en nuestra aplicación. Así que primero vamos a copiar está fuera de línea y en línea para los objetos de valor de la base de datos y vamos a navegar al contexto del perfil. Este es el lugar donde manejaremos todo, porque aquí podemos obtener acceso a la autenticación. Objeto con suscripción en tiempo real. Está bien, así que pongamos a pesar de unas bles aquí en la parte superior, y vamos a reemplazar Var por Constante. Ahora echemos un vistazo. ¿ Qué tenemos que hacer a continuación? Por lo que necesitamos adivinar balsa de base de datos a info conectado. Entonces esto es como una forma general en la ruta de base de datos a la que podemos acceder y podemos obtener la presencia en tiempo real apagado actualmente firmado en usuario. Entonces, solo copiémoslo. O tal vez copiemos todo eso así, y lo coloquemos aquí dentro. Si la autenticación se opone, Denver realizará nuestra gestión de presencia en tiempo real. Por lo que aquí necesitamos obtener referencia a la base de datos interconectados en lugar de Firebase. Usemos base posterior que nos metimos dentro misc. Firebase. Entonces obtenemos referencia para inferir conectado al valor lo que se convierte en una función estrecha que recibimos. Snap. Claro, si instantánea ese valor es falso. Vamos a pobres y tres personas igualdad que el estatus de usuario. Base de datos ref. Entonces echemos un vistazo. Esto es tan valioso que podemos copiar. Y este es el lugar literal almacenar nuestro estado dentro de nuestra base de datos en tiempo real. Entonces lo que tenemos que hacer, porque va a ser una suscripción en tiempo real, también necesitamos darse de baja de ella en el futuro. Entonces pongámoslo aquí dentro Yousef actuar como un nuevo viable lo vamos a nombrar usuario sobresale base de datos áspera . Quitemos base de datos y pongamos solo el estado de usuario, ref. Entonces vamos a asignar iniciadores de usuario ref a base de datos estado Ralf y te idea, Vamos a ponerlo aquí en la parte superior, así como eso, y en lugar de tu idea. Vamos a usar fuera de su i d y vamos a reemplazarlo con la interpolación de cuerdas. Por lo que vamos a obtener ambos objeto dot tu i d así entonces, porque es una suscripción. Cuando nos miran fuera. Vamos a comprobar si tenemos estado de usuario. Ref, Si lo tenemos hecho, nos vamos a dar de baja de ella. Y lo mismo haremos por nuestra función de limpieza sobre los estudios de usuarios de héroes. Rough off. Está bien, perfecto. Ahora manejemos esta parte. Entonces, eliminemos todos los comentarios. Quitemos todo eso. Y aquí vamos a verter el usuario comenzó correa en. Desconectar está fuera de línea para base de datos, luego función. Vamos a convertirnos en una función adulta. Entonces vamos a reemplazarlo por tu estatus. Ref. Sad está en línea para base de datos, así que esto es básicamente él. Ahora echemos un vistazo. Tenemos fuego. La base no está definida. Echemos un vistazo. Base de datos Firebase. Está bien. Menos importar base de fuego desde app firebase para que podamos obtener acceso al valor del servidor. Tiempos temp. Guardémoslo y echemos un vistazo. Ahora, si estamos dentro, nos niega el permiso. Eso es interesante. Eso probablemente sea algo con reglas de seguridad. Entonces echemos un vistazo donde escribimos nuestros datos. Uh huh. exactamente. Por lo que escribimos nuestros datos para recortar el estado yo d Así que volvamos a corregir las reglas de seguridad para este pasado dentro de la base de datos. Por lo que tenemos estatus. Entonces llamémoslo ser este camino. Lo haremos así. Entonces aquí tendremos usuario I d. Y entonces podremos escribir a estos lugar sobre Lee. Si tenemos apagado, d igual a usar sus ideas tan liciosas Copiar esta lógica y pegarla aquí así. Ahora vamos a guardarlo y echemos un vistazo si realmente funcionó. Si a refrescar mi app, puedo ver ahora no tengo advertencias. Entonces llamémoslo P vasos y cantemos llora con nuestros datos locales como este. Ahora volvamos a navegar a los datos y vamos a comprobarlo aquí. Dentro de nuestra base de datos, tenemos New Path, que son estudios que tengo a mi usuario, yo d. Y entonces tengo menos cambio y me quedé en línea. Ahora echemos un vistazo. Si cierre la sesión de la aplicación, me he quedado en línea, así que esto es porque cuando salimos, no pusimos un geologo para nuestra base de datos, lo que Onley cuando iniciamos sesión. Déjame continuar con Google y déjame seleccionar mi cuenta. ¿ De acuerdo? Yo estoy inscrito. Se puede ver que el último cambio ha sido cambiado. Viste a esa flota disparada, ¿verdad? Entonces, ¿qué está pasando? Que realmente funciona cuando iniciamos sesión, pero no cuando cerramos la sesión. Y la cosa es porque establecemos nuestras reglas de seguridad de esa manera, podemos escribir y leer sobre Lee cuando tengamos fuera de ti d. Así que cuando registremos nuestra desde nuestra aplicación cuando salgamos de la sesión, este objeto autor se pondrá a ahora, por lo que esto será despedido. Y si ponemos nuestra lógica aquí cuando salgamos de esta manera, obtendremos permiso esta noche porque en su momento, cuando intentaremos acertar a la base de datos de objeto se establecerá a ahora. La solución aquí es solo ir al panel de control. Vayamos a Dashboard Tuggle aquí. Tenemos que verter esta lógica. Entonces justo antes de cerrar sesión Móvil derecho a base de datos. Por lo que aún tenemos acceso a nuestras reglas de seguridad. Por lo que aún podemos tener acceso al objeto autor. Y sólo entonces vamos a cerrar la sesión de nuestro usuario. Entonces, ¿qué lógica se debe poner aquí exactamente igual que vertimos aquí dentro de los arrancadores de usuario. Refs, Es decir. Ah, volando por vías de datos. Entonces lo que te propuse de aquí en adelante, vamos a exportar CONST. Es un vuelo para base de datos. Entonces vamos a copiar esta lógica. Entonces justo antes de cerrar sesión de nuestra aplicación, vamos a pegar esta lógica. Entonces vamos a importar está fuera de línea para base de datos. Entonces vamos a verter base de datos Dodds Ralf, Entonces vamos a poner status que slash. Entonces cambiemos cotizaciones y pique a nuestro usuario actual. I d Entonces vamos a verter set, y luego vamos a establecer es un volador para base de datos algo así en Lee, entonces porque es una promesa. Así que podríamos hacer por aquí. Sólo entonces vamos a cerrar la sesión de nuestro usuario. Vamos a alertar a nuestro usuario, y vamos a cerrar nuestra aplicación. Y en caso de que se elimine algún error, también se lo vamos a notificar a nuestro usuario, pero mejor. Y vamos a decir mejor mensaje de punto. Está bien, ahora, echemos un vistazo en realidad. Entonces déjame refrescar la app por si acaso. Echemos un vistazo dentro de la base de datos. Por lo que ahora tenemos estado en línea, y si voy a cerrar sesión, estoy cerrado. Y ahora me he quedado fuera de línea. Tan bastante cool ahora mismo si vuelvo a firmar, estoy registrado y se ha cambiado el estado. Y ahora si cierro mi solicitud, si cierro mi pestaña, puedo ver estado es un vuelo, por lo que realmente funciona. Y esto es todo. Entonces así es como se puede manejar con el aumento de fuego. Fue bastante fácil, ¿verdad? Lo único que aquí quiero hacer es que realmente quiero darse de baja también de referenciado o info dot connect cuando estemos firmados. Entonces vamos a verternos cuando estemos firmados nuestro Y también vamos a poner lo mismo para la función de limpieza por si acaso. Entonces, esta manera, manejamos todas las suscripciones en tiempo real y todo funciona bien. Bueno, eso es todo para este video. Entonces cometámonos. Nuestro cambio va a sumar todo al estado escénico. Y entonces voy a comprometer todo con mensaje. Diré una presencia riel tiempo, oyente para un usuario. Perfecto. En el siguiente video, vamos a mostrar una presencia en tiempo real para los usuarios dentro de la ventana de chat. Nos vemos allí 129. Agrega presencia en tiempo real: parte 2: Hola ahí. En este video, mostraremos presencia en tiempo real para cada usuario que veamos en el chat. Se mostrará como un dar frente al usuario Avatar. Vámonos antes de que empecemos con esto. Quiero señalar que en el video anterior, cuando gestionamos la presencia en tiempo real para cada usuario aquí, hicimos esta comparación. Si el valor de instantánea de triple igualdad equivale a falso, por lo que esto no es del todo correcto porque este valor podría no ser un bolos. Entonces para evitar eso, pongamos en realidad doble negación para convertirlo en una línea de arco. Y ahora todo va a estar bien. Muy bien, ahora empecemos. Entonces, ¿qué necesitamos ir primero? Vamos a crear un gancho personalizado que nos dará la presencia de usuarios en particular. Por lo que vamos a navegar a ganchos personalizados. Y aquí en la parte inferior, vamos a exportar y tú funcionas, que va a ser uso presencia. Y este gancho recibirá al usuario I D. Que queremos quitarle presencia. Entonces vamos a crear nuestro estado para la presencia. Lo vamos a nombrar presencia y dicha presencia. Va a ser estado de uso simple, que por defecto, se dirá que sabe. Entonces dentro de ti el hecho de que vamos a sacar nuestros datos de usuario. Entonces primero tenemos que conseguir referencia. Así que vamos a gran const gráfico de estado de usuario iba a ser base de datos de firebase dot treff luego comenzó un mal estado slash tu d que obtenemos como argumento, entonces necesitamos verter una matriz de dependencias de las que necesitamos pasar tu i d adentro. Entonces vamos a pobre estado de usuario Dar áspero sobre valor. Entonces vamos a verter snap short, y justo después de eso, vamos a comprobar si existe una instantánea. Entonces si hay algún registro dentro de la base de datos para esta ruta, entonces vamos a verter datos const igual valor de punto de instantánea. Y luego vamos a poner la presencia a los datos, está bien. Y dentro de la función de limpieza, vamos a dar de baja del estado de usuario Raft, inicio de usuario. Está áspero fuera. Y de este gancho, vamos a devolver la presencia, ¿ verdad? Perfecto. Se ve bien. Ahora, vamos a crear un componente que será un punto donde mostraremos la presencia del usuario. Entonces vamos a los componentes. Y aquí menos grande. Te archivas nombre vegetal presencia punto el g s. así que dentro de este componente Vamos a llamar a nuestro cocinero personalizado, que es presencia de uso. Entonces vamos a pobre presencia const igual uso presencia. Y vamos a pasar tu I d Eso recibiría como utilería a este componente así. Entonces dentro del marcado, vamos a poner el siguiente abramos nuestra documentación de traje. Entonces busquemos punta de herramienta. Abrámoslo. Vamos a encontrar un ejemplo apagado desencadenando eventos hover. Por lo que necesitamos exactamente esta funcionalidad. Vayamos a ejemplos y vamos a copiar ese. Entonces dentro de nuestra cancha, lo vamos a colocar así. Importar susurro de nuestro vidente y en lugar de botón, mostraremos un lote y punta de herramienta va a ser no esta punta de herramienta. Va a ser este componente. Vamos a copiarlo y vamos a basarlo así. Ahora necesitamos importar también punta de herramienta y punta de herramienta interior. No vamos a colocar nada. Por ahora, sin embargo, dice que el componente vacío nosotros mismos cerrando y estás justo dentro. Vamos a poner insignia también de nuestro traje y dentro de lote Bueno, en realidad poner nada. Será solo un dardo fuera de algún color. Por lo que ahora necesitamos conseguir lo que vamos a poner dentro de punta de herramienta. Y lo que vamos a poner dentro de lote ¿de qué color se mostrará? Bueno, en realidad necesitamos realizar alguna lógica, y el mejor lugar para manejarla es en realidad crear una función personalizada que llamaremos desde aquí. Entonces para esta insignia, vamos a mostrar clase Nombre del auto, señor. Apunte ella y estilo color de fondo va a ser conseguir color que crearemos en un momento y dentro vamos a pasar presencia así y por punta de herramienta para nuestro texto. Vamos a pasar, conseguir texto. Y también lo vamos a llamar presencia así. Entonces ahora necesitamos crear estas dos funciones, Así que vamos a navegar aquí hasta la parte superior. Y primero, vamos a crear get color. Recibiremos presencia. Y primero, si la presencia es indefinida o si lo es ahora. Entonces si no está definido, entonces vamos a volver de gran color, ¿ verdad? Entonces vamos a poner declaración de cambio y luego vamos a cambiar entre presencia dar. Abramos nuestra base de datos presencia punto estado. Entonces si tenemos caso en línea, entonces vamos a devolver el color verde. Si tenemos caso fuera mintiendo, entonces vamos a mostrar color rad y por defecto, vamos a mostrar también genial así. Entonces para el color, ya Ya Ahora vamos a crear esto para texto. Entonces definamos obtener texto con presencia también. Y de nuevo comprobamos contra ningún valor. Entonces si no tenemos presencia, entonces vamos a exhibir en ningún estado. Entonces vamos a devolver presencia a los Estados. Si es igual a dos en línea, entonces vamos a volver en línea. De lo contrario, vamos a devolver lujuria en línea de lo que vamos a abrir la interpolación de cuerdas que va a poner nueva presencia de fecha. La lujuria cambió. Dos fechas locales beben así. Está bien, Perfecto. Ahora vamos a usar realmente este componente. Navegemos al elemento del mensaje. Y justo antes de mostrar perfil Avatar, usemos presencia no. Y vamos a pasar idee como autor dot tu I d Ahora mismo echemos un vistazo. Y en realidad, si fresca mi app ahora frente a mi perfil, puedo ver punto verde Y si me muevo, puedo ver en línea. Entonces, ¿cómo podemos ahora probarlo contra múltiples usuarios? Bueno, déjame cerrar sesión y déjame mirar con Facebook para que me cree tu perfil de usuario y lo veremos Así que ahora puedes ver a papá. Se desconoce estado Y esto se debe a que como recuerdan, en el video anterior, establecemos reglas de seguridad para el usuario de slash de estado I d Así podemos leer Onley nuestro usuario actual. I d igual a dos usuario I d que estamos tratando de acceder dentro de ocho siempre. Entonces ahora tenemos permiso esta noche. Bueno, para realmente arreglar esto para bien, vamos a mantenerlo como está. Pero para los regionales, vamos a ajustarnos Y diremos, si fuera no igual nieve en Lee, entonces podremos leer los datos de los usuarios. OK, ahora vamos a copiarlo y sincronizarlo con nuestros datos locales. Digamos dónde y ahora echemos un vistazo. Si actualizo mi app ahora, se ve bien. Y si me muevo puedo ver última en línea en esta fecha por lo que realmente funciona. Y si saludo, puedo ver que actualmente estoy en línea y otro usuario está fuera de línea. Entonces esto es todo y funciona bastante impresionante. Comprometamos nuestros cambios. Vamos a verter, a todo aterrizar, comprometernos Y vamos a verter esta obra de teatro por presencia en tiempo real por un hecho. Nos vemos en el siguiente 130. Agrega el cajón de la habitación de edición de ediciones: Hola. En este video, agregaremos a Drover para chatear hasta donde podremos agregarlo información de la habitación como habitación, nombre y descripción. Vámonos. No volvamos al código y encontremos nuestra carpeta superior. Y aquí dentro índice togs estaba Solo ábrelo junto a ese archivo. Vamos a crear a cualquiera que llamemos Editar Habitación BTM Drover Dentro pondremos el siguiente mercado. Entonces, antes que nada, usaremos el elemento de botón y dentro vamos a poner sólo una carta que significa admin. Entonces nombre de la clase va a ser radios fronterizos círculo de tamaño va a ser pequeño color rojo y al hacer clic. Vamos a poner manejador abierto que la gente toma de uso modelo Estado Hook que usamos muchas veces . En cuanto a ahora, Así que vamos a grub está abierto, abierto y cerrado. Ahora necesitamos crear la ventana moral. Entonces saludamos desde Drover. Vamos a importar de RC o así dentro de este rover, vamos a verter show property que va a estar abierto que encendido. Hyde va a ser ropa y la colocación va a estar bien y lo mismo que para los modelos. Drover tiene cuerpo Drover Header y para eso vamos a crear esos componentes. Dentro de pie de página vamos a verter otro botón que será sólo para cerrar el Drover por lo que será un bloque elementos y al click vamos a cerrar nuestro Drover dentro de Heather, vamos a verter, condujo o título y para título Drover, verteremos el Edit Room Todo ahora mismo, en realidad, para Drover Body antes de definirlo. En realidad usemos este componente dentro de los componentes superiores. Entonces vamos a abrir engranos de índice dentro de la carpeta superior y aquí dentro. Pero en barra de herramientas Vamos a usar en ella habitación VT y Drover, eso es todo. Ahora dentro de nuestro cuerpo se iban a definir para importar elementos uno para nombre de habitación y 14 descripción de la habitación Y vamos a utilizar nuestra entrada edita ble que usamos antes. Entonces vamos a abrir este componente y luego vamos a importante. Por lo que para la entrada de Ed Izabal, necesitamos pasar el valor inicial. Entonces vamos a agarrar esa de nuestro contexto actual de habitación. Por lo que aquí en la pizarra superior de los negros, nombre igual uso habitación actual y vamos a seleccionar valor nombre de punto y lo mismo haremos para la descripción. Entonces vamos a agarrarlo. Y también, vamos a envolver este componente alrededor, mamífero. Entonces déjame poner memo aquí y déjame importarlo así. ¿ Todo bien? Ahora necesitamos realmente establecer nuestros componentes. Entonces para editar Importación a base de hierbas para la primera entrada, que va a ser sobre nombre, vamos a pasar nombre de valor inicial del que debemos proporcionar en función segura y dejar que esté en nombre seguro. En cuanto a ahora, entonces vamos a poner etiqueta y etiqueta va a ser Ahh, seis elemento con clase. Nombre fuera margen, dos abajo. Entonces va a ser nombre. Y también mensaje vacío se va a llamar Puede estar vacío. Está bien. Nuestro segundo en pobres va a ser un área de texto en puerto. Entonces pacifiquemos a clase competente. Va a ser el área de texto rosa por defecto será de cinco. Entonces vamos a verter también valor inicial como descripción de lo que vamos a poner inseguro, que va a estar en descripción seguro y también mensaje vacío va a ser descripción no puede estar vacía. Muy bien, ahora, vamos a guardarlo y definamos esas funciones. Entonces, en primer lugar, vamos a crear on name safe, y luego vamos a crear propia descripción segura. Y debido a que nuestra funcionalidad es muy similar, vamos a crear una sola función común que se llamará dentro de cada una fuera de estas funciones. Por lo que va a ser, digamos, actualizar los datos de los datos del día, y recibirá clave. O digamos campo lo que necesitamos actualizar y también el valor real que será triste para esta clave. Está bien, ahora, dentro de nombre propio Guardar. Vamos a llamar a los datos de actualización con el nombre como clave y también nombre nuevo, que se va a pasar como argumento a esta función porque pasamos este manejador a entrada acreditable. Y como recuerdan, si lo abrimos, nos da el valor final. Está bien, así que lo mismo haremos para en descripción segura aquí, vamos a poner descripción y nueva. Digamos que el escritorio va a ser nuevo escritorio. Entonces dentro de los datos, vamos a llamar objeto de base de datos. Entonces vamos a especificar referencia a habitaciones slash habitación I D o chat i d. Así que vamos a agarrar esa de usar Haram's. Entonces vamos a agarrar compartir i d de usar programas. Vamos a la importación pobre a la cima. Y luego para esta referencia, vamos a especificar Niño va a ser conjunto de claves va a ser valor. Después de eso. Cuando terminemos de escribir datos en la base de datos, vamos a llamar a alerta, y vamos a especificar el éxito actualizado con éxito y vamos a ponerlo durante cuatro segundos. Y en caso de que tengamos algún error, también vamos a decir alerta, pero esta vez mejor. Y vamos a poner así nuestro mensaje. Está bien, se ve bien. Eliminemos este espacio vacío. Ahorremos y echemos un vistazo. Ahora tenemos este botón A en la parte superior de la derecha. Vamos a dar click en él. Tenemos a Drover, y el primer problema. Puedo ver que aquí no tenemos ningún margen, Así que si inspeccionamos, podemos ver que si abrimos grupo de importación y tenemos que hacerlo, Dave está por aquí y básicamente no tienen ningún margen. Entonces abramos nuestra importación acreditable. Por lo que necesitamos verter algo de espacio para este def, o puede ser una opción. Entonces lo que propuse hacer, podemos pasar otro argumento a la entrada acreditable, que va a ser nombre de clase ladrón y por defecto estará vacío. Entonces vamos a pasar este nombre de clase de rapero a ese nombre de clase de ladrón y lo que vamos hacer Se dirá con maldito navegar, eres entrada acreditable. Y para área de texto comenzó un especificar rapero nombre cercano va a ser margen top tres para agregar algo de espacio encima de eso, vamos a echar un vistazo. Ahora puedo ver que se ve bien. Ahora vamos a editar en realidad algunos datos. Puede ser nuevo nombre de Roma. Y si digo donde puedo ver exitoso, actualizado y nombre de la habitación se ha actualizado. Efectivamente. Está bien, frío. Pero hay un problema nosotros. Recuerda, con los ladrones, no son exactamente receptivos. Entonces, ¿qué tenemos que hacer? Tenemos que pasar la propiedad completa a este robur cuando estamos en dispositivos móviles. Entonces vamos a usar el gancho de Media Query aquí en la parte superior. Vamos a especificar que su móvil va a ser usado. Consulta de Medios. Y aquí vamos a especificar marcas con apagado 99 2 píxeles. Entonces vamos a pasar. Esto es más bilis a la propiedad completa y se activará sólo cuando estemos en dispositivos móviles . Entonces ahora si lo abrimos y precisamos la ventana, todavía se ve bien. De acuerdo, entonces esto es todo, supongo. Ahora cometamos nuestros cambios. Deja que la gente todo al escenario. Estado es siempre y luego se comprometan. Agregado editar sala. Drover. Está bien. En el siguiente video, vamos a sumar más seguridad a nuestra sala porque, como pueden ver, por ahora, estamos en condiciones de agregarla. Esta sala, pesar de que no estamos admite porque no tenemos permisos de usuario. Entonces este es nuestro tema para el siguiente video. Nos vemos ahí. 131. Reglas de acceso y seguridad basadas en rol: Hola ahí. En este video, las personas gestionan nuestro rol basado en la seguridad en rellenos particulares. Cuando tratamos de agregarla. Información de la habitación, Vamos. Entonces, primer lugar, cómo vamos a definir nuestros roles. Si abrimos nuestra estructura dentro de habitaciones, podemos ver que hemos creado en descripción, apellido y nombre. Por lo que aquí también vamos a añadir otra propiedad, que va a ser admite. Y con base de datos en tiempo real, podemos pobre una carrera o podemos. Pero están realmente mal gestionados porque fuera de su deficiente sistema de constructor de consultas, porque fuera de sus malas consultas en base de datos en tiempo real, vamos a poner a nuestros Edmonds como una matriz fuera de los ID de usuario. Entonces si el usuario pertenece a esta matriz, significa que el usuario es un administrador y no lo pondrá como una matriz. Vamos a crear un objeto dentro de nuestra base de datos, y cada clave va a ser usuario i d. Y si este usuario es un administrador, entonces se configurará en true advise. Este usuario no estará dentro de la base de datos. Muy bien, Así que antes que nada, lo que tenemos que hacer, necesitamos agregar un usuario a nuestros datos. Vamos a, digamos nuevo nombre de habitación. O tal vez vamos a renombrarlo por algo más específico. Digamos cool, vamos a guardarlo. Y ahora vamos a navegar por esta base de datos aquí. Vamos a añadir nuevo campo vamos a crear admite de lo que vamos a dar click en signo más por aquí. Entonces necesitamos poner a nuestro usuario I d Lo que podemos hacer, podemos ir al contexto del perfil. Y luego cuando salgamos de objeto, vamos a Cónsul Acuser i d para conseguir nuestro usuario i d. Así que ahora me puedo atrapar por usuario d y ponerlo dentro de base de datos y luego sentar valor a true y luego editar a los datos de la habitación Así se ve así. Ahora, para restringir el acceso, necesitamos definir reglas de seguridad, así que vayamos a las reglas. Y aquí haremos lo siguiente por nuestro camino de habitaciones. Vamos a quitar propiedad derecha por lo que será recogido desde aquí para que en realidad nadie pueda hacer dos habitaciones camino, ados habitaciones camino, pero son capaces de leer habitaciones que para habitación I d. En su lugar, off escribirlo así. No podemos recrear la regla, sino también para la propiedad de último mensaje, que es así. Nos conseguimos pacificar, ¿verdad? Regla dijo a off no es igual No, Déjame por lodo así. Esto se debe a que si recuerdas, cuando actualizamos datos en múltiples lugares, también actualizamos el último mensaje dentro de nuestra sala. Entonces, básicamente, todos los que escriben en chat pueden actualizar el último mensaje dentro de la sala pero no otros campos como habitación, nombre y descripción. Aquí vamos a definir modelos para exactamente esos se siente así que para habitación idee, somos capaces de escribir datos primero cuando los datos no existen. Cuando tratemos de crear y tu habitación, vamos a especificar si los datos. Por lo que estos datos vuelven a ser un objeto global dentro de las reglas de seguridad y representa los datos actuales a los que estamos tratando de acceder. Entonces si los datos existen por lo que es un bowline fueron capaces de escribir a estos pasados cuando los datos no existen. De acuerdo, Entonces cuando estamos tratando de crear una nueva habitación con la habitación específica me d, o si somos un administrador, sólo entonces podremos escribir y editar esta información. Entonces, ¿cómo podemos hacer eso? Por lo que sabemos que lo almacenamos bajo add hombresluego tenemos usuario I d y true. Entonces con base de datos con reglas de seguridad, funciona así. Abrí documentación para datos en tiempo real, básicamente rituales. Y aquí confiné esta información. Si me desplaza un poco hacia abajo, puedo encontrar esta información a la que puedo acceder alguna llena usando este enfoque. Entonces voy a usar exactamente el mismo patrón y lo que voy a hacer. Voy a preguntar si los datos a los que estamos intentando acceder actualmente tienen admisiones infantiles. Entonces dentro de esto en Mons Child, tenemos otro hijo que va a ser nuestro usuario. Yo d. Y podemos obtenerlo de ambos objetos. Entonces vamos a preguntar si child off dot tu valor i d dot es igual a dos. Cierto. Entonces si tenemos un registro para nuestro usuario dentro de Edmunds lleno, entonces podremos escribir a ese camino. Ahora, vamos a guardarlo y echemos un vistazo. Ahora bien, si soy administrador fuera de este grupo frío, voy a dar click en eso. Voy a poder editarlo porque editamos nuestro usuario I d a la base de datos. Digamos que algo aleatorio ahora actualízalo con éxito. OK, ahora vamos a navegar a otra habitación Cuando no somos administrador, Déjame intentarlo y editarlo. Hola mundo. Ahora si voy a tratar de saborear, conseguiré permiso esta noche Así que nuestras reglas de seguridad funcionan y eso es bastante guay. Y por eso ahora restringimos el acceso a nuestra base de datos. Pero también necesitamos manejarlo programáticamente necesitamos agregar etcétera masculina. Entonces hagamos eso también. Así que vamos a navegar para crear habitación, modelo de mano de playa. Y aquí el agua servirá. Cuando crearemos una nueva habitación, nos sumaremos para sumar la de los hombres. Entonces aquí, cuando definamos en sus, um, datos, también añadiremos un nuevo objeto agregado beans. Y nos vamos a especificar. Vamos a importar en primer lugar. Sí, se ha importado del usuario actual, tu I d se establece en true. Ahora, cada vez que agregamos en tu habitación, nos establecemos como admin. A continuación, cuando leemos los datos de la habitación, necesitamos saber quiénes son exactamente los de Adnan. Por lo que vamos a navegar a Chatel gs y aquí por una habitación actual. Vamos a hacer lo siguiente porque es un objeto y necesitamos trabajar con yo planteo Idealmente, cuando trabajamos dentro de nuestro código, necesitamos transformar este objeto en una matriz. Entonces vamos a crear aquí. Nuevos, valiosos ad mons y ayudantes internos. Definiremos una nueva función que transformará nuestro objeto en solo una matriz. Entonces lo nombraremos exactamente de la misma manera que hicimos con esta función. Pero vamos a decir, sólo transformar a array aquí. Vamos a recibir de nuevo el valor de la instantánea y dejarme definir el teclado de función, y esta función será bastante simple. Entonces si existe Snapshot 12, entonces vamos a devolver claves de objeto de este valor de snapshot para que obtengamos una matriz ID de usuario. De lo contrario, comience un retorno y vacíe Justo Ahora digamos esto ayudantes y usémoslo adentro. Chatterjee s aquí. Vamos a transformarnos en array. Digamos puerta de habitación actual Adnan's Y ahora tenemos el administrativo. Pero también queremos saber si actualmente estamos firmados en el usuario es un administrador. Entonces, ¿qué? Vinimos a ti. Podemos crear un nuevo valioso es admin y simplemente vamos a preguntar si las admisiones incluye fuera ese usuario actual dot tu i d y cómo podemos pasarlo estos datos junto con el contexto. Entonces pasemos, admite y es admin. A partir de ahora, podremos exhibir este drover Onley cuando estemos admitidos. Por lo que ahora vamos a navegar Teoh nuestra parte superior. Navegemos a indexar togs dentro de la carpeta superior y escuchemos desde el contexto. Vamos a agarrar su admin use valor actual de habitación. El valor es admin así. Y ahora vamos a preguntar si somos un admin Onley, entonces vamos a exhibir en su habitación Bt y Drover. Ahora echemos un vistazo dentro de esta primera sala donde somos el administrador. Podemos ver este Drover, y estamos en condiciones de agregarlo. Información de la habitación actualizada con éxito. Pero en la sala donde no estamos admite, no podremos ver a este Drover. Y además no podremos actualizarlo porque dijimos reglas de seguridad. De hecho, copiemos las reglas de seguridad. Y vamos a sincronizarlos con ah, locales de guerra. Abramos reglas de base de datos y las peguemos aquí. Está bien. Parece bueno. Tener eso donde haya una cosa más a nuestras reglas de seguridad. Si inspeccionamos nuestro consejo, podemos ver que tenemos esta base de fuego advirtiendo que sus datos estarán haciendo más bajos y los filtramos en decadencia. Considera terminar índice en en la idea de la habitación en los mensajes. Entonces hagámoslo. Eso es para que nuestras consultas sean aún más rendimiento. Por lo que vamos a navegar a las reglas. Y, veamos, considere agregar índice en la sala I d. En los mensajes. Vamos a copiar esto. Y ese mensaje es Vamos a añadirlo aquí así. Ahora vamos a saborear y echemos un vistazo si todavía podemos tener esta advertencia, ¿de acuerdo? Ahora mismo, nuestro consejo es claro. No veo ninguna advertencia. Volvamos a copiar nuestras reglas y vamos a pegarlas. Teoh, nuestras reglas de base de datos, Jason así. De acuerdo, así que esto es todo para este video. Es así como gestionaremos nuestra seguridad. Ahora cometamos nuestros cambios. Vamos en todo al estado escénico. Y luego cometamos cambios con las reglas de seguridad de actualización para permisos basados en roles. Y eso es todo. Muy bien, nos vemos en el siguiente. 132. Gestión de acceso basado en rol: Hola ahí. En este video, vamos a agregar botón con el fin de poder administrar el permiso basado en roles. Entonces cuando hacemos clic en el perfil de usuario de alguien, si estamos actualmente y habíamos estado fuera de este grupo, somos capaces de crear este usuario y habíamos estado en No volvamos al código. Y abramos, supongo. Elemento de mensaje. Por lo que aquí haremos un poco de modificación al perfil info, BT y modelo. Entonces vamos a abrirla. Y aquí queremos mostrar este botón aquí en la parte inferior. ¿ Cómo podemos hacer esto? Bueno, en realidad es fácil. Podemos pasar algunos Niños a este componente y se mostrarán por aquí. Entonces aquí en perfil lateral en modelo de cuatro mil millones, también vamos a d estructurar Niños y luego esos Niños que mostraremos en pie de página justo antes de nuestro botón de cierre. Ahora vamos a guardarlo. No nos comprometamos a un elemento de mensaje. Y aquí para perfil en para Betty Anne Morrow, pasemos otro fondo por lo que este fondo será un elemento de bloque, y al click va a ser algo que definirá en unos segundos. También, tendrá color azul y el texto va a ser el siguiente. Entonces, primer lugar necesitamos definir cuándo se mostrará este botón. A lo mejor, vamos a comentar. Y aquí vamos a crear unas manzanas malas y primero vamos a moverlas a la charla así. De acuerdo, entonces primero necesitamos definir si podemos otorgar permiso de administrador. Entonces para eso, necesitamos obtener nuestros datos contactados. Entonces vamos a conseguir es admin de uso habitación actual. Déjame abrir auto en el contexto de la habitación, entonces déjame importar el gancho y de valor Begin a peak is admin. Y también necesitamos otros admite también. Por lo tanto, use el valor de habitación actual. El valor admite así. Entonces vamos a envolver nuestro elemento de mensaje alrededor de memo porque usamos selector de contexto y aquí vamos a hacer lo siguiente. En primer lugar necesitamos saber si el autor del mensaje es un administrador. Entonces vamos a crear su mensaje autor admin y vamos a preguntarle a Edmunds Incluye autor, autor puerta tú yo d Entonces necesitamos saber si somos el autor del mensaje para que podamos crear su autor de comestible y podamos preguntarnos actual. Vamos a importar fuera usuario actual dot tu yo d igual autor indoor te d me gusta esto. Y entonces podemos crear otro comestible que dará nombre digamos que puede otorgar acceso o puede otorgar admin. Y somos capaces de otorgar permiso de administrador si somos agregamos Mons nosotros mismos. Y además, si no somos autores de mensajes por lo que ahora podemos usar todos esos objetos de valor para mostrar nuestro botón condicionalmente. Entonces primero, vamos a pobres. Si podemos otorgar admin solo hecho, mostraremos este fondo y también para el mensaje Vamos a poner su mensaje, autor admin. Entonces vamos a decir quitar permiso de administrador. Por lo demás vamos a decir, dale a admin en esta sala algo así. De acuerdo, ahora, en realidad, veamos qué hicimos. Déjenme refrescar. Por si acaso si abrí este perfil, puedo ver dar admin en esta sala. Entonces cuando hago clic, no pasa nada porque no definimos ninguna funcionalidad. Por lo que vamos a navegar aquí y toda la funcionalidad que vamos a verter dentro de los mensajes componente, y luego vamos a pasar esta funcionalidad al elemento de mensaje. De acuerdo, entonces para el elemento de mensaje aquí, vamos a tener digamos manejar la función de administración que vamos a pasar que vamos a conseguir. Y para este mango admin. Vamos a pasar. Digamos, autor punto tu I d Muy bien, ahora tenemos que conseguir este mango admin de utilería y vamos a navegar a los mensajes. Y aquí vamos a definir admin de manejo constante, y vamos a optimizarlo de antemano con uso call back porque lo pasamos a elemento hijo . OK, entonces este manejador admin recibirá tu i d. Y luego primero definamos nuestra ref Edmunds dentro de base de datos para que podamos un objeto de base de datos de llamadas . Entonces la referencia va a ser habitaciones de lo que va a ser Chat I d. que ya tenemos de uso perms y luego slash avance. Muy bien, ahora necesitamos agregar ideas de chat una dependencia y escuchar lo que tenemos que hacer. Necesitamos realmente obtener nuestro valor previo para activarlo. Entonces si hacemos clic en este botón y queremos otorgar el permiso, entonces estará en él. De lo contrario, si este usuario ya cuenta con el permiso, queremos revocarlo. Entonces en realidad para hacerlo con base de datos en tiempo real, si abrimos su documentación, podemos ver esta sección bajo lectura de datos derecho guardar datos secciones Estrin. Por lo que usando de esta manera, somos capaces de obtener acceso al valor anterior y podemos actualizarlo. Y lo más importante, es transacción. Significa que los datos no se corromperán. Entonces, en realidad usemos exactamente el mismo enfoque. Entonces déjame copiar todo eso y lo que voy a dio voy a llamar esperar lo que es convertir esta función de carreras de edición. Llamemos a evadir sumar transacción de Ralf Dar varonil. Entonces recibimos nuestro valor actual o anterior, que va a ser admisión y escuchar lo que vamos a ponerlo. Voy a pegar el mismo código que cooperé y aquí voy a preguntar si existen admisiones . Sólo entonces realizaré mi lógica. Entonces si admite existir, entonces quiero preguntar si admite, tú d existo. Entonces quiero revocar el acceso. Entonces voy a establecer admite tu d d a saber. Y cuando establecemos valor para saber para base de datos en tiempo real, se eliminará de la base de datos porque en realidad no se pueden almacenar valores allí. Entonces ahora si no tenemos el permiso, entonces vamos a gruñir. Por lo que avanza tu i d se establecerá en Verdadero. Ahora eliminemos el resto del código. Y al final, vamos a regresar admite, y hará lo suyo. ¿ Verdad? Llamar. Ahora, necesitamos notificar al usuario si revocamos u otorgamos el acceso. Entonces vamos a poner puerta de alerta para ¿Y qué debe reportar aquí? ¿ Cómo podemos precisar si revocamos u otorgamos acceso para eso? Podemos crear disponible por aquí que renunciaremos. Digamos mensaje de alerta. Entonces cuando hayamos revocado el acceso, vamos a poner alerta. Mensaje a admin. Permiso retirado. Y para cierto, comienza un mensaje de Miller especificado. Permiso de administración otorgado, algo así. Entonces vamos a pasar este mensaje de alerta a la información de alerta, y yo Necesitamos pasar este manejador admin hacia abajo al elemento de mensaje. Entonces vamos a bordo manejar admin. Manejar admin. Ahora, en realidad echemos un vistazo. Volvamos a navegar a nuestra app. Si hago clic en este usuario, dar admin en esta sala. Admin Permiso otorgado. Ahora tengo permiso de quitar admin. Si hago clic en él, puedo ver el permiso de administrador eliminado. Vamos a navegar por nuestra base de datos. Encontremos esta habitación, que es habitación adentro para esa habitación. Ahora. Si otorgo acceso, se puede ver un nuevo valor dentro de la base de datos. Y si elimino el acceso, puedo ver que se ha eliminado de la base de datos. Está bien, supongo que todo se trata de la seguridad y la gestión basada en roles. De hecho, cometamos nuestros cambios y terminemos este video. Pero antes de que hagamos eso, movamos esta importación a la parte superior, y luego cometamos cambios. Así que ponte en todo, luego consigue commit y vamos a decir botón agregado para otorgar o revocar el acceso de administrador. Muy bien, Perfecto. Nos vemos en el siguiente. 133. Agrega el volante programático con ganos: Hola. En este video, añadiremos el flotador pro gramatical para trazar elementos, y servirá como base para los próximos videos. Empecemos. Nuestro pro gramatical, sin embargo, será manejado por un gancho personalizado, y confinamos este gancho en Internet. Así que vamos a abrir Google y vamos a teclear use hooks y luego use hover. Entonces vamos a abrir el primer enlace que permita obtener el fragmento de código y vamos a copiar este gancho. Voy a copiar toda esa función. Entonces voy a volver al código que dentro de los ganchos personalizados al final. Voy a anular esta función, y la voy a exportar desde aquí. Y también necesito usar borrador para ese. Entonces déjenme importar. Y como puedo ver, tengo esta dependencia innecesaria. Pero eso no es exactamente cierto. Entonces agreguemos Sí, Lind, advertencia para esta línea. Y también modifiquemos un poco este gancho en lugar de desactivarlo condicionalmente devolviendo la función de limpieza. Vamos a mover este regreso aquí hasta el final. Muy bien, ahora estamos listos con el gancho. Navegemos al elemento del mensaje y aquí vamos a usar ese gancho. Entonces en la parte superior. Vamos a crear un nuevo valioso, y vamos a llamar uso, sin embargo, sin embargo, Hook. Por lo que este uso Howard Hook. Nos devuelve una matriz de exactamente dos elementos donde primer elemento es la referencia que necesitamos asignar al elemento. Entonces vamos a nombrarse referencia y luego en realidad la bala valorada que indica si actualmente este elemento está flotando o no. Entonces llamémoslo el auto ref y pasémoslo a este elemento L I. Por lo que la referencia va a ser auto ref. Ahora en realidad podemos usar este valor de lingotes y podemos hacer algo, pero eso así que por ahora lo que propongo hacer, solo quiero que Teoh cambie el color de fondo cada vez que estemos flotando. Entonces vamos a pobre agrupamiento dinámico para este elemento aliado. Entonces robe a este loquero entre paréntesis y usemos Rincon trip elation. Y primero voy a añadir autos son un puntero a este elemento aliado. Por lo que sabemos que siempre que flotemos, algo va a pasar. Y luego voy a preguntar si nuestro aliado es Howard, déjame cambiarlo a Harvard. Entonces voy a mostrar fondo negro 0,2% cada uno. De lo contrario, ningún nombre de clase en absoluto. Ahora bien, si vuelvo al código, puedo ver que siempre que sin embargo, puedo obtener mis antecedentes. Entonces esto es todo. Y ese es el final de este video. Comprometamos nuestros cambios. Vamos a poner todo al escenario se quedó. Entonces vamos a comprometernos con la edición pro gramatical hover. Está bien, nos vemos en el siguiente. 134. Crear componentes de IconControl con IconControl pinturas (parte 1): hola en estos dos videos vamos a manejar likes en nuestra aplicación. En este video, vamos a crear un componente que va a ser un envoltorio alrededor del control. Yo vengo que vamos a sumar al ítem del mensaje. Vamos, Volvamos al código y primero definamos cómo vamos a usar este componente. Entonces abramos mensaje I, Tim, y lo colocaremos justo después de hace un tiempo. Entonces aquí tendrá un componente, algo así como puedo VT y controlar. Y entonces este componente Bueno, excepto en los siguientes apoyos. Entonces primero vamos a definir si va a ser visible o no. Por ahora, que sea visible. Entonces pondremos yo puedo nombrar y por ahora, que sea difícil para nuestros gustos. Entonces también, tendremos punta de herramienta que dirá algo así como este mensaje. Además, tendrá un manejador en manejador de clics. Entonces por ahora, que sea una función vacía y también tendrá un dos apoyos condicionales. Entonces primero va a ser color y luego va a ser contenido de bancada. Eventualmente tendrá que Aikens cerrar Aiken y, como le confieso como puedo queremos mostrar inclinado con contenido. Entonces por eso vamos a poner el contenido por lotes como un problema adicional. Y por ahora, digamos que va a tener cinco likes algo como esto. Está bien. Ahora vamos a crear realmente este componente y vamos a ver cómo se verá así aquí Bajo mensajes, Vamos a crear Aiken, VT. Y Control. Y definamos cómo se verá antes de hacer cualquier marcado. Agarremos primero los apoyos por lo que tenemos es visible. Entonces también tenemos yo puedo nombrar. Contamos con punta de herramienta que tenemos en Click, y contamos con forma de contenido de insignia. Otros accesorios que almacenaremos bajo utilería. Objeto. De acuerdo, entonces va a ser un diff con clase Nombre del margen a la izquierda digamos que el estilo va a ser el siguiente. Entonces vamos a poner la prop de visibilidad, y va a ser visible en Lee cuando sea visible, establecido en verdad. Entonces si es visible, entonces visible, lo contrario oculto. Está bien, bien dentro de este def. Tenemos que verter. Digamos que un lote condicional contenido un componente condicional, y aquí hay un pequeño truco. Cómo se puede hacer eso. No es realmente un realmente primitivo o obvio. Digamos acercamiento. Cómo crear un componente render off condicional dentro de un componente. Entonces es el truco. Primero vertimos aquí, y tú componente, digamos insignia condicional como esta, recibirá una propiedad, que va a ser, digamos, condición donde un valor que nosotros quería exhibir. Entonces aquí vamos a verter insignia condicional y como prop, vamos a pasar condición y esta condición va a ser nuestro contenido de insignia. Y aquí vamos a preguntar si tenemos una condición, entonces vamos a guerra lote con contenido fuera de condición, que va a ser nuestro valor real. Y luego vamos a rapero en Niños así. De lo contrario acabaremos de devolver Niños. Entonces, sí, este es el truco. Y necesitamos agarrar a Niños de nuestros accesorios también. Entonces se verá algo así, pero puedo ver que algo anda mal. Entonces, ¿qué está pasando aquí? Olvidé el soporte. Está bien, así que esto es todo. Ahora bien, si tenemos mucho contenido, este lote condicional se renderizará de lo contrario, tenemos Children, que es todo el contenido que pasamos dentro. OK, pero dentro vamos a pasar. Espolón y susurro es el componente de nuestro traje que usaron para algo así como punta de herramienta . Entonces, por un susurro, vamos a pasar. Vamos a una chuleta de colocación. Entonces vamos a pasar DeLay. También tiene un retraso de cero que dilly. Ocultar también va a ser Zito. DeLay show va a ser también cero gatillo va a ser gritar y altavoz. Vamos a pasar punta de herramienta y para mensaje de punta de herramienta. Vamos a pasar propiedad culpable como esta dentro de este susurro o para un gatillo, vamos a mostrar icono botón componente normal de nuestro traje. Y por ello menos Aiken, botón, vamos a verter todos los cultivos primero que recibimos por aquí, Y luego tendremos en click handler y vamos a pasar en click que recibimos. Entonces lo vamos a poner como un tamaño de círculo va a ser muy pequeño. Y también yo sí sí va a ser yo puedo vamos a importar. Y para ICANN, vamos a poner icono. Puedo nombrar que también recibimos como propiedad. Ahora parece listo Inside message item. Podemos ver que me conveniente no está definido. Vamos a importar y veamos realmente cómo se ve. Entonces ahora si abrimos nuestra aplicación ahora, tenemos likes. No obstante, no tenemos color. Entonces lo que me propuse hacer aquí, vamos a echar un collar condicional. Entonces, ¿qué tan ponible hacer eso? Ya hicimos eso. Para que podamos verter algo como esto. Podemos difundir nuestro objeto Si nuestra condición es verdadera o podemos difundir un objeto vacío. En este caso, no pasaremos ninguna propiedad. Entonces vamos a poner algo como si nuestra condición es cierta, entonces vamos a verter el color rojo. Y de lo contrario, vamos a poner un objeto vacío para que funcione, y hará su opinión. Ahora bien, si tuviera un fresco se puede ver que tengo color rojo cuando la condición es cierta. De lo contrario tengo falso. Está bien, bien. Por lo que funciona. Y por cierto, si te preguntas a dónde irá, irá aquí por estos apoyos. Y estos apoyos serán pasados al botón Aiken. Entonces básicamente, dijimos color para este botón de Aiken. De acuerdo, Entonces esto es todo para este video en el siguiente video, mostraremos los likes y móviles en funcionalidad. Pero como por ahora, terminemos este video cometiendo nuestros cambios. Dirige en todo al estado escénico y luego consigue comprometerse. Creador, puedo VT en componente de control así. Está bien, Perfecto. Nos vemos en el siguiente. 135. Es el tipo de función (parte 2): Hey ahi en esta burbuja de video, agrega funcionalidad al botón like. Vamos. Primero naveguemos a la base de datos y veamos cómo vamos a manejar nuestra estructura de datos . Entonces dentro de cada elemento de mensaje, vamos a crear dos nuevas propiedades más. First Property va a ser como Count que indicará el número total off likes en este mensaje en particular. Y entonces tendremos, Digamos, Digamos, me gusta será una matriz fuera de valores con los ID de usuario que les gustó este mensaje. Pero en lugar de almacenar y Ray iban a usar un objeto de la misma manera que lo hicimos con Rooms admite, vamos a navegar a la app. Y aquí vamos a abrir el primer elemento del mensaje. Aquí vamos a recibir mango como función y este mango como función. Se lo pasaremos a este propio manejador de clics aquí. Vamos a llamar a este mango como y para mango, como si vamos a pasar mensaje dot i d Está bien, ahora vamos a navegar al fondo en gs textiles Y aquí cuando creemos y te envíes un mensaje, vamos a adjuntar una nueva propiedad como contar, y por defecto se establecerá en cero. De acuerdo, ahora vamos a navegar a los mensajes para indexar nodgy s. y aquí, definamos Const manejar como manejador deja entrar rapero. Fue llamado de nuevo con anticipación. Y ahora definamos nuestra lógica. Lo vamos a pasar al elemento de mensaje en la luz de la vela como, por lo que recibirá mensaje I d. Y la lógica en realidad será bastante la misma que con el administrador de mango porque vamos a usar una transacción. Entonces vamos realmente atrapados ser todo desde aquí y vamos a ponerlo dentro mango como pero en lugar de avance, ref, vamos a pobre mensaje, ref y mensaje Ref va a ser base de datos Ralf que mensajes. Y luego en lugar de chat idea, vamos a usar el mensaje I d Está bien, entonces necesitamos convertir también esta función a en una función de sumidero para transacción en lugar de admite que vamos a recibir mensaje. Entonces vamos a preguntar si el mensaje existe entonces si el mensaje de punto me gusta y el mensaje de Dar le gustas , yo d fuera de nuestro usuario actual. Entonces vamos a agarrarlo de otro objeto. Vamos a usar off user actual y te vamos a conseguir i d. Entonces si tenemos, como por este usuario en particular, entonces vamos a eliminar primero este like y también queremos disminuir nuestro like Joan. Entonces vamos a arreglarlo al mensaje Le gusta al perro. Entonces vamos a disminuir, como, contar por uno. Entonces vamos chico, mi nariz es igual a una. Va a ser un mensaje de alerta, como eliminado. ¿ De acuerdo? De lo contrario, cuando queremos verter y te guste, vamos a poner un mensaje como Conan Plus es igual a uno y porque podemos tener este likes objeto dicho, ya sabes, sabes, puede ser inexistente dentro de las bases de datos comunidad también manejó eso. Y si tratamos de agregar algo al objeto non existen, obtendremos un error. Entonces primero vamos a preguntar si a ningún mensaje le gusta. Entonces si no tenemos este objeto, entonces lo inicializaremos como un objeto vacío. Por lo que el mensaje me gusta va a ser un objeto vacío. Y sólo entonces podremos establecer mensaje. DOT le gusta tu i d igual a la verdad. Y entonces mensaje va a ser como en ello. Está bien, Perfecto. Ahora digamos que espera y echemos un vistazo. Si vamos a tratar de dar click en este mensaje, tendremos transacción fallida, y esto se debe a que intenta actualizar like, count, inexistente propiedad para mensajes existentes. Entonces lo que me propuse hacer, quiero poblar todo este pasaje es solo para limpiar un poco la base de datos. Por lo que ahora somos capaces de poner un nuevo mensaje con las nuevas propiedades. Entonces pongamos un nuevo mensaje. Y ahora tiene cinco como Conde y en realidad podemos arreglar esto. Pero por ahora, si hacemos click en él y podemos ver, como, como, editar si vamos a base de datos, si abrimos nuestro mensaje, podemos ver, como contar uno y me gusta contiene nuestro usuario i d. Y si hacemos clic en él una vez más, podemos ver me gusta se diluye y, como, contar tal a Zito. Está bien, Perfecto. Ahora vamos a arreglar en realidad nuestro tú Yo No nos olvidemos de mensaje elemento aquí. Tenemos que pasar apoyos, Teoh, puedo estar en control. Entonces en primer lugar, cuando tenemos color apagado rojo cuando nuestro mensaje es del agrado, correcto, correcto, Así que vamos a pobre es la luz valiosa que va a crear aquí en la parte superior const su vida y cómo podemos definir eso. Entonces primero necesitamos ver si este mensaje tiene algún me gusta. Entonces vamos a agarrar, me gusta y me gusta contar de nuestro mensaje. Y aquí vamos a preguntar si nuestro mensaje tiene algún me gusta. Entonces vamos a poner las llaves de objeto fuera. A estos les gusta sacar array de las ideas de usuario y luego podemos pobre incluye, Digamos fuera de Dar usuario actual, ¿ no? I d Así que de esta manera podemos detectar si nuestro mensaje es del agrado de este usuario en particular. De acuerdo, entonces vamos a pasar. A esto le gusta debilitar exhibido aquí. Lo vamos a poner dentro de la condición, y luego vamos a poner color rojo. De acuerdo, entonces tenemos esta es propiedad visible. Y esto es para real para la capacidad de respuesta fuera de nuestros mensajes. Entonces si recitamos nuestra ventana, terminamos en dispositivos móviles. Entonces en dispositivos móviles, no queremos ocultar nuestros iconos. Queremos mostrarlos siempre. Entonces para esto, podemos usar la consulta de medios para detectar eso. Entonces primero, pongámoslo aquí abajo use hover que vamos a poner es móvil. Y luego vamos a usar Media Query, y vamos a preguntar si tenemos marcas con off 992 píxeles. Entonces si tenemos es móvil, realmente vamos a crear nuevos viables. Eso diremos puede mostrar Aiken's Así que si tenemos es móvil o si nuestro elemento actual se cierne por lo que los veremos Solo cuando la tengamos en el mensaje Solo entonces podemos mostrar Aikens así para es visible Vamos a tirar puedo mostrar Yo vengo por click Nosotros vamos a verter y similares Y para contenido de banco en lugar de cinco vamos a poner nuestra corriente como cuenta Vale, bien . Ahora echemos un vistazo Si tenemos donde podemos ver, tenemos icono Si redimensionamos la ventana Y si estamos en dispositivos móviles pudimos ver el Eiken. Está bien, Perfecto. Ahora si hago clic en este mensaje como, puedo ver como conteo y así se está mostrando en color rojo apagado. Esto es todo. Y se ve bastante guay. ¿ Algún tamaño de fuego otra vez? Volver a mi bilis. Yo lo veo siempre. Esto es todo. Y supongo que cometamos nuestros cambios. Déjame abrir mi terminal plomo Pobre llegar a todo lo que podría comprometerse Manejar mensaje me gusta Vale, Perfecto. Nos vemos en el siguiente 136. Handle la operación de eliminación de eliminación de: Hola ahí. En este video, vamos a manejar delish in off chap mensajes para ese escombros en otro Aiken Bt en control a elemento de mensaje. Vamos. Navegemos al elemento del mensaje ¿Dodgy? Sí. Y aquí al lado de me gusta, puedo comenzar el control. Deja que otro Aiken entre control para eliminar el mensaje y será visible en Lee al mensaje. Autor. Por lo que el autor del mensaje Onley puede hacer eso. Entonces vamos a copiar esto y vamos a renderizar condicionalmente nuestro próximo Aiken se convirtió en control. Entonces si somos autor fuera del mensaje, sólo entonces podremos ver eso. Entonces no necesitamos color. Brad, necesitamos es visible. Yo puedo nombrar va a estar cerca. Punta de herramienta se va a retrasar Este mensaje No necesitamos contenido veg. Y para unclip le agregaremos mango eneldo que vamos a recibir de utilería. De acuerdo, supongo que estamos terminados aquí. Ahora echemos un vistazo Si yo, sin embargo puedo ver entregado este mensaje, bien, bien, Bastante cool. Ahora no entreguemos dos mensajes en togs de texto. Y aquí definamos esa función. Vamos a tirar del const mango eneldo él y rápido en uso llamar de nuevo con anticipación. Tampoco nos olvidemos de las dependencias y pasémoslo de antemano al elemento del mensaje. Está bien, bien. Por lo que este handle delete recibe una idea de mensaje como argumento. Entonces vamos a agarrarlo y vamos a definir nuestra lógica en primer lugar. preguntaremos si de verdad tiene la intención de entregar este mensaje. A lo mejor sólo mis hizo clic en él. Entonces vamos a preguntar si la ventana confirma, entrega este mensaje. Entonces si el usuario hace clic en no, entonces simplemente vamos a regresar de la disfunción. Entonces necesitamos realizar algunas operaciones por aquí cuando actualicemos la base de datos. Porque como recuerdan, cuando deliberamos mensaje por aquí, tenemos que considerar también nuestra propiedad de último mensaje dentro del elemento de la habitación. Por lo que también necesitamos actualizarlo, y necesitamos realizar una operación atómica. Para eso, crearemos un objeto de actualización, y luego actualizaremos nuestra base de datos desde la raíz, como lo hicimos antes. De acuerdo, entonces vamos a crear nuevas actualizaciones, objeto, que por ahora está vacío. Y luego vamos a poner primero actualizaciones que la gente actualiza mensajes. Entonces actualizaremos mensaje. Yo d Annabable lo dijo para saber se borrará el mensaje original que cuando nuestro mensaje sea último, queremos actualizar la información de nuestra sala. Entonces primero necesitamos detectar cuándo se pierde nuestro mensaje. Para eso, vamos a crear un nuevo valioso por aquí, que vamos a nombrar es último, Vamos a ponerlo por encima de actualizaciones. Y va a ser una comparación entre nuestro estado actual y el mensaje I D. Así que vamos a referirnos a los mensajes. Entonces los mensajes de punto longitud menos uno. Agarraremos el último mensaje de nuestra matriz estatal que d igual a dos mensajes I d Así que si esto es cierto, entonces nuestros mensajes lujuria Vale, entonces aquí vamos a preguntar si nuestro mensaje es lujuria que por estas actualizaciones. Objeto. Vamos a especificar salas de slash, slash chat I D. Y luego el último mensaje es igual al siguiente. Por lo que va a ser el objeto anterior junto a nuestro objeto dilatado actual. Entonces necesitamos agarrar mensajes longitud de punto menos dos, el objeto anterior, ¿ verdad? Entonces lo vamos a difundir por todo el último mensaje. Por lo tanto, reenviemos mensajes que los mensajes longitud de punto menos dos. Y también necesitamos especificar mensaje i d. En cuanto a recordar para último mensaje. Entonces también vamos a poner mensajes, mensajes sobre longitud menos dos puntos i d. Y como estamos tratando de acceder a los mensajes de punto longitud menos dos, esto podría ser ahora o este objeto no puede ser existencia. Por lo que tenemos que comprobar en contra de eso. Entonces podemos hacer eso simplemente poniendo aquí. Si nuestro mensaje es último y los mensajes pensados longitud es mayor que uno Onley, entonces nos aseguramos de que este objeto sí existe. De acuerdo, entonces nuestro próximo caso a considerar cuando sólo nos queda un mensaje en la sala de chat. Y cuando lo retrasamos, queremos eliminar el último mensaje dentro, um, información para eso. Vamos a comprobar si nuestro mensaje está perdido y los mensajes de punto longitud igual a uno en Lee. Entonces tiraremos para último mensaje Mel Value para entregarlo. Y al final, actualizaremos nuestra base de datos. Entonces pongamos a prueba Kage. Mira por aquí. Entonces vamos a llamar, esperar la actualización de puerta de borrador de punto de base de datos con objetos y vamos a convertir a cualquier función . Y también vamos a especificar matriz de dependencias. Por lo que necesitamos pastar idee y mensajes. Y también para evitar esta advertencia, supresor de Colette así. Y además pongamos alerta aquí para notificar al usuario que hemos borrado el mensaje. Por lo que el mensaje se ha dilatado bean y no mensajes mensaje. Y para cualquier error, vamos a poner puerta de alerta, entrar error, pero mensaje. OK, se ve bien. Ahora echemos un vistazo. Permítanme añadir algunos mensajes nuevos. Hola? Están altos. De acuerdo, Entonces si elimino el último mensaje dentro de la base de datos, puedo ver ahora la información de la habitación se está actualizando. Y ahora tengo el último mensaje establecido para ahí, lo cual es correcto. Ahora si lo hago no el último mensaje, sino uno de esos. Digamos hola. Puedo ver que el último mensaje dentro del elemento de la habitación no ha sido actualizado. Esto es correcto. Ahora bien, si elimino el último mensaje, tengo nuevos mensajes. Y si solo tengo un mensaje dentro de la base de datos y si elimino ese, aún no tengo mensajes en ambos lugares. OK, entonces esto es bueno. Y así es como manejaremos eso. Muy bien, cometamos nuestros cambios y terminemos este video. Olvidemos todo y luego nos comprometamos. Manejar la cooperación de mensajes dilatados. Muy bien, nos vemos en el siguiente. 137. Agrega el componente de subir sube: parte 1: santificado. En este video, comenzaremos en funcionalidad para subir archivos. Vamos, Vamos a navegar a la carpeta Bottom y vamos a abrir togs índice. Aquí vamos a añadir un nuevo icono, fondo a nuestra importación. Aquí a la izquierda, abrirá modelo Ventana y a partir de ahí subiremos nuestros archivos. Entonces vamos a crear nuevo archivo en el interior. Esta carpeta lo nombrará Attachment BT y Moto Gs. Vamos a pobre hola por dentro y vamos a usarlo aquí dentro de índice togs justo antes de que los elementos de entrada iban a mostrar Attachment Bt y Moto. De acuerdo, ahora definamos nuestro mercado. Entonces aquí necesitamos verter en pobre grupo Dar fondo porque cuando usamos grupo de importación en el interior, necesitamos verter en el botón de grupo de puertos para poder trabajar y lucir bien. Entonces para este importante botón de grupo, vamos a especificar Aiken, que va a ser apego ahora necesitamos que manejes el estado moral. Entonces usemos el gancho Moto State y crezcamos su apertura cerrada y abierta. Entonces cuando pinchemos en este fondo, vamos a abrir nuestra ventana móvil. Está bien, perfecto. Junto a este botón, definamos la ventana mortal real. Entonces vamos a importar modelo. Y dentro de Moto, vamos a especificar Mortal Heather, cuerpo y pie de página. Está bien, bien para este modelo. Vamos a especificar show property, que está abierto y también en altura, va a estar cerca para Heather. Elemento en el interior, vamos a verter título Moto dentro de Título mortal vamos a mostrar son archivos de piso. Y quitemos este dinero de aquí para un pie de página de modelo. Vamos a apaciguar un fondo para aplaudir nuestros expedientes. Entonces vamos a verter nuevo elemento de botón y dentro vamos a verter un Plourde. O tal vez, digamos, enviado a chatear. Por lo que por ahora, sólo tendrá una propiedad de un clic. Y junto a este fondo, vamos a mostrar pequeño elemento y dentro de él dirá Onley archivos de menos de cinco megabytes están permitidos. Y alineemos este pequeño elemento por el sitio correcto. Y además, vamos a darle un poco fuera de margen top. De acuerdo, vamos a guardarlo. Y para cuerpo, especifiquemos hola por ahora. Y tomemos uno local para ser la mitad. Por lo que ahora podemos ver que tenemos este extraño mercado por este def. No lo necesitamos. Tenemos que reaccionar. Fragmento. De acuerdo, una vez más. Ahora tenemos fondo Cuando hacemos click en él, tenemos este tipo de moto enviar a Chad y donde solo se permiten archivos menos de cinco megabytes . suben nuestro elemento de aplaudo. El componente va a ser de reactivo. Entonces busquemos un plodder y bajemos a manualmente. Por lo que este es tipo del componente que vamos a sacar de nuestro traje. Si abrimos fragmento de código, llamemos a P todo eso y usémoslo adentro. Ah, usa cuerpo en lugar de hola. Importemos un portero. Y aquí vamos a verter fuera del piso igual a dos. False que la acción va a ser solo una cadena vacía porque vamos a manejarla manualmente para evento sin cambios. Vamos a especificar sobre el cambio, Heller, eso va a crear. No vamos a utilizar ninguna referencia porque vamos a manejar todo a mano. Entonces podremos subir múltiples archivos y también menos tipear. Vamos a especificar texto de imagen. De acuerdo, ahora necesitamos realmente tratar nuestro estado para los archivos subidos. Entonces vamos a crear un nuevo estado por aquí que vamos a nombrar, archivar, listar y establecer lista de archivos por defecto. Va a ser una tarifa vacía y esta lista de archivos. Tenemos que pasarlo a este componente er aplaudido. Entonces pasemos lista de archivos como estado de lista de archivos. Ahora tenemos que definir esto sobre el cambio, manejador. Entonces vamos a crear esa función por aquí y este evento de cambio si tenemos nos da lista de fuego , que es tipo archivado. Entonces básicamente tenemos array off archivos que tenemos que aplaudir. Pero a partir de este rayo, necesitamos un filtro algunas cosas. Entonces, en primer lugar, necesitamos permitir archivos Onley que tengan menos de cinco megabytes de datos. Y también queremos restringir el número máximo de archivos subidos. Digamos 25 Así que primero necesitamos definir nuestro tamaño en bytes para restringirlo. Por lo que necesitamos conseguir cinco megabytes en picaduras para hacer eso. Entonces aquí en la parte superior, vamos a crear Max tamaño de archivo valioso, y aquí vamos a poner Así que primero agarraremos 1000 que representa una mordida. Entonces vamos a multiplicar por 1024 para obtener un megabyte en picaduras y luego multiplicado por cinco para obtener cinco megabytes en picaduras. Muy bien, así que dentro de este manejador sin cambios deja pobres filtrarlo, Digamos valor o valioso. Entonces vamos a llamar a file array dot filter Aquí vamos a recibir elemento. Y para este elemento, vamos a preguntar si este elemento blob archivo dot size nos dará el tamaño fuera del archivo actual menor o igual al tamaño máximo de archivo Onley. Entonces se sumará a nuestra filtrada Una violación. Además, a partir de esta matriz filtrada, queremos que Onley agarre cinco elementos. Entonces pongamos rebanada y de la rebanada vamos a especificar Onley 1st 5 elementos así. Entonces justo después de eso, vamos a llamar a set fire list y vamos a verter una perspicacia filtrada así. De acuerdo, si decimos que estamos ahora, tenemos este signo igual en la parte inferior. Guardémoslo todo. Volvamos a navegar a la APP Vamos a dar click en este botón y podemos ver que no está lleno con. Entonces vamos a arreglar esto rápidamente para aplaudirla. Vamos a especificar nombre de clase apagado con 100. Ahora, ¿qué ahorrador? Y echemos un vistazo una vez más. Por lo que al hacer clic en este botón, voy a subir, puedo ver que está lleno con puedo seleccionar múltiples archivos. Digamos que los voy a seleccionar a todos. Pero sólo se seleccionarán 1er 5 archivos. 12345 Puedo ver que realmente funciona. Ahora necesito agregar funcionalidad para enviar al botón de chat con el fin de subir todos ellos. También los puedo manejar desde aquí. Está bien, genial. Entonces vamos a crear Y tú, manejador, que va a ser nuestro manejador para esto en click enviado al botón chat. Entonces vamos a crear, digamos, en un Plourde va a estar en un fregadero, función y perspicacia. En primer lugar, vamos a definir, digamos, el estado de carga. De acuerdo, así que vamos a crear está cargando y set está cargando por defecto. Será falso. Y esto está cargando. Vamos a verter por este fondo. Por lo que para discapacitados vamos a poner está cargando para en click. Vamos a especificar en un Plourde. Y también hagamos nuestros aplaudidos o discapacitados. Si podemos hacer eso, deshabilitaron. ¿ Cuándo está cargando? Está bien, Perfecto. Entonces para un Pourde, haremos lo siguiente. Vamos a tirar, prueba a catch block en primer lugar. Por lo que sabemos que tenemos lista de archivos como una matriz fuera de tipos de archivos. Significa que vamos a aplaudir múltiples archivos a nuestra base de datos. Entonces para manejar múltiples promesas, usaremos el punto de promesa Todo Pero primero, necesitamos obtener una matriz de promesas para eso. Vamos a crear cualquier valiosa promesa de aplaudo y vamos a mapear nuestra matriz de lista de archivos a prometer con el fin de recibir matriz de promesas. Por lo que se va a archivar el mapa de puntos de lista de archivos. Entonces necesitamos acceder a nuestro almacén. Entonces pongamos un almacén. Entonces vamos a usar el objeto de almacenamiento de MISC firebase. Entonces vamos a tirar de referencia, y vamos a ponerlo. Teoh, Vamos a hr slash chat. Yo d Está bien, así. Ahora necesitamos agarrar gráfico I D. Pero es muy sencillo. Podemos conseguirlo usando tacos, Paramus Hook usa programas. A partir de aquí obtendremos gráfico I d React router. Vamos a moverlo a la cima. Y para esta referencia de almacenamiento, entonces especificaremos deja a un niño. Entonces vamos a verter un nombre de archivo y con el fin de llegar al nombre aleatorio podemos poner simplemente fecha de vez en cuando, digamos solla file nombre oscuro para que sea más o menos aleatorizado. De acuerdo, entonces que tu Plourde, vamos a verter puerto y en realidad podemos usar este archivo de bloque que tenemos de los objetos de archivo . Funcionará. OK, así que esto es casi todo. Pero para este archivo, quiero especificar el control de efectivo. Heather, con el fin de cobrarlo dentro de nuestro navegador para puerto, vamos a especificar el segundo perímetro. Va a ser objeto apagado, hizo un dato. Entonces aquí vamos a especificar control de efectivo y vamos a hacer lo siguiente Así va a ser público y luego marca la edad. Tenemos que especificar aquí, Max, edad en segundos. Entonces, especifiquemos tres días en segundos. Entonces pongámoslo para fortalecer la elación de viaje. Y ahora hagamos nuestra lógica. Entonces primero, vamos a conseguir una hora en segundos, que es 3600. Entonces vamos a multiplicar por 24 para conseguir un día en segundos y luego multiplicados por tres para conseguir tres días en segundos. Ok, bien. Justo después de eso. En realidad, no olvides regresar de estas función de devolución de llamada. Entonces vamos a conseguir lo siguiente. Entonces vamos a poner una const unas instantáneas de Pourde, unas instantáneas de Pourde que vamos a llamar esperar promesa punto Todos aplauden promesas. Por lo que se suben archivos de una hora. Recibiremos un array off aplauden instantáneas. Entonces, como recuerdas conseguir tu archivo l four subido para que el público esté disponible, ya sabes, también es una promesa que necesitamos llamar a Gedo y bajar el aura. Entonces es una promesa. Por lo que nuevamente terminaremos con otra área de promesas. Por eso, de nuevo, necesitamos mapear un nuevo conjunto de promesas. Por eso Digamos que van a ser promesas de forma. Y aquí vamos a llamar aplauden snapshots dot map Y desde aquí vamos a recibir playera de encaje de ritmo, y esta playera de broche nos dará la siguiente. Entonces vamos a devolver un objeto el cual va a ser tipo de contenido snap shore tipo de contenido de metadatos . Entonces tendremos nombre, que se va a arrancar. Shore nombre de punto de datos meta. Va a ser nombre de archivo subido, nombre de archivo, y luego el tuyo va a ser un peso podemos agarrar snap short dot puerta de referencia get No cargue Europa así. Entonces estos van a ser nuestros datos que vamos a almacenar dentro de base de datos ahora a esta calle promesas vamos a crear nuevos valiosos, que vamos a nombrar archivos. Entonces vamos a llamar a una promesa de peso hija todas en forma de promesas, y yo tendría nuestros archivos que necesitamos decir a nuestra base de datos. Entonces para eso dentro de la cirugía de índice, sí, vamos a crear una nueva función que manejaremos en el próximo video para salir. Solo llamémoslo con anticipación. Entonces desde utilería aquí, vamos a recibir una función después de un Plourde, y esto después de subir gestionará los archivos cargados y los dijo a la base de datos. Entonces vamos a llamar, esperar después de un Plourde y por disfunción, pasaremos nuestros archivos de esta estructura. Entonces después de esa llamada de vuelta, vamos a poner está cargando a falso. Y también vamos a cerrar así nuestra ventana móvil. Y en caso de que tengamos algún error vamos a llamar dicho se está cargando. Y luego vamos a alertar mejor puerta con mensaje de punto de error. Está bien, Así que esto es todo para este video. Desafortunadamente, todavía no podemos probarlo. Podemos, pero solo subirá archivos a este almacén. Entonces en el siguiente video, vamos a seguir trabajando en eso. Y vamos a crear esto después de la función de subida. Pero en cuanto a ahora, cometamos nuestros cambios y terminemos el video. Así que ponte en todo y luego te comprometas. Creado accesorio, fondo con un componente flotador. Está bien, nos vemos en el siguiente. 138. Almacenar archivos subidos en la base de Database: parte 2: Hola ahí. En este video, definiremos después de la función de subida que mencionamos en el video anterior Vamos a navegar a Index Togs Inside Bottom Folder y aquí en la parte inferior derecha antes de definir el marcado. Vamos a crear después de un Pourde envuelto en función de devolución de llamada de uso. Y también, vamos a especificarlo hasta dependencias como vacías cada Así que vamos a pasar esto después de un Plourde por adelantado . Teoh Apego Bt y mortal. Y esto después de subir recibe archivos que necesitamos verter dentro de un debate para recordar este apego golpeando Moto tiene su propio estado de carga, y este es Onley dentro de modelo. Pero adentro en exulto. Sí, también tenemos estado de carga esta vez para la entrada real. Entonces justo antes de hacer cualquier operación en la base de datos, llamemos también dicho, es aplaudir a verdadero dentro de índice togs. De acuerdo, entonces, lo mismo que para on sent click. Tenemos que definir una operación atómica, así que vamos a crear actualizaciones como un objeto vacío. Y vamos a copiar esta lógica para Digamos, cuatro datos de mensajes por aquí y esta tecla de empuje ahora porque tenemos múltiples archivos que necesitamos subir y este archivo está a la velocidad que vamos a llamar a archivos para que cada uno mire Cada archivo dentro este derecho recibirá archivo. Y por cada archivo obtenemos un mensaje pobre yo d Y además, vamos a definir los datos de los mensajes. Entonces vamos a atrapar ser esta lógica desde en enviar Haga clic y ponerlo para cada archivo. Por lo que armar mensaje. Y en lugar de texto, vamos a especificar archivo y para archivo vamos a especificar archivo objeto que creamos dentro del modelo BT adjunto, que es este objeto. De acuerdo, ahora tenemos mensaje I d Tenemos actualizaciones con datos de mensaje. Se ve bonito. Ahora tenemos que superar también si me lujuria mensaje como lo hacemos por aquí, así que dentro en algunos click es bastante fácil. No obstante, ahora que tenemos, digamos que este objeto actualiza poblado con estos datos, ¿cómo podemos agarrar el último mensaje? Si bien en realidad es bastante fácil, sólo toma algún tiempo entender la lógica. Entonces primero agarraremos la última idea del mensaje, que va a ser las claves de punto de objeto de las actualizaciones y luego de esta matriz fuera, digamos idea de mensajes. Vamos a reventar el último elemento que va a ser el último mensaje. Yo OK, entonces vamos a poner actualizaciones, habitaciones, chat I d. último mensaje. Y en lugar de datos de mensajes, vamos a llamar a actualizaciones último mensaje idee. Y para mensaje I d Vamos a especificar el último mensaje. Yo d Muy bien, Y entonces vamos a copiar esto. Intenta atrapar a bloque desde aquí, y vamos a ponerlo justo aquí. Y vamos a convertir esta función a cualquier cosa. Función. Por lo que una base de datos ref actualiza las actualizaciones. Vale, Said está bajando No necesitamos en pobres y se ve bien ahora, vamos a especificar en realidad array de dependencia es con chat I D y perfil y ahora estamos listos para probarlo. Ahora, no volvamos a la APP. Déjame hacer clic en subir archivos. Voy a seleccionar todos estos archivos que abrir. Entonces los voy a enviar a Chad y puedo ver mensajes vacíos. No obstante, si miramos dentro de base de datos, puedo ver cuatro mensajes nuevos y hemos archivado, como, conteo creado en tenemos autor. Y si abrimos archivo, podemos tener contenido, tipo, nombre y euro referencia a nuestro almacenamiento. Entonces esto es todo. Y en realidad funcionó. Felicidades en el siguiente video. Vamos a mostrar todos los archivos que hemos subido. Pero por ahora, vengamos en nuestros cambios. Olvidemos todo. Consigue commit y, digamos almacenar archivos aplaudidos a D Data Maze. Está bien, nos vemos en el siguiente. 139. Mostrar y descargar archivos subidos - Parte 3: Hey allá, en este video, vamos a mostrar todos fuera de nuestros archivos subidos. Vamos, Vamos a navegar de nuevo al código y vamos a abrir mensaje Bytom componente el lugar donde se renderizan nuestros elementos. Y aquí en la parte inferior en lugar de esta sartén con solo texto dentro, vamos a poner renderizado condicional. Pero primero, vamos a agarrar no sólo texto para mensaje, sino también, digamos archivo Ahora, dentro de esta diferente, somos capaces de hacer renderizado condicional. Entonces si tenemos texto dentro de nuestro mensaje en Lee, entonces mostraremos mensaje fiscal. Porque si tenemos archivo dentro de nuestro mensaje, entonces vamos a crear una función personalizada para renderizar archivos. Entonces vamos a nombrarlo, renderizar mensaje de archivo y adentro, vamos a pasar nuestro archivo, luego aquí en la parte superior de este componente, vamos a definir esta función, renderizar mensaje archivado para que reciba archivo y esta función, por defecto nos devolverá solo un enlace. Y dentro de este enlace, vamos a verter descarga nombre de punto de archivo. Si nuestro archivo no es una imagen y para un treff, vamos a verter file door europe. Está bien, bien. Ahora bien, si nuestro archivo es una imagen, almacenamos el tipo de contenido dentro de la base de datos para que podamos comprobar contra esta propiedad. Entonces si el tipo de contenido de archivo incluye imagen, entonces vamos a devolver el elemento dif Dentro de este def, vamos a verter una imagen como botón. Entonces cuando hacemos clic en él, abrimos la ventana de Moto. Y también tendremos esta vista inferior original para llevarnos al otro grifo y ver el tamaño completo. Entonces para este día, si vamos a especificar nombre de clase fuera de altura a cualquiera 20 y luego dentro, vamos a crear imagen Bt en Moto Y para esto en mayor entre modelo, vamos a pasar llagas, que se va a archivar. va a presentar su l y también nombre de archivo. Nombre de pato. Ahora realmente necesitamos crear esta imagen, belleza y Moto. Por lo que dentro de los mensajes. Vamos a crear nueva imagen de archivo VT en Moto Don't Yes. Y como siempre, vamos a echar un modelo. Pero vamos a envolverlo alrededor de reaccionar fragmento que dentro. En lugar de botón, vamos a poner en puerto off tipo imagen. Hace que esta importación actúe como un botón a pesar de que es una imagen. Entonces para alternativa, comenzar un especificar este archivo y para propiedades, vamos a especificar fuente y nombre de archivo. Entonces vamos a pobre fuente y nombre de archivo. Y como puedo ver, me equivoqué el nombre de archivo. Entonces déjame reemplazarlo por Imagen Bt en mortal. Y déjame renombrarlo con imagen Bt y Moto. De acuerdo, así que importa fuera de tipo imagen para fuente. Vamos a especificar fuente para en click. Vamos a especificar deuda abierta agarrará de uso estado modelo uso estado mortal por lo que está abierto, abierto y cerrado. Y también vamos a especificar si los nombres de clase por aquí, que es Max con off 100 max, esconden 100. Y con va a ser alfa. De acuerdo, bueno es así para la entrada. Esto es todo. Ahora definamos en realidad el móvil. Entonces vamos a pobre componente mortal que Mortal Door Heather, cuerpo y pie de página, cuerpo y pie de página. Entonces dentro de Heather, vamos a exhibir título mortal título modelo puerta y vamos a verter nombre de archivo dentro y también tratemos muertes. Y esto ahora dentro de la comida er vamos a especificar sólo un enlace a un grifo externo. Entonces vamos a poner un y un treff va a ser fuente y vamos a especificar alquitrán, ponernos en blanco para la nueva pestaña. Y también necesitamos precisar relación. Sin abridor, Sin rap Ferrer. Sí, así, supongo. Y este componente no es autocierre. Vamos a poner vista original en el interior y en el interior El cuerpo del modelo se iba a mostrar la imagen real. Entonces pongamos una etiqueta de imagen Dan, para llagas. Vamos a especificar llagas. Y para altura, digamos, 104 con, Digamos, también 100 fuera se va a dejar archivar. De acuerdo, ahora vamos a usar Esto está abierto para show property on height va a estar cerca y se ve OK ahora movamos esta importación al elemento de mensaje superior e interior. Importar este componente. Está bien, ahora echemos un vistazo. Si refresco la app, puedo ver no cargar archivo, nombre, descarga, nombre de archivo y puedo ver imágenes. Así que vamos a arreglar rápidamente dicho En lugar de estos corchetes, vamos ambos corchetes rizados. Y ahora echemos un vistazo para que tengamos haciendo cargar este archivo. No conozco este expediente. Si hacemos click en él, realidad empezaremos a descargar, y siempre veo que tenemos imágenes y cuando hacemos click en él. Tenemos esta vista original, y cuando hacemos click en ella, llegamos al nuevo grifo. Está bien, se ve bastante bien. No obstante, en los mensajes de lujuria, tenemos espacio vacío, así que lo arreglemos rápidamente. Navegemos hasta tu elemento de habitación y aquí dentro del texto del último mensaje. Pongamos lo siguiente. Entonces si no tenemos texto del último mensaje, entonces vamos a especificar el último mensaje punto nombre del archivo punto y eso es todo. Ahora echemos un vistazo. Tenemos nombre de archivo, Ok, Ok, Bastante cool. Y esto es básicamente. Ahora terminemos este video y comprometamos nuestros cambios. Olvidemos en todo. Consigue commit y digamos mostrar los archivos cargados de hecho. Nos vemos en el siguiente. 140. Grabar y subir mensajes de audio: parte 4: Hola. En este video, agregaremos una opción a un registro de usuario de Plourde directamente desde el navegador, por lo que podremos enviar mensajes de audio al chat. Vámonos. Entonces, ¿cómo van a manejar eso? Bueno, como ya tenemos el código para subir archivos, va a ser relativamente fácil. Sólo necesitamos encontrar una forma de grabar la voz del usuario. Por eso. Vamos a usar reaccionar, Mike Library. Se trata de una biblioteca que ofrece grabar la voz del usuario y luego visualizarla. Pero no vamos a usar esta opción de visualización. Sólo necesitamos el registro ing. Entonces déjame instalar esta biblioteca. Yo sólo voy a copiar este elogio que dentro más terminal. Yo lo voy a ejecutar. Y mientras se está ejecutando bajo la carpeta Bottom, vamos a crear nuevo nombre vegetal de archivo. Digamos mensaje de audio Bt en perrito esque. Por ahora va a ser sólo un Deve vacío. Y usemos esto dentro togs índice en la parte inferior. Entonces aquí, justo después del apego, Beat y Moto Vamos a usar rodeo mi dicho que eres TTN y también vamos a pasar después de subir porque vamos a subir mensajes de audio. Por lo que dentro de este componente, vamos a recibir después de subir. Y ahora definamos bien nuestro mercado. Va a ser casi así de lo mismo que para apego vencer a Moto. Entonces vamos a copiar el fondo del grupo de entrada desde aquí y pegarlo como nuestro mercado. Entonces vamos a importar botón grupo de importación para desrecortado. Tendremos nuestro propio manejador y vamos también a importar ícono. Y para yo podemos usar mi teléfono de cuervo? Está bien, bien. Ahora cómo podemos usar esto reacciona mi Kleiber Vamos al uso y el ejemplo. Entonces vamos a copiar la parte de importación y vamos a colocarla aquí en la parte superior. Entonces vamos a usar realmente el componente. Y echemos un vistazo a qué tipo de utilería necesitamos pasar. Entonces primero tenemos este registro y si me cierro sobre la propiedad, dicho demasiado cierto para empezar a grabar ing. Por lo que necesitamos que el Estado controle. Cuando queramos iniciar nuestro record ing, vamos a crear uno. Por lo que va a ser es récord en. Bullen está grabando por defecto, se establecerá en falso y vamos a pasar este estado para grabar propiedad que por nombre de clase , vamos a poner display none con el fin de mostrar cualquier reaccionar Mike Element, pero para usar su funcionalidad. Entonces, por una vez, detente. Este va a ser nuestro manejador cuando tengamos el registro ing y queremos subirlo. Entonces para eso, vamos a crear en un manejador de Plourde. Entonces pongámonos un Pourde y de antemano, lo pondremos en uso call back. Entonces por ahora, dejémoslo vacío así y en datos, no necesitamos ese, porque si nos desplazamos al uso, podemos ver que cuando los datos son opcionales, se llama cuando hay una orden de tos de canal disponible no necesitamos esa. No necesitamos color de tiro y color de fondo porque simplemente no mostramos este componente que también necesitamos pasar. O sea, teclea a ese componente para asegurar que recibamos al MP tres. Ex. Entonces pasemos tipo medio y luego apaciguemos audio MPA tres. De acuerdo, bien ahora, listo para salir. Entonces primero, definamos esto al hacer click. Entonces pongámoslo aquí en la tienda y vamos a optimizarlo con uso frío de nuevo de antemano porque simplemente llamaremos a Said está cargando y vamos a revertir nuestro valor Bullen por aquí. De acuerdo, bien ahora para subir, vamos a verterle la siguiente lógica. Va a ser correlativo Lee lo mismo que dentro de Attachment BT y Moto. Por lo que necesitaremos referenciar almacenamiento para poder copiar esta lógica desde aquí de lo que la pondremos dentro. Prueba a catch block aquí. Vamos a recibir snap corto y lejos esta promesa de aplaudo. Por lo que necesitamos convertirlo en una función de fregadero. Por lo tanto almacenamiento de referencia cheque, yo d. vamos a agarrar también chat I d. de uso Paramus Hook que para almacenamiento. Tenemos que importarlo de ISC firebase que para niño por nombre de archivo vamos a verternos. No este nombre de archivo, pero vamos a verter. Digamos audio que subrayar. Y luego abramos datos de interpolación de cadenas de vez en cuando al final, vamos a poner hija MP tres que para archivo blob. ¿ Qué necesitamos especificar para el archivo real si vamos a reaccionar? Mike on stop propiedad nos da este registro de datos. Entonces, debido a que usamos javascript, no tenemos ningún tipo. Y no podemos comprobar qué tipo de datos recibimos aquí. Pero lo que podemos hacer, en realidad podemos poner una función directamente aquí para conseguir la inteligencia. Por lo que recibimos estos datos por aquí. Y si pongo datos dar, puedo tener blub por aquí. Por lo que este se desarrolla tipo off object que podemos subir al almacenamiento firebase. Entonces vamos a poner datos perro control de efectivo golpe. Lo dejaremos como está ahora. Tenemos que especificar también el archivo real que vamos a poner dentro de la base de datos, no dentro del almacenamiento. Entonces vamos a agarrarlo desde aquí del apego, bt y modelo. Voy a copiar esta estructura de objetos. Entonces voy a crear un verdadero archivo y luego lo colocaré así. Entonces instantánea, datos de medios. Hugh R L Está bien, bien. Ahora necesitamos realmente Onley llamar después de un Plourde con matriz de archivos que queremos aplaudir porque sólo tenemos uno. Podemos poner solo una matriz vacía y luego poner nuestro archivo dentro. Entonces ahora tenemos algún tipo de tarifa, ¿verdad? Entonces para cualquier error, vamos a poner alerta Dar error error mensaje dot entonces para área de dependencias. Vamos a pasar después de subir y compartir I d. Está bien, Bien. Además, necesitamos definir algún ordenar un estado de carga. Entonces vamos a crear una nueva deuda viable. Dirá que está subiendo Que se diga es aplaudiendo. Entonces por defecto será falso Y llamaremos a esa función justo ante un Pourde y pondremos en verdadero. Entonces después de aplaudir o tal vez justo antes, vamos a decir, es aplaudir a falso y también en caso de cualquier arable también llamado set es aplaudir a falso. Por lo que ahora a entrada grupo Bt y podemos pasar deshabilitado Onley cuando está subiendo. Y también necesitamos notificar de alguna manera a nuestro usuario cuando hacemos el registro ing para que pueda entender eso. OK, tu voz está siendo grabada para eso. Vamos a sacar un nombre de clase condicional. Entonces si tenemos es registro ing, entonces vamos a especificar cualquier parpadeo mate. Y este es el nombre de la clase con la animación CSS que definí en una de las clases CSS . Entonces ahora se ve bien y todo lo demás se ve bien. Ahora en realidad podemos probar la funcionalidad. No lo he iniciado, así que déjame ejecutar el AB ahora podemos ver arrancando el servidor de desarrollo. De acuerdo, esperemos unos segundos hasta que se ejecute la APP. Está bien, está cargando. Ahora intentemos grabar ese. Entonces si presiono este botón, se puede ver que Ahora, aquí tengo Estos tab está usando su cámara. Hacemos micrófonos a este ícono. Y además, si no tuviera mi permiso para usar micrófono, me hubiera pedido eso. Y ahora me notifican que bien, mi voz es grabarla ahora mismo. Por lo que cuando hago clic en este botón una vez más, puedo ver que tengo una nueva subida de archivo por aquí. Y si vamos al almacenamiento de la base de fuego que a Chad que a nuestro Chad, yo d. Podemos tener todos nuestros expedientes. Y también mensaje de audio. De acuerdo, así que esto es todo. En el siguiente video, hablaremos de cómo podemos mostrar este mensaje de audio en el primero que se debilita directamente. Escucha este mensaje más antiguo dentro del navegador, Pero por ahora, cometamos nuestros cambios. Déjame llamar, llegar a todo, entonces quién sí se comprometió y vamos a especificar, opción añadida, una opción para grabar y unos archivos de audio pobres. Está bien, nos vemos en el siguiente. 141. Visualización y archivo de supresión: parte 5: Hola ahí. En este video, vamos a mostrar los registros de audio del usuario subidos. Y además, vamos a solucionar otro problema que surge cuando empezamos a lidiar con la subida de archivos. Nunca volvamos al código y vamos a abrir el elemento de mensaje el lugar donde renderizamos nuestro elemento. Por lo que aquí comprobamos contra el tiempo de archivo de contenido. Entonces agreguemos otra declaración si por aquí y vamos a revisar contra audios. Entonces vamos a pedir un expediente. El tipo de contenido incluye audio. Entonces si este es el caso, vamos a devolver un elemento de audio por lo que para este orden se podrá utilizar controles. Y también vamos a pobre elemento fuente va a ser un elemento de auto cierre. Se va a presentar fuente, Señor, tu L y tipo va a ser odio MPA tres. Y si esto no es compatible con el navegador, entonces vamos a mostrar tu navegador no soporta el elemento de audio. ¿ De acuerdo? Y saquemos de aquí a Odeon. Y ahora tenemos este año adelgazados elementos mediáticos de advertencia como un audio debe ser debe tener una pista para subtítulos. Eso está bien, pero no tenemos espinillas de policía. Por eso necesitamos desactivar esta advertencia. Hagamos eso. Guardémoslo y movamos este supresor. Ahora podemos ver que tenemos esta pista para que podamos tocarla. Puedo escuchar mi voz así que en realidad está funcionando y eso es todo para los mensajes de audio. Era bastante simple ahora mismo sobre otros problemas que surgen cuando empezamos a tratar con Philip O. Cuando estaba enfermo ID el último mensaje o uno de los mensajes con archivos que solo lo hacemos mensaje dentro de la base de datos. Pero los archivos del almacenamiento no se están diluyendo. A lo que quiero decir es que me deja intentar eliminar este mensaje más antiguo. Entonces si elimino ese que voy al almacenamiento, lo refresco. Puedo ver que es robar su para arreglar eso. Tenemos que arreglar nuestro abrigo. Por lo que volvamos al índice togs. Dentro de mensaje está el lugar donde entregamos. Nuestro mensaje es así que esto se maneja función pueblo. Por lo que aquí necesitamos de alguna manera también realizar delish de archivo en lo ponible que pueda hacer eso. Entonces dentro del elemento de mensaje cuando llamamos, vamos a encontrarlo. Cuando llamamos manejado, eliminado, pasamos mensaje i D. Sin embargo, no sabemos si este mensaje tiene un archivo o es solo un mensaje de texto. Por lo que vamos también pobre archivo a esta función de borrar mango. Entonces ahora sabemos que si hay algún archivo así dentro, cómo hasta la tapa también vamos a recibir archivo y justo después lo enll mensaje dentro base de datos. También podemos poner otro intento, atrapar bloque por aquí, y podemos hacer lo siguiente. Entonces si hemos archivado, entonces pondremos este bloque Try catch aquí dentro, y primero vamos a agarrar la referencia a ese archivo dentro de la historia de firebase para que podamos llamar , digamos, archivado en bruto. Podemos llamar lejos almacenamiento que referencia desde tu infierno y te devuelve promesa o no sé, parece que no tan referencia de tu L. Y entonces vamos a especificar archivo puerta, estás fuera. Entonces simplemente podemos llamar archivo ref puerta eneldo it Así que esto definitivamente va a ser una promesa. Y en caso de cualquier otro, vamos a especificar alerta alguna vez error de alerta. Y aquí hay un momento muy importante para atrapar. Imaginemos que entregamos el mensaje y esto falla. Entonces si esa falla. Esto intentará eliminar el mensaje. Entonces para asegurarse de que si esto falla, el siguiente código también fallará. Tenemos que regresar de estos bloqueos de captura siempre que tengamos un error. Por lo que ahora tenemos esto un sumidero en una función esperada ningún valor de retorno. En realidad podemos suprimir el de nuevo el sí, Lind advertencia para todo el archivo. Y ahora se ve bien. Por lo que primero eliminemos manualmente este mensaje de olor de que lo grabamos. Y si trato de dilatar el último mensaje por aquí, si he dilatado mensaje ha sido borrado. Y si miras dentro de mi base de datos, tengo dos imágenes. Pero si me refresco ahora, sólo tengo uno. Por lo que todo fue arreglado con éxito. De acuerdo, ahora cometamos nuestros cambios. Consigamos todo, luego consigamos commits. Digamos que los mensajes de audio mostrados y arregle el archivo delish en cuando el mensaje se está entregando. Está bien. Perfecto. Nos vemos en el siguiente. 142. Feed de chat en grupo por fechas: Hey ahi en este video móvil mensajes de chat grupal por fecha, lo que podremos dividir chat fit en mensajes relacionados con la fecha. Muy bien, nunca volvamos al código y veamos cómo vamos a acercarnos a eso. Entonces, en primer lugar, necesitamos algún tipo de función que agrupe nuestros mensajes por fechas. Entonces vamos a crear uno. Abramos ayudantes togs. Y aquí en la parte inferior, vamos a crear nueva función que quién nombrará grupo compra Recibirá una matriz como primer argumento, y luego va a recibir la función clave de agrupación. Va a ser una espalda fría y déjame explicar cómo vamos a usar a esta chica por función. Entonces lo vamos a llamar así. El primer argumento vamos a pasar mensajes, array y luego agrupar. La función clave es una devolución de llamada que recibirá un elemento fuera de esta matriz. Entonces en nuestro ítem de mensaje de caso, entonces lo que sea que regresemos de esta devolución de llamada va a ser nuestra clave de agrupación. Entonces en nuestro caso, es fecha. Entonces vamos a convertir mensaje I término creado en algo como esto. Después ha crecido por, nos va a devolver un objeto donde cada clave va a ser esta clave de agrupación que regresamos de esta llamada de vuelta. Entonces si regresamos fecha que se va a agrupar mensajes de Estados Unidos por fecha. Entonces digamos algo así como tenemos fecha como esta y luego tendremos array off mensajes relacionados con esta fecha y así sucesivamente, y así uno. De acuerdo, supongo que eso está claro. Ahora vamos a crear esa función. Déjame poco común, papá, y vamos a usar array dot reduce para que no reduzca, recibe una llamada de vuelta. Y segundo argumento es el valor inicial del estado. Entonces va a ser sólo un objeto. Y para el co back primer argumento es acumulador vamos a usar Let's a result y luego el valor actual ítem actual simplemente yendo al ítem bien desde cada iteración vamos a devolver resultado y luego vamos a realizar lo siguiente Primero, vamos a verter la clave de agrupación valiosa, y llamaremos a la función clave de agrupación y pasaremos la perspicacia de elemento. Entonces, de esa manera, podremos acceder al elemento de mensaje dentro de esta devolución de llamada. Está bien, bien. Ahora vamos a revisar contra el Valle Nulo o valle inexistente. Entonces si la propiedad clave de agrupación de resultados no existe, entonces la inicializaremos como de otra manera. Recibiremos una advertencia o un error si tratamos de realizar algo sobre objeto no existente . Entonces vamos a poner clave de agrupación de resultados y luego la citaremos como una matriz vacía. Muy bien, entonces, si esto sí existe, entonces vamos a poner resultado agrupación de puntos clave push item actual y esto es todo. Ahora somos capaces de usarlo. Abramos mensajes, indexemos togs, y encontremos el lugar donde renderizamos los mensajes. Entonces en este momento es solo esta función de mapa por aquí. De hecho, copiémoslo y dilatémoslo. Y en lugar de esta función de mapa, vamos a nuestros propios mensajes de render funcionales personalizados. La muerte creará. Por lo que aquí vamos fueron const mensajes grander y va a ser una función, y dentro de ella pondrá este mapa de mensajes. Pero vamos a comentarlo por ahora. Y aquí llamaremos grupo por Así que vamos a pobres grupos const. Entonces llamaremos grupo por. Pasaremos mensajes nuestro estado del primer argumento y luego agruparemos en función clave para que reciba el elemento de mensaje y grupo de problemas por fechas. Por lo que en para especificar elemento creado en pero anuncio creado como para recordar, es sólo una marca de tiempo de base de datos. No es un objeto de fecha que podamos usar o mostrar dentro de JavaScript. Entonces vamos a convertirlo en objeto tardío, y luego nos conformamos en esta fecha objeto con cadena hasta la fecha. Muy bien, así que ahora tenemos grupos y necesitamos crear elementos que empujaremos y mostraremos dentro de J seis dentro de perro. Entonces vamos a crear claves de objeto, luego especificar grupos y para cada método. Entonces lo que está pasando aquí que vamos a recorrer cada fecha, cada clave dentro de los grupos objeto. Entonces vamos a tener una cita por aquí y por todos los días. En primer lugar, vamos a crear array de elementos. Entonces que se deje que los artículos vamos a modificar. Y para estos artículos, primero, vamos a empujar nuestro primer elemento. Eso va a ser una cita. Elemento L I. Entonces vamos a crear nuevo l I dentro rebelde fecha mostrada y nombre de clase va a ser margen centro de texto no sería uno y pad y también necesitamos especificar clave, que va a ser fecha, y es único dentro de esto. Grupos arreglan. Está bien. Ahora, necesitamos también empujar todos los mensajes relacionados con esta fecha en particular para que podamos crear nuevos mensajes. Todos y vamos a usar esta función de mapa por aquí. Entonces vamos a verter fecha de grupos para acceder a todos los mensajes relacionados con esta fecha en particular que actualmente estamos iterando. Entonces grupo ST dot map y vamos a mapear cada mensaje a elemento del mensaje desde aquí. Vamos a copiarlo y vamos a eliminarlo. Ya no lo necesitamos, así que lo vamos a mapear así, y al final, simplemente vamos a llamar a artículos gato oscurecido y luego mensajes, acuerdo? Y esto es en realidad. Y al final de esta función, vamos a devolver artículos, y se renderizarán a los tontos. Por lo que dice que los artículos nunca se resignan. Está bien, así que pongamos const, Vamos a guardarlo y echemos un vistazo. Ahora bien, si navegamos, no veo ningún mensaje. Permítanme probar una sintaxis ligeramente diferente. Ahora, si estamos frescos bien, podemos tener Aikens. De acuerdo, así que usemos esa en lugar de lata gato. Entonces lo que estamos haciendo aquí con difundir todos nuestros artículos en push. Por lo que son tratados como argumentos separados para empujar. Entonces en lugar de pasar mensajes de cower así, los pasamos así. 12345 Muy bien, entonces esto es lo que hace este operador de spread en este caso. De acuerdo, así que ahora tenemos, digamos, jueves 18 de junio si saludo. Ahora tengo 19 de junio por lo que realmente funciona. Y ahora tenemos esta agrupación bastante poco ordenada. Está bien, así que esto es todo. Y supongo que hemos terminado aquí. Terminemos nuestro video. Vamos a verter, conseguir todo, luego te pones un poco. Y vamos a especificar los mensajes agrupados por fechas para el efecto. Nos vemos en el siguiente. 143. Paginado y control de la posición per: Hola. En este video manejaremos la paginación dentro del chat. Ahora mismo cargamos todos los mensajes de la base de datos y esto no es realmente bueno. Por lo que en este video, vamos a cifrar eso y también vamos a solucionar este problema. Cuando actualizamos la página o cambiamos entre chats, no nos desplazamos a la parte inferior. Vámonos. Entonces la pregunta es ¿cómo puedes manejar la paginación en firebase? Bueno, hay algunos enfoques y el más común es que te vuelvas a suscribir Teoh nuevos mensajes de chat Cada vez que cargamos una nueva porción, Este es el enfoque que tomamos. Podemos tomar otro enfoque Teoh bajar sólo mensajes antiguos sobre el Señor inicial y luego suscribirse a nuevas actualizaciones. No obstante, este enfoque no funcionará porque si cargamos mensajes antiguos en Lee una vez y actualizamos uno de los mensajes, no se actualizará en tiempo real. Entonces este no es nuestro caso. Queremos actualizar todos los mensajes y todos deben ser en tiempo real. Por eso vamos a usar el primer acercamiento. Por lo que vamos a navegar al índice dot gs dentro de los mensajes y aquí en la parte superior, primero vamos a especificar nuestro tamaño para la página. Que sea tamaño de página apagado 15. Ahora necesitamos crear permaneció dentro de nuestro componente que represente nuestro límite actual. Entonces vamos a crear límite y establecer límite. Y por defecto, este estado será igual al tamaño de página. Está bien, bien. Ahora veamos dentro. Usa el hecho donde buscamos nuestros mensajes. Entonces tenemos este mensaje, ref, que no está limitado a este uso de hecho o componente días porque no utiliza ningún valor interno, por lo que podemos moverlo de manera segura aquí a la parte superior. Muy bien, Bien. Ahora tendremos que funciones aquí para atraer mensaje inicial y a Lord más mensajes al hacer clic en el botón de la parte superior. Entonces vamos a crear una nueva función sólo para compartir la lógica. Entonces aquí, antes de usar el hecho creamos una nueva función Lord messages y la envolveremos en uso Llama nuevo con anticipación para optimizarla. Y pongamos esta lógica aquí dentro de los mensajes de Lord. Y no borren esta suscripción. Es realmente importante darse de baja del hecho del usuario también. Entonces ahora tenemos a este niño RG por aquí como dependencia vamos a editar. Y siempre que te recargues mensajes, también nos aseguramos de que nos dimos de baja de los mensajes antiguos y nos suscribimos a las nuevas actualizaciones . Entonces aquí, justo antes de que obtengamos nuestros nuevos datos, vamos a llamar al mensaje ref dot off para darse de baja de las actualizaciones anteriores. Muy bien, ahora, dentro de este hecho de usuario, vamos a llamar mensajes de Lord, y vamos a especificar dentro de matriz de dependencias, y vamos a eliminar el chat I D. porque a partir de ahora, no es Salir de este efecto de uso. Está bien, bien. Ahora, ¿qué pasa con el límite? ¿ Y qué pasa con la funcionalidad Lord More? Vamos a gran nueva función junto a los mensajes de Lord que vamos a llamar a bajar más también deja rapero en uso volver a llamar. ¿ Y qué debemos poner dentro? Simplemente llamaremos mensajes de Señor con nuestro límite que tenemos dentro del estado. Entonces ahora necesitamos especificar los mensajes de Lord y limitar como dependencias y eso es todo. Eso es todo por esa función. Ahora, dentro de lord mensajes recibimos límite que queremos aumentar cuando hacemos click en Lord More. Por lo que aquí tendremos un límite. Y cuando intentamos nuevos mensajes para nuestro constructor de consultas, podemos especificar esta propiedad llamada limite to last. Entonces el número off notas a incluir en esta consulta y vamos a especificar límite o porque ya tenemos audible limitado declarado llamémoslo límite a no ser y pasémoslo aquí. Y en caso de que si no tenemos valor en absoluto legis pacificar tamaño de página Solo un pequeño fullback por aquí. Y cada vez que bajamos una nueva porción de los mensajes, necesitamos aumentar nuestro límite actual. ¿ Verdad? Por lo que cuando hacemos clic en este botón, nuestro siguiente límite va a ser nuestro límite actual más tamaño de página. Entonces aquí vamos a verter límite establecido, y luego vamos a hacer referencia al tamaño de página anterior, anterior más. De acuerdo, ahora necesitamos definir este fondo, y necesitamos poner este manejador de descarga más para este fondo. Entonces aquí en el fondo donde renderizamos nuestro marcado, vamos a poner la siguiente lógica. Entonces tenemos que preguntar si tenemos mensajes y mensajes Don't La longitud es mayor o igual al tamaño de nuestra página Onley. Entonces mostraremos un otro l I elemento dentro pondremos botón y dentro de fondo vamos a verter más abajo. Ahora agreguemos algunos nombres de clase. Entonces para este aliado, vamos a poner un margen de centro de impuestos dos primeros y margen abajo a también. Y también para en click, vamos a especificar propia más baja. Y también lo pondremos con el color verde, no rojo. No me gusta esa. Muy bien, Bien. Ahora echemos un vistazo a lo que hicimos. Si abrimos nuestra página ahora mismo, como yo, refrescarla una vez más. podemos ver ahora tenemos Onley 15 mensajes y si hago clic en cargar más, se puede ver que se han cargado más mensajes. Entonces esto es todo. Esto es lo que está pasando. Por lo que ahora mismo cuando cargamos nuestra página inicialmente tenemos nuestra suscripción inicial Onley tamaño de cuatro páginas, que actualmente es de 15. Entonces cuando hacemos clic en Lord More, esto se está lanzando con nuestro límite actual que aumentamos y se va a a 30 y nos vamos a dar de baja de estas actualizaciones y nos vamos a suscribir a nuevas actualizaciones. Entonces esto es lo que está sucediendo en segundo plano. Muy bien, ahora, ahora, ¿qué pasa con nuestro pergamino? Como puedes ver, está bastante roto porque cuando bajamos nuevos mensajes. Nosotros los frijoles se arrastraban a la cima cada vez. Esto no es bueno, por lo que necesitamos controlarlo de alguna manera. Bueno, para eso, necesitamos usar referencia para obtener el elemento real para poder manipular su posesión de pergamino . Para eso, Vamos a crear nueva referencia por aquí. Y va a ser, digamos, auto ref con gancho ref usado. Ok, entonces vamos a pasar esa referencia a nuestra eran tú l elemento. Por lo que la referencia va a ser autoreferencia. Y ahora empecemos a manipularlo. Entonces, en primer lugar, para nuestro efecto de uso inicial, cuando cargamos nuestra página inicialmente, queremos desplazarnos hasta el fondo, ¿ verdad? Entonces aquí vamos a especificar nota y vamos a hacer referencia auto ref dot current para obtener la referencia real a nuestro elemento. Y aquí, justo después de cargar nuestros mensajes, podemos verter nodo scroll top igual a ninguna altura de desplazamiento. Y va a la cosa de Lloyd. Yo siempre tengo el problema con este enfoque es que debido a que este Señor mensajes es una operación asíncrona y esto es sincrónico por lo que esto podría ejecutarse antes de que este Señor mensajes haya hecho con su pensamiento por lo que es importante ponerlo como cualquier pensamiento operación para eso. Lo envolveremos alrededor de tiempo establecido nuestro y vamos a especificar algo así como 200 milisegundos. Entonces de esta manera, nos aseguramos de que esto se está ejecutando en Lee cuando los mensajes de Lord se hacen y cuando todos los elementos que estamos tratando de mostrar se muestran en la página. Está bien, así que ahora echemos un vistazo. Si refresco la página, puedo ver que no pensé, pero estoy scroll hasta el fondo. Sí, puedo ver esto. Un pequeño retraso apagado 200 milisegundos. Pero eso está bien, ¿verdad? No hay nada de malo en eso. No obstante, ahora me están desplazando hacia abajo. ¿ De acuerdo? Nuestro siguiente enfoque es mantener realmente esta posición de cuervo cuando hacemos clic en Lord More. Entonces no estamos garabateados hasta la cima. Bueno, para eso dentro de Señor, más en primer lugar. Volvamos a referirnos a nuestros elementos actuales. Por lo que tenga en cuenta va a ser auto ref actual. Entonces antes de hacer clic en Lord More, necesitamos conocer la altura anterior de nuestro elemento de desplazamiento fuera de nuestra posición de desplazamiento. Entonces cuando bajamos nuevos elementos, obtenemos la nueva altura y luego podemos restar esos valores. Entonces aquí vamos a verter vieja altura valiosa. Y aquí vamos a verter altura de desplazamiento de nodo. Muy bien, entonces, después de debajo de nuestros mensajes, vamos a llamar a dicho Time out otra vez para que nuestra operación vuelva a ser asincrónica. Con tiempo fuera 200 milisegundos y luego dentro, vamos a especificar nueva altura, que va a ser no altura de desplazamiento. Y luego vamos a especificar nodo scroll top es igual a nueva altura menos altura vieja. Está bien, ahora, vamos a guardarlo. Quitemos este ritmo y echemos un vistazo. Ahora nos desplazamos al fondo, y cuando hago clic en Lord More, se puede ver que esta posición de cuervo se conserva. Está bien, así que se ve bastante bien. ¿ Cómo estás? Hay un caso más que manejar. Siempre que escribo algo en el chat, digamos hola. Se puede ver que no soy scroll hasta el fondo. Entonces tenemos que arreglar eso. E idealmente, queremos que sea algo como esto. Entonces si hemos garabateado más del 50% dentro de nuestro chat y escribimos algo, queremos ser desplazados hasta el fondo. No obstante, digamos si buscamos algunos mensajes antiguos. Y si escribimos algo o alguien más tipos, no queremos que se desplace hasta el fondo. Derecho Para eso, tenemos que definir también nuestra lógica Por esta razón. Aquí en la parte superior, vamos a crear una nueva función que nombrará seguro desplazamiento hacia abajo, y recibirá esta corriente de autorref. Entonces aquí vamos a poner nota, y aquí vamos a poner la siguiente lógica. Y también podemos especificar segundo argumento, que va a ser digamos umbral, que va a ser, digamos, 30% de por defecto. De acuerdo, entonces aquí vamos a calcular el porcentaje de nuestra posición de desplazamiento, y luego vamos a devolver la comparación. Vamos a darle la vuelta al toro en valor si nuestro porcentaje que definimos aquí es mayor que umbral que se pacificó. De acuerdo, entonces el porcentaje va a tener la siguiente lógica. Entonces, en primer lugar, vamos a multiplicar nuestro valor por 100%. Entonces vamos a dividir este valor sin mineros de altura de desplazamiento, sin altura de cliente, y esta lógica nos dará el porcentaje. Y como espalda completa, vamos a proporcionar sólo cero. ¿ De acuerdo? Entonces ahora podemos usar la disfunción para detectar si realmente necesitamos desplazarnos al fondo si odiamos el umbral. De acuerdo, entonces déjame copiar esto y vayamos a los mensajes de Lord y escuchemos lo que haremos. Empezamos a pacificar const otra vez. Digamos nodo y luego nos vamos a referir auto Ralf corriente oscura y qué va a hacer. pondremos justo después de establecer los mensajes. Entonces vamos a preguntar si debemos desplazarnos al fondo con nuestro nodo actual y mantengamos umbral como 30% Onley. Entonces no vamos a verter ninguna charla de pergamino y luego no hay altura de desplazamiento, ¿de acuerdo? Y en realidad, ¿sabes qué? Podemos poner esta nota en la parte superior para reutilizarla. OK, así. Ahora echemos un vistazo. Entonces déjame cargar más mensajes. Déjame desplazarme hasta la parte superior. Y ahora mismo, cuando escribo un nuevo mensaje, no estoy rodado al fondo. No obstante, si me desplazo más del 30% y si tipo caminata, puedo ver que estoy siendo scroll hasta el fondo. Entonces esto es un chicos. Es así como podemos manejar la paginación. Y así es como podemos controlar nuestra posición de desplazamiento. De acuerdo, supongo que no fue demasiado confuso porque para mí, a primera vista, waas Muy bien, así que cometamos nuestros cambios. Vamos a tirar para conseguir todo, conseguir commit y digamos en ello paginación y controlar la posición de desplazamiento. Perfecto. Nos vemos en el siguiente. 144. Implementación de Firebase Hosting: Hey, Como por ahora, nuestra aplicación de chat tiene toda la funcionalidad básica implementada. Lo único que falta son las notificaciones de tiempo en realidad. Para implementarlo, se tienen que hacer algunas cosas para despedir Proyecto Ways. Vamos a hablar de ello en la siguiente sección y para terminar estos sección con una buena nota, vamos a desplegar nuestro Chad actual usando firebase hosting base abierta Fire Base que Jason ubicó en la carpeta de la carretera al objeto hosting. Vamos a agregar gancho pre desplegado NPM ejecutar proyecto de ley construido El script se define en el paquete Jason. Ahora es tan fácil como escribir Firebase deploy desde la terminal. Este comando desplegará todas las partes del proyecto que fueron detectadas en la base de fuego el Jason . Estos incluyen reglas de base de datos y hosting. También podríamos desplegar partes separadas ejecutando firebase deploy, Dash Dash solo hospedando después de que termine el Commander, podemos ir al anfitrión en la sección dentro de Firebase Dashboard. Aquí podemos encontrar un euro para acceder a nuestra app de Bab. Habrá dos de ellos. Usa el que más te guste ambos funcionarán. Firebase también realiza un seguimiento de las implementaciones y podemos retroceder a cualquier registro de implementación en historial de lanzamientos Vamos a abrir la app para ver que realmente funciona. Agradable. Se ve bien y bastante rápido. No obstante, Facebook Logan fallará si alguien aparte de nosotros intentará iniciar sesión para arreglarlo. Vayamos a Google y Time. Facebook por muertes, Haga clic en mis abdominales que seleccionar aplicación de chat. Vaya a la configuración básica para la política de privacidad. Euro Copy sitio web Cupole y pegado aquí que desplazarse a la parte inferior. Da click en y plataforma y asegúrate de haber añadido tu rapsodia. Haga clic en guardar Cambios que ir al tablero y giró esto que en la parte superior para asegurarse de que muestra la vida. Y eso es todo. Muy bien, este fue el último video de esta sección. En la siguiente sección, vamos a hablar de backend de chimenea personalizado con funciones de nube. Nos vemos ahí. 145. Plan de proyecto de Firebase: Hola. Esta sección está dedicada a las notificaciones en tiempo real y funciones en la nube. Las notificaciones en tiempo real se implementan con mensajería en la nube basada en fuego que requieren respaldo personalizado . Y por eso utilizamos funciones en la nube. Para que podamos continuar, necesitamos actualizar nuestro proyecto de carrera de incendios a la planta blaze con recientes actualizaciones de precios de firebase a partir de ahora, llamadas funciones requieren plan blaze ya que el uso de algunos de los servicios en la nube de Google que no son disponible en gratis plan Platt Blaze se pasa. Te vas moto y no significa que debamos pagar. Todos estos servicios se dan con realmente generales. Predicador, confía en mí con las cuotas dadas, nunca calentarás la frontera pagadora pero depende totalmente de ti. Por favor, lea más sobre blaze Plan on fire base pricing page para operar al plan blaze. Ir al panel de control de firebase, Haga clic en actualizar en la parte inferior y seleccione plan de blaze. Si aún no tienes fuente de pago, Google te pedirá los detalles de tu auto y después de eso actualizará el proyecto para comprobar qué plan? Corte de usos del proyecto. Basta con mirar el fondo izquierdo. Ahora todos nos dicen en el siguiente video, vamos a hablar de funciones en la nube y menos arquitecturas de servidor. Nos vemos allí 146. ¿Qué son los Serverless: Oye, hablemos menos del servidor. Suena bastante guay, ¿verdad? Para entender mejor lo que es sin servidor. Vamos a re sabios cómo funciona el servidor normal de nuevo en es servidores desplegados en ejecución y esperando conexiones. Aquí no pasa nada, pero aquí hay una pequeña desventaja. No tenemos usuarios, mientras servidor sigue Ron y los recursos de consumo. No muy beneficioso es que serviría a menos que un servidor que se despliega se ejecute bajo demanda. O es mejor decir que el código se ejecuta bajo demanda en Lee cuando es necesario. Si el acceso de nadie en decodificación, no se ejecuta. La mayoría de las veces, se presenta el enfoque Serverless. Servidor informal Últimas funciones. Cada función se despliega por separado y tiene su propio contexto de ejecución. Cuando se despliega la función, tiene su propio Http, su l que se utiliza para investigar la función. Tu L es como un gatillo para ejecutar el código. No hay ningún servidor real al final. Sólo hay código que se ejecuta bajo demanda. Debajo del capó, toda la magia está alimentada por contenedores Docker. Un contenedor es un paquete pequeño como elated off Lo que se pone dentro con máquinas virtuales, todo el sistema operativo está tan euforado con contenedores en Lee. El contenido que se pone dentro de él permite ejecutar múltiples contenedores en un solo sistema operativo . Toda función desplegada, con todo su código y dependencias se pone dentro de su propio contenedor que trans bajo demanda cuando se activa la función. Pero los contenedores también deben ser alojados y desplegados. Samba derecho Esto es controlado y administrado por proveedor de la nube. No necesitamos preocuparnos por eso. Y debido a que todo está gestionado por nosotros, tampoco necesitamos preocuparnos por escalar y mantenimiento. Los campañas desplegados escalarán automáticamente en función de las invocaciones de número fuera. Ahora sabemos que cada servidor menos función es pieza separada de código que se ejecuta en Lee cuando realmente se utiliza una función no es consciente de otra cómo somos capaces de compartir algún código a través de múltiples funciones. Por ejemplo, todas las funciones desplegadas deben acceder a alguna variable compartida u otra función. Depende y proveedor de nube con fuego. El código de funciones de Base Cloud se comparte en el ámbito global. Cuáles son los inconvenientes que el principal se llama inicio cuando el código no se ejecuta por un tiempo, ese contenedor de funciones se va a dormir. Cuando alguien intenta acceder al contenedor de código gira hacia arriba y lleva algún tiempo. A esto se le llama arranque en frío. Depende de múltiples factores. Por ejemplo, ¿qué tan grande es la decodificación para esa función? O cuántas dependencias atestigua después de ejecutar un código, el contenedor permanece en estado calentado por un tiempo y espera las solicitudes posteriores. Significa que el arranque en frío no se llevará a cabo. Pero después de algún tiempo, cuando no haya solicitudes en absoluto, contenedor se irá a dormir, y la próxima vez veremos el frío. Iniciar con servidor Menos. El precio se evalúa en función de las invocaciones de número fuera y de cuánto tiempo deseaba cada ejecución. Las funciones de nube de Firebase tienen arrancar gratis a millones de invocaciones gratuitas al mes, y esto es increíble. Ahora sabemos lo que está sirviendo menos y cuáles son las funciones en la nube. Espero que te haya gustado. Nos vemos en el siguiente. 147. Messaging en la nube: ¿cómo está todo conectado?: Hola. Hablemos de la mensajería en la nube de Firebase. ¿ Qué es eso exactamente? La mensajería en la nube nos permite lijar notificaciones en tiempo real a los usuarios. Si estamos en la página web, podemos obtener una notificación pop up de la nada. Si el sitio web y el navegador están cerrados, podemos obtener notificaciones nativas del sistema operativo en el móvil. Será una notificación como si fuera una aplicación móvil real bajo el capó, utiliza navegadores, Boucher, Boucher, FBI y el principal inconveniente de que tiene un soporte limitado y navegadores y algunos sistemas operativos . De acuerdo, déjame explicar el ciclo completo de la mensajería en la nube de firebase. Por lo que cada usuario tiene un token único que representa el dispositivo de los usuarios. Obtenemos este token del usuario y lo almacenamos dentro de la base de datos. Este token no debe estar disponible públicamente más adelante. Fire Base usará ese token para enviar una notificación al dispositivo de los usuarios para recibir notificación en el dispositivo. Vamos a montar un trabajador de servicio. Como recuerdas. Se trata de un script intermediario que se sienta dentro del navegador. Los trabajadores de los colonos suelen ser utilizados para propagar a algunas tareas de fondo. Las notificaciones son un buen ejemplo. Interceptará el mensaje entrante y el uso de navegadores. Bush ap I Se mostrará la notificación. De hecho. Ahora ya sabes cómo funciona. En el siguiente video, llegaremos a la cabra. Nos vemos que 148. Almacenamiento de toques de dispositivo en la base de dispositivo en la base de datos: Hey allá en este video, vamos a conseguir el token de dispositivo de los usuarios y almacenarlo en la base de datos. Pero antes de hacer eso en el video anterior, cuando desplegamos nuestra aplicación, obtenemos este efectivo hosting y además modificamos fuego basado en Jesús. Entonces, antes que nada, abramos y seamos ignorados. Y agreguemos dot firebase fuller para conseguir ignorar para asegurarnos de que no rastreamos esta carpeta . Muy bien, Bien. Ahora vamos a comprometer nuestros cambios y digamos, get commit, get commit, Despliegue la aplicación Perfect Now Ya abrí documentación para mensajería en la nube de firebase, y a partir de aquí necesitamos obtener credenciales Web. Y estos son clave de identificación voluntaria del servidor de aplicaciones. Por lo que esta es la clave vapid que necesitamos conseguir para configurar Firebase Cloud doméstica en primer lugar. Entonces vamos al panel de control que vamos a acercarnos a la configuración y luego a la mensajería en la nube desde aquí. En Configuración web, necesitamos generar nuevo par de claves. Por lo que vamos a dar click en este fondo y esta es nuestra clave vapid que vamos a utilizar. Es público por lo que podemos compartirlo. O sea, no lo compartas, pero está disponible públicamente Ahora vamos a nuestra aplicación. En realidad lo ejecutemos. Y luego vamos a Oakland Firebase Doggy s en primer lugar. Entonces aquí vamos a importar mensajería firebase, luego aquí en la parte inferior. Vamos a comprobar si es compatible con el navegador, para que podamos anti exportación const. Mensajería. Entonces vamos a preguntar si Firebase murió. Se admite la mensajería. Entonces si lo es, entonces vamos a llamar a app dot messaging para obtener la instancia. De lo contrario, se dirá que no entonces en la parte inferior. Tenemos que configurarlo para usar esta clave vapid que generamos. Entonces preguntemos si tenemos mensajes soportados. Entonces si tenemos la instancia, entonces vamos a llamar a mensajería, usar clave vapid pública. Esto lo puedes encontrar en su documentación. Muy bien, entonces vamos a copiar esta llave y vamos a pegarla aquí. Está bien, bien. Y necesitamos configurar un manejador para nuestros mensajes. Entonces déjame explicarte. Los mensajes o notificaciones están disponibles en dos tipos, primer plano y mensajes de fondo. Los mensajes de fondo son aquellos mensajes que se manejan cuando se cierra nuestra pestaña o navegador y los mensajes de primer plano son aquellos que son visibles cuando estamos desplazando por el sitio web, por lo que los mensajes de primer plano deben manejarse dentro de la aplicación. Los mensajes de fondo son manejados por el trabajador de servicio. Entonces aquí vamos a llamar a la mensajería en mensaje y para el conocimiento es mantenerlo tal como está. Datos consulados. Por lo que estas suscripciones, digamos, manejarán nuestros mensajes de primer plano. De acuerdo, digamos con y ahora vamos a llegar a decodificar para guardar dispositivo de usuario en la base de datos. Entonces vamos a abrir el contexto de perfil. Entonces este no es el lugar cuando buscamos en nuestro usuario. Entonces aquí, necesitamos manejarlo. Y si vuelvo a abrir documentación, puedo ver que puedo copiar esta pieza de código para obtener el token de registro actual. Entonces, en realidad, ¿sabes qué? Déjame copiar esto y vamos a pegar en algún lugar por aquí en la parte inferior. Pero primero, tenemos que asegurarnos de que exista mensajería. Entonces vamos a comprobar si existe mensajería, que importé de MISC firebase. Entonces si este es el caso, entonces voy a ritmo este código, y tal vez me dejas convertirlo en un sumidero espera índice. Entonces déjame poner un trío de captura por aquí. Entonces voy a verter mensajes, conseguir token. Por lo que será const Tokcan. Digamos que el token actual es igual a esperar mensajes. Obtener token y vamos a convertir a función de frente. Está bien, Perfecto. Entonces vamos a comprobar si existe el token actual. Dejemos copiar todo eso. Entonces si existe este token actual, entonces vamos a hacer algunas cosas. Ni siquiera lo necesitamos que en caso de error apagado vamos a mostrar dentro de la consola y ante nuestro ocurrido. Está bien, bien. Ahora hagámoslo. Todo eso. Y aquí vamos. Ahora necesitamos almacenar este token dentro de la base de datos. Para eso, podemos llamar lejos formas de datos Dar graph y el lugar o la ruta que vamos a iniciar nuestros tokens equivale a dos tokens FC m slash token I d y luego slash usuario i d Así que con estos enfoques, podemos consultar fácilmente ahogan ins en la espalda. Y bien, así que van a ser fichas FC m. Entonces vamos a por token actual, y de niño, vamos a verter fuera usuario de puerta de objeto. I d I d. apagado usuario actual. Está bien. Perfecto. Ahora desplazando la documentación hacia abajo, puedo ver que el token también se puede refrescar, por lo que también necesitamos manejar eso para esto. Vamos a copiar este pedazo de código y ponerlo junto a este strike Hedge block así y este propio token refrescar es una suscripción. Por lo que significa que tenemos que dar de baja de ella en el futuro para eso de nuevo. Aquí, Anti chuleta dentro de ti el hecho Vamos pobre Joe puede refrescar Soy sub, ¿de acuerdo? Y vamos a verter en ficha o fresco a eso terrible. Y aquí en la parte inferior cuando cierremos la sesión, vamos a comprobar si broma y refrescar en sub, Entonces vamos a llamar a esta función a dos meses más de ella y el mismo móvil hacer en la función de limpieza. Está bien, bien. Ahora lo que tenemos que hacer aquí, convertímonos también a cualquier cosa. Función. Entonces aquí, vamos a poner un canto, y en realidad, la lógica será algo igual, para que fácilmente podamos copiarlo y colocarlo aquí así. Está bien, bien. Ahora estamos listos para ir, pero debido a que acertamos a la base de datos al camino que no agregamos a las reglas de seguridad, necesitamos modificarlas ligeramente. Entonces vamos a la base de datos, luego vamos a las reglas. Y aquí, vamos a añadir una nueva entrada. Entonces déjame copiar el estado del disco así, entonces voy a reemplazar el estado con tokens FC M. Entonces conseguiremos una broma. Y yo D y móvil permiten Leer nunca. Porque no queremos permitir que nadie acceda a nuestros tokens. Y por derecho Onley el usuario, que actualmente es Sinan es capaz de almacenar su propio token. Correcto, Así que vamos a comprobar si el nuevo valor de punto de datos. Entonces si el usuario i d que escribimos a este token, t igual a dos de ti. Yo d. Está bien. Bien. Ahora vamos a saborear y se ve bien. Ahora vamos a nuestra solicitud. Vamos a refrescarnos. De acuerdo, ahora perfecto. Abramos consejo para ver si no tenemos advertencias. De acuerdo, Conseguimos editor Verdadero. Estaban toking, no pudieron registrar al trabajador del servicio por defecto. De acuerdo, así que esto es bueno. Y debido a que aún no tenemos ningún trabajador de servicio, conseguimos entrar este. Esto es bueno, pero este error dice que funciona. Ahora cometamos nuestros cambios. Y en el siguiente video, vamos a configurar trabajador de servicio. Entonces vamos a verter, ponernos en todo y vamos a comprobar qué tipo de otros recibir. Declaración inesperada del consejo. Está bien, esto es bueno. Vamos a comprometernos. Y digamos editar la mensajería firebase y almacenar el token de usuario de ahogo en el db. Perfecto. Nos vemos en el siguiente 149. Adición de trabajador de servicio de servicio: Hola ahí. En este video, seguiremos configurando la mensajería en la nube de firebase y vamos a configurar un trabajador de servicios . Por lo que ya navegé a la documentación firebase y luego elijo los mensajes recibidos. Entonces en esta sección, puedo leer y se puede leer más sobre los mensajes de primer plano y segundo plano, pero nos interesa el archivo del trabajador de servicio. Entonces no nos olvidemos de nuestro código y lo primero que haremos pero realmente atraparemos las reglas que creamos en el video anterior con tokens FC M. Entonces vamos a copiar todo eso, luego vamos a la base de datos tontos Jason y Pega todos ellos aquí ahora sobre trabajador de servicio. Entonces, como se puede ver, este es en realidad el código del trabajador de servicio. Vamos a llamarlo sea. Y dentro de Carpeta pública, vamos a crear nuevo archivo firebase servicio de mensajería Worker doggy s. por lo que debe coincidir con este nombre de archivo. Es muy importante porque este es el nombre que será reconocido por base de fuego como decadencia . Ahora peguemos todo lo que tenemos aquí y en realidad podemos hacerlo. Todos estos comentarios así, entonces no necesitamos el mensaje. Increíble. Y además, desactivemos es pelusa para todo el archivo. Está bien, bien. Ahora para estos conflictos aquí, necesitamos inicializar nuestro conflicto que inicializamos dentro de nuestra aplicación. Entonces abramos la base de fuego Dodgy. Sí. Y vamos a copiar este objeto y ponerlo aquí para que inicialice firebase sdk dentro del trabajador de servicio. Y también debemos asegurarnos de que la versión que importamos aquí debe coincidir con nuestra versión sdk dentro del paquete Jason. Entonces vamos a abrirla. Y aquí tenemos 7.15 ahora esperemos en trabajador de servicio, tiene 7.15. Eso está bien Ahora vamos a guardarlo. Y ya corro el ab. Ahora volvamos a la APP. Déjame refrescarlo Ahora, Como puedes ver dentro del cabildo, no tengo advertencias en absoluto, Así que vamos a navegar a nuestra base de datos. Y como pueden ver ahora tengo fichas FC m aquí. Si lo abro, tengo este bastante a lo largo usuario d token y que tengo mi usuario i d y esto es en realidad antes de que cometamos nuestros cambios porque usamos un nuevo trabajador de servicio con mensajería en la nube firebase dentro. En realidad no necesitamos trabajador de servicio creando app de reaccionar. Entonces lo que me propuse hacer en el futuro, vamos a necesitar esto. ¿ Es valioso el anfitrión local? Entonces vamos a copiarlo desde aquí y ponerlo dentro de ayudantes así y vamos a exportar desde aquí . Ahora vamos a guardarlo Y vamos a eliminar servicio, archivo de trabajador y dentro después de GS o dentro de índice togs. Eliminemos estos comentarios. Ya no los necesitamos, y ahora podemos comprometer nuestros cambios. Entonces otra vez, vamos a abordar ponernos en todo y luego nos comprometamos. Y digamos en ello, trabajador de servicio en eso decía Perfecto, Nos vemos en el siguiente. 150. Configuración de las funciones de la nube y veros de node node y Version de node y el gestor (NVM) (NVM): Hola ahí. En este video, configuraremos funciones en la nube dentro de nuestro proyecto firebase. Vámonos. Volvamos a navegar al código V s. Abramos terminal. Y aquí sólo necesitamos teclear base de fuego. Necesitas funciones. Entonces nos incitará con unas preguntas. Vamos a golpear. Sí. Entonces elijamos Javascript. Entonces cuatro años Lind, vamos a seleccionar. Sí, e instalemos todas las dependencias. Está bien, bien. Si miramos dentro de funciones, se han creado algunos archivos para nosotros. Sí, Lynn RC con conflicto ya predefinido. No lo mortificemos. Entonces tenemos que conseguir ignorar Índice Dodgy s y empaquetados Jason, Así index dot gs en funciones de nube es un punto de entrada de índice togs. Archivo RealAge para exportar funciones de nube separadas que se desplegarán por separado. Está bien, dentro de la bicicleta. Es Jason. Aquí podemos encontrar algunas dependencias. Entonces sí, Lind y también firebase admin y funciones. Estos dos paquetes nos permiten acceder a la base de fuego desde el backend y también podemos encontrar algunos scripts. Definir por aquí sirven para realmente Ron funciones emulador en entorno local que tenemos algo llamado Shell y es firebase shell para realmente probar nuestras funciones y también entonces tenemos logs y otras cosas como implementar y iniciar script . Ya que vamos a probar nuestras funciones localmente, le propuse a Ron servir en lugar de Shell. Entonces pongámoslo servir y vamos a guardar nuestro archivo. Y también porque vamos a acceder a nuestra base de datos localmente y por base de incendios. Se reconoce como un entorno no confiable. Necesitamos proporcionar alguna autenticación o credencial de ordenación para que funcione. Entonces para eso necesitamos navegar de nuevo a nuestro panel de control. Entonces necesitamos ir a la configuración del proyecto e ir a las cuentas de servicio desde aquí. Tenemos que no bajar nueva clave privada. Entonces vamos a crear uno. Nos dará un expediente Jason. Abrámoslo y vamos a copiar el contenido. Volvamos al código. Y aquí dentro de funciones, vamos a crear nueva cuenta de servicio de archivos, hace Jason y pongamos todo lo que tenemos Koppett. Ahora, por favor asegúrate de agregar este archivo para que te ignoren. Esto es muy importante. Por lo que aquí agregamos cuenta de servicio que Jason, por lo que este archivo no debe estar disponible públicamente. Esto es sólo para nosotros, para el desarrollo local. Está bien, bien. Ahora si volvemos a abrir las cuentas de servicio aquí podemos encontrar un pequeño fragmento de código, así que vamos a copiarlo y vamos a abrir índice punto Js. Por lo que aquí tenemos funciones en la parte superior y funciones firebase. Vamos a colocarlo así. Y también atrapemos al admin y reemplacemos VARS con constante Bueno. Ahora necesitamos especificar una ruta de cuenta de servicio que es ésta y luego ponerla dentro, admin inicializar en cuando usamos funciones de nube. Antes de que podamos hacer algo, necesitamos inicializar firebase admin como decayed y para el desarrollo local, necesitamos inicializarlo así para poder acceder a los datos reales con el fin de acceder a la base de datos riel . Esto es básicamente así. No obstante, hay una cosa importante para las funciones de nube. Si abrimos paquete del Jason aquí confinamos motores. Nodo ocho especifican. El caso es que las funciones de la nube de firebase son compatibles en Lee dos no versiones GS, ya sea ocho o 10 y recientemente dejaron totalmente de soporte para la versión ocho del nodo por completo. Por lo que ahora las funciones de la nube de firebase están básicamente disponibles sin versión SIG. Ted, este podría ser un pequeño problema ahora mismo. No utilizamos la versión 12 de Js y necesitamos gestionar de alguna manera nuestras funciones en la nube con la versión de nota 10. Para eso, necesitamos cambiar entre diferentes versiones de know Jess. Para eso, necesitamos no bajar el software adicional, que se llama No Version manager. Este es un software que nos permite cambiar entre diferentes versiones apagadas. No hay GS en un solo comando. Muy bien, vamos a Google. Y luego vamos a escribir y VM que Vamos a anotar administrador de versiones en el get hop. Y este repositorio está en lee para los usuarios de Linux y Mac OS. Por favor, siga este tutorial e instale y VM en su máquina. Si vienes de ventanas hacia abajo, desplázate hacia abajo hasta dos ventanas parte Y aquí nos limitamos envidia M para windows y luego dar click en descargar. Ahora terminarás en esta página, luego haz clic en N V M. Configurar archivo zip y luego instalar envidia M. Vale, Después de tener envidia M instalado en tu máquina, ve a tu terminal y luego solo llama a envidia versión M o envidia em. Versión Dash. Está bien. Y la versión de VM después de eso con el fin de instalar No, solo la versión 10. Déjame ejecutar mi comando y la lista M. Enumerará todas mis versiones no GS instaladas localmente. Por lo que para las funciones en la nube, necesitamos algunos fuera de la 10ª versión. Entonces llamemos envidia M instalar y luego 10.20 punto uno. Después de esa versión de nota, Manager instalará y principalmente todo para ti. No necesitas preocuparte por nada, luego para apagar entre diferentes versiones. No GS debilita, simplemente escriba y VM utilizada. Digamos 8 16 a. Y ahora estoy usando esta versión off note. Y si tipeo y VM uso 10.20 punto uno ahora estoy usando esta versión. Esto es todo. Es así como podemos gestionar las diferentes versiones fuera. No Gs, por favor asegúrate de tener este instalado porque de lo contrario, si no tienes ninguna versión 10 instalada localmente, no podremos ejecutar tus funciones localmente. Está bien, ahora, para terminar este video, cometamos nuestros cambios. Entonces olvidemos todo. Entonces consigue commit y digamos, configura funciones de nube con envidia. M perfecto. Nos vemos en el siguiente 151. Las notificaciones fluidez en nuestra aplicación: tipos de funciones de nuez la nube: hola En este video, quiero explicar rápidamente el flujo para enviar una notificación. En primer lugar, en los datos, por favor. Por cada habitación habrá otro campo llamado usuarios del FC M. Será en Rafe ideas de usuario las que recibirán notificaciones en la parte posterior. Y crearemos una función en la nube que llamará desde nuestra aplicación de chat como administrador dos definiciones, junto con solicitud enviaremos desde nombre poderoso y mensaje de notificación. Después, usando Crew my D, obtendremos identificaciones de usuario que reciban notificaciones usando sus ideas. Consultaremos sus tokens de dispositivo y luego enviaremos una notificación usando tokens de los antes empezar. Solo quiero señalar que existen tres tipos diferentes de funciones en la nube. Gullible a petición y disparadores a petición funciones tienen su propio euro enviar en una solicitud. Usar el euro es la única forma de acceder a la función. Call a intestinal Las funciones también tienen su propio neuronal, pero en el cliente firebase como decadencia, el que usamos en el navegador, hay un método especial para llamar a este tipo de funciones por su nombre, no por euro y también callable funciones de análisis y validación automáticamente tokens JWT del usuario. Firebase usa tokens JWT para autorizar a los usuarios, y no los tratamos directamente. Las funciones de disparo no tienen su propio neuronal, y responden en Lee dos eventos de documentos de base de datos diferentes como propio crear en actualización y propiedad de Illit. Podríamos especificar que cada vez que se crea un documento en esa ruta, esta función de nube se ejecutará tener alguna vez. En nuestro caso, sólo necesitamos un tipo de funciones crédulos, fáciles de acceder y usuarios fuera de su protesta para nosotros. Ahora, tienes mejor idea de lo que vamos a hacer. Nos vemos en el siguiente. 152. Crear una función de FCM en la nube: santificado. En este video, crearemos nuestra propia función arada para enviar mensajes de notificación. Vámonos. En primer lugar, vamos a abrir estos códigos que vamos a ir a funciones, índice togs y, vamos poco comunes, esta función de nube de pliegue que ya nos encontramos bastante. Guardemos este archivo. Entonces vamos a abrir terminal y navegar a la carpeta Functions en paquetes y tenemos NPM run start script. Entonces, corrámoslo y echemos un vistazo ¿qué va a pasar? Entonces, en primer lugar, no bajará todos los emuladores necesarios para diferentes servicios fuera de chimenea, como AM un líder para funciones. Eso está bien. Después de eso, verá este tipo de mensajes, y dirá que la primera función http se inicializa y está disponible en estos Ural y también tenemos este host local para 1000 funciones. Entonces vamos a copiar ese. Vamos al navegador y abramos este rural para comprobar qué va a pasar. Esto es como un tablero donde controlamos qué servicios desarrollamos localmente. Entonces en este momento sólo tenemos funciones. Soy líder y está disponible en estos puerto, y si vamos a troncos, podemos ver eso. Ahora tenemos una función http inicializada para que podamos copiar este año. L Y entonces podemos acceder a esta función. Y de respuesta, podemos ver hola desde la base de fuego. Esto es lo que tenemos dentro de esta función. Desafiante. Entonces esto es todo. Esto es lo que funciona nuestra nube. Pero ahora mismo, detengamos al emulador. No lo necesitamos. Y también eliminemos este tipo de funciones porque esta es una de dos veces y no necesitamos. Pero antes de hacer esto, sólo quiero señalar que cada función que exportó desde oci indexado sí, se trata como una función. Entonces qué va a hacer dentro de funciones. Vamos a crear nueva carpeta llamada ser C Inside. Vamos a verter nuevo archivo FC M perrito s A partir de aquí, vamos a exportar nuestra función y luego lo vamos a volver a exportar desde aquí. De acuerdo, así que vamos a mantenerlo tal como está. A lo mejor vamos a nombrar esta función de antemano. Digamos que mande al FC M. Y por ahora, vamos a comentarlo. Está bien. Bien. Ahora dentro del FC M. Importar funciones y admin. Y desde aquí, vamos a exportar nuestra primera función. Lo nombrará. Exportaciones exportaciones arena fc M. Así que necesitamos llamar a funciones. Entonces necesitamos verter https, y luego tenemos que poner de guardia. Por lo que esta función que viene por defecto fue bajo petición tipo de función que quieren, pero vamos a crear va a estar de guardia. De acuerdo, entonces esto en función fría recibe dos argumentos. Entonces si sin embargo, podemos ver datos y contactos, Entonces los datos son estos datos que pasamos junto con solicitud y podemos acceder a él dentro de contexto contiene alguna información de contexto como información de usuario y usuario JWT Token. Ve. Ahora. Ya que exportamos esta función desde el archivo FC M Dodgy s, podemos importar dentro de índice togs. Por lo que aquí podemos teclear Const. Déjame tipo f igual requieren de lo que vamos a referir carpeta fuente y luego f c M g s. entonces a partir de la disfunción, exportamos y FC M Ahora necesitamos destruirla. Y luego de este índice togs, vamos a volver a exportarlo así. Por lo que exporta arena FC M se va a enviar FC M función que obtenemos del archivo FC M. Está bien. Y tenemos esta advertencia diciendo esperaba una línea vacía. De acuerdo, déjame ponerlo así. Ahora necesitamos escribir nuestra función. De acuerdo, Así que antes que nada, necesitamos comprobar si nuestro usuario está presente. Si la persona que intenta acceder a esta función realmente está autenticada, ya tenemos usuario analizado y validado por este tipo de función, que es culpable. Ahora solo necesitamos verificar si el usuario está realmente analizado. Entonces si el usuario no es analizado, significa que el usuario no está presente. De acuerdo, para eso podemos crear una función de ayudante aquí que vamos a nombrar check si off check. Si se autentican dentro de esta función, vamos a pasar contexto, y luego lo vamos a llamar desde nuestra función así. Comprueba si se apaga y luego vamos a pasar contexto. Y a partir de este cheque si está apagado, haremos el siguiente. Si context dot auth tiene off object dentro. Entonces si vierto contexto y luego dar aquí confinado apagado. Entonces si este contexto no apagado es indefinido. Entonces si no tenemos ningún objeto off, entonces vamos a lanzar nuevas funciones. Dar Https. Error Http Así que este es Paschall. Digamos que la sintaxis que dará un error para declinar nuestra razón estará en autenticado y mensaje va a ser. Tienes que estar inscrito. Está bien, bien. Aquí estamos hechos. Nuestro siguiente paso es acceder a los datos que obtenemos de la solicitud. Está disponible bajo este objeto de datos. Por aquí. Ya está analizado para nosotros. Entonces a partir de este objeto, podemos destructor próximos valores, vamos a lijar Chad. D entonces título fuera de la habitación o deja el título del mensaje. Y luego también, vamos a mandar mensaje. Está bien, bien. Ahora necesitamos obtener los datos de nuestra habitación usando esta silla. Yo d o habitación yo d Bien, entonces desde aquí, vamos a tener instantánea de habitación. Y ahora necesitamos acceder. Nuestra base de datos se puede acceder desde el entorno del servidor usando firebase admin como decayed. Entonces aquí en la parte superior, pongamos nueva base de datos viable, y luego vamos a llamar a base de datos de administración. uso de la base de datos desde el entorno del servidor es muy similar a cómo accedemos desde declinado. De acuerdo, entonces ahora podemos llamar a base de datos, luego ponemos áspero, y ahora necesitamos acceder desde los datos. Por lo que hemos pasado habitaciones que slash cuarto I D. Que va a ser chat, i d. En nuestro caso, devuelve la promesa. Por eso podemos encerrar por aquí. Y también pongamos un fregadero para que sea válido. Entonces después de que tengamos referencia, llamamos una vez y luego nos pobre valor. Ahora obtenemos instantánea de habitación, Entonces podemos hacer la simple comprobación si existe room snap shore. Entonces si no existe, entonces vamos a devolver False. Está bien. A partir de esta función, enviará solo solicitud falsa de vuelta al cliente. Cuando llamaremos a esta función, entonces necesitamos obtener datos de habitación para obtener un ID de usuario. Entonces para eso, vamos a los datos de la sala de audiencias y luego vamos a grabar desde el valor de la puerta instantánea. Ahora, necesitamos comprobar si nuestro usuario actual es un administrador. Por lo que en realidad podemos enviar el mensaje porque esta función puede ser llamada por algún usuario dentro Chad. Pero este usuario no es un administrador, y por lo tanto este usuario no es capaz de enviar el mensaje. Está bien para eso, necesitamos comprobar contra el usuario admite así primero, Como recuerdas, todos nuestros a raza en los trabajos se almacenan son objetos, por lo que necesitamos transformarlos a matrices javascript normales para eso Dentro ayudantes. Ya tenemos disfunción transformada a array. Vamos a copiarlo desde aquí y ponerlo aquí en la parte inferior. Ahora podemos crear una función auxiliar para comprobar si el usuario realmente puede enviar el mensaje. Podemos volver a crear una nueva función en la parte inferior, y la vamos a nombrar. Comprueba si se permite. Y nuevamente recibirá contexto. Y también recibirá el chat admite. Está bien. Y aquí haremos casi el mismo cheque. Entonces si no, digamos Chad, agrega Mons dog incluye context off, y luego tú i d Así que si el usuario que está tratando de acceder a esta función de nube está en lista fuera de Chad Adnan. Entonces si este no es el caso, entonces de nuevo vamos a mandar exactamente el mismo mensaje por aquí. Y tal vez vamos a decir acceso restringido. Muy bien, Bien. Ahora podemos llamar a esta función por aquí. Compruebe si se permite, pasaremos el contexto dentro, junto con la transformación a matriz de datos de sala admite. Está bien, perfecto. Nuestro siguiente paso es obtener ideas de usuario reales que recibirán notificaciones. Por eso. Vamos a poner a nuevos usuarios valiosos del FC M. Y de nuevo, vamos a llamar a transformar a matriz, y vamos a poner datos de habitación a los usuarios del FC M. De acuerdo, ahora obtendremos todos los tokens de usuario. Por eso. Propuse volver a crear una función auxiliar que llamaremos a obtener tokens de usuario. Entonces, vayamos al fondo. Y aquí vamos a crear una nueva función, obtener tokens de usuario para que reciba usuario I D. Y él obtendrá todos los tokens de usuario. Entonces vamos a llamar a nuestras formas de datos, y vamos a recibir tokens de usuario. Snapshot. De acuerdo, entonces va a ser función inocente y la lógica será la siguiente. Entonces vamos a llamar a base de datos ref. Entonces vamos a hacer referencia a tokens FC M. Entonces vamos a ordenar por valor, y vamos a poner igual al usuario I d. Y luego para obtener fichas viejas, llamaremos una vez valor. Está bien, Perfecto. Y que no se olvide de poner una espera al principio. Ahora tenemos usuario token snap shirt. Entonces si no tenemos tokens de usuario, snap short tiene Niños. Entonces aquí comprobamos si realmente este usuario en particular tiene algún token. Si este usuario no tiene ningún Niño, significa que este usuario no tiene ningún token. Por lo que simplemente podemos devolver un vacío, Eric. Entonces si el usuario tiene tokens, entonces llamamos claves de punto de objeto y luego valor de punto de instantánea del token del usuario. Porque, como recuerdan, almacenamos nuestro A raise en los ferrocarriles como objetos. Y al llamar a este objeto de claves, obtenemos los tokens de usuario real. Está bien, bien. Ahora podemos llamar a esto get tokens de usuario desde nuestra función de nube y para papá, porque necesitamos obtener tokens de usuario para múltiples usuarios necesitamos usar Promise que todo para hacerlo lo más optimizado posible. Ok para eso Aquí, vamos a crear un nuevo usuario valioso. Fichas, promesas. Y lo que vamos a hacer. Vamos a mapear cada usuario del FC M. Lo vamos a mapear. Por lo que se va a mapear a cada usuario i d para que se prometan tokens de usuario. Y dentro de ella tendrá este usuario yo d. Ok, bien. Ahora vamos a recibir nuestro resultado. O digamos que vamos a recibir resultado de tokens de usuario y vamos a llamar, esperar promesa. No todos los tokens de usuario promete, pero la cosa es que la promesa de que todo nos devuelve una matriz fuera de resultados como ese y nuestros tokens de usuario promesas, por lo que cada promesa de obtener tokens de usuario nos devuelve una matriz fuera de tokens de usuario. Entonces de esta manera, terminaremos con una matriz anidada así. Por lo que para el primer usuario, tendremos estos tokens. Entonces, por segundo, podemos conseguir estos y así uno y demás. Entonces para evitar eso, necesitamos aplanar a nuestro Eric. Para eso, podemos llamar al método de reducción de punto disponible en una carrera y aplanar el área. Está bien. Para eso, vamos a llamar resultado de tokens de usuario luego reducido, por lo que recibirá una función de devolución de llamada. Y el segundo argumento es el valor inicial. Por lo que el pozo inicial va a ser una matriz vacía. Y esta doctrina usa primero es el valor acumulador, que va a ser, Digamos, acumulado, Filkins. Y segundo va a ser el valor actual, que es tokens de usuario. Por lo que esta función se ejecutará para cada tokens de usuario para cada elemento. OK, y aquí simplemente nos fusionaremos. Estos dos se borran usando el operador de spread. Entonces vamos a llamar tokens acumuladores, más tokens de usuario. Entonces de esta manera terminaremos con un plano y array donde cada token como es un valor normal . Está bien, vete Ahora. Sigamos adelante, entonces vamos a comprobar si tokens longitud de punto es igual a cero que regresará de esta función porque no tenemos ningún token para enviar dos. Y cómo la pregunta es que tenemos fichas, cómo podemos enviar nuestros mensajes para que podamos navegar al fuego por su documentación. Entonces esta la que tengo de videos anteriores. Pero si voy al entorno del servidor de la izquierda y luego construí solicitudes enviadas aquí, puedes encontrar múltiples maneras. ¿ Cómo puedo enviar un mensaje para especificar dispositivo? No obstante, sólo necesitamos uno que se envíe mensajes a múltiples dispositivos porque tenemos múltiples tokens y tenemos un mensaje que enviar. Entonces déjame solo copiar mensaje, en realidad, y lo voy a poner aquí, y lo voy a llamar mensaje F c M. Por lo que fui datos no se verá así porque cada mensaje también puede tener una estructura diferente . Puede tener este tipo de objeto con tema de datos y tokens tienen alguna vez Esto es Onley para notificaciones personalizadas. No necesitamos nada a medida. Necesitamos una notificación normal para eso. Necesitamos modificar ligeramente este objeto. Entonces en lugar de datos, vamos a pobre objeto de notificación dentro. Y este objeto de notificación tiene dos claves, que es título y también cuerpo, que es el mensaje de notificación real. Entonces para el cuerpo, vamos a ver pacificar mensaje que obtenemos del objeto de datos dentro de esta función de nube. Entonces pongamos mensaje. Y para título, podemos verter nuestro título personalizado, cual se va a titular que enviamos con solicitudes y también nombre de habitación. De acuerdo, así que vamos a pobre título de habitación. Entonces pongamos título y luego de nombre de puerta de datos. Entonces de esta manera tendremos título y de nombre junto a él. Pero pongamos tal vez nombre de la habitación en los alivios de padres para que se vea más estético. Está bien, vete. Ahora echemos un vistazo a cómo podemos enviar esto. Podemos usar admin dot messaging hecho, dicho multicast, y luego mensaje. Está bien, bien. Por lo que necesitamos usar la mensajería de punto admin. Vamos a crear disponible por aquí llamado Mensajería en. Llamemos a la mensajería de administración. Está bien. Perfecto. Ahora en realidad podemos copiar este código. Déjame copiar sólo la primera línea porque no vamos a usar las promesas en Texas. Usaremos un think away. Entonces déjame llamar a const admin messaging. Voy a reemplazarlo por mensajería, Entonces manda multi cast y vamos a enviar mensaje FC M, y lo vamos a poner en una veritable, que llamó Batch responde, y luego esperaremos este comando. Está bien, bien. Ahora lo que pasa es que los tokens pueden ser inválidos o los tokens pueden caducar porque, como recuerdas, el token de declinación se puede actualizar. Entonces cuando se actualiza el token, el token anterior ya no es válido. Entonces este es el caso cuando hemos fallado tokens. Por lo que en realidad podemos usar este fragmento de código para detectar qué tokens están fallando, y luego podemos entregarlos desde la base de datos. Déjame copiar este fragmento de código, y puedo llamarlo así, así tendremos muchas respuestas y comprobamos si mucho responde. El recuento de fallas es mayor que cero que por cada respuestas de bollos mantecosos. Miramos por encima de las respuestas y comprobamos si nuestras respuestas no tuvieron éxito. Entonces este es el caso. Todos hemos fallado tokens empujados a esta tasa de tokens fallidos. No obstante, queremos hacer algo con ellos. ¿ Verdad? Queremos borrar nuestra base de datos también. Para eso, saquemos estos tokens fallidos aquí a la parte superior, y haremos lo siguiente. Por lo que actualizaremos nuestros tokens fallidos. Con este empuje en el interior, retiraremos este candado cónsul. Y ahora que todos tenemos tokens fallidos, en realidad podemos llamar a nuestras formas de datos hasta que todos estos tokens aquí al final, vamos a crear una nueva matriz off promesas que vamos a ejecutar con punto de promesa todo nuevo porque podemos hasta que múltiples tokens de la base de datos. Para eso podemos crear quitar promesas valiosas. Y vamos a mapear cada token fallido para prometer tan fallido tokens dot map. Entonces tendremos token, y vamos a llamar borrador de punto de base de datos. Entonces vamos a llamar al FC M Jokinen que Tokcan y luego le quitamos la puerta. Está bien, Perfecto. Entonces de esta manera, terminaremos con un rayo apagado, quitaremos promesas, y al final de nuestra función de nube, podemos llamar retorno promesa pensamiento todo y lo vamos a echar de promesas y luego en caso off cualquier error podemos utilizar en realidad dot catch Syntex por aquí en lugar de un pensar esperar. Porque esta es nuestra última operación y parece más legible en este caso. Entonces en caso de cualquier otro, vamos a devolver error dot Mensaje. Está bien, Perfecto. Entonces esto es todo. Esta es nuestra función, y así es como la vamos a manejar. Supongo que eso es todo para este video. Y en el siguiente video, comenzaremos a actualizar a nuestro cliente. Vamos a probar esta función y lo que me propuse hacer. Como se puede ver en archivos. Aquí, te tenemos yo d. Bach. Añadamos este archivo para que nos ignoren. Tú yo o tal vez vamos a añadir todos los archivos de look para que te ignoren. No los necesitamos. Está bien, genial. Y tenemos esta advertencia diciendo que esperaba volver al valor. De acuerdo, tal vez en realidad podamos actualizar nuestro sí pelusa para poder poner un retorno consistente, consistente iba a ser cero. Está bien. Y parece que ya tenemos un lugar aquí. Pongámoslo a cero. Y entreguémoslo aquí para evitar este tipo de advertencias dentro de nuestro expediente y también para el Islam , Darcy, porque tenemos múltiples archivos es ling dentro de nuestro proyecto. Uno en la carpeta raíz y otro aquí. También queremos asegurarnos de que agregamos opción ruta igual a dos. Cierto. Por lo que ahora se reconoce por decodificación. Está bien, perfecto. Entonces por ahora estamos terminados. Comprometamos nuestros cambios. Por lo tanto, nunca volvamos a la carpeta raíz. Entonces llamemos, obtengamos todo y luego consigamos commit y digamos editar función de nube para enviar mensajes FC M . Perfecto. Nos vemos en el siguiente. 153. Arregla de la función de la nube: Hola ahí. En el video anterior, cuando creamos enviado función FC M Cloud, hice algunos errores ortográficos que quiero corregir en este video. El primer error subyace en los datos de la sala. Queremos obtener datos desde el valor de punto de instantánea de la habitación, así que vamos a arreglarlo. Teoh room snapshot dot value, luego segundo error está dentro de los usuarios de medio cm. Queremos transformar nuestros datos de usuarios de DAR FC M en lugar de usuario de FC M. Entonces si nos desplazamos hacia abajo hasta FC un objeto de mensaje aquí. Utilizamos tokens de registro, y este error proviene del ritmo de copia de la documentación de firebase. Entonces vamos a quitarlo y pongamos fichas y el mismo móvil hacer dentro de tokens fallan No empujes porque queremos asegurarnos de que obtenemos fichas de nuestros tokens, una violación. Entonces si nos desplazamos hacia abajo lo último será. Tienes que estar inscrito y eso es todo. Todo lo demás se ve bien. Ahora. Guardemos el archivo y comprometamos nuestros cambios. Olvidemos todo, luego consigamos commit y digamos corregir errores ortográficos. Perfecto CEO en el siguiente 154. Envío y reenvío de notificaciones con las funciones de la nube.: Hola ahí. En este video, vamos a trabajar con clientes y vamos a crear una ventana modelo a partir de la cual vamos a enviar una solicitud a nuestra función de nube y luego enviar una notificación a Absi. Um, usuarios. Vamos, Volvamos a navegar de nuevo al código B s. Y primero, vamos a abrir fuego Base Ducado s y vamos a importar paquete de funciones. Por lo que en la parte superior, voy a verter las funciones de corte de la base de fuego de importación. Ahora saludamos a una nueva instancia. Por lo que exportar funciones const app dar funciones. Y cuando abrió, Parenti dice que se puede ver una región por aquí. El asunto con las funciones de nube que están disponibles en múltiples regiones por defecto. Están disponibles en la región U. S Este. Para los usuarios de Europa, esto no es genial. Por eso necesitamos cambiar a la región de nuestra función. Para eso, vamos a navegar al FC M Dodgy s en el lugar donde creamos esta función. Y dentro de esta definición, vamos a sumar otra cadena fuera de una región y dentro de burbuja especificó que esta función se ejecutará en la región de Europa Oeste tres. Puedes especificar la región que quieras. OK, entonces Europa Oeste tres Y ahora cuando inicializamos esta instancia, necesitamos pasar a Europa Oeste tres para que funcione. Y también cuando usaremos esta instancia de funciones dentro de nuestro cliente, intentará acceder a la función de nube de rial que ya está desplegada. Pero para el desarrollo local, esto no es bueno. Es por eso que necesitamos aquí en la parte inferior checa Si actualmente estamos dentro del desarrollo local entonces usaremos funciones. Amma más tarde que corremos con MP Enron, iniciamos dentro de carpeta Funciones. Entonces aquí, si vamos a comprobar si es host local y es host local previamente en videos Lo exportamos de aquí extraemos Este es host local valioso del archivo de servicio creado por aplicación Creek React y ahora lo vamos a usar. De acuerdo, también lo es el anfitrión local. Vamos a importarlo. Entonces si este es el caso, entonces vamos a decir funciones, usar funciones. EmLeader y necesitamos precisar la Europa para eso. Vamos a la carpeta Funciones dentro de nuestra terminal. Y aquí vamos a jive y PM Ron arranca y vamos a ver la salida. Está bien. Como puede ver, nuestro emulador de funciones se está ejecutando en host local 5001. Por lo que necesitamos especificar aquí http que host local y 5001. Muy bien ahora, todos estamos dispuestos con nuestra s decaida. Ahora vamos a crear el Moto real. Entonces vamos a la ventana de chat Top. Y dentro de esta carpeta vamos a crear cualquier archivo que llamaremos enviado FC M Bt en Moto gs. Y en realidad vamos a copiar y pegar código de Vamos a navegar para crear sala Beat y Moto Así que vamos a llamar ser todo eso y colocarlo aquí. Ahora empecemos a reemplazar las cosas. Entonces, en primer lugar, vamos a renombrarlo para enviar FC M Bt y modelar y realmente vamos a usar este componente dentro índice togs dentro de la carpeta superior. Entonces aquí, en lugar de esto que hacer, vamos a preguntar si nuestro usuario es administrador, entonces por favor muéstranos. Enviar FC M Bt y Moto. Muy bien, Bien. Ahora empecemos a reemplazar componente. En primer lugar, vamos a revisar nuestro móvil para nuestro formulario, por lo que no tendremos nombre y descripción. Tendremos título y mensaje que enviaremos a nuestra función en la nube por lo que título y mensaje y se requiere. Vamos a decir que se requiere título y se requiere cuerpo del mensaje. Está bien, bien. Ahora vamos a eliminar esta importación de que nuestro formulario inicial se va a titular y mensaje ahora vamos a importar usar Motile State de nuevo. Muy bien, entonces tenemos forma. El valor está cargando para él. En bruto en presentar. De acuerdo, vamos a cambiarlo un poco. Entonces, en realidad, eliminemos esta parte y la mantengamos así. Ahora, aquí, dentro de Js seis. Vamos a quitar esto, Steve por completo. Vamos a quitar este nombre de clase, y lo dejaremos como fragmento de reacción. Entonces para el botón, vamos a especificar apariencia fuera de primaria y el tamaño va a ser extra pequeño de lo que no va a ser un componente de bloque y color. Mantengámoslo con el color predeterminado. Entonces para que pueda vamos a precisar que cumplí. Elenco y diremos mensaje de difusión en lugar de enviado FC M. Seamos un poco más creativos. Entonces para modelo, eso está bien. Cambiemos el título para enviar notificación a los usuarios de la sala Teoh que para este formulario. Se ve bien para formar grupo. Vamos a cambiarlo. Teoh Título nombre de control de formulario va a ser título y marcador de posición va a ser enter mensaje título de cuatro descripción. Vamos a cambiarlo a mensaje otra vez. Va a ser un componente de área de texto de nuestro nombre va a ser mensaje. Este nombre debe coincidir con nuestra clave de estado, que es título y mensaje. Está bien, así que por favor, titular debe ser algo así como y el mensaje de notificación. Está bien, bien. Y para este botón en la parte inferior. Por lo que apariencia, primaria en click en enviar bloque. Está bien, se ve bien. Ahora, sólo cambiemos el texto para publicar mensaje así. Está bien, bien. Ahora echemos un vistazo a la parte superior. Tenemos alerta innecesaria y también una importación de base de fuego necesaria. Digamos con Volvamos a navegar de nuevo a Chad. Y ahora tenemos esta ventana moral, así que ingresa un título y mensaje. Muy bien, ahora definamos la funcionalidad. Entonces, ¿qué va a pasar en Submit? Necesitamos enviar una solicitud a nuestra función en la nube. Y como recuerdan, nuestra función en la nube es una función invocable, y usamos funciones como decayadas. Por eso va a ser tan fácil de hacer. Así que pongamos a prueba de bloqueo de kitsch por aquí. Dejemos de lado está cargando a la parte superior así así por dentro de bloque trillado kitsch, vamos a hacer lo siguiente Primero, vamos a crear cualquier valioso FC M enviado y luego vamos a llamar a funciones como decayidas que importamos desde Firebase Dodgy s. entonces vamos a llamar crédulo a https. Y aquí necesitamos especificar el nombre de la función que queremos llamar, por lo que esto es muy importante. Por lo que dentro de índice togs exportamos enviar función de nube FC M. Este es su nombre. Está bien, así que vamos a copiarlo. Y aquí vamos a especificar que llamaremos a la función enviada FC M Cloud. Este método https crélible, nos devuelve y tu función que necesitamos llamar con el fin de realmente enviar una solicitud a la función cloud. Está bien, esta no es la petición en sí. Por lo que en este momento necesitamos llamar o invocar comió arena FC M con datos que queremos pasar a función de nube. Y entonces estos datos estarán disponibles aquí bajo estos datos disponibles. Entonces lo que vamos a hacer, vamos a llamar un peso del enviado FC M. Y dentro pasaremos chat I d Como recuerdan, necesitamos recibir Chad I d título y mensaje. Entonces, idea de chet, primero tenemos que conseguirlo. Entonces pongamos aquí y el top char i. D. programas Hughes. OK, Bien. Por lo que hemos comprobado yo d y también necesitamos enviar título y mensaje, que es nuestro valor de forma. Por lo que simplemente podemos difundirlo así dentro de este objeto, y ahora enviará la solicitud. Por lo que al final, habremos dicho está cargando tales bagatelas. Entonces llamaremos valor de forma sat al valor inicial. Entonces inicial para y también vamos a cerrar esta ventana del motor. Entonces en caso de que fuera alguna alerta o en caso de cualquier otra, vamos a llamar a alerta que a nuestro y luego alguna vez acoplar mensaje con la idea No. Siete segundos. Y también en caso de éxito, vamos a especificar información de alerta y diremos notificación. ¿ Ha enviado el frijol bueno? Se ve bastante impresionante. Ahora echemos un vistazo, como puedo ver aquí, debo moverlo a la cima. Está bien, vamos a navegar. Vayamos a transmitir mensaje. Especifiquemos algo super y publicemos. Se ha enviado mensaje y notificación. Ahora echemos un vistazo. Si abrimos nuestra terminal, podemos ver que dentro de nuestro terminal derecho donde ejecutamos la función de nube, podemos ver que iniciando la ejecución terminó la ejecución, por lo que realmente funciona. Ahora echemos un vistazo dentro de nuestro consejo. No vemos nada. Y también quizá intentemos enviarlo una vez más para ver qué va a pasar. Y vamos a abrir el grifo de red. Entonces dije el mensaje. Después puedes ver que la solicitud se está enviando al Host Chat local. Web up Europa fue tres Sand FC um, alguna vez he visto que el resultado es falso. Y esto se debe a que como recuerdas, dentro de nuestra función en la nube, comprobamos contra los usuarios de datos de sala FC M. Pero ahora mismo, dentro de nuestra base de datos, si abrimos nuestras habitaciones, aún no tenemos usuarios del FC M. Tenemos que cambiarlo. Por lo que vamos a navegar para crear habitación Bt y Moto y escuchar lo que vamos a especificar. Por lo que para admite, usaremos también usuario actual tu i d. Pero también, vamos a especificar usuarios FC um. El primer admin. El creador fuera de esta sala también recibirá notificación por defecto. Entonces vamos a copiarlo así. Digamos que estamos y ahora necesitamos modificar el grupo existente, pero eso vamos a copiar primero a nuestro usuario i d. desde aquí. Entonces hagamos clic en este signo más y digamos usuarios del FC M. Entonces otra vez, signo más. Añadamos nuestro propio usuario. Yo d Y luego por valor. Vamos por la verdad. Entonces agregamos este valor. Ahora, vamos a tratar de arena transmitir mensaje una vez más, así que voy a decir algo tonto. ¿ De acuerdo? Se ha enviado notificación. Si abrí mi cónsul ahora puedo ver que recibo un nuevo registro de cónsul, que viene de Firebase Dodgy s. y si abro este archivo, puedo ver que viene de este mensaje en mensaje. Por lo que tengo de notificación, tengo cuerpo y título. Ahora, lo único que tengo que hacer aquí es mostrar realmente esta notificación en más fácil de usar. Espere. Bueno, esto será bastante fácil de hacer con brindis o componente de notificación que viene de nuestro traje. De lo que haremos, vamos a importar notificación como brindis de nuestro traje. ¿ Por qué? Yo estoy usando aquí. Notificación tiene tostadas sobre no notificación porque la notificación también está disponible como objeto global valioso dentro de ventana dentro del navegador. Por lo que podría ser confuso y podríamos simplemente hacer algo en. Entonces solo para asegurarnos de que usamos un componente personalizado, lo nombramos dosificado. Por lo que aquí dentro en mensaje. Vamos a verter algo así como, Como recuerdan, tenemos notificación. Objeto en el interior, para que podamos destruirlo desde aquí. Notificación. Y luego vamos a llamar Otra vez vamos a destruir el chur esta vez de título de notificación y cuerpo. Entonces ahora tenemos estas dos llaves y vamos a llamar puerta tostada en cuatro. Entonces vamos a verter título descripción y descripción va a ser cuerpo y viejo, por lo que duración cero. Entonces lo que hará, cortejará y tú compondrás un componente de notificación de nuestro quemado con este título con este órgano, que es la descripción. Mantenga que necesitamos pasar por esta información y luego la duración se establece en cero, lo que nunca se cerrará por sí misma. Tenemos que ir manualmente y cerrar esta notificación. Está bien, así que ahora vamos a saborear y echemos un vistazo. Entonces si pongo algo así como un bajo y entonces esto es cuerpo y publicado nuevo mensaje Ahora tengo esta notificación y esta es. No obstante, hay una cosa más cool a eso. Si hago clic en algo como este mensaje publicado y cuando hago clic en este botón y luego cambiar rápidamente entre toques. Ahora recibiré esta notificación. Bastante guay, ¿verdad? Entonces esto es todo. Y así es como va a funcionar. Y todos los usuarios que estén suscritos a este mensaje de difusión los recibirán en sus dispositivos. O se trata de PC o dispositivo móvil o cualquier dispositivo a usar. Pero esto es lo que vamos a manejar en el próximo video. Por ahora, terminamos aquí. Comprometamos nuestros cambios. Abramos nuestra terminal. Aquí hay algo bueno. Nos da advertencia firebase diciendo que usando un índice no especificado. Entonces vamos a agregar realmente, y usted indexa a nuestras reglas de base de datos. Entonces vamos a abrirla. Y, como puede ver, considere agregar índice sobre el valor en tokens FC M. Entonces vamos a los tokens FC M. Entonces vamos a agregar índice en. Entonces vamos a copiar desde algún lugar y ponerlo por aquí y Index on va a ser el valor de punto. OK, entonces ahora publiquemos estos cambios. Copiémoslos a todos. Navegemos a las reglas de la base de datos, Jason, y vamos a reemplazarlas así. Está bien, mira, anotó. Ahora cometamos nuestros cambios. Por último. Entonces déjame detenerlo todo, entonces voy a poner ponerme a todo y luego me comprometo. Y entonces voy a decir, administrar FC M desde planta llamada nube Function y enviado FC M Perfect. Nos vemos en el siguiente. 155. Gestión de usuarios de FCM: hola. En este video, vamos a crear una nueva ventana de modelo. Alguna vez preguntará a los usuarios si quieren recibir notificaciones o no. Vámonos. Volvamos al código y debajo de la carpeta de Chat Window Top. Vamos a crear nuevo archivo. Pregunta al FC M Bt y modelo. Vamos a llenar este componente. Se cubrirá con el acto Frackman. Y como gatillo, vamos a verter el botón Aiken para Aiken. Vamos a especificar puedo componente y para puedo componente va a cotizar. Puedo nombrar fuera del podcast. Este I can Botón también tendrá talla de cuello azul va a ser pequeño y también va a ser un círculo. Vamos a guardarlo. Navegemos a Index Ducado Sí, dentro de la carpeta superior Y usemos este componente dentro de esta barra de herramientas de botones justo antes de una playa de Detroit y Robert. Pídanos pobres al FC M Beach en Moto. Digamos que espera y echemos un vistazo Ahora, Como pueden ver, tengo esta marca rota arriba en la parte superior, y esto es porque si abrimos sala de edición Beach intro Burr fueron hacia arriba en elemento dif. Quitémoslo y sigamos reaccionando fragmento. Ahora si echamos un vistazo. Todo está bien alineado. Perfecto. Ahora sigamos construyendo nuestro preguntar FC y golpeado y Moto. Entonces definamos una ventana de motel por aquí. En el interior, tendremos cabecera mortal que cuerpo y pie de página. Permítanme precisar todos ellos. Por lo que dentro de Heather, tendremos título de punto mortal y la gente dice que no vacaciones de té. Permiso. Está bien, bien. Ahora, con el fin de mostrar algo dentro del cuerpo, necesitamos saber si nuestro usuario actual ya está recibiendo mensajes FC M. Para eso, necesitamos verter algún otro valor dentro de nuestro contexto. Naveemos a Chad togs. Entonces esta es Page donde pasamos algunos datos de contexto sobre nuestra sala actual. Aquí podemos conseguir nuestros usuarios del FC M, Así que vamos a los pobres usuarios del FC M valiosos. Entonces llamaremos transformada a matriz que los usuarios actuales del FC M de la sala. Ahora necesitamos conseguir nuestro Bullen. Por lo que vamos a crear está recibiendo FC M y vamos a preguntar si FC abusers array incluye usuario actual de EU . Tu yo d pasado condenable. Esto está recibiendo FC y Bullen a nuestra corriente desde el contexto. Ahora vamos a guardarlo y dentro pregunte FC M Entre Moto, vamos a conseguir está recibiendo FC M de uso actual gancho de habitación. Está bien, perfecto. Pero para selector, vamos a especificar el valor está recibiendo FC M Bueno. Ahora para el modelo, necesitamos usar estado mortal. Entonces usemos este gancho de estado modelo y obtendrás, como siempre, está abierto, cerrado y abierto. Entonces para ventana mortal, vamos a especificar show property que va a ser está abierto en la piel. Vas a estar cerca. Y además especificaremos otro utilería que no hemos utilizado antes como el tamaño. Vamos a especificar extra pequeño y también el telón de fondo va a ser estático. De acuerdo, ahora en realidad vamos a verter nuestro renderizado condicional dentro por Pero antes déjame arreglar rápidamente este asunto y aquí también y no necesitamos ese. Por lo que dentro de pie de página para evitar esta línea roja para un delicioso botón put con texto alto y dentro de cuerpo pondrá renderizado condicional. Entonces vamos a preguntar si está recibiendo FC M. Entonces vamos a poner un elemento diff con nombre de clase fuera del centro de texto. Y dentro de este Dave, vamos a poner vengo con nombre de clase fuera texto verde y margen inferior tres, así que puedo nombrar va a ser cheque círculo y tamaño va a ser cinco veces grande. Y junto a esto, puedo Suministraremos el título H seis con texto. Estás suscrito a mensajes de difusión enviados por anuncio Mons fuera de esta sala. Muy bien, Bien. Ahora, si no nos suscribimos a los mensajes, entonces vamos a mostrar otro en vivo de nuevo con nombre de clase fuera del centro de texto esta vez mostrará otro icono con clase. Nombre fuera texto Azul y margen inferior tres también. Por lo que puedo nombrar se va a cuestionar. Círculo y tamaño otra vez cinco veces grande. Ahora junto a este Aiken otra vez, h seis título. ¿ Y quieres suscribirte a mis mensajes enviados por ad mons fuera de esta habitación? Está bien, bien. Junto a este renderizado condicional, vamos a verter otro texto. Entonces vamos a poner etiqueta p y clase. Nombre va a ser margen top dos, y diremos que para recibir notificaciones, asegúrate de no permitir vacaciones en tu navegador. Muy bien, Bien. Saboremos y echemos un vistazo. Entonces antes de que podamos hacer eso, vamos a verter en el manejador de clics para el botón Aiken. Abramos y echemos un vistazo. De acuerdo, entonces si doy clic en este botón ahora tengo notificaciones. ¿ Permiso? Estás suscrito para recibir notificaciones. Asegúrate de permitir notificaciones en tu navegador. Además, estaría bien que tuviéramos algún tipo de valor que indique si tenemos el permiso o no. Porque si abrimos esta información lateral aquí, confinamos diferentes permisos, como para ubicación, micrófono y notificaciones. Entonces si esto está configurado para bloquear, no podremos recibir nada. Por eso es bueno exhibir aquí. Pero que se otorgue el permiso no fueron para eso. Pongámoslo junto a este indicador de permiso de etiqueta P. Entonces diremos permiso. Entonces vamos a abordar colon y luego poner renderizado condicional. Entonces vamos a poner notificación y notificación es el objeto global dentro de la ventana dentro del navegador. Si yo, sin embargo, puedes ver que se trata de notificaciones ap I Así que si el permiso de punto de notificación equivale a dos gruñidos, entonces voy a mostrar un elemento hilado que dirá gruñidos y pongamos un nombre de clase fuera Texto verde. De lo contrario, si no tenemos el permiso, vamos a mostrar span con texto de noche y el nombre de la clase va a ser texto leído. Perfecto. Pero ahora puedo salvarlo porque parece que tengo mejor en algún lugar. Está bien, Pudimos a este Pitak hasta el final así. Está bien, se ve bien. Ahora echemos un vistazo. Si abrí esta ventana ahora, tengo frente de permiso. Parece que va ahora necesitamos definir nuestra funcionalidad. Tan adentro pie de página. Primero pongamos un botón de cierre. Entonces déjame hacer un recapitalizado y en click va a estar cerca. Y justo antes de este botón, pondremos nuestros botones principales para la funcionalidad. Entonces vamos a preguntar si nuestro usuario está recibiendo FC M. Entonces vamos a poner botón con texto. Cambié de opinión porque como recuerdas, tenemos esta pregunta. ¿ Quieres suscribirte a mensajes para el color? Especificaremos verde y para unclipped crearemos en función cancel apenas en un momento . De lo contrario, si no estamos recibiendo ninguna notificación, citaremos otro botón. Pero texto Sí, sí quiero suscribirme. Está bien. Para unclip vamos a verter sobre excepto y por un color. Trabajaremos en verde también. Está bien, vamos a guardarlo. Y ahora definamos primero nuestras funciones. Vamos a verternos. Cancelar el. Cancelar y aquí vamos a referir nuestra base de datos. Entonces pongamos base de datos que importamos desde archivo firebase que referencia. Y la gente especifica habitaciones, slash cuarto I D o chat I D que obtenemos de uso Paramus Hook. Por lo que chat i d Ha recibido de uso perms. Vamos a mover esta importación a la parte superior de lo que vamos a hacer referencia a los usuarios de FC M y para niño, que está fuera usuario actual. Vamos a importante fuera usuario actual te d No te quites. Simplemente eliminaremos este objeto de nuestra base de datos. Bien. Ahora definamos segunda función, que está encendida excepto y diferente nacionalidad va a ser bastante similar liciosa. Copia esto, Nipper. Y en lugar de quitar a este niño, vamos a ponerlo a la verdad. ¿ Todo bien? Perfecto. Ahora vamos a probarlo en realidad. Entonces abrimos nuestro móvil Y aquí vamos a dar click en Cambié de opinión y ahora puedes ver que entrando condicionalidad funciona. Y si miramos dentro de la base de datos, ve a las habitaciones Ahora no tenemos usuarios del FC M. Si hago click en sí, lo hago. Ahora tenemos usuarios de FC M con mi usuario i d insight, Pero para que sea un poco más fácil de usar. En realidad definamos otro color para nuestro botón Aiken. Entonces diremos aparición. Si nuestro usuario está recibiendo FC M, entonces verteremos la apariencia predeterminada. De lo contrario pondremos fantasma y echemos un vistazo a lo que va a pasar. Entonces si digo lo que ahora tengo este color azul por aquí con la apariencia normal. Muy bien, entonces si cambié de opinión ahora tengo esta apariencia fantasma sin el color dentro del fondo. Está bien, bien. Entonces esto es todo. Es así como somos capaces de gestionar a nuestros usuarios, pero quieren suscribirse o no. Entonces si no están suscripciones, significa que no recibirán ninguna notificación que se envíe por esta forma moral. Está bien, entonces supongo que eso es todo para este video. Y este es el momento de que cometamos nuestros cambios. Abramos nuestra terminal y luego vamos a llegar a Dar y luego nos comprometemos. Vamos a un hombre edad FC M usuarios con el preguntar FC M vtm Moto perfecto para terminar este viaje. Vamos a Bush todo en línea para ponernos al día. Consigue el armamento de origen Bush después de que haya terminado. Corremos, firebase desplieguemos y disfrutemos de nuestra aplicación de chat en línea. Me alegra decir que estamos completamente terminados con este proyecto. Hemos implementado todo lo que queríamos. Las notificaciones en tiempo real, roles de administrador, presencia de usuarios. Tenemos todo en su lugar. Habrá algunos videos más sobre concepto de reaccionar que no hemos cubierto tu en estos tres proyectos. Pero sin embargo, espero que haya sido una experiencia valiosa para ambos. Y espero que este curso te dé lo que viniste a buscar. Gracias por ello. Tiempo y paciencia. Nos vemos la próxima vez. 156. Características clave de React React: Oye, en esta sección de la mayoría, vamos a cubrir características de reacción que tiene casi todas las aplicaciones de reacción regular de producción . Pero no tuvimos oportunidad de usarlos en nuestros proyectos. Todo lo que aquí se cubrirá se va a aplicar a nuestra aplicación de chat de proyecto final para ayudarnos con el código de doble referencia oficial reaccionar documentación. Te recomiendo encarecidamente que lo leas tú mismo para entender mejor cómo funciona reaccionar. Nos vemos en el siguiente video. 157. React portales: santificado. Nuestro primer video va a ser sobre reaccionar. Portales y portales es sólo una manera Teoh. Renderiza algo con reaccionar fuera off def con fruta ideal. A lo que me refiero, si abrimos nuestra aplicación de chat y si inspeccionamos nuestros elementos, sabemos que todo fuera de nuestros elementos, todos nuestros componentes, nuestra app va bajo este dif con idea escribió derecho, Sin embargo, echemos un vistazo cuando abramos una ventana de modelo donde se renderizará. Entonces si abrí esto a través de ocho nueva sala de chat, se puede ver eso aquí en la parte inferior. Tengo este diálogo def rol, y si lo abro y si inspecciono, se puede ver que en realidad, mi modelo nuevo Chatham se está renderizando fuera de esta ruta. Entonces para esto se utilizan los portales. Esto es útil para algo como ventanas de modelo o consejos de herramientas o hovers. No sé nada que deba ser arrendatario fuera fuera de componente principal tratar. Esto es muy útil cuando nos ocupamos de la propiedad Z Index CSS. Entonces nunca volvamos a la documentación y echemos un vistazo a través de ejemplos aquí puedes leer palabras que acabo de decir que alguna vez tienes mirando este ejemplo, podría ser demasiado complicado entender lo que está pasando. Entonces, en lugar de copiar, ritmo, este móvil de clase de la documentación, abramos nuestro código. Yo ya Irán la aplicación y otros componentes. Vamos a crear un nuevo modelo de archivo. Vamos a crear un nuevo componente. Y aquí, en lugar de devolver este Dave de la documentación, podemos ver que somos capaces de usar reaccionar, no crear método portal. Entonces en lugar de este def, volvamos. Crea portal y se importará automáticamente para nosotros. Y si abro fiestas, como puedo ver que aquí tengo Niños y luego elemento Todo bien, contenedor. Entonces para Niños, pondremos Niños que pasarán a este componente mortal. Por lo que aquí destruiré a tus Hijos. Y entonces lo pasaré para crear Porto que nuestro contenedor. Debe ser otro div que los problemas definen dentro de índice html. Por lo que aquí ya tenemos esta diferente con idea Satu Road. Ahora vamos a crear otro día si eso va a ser un contenedor para nuestras ventanas modelo. Está bien, así que aquí crearemos Dave y yo d seremos ruta modelo. Guardémoslo y dentro del modelo togs. Si abrimos documentación, podemos obtenerla usando documento. Obtener elemento por i. D. Así que vamos a copiar ese. Pongámoslo aquí en la parte superior y para crear portal como segundo argumento, pasaremos ruta moral. Está bien, Perfecto. Ahora vamos a guardarlo. Y dice que reaccionar se declara. Nunca se usó. Está bien, entonces tal vez vamos a quitarlo. Ahora abramos. A lo mejor firmando página. Y aquí, vamos a dar esta bienvenida al chat. Ejecutemos su visita si dentro de nuestra ventana modelo. Entonces aquí vamos a poner modelo importado de nuestro archivo que creamos, no de nuestro traje. Entonces vamos a quitar esta importación, y quiero importarla de nuestro archivo. Está bien. Parece que importa de nuestro traje. Vamos a importarlo manualmente desde el modelo de componentes. Perfecto. Por lo que dentro de este modelo, pondremos nuestro def con centro de texto. Ahora, si nunca volvemos a nuestra app Si salimos ahora, puedes ver esa bienvenida. Chad se encuentra y el fondo Y si voy a elementos y si inspecciono mi árbol mudo aquí en la parte inferior, puedo ver ruta mortal. Y dentro de esta ruta modelo, confinamos nuestra bienvenida a silla bajo centro de texto. Entonces esto es un Esto se usa en tus bibliotecas de ojos como nuestro CLR para ventanas de modelos y para consejos de herramientas . Por ejemplo, si tuviéramos que crear, reaccionan aplicación sin usar la biblioteca de lágrima I y tuvimos que implementar ventana móvil. Lo más probable es que usáramos portales de reacción porque se renderizan fuera de nuestra principal golosina segura. Puedes encontrarlo más práctico Onley cuando te metes en él en un ejemplo del mundo real. Eso está bien si no entiendes del todo. Pero confía en mí, este es el concepto clave que al menos debes conocer. Está bien. Gracias. Nos vemos en el siguiente. 158. Bordados de error: Hola ahí. En este video, hablaremos de sus bollos. Volvamos a navegar a la cancha y abramos la página de inicio de sesión aquí. ¿ Qué va a pasar si digamos, lanzar un error dentro de este componente? Vamos a pobres lanzar nuevo error. Sucedió algo malo. Ahora digamos qué y echemos un vistazo. Si refresco la pintura, podemos ver que tenemos un nunca y algo malo pasó. Y la cosa es que estos entran está en atrapado. Significa que se llama por reaccionar, pero no por nosotros, y eventualmente reaccionar le montará todo el árbol competente, lo cual es realmente malo si tenemos una producción lista por aplicación para evitar que tengamos lo cual es realmente malo si tenemos una producción lista por aplicación para evitar que tengamos mejores árboles de bollo que son límites son componentes que atrapan todo este tipo de letras y la pantalla en fullback You I, por ejemplo, por ejemplo, un mensaje de que estos paginados se estrelló. Por favor, refresca. Entonces si abrimos la documentación, confinamos un ejemplo oficial cómo crear un componente de árbol de bollos de respuesta simple. Y para la mayoría de los casos esto es suficiente. A menos que tengas un registro de errores realmente sofisticado o no sé nada lo que me propuse hacer quiero ir a una demo en vivo? Entonces quiero que abras este ejemplo y desde aquí te copiaré esto. Entrar Bunge re clase. Entonces déjame copiar todo eso. Entonces voy a abrir decodificar y luego dentro de los componentes, te voy a crear archivo alguna vez bollo. Y dentro pondré este componente basado en clases. Y no tengas miedo con este componente de que está basado en clases. Voy a explicar todo lo que aquí se lleva a cabo. Entonces déjame importar, reaccionar de reaccionar. Y también tenemos muchas advertencias de sí longitud. Vamos a deshabilitarlos a todos. Voy a hacer clic en solución rápida y deshabilitada para todo el archivo. Lo mismo que haré aquí. Ahora vamos a guardarlo. Y lo que está pasando aquí dentro del constructor que definimos en tu estado, que es un objeto con información de siempre y error que usar una escritura competente Catch, hook del ciclo de vida o evento del ciclo de vida. Atrapamos algún error que esté ocurriendo dentro de este componente, ¿de acuerdo? O a sus Hijos. Cuando tenemos algún error, actualizamos este estado, luego dentro del método render. Si tenemos algún error dentro de nuestro estado, que se juega el fullback ey. Y de lo contrario, si todo está bien, simplemente renderizamos por todos sus Hijos. De acuerdo, Bastante simple. Ahora, para poder usar este editor, necesitamos envolver todo nuestro árbol dentro de esta carta. Bunbury. Entonces abramos Abdel Gs. Y aquí voy a manojo para siempre nosotros componente que creamos. Déjame guardar todo eso. Entonces volveré a navegar a mi app. Voy a refrescar el amplificador y ahora todavía tengo esta advertencia de reaccionar. Eso se debe a que estamos en barco de desarrollo. No obstante, si lo cierro ahora, en lugar de firmar página, tengo este algo un mensaje equivocado con los detalles dentro. Y si abro mi otro árbol de bollos, puedo ver que por si acaso fuera algún error, esto es exactamente lo que estoy renderizando y se puede personalizar sesgo. Es así como podemos atrapar a cualquier otro dentro de la Y en cada aplicación lista de producción . Esto es una necesidad. El genial de nuestros límites de que podemos crear múltiples componentes. Por ejemplo, este momento ponemos el árbol global de Herman. Si se producirá algún error dentro del árbol competente que será capturado por esta letra límite y en su lugar fuera de cualquier componente. Se mostrará este mensaje con algo cuando esté borracho. Digamos que tenemos una gran cantidad de componentes y perilla o triturada, si no barra estrellada. No queremos quitar todo bien para estas situaciones. Podemos poner múltiples otros límites, ejemplo, por componente o por página. Por lo que para firmar página, puedo tirar de su propio árbol de bollos entrar así. Entonces puedo crear otro componente con otro mercado para siempre. Y luego puedo frotar otra página alrededor de otra en su árbol de bollos. Por lo que de esta manera, si se producirá error dentro de la página principal, será capturado por estos otros bollos DRI y luego se mostrará la U Y. Eso está listado dentro de este árbol de bollos de letras. La pregunta es ¿por qué? Y fue bien. Evers puede ser producido por cualquier cosa. Puede ser cualquier error dentro del código que no controlamos o simplemente lo evitamos. O tal vez pueda ser una red alguna vez, por ejemplo, si algo necesita ser acceso en línea. Pero de la nada, Internet bajó y el componente no pudo renderizar de esta manera se enjaulará por enter bollo tree y es muy importante entender que este tipo de errores no serán atrapados por nunca. Árboles de bollo en sus árboles de bollo atrapan otros Onley relacionados Teoh renderización. Ahora supongo que necesitábamos esto algún tipo de mejor Bunbury dentro de nuestra aplicación de chat. Entonces supongo que este es un buen momento para comprometer nuestros cambios. Entonces vamos a derramar este trono. Tú aerolínea dentro firmando y pongamos un árbol de bollos global siempre para nuestra aplicación de chat y cometamos nuestros cambios. Entonces voy a verter. Está bien, déjame reiniciar la terminal. Voy a poner, ponerme en todo y luego conseguir commit y luego añadido Mejor árbol de bollos. Perfecto. Espero que fuera integral y no demasiado complicado. Nos vemos en el siguiente. 159. Splitting de código: Hey allá en esta burbuja de video, hablar de división de código en modo reaccionar, dividir está fuertemente acoplado con carga perezosa en reaccionar, matar, dividir significa para cargar perezosos componentes, dependencias o tal vez incluso CSS archivos. Si leemos a través de la documentación, podemos ver esta sección de bundling donde dice que cada vez que construimos una aplicación, tenemos el archivo JavaScript final. Y en efecto, si vamos a mirar dentro de nuestro proyecto y vamos al último guión estático y celoso construido aquí limitamos algunos trabajos, grandes archivos. Y como puedes ver, se magnifican y al mismo tiempo son bastante grandes. Entonces aquí es donde va nuestra lógica. Pero con la carga láser, somos capaces de crear más trozos de nuestra aplicación. Y de esta manera podemos poner una carga nuestros trozos de JavaScript en Lee cuando sean necesarios. Por ejemplo, si miras dentro de nuestra aplicación, básicamente no necesitamos la página de inicio de sesión ahora mismo. Necesitamos a Onley cuando no estamos autorizados, ¿verdad? Por lo que tendría sentido cargar perezoso signo y componente de página. Entonces si vamos a la documentación y si nos desplazamos hacia abajo al ejemplo real con reaccionar, reaccionar perezoso Lisi es una técnica dentro reaccionar a componentes de carga perezosos. Podemos utilizar este ejemplo para cargar perezoso nuestra página de inicio de sesión. Copiemos esta línea de código de la que voy a navegar hasta Abla GS Place donde rendimos aquí el componente de firma. Voy a pagar este otro componente y lo sustituiré por Sinan. Y luego voy a copiar pase para iniciar sesión página. Y entonces realmente importaré perezoso también de reaccionar en lugar de usar tinta así. Y también necesito importar sospechosos como podemos ver desde la documentación, porque cuando perezosos, bajos, tenues Ojul, podría tardar unos segundos o milisegundos en cargar este módulo. Y mientras se está cargando para evitar carnes, podríamos usar algún fullback. Tú yo algo como cargar. Por eso necesitamos proveer siempre suspenso. Entonces déjame copiarlo, y falta mi predicador. Entonces déjame cancelarlo y en realidad inicié la app. A lo mejor funcionará. De acuerdo, entonces voy a echar sospechosos de que firmaría página y lo voy a poner así ahora puedo almorzar de nuevo mi aplicación y dejarme guardarla y Ahora debemos usar el inicio de sesión así con sospechosos y vamos a quitar la vieja importación fuera de la página de inicio de sesión. Ahora bien, si lo guardo, también necesito importar suspense. Ahora si digo dónde y si vuelvo a la cancha si refresco la app si hago clic en inspeccionar y si abrí el grifo de red, déjame cerrar sesión y prestar atención. ¿ Qué archivo se cargará? Entonces si hago click en este botón, viste este pequeño parpadeo con def de carga que ponemos como una espalda completa por aquí mientras esta caída te retrocede. Estaba mostrando que en realidad cargamos el trozo de nuestro abrigo. Y si lo abrimos aquí, confinamos a nuestro EU o vemos páginas firmando. Entonces esto es lo que significa codificar dividir nuestra aplicación. Si construyes una aplicación realmente grande, lo más probable es que cuando alguien lanza tu sitio web por primera vez, la mayoría de tus componentes probablemente no sean necesarios. Esta técnica es realmente importante de entender. Y un buen ejemplo sería solo abrir el lado de rap de Twitter y ver que en todas partes cuando acabas de cargar el sitio web, puedes ver hilanderos usan perezosos cargando mucho por lo que perezosos cargan todos los componentes para reducir el tamaño inicial del paquete porque realmente importa. Si actualizo la app, puedes ver que aquí se han cargado muchos archivos, como un trozo principal, y queremos que el principal Chunk sea lo más pequeño posible porque el Señor inicial fuera del sitio web importa. Está bien, ¿ así que esto se trata de la carga láser? Espero que haya sido integral. Ahora, realmente comprometamos nuestros cambios a la aplicación de chat. Entonces vamos a verter, a Dar y luego a comprometernos. Agrega flotante flotante perfecto CEO en el siguiente. 160. Conclusión: Hola. Ahora ya conoces todas las cosas modernas necesarias para crear una gran producción ready reaccionar aplicación. Dale un poco más de práctica y definitivamente rematarás todo lo que hemos cubierto . Aquí tienes una tarea para ti. Pasar por la documentación de reaccionar y confiar en temas que no has escuchado durante el curso . Hay muchísimos detalles sutiles que no se ven en el primer vaso. Asegúrate de entender por qué estás usando esta técnica. En cuanto a ahora, estamos terminados con este apartado. Nos vemos en el siguiente. 161. Resumen - conocimientos que has obtenido: Hola, Lo hiciste muy bien. Construyes tres proyectos de reacción separados de diferente complejidad. Puedes decir con orgullo que tienes experiencia de desarrollo de reaccionar. Ahora resumiremos qué cosas has aprendido en este curso. Voy a dividir todo en su propio contexto. Las canchas comenzaron con cosas más generales donde mirabas diferentes tipos de representación de sitios web . ¿ Pueden AP eyes dado el mundo real ejemplos de tu equipo, sin GS y modernos cursos de choque de JavaScript y luego te preparaste para empezar a trabajar con reaccionar en nuestro primer proyecto. Tick tachuela para que conozcas primero React componentes, sondas, estilos, ST Dynamic, tú I y desarrollo de Flow. En general, creaste un proyecto de reacción simple que demuestra fundamentos fuertes. Con taquilla, te mudaste hacia la aplicación de reaccionar más compleja al trabajar con un P I externo y gestionar escenarios primitivos conocidos . Usando tres cocineros de AC, aprendes el concepto de multitudes dinámicas y datos remotos que te buscan para que cómo optimizar y analizar componentes de reacción, dice la CIA en GS o los componentes de estilo no son extranjeros para ti a partir de ahora. Al final de este proyecto, tienes aplicación típica de reaccionar que requiere re reconocimiento más integral En la última app de chat del proyecto. Se llega a conocer la base de fuego en primer lugar. Hiciste un gran trabajo en la gestión del estado Global con contexto. AP I Experimentas situaciones confusas y no primitivas que requieren comprensión avanzada de reaccionar. Gestionar estilos usted mismo no siempre deseable. Es por eso que ahora entiendes el significado de ti Los componentes Y, bibliotecas, usuario, páginas de usuario, estado y privadas son cosas normales para ti en este momento. Y reaccionar ganchos es tu arma principal. Varios s atrás fuera de curso. Paga menos con mínimo esfuerzo. Al final del chat up, construyes una aplicación Web preparada para la producción con tecnologías actualizadas. También había un pequeño cuarto off react conceptos donde los miramos por separado y aplicamos a nuestro proyecto final. Después de todo eso, debes tener confianza trabajando con reaccionar y es eco sistema. Siempre habrá esa sensación de que tu conocimiento no es suficiente. Y eso está bien. Todo desarrollador tiene este sentido. No hay límite a la perfección. Estas fueron las cosas que has aprendido en este curso. Nos vemos la próxima vez 162. Tu futuro de los movimientos de futuro: Hola. Hablemos de tus próximos pasos después del discurso. No hay una determinada hoja de ruta de desarrollador Web, pero aquí están mis sugerencias y recomendaciones. En primer lugar, aprende mecanografía. Se trata de un lenguaje construido encima de JavaScript. Trae sistema de tipo al proyecto, y al final del día, aumentará la confiabilidad del código. Google four React typescript artículos y empezar con estos integrados en un proyecto de reacción simple para entender por qué es increíble. Después echa un vistazo a los patos re. Ya conoces el uso. Reducer Hook Read Acts es una biblioteca de gestión estatal global que utiliza el mismo enfoque reductor usado. Tiene una curva de aprendizaje, pero con los ganchos de reaccionar y redox a niño, Redox se ha vuelto más integral. Muchos tutoriales y facilidad forzada Redox, pero la mayoría de las veces no lo necesitas. Al mismo tiempo, será una práctica realmente buena aumentar tu valor como desarrollador. Google para cualquier artículo sobre reducción moderna con kit de herramientas de tres patos. Si quieres crecer como desarrollador de reaccionar, definitivamente debes empezar a mirar hacia los próximos GS y Gatsby. Estos dos son marcos construidos en la parte superior de reaccionar, y ambos pensados para la renderización del lado del servidor. Increíble sistema eco, buenos tutoriales. Tienen todo para darte un desarrollo lo más cómodo posible y obligarte a construir un A p I sin GS, no se requiere conocimiento de Jess en todas partes, ya sea un backend de JavaScript o simplemente script de fondo. Encuentra cualquier artículo sobre cómo configurar Express GS y no GS. Hazlo tú mismo que incrementó ese conocimiento haciendo más práctica al final del día. Aprende sobre las pruebas al hacer cambios. Para decodificar es importante no romper nada. Por eso existen pruebas con herramientas modernas. Las pruebas son muy simplificadas y agradables. Las pruebas son importantes, pero lo más importante, es probar en Lee lo que realmente necesita ser probado. Google Para cualquier artículo relacionado con las pruebas de reacción de bromas o enzimas. Lea más sobre seguridad fuera de la aplicación Web, especialmente sobre tokens Jason Webb, cookies y almacenamiento local. Proteger backend también es una cosa, pero para eso empezar a bajar togs, ninguna base de datos SQL como Mongo, DB o firebase son fáciles, pero les gustan las poderosas consultas y estructuras a la hora de construir. Y no, ella ha vuelto y sabiamente decide sobre el DB. Pregunta tus bases de datos son más preferibles a gran escala pose dress. Pregúntale L y Mongo db son bastante populares hoy en día. También se da mayor atención al injerto ul. Una vez que te sientas cómodo sin ajedrez y descanso Los ojos AP empiezan a pensar en injerto. You 'll Es más flexible cuando hay mucha solicitud con forma de datos dinámicos Warren Cloud Computing y desarrollo off wraps usando servicios en la nube, no cambiará la pila de desarrollo subyacente, por ejemplo, Reacciona y anota GS, pero te dará servicios que te permitirán desplegar y gestionar la APP. implementación sin servidor o el almacenamiento en la nube son ejemplos de servicios en la nube. Echa un vistazo a los proveedores de nube populares y elige uno. Hacer todo automatizado con integración continua y continúa la entrega. La entrega le permite automatizar el proceso de despliegue. Por ejemplo, cuando empujas un nuevo cambio y te levantes, la APP se desplegará automáticamente continúa. La integración va antes de continuar la entrega. Básicamente define el modelo fuera nuevo código Push to the main code. Este tema no es tan fácil de entender. Así que siéntete libre de leer cualquier artículo y tener un montón de preguntas. Estas son mis recomendaciones. Siéntase libre de elegir su propia dirección. Nos vemos la próxima vez