React. Academia de js para principiantes con Firebase

1. Bienvenido al curso: Bienvenido a la Academia React para principiantes. En este curso, aprenderás todo lo que necesitas saber para ponerte en marcha reaccionar, para construir interfaces de usuario. Todas nuestras construcciones en un proyecto real, pongan en práctica sus nuevas habilidades. A lo largo de este curso, estarás construyendo ocho aplicaciones inspiradas en compañeros, que realmente te muestra lo que puedes hacer con reaccionar. Construimos caídas para agrupar tus ideas y organizarlas con listas y tarjetas, todo mientras hacemos noticias de componentes de reaccionar. Estos también son editables, puedes hacer click sobre ellos para cambiar los nombres y también los autos tienen un modelo pop-up donde podemos cambiar el contenido y además añadir o quitar cualquier etiqueta. Esta aplicación nos da la oportunidad de entender conceptos de reacción como pasar datos con apoyos, trabajar con estado, formas, enrutamiento, tipos de componentes, y ciclos de vida, métodos personalizados, y mucho más. Este curso es amigable para principiantes, por lo que si eres nuevo en reaccionar, repasaremos todos los conceptos básicos que necesitas para empezar, y luego dar un paso adelante a lo largo del curso para darte una comprensión más profunda de reaccionar. Si bien ya deberíamos tener una familiaridad con HTML, CSS, y JavaScript básico para sacar el máximo provecho de este curso, tampoco estaremos simplemente construyendo el front-end de la aplicación. También haremos uso de Firebase para crear un back-end para nuestro proyecto también. Esto nos dará una base de datos en tiempo real para almacenar todos nuestros datos. Persistirá después de que un usuario regrese y también cualquier cambio que realicemos, como add-in, remove o update in. Actualizaremos nuestra aplicación en tiempo real, lo que significa que los cambios surtirán efecto de inmediato sin necesidad de recargar la página. También permitimos que los usuarios se registren e inicien sesión en nuestra gráfica. Esto permite a los usuarios tener sus propios tableros personales, que sólo ellos pueden ver o editar. Junto con aprender sobre cosas como renderizado condicional, documentos, instantáneas, autenticación, salting, y filtrado, escuchar cambios, y también la API de contactos de React. Terminamos el curso aprendiendo a construir tu app para producción y finalmente desplegamos para el resto del mundo a verlo así si te interesaba aprender Reacciona y quieres construir un proyecto extranjero en el camino, inscribirte en el curso, y te veré en la clase. 2. Qué vamos a construir: Este curso está completamente basado en proyectos, que significa que vamos a estar construyendo esta aplicación inspirada en Trello desde el principio del curso hasta el final. Vamos a estar sumando a este paso a paso, ya que aprendemos más sobre React y Firebase durante el curso. Vamos a ponerlo en práctica todo lo que aprenderemos sobre Reaccionar directamente a este proyecto para que lo veas en la práctica. El proyecto que se basará a lo largo del curso va a ser inspirado en Trello. Si no has usado Trello antes, es básicamente una aplicación que nos permitirá organizar las cosas creando tableros, que es un tablero para cierto tema donde podemos agregar listas y tarjetas, podemos listar ideas, nosotros puede crear etiquetas, y mucho más. En esta aplicación, vamos a comenzar en la pantalla de inicio permitiendo a los usuarios iniciar sesión con un correo electrónico y contraseña. La autenticación se manejará en el back-end usando Firebase. Esto nos dará una facilidad segura de inicio de sesión y registro, donde los usuarios podrán luego registrarse. Después pueden crear tableros. Por ejemplo, podemos configurar nuestras ideas para el verano. Podemos crear este tablero, podemos darle un color de fondo diferente, vamos por el verde. Podemos crear este tablero. Esto ahora se guarda en la base de datos back-end, que es proporcionada por Firebase. Podemos entonces entrar a nuestro tablero, podemos crear nuevas listas para segmentar nuestro contenido. Por ejemplo, podemos decir lugares que visitar y también crear una nueva lista, cosas que hacer. Cada una de estas listas puede tener tarjetas individuales, y podemos sumar tantas de estas cartas como nos guste. Digamos que visitó París. Después podemos hacer click en estas ediciones. Podemos editar el texto, podemos agregar etiquetas, podemos eliminarlas haciendo clic en ellas una vez más, después podemos guardar nuestros cambios y esto luego se muestran dentro de cada tarjeta. Podemos agregar elenco sobre lista, como pintar casa. Esto también se puede hacer clic y editar. Podemos agregar varias etiquetas, guardar nuestros cambios, y todos estos cambios se empujan inmediatamente a Firebase y luego se actualizan en tiempo real en nuestra aplicación. Esto significa que no necesitamos actualizar nuestra aplicación para luego recuperar los datos de nuestro back-end. Todo esto se actualiza de inmediato, como ven aquí. También podemos eliminar nuestras tarjetas, nuestras listas, y también nuestros tableros, y todos estos enlazan juntos también. Por ejemplo, cuando creamos un nuevo tablero, lista, o tarjeta, todos estos creados por un determinado usuario. El ID de usuario se almacena en cada uno, es decir, si entramos en uno de estos tableros y luego lo eliminamos, esto también eliminará las listas y tarjetas correspondientes que se vinculan a cada tablero. También podemos iniciar sesión con múltiples usuarios, y cada usuario solo tendrá acceso a sus propios tableros que usted ha creado, y se puede ver esto si nos desconectamos y luego iniciamos sesión como un usuario diferente. Haga clic en el botón de inicio de sesión. Entonces nos redirigen a la vista de nuestro tablero donde tenemos un conjunto diferente de tableros creados por este usuario. Añadamos alguna lista de ejemplos dentro de aquí, y también tableros. Estos son completamente independientes para este usuario. Esta va a ser la aplicación que vamos a construir durante este curso. Este proyecto nos permitirá demostrar todo lo que necesitas saber sobre React para construir aplicaciones, también aprenderemos mucho sobre Firebase, incluyendo la base de datos en tiempo real, autenticación, obtener actualizaciones en en tiempo real, y luego finalmente, al final del curso, haremos que nuestro sitio viva, donde empujaremos esto a la producción para que el resto del mundo lo vea. Espero que estés tan emocionado como yo por empezar con este curso. En el siguiente video, recorreremos un par de cosas que se necesitan para este curso antes de que luego saltemos a la siguiente sección donde empezamos a trabajar en este proyecto. 3. Qué necesitarás para este curso: Para ponerse en marcha, solo hay unas cuantas cosas que necesitarás y el hecho de que estés tomando un curso de tecnología probablemente signifique que ya tienes algunas de estas de todas formas. En primer lugar, estaré usando Chrome como mi navegador web pero eres libre de usar cualquiera que prefieras. No obstante, recomendaría ya sea Chrome o Firefox, ya que las herramientas de desarrollo React, que estaremos utilizando sólo están disponibles actualmente para estos dos navegadores. Para obtener las herramientas de desarrollador, haz una búsqueda de herramientas reactivas y como puedes ver aquí, tenemos las opciones para agregar a Chrome o también agregar a Firefox las cuales puedes encontrar desde este enlace aquí. Te recomiendo que sigas adelante y descargues estos ya sea para Chrome o Firefox, y de verdad te ayudará a lo largo de este curso. A continuación, tenemos el nodo de descarga JS, que está disponible en nodejs.org. No vamos a estar usando nodo como back-end o como servidor Web, pero es necesaria para mucha de la herramienta en la que usamos al desarrollar localmente. Adelante y descarga la última conversión de cromo para tu sistema operativo y luego haz clic en “Siguiente” a través de la instalación. También necesitamos una herramienta de editor de texto, y estaré usando Visual Studio Code, que puedes descargar desde Code.VisualStudio.com. Puedes usar a otros si lo prefieres. Pero este es uno que me gusta mucho y voy a estar usando a lo largo del curso. También cuenta con un terminal incorporado, cual funciona bien y lo aprovecharemos a la hora de construir nuestros proyectos. Nuevamente, cualquier terminal también está bien de usar si quieres usar algo diferente. Pero para este curso, estaré usando el construido en el código s-. Si te gustaría usar esto, te recomiendo que sigas adelante y descargues para tu máquina y luego pases por el proceso de instalación habitual para tu computadora y entonces esto es casi todo lo que necesitamos para ponernos en marcha. Cualquier otra cosa que necesitemos utilizar como cualquier paquete de MPM, vamos a descargar a medida que avancemos el curso. Pasemos ahora a aprender todo sobre Reaccionar en la siguiente sección. 4. Crear aplicación React: En React días anteriores, crear un nuevo proyecto implicaba mucho trabajo de configuración. Teníamos que instalar y configurar herramientas como bubble y Webb Park y el tiempo de configuración podría posponer a muchos principiantes. Ahora tenemos una gran herramienta llamada Create React app, que es una forma realmente rápida y sencilla de empezar a reaccionar sin quedar atrapado en toda la configuración y configuración inicial y también es oficialmente compatible. Utilizamos la app Create React desde la terminal, pero son solo unos cuantos comandos, así que no te preocupes, si no eres un usuario regular de terminal. De hecho, incluso podemos usar el proporcionado en Visual Studio Code. Abramos Visual Studio Code. Si vamos a terminal y nueva terminal, si también tienes una terminal separada que te gustaría usar también, esto está completamente bien y no hay problema al hacerlo. Por defecto, se abrirá en el directorio de inicio. Podemos usar el comando CD solo para asegurarnos, así que escribe CD luego Enter luego lo llevaremos a tu directorio de usuarios de raíces. Podemos entonces teclear LS. Esto nos dará entonces una lista de archivos y carpetas para el usuario. Observe aquí el escritorio y aquí es donde voy a estar agregando mis proyectos. Voy a CD en el escritorio y pego Enter. Puedes crear este proyecto en cualquier lugar de tu máquina el cual prefieras. Quiero mantener esto en el escritorio para un fácil acceso. Entonces queremos ejecutar el comando NPX, crear aplicación React, separada por guiones. Entonces el nombre de nuestro proyecto, que voy a llamar reacciona Trello y luego golpea enter. Esto podría tardar un poco en ejecutarse ya que necesita tirar de todos estos scripts, dependencias y módulos para que reaccione se ejecute. Observe el comando NPX al inicio en lugar de NPM. NPX es una herramienta diseñada para instalar y administrar fácilmente paquetes CLI. Básicamente nos permite usar la app Create React, solo esta vez sin necesidad de instalarla en nuestro sistema. Danos unos minutos para terminar y luego pausar el video y te veré cuando esto termine. De acuerdo, entonces una vez que todo esto esté instalado, necesitamos cambiar a nuestro directorio de proyectos. Podemos hacer esto ya sea escribiendo en CD reaccionar Trello, como dice en la terminal, o podemos arrastrar sobre el proyecto desde nuestro escritorio. Agarra la carpeta del proyecto, arrastra esto y luego abre esto para arrastrarlo al código de Visual Studio. Verás que esto abre automáticamente la terminal a nuestra ubicación del proyecto. Ahora puedes seguir adelante e iniciar el servidor de desarrollo. Esto lo hacemos con un comando llamado estrellas NMP. Escribe esto y pulsa “Enter”. Esto configurará entonces el servidor de desarrollo en localhost 3000. Esto o bien se abrirá automáticamente en el navegador o puede navegar a localhost 3000, así como esto, pulsa “Enter” y ahora tiene una aplicación React básica en funcionamiento en el navegador. Es por ello que necesitamos ir a ver nuestro proyecto en el futuro. A menos que se esté ejecutando en un puerto diferente. Si desea realizar algún cambio, todo lo que necesita hacer es entrar en el editor de texto, luego en el directorio fuente y el app.js. No te preocupes por todo este código en este momento, solo bajemos aquí a los elementos p y digamos “Estoy aprendiendo reaccionar” guarde esto. Guardar este archivo provocará automáticamente que el navegador se recargue y actualice con nuestros cambios, los cuales acabamos de agregar. No necesitamos preocuparnos por actualizar el navegador después de cada cambio. Eso es todo ahora para nuestra configuración del proyecto. A continuación repasaremos cuáles son todos estos archivos y carpetas que se han creado para nosotros usando la aplicación Create React. 5. Archivos y carpetas de proyecto: Justo antes de ir más lejos, quiero darles una visión general rápida de qué archivos y carpetas en línea hay en nuestro proyecto, ya que se han generado para nosotros usando la aplicación Create React. No quiero simplemente suponer que sabemos lo que está pasando aquí sin ir más lejos. En primer lugar, en la parte superior tenemos la carpeta de módulos de nodo. Aquí es donde se almacenan todos nuestros proyectos, módulos o paquetes. Este directorio no es nada específico para reaccionar. Esto es típico de cualquier proyecto de nodo. Eso requieren lotes aquí si lo abrimos, y esta ubicación también es donde también se guardará cualquiera de los paquetes que instalemos. Posteriormente en el curso, descargaremos paquetes como Firebase y React router usando NPM. Veremos estos guardados aquí dentro. Aquí también es donde nuestro paquete reacciona real se guarda en. Si nos desplazamos hacia abajo, hay bastante que necesitamos bajar para reaccionar, reaccionar Dom, y también los scripts React, que echaremos un vistazo en tan solo un momento cuando lleguemos al paquete JSON. A continuación, por lo que tenemos la carpeta pública. El directorio público contiene nuestros archivos estáticos, como cualquier imagen que queramos utilizar, y también cualquier HTML. React tiene este archivo index.html. Si lo abres, desplazándote hacia abajo hacia abajo, eso no es mucho contenido aquí dentro. Si pasamos a nuestro proyecto dentro del navegador, y luego vamos a ver fuente de la página. Esta es la página que ves dentro de aquí. Aquí no muestra ningún contenido HTML real. A pesar de que vemos algo en el navegador. Esto se debe a la etiqueta de guión abajo en la parte inferior, que es ésta de aquí. Recuerda antes dijimos que Create React app, quita las fotos de configuración, para que podamos concentrarnos en crear nuestra app React. Bueno, esta es una de las cosas que hace. Utilizará paquete web para agrupar todos los archivos y activos que tenemos en nuestros proyectos. A continuación, crea un archivo de paquete como la salida. A continuación, este archivo se inyecta en los proyectos utilizando el script en la parte inferior. Se los inyecta en cualquier elemento DOM que elegimos. Actualmente se emitirá justo por encima del div con el id de raíces. Este es uno justo aquí. Podemos hacer clic en este enlace de paquete, que es el último enlace justo aquí, y abrir esto en una nueva pestaña. Este es todo el contenido de nuestro paquete. No te preocupes por todo lo que está dentro de aquí en este momento, todo es solo código generado para el desarrollo. Si hacemos una búsqueda, así navegar búsqueda de comando o control F, podemos buscar el texto que agregamos, y buscamos, “estoy aprendiendo reacciona”. Vemos que este texto está aquí abajo. Este archivo HTML también se puede utilizar para agregar scripts o teléfonos también. Pero esto también se puede agregar a menudo como módulos de nodo. La siguiente carpeta que tenemos es la fuente y aquí es donde estaremos pasando la mayor parte del tiempo durante este curso. Es donde agregaremos nuestro código raw, todos nuestros archivos JavaScript en componentes. Todos estos se incluirán en nuestro paquete, que acabamos de ver. Es así como lo convierten en nuestra app final. No existe una estructura estricta sobre cómo podemos hacerlo. Somos bastante libres de organizar todos los archivos y carpetas como nos guste. Si bien es común incluir una carpeta de componentes en el directorio fuente, lo haremos pronto. Obtendremos un montón de componentes de escritura de práctica también. Un componente es básicamente un bloque de código, que veremos con más detalle muy pronto. A continuación tenemos el app.css. Este es un archivo CSS principal que contiene algún estilo predeterminado. En React, es bastante común ver una estructura como esta, donde tenemos un archivo CSS por componentes, y en el caso aquí está el app.js. Este app.js es uno donde hicimos nuestros cambios en el último video. Nuevamente React es bastante flexible con las cosas. Pero esto se utiliza a menudo como un componente principal de nivel superior, o un contenedor para el resto de nuestro proyecto, estaremos usando este archivo para mostrar nuestro encabezado ya que esto estará en todas las páginas y luego abajo donde usamos un router para cambiar entre diferentes componentes dependiendo de la página que estemos viendo. Después de esto, tenemos la app.test.js. Este es un archivo si quieres probar en nuestro proyecto React, aunque no estaremos cubriendo las pruebas en este curso. A continuación tenemos el index.css. Este es un segundo archivo CSS que contiene estos estilos relacionándolo con nuestro index.js. Nuevamente, esto es sólo por separación y organización. Voy a eliminar este archivo para mantener todos los estilos bien juntos en un solo archivo. Es un tubo, voy a quitar esto, y luego abrir el index.js, porque eliminamos este archivo, también necesitamos quitar esta importación del index.css, y guardar este archivo. Este es un archivo JavaScript principal el cual va a ser responsable de renderizar nuestra app, el navegador. En la parte superior, importamos tanto React como también ReactDom desde nuestra carpeta de módulos de nodo. En Reaccionar los primeros días, solía estar en un gran paquete de reaccionar. Pero ya que ahora se puede usar para construir aplicaciones móviles con aplicaciones nativas de React o incluso de VR. Toda la funcionalidad principal ahora se almacena en este módulo reaccionar y cualquier funcionalidad relacionada con las aplicaciones web, ahora se encuentra en su importación separada llamada ReactDom. ReactDom tiene un método aleatorio, que decimos justo aquí, que se encarga de renderizar los contenidos al DOM. Este método aleatorio toma dos cosas. En primer lugar, tenemos los contenidos que desea mostrar, actualmente nuestros principales componentes de la app. Estos son los principales componentes de ruta, como mencionamos antes. A menudo se usa como envoltorio del proyecto. Al usar esto en un archivo, también necesitamos importarlo por encima de la parte superior, tal y como vemos aquí. Entonces segundo de todo, la ubicación donde queremos que esta app monte dos. Vi esto en una nueva línea, que actualmente se establece en un elemento con el ID de raíces. Que es lo que miramos antes en el index.html principal, el index.html público. Este es el div con la raíz ID, que hemos visto antes dentro del navegador. Entonces esto es básicamente decir: “Toma mi aplicación React y colócala aquí donde especificamos en la página de índice”. El motivo por el que hacemos esto es porque no siempre usamos React para nuestra aplicación completa. Es posible que ya tengamos unos proyectos existentes, donde sólo queremos usar reaccionar en cierta parte. Para este caso, nuestra página HTML puede tener mucho contenido existente y simplemente podemos agregar un nuevo elemento para montar reaccionar. Puedes cambiar esto para que sea cualquier cosa que quieras. Podemos agregar algunos código js X. Agregamos un encabezado de nivel dos, un título de React Treble. Entonces cierra esto. Veremos este código js X con más detalle pronto. Pero es básicamente una sintaxis que normalmente usamos en React, para mezclar tanto HTML como JavaScript juntos. Si guardamos este archivo y luego vamos al navegador, ahora vemos que nuestro encabezado Nivel 2 ha sido montado en el DOM. Si recargamos la fuente de la vista, seguimos viendo que no tenemos los contenidos. Todo lo que tenemos de nuevo es este div con la raíz ID donde se ha montado nuestra aplicación React. Vamos a cambiar esto de nuevo, a nuestros componentes de la aplicación. A continuación tenemos el logo.svg, que se proporciona para los datos de la aplicación Create React, y luego también un archivo de trabajador de servicio. Este es un archivo opcional para registrar a un trabajador de servicio. No estaremos cubriendo a los trabajadores del servicio en este curso, pero solían hacer que tu app funcionara fuera de línea, a menudo para habilitar cosas como notificaciones push. Si se utiliza GitHub, también tenemos un archivo gitignore dot ya instalado. Esto se utiliza para excluir cualquier archivo que no desee enviar a GitHub, como cualquier información sensible, que contenga contraseñas, o cualquier archivo grande o innecesario como los módulos de nodo. Debajo de esto, también tenemos el paquete.json. Este archivo de nuevo no es específico de React. Es algo que verás en un regular sin proyectos. Contiene información sobre nuestra app, como el nombre de la app, el autor, junto con cualquier dependencia que necesitemos para los proyectos. Dentro de las dependencias, tenemos el react-dom listado, tenemos react-dom y también tenemos los react-scripts. React-scripts es una biblioteca utilizada por la app Create React, e incluye todos los scripts y configuración que necesitamos para ejecutar react en el navegador. Convierte las dependencias que necesitamos, cosas al azar, burbuja y parque web detrás de bambalinas, y luego las agrupó todas en una sola biblioteca. Esto también facilita mucho el mantenimiento de todos estos paquetes, ya que solo tenemos una biblioteca de la que preocuparnos cuando lo actualicen. Estas dependencias en un no proyecto serían agregadas a nuestra carpeta de módulos de nodo, después de ejecutar un comando de instalación MPM. Todo esto también está siendo alacena para nosotros cuando configuramos el proyecto, debajo de nuestras dependencias, también tenemos algunos guiones. Ya usamos el script de inicio con MPM start arranca nuestro proyecto al principio. También hay un comando para construir nuestros proyectos para producción, uno para pruebas. Entonces también podemos expulsar de los scripts de React. Hemos hablado un poco hasta ahora sobre cómo mucha configuración es influir entre bastidores. No obstante, podemos usar estos scripts de expulsión para repasar toda esta magia oculta y luego colocar copias de nuestra configuración y dependencias, como paquete web y burbuja, luego colocarlos directamente en nuestro proyecto para poder editar estos nosotros mismos. También hay algo más de información al respecto en el archivo readme también, finalmente tener un archivo yarn.lock, no necesitamos preocuparnos demasiado por esto ya que un se autogenera, y contiene una lista de nuestras dependencias y versión exacta números que estamos utilizando. Esto es para nuestra estructura de archivos y carpetas. Nos familiarizaremos mucho más con esto a medida que construimos nuestra aplicación React. A continuación echaremos un vistazo más de cerca al uso de componentes. 6. Una mirada de los componentes: En el último video, mencionamos bastantes veces la palabra componente. Si aún no estás seguro de qué es un componente, ahora vamos a echar un mejor vistazo a lo que son. Un componente es una pequeña parte típica de su sitio web, que puede agrupar y colocar en él en su propio archivo. También puede ser reutilizable. Si tuviéramos un blog, por ejemplo, componente podría ser una entrada de blog. Esta entrada de blog componentes serían entonces reutilizados para cada post que tenemos. A pesar de que son reutilizables, todavía podemos alimentar datos en ella para hacerlos dinámicos. Podríamos alimentar componentes de blog, un título de blog, un texto de blog, y también una imagen. Para ver un ejemplo del mundo real, este es el proyecto que estarás construyendo en este curso. Usando algo como HTML estático, terminaremos con mucho código duplicado. Cada lista, que son las secciones libres de jardín, dormitorio, y cocina, y también cada una de las tarjetas individuales de la lista necesitaría su propio marcado HTML. Esto significaría mucho código HTML duplicado. No obstante, la forma de React es romper las cosas en piezas más pequeñas llamadas componentes. En la parte superior, un encabezado es un componente, y vamos a almacenar esto en un archivo Header dot js. Estos componentes también se pueden renderizar en cada página, evitando coordenadas en cada página, como haríamos con HTML regular. Debajo del encabezado de esta página, también tenemos componentes de tablero en un archivo llamado comprado Board dot js. Un usuario puede tener múltiples tableros, por lo que estos componentes también se pueden reutilizar. Se pasa en datos llamados apoyos para permitir que cosas como el título del tablero cambien para cada vista. En este caso, el título es casa. Anidados dentro de este tablero, tenemos una lista de componentes. De nuevo, tenemos un componente rendertido para cada lista en nuestra base de datos. Este es otro buen uso para un componente, ya que podemos volver a utilizarlo, y luego pasar datos o apoyos a cada uno, como el título y la funcionalidad para agregar una nueva tarjeta. A continuación, como habrás adivinado, cada tarjeta también es un componente, recibiendo apoyos como el texto y también las etiquetas. Cada vez que se añada una nueva lista o tarjeta, el componente volverá a ser reutilizado. Todo lo que vemos aquí es hijo de los principales componentes App dot js, que miramos antes. Es así como se usan los componentes en React. No hay una regla dura y rápida para cuando algunas cosas deben convertirse en componentes. Es algo que generalmente tienes que descifrar por ti mismo al crear un proyecto. A modo de guía muy general, deberíamos usar componentes si algo se va reutilizar o para agrupar funcionalidad relacionada. También hay ocasiones en las que un archivo se está haciendo demasiado grande. Esto también puede ser un caso para separar las cosas en componentes más pequeños, también. Ahora, tenemos una visión general de cómo se verán nuestros componentes. Pongamos a trabajar en crearlos en nuestros proyectos. 7. Componentes en la acción: Volver a nuestro proyecto, voy a crear una carpeta de componentes en el directorio fuente. En la barra lateral, vamos a crear una nueva carpeta llamada componentes. Esta carpeta es puramente para la organización y no es un requisito al usar reaccionar. También podemos dividirlo en subcarpetas dos, y lo haremos más adelante en el curso. Por ejemplo, podría tener una carpeta de encabezado dentro que contenga todos los componentes del encabezado y así sucesivamente. Si quisiéramos, sólo para mantener nuestros archivos más organizados. A continuación, nuestros tres componentes, que levantamos desde las diapositivas son board, card, y list. Dentro del directorio Componentes, cree un nuevo archivo. El primero va a ser Board.js, mayúscula B. De nuevo en la carpeta de componentes, el Card.js con mayúscula C. El tercero es para List.js con una L. mayúscula Es una convención de nomenclatura común para iniciar un componente React con una letra mayúscula. En primer lugar, pasemos al Board.js. Para cada componente donde usamos react, primero necesitamos importar el paquete React desde la carpeta Node Modules. Podemos hacer esto con importación React from React. Reacciona aquí siendo el nombre del Módulo Nodo. Entonces este es un alias que vamos a usar en este archivo. A pesar de que estamos requiriendo React cada archivo que utilizamos, solo se incluye una vez en la compilación final. No necesitamos preocuparnos por múltiples copias en nuestro proyecto. Además, si solo agregamos el nombre del módulo, al igual que reaccionamos, en lugar de usar una ruta de archivo, se asumirá que esto se almacena en la carpeta Modules Node. A continuación, necesitamos crear una clase que se vea así. El nombre de clase de Board se extiende React dot Components. Después abre los tirantes rizados. Este es un típico componente basado en clases React. Posteriormente, también veremos otro tipo de componente. Pero por ahora vamos a estar usando un componente basado en clases ya que tiene algunas características adicionales en las que nos meteremos. Entonces en la parte inferior después de estas llaves rizadas, export default, otro nombre de nuestra clase que es Board, export en estos componentes permitirá entonces que sea importado y reutilizado en otros archivos. Arriba estamos extendiendo o heredando todas las propiedades de React dot Components. React dot Components nos darán acceso a diversos métodos opcionales, como los métodos del ciclo de vida, que entraremos pronto. Pero el que se requiere es el método render. El método render, como suena, es uno que necesitamos para renderizar algunos JSX al navegador. Añadamos el método aleatorio dentro de aquí, que va a devolver algunos datos. El dato que vamos a devolver va a ser algún simple código JSX. Añadamos algunos elementos HTMLP con el texto de los componentes de la placa. Si guardamos este archivo y luego pasamos al navegador, y no vemos ninguno de los componentes de placa en la pantalla. Para poder ver esto, necesitamos decirle a React dónde queremos que se coloque esto. Vamos por el app.js del padre, ya que hemos exportado estos componentes de placa hacia abajo en la parte inferior, ahora podemos importarlo al archivo donde queremos usarlo. Vamos a hacer esto en el app.js, necesidad de importar nuestros componentes de placa. Dado que este no es un Módulo Node, también necesitamos especificar la ruta del archivo. Esto está dentro de la carpeta de componentes y el nombre era Board. No necesitamos la extensión dot js ya que esto se asume. Podemos entonces colocar estos componentes de placa exactamente donde queremos que se muestre. Vamos y lugar del texto que agregamos antes. Slash quita esto y luego el nombre de nuestro componente que era Junta. Este es un elemento de autocierre. Lo que significa agregar la barra inclinada hacia adelante al final. Es así como podemos colocar un componente en nuestro código usando React. Simplemente se ve como una etiqueta HTML autocierre, como una imagen. A modo de nota lateral rápida, es posible que hayas notado que este archivo app.js no tiene ningún método de render. Esto se debe a que se llama componente funcional basado, y los echaremos un vistazo más adelante. Guardemos este archivo y volvamos al navegador. Ya podemos ver que nuestro componente de tablero está jugando en lugar de nuestro texto. Ahora también puedes hacer lo mismo para el componente de lista también. Volver a la barra lateral, vaya al List.js. Al igual que antes, necesitamos primero importar React from react. Esto también va a ser un componente basado en clases que se va a llamar Lista. Esto también extenderá los componentes React dot. Podemos entonces utilizar todos los métodos que proporciona React. Dentro de aquí también vamos a agregar el método de render para mostrar nuestro JSX en la pantalla. Entonces vamos a devolver algunos JSX dentro de aquí. Al igual que antes algún texto simple hará para simplemente enumerar componente. Entonces justo al final también necesitamos exportar default, el nombre de nuestro componente, que va a ser List. Esto se anidará dentro de los componentes de la placa. Se puede importar dentro del Board.js, guardar este archivo y dirigirse a la Junta. Justo en la parte superior también vamos a añadir una importación para nuestra lista. Nuevamente, ya que esto no está dentro de la carpeta Node Modules, también necesitamos agregar la ruta del archivo. Este componente de lista está al lado de la Junta, por lo que solo agregaremos una barra y luego el nombre de lista. El paso final para que esto se muestre es entrar en nuestro método de render, y luego podemos añadirlo como un elemento de autocierre. Enumerar, como ya sabemos, los componentes son reutilizables, lo que significa que podemos agregar esto en tantas veces como quieras. Vamos a duplicar esto, y vamos a guardar esto y pasar al navegador. Estoy viendo un error dentro del navegador. Generalmente, en lo que respecta a los mensajes de error, React es bastante bueno para hacernos saber dónde radica el problema, y darnos una pista sobre cómo arreglar las cosas. El mensaje de error dice: “Los elementos JSX adyacentes deben estar envueltos en una etiqueta adjunta. ¿ Querías un fragmento de JSX?” Pronto veremos este fragmento de JSX. Pero este error básicamente es causado por un componente que no tiene una envoltura encima en el Board.js. En nuestro método de render, estamos devolviendo tres elementos diferentes. Todos estos tres elementos son efectivamente uno al lado del otro. Al usar React, sin embargo, un componente debe tener un elemento padre como envoltorio. Puede ser cualquier elemento que elijamos, pero un div aquí estaría bien. Añadamos un div, etiqueta de apertura en la parte superior. Podemos mover la etiqueta de cierre a la derecha hacia abajo, luego anidar dentro de nuestros tres elementos. Si ahora guardamos esto y volvemos al navegador, vemos un error. Esto debe extenderse con una S al final. Por lo que a nuestra lista. Ahí vamos. Guarda esto y luego pasa al navegador. Ahora veremos nuestros componentes de placa y luego anidados dentro tenemos nuestros dos componentes de listas ya que agregamos esto a nuestro método de render dos veces. Ahora podemos pasar a los componentes de la tarjeta, que también seguirán un patrón similar al tablero y la lista. Primero importamos React en la parte superior desde la carpeta Node Modules. Entonces podemos crear un componente basado en clases. Class Card extiende React dot Component, nosotros llaves, y luego podemos agregar nuestro método de render requerido, que va a devolver algunos JSX. Al igual que antes también añadiremos los elementos p, simplemente arrojando los componentes de la tarjeta. Entonces no olvides, abajo en la parte inferior, necesitamos exportar este archivo para poder usarlo en otros componentes. Export default, el nombre de nuestra clase, que es Tarjeta. Estas tarjetas están anidadas dentro del componente de lista así que vamos a importarlo en el List.js. Podemos importar esto. Ahora la parte superior del expediente. Esto también está al lado de la lista, por lo que sólo necesitamos la barra de puntos y luego el nombre del archivo, que es Card. Ahora abajo en el método render estamos poniendo el elemento p que acaba de cortar esto, y luego podemos agregar un div circundante para que no tengamos ningún mensaje de error en la consola. Podemos pegar esto de nuevo en y luego agregar dentro tantos componentes de Tarjeta como nos gusten. Voy a copiar y pegar esto en tres veces, luego pasar al navegador. Ahora veremos nuestra salida de componente de placa una vez. Tenemos entonces nuestras dos listas componentes, que es éste y también éste porque aquí sacamos la lista dos veces. Cada componentes de la Lista tiene entonces tres Tarjetas anidadas en el interior, razón por la que vemos tantos componentes en la pantalla. Si pasamos a las herramientas de desarrollador, haríamos clic derecho y luego inspeccionaríamos. Dentro de la pestaña Elementos si nos fijamos en la estructura HTML, tenemos un div circundante con un componente de tablero anidado en el interior. Entonces tenemos un div completo, que es para nuestra lista, que contiene los tres componentes de tarjeta dentro. Después de esto tenemos un segundo div, que es para nuestros componentes de segunda lista. De nuevo, esto también tiene nuestros tres componentes de tarjeta en su interior. También en la consola veremos que tenemos algunos mensajes de error. Si vamos a la parte superior, vemos un p elementos no pueden aparecer como descendiente de p. Esto es por la forma en que estructuramos nuestros componentes. Si vamos a la envoltura principal, que es app.js, tenemos los componentes de Board externos anidados dentro de estos elementos p. Podemos simplemente mover esto afuera. Guarda este archivo para que aparezca a lo largo los elementos y ahora no tenemos más áreas dentro de la consola. Ahora tendremos nuestra primera mirada sobre cómo funcionan los componentes. Ahora vamos a dar un paso adelante a las cosas en la siguiente sección, donde empezaremos a trabajar con datos y también pasarlos a los componentes. 8. Primera mirada en los estado y JSX: React es una biblioteca de vista front-end, por lo tanto necesitamos algunos datos con los que trabajar. Más adelante, nos centraremos en usar Firebase como nuestro backend para guardar datos no recuperados. Ambos por el momento, voy a estar usando algunos datos de muestra para trabajar. He proporcionado algunos datos de muestra, que puedes descargar y utilizar para este curso, que aquí tengo guardado en el panel. Empecemos creando un nuevo archivo en nuestro proyecto. Instalar este dato de muestra, queremos agregar esto en la fuente. Crear un nuevo archivo. No quiero llamar a esto el sampledata.js. Si abrimos estos datos de muestra, entonces podremos copiar los contenidos seleccionando todos. Después copia y pega esto en nuestro archivo de datos de muestra. Esto es simplemente algunos datos, por lo que podemos trabajar con componentes. Tenemos un array de tablero, que es simplemente tres tableros diferentes por los que se puede vivir. Debajo de esto también tenemos algunas listas. Estos están vinculados al tablero por el ID de la junta. También tienen un ID y un título, y luego anidado por dentro tendrá algunos conteos individuales. Esto ahora nos dará algunos datos básicos con los que trabajar en nuestros componentes. Al utilizar reaccionar, los datos actuales que no tienen componentes, se conocen como estado. Estado es un objeto en un componente que contiene datos que pueden cambiar. Por ejemplo, estará utilizando el estado en el componente de lista para almacenar todos los autos del Corán en esa lista. Estado es independencia de cada componente dos. Teníamos listas libres, igual que tenemos aquí. El estado será diferente para cada uno. Dado que todos los datos del coche son diferentes, el estado de la lista del jardín sería una matriz de tarjetas llamadas nuevas ventiladores de mesa sin fijar. El listado de componentes para el dormitorio uno tendría una matriz estatal de muebles nuevos , paredes de pintura, etc. Otra parte útil del Estado es que es dinámico. Significa que si el estado cambia, como cuando un usuario elimina una tarjeta, actualizará todos los componentes que utilizan datos. Estado también puede ser cualquier cosa como si el uso está conectado actualmente, si un modal pop-up está abierto actualmente, o el número de likes que tiene una publicación. Para echar un primer vistazo al estado. Pasemos al app.js y vendremos de nuevo para agregar nuestros objetos de estado. Justo después de la línea de función arriba. Podemos crear nuestro objeto estatal. Entonces dentro de aquí podemos agregar cualquier estado que queramos. Empecemos agregando un título audaz y pongamos esto igual a una cadena de ideas de casa. Este estado puede contener cualquier nombre y valor de los datos que queramos. Pero recuerda, estos son solo los estados iniciales y puede cambiar o actualizarse en cualquier momento. Si guardamos este archivo y volvemos al navegador, vuelve a nuestro proyecto. Vemos en el mensaje de error de estado no está definido. Esto está sucediendo porque los estados solo se pueden usar en un componente de clase. Recuerda antes cuando creamos el tablero enumerando los componentes de automóviles, creamos esto como una clase. tanto que si vamos al app.js, que se genera automáticamente para nosotros, tenemos una función base de componentes. Este componente de función es ideal para una función simple que sólo toma en cualquier dato como un prop. Veremos los apoyos muy pronto. Después renderiza algún contenido al navegador. Deja que solo te confunda aún más con la versión de reaccionar 16.8, sí introdujeron algo llamado Hooke, que nos permite hacer más con los componentes de la función, lo cual no podíamos hacer anteriormente. Pero eso no es algo de lo que tengamos que preocuparnos todavía. Entonces para agregar estado, lo que tenemos que hacer es convertir esto a unos componentes basados en clases. Se trata de sólo unos sencillos pasos. Lo primero que voy a hacer es limpiar esta declaración de devolución y eliminar todo el código innecesario. Saquemos el encabezado y también el nombre de clase de App. Danos un ahorro, ahora solo tendremos un div vacío dentro de nuestra declaración de retorno. Ahora necesitamos reemplazar esta primera línea de función App por una clase igual que hicimos en la pizarra. Por lo que necesitamos ampliar los componentes de reacción. Quita esto. Este es un componente basado en clases que se llama App. Esto va a entrar en extiende, reaccionar todos los componentes, asegurándose de que todavía tenemos las llaves que rodean todo este código. Entonces como mencionamos anteriormente, los componentes de una clase necesitan tener un método aleatorio. Tenemos que rodear la declaración de retorno con esto. Si pudiéramos simplemente devolver sentencia fuera, entonces podemos agregar en el método aleatorio dentro de las llaves colocadas en la sentencia return, save as file, ahora no debería ver errores dentro del navegador. Volver a nuestro estado en el app.js. Podemos acceder a nuestro estado usando las llaves dentro del div. Añadamos elementos IP para dar salida a nuestros estados. Los tirantes rizados. Podemos acceder al estado con este estado de punto. Entonces el nombre de nuestro estado llamó all title, nos da un save, y luego pasa al navegador. Ahora cómo el título de la junta de las ideas de la casa. En primer lugar, esto es lo que se llama código JSX, que nos permite mezclar JavaScript en nuestros elementos HTML. Estas llaves rizadas que rodean los estados se utilizan cuando queremos saltar a JavaScript, luego ejecutar el código en su interior. Podemos añadir cualquier JavaScript que queramos en estas llaves. Por lo que podemos hacer algunos JavaScript simple como 5 más 10. Entonces vemos el valor de 15. Todo lo que podemos hacer es algo como un registro de consola. Solo agreguemos una cadena de hola. Guarda esto, y luego vemos el valor de hola en la consola. Ahora, vamos a quitar nuestro registro de consola y el 5 más 10. Ahora vamos a actualizar nuestro estado con el valor de nuestros datos de muestra. Bueno, ¿cómo haríamos de actualizar o establecer el estado? Bueno, podemos hacer esto con un método llamado estado conjunto. En primer lugar, vamos a importar nuestros datos de muestra. Podemos usar esto en el archivo. Importa datos de un valor de cadena de barras de puntos y, a continuación, muestra datos. Entonces podemos configurar nuestro estado inicial del tablero para que sea una matriz vacía. Cambiemos el título del tablero para ser BoardT. Guarde esto ser una matriz vacía. Podemos obtener esto con un método personalizado fuera de la función de render. Pero render, podemos crear un método personalizado llamado Estado de actualización. Llamaremos a esto en tan solo un momento desde un botón. Pero esta va a ser una función de flecha ES6, donde vamos a actualizar el estado con el método set state. Podemos hacer esto con este estado de conjunto de puntos. Estos apuntan a nuestra instancia de componente actual. El estado que vive del estado de este componente es un objeto, cuando está pasando las llaves. El estado que queremos actualizar es este tableros aquí. En los tableros, y voy a poner esto igual a los datos. A pesar de que los tableros, data.boards son nuestros datos de muestra los cuales fueron importantes. El siguiente paso es crear ahora un botón en nuestro método aleatorio para luego establecer los estados. Por lo que dentro de pariente. Vamos a crear un botón. Dentro de aquí podemos añadir un oyente de clics. Nos poníamos al hacer clic y establecíamos esto igual a este estado de actualización de puntos, que es el nombre de nuestro método. On-click es una forma de manejar el evento muy similar a un manejador de eventos JavaScript regular. solo hacer clic, en cambio o en el ratón. Con JavaScript regular, todos son nombres en minúscula. No obstante, al usar JSX debo ser caso de camello, así como esto. Cada palabra después de la primera comienza con una mayúscula. Cuando se hace clic en este botón, entonces llamamos a nuestro método de estado de actualización personalizado en las llaves, que vamos a seguir adelante y ejecutar el código dentro de aquí. Después de esto, podemos entonces hacer un registro de consola para comprobar que se ha actualizado el valor del estado. Esto es JavaScript. Esto entra entre los tirantes rizados y de hecho haremos una mesa de consola. Es por un formateado. Podemos entonces dar salida a este estado de punto, tableros de puntos. Ahora vamos a echar un vistazo a esto en el navegador. Tenemos un error al actualizar estados necesita ser un colon. En lugar de igualar satisfacer colon. Después vuelva a cargar, haga clic en nuestro botón, y ahora vea una tabla con todas las tres piezas de información de nuestros datos de muestra. Tenemos los títulos de los cursos gratuitos, tenemos el fondo, el ID, y el número de índice. Es así como podemos actualizar nuestro objeto de estado usando los estados establecidos. No debemos sentirnos tentados, sin embargo, a establecerlo de cualquier otra manera, como este.. state, .boards es igual a algún valor. Hemos utilizado este método de estado conjunto por diversas razones. Establecer esto.state, .boards así como este, no activará un componente de fechas si cambia el estado. También puede ser menos performante también. Dado que varias llamadas de estado conjunto se pueden agrupar por lotes en una sola actualización. Slash, quita esto. Obtendremos mucha más práctica actualizando estado durante este curso. A continuación, veremos cómo podemos recorrer en bucle estos datos, y cómo establecer el estado inicial cuando un componente se carga por primera vez. 9. Ciclo de vida de componentes: Tener un botón como tenemos aquí para cargar nuestro estado inicial no es algo que sea muy práctico para este uso. Necesitamos una forma de establecer el estado tan pronto como se cargue el componente, y podemos hacerlo usando un método de ciclo de vida llamado ComponentDidMount. Cuando creamos nuestros componentes de clase, dijimos que el único método requerido que necesitamos es el método aleatorio. También hay algunos métodos opcionales, y uno que vamos a ver ahora se llama ComponentDidMount. Como su nombre indica, ejecutará cualquier código que agreguemos después de que el componente haya sido montado en el DOM. Un buen ejemplo de uno podemos usar esto, va a ser para cargar los datos de la muestra en nuestro estado. Vamos a añadir este en el app.js justo debajo de nuestros objetos estatales. Añadamos el componentDidMount. Este es el método, así que agrega los corchetes y las llaves. A menudo agrego mi estado en la parte superior, seguido de cualquier método de ciclo de vida como este, luego cualquier método personalizado, y luego seguido por el renderizado. Esto es completamente opcional y depende de ti cómo te gustaría presentarlos. Pero esto es algo que me he metido en hábitos de hacer. ComponentDidMount necesita actualizar el estado así que vamos a copiar esta línea desde antes, pegue nuestro método de estado conjunto dentro de aquí. También podemos eliminar este método de estado de actualización, guardar este archivo. Si ahora salimos al navegador y actualizamos, ahora vemos que nuestro estado se ha actualizado con la console.table sin hacer clic en un botón. También hay otros métodos de ciclo de vida disponibles, como ComponentDidUpdates, que ejecutará algún código después de que un cambio haya causado el componente se actualice como el cambio de estados. También contamos con componentes equivaldrán a realizar cualquier acción que necesitemos hacer después de que un componente haya sido montado desde el DOM. Estos ahora nos deja con los tres tableros de nuestros datos de muestra. Establezca los estados y típicamente lo que ahora quisiéramos hacer, es recorrer estos y luego mostrar los datos en el navegador. Dado que nuestros datos están en formato array, podemos usar el método de matriz JavaScript llamado Mapa. Esto es simplemente JavaScript regular y nada específico para reaccionar. Si vamos al app.js, podemos bajar al método aleatorio y vamos a reemplazar todos los contenidos por nuestro mapa. Retira los tres elementos dentro de nuestra envoltura div. Entonces dentro de aquí, ya que estamos usando JavaScript, podemos usar las llaves. Podemos acceder al estado igual que antes, con el inicio del estado. Recuerda, esto apunta a nuestra instancia de componente. Por lo que podemos acceder a estado con este estado de punto y luego el nombre de los tableros, pero no llamé al método de los puntos de simulacro. Dentro de aquí podemos pasar un nombre variable de tablero para cada elemento que encuentre en la matriz, luego crear una función de flecha. Esto va a ser responsable de la visualización en cada uno de nuestros tableros, así que vamos a añadir un div que va a rodear cada uno de los tableros libres en nuestros datos de muestra. Entonces vamos a dar salida a tres elementos. Una para el DNI, otra para el título y luego otra para el fondo. En primer lugar, vamos a crear un elemento span, que va a mostrar el ID del tablero. Podemos acceder a cada tablero con esta variable de tablero, luego pasar en el ID. Siguiente parada, un rumbo de nivel tres el cual va a mostrar nuevamente el título de tablero en los tirantes rizados. Después tercero y finalmente, podemos agregar un elemento p, que va a mostrar los fondos de tablero. Ahora podemos ver esto y luego pasar a nuestro proyecto en el navegador. Si actualizamos sí vemos nuestros tableros gratuitos en la pantalla. Tenemos las ideas del jardín, tenemos las ideas de la casa, y también las ideas del curso en la parte superior con nuestro título de tablero, nuestro ID, y el color de fondo. No obstante, dentro del navegador sí vemos que la consola tiene un mensaje de error de cada niño en una lista debe tener una característica clave única. Al renderizar una lista de elementos así, necesitamos añadir también una clave única para cada elemento. Esto ayuda a React a identificar qué elementos se han agregado, actualizado o eliminado. Ahora podemos usar el ID del tablero como clave, pero más adelante usaremos el ID único de Firebase para nuestros artículos. De vuelta al app.js, podemos ir al wrapper, que es este div. Podemos entonces añadir una clave que va a ser igual a la junta. ID. Después de volver al navegador, ahora veré que nuestro mensaje de error ya ha desaparecido. Estas claves deben ser únicas por lo que si teníamos más de un tablero con la misma clave, esto también provocará un error en la consola. En el siguiente video, vamos a reemplazar estos elementos de outs renderizado un componente real y descubrir cómo podemos pasar datos usando utilería. 10. Pasar los datos como accesos como accesibilidad: En el último video, mostramos cada elemento de tablero saltando y pondré en los elementos HTML. Ahora vamos a sustituir estos tres elementos, que fue el ID de placa, el tablero [inaudible] y el color de fondo por unos componentes de tablero. Si pasamos al app.js, ya tenemos los componentes de placa importados en la parte superior del archivo. Por lo que ahora podemos usar esto de lado del método de mapa en lugar de todo el código existente. En lugar de este DIV surround, podemos reemplazar esto. Entonces dentro del método del mapa, simplemente vamos a dar salida al tablero. Si ahora guardo esto y voy al navegador, aquí está pasando bastante. Para que podamos limpiar los componentes de la placa para simplificar las cosas. Entonces vamos al board.js, actualmente voy a poner en el título. Entonces dos componentes de lista en su lugar es justo con el título de componentes de tablero. Si guardamos esto, las cosas se vuelven mucho más claras ya que ahora somos salida en nuestros tres tableros. Uno por cada ítem en nuestros datos de muestra. En el app.js, sólo porque tengamos estos componentes de placa anidados dentro, esto no significa que hereda todos los datos que necesita. Tenemos que pasar cualquier dato al tablero usando apoyos, los apoyos es una forma en que pasamos los datos a los componentes hijos, decir, los apoyos siempre se pasan por el árbol de componentes. Esta es una de las reglas de oro de reaccionar. Hemos transmitido datos como prop, con estado siempre lo elevamos, es decir, si teníamos un estado que es compartido por dos componentes, siempre elevamos el estado hasta un componente padre. Por lo que ambos componentes pueden entonces tener acceso a ella. Pasamos los apoyos al igual que un HTML atributos y luego le damos un nombre y un valor. Entonces, por ejemplo, queremos pasar nuestros apoyos de esta información de tablero a estos componentes de placa. Podemos agregar los atributos y vamos a poner este nombre de prop a la pizarra. El dato que queremos pasar va a estar en las llaves y que este va a ser el dato del tablero de nuestro mapa. Añadamos tablero aquí, dale a esto un ahorro. Podemos entonces acceder al prop de placa dentro de los componentes de placa. Por lo tanto, dirígete al board.js. El modo en que accedemos a esto es muy similar a lo que hicimos con estados en lugar de estado [inaudible] dentro de los tirantes rizados, accedemos a los apoyos con este puntal top. El nombre de la prop que pasas por abajo era la pizarra. Por lo que este top apuntala a bordo. Después tenemos acceso al título del tablero, igual que lo hicimos antes en el último video. Con el navegador, ahora vemos nuestros tres títulos de tablero, por supuesto, ideas de casa, y jardín. También podemos pasar apoyos hacia abajo más de un componente nivel 2. Cubriremos esto muy pronto. Ahora quiero poner esto en práctica un poco más creando la página de inicio, que mostrará un tablero de componentes de vista previa. Echa algún vistazo al proyecto final. Esto es lo que vamos a estar creando. Habrá un tablero de componentes de vista previa para cada uno de los tableros en la pantalla. Entonces si hacemos click en esto, se llevará a la vista de pensión completa. Vamos a crear esto dentro de una nueva carpeta de componentes, abra la barra lateral. Podemos organizar los componentes creando una carpeta Pages dentro de aquí. Al igual que en esta carpeta Páginas no tiene diferencia en nuestros componentes. El único cambio que necesitamos hacer es la ruta del archivo al importar. Dentro de esta carpeta de páginas, voy a crear nuestro archivo, la vista [inaudible] escena y llamar a esto home.js. El hogar también es un componente pero como esto va a ser una vista de página, he agregado esto a la carpeta Páginas para mantener las cosas más organizadas. Ahora podemos seguir adelante y crear nuestros componentes importando reaccionar de 'reacción'. Esto también va a ser un componente de clase, que va a extender React.Components. Las llaves, esto necesita el método render, que va a devolver suma JSX. Todo lo que voy a agregar por ahora es un rumbo de nivel 1 con título de casa. Lo último que hay que hacer hacia abajo en la parte inferior del archivo es también exportar esto con los valores predeterminados de exportación. El nombre de nuestra clase, que es Home. Esta casa componentes. Si echamos un vistazo a la vista de meta, va a ser envoltorio para todas estas previsualizaciones de tablero. Después va a pasar los apoyos para el título del tablero y también el color de fondo. Por lo que primero necesitamos crear los componentes de vista previa del tablero, que se utilizarán para cada uno de estos ítems. Vamos a crear un nuevo archivo en la barra lateral. Esto no está en las páginas, esto es sólo directo a los componentes. Ahora este va a ser el BoardPreview.js. Esto también es un componente basado en clases. Entonces vamos a importar Reacciona de 'reacciona', crea nuestra clase. A éste se le llama BoardPreview. Por lo tanto se extiende React.Components, pasan en el método render. Entonces devuelve nuestro código SIG X, que por ahora va a ser un simple P elementos de vista previa de tablero. Entonces en la parte inferior, no olvidemos exportar default, nuestro nombre de clase de vista previa del tablero. Entonces, una vez que hayas terminado, dale una caja fuerte a este archivo. Por lo que ahora tenemos una situación en la que necesitamos pasar nuestros apoyos por dos niveles. Nuestro estado se almacena en el app.js. Entonces le pasaremos datos a los componentes del hogar, que es este envoltorio. Entonces desde el componente de casa hasta cada uno de estos anticipos de balón. Por suerte, esto no es demasiado difícil de hacer. El primer paso es mostrar realmente los componentes del hogar. Si vas al app.js, primero podemos importar el componente home que creamos a partir de nuestra ruta de archivo, que es. /componentes. Recuerda esto también está en la carpeta Páginas y el nombre de home down en la sección de retorno de nuestro método de render. También podemos reemplazar todo esto con los componentes del hogar. Conforme comprobamos, esto se está mostrando en nuestros proyectos. Por lo que ahora vemos los componentes del hogar. El siguiente paso es el pase esta casa componentes, estos estado de tableros, por lo que podemos hacer esto a través de apoyos. El consejo va a ser igual a esto.state.boards. Por lo que este es nuestro utilería ahora pasan por un nivel. Pasemos al home.js, donde ahora podemos acceder a estos apoyos. El siguiente paso es el pase de sus componentes de casa a la vista previa de tablero. Lo primero que tenemos que hacer es importar realmente la vista previa del tablero. Esto sólo vive dentro de la carpeta de componentes. Podemos acceder a esto con barra de puntos de punto y luego vista previa de bola. Abajo en el esfuerzo aleatorio, podríamos simplemente dar salida a la vista previa del tablero. Pero recuerda que sí tenemos múltiples tableros. En nuestro caso, tenemos tres estrellas en estados. Por lo tanto, necesitamos mapear a través de estos datos y luego emitir un componente de previsualización de bola para cada uno. Al igual que antes, utilizamos este top props, los tableros. Ya que hay tres de ellos, vamos a llamar al método de mapa JavaScript. Por cada una, vamos a conseguir una llave que usamos en tan solo un momento. Pero primero, vamos a dar salida a la vista previa del tablero. Cada elemento se almacena dentro de esta variable clave, que ahora podemos usar como clave e impostar cada tablero individual como prop. Como sabemos de antes, también necesitamos pasar estas claves como un atributo y establecer esto igual a nuestra variable de clave. Entonces necesitamos pasar el bono individual a esta pizarra previa que está en esto en unas líneas separadas para que sea más legible. Podemos pasar por el tablero individual y podemos acceder es con este puntales, tableros de puntos. Esto es accediendo a todos los tableros que recibimos vía utilería. Entonces podemos pasar en una clave para obtener el tablero individual de la matriz de tableros. Recuerda que esta clave es cada ítem individual. La primera vez que vivimos a través de los tableros, entonces generará una salida de componentes de placa o una vista previa de placa, luego pasar el tablero individual. Después vivirá a través de la segunda, también sale una segunda vista previa de tablero y luego también pasará la segunda tabla como prop. Entrará esto para cada elemento de nuestra matriz. Ahora si decimos esto, ahora podemos ir a la vista previa del tablero y hacer uso de esta prop de tablero. El [inaudible] por dentro, devolvamos declaraciones. Podemos quitar la vista previa del tablero codificado duro. Podemos entonces acceder a este puntal, al prop de tablero y luego podemos acceder al título del tablero. Guardemos esto y actualicemos antes de ir más allá y veremos en la consola que tenemos un error. No tenemos token inesperado en el home dot js. De vuelta al hogar. Esto se debe a que en nuestra sección de devoluciones estamos poniendo en dos componentes adyacentes. Leve quitar esto y rodeado en un div. Pero recuerda, reacciona sólo nos permitirá tener un artículo de padres como rapero. Al final de la sección de resultados, podemos cerrar esto, recargar. Esto ahora nos da un mensaje de error de “No se puede leer el título de propiedad de indefinido”. ¿ Por qué no podemos leer el título dentro de nuestros componentes? El adelanto de la pizarra. Esta es esta línea de código justo aquí. Bueno, la razón por la que esto está sucediendo es porque aunque todos los tableros en estos datos de muestra se almacenan como una matriz, cada tablero individual se almacena como un objeto, por lo que tenemos en estado una matriz de objetos. Si vamos a los componentes de casa dentro de aquí utilizamos el método .map. El mapa es un método de matriz. De lo que estamos tratando de usarlo aquí en un tablero, objetos. Para arreglarlos podemos envolver esto. props.boards que es un objeto en el método object.keys. Cortemos esto.apoyos, .tableros y luego podemos usar objetos.claves. Entonces dentro de los corchetes podemos pegar esto de nuevo. Object.keys es un método de objeto que extraerá todos los nombres de propiedad del objeto y luego devolverá una matriz. Aquí básicamente estamos convirtiendo estos datos de objeto a ser array. Por lo tanto, podemos usar el método.map y todo lo que ahora deberías trabajar como se pretendía. Este object.keys es un método JavaScript regular. Nuevamente, nada específico para reaccionar. Ahora si guardamos este archivo y volvemos al navegador, este error ahora desaparece, bueno y cosas y están funcionando correctamente. Hemos pasado el estado de la junta abajo dos niveles y luego pondré el título en la vista previa del tablero. Ahora preguntamos una etapa donde tenemos componentes anidados. Poco común, todo lo que podemos ver es texto plano en el navegador. Sin tener un router en su lugar, un switch entre nuestras páginas o componentes. Puede llegar a ser difícil visualizar exactamente lo que está pasando con nuestros componentes. Para ayudar con esto, podemos usar las Herramientas de Desarrollador React, que está disponible para Chrome y Firefox. Si las has instalado temprano en el curso al configurar las cosas, genial. De lo contrario, sigue adelante y busca las herramientas reactivas y agrega la extensión para Chrome o Firefox. Una vez hecho esto, podrás hacer click derecho y luego inspeccionar y ahora deberíamos ver las herramientas de desarrollador de reaccionar disponibles para seleccionar, así que haz click en esto. El desarrollador de herramientas React es algo que usaremos bastante para este curso. Tendremos mucha más práctica. Podemos ver actualmente en el árbol de componentes, tenemos el envoltorio de aplicaciones principal. Podemos abrir esto y luego dentro tenemos un div circundante el cual contendrá nuestros componentes caseros. Esto es exactamente lo que vemos en el app.js. Contamos con nuestros componentes, tenemos nuestro div y luego tenemos nuestro componente de casa anidado en el interior, que está pasando por las tablas como apoyos. También podemos ver los apoyos dentro de las herramientas de desarrollador. Si hacemos clic en los componentes del hogar, vemos que estamos pasando por los tableros como apoyos, que es una matriz con tres elementos. Podemos inspeccionar esto y ver toda la información de cada ítem. Vemos que mucho, estos tableros son una matriz. Estos elementos individuales son un objeto, por lo que necesitábamos convertir cada elemento con object.keys. Si abrimos el envoltorio de casa, entonces vemos dentro de cada uno de los anticipos del tablero. También tienen la clave para permitir reaccionar para actualizar correctamente cada ítem de la lista. Podemos seleccionar estos y también vemos los apoyos que se transmiten. Este es un objeto con el tablero individual donde podemos acceder al fondo, al ID y al título. Dice título, que hemos utilizado para dar salida al navegador, así como utilería. Si vas a los principales componentes de la aplicación, también vemos el estado que es el componente mantiene y esta es la información que se extrae de los datos de muestra y luego se pasa vía utilería. Estas herramientas de desarrollador son realmente útiles y haremos uso de éstas a medida que avancemos el curso. A continuación, vamos a seguir con los apoyos subjetivos y echar un vistazo a cómo podemos pasar métodos entre componentes. 11. Métodos de paso como accesibilidad: No son solo datos los que podemos transmitir a los componentes. También podemos pasar por abajo un método dos. El método que estaremos agregando pronto es crear un nuevo tablero, que obtendrá el estado de la junta en el app.js. Ahora como estamos actualizando el estado almacenado en app.js, también agregamos. creamos nuevo método de tablero dentro aquí también. Vamos a repasar y crear está ahora en el app.js, voy a ir a este archivo. Entonces justo debajo de nuestro componente se montará. Podemos crear un método personalizado llamado “CreateNewBoard”, esta va a ser una función de flecha ES6, que va a tomar en un tablero, que le pasará pronto. Entonces aquí vamos a actualizar el estado un poco diferente. Echemos un vistazo a cómo vamos a usar este estado de conjunto de puntos. Aquí adentro, todavía vamos a pasar en un objeto y actualizar nuestros tableros. Pero esta vez vamos a crear una matriz. Entonces aquí al actualizar el estado, al usar React, generalmente no queremos mutar el estado directamente. Es mejor primero, tomar una copia del estado existente. Podemos hacer esto con el operador de spread, que es un tres puntos. Podemos tomar una copia de los estados existentes mediante el uso de “this.state.boards”. Entonces después de esto separados por una coma, podemos fusionarnos en nuestros nuevos datos, que va a ser esta variable de tablero, que se pasa por nuestro método. Entonces cuando llamemos a esto pasará los datos sobre la nueva junta, luego actualizará el estado, luego agarrará una copia de los estados existentes y luego se fusionará en ella es nuestra nueva junta directiva. Si echamos un vistazo a la versión terminada justo aquí, estos son los componentes del hogar. En el interior de aquí es donde vamos a “Crear un nuevo tablero”. Por lo tanto, desencadenando este método. Este método necesita activarse desde los componentes del hogar, es decir, cuando pasa una referencia a este método y ¿cómo pasamos los datos a los componentes hijos? Hacemos esto vía utilería. Entonces en app.js, vamos a bajar a donde renderizamos nuestros componentes caseros. Entonces podemos pasar una referencia a nuestro método. Entonces, “Crear nuevo tablero”. De hecho, podemos agregar esto en el switch online. Entonces podemos igualar esto a esto. Entonces nuestro nombre de método llamado “createnewboard”. Encima en los componentes de casa, que es el home.js, podemos crear un botón para crear nuestra nueva placa. Entonces dentro de nuestro “div”, Vamos a crear esto ahora. Dentro de un aquí podemos crear un manejador de clics. Entonces “OnClick”, entonces vamos a crear un nuevo método llamado “esto.Newboard” y sus actos de newboard dentro de aquí. Entonces este nuevo método de junta, que estamos llamando aquí, no tiene nada que ver con el que hemos pasado por los estados. Llamaremos a esto en tan solo un momento. Vamos a subir y crear esto ahora fuera del método aleatorio, ahora podemos crear esto.Así que vamos a crear nuestro “NewBoard”. Configuración, una función de flecha ES6. Entonces aquí dentro queremos hacer dos cosas. En primer lugar, queremos agarrar todos los datos del tablero de nuestro formulario y luego vamos a llamar al método de crear nuevo tablero, que se transmiten desde app.js. Por el momento, no tenemos este formulario para agarrar sus datos. Entonces solo voy a tener que codificar algunos datos por ahora. Vamos a crear nuestros objetos de tablero. por lo que “const board” va a ser igual a un nuevo objeto. Esto necesita un título llamado esto cualquier cosa que quieras. Yo quiero decir, “Viajes a tomar este año”, separados por una coma. También necesitamos antecedentes para este tablero. Voy a establecer su “fondo” para que sea un valor de cadena,” 80ffaa”. A continuación voy a añadir la propiedad “CreateDat”. Esta va a ser una “nueva Fecha”. Por lo que fechas un nuevo guión. Nos vamos a almacenar en la fecha para la nueva Junta y también la nueva lista y nuevas tarjetas. Esto nos permitirá más adelante devolver toda esta información de vuelta en orden a partir de cuando fueron creadas. Entonces este es nuestro nuevo tablero ahora de código duro. Podemos entonces llamar al método de crear nuevo tablero, cual será transmitido vía apoyos y enviado fuera de este nuevo bono como argumento. Entonces justo después de nuestros objetos “esto.props.CreateNewboard”. Fijación de este tablero el cual ilustró. Por lo que ahora esta parte pasaremos con el método CreateNewBoard. Lo llamará en el app.js. Este método recibirá entonces el tablero y luego lo fusionará en estados. Entonces vamos a guardar esto y luego pasemos a nuestro proyecto. Podemos probar esto. Vayamos a nuestra app. Tenemos el nuevo botón de bola. Vamos a dar click en esto. Después obtenemos una actualización incidente de viajes para tomar este año. Mayor significa que ahora tenemos este nuevo modo en un estado. Esto es lo que mencionamos antes cuando dijimos que cada vez que se actualice el estado, React actualizará entonces todos los componentes que necesiten esa pieza de información en particular. También podemos ver en el app.js, si bajamos al estado, ahora tenemos nuestro tablero extra añadido dentro de aquí. Este es uno que produjo codificado duro y luego pasó como argumentos con este método. Si actualizamos sin embargo, este ítem desaparecerá ya que todavía no tenemos ninguna base de datos permanente. Pero esto es algo que agregará más adelante en el curso. Ahora pasemos a la lista. Si miramos esta vista final de tablero y luego hacemos clic en cualquiera de las previsualizaciones de bolas dentro de ella, lo llevamos a los componentes de tablero. Este componente de tablero necesitará acceso a todas las listas cargadas actualmente. En nuestro caso, sólo tenemos estos gratis. También necesitaría agregar una nueva entrada de lista hacia abajo en la parte inferior. Actualmente en nuestra salida no se ve esta vista de bola. Si vamos sobre todo cargado en secreto es los componentes de casa y luego siguiente dentro de nuestra junta previsiona. Podemos empezar a trabajar con estos componentes de placa. Podemos ir al app.js y agregar el temporalmente. Esto será hasta que introduzcamos el ruteo en un apartado posterior. Entonces, en primer lugar, en el app.js te hace todavía tenemos la información del tablero de antes. Después desplácese hacia abajo hasta nuestro método aleatorio. También podemos agregar los componentes de placa dentro de nuestra envoltura. Entonces cerraré esto ahora y pasaré a este board.js. Podemos sumar las listas en estado. Por lo que cada componente individual también puede tener sus propios estados locales. Vamos a crear nuestros objetos de estado. Quiero cargar la lista actual, y establecer esto en un valor inicial de una matriz vacía. He llamado a este estado, a las listas actuales porque más adelante, también vamos a filtrar las listas para sólo mostrar las de un tablero en particular. Podemos entonces agarrar nuestras listas de los datos de la muestra. En primer lugar, importando en la parte superior del archivo. Voy a importar nuestros datos desde la ruta del archivo, que es los datos de muestra de puntos de barra inclinada. Pero entonces una vez más, podemos usar ComponentDidMount para cargar estos en estado. Este es un método que deberíamos llamar a este punto setState. Estableceremos nuestros objetos, que va a agarrar las listas actuales y establecer esto igual a nuestros datos de muestra, que son listas de puntos de datos. Siendo los datos una variable que tenemos de nuestros datos de muestra, y luego la lista es la lista de datos que usted tiene justo aquí. Ahora tenemos estas listas actuales. ¿ Qué queremos hacer con ellos? Bueno, queremos renderizar un componente de lista para cada uno, al igual que el gratuito que se ve aquí. Hacemos esto igual que antes cuando vivimos a través de los datos, y ahora ponemos un componente de lista para cada uno. Empecemos en el board.js. Bajemos a nuestro método aleatorio y podemos empezar a trabajar aquí dentro. En primer lugar, en el div circundante, agreguemos un nombre de clase que va a ser igual a list-wrapper. Esto es para CSS. Observe aquí cómo estamos usando el nombre de la clase en lugar de solo clase, como haría en HTML normal. Bueno, al usar reaccionar, la palabra de clase es una palabra clave reservada. Por lo tanto, al agregar cualquier clase CSS, sí necesitamos usar estos atributos de nombre de clase en su lugar. En el interior de aquí, podríamos mover nuestro título de cuatro. Entonces dentro de las llaves, vamos a mapear a través de las listas actuales. Entonces al igual que antes, vamos a usar estas listas.state.current. Al igual que antes, estas listas .state.current es un objeto en lugar de una matriz. Para resolver esto, voy a cortar esto, y de nuevo, usar objects.keys, y luego dentro de los corchetes podemos pegar esto de nuevo. Al igual que antes, esto convertirá esto en una matriz, por lo que podemos usar el método de mapa de puntos. También vamos a pasar en la llave, se asentó la función de flecha. Para cada lista en estados, luego vamos a correr hacia abajo los componentes de la lista. Esta lista también necesita tomar una llave. Esta clave va a ser igual a esto.state.current listas.current. No vamos a pasar en la lista individual con esta clave, para después agarrar el DNI. Asegúrate de que aún tenemos los componentes de la lista importados en la parte superior del archivo desde antes. Dale un guardado a este archivo. Entonces podemos ir al navegador y echar un vistazo a esto. Ahora veremos nuestros componentes renderizados a la pantalla. Aquí está pasando bastante. Limpiemos los componentes de la lista. Vamos a entrar en el list.js. Entonces en lugar de sacar nuestras tarjetas gratuitas, vamos a quitar esto. Debería quedar mucho más claro ahora, si actualizamos esto. Esa es nuestra lista de componentes gratis. Probablemente sea un poco difícil ver lo que está pasando aquí, así que abramos las herramientas desarrolladas de reaccionar. Echa un vistazo más de cerca. A partir del nivel superior, tenemos el app.js con nuestros tableros que están en estado. Dentro de aquí tenemos un div circundante, que luego dará salida a los componentes del hogar, mostrando las ideas de causa, casa y jardín. Después de esto, agregamos temporalmente en el componente de tablero. Podríamos ver esto y los componentes de la placa está renderizando artículos de lista libre. Cada elemento de la lista es que simplemente oportunas el texto del componente de lista, que está justo aquí. También pronto emitiremos un título de lista y también los conteos. Con estas listas ahora exhibiendo en la pizarra, podemos hacer algo similar a principios de este video y además agregar una nueva lista. Encima en el board.js. Podemos hacerlo creando un nuevo método. Justo debajo de componente en montaje. Vamos a crear un nuevo método llamado crear nueva lista. Sirven como función de flecha. Dentro de aquí vamos a construir nuestra nueva lista. Esto sólo va a ser muestreado datos por ahora. Primero necesitamos agregar una identificación a esta lista. Posteriormente vamos a estar usando Firebase para agarrar este ID. Pero por ahora podemos usar math.dot random para generar un nuevo ID usando JavaScript. El título, llamemos a esto mi lista increíble. Esto también necesita estar vinculado a un tablero. Podemos elegir un DNI. Vayamos por 300. También podemos agregar la propiedad CreateDat ans establecer esta como una nueva fecha usando Javascripts. Ahora tenemos nuestra nueva lista creada. El siguiente que hay que hacer ahora es empujar esto a nuestro estado actual. Ahora podemos hacer esto con esto.state. Agrega en nuestros objetos. El estado que queremos obtener son las listas actuales. Al igual que antes, la lista actual es una matriz por lo que podemos pasar esto. Nosotros, en primer lugar, vamos a fusionarnos en las listas actuales, con los tres puntos. Esto.Estado.Listas actuales separados por una coma. Después vamos a fundirnos a nuestro estado actual. El listado que se creó, justo arriba. Esto es todo lo que necesitamos hacer ahora para este método, el siguiente paso es crear un botón para activar este método sigue. Hacemos esto abajo en el método aleatorio. Vamos a ir por debajo del envoltorio de listas. Vamos a crear un botón. Podemos agregar un manejador de eventos al hacer clic, que va a desencadenar nuestro método, que se llama esto.crear nuevas listas. Después un nombre de nueva lista para nuestro botón. Una vez hecho esto, dale este archivo guardar y podemos ir al navegador. Intentemos dar click en nuestro nuevo botón de lista. Después conseguiremos un nuevo componente de lista renderizado como verde. Si entramos en nuestra aplicación y luego en nuestra junta directiva. En el interior aquí, podemos revisar el estado actual para todos los tableros. Ahora tenemos nuestros cuatro ítems de lista. Si vamos a nuestro último, que es uno que acabas de agregar, vemos el título de mi increíble lista. En primer lugar, de nuevo, al igual que antes, si recargamos el navegador, esto desaparecerá. Ya que actualmente no tienes ningún almacenamiento permanente. Para redondear las cosas, en lugar de emitir el texto de los componentes de la lista, podemos acceder a las indicaciones en cuanto a ello en su lugar. En primer lugar, en el board.js. Podemos pasar estos apoyos a cada lista. Ya tenemos la llave. Eso está bien. Entonces después de esto, también podemos pasar nuestra lista. Podemos agarrar los datos con esto.state. Nuestras listas actuales, pasando en la clave, guarde este archivo, y luego podemos modificar nuestros componentes de lista así que pondré el título del list.js. En primer lugar, agreguemos un nombre de clase al envoltorio. El nombre de la clase va a ser igual a la lista o a nuestro CSS. Este título también va a estar en un div circundante, que va a tener un nombre de clase de encabezado de lista. Entonces cierra esto. Ahora podemos mover nuestros elementos p dentro de esta sección de encabezado, y reemplazar el texto de menos componentes por nuestros accesorios. Dentro de los tirantes rizados, este top props.list, y luego podemos acceder al título de la lista. Si todo está funcionando bien, ahora deberíamos ir al navegador y ahora ver el título de nuestras listas gratuitas. También podemos dar click en nueva lista, y veremos el título de éste también. Bien. Si todo está funcionando ahora para ti, ahora vamos a pasar al siguiente video. Vamos a buscar validación de tipo de prop. 12. Valorización de tipos de Prop: al pasar datos entre componentes, es una buena idea proporcionar alguna validación. El componente Jacquet está obteniendo exactamente los datos que necesita. Por ejemplo, si un componente espera un objeto pero obtiene una matriz, podría rompernos. Y esto es exactamente lo que hemos visto antes, cuando necesitábamos convertir un objeto usando objetos darkies. Esto será utilizando tipos adecuados, que es una biblioteca proporcionada por Facebook para realizar estas comprobaciones. Es sencillo conseguir palabras abiertas corridas improvisa con errores durante el desarrollo. A los dueños. Si nuestro prototipo falla, vamos a instalar esto en la terminal. Podemos cerrar o terminal con comando o control, no ver dinero para instalar esto desde MPM con el MP M I, y luego el nombre del paquete, que es tipos de prop. Es respuesta y danos unos momentos para instalar dentro de tu proyecto y luego volver una vez que esto se haga. De acuerdo, bienvenido de nuevo. Una vez instalado esto, necesitamos importarlo a cada archivo que recibe los apoyos. Empecemos por lo alto del árbol, que es el upto Js. Este es el nivel muy superior, por lo que no recibe ninguna solicitud de los componentes. Pero en cambio sí pasa apoyos hacia abajo al hogar y también las tablas más adelante. En el curso los componentes del hogar reciben los tableros en el tipo de los tableros está en Ray y también crear nuevo tablero es una función. Entonces empecemos de nuevo en este componente hogareño. ¿ Cómo podría comenzar un problema de trabajo? Validación. En primer lugar, en la parte superior del archivo, podemos importar los prototipos de paquetes. Cómodo. P Tía podría impartir esto desde el módulo de tiempos adecuados. De acuerdo, entonces a continuación voy a armar estos tipos de utilería justo fuera del fondo. El expediente. Yo quiero hacer esto justo por encima de nuestros valores predeterminados de exportación. Podemos hacer esto con el nombre de todos los componentes, que es casa. Nunca se fue. Establezca los tipos adecuados. Tan poco caso P. En este caso, sobre los inmigrantes, eso es igual a un objeto el cual contendrá el prototipo para cada propiamente dicho, cual se transmite. El 1er 1 es para los tableros. Entonces podemos establecer los tipos adecuados, que es mayúscula P anti, que es el que importamos arriba en la parte superior. Y luego después de este concierto, qué tipo de datos esperamos recibir si pensamos el tiempo. Podemos ver algunas de estas sugerencias en el interior aquí cuando queramos. En este caso es una matriz. También puede establecer esto como un campo obligatorio el cual se requiere separado por una coma. También podemos hacer lo mismo para nuestro segundo prop, que es crear nuevo tablero. Gran bola nueva Esta vez es una función y podemos declarar queremos un tipo de función con litera. Esto también se requiere. Por lo que también cambia hasta el final. El siguiente que hay que hacer es reiniciar nuestro servidor con estrellas MPM. Una vez que esto se hace mirando testículos, pasillos sobre en el navegador, el momento no vemos ningún problema. Pero si cambiamos uno de los tipos adecuados, digamos de array para ser un tipo de objeto. Digamos esto. Es decir, voy a ver un tipo de prop fallido que así llamó y cambia para ser una matriz una vez más bajo , Entonces guarde este final. Vayamos a la barra lateral. El siguiente abajo es el tablero dot Js board dot Js Js no está recibiendo actualmente un utilería se ha movido hacia abajo a la vista previa del balón. Volveremos a este tablero más adelante en el curso, igual que antes. El primero que hay que hacer es importar los tipos adecuados y luego, después de esta semana en una vez más, bajar justo al fondo, justo encima de nuestro valor predeterminado de exportación, el nombre del componente, vista previa fuera de bordo y luego establezca el tiempo adecuado con una minúscula, sea como que sea igual al objeto. El único y propio que la vista previa del balón es puede es desde casa. Y si subimos cuando estamos internamente board vista previa fue enviando la prop de tablero. Este es un tipo de objeto. Vamos a configurar los tipos de prop Capital P y A Capital T. Este es un tipo de objetos sobre eso. Esto también se requiere a los siguientes componentes abajo en la barra lateral va a ser la tarjeta. Vamos a dar click en esto. Volveremos a esto pronto, ya que no estamos usando estos componentes de tarjeta todavía en nuestro proyecto. Por lo que finalmente tenemos la lista de componentes doctor s. Esto toma en una lista, por lo que también necesita un tipo adecuado. Hagamos nuestras importaciones sobre la parte superior en prototipos completos de tipos de prop desplácese hacia abajo. Podemos configurar estos en la parte inferior con menos tipos de utilería de puerta, por lo que voy a objetar hasta el tipo de puntal simple. Cual recibir es la lista en la que el prototipo es un objeto. Esto también se requiere a Nosotros lo haremos, por supuesto, en el de hoy. A medida que pasamos más apoyos en también crear más componentes, no pueden los médicos. componente por el que mencionamos no está actualmente en uso, pero vamos a hacer uso de esto ahora incluyéndolo para cada tarjeta en nuestros datos de muestra. Como vemos aquí, el componente de tarjeta está anidado dentro de cada lista, es decir cuando está en esto más en la lista. Doctor, como componentes, vayamos a la lista. Brazo del Dr. A. Podemos hacer esto ahora. Por lo que dentro de aquí va por la pelota lateral. Vamos a rentar un auto componentes por cada tarjeta en una lista. Recuerde los datos de muestra como una matriz de tarjetas en una tarjeta, una tasa por lista. Entonces pasemos por la lista y podemos hacer esto ahora por mi pin a través de todos los apoyos debajo del título. En Debajo de la lista. Más duro. Abramos las llaves esta vez es un objeto. Por lo que también necesitamos ejecutar jockeys de objetos para transformar nuestros apoyos en una matriz. El utilería una vez se transforman. ¿ Esto no es utilería? El listado Tarjetas de nota. ¿ Qué? Voy a fregar a través de los resultados. Cada ítem estará dando este nombre de variable clave. Y luego dentro de estos cohetes, no podemos poner una carta por objeto encontrado en el bucle. Y asegúrate de que esto tenga que cerrar y cohetes, y luego dentro de aquí, todos podemos poner sobre los componentes de la tarjeta, hazte esto todavía se importa sobre la parte superior del archivo, que es que no podemos una clave, pero vas a ser igual a todas las claves. Valioso. Podemos pasar los datos como apoyos. Esto va a ser esto. Sin utilería. No enumerar dot com y luego dentro de los corchetes pasaría en la clave. Cierra esto con una barra inclinada hacia adelante sobre los factores en esto en su línea. Ahí vamos. De acuerdo, entonces ahora estamos reproduciendo una tarjeta al pasar los apoyos. Vayamos a la tarjeta, Doctor. Sí, Todos podemos manejar estos datos que se le pasan. Por el momento, sólo tenemos un div que va a rentar el texto. Entonces primero lo primero podríamos subir a la cima en importar nuestros prototipos y desde el paquete de tiempos adecuados. Entonces a estos a la derecha en la parte inferior por encima de nuestro valor de exportación. El nombre del componente de las tarjetas. No hay tiempos prob configuran un objeto. El nombre propio es datos sobre el tipo de prop es un objeto, que también se requiere. Entonces antes de ir más lejos, digamos estos componentes de tarjeta y luego pasemos al navegador y tenemos un nunca en la lista línea 15. Vayamos allá ahora línea 15. Tenemos los datos. Esta lista de inicio de prop top. Andi debería ser tarjetas dentro de s al final. Probemos esto ahora. Bien. Entonces ahora veamos un título de lista y también las cartas asignadas a cada una. Es un poco difícil ver lo que está pasando. No, porque falta el estilo, ya sabes, componentes. Entonces tenemos frijol, agregando, es, um, clases a medida que avanzamos. Tal como La lista tenía un en también esta lista, y también han proporcionado algunos CSS para ir con su curso para maquillarse un poco mejor. Puedes encontrar este archivo CSS ya que se descargan con el curso. Así que adelante y agarra el CSS como un bajón señor. Y luego una vez que no lo sepas, podemos pegar esto dentro de la app dot CSS. Entonces voy a eliminar todos los estilos existentes y luego pegar en todos los estilos que se han proporcionado. Entonces ahora si damos este último guardar y nos vamos al navegador Así que ahora podemos ver más claramente nuestra lista gratuita en los datos de muestra, tenemos nuestros títulos de lista y luego tenemos dos cartas dentro de cada lista. Por lo que todavía queda un poco de trabajo por hacer pero ahora se puede ver la lista en los autos con mayor claridad. Entonces esto es todo ahora para nuestros tipos de utilería. Todos contesto esto a medida que vamos por el resto del curso. 13. components controlados: Si tuviéramos más de dos cualquier número de URL como 1,2,3 y luego reenviar tableros de barra. Esta vista es renderizada por los componentes del hogar. Esto contiene un nuevo botón de tablero. Si hacemos clic, esto agregará luego algunos datos codificados duros a nuestros estados de la junta. Este nuevo botón de tablero está de ancho en el home.js. Este es un botón y activará un método llamado newboard. Todos estos datos del tablero están actualmente codificados, pero queremos que el usuario agregue el nombre del tablero y también seleccione el color. Al igual que con cualquiera de los sitios web, podemos hacerlo con un formulario. Vamos a tener esto en la barra lateral. Vamos a entrar en los componentes y luego crear un nuevo archivo para esto llamado CreateBoardForm. Con la extensión dot js al final y asegúrate de deletrear bien. Ahí vamos. El primero que queremos hacer es importar React desde “reaccionar”, así como siempre lo hacemos. Entonces va a ser un componente basado en clases. Quieres llamar a esto igual que el archivo, que es CreateBoardForm. Esto se va a alargar los componentes de React. Dentro de aquí agregamos nuestro método aleatorio requerido, que luego simplemente va a devolver algunos js x como nuestros elementos AP. Con los textos de hi. Volveremos a esto en tan solo un momento y crearemos nuestra reforma. En primer lugar, vamos a exportar el valor predeterminado. CreateBoardForm. Guarda este archivo y luego podemos importar este archivo en él a nuestros componentes de casa. Desplázate hacia arriba hasta la parte superior debajo de nuestros tipos de utilería. Podemos importar CreateBoardForm. El camino del archivo que necesitamos va a ser barra de puntos de punto. Entonces dice CreateBoardForm. Desplazándose hacia abajo a nuestro esfuerzo aleatorio, ya no necesitamos este botón que tendrá aquí, ya que vamos a reemplazar esto por una forma. En el lugar aquí podemos agregar nuestros componentes CreateBoardForm. Se cierra mientras estamos aquí hasta que podamos agregar un envoltorio de previsualización de tableros, que va a ser una inmersión circundante. Esto solo agregará el estilo en el que necesitamos usar CSS. Podemos agregar nuestro nombre de clase. Este va a ser igual a board-preview-wrapper. Después agarra la inmersión de cierre y agrega esto justo después de la abrazadera rizada de cierre. Este board-preview-wrapper nos dará el diseño de cuadrícula CSS para todas nuestras vistas previas de tableros. Guarda este archivo y luego pasa al navegador y ahora vemos el texto de hi, lo que significa que ahora se está renderizando nuestro componente. También nuestras vistas previas libres y se están mostrando en el formato de cuadrícula en lugar de en una lista. Volver a los componentes CreateBoardForm. Podemos crear nuestro marcado de formulario. Vayamos a la cabeza. En lugar de este texto alto, podemos quitar esto. Podemos agregar un formulario dentro de aquí. Esta forma también va a tener un ClassName, que se convierte en o create-board-wrapper. En primer lugar, necesitamos una entrada con el tipo de texto. Que va a ser por nuestro nombre de junta. Cierra esto y en una línea separada voy a agregar el tipo que va a ser igual al texto. También necesita el nombre, que va a ser igual a nombre. Entonces finalmente un valor marcador de posición, que va a ser nombre de tablero. El segundo insumo que se forma va a necesitar va a ser un cuadro selecto. Es así como el usuario puede seleccionar el color de fondo para este tablero. Crea un cuadro de selección. Abramos y cerremos esto. Esto disgustado también necesita un nombre atributos que va a ser igual a fondo. En el interior aquí enumerarán entonces nuestras opciones las cuales están disponibles para el usuario. Voy a añadir seis colores diferentes. Puedes agregar cualquier valor de color que te guste estos, o puedes pegarte con los que yo quiero elegir. El primero va a ser un valor azul. Podemos agregar lo mismo usando los atributos de valor. El valor x de 80ccff. Quieres copiar y pegar esto en cinco veces más. Dándonos seis valores de opción. Es un común va a ser para un color verde. El valor x va a ser 80ffaa. El tercero va a ser rojo, que es un valor de f94a1e. El cuarto es para un color rosa. El valor x esta vez es ffb3ff. Entonces tenemos un segundo a último morado, que es bf00ff. Por último tenemos el color naranja. Esto es ffad, doble tres, y ahí están nuestros seis colores. El último ítem que necesitamos agregar es para un botón de enviar con los textos de creación de nuevo tablero. También necesita un tipo que se va a presentar. Esto es todo lo que necesitamos hacer por nuestra forma. Guarda este archivo y luego pasa al navegador y abre la parte superior. Ahora vemos nuestras entradas de nombre del tablero. Tenemos nuestro desplegable con estos colores lácticos y nuestro botón de enviar. Este es nuestro formulario que ahora se muestra en el navegador. Pero ahora necesitamos una forma de obtener la entrada de datos por parte del usuario. Hay un par de formas de hacer esto cuando se usa React. Primero es lo que vamos a ver ahora llamado componentes controlados. Esto generalmente significa que React toma el control de los datos, los cuales escribimos y luego los almacena en estados. Entradas de formulario HTML como esta entrada y selecto tenemos típicamente mantener su propio estado, significa el desconocimiento de lo que el usuario escribía. Es posible que haya utilizado el event.target.value antes para acceder a esto. Podemos entonces acceder a este valor y colocarlo en estado. Una vez que esté entonces en estado, podemos usarlo para crear nuestro nuevo tablero. Podemos empezar por crear nuestro estado por defecto. Pasemos a CreateBoardForm. Justo debajo de nuestro título de clase. Añadamos nuestros objetos de estado. En primer lugar, podemos agregar el título y satisfacer un valor inicial de una cadena vacía. También podemos establecer un valor predeterminado de cadena basado en el fondo de 80ccff, que es solo nuestro primer valor azul. Este será nuestro color de fondo predeterminado si no se selecciona ninguno más. Desplácese hacia abajo en una forma. Dentro de estas entradas, podemos crear un manejador de eventos en línea, establecer el estado cuando un usuario escribe en las entradas. Podemos hacer esto justo debajo del marcador de posición. Podemos agregar el manejador de eventos on change y satisfacer una función en línea, que toma en los datos del evento como e Esto va a ejecutar una función que va a ejecutar estados. Podemos pasar esto como un objeto y el estado que queremos cambiar es el título que se quiere establecer en e.targets. El valor e.target. value es los datos de evento que es tecleado por el usuario. Entonces también podemos hacer lo mismo por el fondo también. Desplázate hacia abajo hasta nuestro selecto justo después del fondo dentro de la etiqueta de selección de apertura. También podemos agregar un manejador de eventos on change. En esto nuevamente, en línea pasando en los datos del evento, crea nuestra función de flecha, que también se va a establecer el estado, con este estado de conjunto de puntos, objetos personales. Pero esta vez queremos establecer el fondo dentro de los estados. Esto también es e para objetivo de valor. Cada vez que el usuario escriba algo en el formulario o cambie las entradas selectas, entonces ejecutará esta función y actualizará nuestro estado. A continuación, podemos probar esto agregando un método on submit al formulario. Bajar a nuestro botón y de hecho, vamos a añadir esto a los elementos de forma reales y estos a la línea. Esta vez el manejador de eventos está en presentación. Una vez que el formulario ha sido enviado, entonces queremos ejecutar un método personalizado llamado esto un handle submit. Esto hará que el método handle submit se ejecute cada vez que se haya enviado el formulario. Podemos probar esto arriba con un simple registro de consola. Fuera de nuestro método aleatorio, podemos crear nuestro método personalizado de maneja envía pasando en los datos del evento. El primero que hay que hacer es ejecutar e o evitar el defecto. Esto evitará el comportamiento predeterminado una vez que se haya enviado el formulario, que luego será volver a cargar el navegador, y no queremos hacerlo ya que uno reacciona para tener control de cuándo se recarga y se actualiza la página. Podemos entonces hacer un simple registro de consola al navegador, que va a dar salida a este estado de punto. Este estado de punto nos mostrará entonces el título y el fondo que el usuario ha escrito una vez enviado este formulario. Digamos esto y luego pasemos al navegador. En la pestaña de la consola. Escribamos cualquier cosa aquí. Cambia el valor y crea nuevo tablero. Esto parece que tuvimos una cumbre esto, vamos a comprobar qué está pasando. Es un error ortográfico, así que maneja, somete e intentémoslo una vez más. Recarga y podemos sumar nuestra prueba. Probemos con el color predeterminado. Voy a tener un título y un fondo. Cambiemos el color y también el título y ahí vamos. Ahora el estado ha sido actualizado con la entrada de valor por parte del usuario. Ahora podemos terminar nuestro método creando nuestro tablero. Instala esto como un objeto. Quitemos el registro de la consola. Crear una constante para tablero. Este será un objeto que va a tomar en el título, que podemos agarrar de estados con este título de punto de estado punto, separado por coma. Esto también necesita agarrar el fondo. Esta también es fácil. Este es el estado de inicio, el fondo. Entonces podemos agregar el valor de creado en, que al igual que miramos antes, va a ser igual a nueva fecha de punto. Por lo tanto, podemos agarrar esto de la base de datos en orden de tiempo. Todavía no tenemos ningún dato de usuario, por lo que podemos agregar una cadena simple. Vamos por a, b, c 1, 2 ,3 dándonos los datos del tablero que necesitamos enviar a la base de datos. Si pasamos al app.js, todavía tenemos un método llamado create new board. Esto también toma en los tableros, pero tenemos esto ahora que podemos pasar junto con el método. Sí tenemos que pasar este método hacia abajo como utilería y llegaremos a esto en tan solo un momento. Pero primero queremos agregar una declaración if para comprobar primero si existe el título de punto del tablero. Queremos comprobar si este título de punto de tablero está ahí, porque si no lo es, esto significa que el usuario está tratando de presentar un tablero sin nombre. También queremos comprobar si el fondo de punto de tablero existe también, lo que debería, porque tenemos esto almacenado en estado. Entonces podemos ejecutar nuestro método de crear nuevo tablero con este punto prop, dot crear un nuevo tablero. Pasando en nuestros nuevos objetos de tablero. Ahora el siguiente paso es realmente asegurarse de que estos apoyos estén siendo recibidos por esta forma. Abre el app.js, tenemos nuestro método de crear nuevo tablero, que se establece en los estados. Actualmente estamos colocando esto en los componentes del hogar. Vamos a ir al home dot js, este home dot js entonces necesita pasar esto hacia abajo para crear forma de tablero. Podemos hacer esto ahora, así que crea nuevo tablero. Esto es igual a nuestros accesorios, por lo que este punto props punto crea nuevo tablero. Esto ya debería estar disponible en nuestro formulario. Sólo una cosa que hacer antes de seguir adelante y echar un vistazo a esto es que todavía tenemos este nuevo método amplio justo arriba en nuestros componentes de casa. Ahora podemos quitar esto ya que esto ya no es necesario. Guarda esto y asegúrate de que todos nuestros archivos estén guardados y dirígete al navegador. Ahora podemos probar esto. Añadamos un nuevo tablero. Voy a ir adelante a hacer, que va a ser de color rojo y luego crear nuevo tablero. Crear nuevo tablero no es una función. Esto se acabó por aquí. minúscula w, intentemos uno más. Eso se debe en un color rojo. Crea nuevos tableros y ahora veremos que nuestro tablero ha sido empujado a estados y luego renderizado en el navegador. Para redondear este video, estamos pasando apoyos, lo que necesitamos alguna validación de propiedad dentro de toda forma. Comencemos primero en el formulario de creación de tablero importando nuestros tipos de prop de nuestro paquete de tipos de prop. Entonces como siempre, podemos sumar esto a la baja en la parte inferior de nuestros componentes, justo por encima de nuestra exportación. Crea tablero forma dot prop tipos, p minúscula, conjunto de todos los objetos. El único prop que estamos recibiendo para este componente es crear nuevo tablero. Este nuevo tablero va a tener el tipo de función de prop, que se sumará con dot func. Esto también se requiere ya que siempre queremos poder agregar un nuevo tablero. Guardemos esto y vayamos al navegador y comprobemos que no hay problemas, y todo se ve bien. El siguiente tema seguiremos mirando formularios echando un vistazo a los componentes de control y también usando refs. 14. components y refs incontrolados: El método controlado que miramos en el último video, es la forma generalmente preferida de manejar formularios. Ya que reaccionar está en pleno control y también puede manejar cualquier actualización. Ahora descubriremos una forma alternativa de crear una forma en reaccionar, y esto se denomina componente incontrolado. De esta manera, los datos del formulario son manejados por el DOM y puede ser una alternativa útil para evitar escribir manejadores de eventos para cada entrada de formulario. Para este ejemplo, vamos a construir en las formas y una nueva lista. Hacemos esto más en los componentes board.js, y en esta diapositiva aquí, esta es la nueva lista de entradas que vemos en la parte inferior izquierda, así que mirando esto en la parte inferior de los componentes bowl después de la lista wrapper div. Vamos a ir allá ahora a nuestro proyecto en Visual Studio Code. Abramos el board.js, y luego si vamos al div de cierre para este envoltorio de lista que es éste de aquí. Podemos entonces crear nuestra forma. Dentro de este formulario, vamos a agregar un manejador de eventos de envío. On Submit no va a disparar un método personalizado, que se llama la estrella, crea una nueva lista. Si nos desplazamos hasta la parte superior de estos componentes, ya tenemos crear nuevas listas dentro de nuestros métodos, por lo que podemos hacer uso de esto muy pronto. Después de esto, también podemos agregar un nombre de clase para nuestro estilo y establecer esto en nuevo envoltorio de lista. Ahora después de que el primero se fue a anidar dentro de una entrada de formulario, la entrada va a tener el tipo de texto que se cierra a sí mismo. En nueva línea podemos agregar el tipo de texto. Ya que todo lo que recibimos por el usuario son las entradas de texto para una nueva lista, también necesitamos un nombre. Simplemente podemos llamar a su nombre, y luego un valor de marcador de posición para que el usuario sepa exactamente qué está escribiendo y agregar un símbolo más y luego el texto de la nueva lista. Aquí, actualmente tenemos nuestro div rodeado, seguido de un elemento de forma justo después. Como ya sabemos, reaccionar no nos permitirá hacer esto porque necesita elementos de un padre. Eso es agregar un div como envoltorio. Taquemos la etiqueta de cierre y los lugares justo después de nuestro formulario. Guardemos esto, y luego pasemos al navegador. Dentro del navegador tenemos nuestra nueva lista de entradas, y también este botón que tenemos de antes, que está activando el mismo método. Bajemos a nuestro método aleatorio. Podemos quitar este botón de antes ya que ahora tenemos nuestra entrada de formulario. A continuación, desplácese hacia arriba hasta nuestro método de crear nueva lista, que establecerá el estado. Ya que en esta versión no estamos usando el estado para administrar las entradas de formulario, necesitamos una forma de acceder a los elementos DOM y luego configurarlos a este objeto de lista, es decir, necesitamos agarrar la entrada que el usuario ha ingresado y establecer esto a nuestro objeto de lista, y reaccionar nos da una forma de hacerlo usando refs. Refs son formas de acceso al DOM y nos dan toda la información que necesitamos, incluyendo el valor ingresado en una entrada de formulario. Podemos crear una nueva ref con el método create ref. Hagamos esto arriba crear nuevas listas. Damos nuestro nombre ref, quiero llamar mina addboardinput. Para mantener el nombre descriptivo se puede establecer una ref con react.create ref, y los corchetes utilizados posteriormente. Entonces podemos pasarlo a nuestros insumos como atributos ref. Llamemos a las entradas a bordo, bajemos a los elementos de los que quieres la información. Voy a añadir esto en cualquier lugar como atributo. Podemos establecer la ref igual a estos puntos agregar entrada de tablero. Esto adjuntará esta referencia a esta entrada HTML, y podemos acceder a ella arriba en nuestro método para soltar las propiedades que necesitamos arriba en él crea una nueva lista. Ahora también podemos pasar en la información del evento con la variable e, entonces podemos acceder a esto para evitar el comportamiento por defecto. Esto básicamente evitará que la página se recargue cuando enviemos el formulario. Para probar esto, voy a comentar el código y luego la consola log la ref. Eliminemos los estados conjuntos y también nuestra lista, y asumamos un log de consola con el valor de nuestra ref, que es este, .addboardInput. No necesitamos el punto y coma, así que vamos al navegador. Tenemos una flecha dentro de la pizarra, así que conseguimos la nueva lista, descomentamos este corsé de cierre, y ahí vamos. Ahora dentro de nuestra nueva lista, sin nada dentro de aquí, ve a la consola, y luego obtenemos el valor de nuestra ref, que apunta a nuestra entrada actual. Ahora hay mucha información sobre la entrada justo aquí. Pero el que nos interesa particularmente es el valor actual, por lo que arriba en nuestro registro de consola, ahora podemos liberar a.current.value. Esto nos dará el valor ingresado por el usuario, vamos a escribir cualquier cosa en esta entrada. Ahora obtenemos el texto que ha sido ingresado por el usuario. De vuelta a nuestro balón, ahora podemos descomentar este código. Eso es como todas las líneas cuando se comenta, que es la lista, todo el camino hacia abajo para establecer estado. También podemos eliminar el registro de la consola, y ahora podemos usar el valor ref dentro de nuestro título en lugar de este valor codificado duro. Podemos hacer esto quitando la cadena, y luego en su lugar podemos apuntar a esto.AddboardInput, y luego tal como hemos visto antes en el registro de la consola, podemos agarrar el valor actual. Ahora guarde esto y pasemos al navegador. Probemos cualquier cosa aquí dentro, nueva lista dos, y ahora de nuevo error. El motivo de esto ha terminado en los componentes de la lista. Dentro de aquí estamos buceando a través de cualquier tarjeta disponible dentro de nuestra lista. No obstante, dentro de estos componentes de bola, cuando creamos una nueva lista, no tenemos la configuración de tarjeta dentro de este objeto. Por lo tanto, reaccionar no puede encontrar ningún valor y causa un error. Posteriormente si basé estos autos se separarán de las listas, por lo que como medida temporal, voy a añadir algunas tarjetas simples al crear una nueva lista. Justo después de nuevos días agregaremos temporalmente algunas tarjetas que va a ser una matriz de objetos. Añadamos id 1, algo de texto y digamos tarjeta 1. Separados por común, podemos agregar un segundo objeto con una id de 2 y también algún texto de la tarjeta 2, y también añadir la coma justo después de creado en. Vamos al navegador, y ahora si agregamos una nueva lista, responde. Ahora se agrega la nueva lista dentro del navegador. Justo antes de terminar esto, hay algunos pequeños problemas que arreglar. En primer lugar, si eliminamos el contenido de nuestras entradas de formulario y presionamos enter, vemos que ahora podemos agregar una lista vacía, y también el número 2 la entrada no se borra después de agregar una nueva lista. Pulse enter, y queremos que este valor se borre para la siguiente lista. Estas son cosas bastante sencillas de arreglar. En primer lugar, podemos agregar una declaración if para comprobar si el título está presente, antes de establecer un estado. Podemos hacer esto de lado del board.js. Busquemos nuestra llamada falsa de set, que acaba de estar aquí. En la línea anterior podemos crear un comunicado if para comprobar si la list.title está presente. Si esto.set state y luego mover esto dentro, esto entrará, detendrá una lista vacía que se agregue. Podemos probar esto. Si tocamos enter en esta nueva lista, vemos que no se ha agregado ninguna nueva lista. siguiente es claro la entrada después de que enviemos una nueva lista, podemos hacer esto por dentro del tablero, .js. Justo después de esta etapa, podemos refrescar o restablecer el valor de nuestro ref para que estos puntos sean de entrada de tablero. Podemos establecer el valor de la columna, igual que usamos antes para ser igual a una cadena vacía. Pon a prueba esto. Cualquier cosa aquí dentro. Y ahora nuestra nueva lista de entradas ahora está vacía. Ahora esto está funcionando, podemos conseguir un poco más de práctica en el siguiente video creando el nuevo formulario de tarjeta. 15. Crea un nuevo formulario de tarjeta: El nuevo card formado va a ser similar al último video, por lo que vamos a conseguir un poco más de práctica usando gráficas y también empujando a todos los estados objeto. Estas serán las nuevas entradas de tarjeta que veamos en la parte inferior de cada una de estas tres listas, mínimas conectadas en los menos componentes de estas tarjetas. Vayamos al list.js. Dentro de los componentes de la lista y debajo de nuestra sección actual, también podemos agregar una nueva forma, por lo que justo debajo de nuestro bucle y también todavía dentro de este div circundante, podemos entonces agregar un formulario. El formulario va a tener un método on submit, que va a ser igual al valor de esto.CreateNewCard. También podemos agregar un nombre de clase y establecer esto en new-card-wrapper. También agrega esto a la on-line, por lo que queda más claro. Ahora dentro de esta forma, podemos seguir adelante y agregar nuestra y nuestra entrada, igual que hicimos al agregar una nueva lista. El insumo va a tener el tipo de texto. Vamos a cerrar esto, y en una nueva línea podemos agregar el tipo. Después de esto, esto también va a tener el nombre y esto es igual a nombre, y luego finalmente un marcadores de posición, que al igual que el último video va a ser un símbolo más, y luego el texto de nueva tarjeta. Esto es todo lo que necesitamos hacer por nuestra forma. Esto también necesitará un ref, por lo que podemos crear esto en lo más alto de nuestra clase. Justo por encima de nuestro esfuerzo aleatorio podemos agregar nuestro NameInput, responde esto a React.CreateRef. Entonces necesitamos agarrar este NameInput y añadirlo a nuestro formulario. Dentro de la entrada como atributo podemos agregar la ref, igual que hemos usado antes, y así es al valor de this.NameInput, vinculando el valor de esta entrada a nuestra ref. Por el momento por simplicidad nuestras tarjetas están contenidas dentro de las listas en los datos de muestra. En breve todos los tableros, listas y también las tarjetas también serán independencia, y luego los vinculamos vía ID. Podemos iniciar este proceso sumando los estados de tarjetas actuales dentro del E2. Arriba en la parte superior de estos componentes, podemos crear nuestro objeto estatal, y este estado va a ser el responsable de almacenar las tarjetas actuales. Por el momento sin embargo, este es el estado inicial que se va a establecer en una matriz vacía, y el proceso de creación de una nueva tarjeta es muy similar al último video cuando agregamos una nueva lista. Todo lo que necesitamos hacer es ir por debajo de nuestro ref fuera de nuestro esfuerzo aleatorio y luego podemos crear una nueva tarjeta, y recordar este nombre la mayoría enlaza con el método que nos agregan en enviar, por lo que “crear nueva tarjeta” va a ser una función que se va a tomar en el info del evento. Vamos a configurar nuestra función de flecha así. Entonces podemos evitar que el comportamiento predeterminado impida que el navegador se recargue, luego crea nuestra tarjeta. Podemos almacenar esta tarjeta dentro de una constante y guardarla en un objeto. El objeto de tarjeta va a tener el texto, el ID de lista al que se vincula, un array de etiquetas, y también la fecha en la que se creó. En primer lugar, el texto que es para esta tarjeta que podemos agarrar de nuestros refs. Esto se almacena dentro de NameInput, y una vez más podemos agarrar el valor con.currrent.value. Separados con la coma, también podemos vincular esto a una lista agregando un LisID. Posteriormente en este curso, este ListId se colocará automáticamente en los siguientes, pero por ahora podemos agregar cualquier valor dentro de aquí. Al lado de arriba una tarjeta también necesitará una matriz de etiquetas, así que vamos a establecer esto en una matriz vacía inicial, y también el CreateDat, que va a ser igual a una nueva fecha JavaScript. Debajo de este objeto, también podemos establecer los estados, pero justo antes de hacerlo comprobaremos si la tarjeta.text está presente, lo que evitará que se envíen las entradas de formulario, lo cual no tiene valor. Podemos entonces llamar a esto.setState, como en nuestros objetos. Estos estados que queremos establecer son las tarjetas de colores, por lo que vamos a hacer lo que hemos hecho anteriormente. Dentro de este objeto de estado vamos a establecer las CurrentCards imaginando el CurrentState con el operador spread, lo que this.State.CurrentCards, luego separados por coma también añadirán en nuestra nueva tarjeta. Lo siguiente que hay que hacer después de esto es restablecer también nuestra entrada de formulario, así que vamos a añadir esto a una nueva línea para que quede más claro. Entonces debajo de esta corneta rizada para las sentencias if podemos entonces restablecer el cuadro de entrada de texto accediendo a la ref con NameInput, y luego establecer el valor actual.value para que sea igual a una cadena vacía. Para comprobar si esto está funcionando, podemos hacer un registro rápido de consola justo después de esto con la cadena de nueva tarjeta agregada, y podemos agregar al final la tarjeta.text o al navegador. Ahora tenemos nuestras nuevas entradas de formulario de tarjeta al final de cada lista, así que agreguemos cualquier cosa aquí. Déjame que me agreguen nueva tarjeta y luego texto. Probemos este, y ahora todos estos están funcionando bien. Voy a dejar las tarjetas como están por ahora, ya que comenzaremos los datos reales de la tarjeta desde base [inaudible] en una sección posterior, luego vincular estas tarjetas a cada lista. 16. Configuración de React: Por el momento en nuestro proyecto, hemos mostrado tanto los componentes del hogar como los del tablero. Podemos ver esto si vamos a las herramientas de desarrollador React dentro de nuestra aplicación, tenemos esta sección de inicio, mira la parte superior aquí y luego debajo de ella estamos renderizando los componentes de la placa. Esto se debe a que actualmente no tenemos forma de cambiar entre estos. Idealmente, sin embargo, lo que queremos después de iniciar sesión es que se lleve a este componente de casa, donde luego podremos seleccionar cualquiera de estos tableros, podemos hacer click en él y luego ser llevados a esta vista de tablero. Básicamente, eso tiene que estar en páginas diferentes. Para que esto suceda, podemos instalar un router el cual nos permitirá mostrar ciertos componentes en ciertas URL. Por ejemplo, la URL de los tableros inclinados hacia adelante renderizarán estos componentes de placa. También contaré con una URL para casa. Desafortunadamente, ese reaccionar no tiene un paquete de router oficial pero probablemente el más utilizado es el paquete react-router-dom, que es la versión web del router. Este es un paquete maduro el cual se mantiene activamente y podemos instalarlo usando NPM. A nuestro proyecto, abramos una nueva terminal y luego dentro de aquí, vamos a ejecutar el NPM. Yo react-router-dom, separado por guiones, dejo que esto se apague. Existen diferentes enfoques que podemos tomar para configurar nuestro router en el proyecto, como agregar el router a un archivo separado y luego importarlo a nuestra aplicación principal. También podemos agregarla a nuestro index.js. Pero como sólo tenemos unas pocas páginas para cambiar, voy a configurar esto en nuestro app.js. Vamos a ir allá ahora y luego arriba en la parte superior, lo primero que tenemos que hacer es importar los paquetes que necesitamos del router del navegador. Estos se llaman exportación, por lo que los agregamos dentro de las llaves. El primero que necesitamos es el BrowserRouter, mayúscula B, y luego la R mayúscula separada por una coma. También necesitamos importar el paquete de ruta. Entonces tercero y finalmente, el switch se va a importar desde el paquete del router, que es react-router-dom. En primer lugar, tenemos este BrowserRouter. Esta es nuestra implementación real del router. Lo usaremos como envoltorio para todas nuestras rutas y utiliza la API de historial HTML5. Después de esto, tenemos las rutas, esto se utilizará para renderizar un componente para una URL determinada. Por último, tenemos switch, este es un wrapper para múltiples rutas. Yo sólo renderizaré nunca la primera ruta que coincide. Vamos a darle una oportunidad a esto y añadirlo al método aleatorio envolviendo los componentes con el router. Abajo a nuestro método aleatorio, donde pondré nuestro hogar a bordo, rodeando estos dos componentes dentro del div. Entonces quiero hacer uso del BrowserRouter, que acabamos de importar, que acabamos de importar, por lo que la etiqueta de apertura, y luego agregar la etiqueta de cierre justo después de la pizarra. Después podemos venir a encontrar nuestra placa y nuestros componentes domésticos y luego hacer uso del router para controlar esto. Voy a empezar con la ruta de abordaje. El camino a domicilio toma los apoyos por lo que volveremos a esto muy pronto. Hagamos uso de nuestra parte de Enrutamiento con una R mayúscula, esto es autocierre. Entonces en el interior pasamos en el camino que va a ser igual a tablero inclinado hacia adelante, por lo que cada vez que el usuario visita estas rutas de tablero inclinado hacia adelante, pero luego queremos renderizar un componente, podemos agregar los componentes, y éste va a ser los componentes de placa, y esto necesita un B mayúscula, para que coincida con los componentes que importamos en la parte superior de este archivo. De vuelta a nuestro router, otra ruta que necesitamos es una pagenotFound para atrapar toda tu ruta la cual no agregamos dentro de aquí. Justo debajo de nuestro tablero, vamos a añadir una segunda ruta. No necesitamos añadir un camino esta vez porque esto recogerá todos los caminos que no están declarados anteriormente. En cambio, todo lo que necesitamos hacer es renderizar un componente. Voy a agregar un componente llamado Page Not Found, luego cerraré esto. Este componente aún no se ha creado, así que podemos seguir adelante y hacer esto ahora dentro de componentes y rampages, vamos a añadir un nuevo archivo. Este es el PageNotFound.js. Es función va a ser bastante simple. Voy a importar React desde aquí y luego configurarlo como un componente basado en funciones llamado PageNotFound por la función, entonces dentro de aquí vamos a agregar un div. Este div simplemente va a renderizar un encabezado de nivel tres con el texto de PageNotFound. Ahora necesitamos exportar esta función hacia abajo en la parte inferior con un valor predeterminado de exportación, el nombre del componente de PageNotFound. Esto ahora nos permitirá importar esto en el app.js, por lo que arriba en la parte superior, podemos importar PageNotFound desde la ruta del archivo, que es componentes de slash de puntos. Esto también está en la carpeta Páginas y luego el nombre de PageNotFound. Vamos a darle a esto un ahorro ahora y vamos al navegador, tengo un error, BrowserRouter, así que abajo en la línea 23, solo agrega una R dentro de eso. Después altera el navegador, por lo que actualmente estamos en las rutas de 123 slash hacia adelante. Ahora conseguiremos el PageNotFound, ya que esto no coincide con ninguna de las rutas que hay dentro de aquí. Si ahora intentamos tablero de corte inclinado hacia adelante, ahora deberíamos ver este componente de tablero renderizado para cambiar nuestra URL para que sea tablero de slash hacia adelante. Ahora veo el tablero renderizado dentro del navegador, bien. Justo antes de terminar este video, quiero mostrarles algo que puede atraparlo al usar por primera vez el router del navegador. Si volvemos al app.js. En primer lugar, si comentamos el PageNotFound, y luego agregamos una ruta más justo arriba de aquí. Aquellos apagados, y luego podemos agregar un camino que va a ser para toda la ruta de la slash hacia adelante, por lo que dentro aquí puedes renderizar cualquier componente. Simplemente vayamos por el PageNotFound. Si guardamos este archivo ahora y pasamos al navegador y luego navegamos para reenviar pizarra inclinada, vemos tanto los tableros se renderizan como también los componentes PageNotFound, pesar de que estamos haciendo coincidir una URL de tablero inclinado hacia adelante. Esto puede parecer un poco extraño porque actualmente en las rutas de tablero inclinado hacia adelante, no vamos a querer renderizar los componentes del tablero. El motivo por el que esto está sucediendo es porque técnicamente, la slash de delantero local también es un partido aquí. Si miramos el tablero de inclinaciones hacia adelante, esto también comienza con una varilla hacia adelante, por lo que tendremos una coincidencia parcial al inicio de la URL. Esto es suficiente para renderizar el componente de casa dos y si no queremos este tipo de comportamientos, también podemos agregar exacto a la ruta, lo que evitará esto. Dentro de nuestra ruta podemos agregar exactas. Guarda esto, y ahora en tablero de slash forward, sólo vemos el componente de tablero ya que usar exact no permitirá ningún partido parcial, así que solo voy a reinstalar nuestra app, descomento en PageNotFound. Pero esto es algo que hay que tener cuidado al usar el router. A continuación, vamos a pasar a ver cómo podemos reintroducir los componentes del hogar y también cómo podemos pasar props usando el router. 17. Passing a un router: Este archivo app.js utilizado para renderizar nuestro componente de casa y también el tablero. En el último video, cuando cambiamos al router, solo renderizamos el componente de placa, dejando este componente de casa hasta este video. Esto se debe a que este componente de casa también hace uso de los apoyos, pasamos por las tablas, y también el método de crear nuevo tablero. Ahora, al pasar apoyos usando el router, el primer instinto sería tal vez hacer algo como esto. Si tuviéramos nuestras rutas de origen, podríamos pasar en un componente de hogar. Podríamos entonces también pasar por abajo los apoyos, igual que hemos comentado a continuación, como los tableros. Añadamos esto se acabó y también creamos nuevo tablero. No dejes ningún componente que refleje lo que teníamos antes. No obstante, si guardáramos esto y luego pasáramos a nuestra aplicación, necesitamos pasar a la barra delantera, que es el componente de casa. Ahora vemos que recibimos un mensaje de error en la consola y también en el navegador. Estamos recibiendo estos errores porque el componente domiciliario no está recibiendo los apoyos que necesita. Por lo tanto, React está recibiendo este valor indefinido o nulo. Al usar el router React, no podemos transmitir props de la manera tradicional. El solución es pasar en un render prop en el lugar de nuestro componente. Empecemos por quitar nuestros apoyos y también este componente de casa. Entonces en su lugar, podemos agregar en una prop render. Dentro de aquí esto toma en una función. Por lo que pasando una función de flecha, así como esta. Aquí, podemos entonces agregar nuestro componente de hogar con nuestros apoyos. Entonces al igual que tenemos antes, aquí abajo tenemos el componente de casa, cuál es fuera nuestras dos tablas. Podemos, de hecho, copiar esta sección y luego agregar esto dentro de esta función. De hecho, sólo necesitamos un hogar y no este tablero, así que vamos a quitar esto. Entonces, antes que nada, guardemos este archivo y echemos un vistazo a esto. Ahora vemos el componente de casa renderizando las previsualizaciones del tablero, por lo que esto ahora elimina nuestro error. También vemos esta página no encontrado componente. Dado que no tiene una ruta, siempre se renderizará con nuestro diseño actual del router. Para solucionar esto, podemos rodear nuestras rutas con una declaración de switch. Por lo que dentro del router del navegador podemos hacer uso de este paquete de switch que importamos antes. Justo después de navegar router, podemos pasar esto. Tiene una etiqueta de apertura y una etiqueta de cierre, que se asienta justo dentro de nuestro router de navegador. Lo que hará el switch es mirar nuestros componentes y luego sólo renderizar el primero que coincide. Por lo tanto, si se encuentra una barra inclinada hacia adelante o una placa de barra inclinada hacia adelante, el componente correspondiente se renderizará igual que cuando se utiliza una sentencia de cambio de JavaScript regular. Si ninguno es partido, entonces nos queda con la página no encontrada abajo en la parte inferior. Guardemos esto y comprobemos que se elimine el componente de página no encontrado. Ahora, sólo tendremos los componentes del hogar como se esperaba. Esto ahora nos deja con el comportamiento que esperaríamos y así es como podemos pasar props usando el router React. A continuación, vamos a seguir mirando este router y cómo podemos pasar parámetros a través de la URL. 18. Parámetro de URL: Usando React router también podemos pasar parámetros a través de la URL a través de las páginas. Los parámetros son una sección de la URL la cual puede cambiar. Por ejemplo, si tuviéramos un usuario que está conectado y ya sea usar ID como usuario uno, podríamos entonces agregar “/boards”. Se mostrarían todos los tableros para el usuario uno. Este usuario una sección es dinámica, lo que significa que cambiará dependiendo de qué usuario esté conectado. También lo mismo si tuviéramos varios tableros. También podríamos tener una pizarra. Después reenvía la baraja con el ID de la placa a solo 100, lo que significa que la sección 100 sería dinámica, almacenada dentro de una variable y luego disponible para su uso con el router React. Vayamos a nuestro App.js y veamos cómo podemos implementar esto. Por el momento tenemos la slash hacia adelante, que está renderizando nuestros componentes “home”. Posteriormente en este curso, esta ruta de corte inclinado hacia adelante se utilizará para renderizar un componente de inicio de sesión. Un usuario necesita iniciar sesión antes de ver sus propios tableros. Por lo tanto, esto ahora significa que este componente de inicio, que muestra los tableros del usuario, tendrá que estar en una ruta como esta, por lo que el usuario uno. Entonces podemos ver los tableros disponibles para ese usuario conectado. Ahora no es práctico agregar una ruta diferente, con un camino diferente, para cada usuario que esté conectado en nuestra página web. En cambio lo que podemos hacer es agregar un colon, para agregar una sección dinámica, seguido de un nombre que queremos agregar a esta variable. Llamémoslo el ID de usuario. Ahora si vamos al navegador y vamos a tener “123/tableros”. Esto ahora desgarraría al componente de inicio y luego almacenaría el valor de 123 dentro de este ID de usuario. Debido a que esta sección es dinámica, seguirá renderizando estos componentes de “Inicio” independientemente del valor que se coloque aquí dentro. Si abrimos las “herramientas de desarrollo React”. Demos click en esta pestaña y luego busquemos los “Componentes de inicio” que estamos viendo actualmente. Simplemente verá los apoyos sobre el lado derecho con los “Tableros” y también la función “Crear nuevo tablero”. Actualmente no hay referencia a este ID de usuario. Para decir esto, necesitamos pasar los datos del router como un prop dos. Podríamos hacer esto dentro del “Render prop”. Dentro de aquí, vamos a pasar en los apoyos como variable a la función. Entonces dentro de nuestros “Componentes Home”, al igual que estos eran una línea separada. También podemos extendernos en los “Props”. Esto luego se fusionará en los datos del router con el resto de los apoyos, que pasas a los “Componentes Home”. Volver a las “Herramientas de desarrollo” Vamos “Recargar” entrar en “React” y buscar los “Componentes de inicio”. Seleccione esta. Ahora junto a los “Tableros” y “Create New board” tenemos tres nuevos apoyos. Se trata de los apoyos “Historia, ubicación y coincidencia”, que se pasan todos desde el router React. Veremos estos con más detalle a medida que pasemos por el resto del curso. Pero por ahora podemos encontrar los parámetros o estos parámetros URL, dentro de los apoyos en el “Match” Y luego abajo a “Params” Por lo tanto tenemos esta variable ID de usuario con el valor de 4-5-6, que se toma de esta sección aquí. Posteriormente usaremos este ID de usuario para buscar los tableros para el usuario actualmente conectado. Pero por ahora simplemente podemos enviar al usuario en el archivo “Home.js”. Vayamos al “Hogar”. y justo encima de nuestro “Create Board Form”, voy a emitir un “Span”. Y para mostrar el ID de usuario, lo haremos igual que lo haríamos con cualquier otro utilería. Podemos acceder a este “topprops.match” Que son estos apoyos, que tienen justo aquí. Necesitamos “match.paramas”, y luego el ID de usuario. Demos a esto un guardado y luego pasemos al navegador. Ahora tenemos la variable de 4-5-6. Probemos un valor diferente dentro aquí, así que usuario uno. Ahora este params se muestra dentro del navegador. También podemos hacer esto por nuestros tableros. Si volvemos a nuestro “App.js” y luego nos desplazamos hacia abajo hasta nuestros “Componentes de placa” Ahora podemos agregar en el ID de placa. Barra inclinada hacia adelante, esta es una secciones dinámicas por lo que necesitamos z colon, el ID de tablero. Esto ahora nos permitirá entrar en la URL. Después en la “Junta”, y luego “/Boardid” igual que uno. Donde sea que los datos dinámicos que pasemos para el ID de placa todavía se agotarán estos componentes de placa. Entonces el ID de tablero se almacenará dentro de esta variable. Dado que también necesitamos pasar por abajo los apoyos del router en su herramienta de componentes, podemos reemplazar el componente con la función de render. Añadamos estos en la línea. Podemos quitar los “componentes” y luego sustituirlo por el “render”. Esto toma en una función que vamos a pasar en los apoyos del router. Dentro de aquí desgarramos entonces nuestros “Componentes de placa” en una línea separada, pero también podemos extendernos en los “apoyos”, que son los proporcionados por el router, luego cerrar nuestros componentes de placa. Vamos a probar esto está funcionando en el navegador. Para tener hacia adelante slash uno. Probemos 5.000. Por cada número en el que se pasa, todavía vemos el “componente Board” rendido a la pantalla. Busquemos dentro de las “herramientas de desarrollo” para el tablero. Todavía tenemos los apoyos de “historia, localización” y “marcha” agarramos los “paramas” dentro de aquí. Con esto ahora funcionando hemos dado otro paso hacia la estructura que necesitamos para el proyecto final. No podría aunque solo estemos escribiendo estas URLs. Pero en el siguiente video, veremos cómo podemos navegar a estas rutas. Cuando un usuario hace clic en una vista previa de “tablero”. Y también cómo podemos acceder a las características del router React cuando no es posible pasar props. 19. Uso de Router y empuje: En lugar de escribir nuestras URL dinámicas, que hicimos en el último video, necesitamos una forma de empujarlas a través de nuestra app. Si pasamos a nuestro proyecto en host local y luego buscamos 1, 2, 3, ambos bonos flash. Tenemos aquí nuestros bonos libres a partir de los datos de la muestra. Sería bueno poder hacer click en cualquiera de estos y luego ser llevado a los componentes de placa con el ID de placa como parte de la URL. Para ello, podemos usar el router reaccionar, para navegar a una URL en particular y podemos hacerlo usando el método push. Si bien estamos en esta página, podemos ir a las herramientas reactivas y abrir el objeto de historia dentro de los componentes de inicio. Bajemos a la historia dentro de los apoyos. Si abrimos esto. En el interior de aquí es donde se encuentra este método de empuje. Este método push agregará una nueva entrada al historial del navegador, lo que significa que puedes usar el ida y vuelta del navegador, Watson, y luego su página se almacenará en el historial. Estos bonos libres, por supuesto, ideas de casa y jardín se encuentran dentro de los componentes de vista previa del tablero. Esto nos dejará con un pequeño tema. Si vamos a las DevTools y buscamos la vista previa del tablero. Si seleccionamos alguna de estas previsualizaciones de tablero, los únicos apoyos que tiene es el tablero real. No tenemos acceso al objeto de historia donde se encuentra push. Podrás pensar aquí solo podemos pasar los apoyos como hicimos con los otros componentes, y la respuesta es no o no directamente. Esta vista previa de tablero es un hijo de los componentes del hogar. Por lo tanto, no es directamente renderizado por el router. Dentro del app.js, los únicos componentes que son componentes hijo de un router son estos componentes de casa y también la placa. El camino para evitar esto es usar un paquete llamado enrutador. El router es un componente de orden superior que envolverán nuestra vista previa de placa. Por lo tanto, pasando la misma ubicación e historial de utilería, y el router también está disponible en este mismo paquete de router reaccionar que ya tiene instalado. Pasemos a la vista previa del tablero y podemos importar esto en la parte superior del archivo. Se trata de un llamado Export. Sony, para usar los tirantes rizados. Contamos con router. Esto es del mismo paquete, que es react-router dom. Entonces podemos reemplazar los contenidos dentro del esfuerzo aleatorio. En lugar de solo salidas en esto.props.board.title. Pero voy a mostrar una lista desordenada, y luego cada elemento dentro de aquí va a ser un elemento de lista. Cada ítem es el tablero, por lo que entonces podemos emitir esto.prompts.board.title. Guardemos esto y echemos un vistazo a los componentes del hogar. Todavía tenemos nuestra exhibición de bolas gratis aquí. Añadamos un poco de estilo dentro de nuestra lista desordenada. En primer lugar, podemos agregar un nombre de clase para activar el CSS. Este es el elemento de vista previa del tablero. En la siguiente línea vamos a agregar un manejador de eventos onclick, que va a desencadenar un método llamado GoToBoard. A continuación vamos a agregar un estilo en línea, cual va a establecer el color de fondo de cada uno es previsualizaciones de tablero. Esto reflejará el color de fondo, que establecemos cuando creemos un nuevo tablero. Podemos hacer esto con una propiedad CSS en línea llamada background-color. Dado que se trata de JavaScript, necesitamos usar el color fondo de la caja de color en lugar de usar los valores de guión y minúsculas como lo haríamos con un CSS regular. Vamos a establecer su color de fondo igual a esto.props.board.background. Ahora por encima de esto podemos crear nuestro método GoToBoard fuera del método aleatorio. Vamos a ir justo después de nuestra clase de vista previa de tablero, podemos crear GoToBoard, configurar nuestra función. En primer lugar, vamos a agarrar el ID de la junta, que actualmente tenemos accesorios de información privilegiada. Si vamos a la vista previa del balón. Dentro de las DevTools, dentro de los apoyos, tienes toda la información del tablero que necesitamos. scrab de First Iet probablemente compró ID instaló esto en constante lateral. El ID del tablero va a ser igual a esto.props.board.id El segundo pase hoy es entonces utilizar el método de inserción del router reaccionar a los centros a una URL diferente. Lo que se quiere hacer es dar click en cualquiera de estos enlaces. Entonces queremos que nos lleven a una nueva URL. Entonces board, y luego forward /theboardid, que hemos almacenado dentro de esta variable. Hagámoslo ahora. Esto.props.Historia. Acceder al método push. Esto va a tomar en un objeto donde podemos especificar el nombre de la ruta. Dado que este nombre de ruta usaremos esta variable de id board. Necesitamos usar las garrapatas traseras para construir esto. En primer lugar, podemos navegar hacia adelante pizarra y luego hacia adelante barra inclinada. Podemos utilizar la sintaxis de plantilla de las llaves del símbolo Italo, luego pasar en el ID del tablero. Si ahora decimos este archivo y luego pasamos a nuestros componentes de casa. Ahora tenemos los ítems de lista gratis para nuestros tableros, que también está obteniendo el color de fondo de esto.props.board.background. Ahora vamos a hacer clic en uno de estos y a ver si el método push funcionará. Ahora vemos su mensaje apagado no puede leer propiedad push de indefinido. Esto no funciona porque como mencionamos anteriormente, el paquete que somos importantes en la parte superior del archivo, que se llama router, ahora tendrá que ser un rapero para estos componentes. Podemos hacer esto con bastante facilidad si bajamos a nuestra exportación, y luego podemos envolver nuestros componentes de vista previa de placa con router, y luego dentro de aquí podemos pasar en nuestra vista previa de placa, guardar este archivo, y luego echemos un vistazo a esto en el navegador. Podemos hacer click en cualquiera de estos tableros y luego lo llevamos a los componentes del tablero. Este es el tablero número 2,000. Volvamos atrás y probemos las ideas de causa. Esto ahora es el tablero número 1,000. También lo mismo para las ideas de jardín. Posteriormente en el curso, cuando lleguemos a usar en Firebase, usaremos este ID de tablero para obtener los datos únicos de balón en lugar de en este desvío de carga, que se ve aquí. Pero por ahora este es un paso en la dirección correcta, y a continuación vamos a echar un vistazo a cómo podemos pasar el estado usando el router reaccionar. 20. Estado de paso a través de router: Ya sabemos pasar downstate al renderizar componentes usando el router, igual que hicimos con estos componentes caseros. Pasaremos los tableros y también crearemos nueva función de tablero. También en la vista previa del tablero, hemos navegado a una ruta diferente utilizando el método push. Usando este método push, también a veces tenemos la necesidad de pasar el estado a nuestra nueva URL o al componente que se está renderizando. Cuando pasemos al navegador y luego volvemos a nuestra sección Inicio, si hacemos click en cualquier tablero que quieras ver, sería buena idea pasar también los datos a los componentes de la bola, como el título del balón y también el fondo- color. Encima en la vista previa del tablero, podemos agregar estado o agregar datos justo después del nombre-ruta. También podemos configurar un objeto estatal y aquí adentro podemos pasar por abajo la información de nuestra junta. En primer lugar, voy a pasar el título. Esta vista previa de bola tiene acceso a toda la información del tablero la cual se pasa desde los componentes Inicio. Echemos un vistazo. Esta vista previa de tablero está recibiendo entonces el tablero como un prop. Por lo tanto, podemos acceder a esto con este top utilería, el tablero. Podemos acceder al título. También podemos pasar por el fondo también de la misma manera. Esto va a ser este top utilería, la Junta, el fondo. Podemos probar esto de nuevo en el navegador, guardar este archivo, y luego volver a las vistas previas de nuestro tablero, hacer clic en cualquiera de estos, luego podemos usar una herramienta de desarrollador React. Podemos buscar el tablero, que son los componentes actuales. Seleccione esto y ahora dentro de los apoyos, también podemos hacer uso de esta prop de ubicación, que se está pasando a través del router. Si abrimos esto, ahora tenemos un objeto estatal viviendo aquí dentro. Dejemos esto abajo y ahora tengamos el fondo y también el título disponible para este tablero. El título es Junta fue curso Ideas. Entonces volvamos a revisar también las ideas de la Casa. Consulta el tablero, ubicación, estados, y ahora tienen las ideas de la casa son título y también el color de fondo. Ahora sabemos dónde viven nuestros datos en estos componentes. Ya lo podemos utilizar más en la Junta. Pasemos a los componentes board.js. En primer lugar, podemos establecer el color de fondo de la Junta. Podemos agregar esto al div de apertura dentro de nuestro esfuerzo aleatorio. Entonces agreguemos esto a una nueva línea. Primero podemos agregar un nombre de clase y vincularlo al CSS, va a ser Board wrapper. Entonces al igual que hicimos con la vista previa del tablero, también podemos configurar nuestros estilos, que va a establecer el color de fondo usando camel-case, que podemos agarrar de este top utilería, la ubicación, el estado, el fondo. Asegúrate de que esté escrito correctamente. Antes de ir más allá y añadir el título, ahora podemos ver que el azul ha aparecido dentro del navegador. Podemos volver atrás, echa un vistazo a las ideas amarillas del curso. Haremos lo mismo también por las ideas del jardín. Pasando el color de fondo a nuestra pizarra. Justo debajo de esto, también podemos agregar un título de tablero y también un botón de borrar tablero, que podrás utilizar más adelante. Debajo de nuestro div para el board-wrapper, tenemos el div con el nombre de clase de listas wrapper. Vamos por encima de esto. Podemos configurar un nuevo div, que va a ser para el encabezado del tablero. Por lo tanto, agrega nuestro nombre de clase o encabezado de guión. En el interior de aquí, sumemos un rubro de nivel tres, que va a ser para el título. Podemos agarrar el título del tablero usando lista de utilería,. ubicación, .estados y luego el título. Justo después de esto, también añadiremos un botón, que se va a utilizar más adelante en el curso para eliminar el tablero. No vamos a añadir ningún manejador de clics aquí todavía. En cambio, sólo empezaremos en el texto del tablero de eliminación. Ahora podemos guardar esto e ir al navegador. Tenemos nuestro botón de borrar tablero en la esquina y también nuestro título de tablero. A [inaudible] tenemos ideas de curso y también las ideas de la Casa también. Ahora nuestro color de fondo y también nuestro título de tablero se ha pasado a esta placa componentes utilizando el objeto de estado a través del router React. Esto es sobre nuestro trabajo en, así que los veré ahora en la siguiente sección donde llegaremos a trabajar usando Firebase. 21. Configuración de la base de fuego: Para este proyecto, vamos a estar usando Firebase como back-end. Esto nos permitirá agregar una base de datos para almacenar todos nuestros tableros, listas, y tarjetas. También nos permitirá sólo recuperar la pizarra, lista y tarjetas que necesitamos para el usuario actualmente log in. Podemos ordenarlos por la fecha de creación. Nos dará actualizaciones en tiempo real a medida que cambian los datos, y mucho más. Además, podemos usar Firebase para la autenticación de usuarios, suscripción y el inicio de sesión. Otra gran característica de Firebase es que se puede utilizar no sólo para proyectos web, sino también para iOS y Android, lo que podemos compartir los mismos datos a través de múltiples apps. Podemos empezar de nuevo en firebase.google.com. Necesitas registrarte con una cuenta de Google si no has usado esto antes. Si necesitas seguir adelante e inscribirte ahora. Actualmente estoy registrado, así que solo voy a dar clic en “Ir a consola”. Antes de ir más lejos, sin embargo, Firebase parece cambiar su diseño y diseño de sitios web con bastante regularidad, pero los pasos suelen ser similares. Si se ve un poco diferente cuando visitas, aún debes poder resolver las cosas, ya que solo quedan unos pasos por dar. Lo primero que tenemos que hacer es crear un proyecto, haciendo click en “Añadir proyecto”. Ya tengo un proyecto llamado React Trello, así que en su lugar voy a llamar a esto React Trello 2. También necesitamos aceptar los términos y condiciones antes de poder crear nuestro proyecto. Entonces danos unos momentos para crear. Vamos a estar utilizando la última base de datos de Firebase, que se llama Cloud Firestore, que nos dará nuestra funcionalidad en tiempo real. tiempo real significa que nuestra aplicación se puede actualizar con cambios a medida que suceden, y nuestros datos se pueden mantener sincronizados a través de diferentes dispositivos, en lugar de tener que hacer una nueva solicitud después de cada cambio. Una vez hecho esto podemos dar click en “Continuar”, y luego nos llevan a la Página Principal para nuestro proyecto. Ahora tenemos que dar click en el Cloud Firestore, que podemos obtener al hacer clic en esta sección Cloud Firestore justo aquí. O podemos hacer click en la “Base de datos” desde el menú. Enviar las cosas es bastante simple, solo hacemos clic en “Crear una base de datos”. Vamos a empezar en el modo de prueba, solo por ahora, es decir, y eso es todo lo que los usuarios pueden leer y escribir en nuestra base de datos. Pero agregaremos reglas de seguridad más adelante. Haga clic en “Siguiente”. Podemos entonces seleccionar nuestra región que está más cercana a nosotros. Elija cualquiera de estos y luego haga clic en “Hecho”. Esta es nuestra base de datos Página Principal, y aquí es donde se mostrarán nuestros datos una vez que los empujemos a Firebase. También podemos agregar manualmente colecciones al uso de este enlace aquí. Una recopilación es un grupo de datos que serán nuestros tableros, nuestras listas, y nuestras tarjetas. Después agrega esta base de datos a nuestro proyecto. Necesitamos primero obtener nuestra configuración de Firebase. Podemos hacer esto en la barra lateral y luego dar clic en “Visión general del proyecto”. Vamos a estar usando la versión web, así que haz click en esto. Tendremos que darle un apodo a nuestra solicitud. Yo también quiero llamar a esto, React Trello 2. Después registra nuestra app. Esto nos dará acceso a nuestra configuración de configuración, cual necesitamos añadirla a nuestro proyecto. Necesitamos copiar todos los ajustes desde dentro del objeto config. Básicamente, todo dentro de estos tirantes rizados. Copia todas estas líneas de código. Entonces podemos llevarlos al código de Visual Studio. Vamos a crear un nuevo archivo. Abre la barra lateral dentro de fuente, nuevo archivo. Esto se va a llamar Firebase.js. El siguiente paso es instalar Firebase desde NPM. Baja a la terminal, presiona Command o Control C si necesitas cerrar el servidor, entonces puedes ejecutar un comando llamado NPM, I for install, y luego el paquete simplemente se llama Firebase. Ahora si volvemos a nuestro archivo Firebase.js, ahora podemos hacer una importación, tirar de nuestro paquete Firebase y almacenarlo dentro de una variable. Importa esto desde los módulos de nodo. Este paquete se llamará Firebase. Entonces vamos a hacer rebanada hacia arriba. Forward slash up es el cliente principal de Firebase, que se requiere cuando se utiliza Firebase. El siguiente paso es importar también el paquete firestore. No necesitamos almacenar esto dentro de una variable, así que solo podemos hacer una importación sin instalar esto por nombre, para que podamos importar el paquete Firebase, luego una slash hacia adelante Firestore. Esto hará que la funcionalidad firestore esté disponible en nuestros proyectos. A continuación vamos a crear una constante llamada config. Config va a contener todas las opciones que acabamos de copiar de Firebase. Podemos pegar estos dentro de aquí. Cerremos la barra lateral para que tengamos un poco más de espacio. Parece que me he perdido el final de trello pero no importa. Bajemos y ahora inicialicemos nuestra app. Podemos hacerlo seleccionando nuestra variable Firebase, cual importamos en la parte superior. Entonces podemos hacer un método llamado inicializar App, luego vamos a pasar en nuestro objeto config sin ajustes de Firebase. Con esta configuración ahora atendida, ahora voy a configurar tres constantes, estas apuntarán a nuestras colecciones de bases que van a ser Tableros, listas, y tarjetas. Esto es simplemente un atajo que vamos a utilizar a lo largo de nuestro proyecto, en lugar de tener mucho código repetitivo que apuntará a la ubicación en nuestra base de datos. En primer lugar, vamos a crear una constante llamada db. Va a ser igual a Firebase.FIRestore. Nuevamente, esto también es un atajo. Este es un puntero a nuestra base de datos Firebase, y ahora solo podemos escribir db en lugar de Firebase.FiRestore. Debajo de esto ahora vamos a crear una referencia a cada colección que necesitamos, esto nos permitirá acceder a estos nuevos proyectos para guardar y recuperar datos solo usando el nombre de la variable. En primer lugar, vamos a crear un BoardsRef, y esto va a ser igual a nuestra base de datos, que es DB, y voy a acceder a una colección que aún no tenemos, pero esto tendrá el nombre de tableros. Voy a copiar y pegar esto en más tiempos. El segundo va a ser una referencia a nuestras listas. El nombre de la colección va a ser listas. Entonces el tercero va a ser un puntero a nuestras cartas. Todo esto significa que ahora está en nuestro proyecto cuando queremos empujar un tablero a Firebase o recuperar un tablero de Firebase, solo necesitamos escribir la palabra BoardsRef, lugar de tener que escribir Firebase.Firestore.collection.Boards. Ahora podemos exportar estas referencias, por lo que podemos acceder a ellas en los archivos. Esto se puede hacer, con un nombre Export dentro de las llaves. Podemos exportar nuestros tableros Ref, nuestro borrador de lista, y también las tarjetas ref también. Ahora podemos guardar este archivo y probar que está funcionando en el app.js. Podemos comenzar con nuestros tableresRef importando esto en la parte superior del archivo. Justo debajo de clase podemos crear una importación, primero importaremos nuestros tableros Ref. Esto es de nuestro archivo Firebase, que es un stringoff./ y luego Firebase. Esta fue una exportación con nombre, por lo que podemos importar cada una dentro de estas llaves. Después podemos agregar una prueba rápida en el componentDidMount para comprobar que esto está funcionando. Justo debajo de nuestros estados de conjunto, ahora podemos acceder a esta variable BoardsRef. Podemos entonces llamar a un método llamado dot add, que es un método Firebase para agregar nuevos datos a esta colección. Simplemente vamos a crear un objeto con un nombre y un valor de hola. Guardemos esto. Ahora si vamos a nuestro proyecto y luego recargamos, tenemos un error de BoardsRef. Echemos un vistazo a esto. Tenemos la importación, que se ve correcta, pasa a Firebase, y esto necesita una S. Volver al proyecto. Recargar, y esto ahora hará que el componente en montaña se ejecute. Si vamos a Firebase, y podemos cerrar esto, ve a la consola, y a nuestra base de datos. Ahora vemos que tenemos una colección de tablero con un solo documento. Este es el DNI del documento, entonces tenemos el nombre de hola. Uno de los beneficios de usar Firebase es que no necesitamos definir nuestras colecciones de antemano. Simplemente podemos empujar un nuevo objeto o nuevo elemento a Firebase, y también creará la colección y los documentos necesarios. Esto es sólo una prueba, así que voy a eliminar esto ahora. Entremos a nuestros tableros, eliminemos la colección. También necesitamos escribir el nombre del tablero. Podemos eliminar esto, y luego eliminar el código de ComponentDidMount dentro del app.js. Elimina esta línea de código, guarda este archivo. Ahora esto nos deja con Firebase en nuestra configuración. Estamos bien ahora pasar al siguiente video. 22. Enfocar los datos a Firebase: Ahora tenemos configuración de cinco bahías y sabemos que nuestra conexión ahora está funcionando. Podemos pasar a crear nuestros métodos en reaccionar para luego enviar datos a Firebase, comenzando en este app.js. Aquí ya tenemos un método configurado para crear un nuevo tablero. Por lo que ahora podemos usar el método de agregar Firebase para empujar nuestros nuevos datos de tablero a nuestra base de datos. Empecemos dentro de este método justo antes de establecer el estado. Creamos una nueva constante la cual se va a llamar el nuevo tablero. Queremos establecer esto igual a nuestra gráfica de tablero que importamos en la parte superior del archivo en el último video, que apuntará a nuestra colección de tableros. Después vamos a utilizar el método add para luego empujar un objeto, que va a ser nuestro tablero, que se pasa a este método como parámetro. registro de Firebase obtendrá automáticamente un ID generado. Antes de guardar nuestros nuevos estados de junta, podemos construir un nuevo objeto donde crecimos este ID y luego agregarlo al resto del tablero. Hagámoslo, justo por encima de nuestra llamada de estado set. Podemos crear una constante que se va a llamar el objeto de tablero. Aquí todo lo que quiero hacer es agarrar los datos existentes del tablero y también fusionar una identificación. Entonces, antes que nada, digamos una propiedad ID, que va a ser igual a nuestras nuevas constantes de tablero, luego ID. Recuerda, nuevo tablero hará referencia a los datos que regresarán de Firebase cuando añadamos este nuevo tablero. Por lo tanto también tendrá la propiedad Firebase ID. También podemos agregar una coma y luego usar este operador de spread para agregar en el resto del tablero. Ahora cuando nos pusimos en los estados, en cambio queremos añadir estos nuevos objetos de tablero. A continuación podemos agregar algún manejo de errores a este método usando async await. Async await nos permitirá esperar a que el tablero se guarde primero en Firebase antes de pasar a la siguiente línea de código. Queremos asegurarnos de que primero se guarde el tablero porque necesitamos acceder a este ID generado antes de poder guardarlo en estado. En primer lugar, podemos configurar esta función para que sea asíncrona agregando la palabra clave asíncrona. Esto nos permitirá entonces sumar la espera a nuestro método. El dato que queremos despertar y volver es este nuevo tablero de Firebase. Después podemos agregar algún manejo de errores usando try and catch. En primer lugar, vamos a ejecutar este código dentro de un bloque try. Abre los tirantes rizados. Cuando voy a cerrar esto justo después de establecer el estado. Añade un corsé extra rizado justo al final. Si no estás acostumbrado a intentar atrapar antes la sección try es el código que primero necesitamos intentar ejecutar. Si el código que se ejecuta es exitoso, todo es bueno. Si hay un error al ejecutar este código en el bloque try, entonces podemos captar este error usando un bloque catch. Justo después de este corsé rizado, también podemos agregar un bloque catch, que va a tomar el error como variable. Abre y cierra los tirantes rizados. Podemos entonces hacer un error de consola, cual vas a generar una cadena de error creando nueva placa y dos puntos. Entonces después de esto, también podemos agregar una coma. Entonces también podemos mostrar este error el cual se pasa para atrapar, esto para guardar. Entonces podemos ir a nuestras tablas y podemos probar esto. Apagado al navegador en nuestros proyectos. Todavía tenemos un gráfico de barras aquí. Subamos a los tableros. Ahora se acabó a unos componentes de casa. Bueno, necesitamos agregar en un usuario, vamos por 1, 2, 3 y luego hacia adelante tablero de barras inclinadas. Probemos esto empujando un nuevo elemento a Firebase. Vamos por un tablero de pruebas un color verde, luego creamos un tablero nuevo. este tablero se le agrega inmediatamente ya que lo empujó a afirmar. Como ya sabemos, el estado activará una actualización en todos los componentes la cual utiliza datos. Si ahora refrescamos esto, los datos se perderán ya que obtenemos estos tableros de estados en lugar de de de Firebase. Bueno, podemos ir a la consola de Firebase y comprobar que esto se ha guardado. Vuelva a cargar la consola. Nuestro tablero de pruebas ahora se guarda dentro de aquí. Como mencionamos antes, Firebase agrega un ID único. Vayamos a las Herramientas de Desarrollador. También podemos comprobar que esto se esté agregando a nuestro estado. Esa es nuestra prueba dos. Crear un nuevo tablero. Ahora puede ver cómo se ha actualizado los estados para incluir cuatro elementos en la matriz. Haga clic en esto, si hacemos click en el último, ahora vemos que este ID único se ha agregado a nuestro objeto. Este debe ser el mismo ID que se está proporcionando dentro de la Firebase si se recarga. A continuación, haga clic en esto. Esta es nuestra prueba dos con la misma identificación, que ahora tenemos en el estado. Hagamos ahora lo mismo en el board.js. Podemos empujar nuestras nuevas listas a Firebase dos. Dirígete a nuestros componentes de bolas. Entonces necesitamos buscar un método llamado crear nueva lista. Esto es lo que necesitamos justo aquí. Lo primero que voy a hacer es marcar esta función como un fregadero, para que podamos usar una espera. Entonces podemos agregar algún manejo de errores agregando un bloque try. Abre y cierra los tirantes rizados. Después podemos quitar este corsé rizado y luego sumarlo al final. Justo después de volver a configurar nuestra Ref en una cadena vacía, puedes agregar esto en. Agrega un bloque catch que pasa en un error. Abre y cierra los tirantes rizados. Entonces podemos pasar un error de consola con la cadena, que va a ser un error creando una nueva lista. Pasando en el error. Con este manejo de errores ahora cuidado, ahora necesitamos hacer algunos cambios a nuestro objetivo de lista. Vamos a desplazarnos hacia arriba. Aquí tenemos un objeto de lista que creamos anteriormente. El primer paso es ahora eliminar este ID. Ya que vamos a estar agregando esto vía Firebase. También podemos eliminar estas tarjetas array ya que ya no necesitas estos datos. Quitemos esto. Seremos cédulas de identidad como colección separada dentro de una Firebase, luego vincularlas a través de los identificadores. Ahora sólo debemos quedarnos con el título, el tablero, y también el arte creado. Esta lista también necesita estar vinculada al tablero de color, por lo que podemos cambiar la propiedad del tablero para hacer esto, en lugar de tener un valor codificado. Ahora podemos establecer esto para que sea este punto props dot match dot params dot BoardID. Si vamos a nuestro tablero, recuerda, estos son los datos que nos pasan desde el router de reaccionar. Podemos ver esto más en las herramientas de desarrollador. Si hacemos clic en alguno de estos, elegimos el tablero, entonces tenemos los apoyos pasados vía el router, dentro de un params match dot. Tenemos este BoarDiD. Por lo tanto esto vas a vincular la tarjeta que se han creado con el tablero actual. Esto nos permitirá más adelante en el curso, para luego tirar todas las listas de Firebase para el tablero actual que estamos viendo. Debajo de esto tenemos un comunicado. También podemos asegurarnos de que el BoardID también esté presente antes de guardar esto en Firebase. También puedes agregar una lista, una parte porque no queremos guardar una lista que no tiene relación con un tablero. Ahora en lugar de guardar esta lista a estados, ahora vamos a empujar esto a Firebase. Ya que ahora nos ocupamos de las listas, en lugar de tableros, necesitamos importar la referencia de lista desde el archivo basado en o5. Podemos hacerlo importando las listas ref, de nuestro archivo Firebase, que se encuentra en barra de puntos y luego el nombre de archivo de Firebase. Entonces podemos agregar nuestra nueva lista a Firebase en lugar de usar los estados establecidos, que muevas esta línea. En cambio podemos agregar un peso a la disfunción de marca como asíncrona. Podemos acceder a nuestro borrador de listas. Podemos entonces usar el método add para agregar un nuevo objeto. Este nuevo objeto es la lista con retrocedido arriba. Ahora vamos a guardar esto y podemos probar esto de nuevo en el navegador, asegúrate de que dentro de uno de los tableros. Entonces ya podemos ir a crear una nueva lista. Haga clic en esto, así que lista de cursos 1 y también agregue la lista de cursos 2 a la consola de Firebase. Después de la recarga, ahora ver nuestros objetos de listas o ahora se ha creado nuestra colección de listas. Tenemos nuestras dos listas. El primero está vinculado al tablero 1,000 como es el segundo. Podemos ver dentro de nuestros proyectos en la URL que este es el BoarDiD. Vamos a pasar a las ideas de casa y otros una nueva lista 2. Casa lista 1, revisaremos esto dentro de la consola. Asegúrate de que esto tenga el DNI de 2,000. Ahí lo tienes. El último que tenemos que hacer en este video, es crear una nueva tarjeta. crean nuevas tarjetas en los componentes de la lista de padres. Esto seguirá un patrón similar a lo que acabamos de hacer. No debería haber sorpresas. Pasado a la lista de capas de puntos. Primero podemos establecer el método de crear nueva tarjeta para que sea asíncrono. Después puedes envolver nuestro código en el bloque try. Quítate la llave de cierre, y luego podemos sumar esto hacia abajo en la parte inferior. Tus cosas sobre el registro de la consola, también agregan en la sección catch, que vas a tomar en cualquier error que se cree. Genera un error de punto de consola con la cadena de error creando nueva tarjeta, en los dos puntos y luego pasar en nuestro error. El único cambio a nuestra tarjeta es el set the list ID. Podemos agarrar esto de las indicaciones de lista, que se transmiten hacia abajo, en lugar de que sea valor codificado duro de abc 1,2,3 agarramos estos de nuestros apoyos, que usted establece a través de la lista dot ID. Aquí estamos creando una nueva tarjeta. También crearemos una referencia a la lista, a la que pertenece. Si pasamos a los componentes de lista en nuestros proyectos y las herramientas reactivas, busca cualquier lista. Podemos entonces ver esta lista la cual se pasa como utilería. Aquí estamos agarrando el ID de lista, que es 100 en este caso, el segundo tiene un ID de lista de 300 y así sucesivamente. El siguiente paso es importar nuestras tarjetas ref, de nuestro archivo Firebase. Dentro de los tirantes rizados. Agarra la gráfica de la tarjeta. La ruta del archivo también es barra de puntos de punto Firebase. Al igual que hicimos con la lista antes, también podemos bajar a las declaraciones si antes de empujar esto a afirmar. Entonces también podemos agregar al final una segunda pista, que también va a comprobar si también está presente el ID de la lista de puntos de la tarjeta. Dado que esto es necesario antes de guardar en estados o en Firebase. El siguiente paso es también eliminar este método de estado establecido. En cambio, vamos a esperar tarjetas ref dot add. Agregamos esto a Firebase, el objeto que queremos agregar es esta tarjeta que acabamos de construir arriba. Analizar una tarjeta, guardar este archivo y luego podemos probar esto en el navegador. Podemos probar esto agregando una nueva tarjeta a múltiples listas. Digamos tarjeta de casa uno, tarjeta de casa dos. Esto es por las ideas de viaje. Tarjeta de viaje uno. Esta es la tarjeta uno, reenvía a Firebase y luego actualiza la consola. Esas son las cartas. Este primero está asociado a la lista 200. El segundo es de 100s, y también de 300s. Todo está funcionando bien. También tenemos el texto correcto para cada uno. Tenemos una actualización creada, la cual se genera usando JavaScript. no tenemos etiquetas, pero volveremos a esto más adelante en el curso. Ahora ten los datos de Firebase con los que trabajar. En el siguiente video, vamos a eliminar los datos de muestra de nuestros proyectos y en su lugar a leer los datos de Firebase. 23. Lectura de datos de Firebase: El dato de muestra que importamos antes ya no es necesario en nuestro proyecto. Por lo que ahora podemos empezar a eliminarlo y trabajar de nuestra base de datos. Podemos hacer esto de nuevo en el app.js. En primer lugar, podemos quitar la importación, así que importar datos, eliminemos esta línea y luego abajo abajo, tenemos un componente did mount, que establece el estado usando estos datos de muestra. Quitemos esta línea también. En lugar de esto, voy a crear un método que va a sacar nuestros tableros de firebase pero sólo cuando realmente los necesitemos. Justo debajo de este componente sí montó, queremos crear un nuevo método llamado get boards. Esta va a ser una función asíncrona, que va a tomar en el ID de usuario, que le va a pasar. En lugar de nuestra función de flecha, crea una sección try y también un catch, que toma en el error, que sigues siendo un log de consola con el mensaje de error de área obteniendo tableros y también pasando en el mensaje de error solo después de esto. El primero que queremos hacer al llegar a los nuevos tableros desde firebase, es establecer el estado para que esté vacío. Entonces dentro del bloque try, podemos hacer con este estado.set y luego dentro de aquí podemos agregar nuestros objetos de estado, que va a establecer los tableros para que sean una matriz vacía. Esto solo asegurará que se eliminen los consejos y estados anteriores antes de realizar una nueva llamada a firebase. Arriba en la parte superior, ya tenemos nuestro tablero de referencia importado de firebase. Por lo que ahora podemos usar esto para obtener el contenido de la colección de tableros y podemos hacerlo llamando al método get. Entonces justo debajo del estado establecido, podemos empezar a obedecer las constantes con el nombre de los tableros y luego podemos esperar de nuevo nuestros datos agarrando nuestra referencia de tableros y luego llamando al método.get. Esto obtendrá el contenido de nuestra colección de tableros solo una vez. No escuchará ningún cambio pero veremos cómo hacerlo más adelante en el curso. En las constantes del tablero, que acabamos de tener aquí, se guardan todos nuestros tableros, lo que significa que luego se puede recorrer a través de ellos, obtener cada uno y luego guardar estos a nuestro estado. Firebase nos permitirá hacer esto usando un para cada método y podemos hacerlo justo debajo de esta línea. Podemos seleccionar nuestras constantes de tablero, podemos recorrer con para cada uno. Dentro de aquí vamos a almacenar cada artículo dentro de nuestros tableros en una variable llamada board. Dentro de este cuerpo de función, podemos comenzar haciendo un registro de consola y luego cargar el valor de nuestro tablero. Antes de guardar este estado, vamos a hacer un registro de consola, ya que puede ser un poco confuso sin ver qué viene de firebase. Para ejecutar esto, podemos añadir temporalmente este método arriba cuando se monta el componente. Por lo que dentro de aquí podemos llamarlo con esto.obtener tableros. Está bien. Una vez hecho esto, podemos abrir la terminal, asegurarnos de que el servidor haya comenzado con un inicio NPM. Vamos a patear esto. Después podemos ir al proyecto y luego si hacemos clic derecho y luego inspeccionamos, abrimos esto en la consola y hagamos una actualización. Dentro de la consola, vemos lo que se llama instantánea de documento de consulta, que es una instantánea del documento que estamos leyendo desde firebase en ese momento en particular. Si abrimos esto, sí contiene el ID del tablero, que se puede ver aquí. Sí necesitamos agarrar esto pero si sólo queremos los datos reales del documento, en lugar de todos estos metadatos, que vemos aquí junto con las referencias firebase, podemos cambiar nuestro registro de consola para llamar al método de datos, que extraerá todos los campos como un objeto. Por lo que abajo en nuestro registro de consola, también podemos agregar el método.data a los extremos. También agregue los corchetes para llamar a esto como método. Ahora vemos nuestros cuatro objetos de tablero. Podemos abrir esto. Podemos abrir el tablero y ahora vemos las propiedades de fondo creadas en título y también el usuario. Esto se almacena en un objeto de tablero, que se puede ver justo aquí con las calibraciones. Para que podamos profundizar aún más agregando.board al final de nuestro registro de consola. Vamos a repasar de vez en cuando al final de los datos, podemos añadir tablero para acceder a los objetos individuales, recargar y luego llevarlos directamente a nuestro objeto. Estos son los datos exactos que necesitamos. El único campo que falta es el ID, que mencionamos antes pero podemos agarrar esto directamente de la pizarra. Ahora podemos almacenar estos datos dentro de una constante de en el app.js. Entonces en lugar de este registro de consola, ahora podemos eliminar esto, podemos establecer obedecer constante llamada data, que va a ser igual a board.data.board, que hemos visto en el registro de la consola y luego podemos crear una nueva placa objeto. Tomemos estos datos del tablero y luego lo mezclemos con el ID faltante. En la siguiente línea creamos una segunda constante, que es para los objetos de tablero. Configurar nuestros objetos. En primer lugar, podemos mezclar en el ID. Podemos agarrar esto directamente de board.id, entonces podemos extendernos con los tres puntos. El dato, que es esta constante desde justo arriba. Justo después de este objeto, ahora podemos establecer el estado con este estado.set. Dentro de aquí vamos a apuntar a los tableros objeto. Vamos a establecer esto en una matriz, así que vamos a tomar una copia del estado existente, con esto.state, .boards, separados por una coma, podemos entonces agregar en nuestro nuevo objeto de tablero, guardar este archivo y luego podemos probar esto en el navegador. Este es un buen comienzo. Vemos que el tablero está siendo sacado de la base de fuego. Añadamos un nuevo objeto o un nuevo objeto de tablero. Vayamos a las herramientas de desarrollador de reaccionar, busquemos nuestro componente de hogar. Tenemos nuestros tableros como apoyos, voy a ver el array con nuestros cuatro nuevos tableros. Intentemos sumar una más. Vamos adelante a hacer el color del naranja, crear nuevos tableros y ahora tengo un objeto extra empujado a nuestro estado y esto se construye de la misma manera que todos los demás. Hemos mezclado en la identificación con todo el resto de los datos del tablero. Por lo que actualmente hemos agregado esta convocatoria para conseguir nuestro tablero de firebase dentro del componente sí montó. Solo queremos agarrar estos tableros cuando se carga el componente doméstico en lugar de la aplicación real, ya que aquí es donde se van a mostrar. Todo lo que necesitamos hacer para esto es mover el componente sí montar código a los componentes de casa. Vamos a cortar el componente hizo montar sección. Ya no necesitamos esto y luego podemos ir a nuestros componentes de casa y luego podemos pegar esto justo en la parte superior, justo por encima de nuestro método aleatorio. Ya que ahora accedemos en este método get board, que está en el app.js, ahora necesitamos pasar esto hacia abajo como un prop. Vamos a desplazarnos hacia abajo a nuestro router y luego dentro del link home, que es éste justo aquí, también podemos agregar un prop llamado get boards, que va a ser igual a nuestro método de esto.get boards, guarde este archivo y ahora más a nuestro componente sí montó dentro de nuestro home.js, ahora necesitamos acceder a esto a través de apoyos. Entonces este es esto.props.board y luego agrega esto a nuestra validación de prop abajo en la parte inferior. Get boards va a ser nuestros tipos de prop y esta es una función que también se requiere para ya sea venir al final. Entonces ya podemos guardar esto y pasar al navegador. Dentro de aquí, los tableros siguen mostrándose en el navegador, pero ahora solo se cargan cuando estamos viendo todos estos componentes. Si seguimos adelante y hacemos clic en alguno de estos, todavía vemos nuestros datos de muestra por aquí, y lo arreglaremos en el siguiente video. Cuando creamos el enlace a este tablero antes, también pasamos este ID de tablero a través de los parámetros de URL. Ahora podemos usar este ID de placa para buscar los detalles de la barra cargada actual de Firebase, en lugar de a partir de nuestros datos de muestra. Esto se almacenará en estado local es decir dentro de estos componentes, y se utilizará para mostrar el título de la bola y también el color de fondo en lugar de utilizar los datos de muestra que vemos ahora. Hagámoslo ahora esto es los componentes de la placa pasarán al tablero.layers. Arriba en la parte superior estaban importando en la Lista Ref. Por lo que también necesitamos fundamentar la referencia a la Junta 2. Vamos a estar cargando el tablero actual para que también podamos sumar este estado. Entonces esta es la junta actual. Podemos configurar esto inicialmente como un objeto vacío. Entonces ahora a continuación también podemos configurar un método personalizado justo por debajo del componente hizo montar, que va a obtener nuestra placa actual de Firebase. Vamos a llamar a este método. El get board va a ser una sincronización, y también va a tomar la tarjeta de identificación. Por lo que sólo obtenemos estos tableros sencillos de Firebase. Podemos configurar nuestro método en una sección try. También una sección de captura a continuación la cual va a tomar en el error. Esto va a enviar un registro de consola con el mensaje de error, conseguir tableros, y también pasar el error. Entonces lo primero que hay que hacer en la sección try aquí arriba es crear una constante que va a almacenar nuestro único tablero. Podemos esperar esta información de regreso desde Firebase. Esto está en los tableros Ref. Queremos utilizar el documento de referencia, que va a ser el ID de placa única, que va a pasar cuando lo llamemos. Estamos pasando esto. Entonces podemos llamar al método de.get para agarrar todos los contenidos de nuestro tablero. Una vez que tengamos nuestra directiva ahora podemos decir que esto es estatal. Con este estado conjunto, estado que quieres actualizar es este tablero actual el cual tienes justo aquí. Set es igual al valor de nuestras constantes, y también tiene que ser tablero Ref. Entonces haz este cambio. Por lo que no queremos establecer el estado así. Me aseguraré de que esto sea tableros demasiado justo encima de la parte superior. Por lo que actualmente ponemos en este objeto de tablero en el estado, pero no queremos hacerlo igual que vemos aquí. Recuerda antes cuando acabamos con todos los tableros en el app.js. Si subimos al método gap boards, cuando agregamos un registro de consola, vemos que recuperamos una instantánea de consulta. Esto es lo mismo aquí para que pueda acceder a los objetos de tablero, la misma manera que esto por colon necesitan método de datos de punto y luego acceder en el objeto de tablero. Entonces hagámoslo ahora. Ya tenemos esta pizarra podemos llamar.data y luego acceder al objeto de tablero así como este. Estos datos del tablero deben estar disponibles de inmediato. Por lo que podemos llamarlo desde componente hizo montar pasando en la tarjeta actual ID. Vamos a desplazarnos hacia arriba dentro del componente hizo montar. Ahora podemos llamar a get board adentro por aquí usando este.get board. Entonces necesitamos pasar el ID que se recibe dentro de este método. Por lo que para agarrar el ID actual, sabemos que esto se almacena dentro de los parámetros de URL. cual se puede ver arriba en la parte superior aquí, y ya sabemos cómo acceder a los parámetros del router. Podemos hacer esto con esto.props, el nombre de la prop de match que es del router. Vamos a acceder a los params, y luego al nombre del parámetro, que en este caso se llama el ID del tablero. Guarda este archivo y ahora pasa al tablero dentro del navegador. Entonces en cuanto este componente de tablero se cargue, vamos a las herramientas reactivas y comprobemos que tenemos los datos que necesitamos. Hagamos una búsqueda de los componentes de la placa. Seleccione esto dentro del estado tenemos el tablero actual. Abramos esto y ahora vemos todos los datos que necesitamos como el fondo-color y el título. Por lo que ahora podemos usar esto en nuestro método aleatorio dentro del tablero para establecer el título y también el fondo. Entonces, vayamos hacia abajo al método aleatorio. Entonces lo primero que hay que hacer es establecer el color de fondo. Entonces, en lugar de usar los apoyos del router, eliminemos esto, y entonces en su lugar podemos usar los datos que se almacenan en estado. Entonces esto.estado, .actual junta. Podemos acceder a la propiedad de fondo. Justo debajo dentro de la partida de nivel tres, podemos acceder a este tablero de punto.estado punto.corriente y luego agarrar el título. Comprueba esto sigue funcionando en el navegador. Carga en los componentes de tablero, y aún vemos el título y el color de fondo. Cuando entramos en cada una de estas tablas. Con esto ahora funcionando podemos pasar a los componentes de previsualización de la placa, y también eliminar el estado que es transmitido por el router. Por lo que esto ya no es necesario. Por lo que puede eliminar estos objetos de estado y dejando solo el nombre de la ruta para el redireccionamiento. Todavía no deberían funcionar bien dentro del navegador. Por lo que pudo haber notado que todo esto funcionaba completamente bien antes de que tuviéramos el color de fondo y el título pasado por el router. Por lo que tal vez te estés preguntando por qué cambia en absoluto. El motivo es para actualizar los componentes. Antes pasamos el DNI y antecedentes al componente de tablero. Esto significaba que una vez cargada la pizarra, entonces nos pegamos con ella estos datos exactos. No obstante, al buscar los datos del tablero desde Firebase y almacenarlos en este estado, esto significará que más adelante cuando actualicemos el tablero como el título, cualquier cambio será entonces dinámico y también actualizará el componente dos. Por lo que ahora está en su lugar, pasemos ahora al siguiente video. 24. El dónde y los métodos de orden: Con lo que aprendimos en el último video, ahora podemos volver a aplicar esto para recuperar las listas y tarjetas de Firebase. También vamos a estar echando un vistazo a dos nuevos métodos Firebase. Uno se llama OrderBy y va a ordenar nuestros datos, que recuperaremos. Entonces el método Where nos permitirá sólo obtener una lista o una tarjeta, si el BoardID coincide con el tablero actual que estamos viendo. Empecemos de nuevo en los componentes de la placa. El Board.js, podemos arrancar en la parte superior quitando el SampleData, ya no necesitamos esta importación. Por lo tanto también podemos eliminar la llamada SetState, que aplicará esto a estado. Ahora si pasamos al navegador, en la vista de pizarra, no es de extrañar que no veamos ninguna lista o tarjeta en estos componentes. Entonces vamos a reemplazar nuestro SampleData por un método llamado GetLists of in the board components. Esto va a obtener nuestras listas de Firebase, igual que el método GetBoard a continuación. Este se llama GetLists, y esto va a ser igual a función asíncrona que también va a tomar en el BoardID. Configura la función de flecha, entonces dentro de aquí podemos crear nuestro try y también nuestro bloque catch. El bloque Catch toma un error como siempre, y luego podemos hacer un registro de consola con la cadena de error recuperando listas. Entonces después, voy a añadir una coma, y luego también voy a poner el error. Por lo que justo encima de esta sección try, primero podemos crear nuestra constante la cual va a sostener nuestras listas. Donde vamos a esperar nuestra lista regresando la cual podemos agarrar de la listRef. Ahora podríamos encadenar al final el método el.get que usábamos anteriormente, pero esto seguiría adelante y agarraría todas las listas de nuestra base de datos. En cambio, sólo necesitamos obtener la lista para este tablero de columnas. Encima en Firebase si volvemos al navegador, y luego a la Consola. Recuerda antes cuando creamos una nueva lista y una nueva tarjeta, también agregamos una identificación. Esta lista, por ejemplo, tiene un BoarDid de 1,000 y luego esto enlazará a un tablero individual en el que fue creado. Firebase nos permite hacer esto usando el método Where. Echemos un vistazo a cómo podemos hacer esto. Justo después de nuestra ListRef, podemos encadenar al final el método Where. Entonces dentro de aquí, esto toma tres parámetros. El primer parámetro que agregamos es el nombre del campo. El nombre del campo va a ser igual a lista de tablero, ya que estamos mirando los objetos de lista y luego queremos seleccionar la propiedad de tablero. Dentro aquí como una cuerda, podemos pasar en list.board. El segundo parámetro es la comparación, aquí podemos usar menos que, mayor que o igual, igual que podemos con JavaScript. Separarlo por una coma. Como cadena, podemos agregar el doble igual para comparar esta referencia de tablero con el BoardID que se pasa a nuestra función como parámetro. Ahora esto sólo agarrará nuestras listas de nuestra colección, donde el campo de tablero coincidirá con el actual BoardiD cargado. Esta lista también tiene un campo CreateDat. Si echamos un vistazo en la consola. Este es el campo CreateDat justo aquí, y esto se puede utilizar para ordenar nuestros datos antes de la fecha a partir de la que se creó. Tengo un error ortográfico aquí, pero eso no es un problema ya que podemos eliminarlos y luego crear una nueva lista más adelante. Echemos un vistazo a cómo podemos usar CreateDat dentro de aquí. Todo lo que necesitamos hacer es solo tener a dónde, esto también podemos encadenar hasta el final el método OrderBy, luego dentro de aquí como una cadena, podemos pasar en nuestro objeto de lista y luego el nombre de campo de CreateDat. Esto ordenará nuestra lista en orden ascendente utilizando el campo CreateDat. También puedes usar cualquier otro campo aquí también. Si desea que tenga el orden invertido, también puede agregar un segundo argumento de descendente que se acortó a D-E-S-C. Pero quiero quitar esto y mantenerlo como predeterminado. Tenemos error por la terminal, así que esto necesita ser BoardID, igual que hemos presionado datos en nuestra función. Entonces, por último, necesitamos llamar al método.get para finalmente obtener estos datos. El resto debe ser bastante directo como es similar a lo que ya hemos usado. Justo después del método Get, vamos a llamar a nuestro objeto de lista, llamado método de.foreach, para que podamos movernos a través de cada elemento dentro de aquí. Después vamos a almacenar cada elemento en la variable de lista, y luego esto ejecuta una función para cada uno. En primer lugar, vamos a agarrar nuestros datos, con datos const y voy a establecer es igual a enumerar el método de datos que miramos en el último video, y luego seleccionar el objeto List. Justo después de aquí vamos a construir nuestra lista real que luego podemos empujar a estado. Recuerda cuando hicimos esto a los tableros de en el App.js, almacenamos los datos en una variable, después creamos un objeto de tablero donde teníamos los datos. También necesitábamos fusionar en el ID, que no estaba disponible a partir de este método de datos. Simplemente hacemos lo mismo sobre el tablero, podemos crear nuestros objetos de lista. Esto va a ser igual a nuestro ID, cual puedes agarrar de list.id Luego usamos el operador spread para fusionar en el resto de los datos. Debajo de esto, podemos entonces establecer los estados con esto.SetState. El estado que queremos agregar son los CurrentLists. Tenemos esto ya configurado como una matriz vacía. Vamos a poner esto dentro aquí. Estamos buscando los CurrentLists, van a ser iguales a un objeto donde nos diseminamos en el estado actual con este.State.CurrentLists separados por una coma. Después nos fusionamos en nuestro objeto de lista que acabamos de crear. Ahora este método está agarrando nuestras CurrentLists y filtrándolas a la vista del tablero de columnas. El siguiente paso es llamar realmente a este método cuando se montará el componente. Hagamos esto con, esto.GetLists. Recuerda que GetLists también necesitará un BoardID, el cual puedes pasar como argumento usando this.props.match, para obtener esto desde el navegador. Queremos seleccionar los params y luego también el BoarDiD. Guarda este archivo y dirígete al navegador y luego ve a nuestros Proyectos. Si abrimos la Consola vemos una extraña advertencia. Nos dice que la consulta requiere de un índice, y luego podemos seguir este enlace para crear esto. Podemos hacer clic en este enlace que proporciona y luego tomará pasa a la consola de Firebase donde podemos crear un nuevo índice. Aquí podemos ver que Firebase va a crear un índice para los de esta colección de lista. También podemos ver que los métodos que acabamos agregar también se hacen efectivos en estos campos. Asaltamos en la lista de tableros en orden ascendente y también la propiedad CreateDat en orden ascendente también. Podemos seguir adelante y crear nuestro índice haciendo clic en este botón. Esto es necesario ya que ahora realizamos una consulta más compleja. Recuerda que estamos usando el método Where para filtrar documentos por el BoarDiD y luego los buscamos por las fechas de creación. Un índice es una forma de estructurar nuestros datos para bucle Firebase para localizar nuestros datos de manera más eficiente. Derivando que nuestra consulta se realice mucho más rápido, básicamente hará que Firebase sea consciente de que en algún momento del futuro, estaremos formando una consulta más compleja para que Firebase pueda estar lista para ellos. Esto podría tardar un poco en terminar. Pausa el video y vuelve cuando todo esto esté hecho. Bienvenido de nuevo. Una vez creado este índice, ahora será un buen momento para eliminar todas las listas y tarjetas que actualmente tenemos en la base de datos. Vayamos a allá y empezamos con las listas. Voy a dar clic en este ícono y eliminar la colección. También escribe el nombre de las listas para confirmarlo, y también las tarjetas podemos hacer lo mismo. [ inaudible] quitar esto. Esto se debe a que están vinculados a los BoardIds a partir de los datos de la muestra. Ya no estoy usando los datos de la muestra, por lo tanto no necesitamos esto. Ahora si volvemos a nuestra aplicación, recarguemos, y luego podremos crear algunas listas nuevas. Añadamos Lista 1, List2, y luego actualicemos. Vemos un error ahora diciendo que no puede convertir objeto no identificado o anulado. El motivo por el que estamos viendo este error que está relacionado con esto.props.lists.title sobre en los componentes de la lista es porque todavía estamos tratando de recorrer las tarjetas, que aún no tenemos. Recuerda antes cuando teníamos nuestros datos de muestra, teníamos algunas tarjetas añadidas como una matriz dentro de cada lista de objetos. Ya no tenemos estos valores, por lo que ahora podemos eliminar esto del List.js. Todo lo que necesitamos hacer es comentar nuestro bucle, que es esta sección aquí, que está renderizando un componente de tarjeta. Pasado al navegador y ahora podemos ver las dos listas que acabamos de crear. También creemos algunas cartas, tarjeta 1, tarjeta 2 Podemos agregar esta lista dos también, por lo que carta para la lista dos. Todavía no veremos estas tarjetas, porque acabamos de comentar los componentes de la tarjeta, pero si pasamos a Firebase y luego actualizamos la consola, primero que nada, echemos un vistazo a las listas. Si hacemos clic en estos, estos ahora están vinculados a un tablero en particular. Lo mismo con nuestra segunda, y si vamos a nuestras tarjetas, también podemos ver que estas están conectadas a una lista ID a la tercera, y esta es una identificación diferente a las dos primeras. Para terminar este video, ya podemos leer las tarjetas de la base de datos, cuales seguirán un patrón similar a nuestras listas. Encima en nuestra lista obtuvimos componentes JS, primero podemos llamar al método desde dentro de componente did mount. Justo debajo de nuestro objeto de estado, podemos agregar componentsDidMounts, configurar nuestros corchetes y nuestras llaves. Dentro de aquí podemos llamar a this.fetch cards, que es el método que vamos a crear en tan solo un momento, que va a pasar en la lista ID con este top props fault.list. Entonces podemos configurar nuestro método personalizado justo debajo de esto, por lo que esto es las tarjetas recuperadas va a ser una función de sincronización, que vas a tomar en esta lista ID que se le pasaría, configura nuestra función de flecha. Entonces intento y un bloque de captura. Pasando el error, no una consola.error con el texto de error, buscando tarjetas. Agrega una coma y luego da salida a nuestro error, por lo que ahora podemos configurar las cosas para obtener nuestras tarjetas de la base de datos, que coincidirá con este ID de lista que se pasa. Podemos hacer esto dentro del bloque try. Vamos a crear primero una constante para almacenar nuestras tarjetas, donde vamos a esperar los datos de nuestras tarjetas ref. Después de días, podemos sumar tren al final D enseñado donde método. Recuerda esto toma tres argumentos. El primero es el valor con el que quieres comparar. Esto se almacena dentro de las tarjetas. Si echamos un vistazo a la consola, queremos seleccionar el ID de lista, por lo que selecciona card.list ID. El segundo valor es la comparación, que es igual. Queremos comprobar si esto es igual al ID de lista. Justo después de esto, también podemos encadenar hasta el final el orden por método. Queremos ordenar este ascender por la card.created up propiedad, y luego finalmente, para obtener estos datos, llamamos método el.get. Después de esto, podemos entonces seleccionar nuestras tarjetas y luego recorrer cada una con el.for cada una. Para cada se va entonces a almacenar cada valor en una variable llamada tarjeta. Esto ejecutará una función que va a construir nuestros objetos de tarjeta. En primer lugar, podemos agarrar nuestros datos, que es igual que hicimos con las listas de los tableros. Podemos agarrar nuestros objetos de tarjeta. Podemos ejecutar el método de datos para agarrar todas las propiedades de la tarjeta y luego seleccionar los objetos de la tarjeta. A continuación, vamos a crear entonces nuestros objetos de tarjeta, que va a ser el que, lo que empujará al estado. Tenemos que seleccionar el ID, cual está disponible desde el objeto de la tarjeta.ID, separado por una coma. Podemos entonces fusionarnos en los datos, igual que hicimos con las listas de los tableros. Vamos a probar esto está trabajando con un registro de consola después de nuestro objeto. Queremos registrar el valor de nuestros objetos de tarjeta. Guarda esto y luego pasa al navegador a nuestro proyecto, ahora podemos recargar, y luego vemos que esta consulta también requiere un índice dos, así que haz clic en link sobre la consola, y ahora podemos crear nuestro índice para las tarjetas también. Vamos a crear esto con este botón. Pausa video y danos unos momentos para construir nuestro índice, y te veré en unos minutos. Con nuestro índice ahora se crea, podemos volver a la aplicación y luego recargar, y ahora veremos que las tres cartas se han colocado en la consola. Eso es tratar de crear una nueva tarjeta, prueba. Número uno, manda esto apagado, recarga el navegador, y ahora tendremos nuestra cuarta tarjeta recién añadida con el texto de prueba uno. También podemos ver esto está vinculado a esta lista ID. Vamos a intentar agregar uno nuevo, así que prueba dos recarga, y luego podemos ver que la prueba dos tiene un ID de lista diferente al número uno. Lo siguiente que hay que hacer ahora sabemos que tenemos los datos correctos es reemplazar nuestro registro de consola por un estado establecido. Esto ahora establece estados. Dentro de aquí vamos a poner las cartas actuales, que ya tenemos en los estados, crear nuestros objetos. Podemos entonces fusionarnos con nuestros estados. Nuestras tarjetas actuales, pasando también en nuestro nuevo objeto de tarjeta. Con esto ahora volvamos al navegador, y luego si buscamos dentro de las herramientas de desarrollador de reaccionar, podemos buscar una lista de componentes, seleccionar uno de estos, y luego abajo en la parte inferior podemos ver nuestro estado de las tarjetas actuales. Esto tiene un rayo con dos cartas diferentes dentro de aquí. Puedes buscar nuestro segundo. Desinstala las tres tarjetas actuales relacionadas con esta lista, por lo que lo último que hay que hacer en este video es mostrar estas tarjetas dentro de cada lista. Si volvemos a todos los componentes de la lista y podemos contar este bucle el cual correrá el fuera de las tarjetas. Podemos entonces cambiar las indicaciones de estilo para ser este estado superior. Ya que ahora almacenamos en las tarjetas actuales en estados. Exactamente lo mismo antes que nuestros datos. Esto va a ser esta.state, .tarjetas actuales, pasando también en la clave, hacia el navegador, y ahora veremos las listas. Ahora ten las tarjetas mostradas en cada una. Esto ahora nos deja con cada tarjeta en la lista correcta, y a continuación vamos a ver cómo podemos eliminar datos. 25. Borrar tarjetas y listas de Firebase: Pasamos ahora a agregar la funcionalidad para eliminar nuestros elementos de la base de datos. Eliminar un elemento de Firebase es bastante simple. Todo lo que necesitamos hacer es encontrar el elemento en la base de datos y luego llamar a un método de eliminación. Esto es lo que podemos hacer por las tarjetas. El primero que tenemos que hacer es agregar un simple botón Remove para cada tarjeta, cual voy a agregar como un simple cruce a los componentes Card.js dentro de nuestro div y simplemente soplar el contexto. Podemos añadir elementos span HTML. Dentro de aquí podemos agregar un manejador de eventos OnClick, que va a desencadenar un método llamado this.DeleteCard. Dentro de las etiquetas de span de apertura y cierre, podemos agregar entidad HTML, que son los tiempos ampersand y luego el punto y coma. También el navegador. Esto dará salida a una cruz, que podemos usar para activar este método. Ahora estamos lidiando con las cartas almacenadas en Firebase. Tenemos que importar las tarjetas de referencia. Arriba en la parte superior, podemos importar nuestras CardsRef. Esto es de la cadena que es.. /base de fuego. Entonces podemos crear nuestro método DeleteCard, que se llama haciendo click en esta cruz. Justo por encima de nuestro esfuerzo aleatorio. Podemos agregar DeleteCard va a ser un fregadero. Recibiremos la información del evento. Cuando se llama asentado la función de flecha. Voy a probar sección y también la captura pasando en el error. Ahora podemos poner una console.error con la cadena de error borrando tarjeta. En los primeros pasos en la sección try se va a utilizar esta información de evento para evitar el comportamiento predeterminado. Tendrá entonces que agarrar el CardiD de utilería. Podemos almacenar esto en una constante llamada CardiD. Unsat esto también.props.data.id Recuerda que cada tarjeta está recibiendo los apoyos llamados datos. Por lo que entraremos en las herramientas de desarrollo en React. Si buscas una tarjeta, esto es recibiendo todos los datos de cada tarjeta Dentro de este dato Props. Aquí accedemos en él este id Ahora podemos usar esto para acceder a una tarjeta en particular dentro de una Firebase con este id. debajo de esta loca nueva constante, que va a ser para nuestra tarjeta. Aquí vamos a esperar el punto CardsRef a nuestra colección. Podemos entonces seleccionar un documentos en particular por el id. Ya tenemos este CardID almacenado justo arriba. El último paso es entonces llamar al método de eliminación en esta tarjeta en particular. Por lo que card.delete el cual es proporcionado por Firebase. Guardemos esto y pasemos al navegador. Demos click en “Prueba uno”. Todavía tenemos que refrescarnos ya que aún no tenemos funcionalidad en tiempo real. Pero ahora vemos que la prueba uno se ha quitado. Si pasamos a la consola y luego recargamos esto, podemos revisar cada una de nuestras tarjetas para probar uno. Esto ahora se está retirando de nuestra base de datos también. A continuación, tenemos que eliminar también las listas. Esto es un poco más complejo ya que también necesitamos encontrar y quitar cada tarjeta, que también está asociada a esta lista. Hagamos esto de nuevo en el componente de lista, que es list.js. De nuevo, esto también necesita un botón o a través para eliminar la lista. Vamos a hacer esto justo después de que emprendamos el título de la lista. Esta línea de código justo aquí en el lapso. El contenido va a ser la entidad HTML de los tiempos ampersand y el punto y coma. Esto también necesitará un manejador de eventos OnClick, que va a ser el bucle esto.DeleteList en la parte superior. También podemos importar nuestras listasRef desde Firebase. Después creó este método DeleteList. Esto va a ser asíncrona y luego pasar en una función de flecha, una sección try. Podemos captar cualquier error en un error de consola con el texto de Error delete list. El primer paso en el bloque try va a ser agarrar el ListId. Podemos almacenar esto en una constante llamada ListId. Este ListId está disponible en los apoyos. Entonces esto.props el nombre de los apoyos es lista. Entonces podemos agarrar el id Blow es una segunda constante para nuestras tarjetas donde vamos a esperar a nuestras CardsRef. Para esto, no sólo queremos llamar el.getmethod. Ya que esto agarrará todas nuestras tarjetas en la base de datos. Solo queremos quitar las cartas particulares que se asocian a esta lista, que eliminarán en. Anote esto hacia abajo. Podemos encadenar al final, los puntos donde método. Recuerda esto toma tres argumentos. El primero va a ser la tarjeta.ListId. El segundo va a ser la comparación. Querría comprobar si cada propiedad de id de lista en cada tarjeta va a ser igual a este ListId desde props. Por lo que en coma, añadir en el ListId. Entonces finalmente podemos encadenar en el método get para tirar de estas tarjetas. Siguiente paso, qué quieres hacer con estas tarjetas, una vez que las recuperemos. Bueno, por cada tarjeta, que recuperamos, queremos llamar al método de eliminación. Pero justo antes de hacer esto, vamos a añadir un rápido si declaraciones, que primero va a comprobar si alguna tarjeta ha regresado. Si cards.docs.length no es igual no es igual a 0. A continuación añadimos las llaves de la tarjeta. Esto básicamente es comprobar si la longitud de los documentos que se ha devuelto es mayor que cero. Esto significa que tenemos algunas coincidencias para nuestro id de lista. entonces podemos recorrer todas las cards.foreach. Entonces por cada tarjeta vamos a llamar a el.deletemethod. Podemos hacer t su con card.ref.delete. Éstas deben encargarse de retirar todas las tarjetas que están vinculadas a esta lista. El siguiente paso es realmente eliminar la lista. Apenas cada sección de cartas va a ser un poco más simple. Todo lo que necesitamos hacer es crear una constante la cual vas a agarrar nuestra lista de las ListsRef. El documento que se quiere agarrar es el que es igual a este LisId. Pasemos esto adentro. Podemos entonces usar esta lista y llamar al método Firebase.Delete, que moverá la lista también. Ahora podemos guardar esto y podemos probar esto en el navegador, pasando a Chrome y dentro del proyecto. Vayamos por la Lista 1. Esto debería quitar Card1, Card2, y probar dos. Haga clic en esto. No vemos ningún error en la consola, así que eso está bien. Vamos a refrescarnos. Ahora esto se ha quitado. Pasado a la consola. Comprobemos primero nuestras listas. Ahora solo tenemos la Lista 2 dentro de aquí. Se está suprimiendo la lista. Podemos revisar las tarjetas. Ahora sólo tendremos esta tarjeta única, que es de esta lista de aquí. Esto es todo ahora trabajar en. Podemos dar click en una lista para eliminar. También eliminará cualquier tarjeta que se haya vinculado con el id A continuación vamos a estar volviendo a eliminar elementos eliminando también los tableros de nuestra aplicación y también de Firebase. 26. Borrador de tableros: Eliminar el tablero es un poco más involucrado que el último video. No sintamos que aún no hemos mirado. Esto se debe a que necesitamos encontrar la junta en sí. Entonces todas las listas y tarjetas asociadas que pertenecen al tablero. Antes de entonces eliminar en las tres de estas colecciones. Si vamos a la vista de tablero, ya tenemos un botón Eliminar tablero arriba en la parte superior. Todos los, métodos relacionados con la junta y también el estado de la pelota se mantiene entonces en el app.js. Alguien ha añadido un método Delete Board dentro de aquí también. Quien luego va pasarlo abajo como apoyos a los componentes de la pelota. por lo que se puede activar cuando se hace clic en el botón. El primer paso es crear el método Delete Board, que le pasará el Id del tablero. Bajemos justo por encima del método aleatorio. Podemos crear nuestro Tablero de Borrar. Esto va a ser asíncrona. Vamos a pasar el ID del tablero cuando llamemos a esto y luego configuraremos nuestra función de flecha. En primer lugar, podemos crear las secciones try and catch. Pasando el error como siempre. Entonces podríamos hacer una consola.error con el texto de error borrando tablero, un dos puntos, y luego pasar el error. Ya que estamos llamando a este método desde el botón en los componentes de la placa, necesitamos pasarlo hacia abajo como apoyos. Desplazemos hacia abajo hasta nuestro router. Tenemos que encontrar los componentes de la placa. Que es justo aquí, justo después del problema del router, podemos pasar en delete board, que va a ser igual a nuestro método de las tiendas delete board. Si pasamos al board.js, antes de que nos olvidemos, agreguemos la validación adecuada. Tenemos que importar esto ya que no lo hemos usado todavía, importar los tipos de prop. Entonces hacia abajo en la parte inferior, podemos crear nuestros tipos de prop justo arriba donde exportamos este archivo, tan negrita B, tipos de prop, configuración por encima de los objetos. El único prop en el que entramos al minuto, va a ser el tablero de eliminación. El tablero Eliminar es el tipo de función de prop, por lo que utilizamos .func. Esto también se va a requerir. Dentro del método aleatorio, ya tenemos un botón para agregar al click “Listener To”. Desplazemos hacia arriba y echemos un vistazo a nuestro botón y cuál es éste que acaba de aquí. Podemos entonces agregar en click dentro aquí. Esto va a desencadenar un método, así que vamos a crear esto.Delete Board. Este totalmente tablero no es el método que va a pasar abajo porque tenemos un acceso esta vía apoyos. Ahora podemos seguir adelante y crear Delete Board justo arriba fuera del método aleatorio. El método Borrar tablero, que vamos a sumar ahora, va a ser el responsable de agarrar la identificación de este tablero actual. Entonces llame en necesidad Eliminar método de Junta el cual se está pasando como apoyos, así que agreguemos este Delete Board. Esto es una asíncrona. Entonces dentro de aquí lo primero que hay que hacer es agarrar el ID de placa actual e instalar esto dentro de una constante. tablero ID va a estar disponible a partir de utilería. Este top props.Match.Params.boardid. Recuerda, match.params, son los apoyos del router, y los params van a ser este tablero Id, que puedes agarrar desde aquí. Almacenamos esto dentro de una variable, por lo tanto ahora podemos pasar esto cuando llamamos a nuestro método Delete Board, que acabamos de crear en app.js. Este top utilería, totalmente tablero, como en el tablero ID. Antes de ir más lejos, vamos a probar, todo esto está funcionando. Encima en el app.js, no tenemos ningún contenido dentro de esta sección try. Hagamos una alerta simple con el nombre variable del ID de la junta, que acaba de pasar. Guarda esto en nuestros proyectos. Intentemos eliminar la pizarra. Genial. Ahora obtenemos la alerta con el mismo ID de tablero que está en la URL, cuando ahora se está llamando a todo el método. Ahora podemos usar el ID para agarrar todos los tableros de Firebase, actualizar el estado, y luego finalmente el eliminar el tablero. Paso uno, vamos a mover la alerta, y luego podemos guardar el tablero actual a una constante. Podemos hacerlo esperando a nuestros tableros Ref. Agarra el documento, y el documento que quieres agarrar es por el DNI. El ID se almacena dentro de la variable ID de tablero. El siguiente paso es actualizar el estado con este estado.set. el interior de aquí se puede pasar en nuestro objeto estatal donde vamos a actualizar las Juntas dentro del Estado, se configurará esto como una matriz. El primero es usar al Operador de Spread para agarrar el estado actual de estas juntas estatales. Esto tomará una copia de todos los de la junta actualmente en estados, pero si queremos quitar una junta en particular, ¿cómo podemos hacer esto? Bueno, podemos usar un método de filtro JavaScript, que filtrará cualquier Junta en particular de los Estados. Dentro de aquí, vamos a almacenar cada tablero dentro de esta variable y luego ejecutar una función para cada uno. Esta función va a ser responsable de sólo devolver cualquier tableros de Estados que no coincida con esta tarjeta de identificación. Añadamos nuestra declaración de devolución. Queremos devolver cualquier tablón donde el ID no sea igual a este ID de tablero, que acabamos de eliminar. Paso número tres, justo fuera de esta sección de corte, vamos a llamar a board.Eliminar para quitar esto de Firebase. No queremos probar esto todavía, porque también queremos quitar las listas y tarjetas para este tablero al mismo tiempo. Empecemos con las listas, así que por encima de nuestra sección de prueba. Podemos empezar con la creación de una constante llamada Listas. Dentro de aquí vamos a esperar nuestra gráfica de lista, que es nuestra colección de listas. Dentro de esta constante de lista, queremos filtrar hacia abajo todas las listas que están relacionadas con este ID de tablero. Podemos hacer esto con el método web. Se necesita en tres parámetros. El primero va a ser la list.board. El segundo es igual a como cadena, y luego el tercer valor es el ID de tablero. Esto va a filtrar todas nuestras listas donde la propiedad de la junta es igual al tablero que fue pasado, entonces podemos encontrar el agarrar todos estos ponderados, they.get método. Ya que ahora usamos este borrador de lista, ahora podemos subir hasta la parte superior de este archivo donde agregamos la importación y también en esto también, luego volver a nuestro método. Con este dato de lista, que ahora volvemos atrás, ahora necesitamos hacer dos cosas. En primer lugar, necesitamos agregar una declaración if para comprobar realmente si hay alguna lista guardada esta junta actual, antes de que sigamos adelante y las eliminemos. Número 2, si la lista está disponible, necesitamos mirar a través de ellos y luego eliminar. Justo debajo de Get, podemos agregar una declaración if. Podemos comprobar si listas, docs longitud de punto no es igual a cero, entonces el código dentro de esta sentencia if sólo se ejecutará si hay más de una lista. Si estas listas, entonces podemos salir para ti con el para cada método. Para cada uno, vamos a almacenar cada elemento dentro de esta variable de lista, configura una función para cada uno. Ahora esto nos deja en una posición similar al último video. Tenemos listas que necesitamos eliminar, y también tenemos que encontrar las cartas para cada lista también y luego seguir adelante y eliminarlas. Significa que ahora tenemos alguna funcionalidad compartida. Si pasamos a la lista app.js y luego echamos un vistazo al método delete list. Creamos este método en el último video para hacer esto. Entonces en lugar de duplicarlo, podemos levantar esto hasta el app.js y luego deberá el uso de esta función. Empecemos recortando el método completo. Estará cerrando corsé rizado hasta deletelist alojado app.js. Vamos a pegar esto en y justo encima del portapapeles. Este método utiliza las tarjetas firebase href, que se puede ver si nos desplazamos hacia arriba sólo un aquí. Tenemos que importar esto en la parte superior y luego volver a este método deletelist. Esperanza en la cima aquí tenemos una constante llamada ListId. Esta línea está obteniendo los datos de los apoyos, pero no tenemos esta lista adecuada disponible ahora en este app.js por lo que eliminamos esta línea. y luego en su lugar cuando llamemos, este método pasará en este ListId. Esto entre paréntesis. Ya que eliminamos este deletelist de los componentes de la lista, ahora necesitamos pasarlo de nuevo a la baja vía utilería. Bajemos a nuestra mesa directiva. Dentro del router. A continuación, puede agregar esto como un prop. Este es el deletelist y esto va a ser igual a esto, dot deletelist. Después ve a la junta app.js. Podemos sumar estos en como tipo de prop. Vamos a duplicar esto y esto fue deletelist. Lista de enlaces estaba abajo dentro del componente de lista. Ahora podemos pasar esto hacia abajo como un prop dentro de esta lista de componentes. Justo después de una lista, también podemos agregar nuestra prop deletelist, que va a estar disponible desde este top props, dots deletelist. Ahora nuevamente tenemos esta funcionalidad deletelist disponible en la lista. Esto ahora está recibiendo esto como utilería. Podemos añadirlo a los tiempos de utilería en la parte inferior. Se trata de los eliminadores. El tipo de prop es un tipo de función que también se requiere, añadir un coma en el medio. Dentro del método aleatorio para esta lista, tenemos un elemento span que está llamando a nuestro método delete list. Podemos recrear esto anterior para llamar al método que pasas como utilería. Fuera de render, podemos crear nuestro nuevo método llamado list deletelist, configurar nuestra función y luego dentro de esta función queremos hacer dos cosas. En primer lugar, queremos agarrar el ListId. Porque recuerda de antes de más en el app.js, Cuando pasamos por encima de este método deletelist. Volvamos a desplazarnos hacia arriba. También pasamos esto como un ListId. Este ListId está disponible dentro de este componente de lista a través de utilería. Este top pide dot list dot dot id. Entonces finalmente podemos seguir adelante y llamar a nuestro método deletelist con este punto-prompts. Dot deletelist, que va a pasar en el ListId. Guarda este archivo y antes de ir más lejos, podemos probar esta lista se está eliminando y los problemas quieren ser listas-ref y el app.js. Añadamos un s adentro aquí y también 63 y 67. Eso es al final. También aquí también. Bien. Ahora está funcionando. Tratemos de eliminar una lista. Añadamos la lista uno dentro de aquí. Refrescar, dar click en Siguiente. Ahora si recargamos esto, esto ya se ha eliminado. Probemos también uno de estos en diferentes componentes. Este nuevo click en Siguiente. Ahora también podemos quitar esto. Ahora esto fue un poco de trabajo extra para meter esto en diferentes componentes. Pero significa que ahora podemos volver a nuestro app.js donde empezamos originalmente y luego podemos hacer uso de este método deletelist para cada lista que tenemos. Ahora estamos recorriendo cada una de las listas o cuando ahora lo hace es llamar a este método deletelist, que ahora tenemos disponible en este componente. Este deletelist de puntos. Deletelist también necesita ser pasado en un id y firebase de almacenamiento esto dentro de un objeto llamado ref. Podemos acceder a esto con list dot ref, dot id Ahora solo necesitamos darle una prueba y de hecho, esto responde ser nuestra constante de lista en lugar de nuestra lista ref. Nos da un ahorro. Ahora si entramos en una de estas tablas, vayamos por nuestra Prueba 2. Dentro de un aquí tenemos una lista de uno, dos y tres y también la causa de a, b, y c. Ahora si tratamos de eliminar nuestro tablero, actualicemos. Ahora voy a ver que se han eliminado todos los datos. Podemos revisar esto en la consola firebase. Vamos a revisar nuestra lista de nuestras tarjetas también han sido eliminadas. Empecemos primero con nuestras listas. Solo tenemos la lista única aquí en vez de la número 1, 2 y 3 en nuestras tarjetas. Todavía tienes la tarjeta única 2 y no vemos a, b, y c. Esto ahora son todos los métodos de eliminación que necesitamos para este proyecto y en la siguiente sección veremos cómo podemos actualizar nuestros datos dentro de una firebase. 27. Actualización de datos en Firebase: En esta sección nos vamos a centrar en actualizar nuestros tableros, listas y tarjetas. Esto es importante ya que un usuario puede querer obedecer cosas como un título de tablero o una etiqueta en una tarjeta. Esas etiquetas son algo que vamos a entrar en Zoom. En este video, vamos a estar haciendo que el tablero y enumera títulos ambos editables después de hacer clic en ellos. Entonces podemos hacer cualquier cambio y empujarlos a Firebase. Empecemos de nuevo en el board.js entonces podremos trabajar con nuestro título de tablero. Aquí vamos a estar reemplazando el título actual del tablero por elemento de entrada HTML para que el usuario pueda luego escribir en él. Empecemos por quitar nuestro encabezado nivel tres así que eliminemos, o comentemos esta línea ambos. Entonces dentro de aquí podemos crear una entrada HTML. Entonces en la siguiente línea voy a agregar el tipo que va a ser igual al texto. También, un nombre, que va a ser el título de la junta sobre el cambio, que activará un método que se va a llamar tablero de actualización. El último atributo va a ser el valor predeterminado y el valor predeterminado va a ser igual a este.State.Currentboard.Title. Esto va a agarrar el título igual que lo hizo arriba en nuestro rubro de nivel tres. Usando el valor predeterminado en lugar de solo el atributo value, especificaremos el valor inicial. Después dejaremos las actualizaciones posteriores en controlado para que podamos por tanto editar este campo. Guardaré este archivo y luego pasaré al navegador, a nuestros proyectos. Tenemos que volver atrás, seleccionar la pizarra. Ahora podemos dar click en su título y editarlo. Por supuesto, esto no se guardará en Firebase por el momento porque no hemos creado este método del tablero de actualización al que llamamos un interior aquí. Hagamos esto fuera del método render. Podemos crear tablero de actualización, pasando la información del evento y luego establece sobre la función. Esta actualización real del tablero abrirá el app.js junto con todas las subastas por la borda. Empecemos una bigamia en el tablero Id y la almacenemos dentro de una constante. El Id de la junta está disponible en esto.props.match.params.boardid. Se trata de un Id de tablero el cual está disponible a partir de los parámetros de URL. Lo almacenamos dentro de esta variable. Ahora vamos a crear una nueva constante que se va a llamar nuevo título. Esto va a almacenar el valor que el usuario escribió. Podemos agarrar esto de E.CurrentTarget.Value. A continuación, abrir calificaciones y si estados de cuenta donde podemos comprobar si la junta Id está presente y también queremos comprobar si hay un nuevo título. Si ambos están presentes, queremos llamar a un método llamado update board, que vamos a crear un app.js en tan solo un momento. Esto pasará como apoyos para que podamos acceder con esto.props.UpdateBoard. Entonces vamos a enviar a este método, el tablero Id y también el nuevo texto el cual se guarda en nuevo título. Ahora subamos al app.js y podemos crear este método de la tarjeta de actualización, que va a ser responsable de guardar esto en Firebase. Por lo que fuera del render, tablero de actualización es será asíncrono. Volveremos a decir el tablero Id y también el nuevo título. Podemos arreglarnos de nuevo sección tratando luego la captura justo después. Pasando el error donde podemos hacer un error de consola con el texto de error actualizando tablero, pasando también en el error. Bien. Ahora, lo primero que hay que hacer es agarrar el tablero de Firebase usando este tablero Id. Instalar las semi constantes llamadas tablero. Contamos con nuestros tableros ref, que apunta a nuestra colección. Queremos apuntar a un documento específico y este documento va a ser igual al tablero Id. Lo siguiente que podemos hacer es llamar a un método Firebase llamado actualización. Entonces dentro de aquí vamos a pasar en un objeto. El campo que queremos actualizar es un título y éste está disponible con board.title. Voy a poner esto al nuevo título que se pasa. Ahora hemos creado esto. También ahora necesitamos pasar esto a los componentes de la placa. Ya que llamamos nicho desde el board.js, pasemos esto como apoyos. Esto es tablero de actualización por lo que todavía actualizan tablero sobre el boards.js. También puedes agregar esto a de tipos de prop abajo en la parte inferior. Esto es tablero de actualización. El tipo de prop, esta también es una función que también se requiere para guardar este archivo ahora en el navegador. Vamos a encogernos esto. No quiero poner esto lado a lado con la consola Firebase para que podamos ver esta actualización en tiempo real. A la consola, vamos a seleccionar nuestro tablero de tareas que es éste justo aquí. Haga clic en nuestro título. Tratemos de añadir algunos textos diferentes aquí. Voy a ver estas actualizaciones de inmediato. Podemos quitar esto. Tratemos de refrescar. Si ahora recargamos el navegador, vemos que estos datos persistirán después de una recarga. Cambiar el título de la lista también es muy similar a, si no aún más simple ya que voy a estar agregando todo el código en el componente de lista por lo que no hay necesidad de pasarlo por los apoyos. Si pasamos al list.js, podemos reemplazar nuestros elementos p por una entrada. Desplácese hacia abajo hasta el render. En lugar de nuestros elementos p, podemos eliminar esto y las entradas HTML. El tipo va a ser igual al texto. También vamos a añadir un nombre que va a ser el título de la lista. Al cambiar esto activará un nuevo método el cual va a ser lista de actualización luego finalmente el valor predeterminado. Este valor predeterminado va a ser igual a esto.props.list.title por lo que vamos a agarrar esto desde arriba entonces podemos construir la lista de actualización fuera del método render. Esta será una toma de sincronización en la información del evento. En primer lugar, como siempre, agregamos nuestra sección try y me atraparé por cualquier manejo de errores. El error de consola va a ser una cadena de error actualizando lista también pasando en el error justo después. Actualizar lista también necesita acceso a esta lista Id así que recortemos esta constante desde justo arriba. Podemos entonces añadir esto en. Una segunda constante de nuevo título que se va a almacenar en el valor, que el usuario ha escrito. Podemos agarrar esto de e.CurrentTarget luego agarrar el valor que el usuario ha ingresado. A continuación, agarramos nuestra lista de Firebase y la almacenamos en una constante llamada lista. Esperemos las listas ref. Podemos agarrar un documento por el ID, y el Id se almacena justo ambos en la lista Id. El paso final es llamar al método de actualización con list.update. Dentro de aquí como objeto, vamos a actualizar el campo de título el cual podemos agarrar de list.title y ponerlo igual a nuestro nuevo título. Vamos a darle una oportunidad a esto. Tenemos que ir al navegador y encontrar un tablero que tenga una lista. Volvamos a la lista dos, vamos a dar click en esto y cambiarlo para que sea la lista 200. También podemos revisar lado a lado. Lista 200 ciudades americanas se ha actualizado en el interior aquí. Si actualizamos, esto ahora se mantiene persistente dentro del navegador lo que significa que esto ahora se ha almacenado dentro una Firebase y ahora estamos recuperando esto en nuestros componentes de lista. Eso es suficiente para actualizar el tablero y la lista. La actualización de la tarjeta, vamos a tener un poco más al respecto. Empezaremos esto en el siguiente video creando un modal pop-up para realizar nuestros cambios. 28. Editar el modal de cartas: En la versión terminada del proyecto que he abierto aquí, si hacemos click en alguna de estas tarjetas nos lleva a un modal adecuado. Este modal nos permitirá editar el texto en las tarjetas, y también añadir y quitar etiquetas también. Las etiquetas son algo que Trello utiliza como sistema de etiquetado. A modo de ejemplo si quisieras ver visiblemente todas nuestras tarjetas que hemos completado, quizá queramos añadir una etiqueta verde para mostrar esto. Este modal va a ser un nuevo componente para manejar todo esto, y esto es lo que vamos a seguir adelante y crear ahora. El estilo para el modal ya se ha proporcionado en los estilos CSS, que debiste haber descargado antes. Acaba de agregar un poco de posicionamiento y estilo básico para que podamos enfocarnos en el HTML y JavaScript dentro de nuestro componente. Empecemos por crear esto de nuevo en la carpeta de componentes. Vamos a crear un nuevo archivo llamado extensión EditCardModal.js. Este componente se ocupa de los apoyos pero por ahora, solo voy a crear el marcado básico, y luego volveremos y editaremos esto pronto. Empecemos con importar React. Entonces podemos crear nuestro componente base de clase el cual se va a llamar EditCardModal. Como siempre esto se va a extender React.Component. Dentro de aquí podemos establecer nuestro estado inicial, por lo que es un objeto de burbuja, y luego la primera pieza de estados que voy a añadir es para las etiquetas disponibles. Esta va a ser una matriz que va a contener seis valores diferentes, para los colores que están disponibles para seleccionar. El primero es un valor hexadecimal de 80ccff separado por una coma, entonces voy a copiar y luego pegar esto en cinco veces más, para darnos seis valores diferentes. Este segundo, éste va a tener el valor de 80ffaa. El tercero, éste va a ser f94a1e. El tercero va a ser ffb3ff. El número cinco va a ser bf00ff. El último es ffad33, separado por una coma. También podemos agregar una matriz vacía, que es para los SelectedLabels. SelectedLabels conservará cada uno de estos valores una vez que un usuario haga clic en ellos. Debajo de esto después de nuestros estados, podemos agregar el método render dentro de aquí, y podemos devolver nuestro jsx. En primer lugar esto va a estar rodeado en un envoltorio, que va a estar contenido en un div. El nombre de la clase va a ser igual a modal-wrapper. Cierra esto. Dentro de aquí podemos anidar en un segundo div, que tendrá el nombre de clase de modal-body. Este modal-cuerpo va a tener una sección de formulario. Echemos un vistazo a la versión terminada, haga clic en una de estas. Este modal va a tener un botón de cierre en la parte superior derecha, que al hacer click en esto nos devolverá de nuevo a la vista del tablero. Vamos a agregar un título, luego vamos a recorrer en bucle estas etiquetas disponibles las cuales acabas de establecer el estado, y luego mostrarlas. Después de esto tendremos un área de edición donde el usuario podrá editar el texto de las tarjetas, seguido de las etiquetas seleccionadas que fue el segundo ítem en nuestro estado, y luego un botón de enviar para guardar estos cambios. Sigamos adelante y construyamos esto ahora dentro de este div. En primer lugar dentro de aquí podemos agregar un formulario anidado por dentro. Vamos a agregar un div y esto va a ser un div para la primera sección que es para las etiquetas disponibles. El top de esta sección modal tenía una cruz en la que un usuario podía hacer clic sobre ella para cerrar el modal. Podemos agregar esto con una entidad HTML que es ×. Esto también va a tener un ClassName, para proporcionar el CSS de modal-close. Simplemente cierra la barra lateral para darnos un poco más de espacio, y luego justo después de este lapso, un elemento p que va a ser para el texto de agregar/quitar etiquetas. Esto también tiene un ClassName, que es para etiqueta-título. Justo después de este título vamos entonces a recorrer cada uno de estos ítems en la matriz. Ya que ahora es JavaScript para abrir las llaves podemos acceder a las etiquetas disponibles en estados con this.state.AvailableLabels. Entonces vamos a mapear a través de cada uno de estos seis valores almacenados en cada elemento dentro de esta variable de etiqueta. Dentro de aquí podemos devolver un elemento span HTML para cada etiqueta disponible. Cierra esto. El span va a tener un ClassName, que va a ser igual a la etiqueta. Las partes clave de este elemento span va a ser una propiedad de estilo. El estilo propiedad va a darle a la etiqueta el color de fondo que hemos establecido en estado. Abajo justo después de nuestra etiqueta podemos establecer el estilo, abrir las llaves dobles, y de hecho vamos a agregar esto a su propia línea para que sea más legible. Dentro de las llaves podemos establecer el fondo para que sea igual a la etiqueta. Después para rematar esta sección div con una línea horizontal, por lo que los elementos hr justo debajo de este div. Entonces vamos a añadir un segundo div, que va a ser para nuestra segunda sección. El segundo apartado si hacemos click en alguno de estos, va a ser esta área de edición. Vamos a tener una entidad HTML que va a ser este pequeño lápiz, y luego también vamos a tener la entrada donde el usuario pueda cambiar el texto de la tarjeta. Añadamos esto ahora. Este div va a tener un ClassName de edit-area. Entonces lo primero va a ser un lapso para nuestra entidad HTML. El ClassName que es edit-icon. El elemento HTML para el lápiz es el ✎. Después del lapso podemos entonces agregar la entrada que es para el texto. El input también tiene un ClassName que va a ser igual a textbox-edit. Esto es todo lo que necesitamos ahora para este apartado. Después de este área de texto div también vamos a crear una tercera sección div. Esto va a ser para nuestras etiquetas que el usuario ha seleccionado. Empecemos con un elemento p el cual va a tener el título de las etiquetas, seguido de dos puntos. P elements tiene un ClassName, que va a ser igual a etiqueta-título. Entonces después vamos a añadir algo de JavaScript que va a recorrer todas las etiquetas, luego mostrarlas en la pantalla. Por ahora aunque solo voy a añadir una sección TODO, y luego diremos etiquetas de exhibición, comenten esta sección y luego volveremos a esto en un video posterior. Lo último para este formulario es agregar un botón. Este botón en va a enviar el formulario por lo que necesita el tipo de envío, el texto de Guardar cambios. Entonces finalmente para este componente necesitamos exportar por defecto el nombre de EditCardModal. Vamos a darle un guardado a este archivo y luego podemos ir al componente card.js, donde podemos importar este nuevo archivo. Arriba en la parte superior agregamos esto, que fue el EditCardModal de. /EditcardModal. Desplazándose hacia abajo en nuestro método aleatorio ahora podemos generar esto en el navegador. Hagámoslo bien al final mismo. Esto se llamará EditCardModal, cierra esto. Ahora porque tenemos dos elementos lado a lado, también necesitamos agregar esto en un fragmento, por lo que React.Fragmento. Podemos entonces tomar la etiqueta de cierre y añadir esto hasta el final. Si todo va bien ahora deberíamos ver esto más en el navegador. Si vamos a nuestro proyecto, y luego necesitamos agregar una tarjeta, vamos a agregar rápidamente algunas listas, así que abc, refresca y vamos a añadir una tarjeta, 1, 2, y luego 3. Ahora tenemos algún contenido en la pantalla tenemos todas las etiquetas, tenemos el área de texto, y también la sección de etiquetas en la parte inferior. Tenemos la cruz para cerrarla y también el botón para guardar los cambios. Obviamente nada de esto funcionará todavía, y también sólo queremos mostrar esto cuando se haga clic en la tarjeta. [ inaudible] podemos agregar un valor booleano a nuestro estado local sobre en el card.js. Arriba en la parte superior podemos agregar algún estado por lo que es un objeto de burbuja, y luego podemos establecer el estado inicial de ModalOpen para que sea falso. Entonces debajo de esto podemos crear un nuevo método el cual cambiará esto entre verdadero y falso. Llamemos a esto ToggleModal, así que es una función de burbuja, y luego podemos cambiar el estado con esto.setState. Dentro de nuestro objeto el estado que queremos cambiar es ModalOpen. Vamos a poner esto a un valor de esto.State.ModalOpen. Podemos entonces añadir el signo de exclamación justo antes de esto, que hará lo contrario de lo que actualmente se establece en estado. Cada vez que se haga clic en esto tomará lo que hay actualmente, luego hacer lo contrario. Queremos que este método ToggleModal se active cada vez que se ha hecho clic en el texto de la tarjeta, por lo que podemos agregar un manejador de clics al siguiente texto. nuestro método aleatorio, el elemento p. Entonces podemos agregar un manejador de clics dentro del corchete de apertura, y establecer esto igual a este.Toggle.modal. Recuerda dentro de esta tarjeta es donde vamos a renderizar nuestro modal. Este modal necesita estar al tanto de este estado de toggle, para que podamos pasarlo como un prop, por lo que ModalOpen. Pondremos esto en este.State.ModalOpen, guarde este archivo y luego podremos dirigirnos a nuestro componente modal. Ahora esta prop se puede usar para configurar el tipo de visualización usando un operador JavaScript [inaudible]. Vamos a desplazarnos hasta nuestro envoltorio modal que es este div justo aquí, y luego justo después podemos establecer el estilo, vamos a agregar esto a una nueva línea. Podemos establecer la propiedad de estilo CSS con las llaves dobles. Podemos establecer el tipo de visualización de este modal para que sea igual a esto.props.modalOpen. Si este valor booleano es verdadero entonces vamos a establecer este tipo de visualización para que sea igual a bloque. O si esto se establece en false estableceremos que el tipo de visualización sea ninguno, lo que ocultará este componente modal. Ahora vamos a guardar esto y luego probarlo de nuevo en el navegador, en nuestro proyecto. De inmediato vemos que tenemos nuestras tarjetas y lista, pero no tenemos el componente modal mostrando. Intentemos hacer clic en el texto, que ahora activará este método y abrirá el modal. No obstante aunque si hacemos click en esta x en la esquina para quitar, no funciona por el momento. Para esto también necesitamos transmitir este método ToggleModal, así que volvamos al card.js. Tenemos este ToggleModal, que está justo aquí. También podemos pasar esto a nuestra EditCardModal como prop. En una nueva línea, podemos agregar ToggleModal que va a ser igual a nuestro método. De vuelta a los componentes modales, ahora podemos activar este método cuando se ha hecho clic en la x. Este es el span que tiene el x. podemos agregar un manejador de clics igual que lo hicimos antes, que va a ejecutar este prop, así que al click. Podemos establecer esto en esto.Props.ToggleModal. Volver al navegador ya podemos darle una oportunidad a esto. Hagamos click en el modal que debería salir esto. A continuación, haga clic en la x en la esquina que ahora ejecuta el método ToggleModal y luego establece el estado para ser el opuesto que es falso. Esto ahora ha tardado un poco de mecanografía para que este modal funcione. Todo lo que necesitamos hacer ahora es conectarlo a algunos métodos para editar la tarjeta, y esta será nuestra tarea en el siguiente video. 29. Actualizar el texto de la tarjeta: Dentro de nuestro proyecto, si pasamos a las Herramientas de Desarrollador React y luego buscamos los componentes de la tarjeta. Si seleccionamos alguna de estas tarjetas, podemos ver sobre el lado derecho tenemos esta prop de datos, que está disponible para cada una. Esto contiene toda la información sobre la tarjeta actual, como la creada en la fecha, el ID, y cualquier etiqueta que se almacene dentro de la Firebase. Dado que el modal va a ser responsable de cambiar o actualizar todos estos datos, necesitamos pasar estos datos a los componentes modales. Hagámoslo primero saliendo al card.js. Entonces dentro del modal de la tarjeta de edición, podemos entonces agregar un tercer prop a esto, que se va a llamar los datos de la tarjeta. Entonces podemos pasar estos datos hacia abajo como utilería. Esto. props.data, luego pasamos al modal de la tarjeta de edición. Recuerda cuando creamos este componente estará en estados, también creamos una matriz de etiquetas seleccionada, que configuramos para que esté vacía. Ahora tenemos los datos disponibles de Firebase, que incluye cualquier etiqueta que ya haya sido seleccionada. Ahora podemos actualizar esta matriz para incluir cualquier tarjeta que hayas guardado actualmente. Podemos usar esto tan pronto como se monte el componente. Tenemos componente hizo montar y luego dentro aquí, simplemente vamos a establecer el estado con esto. estado establecido. Nuestro objeto va a actualizar las etiquetas seleccionadas con valor de nuestros apoyos, que se almacena en los datos de la tarjeta y los datos de la tarjeta quieren es el campo de las etiquetas. Ahora guardemos esto y abramos el modal y veamos qué tenemos que hacer. Ir al proyecto, dar click en el texto. Lo primero que hay que hacer es agregar el texto de la tarjeta dentro de esta área de texto. El usuario puede cambiarlo si así lo desea. El segundo que hay que hacer es recorrer en bucle nuestras etiquetas seleccionadas, luego mostrarlas justo debajo de aquí. Empecemos agregando el título de la tarjeta al área de texto. De nuevo abierto a VS Code, podemos bajar al esfuerzo aleatorio y echar un vistazo a la entrada, que está justo aquí abajo ya que nuestros datos están en línea. Tenemos que añadir el valor por defecto el cual va a mostrar el valor del texto. Podemos establecer esto desde utilería. Entonces esto. props. datos de la tarjeta. texto. El segundo que debía hacer era recorrer todas las etiquetas disponibles en estado y luego mostrarlas bajo este título de etiquetas. Ya tenemos un lugar holder comentarios donde queremos que esto aparezca. Pero ahora quiero reemplazar esto mapeando a través de nuestras etiquetas seleccionadas. Dentro de las llaves, podemos seleccionar nuestros estados, las etiquetas seleccionadas. Voy a usar el método de mapa para recorrer cada uno, almacenar cada valor dentro de una etiqueta. Podemos entonces configurar nuestra función para cada una. Dentro de aquí, todo lo que vamos a hacer es devolver un elemento span HTML. Este elemento span va a tener un color de fondo, que es el mismo que el color de la etiqueta. Dentro de la etiqueta de apertura, podemos crear un nombre de clase de etiqueta. Pero también queremos establecer el valor de estilo con unas llaves dobles. Establezca la propiedad de fondo CSS para que sea igual a la etiqueta. Este color de fondo de etiqueta va a ser igual al valor hexadecimal que tenemos dentro del estado. Estas etiquetas seleccionadas contendrán cualquiera de estos valores hexagonales. Después desplazándonos hacia abajo, podemos establecer estos para que sean el color de fondo para nuestro lapso. Ya que estamos en bucle, también necesitamos agregar una clave única a cada uno de estos elementos de span. Justo después del fondo, también podemos sumar a la clave, que va a ser igual a nuestra etiqueta. Esto va a estar bien de usar ya que cada uno de los seis colores es único, lo que significa que no tendremos ningún duplicado. Así que guarda esto, y luego pasa al navegador. Pasemos ahora a cualquiera de estos modales haciendo click en el texto. Vemos el texto dentro aquí con un valor de uno. Probemos con el número tres. Todavía no tenemos ninguna etiqueta disponible para que estas tarjetas se muestren, pero vemos que el valor de tres está ahora en una entrada de texto. Para que ahora podamos editar esta tarjeta, podemos agregar un nuevo método al formulario cuando enviemos. Volvamos a nuestro modal y luego desplázate hacia arriba hasta la forma. Dentro de la etiqueta de apertura, podemos agregar un on submit, que va a ser igual a esta.update card. Justo antes de seguir adelante y crear este método de tarjeta de actualización, voy a agregar un ref a la entrada de texto para primero agarrar el valor. Desplácese hacia abajo hasta la entrada con la clase de ediciones de libros de texto, que está justo aquí, justo después del valor predeterminado. También podemos agregar una referencia con esto. entradas de texto. Ahora arriba, necesitamos crear este ref y también el método de tarjeta de actualización. Justo debajo de componente sí montó. Podemos crear nuestra ref, que era entradas de texto y que es igual a react.create ref. Después de esto, necesitamos crear nuestro método de tarjeta de actualización. Por el momento, este método se va a concentrar en actualizar el texto. Volveremos a las etiquetas muy pronto. Empecemos haciendo esta función asíncrona, que toma en la información del evento como la función de flecha donde agregamos la sección de prueba, la sección de corte justo debajo, que vamos a pasar en el error y luego un error de consola que detecta todos los errores de actualización de la tarjeta. Agrega dos puntos, y luego pasa el error. Dentro de nuestra sección de prueba, primero vamos a llamar a prevenir default en los eventos. Para detener el comportamiento predeterminado del navegador vuelva a cargarla en. Siguiente abrir vamos a crear tres constantes. Tenemos que agarrar el ID de la tarjeta, necesitamos agarrar el nuevo texto que se ha agregado al campo de entrada y luego necesitamos agarrar la tarjeta actual de Firebase. Empecemos con la tarjeta ID, cual tendrá disponible dentro de los apoyos. Tarjeta data.id El siguiente es para el nuevo texto que almacenaste dentro de esta ref. Por lo que const nuevo texto. Esto va a ser igual a nuestro valor ref de estas entradas de texto.texto. Podemos agarrar el valor con las corrientes de punto valor de punto. Si esa constante que necesitamos es para la tarjeta actual de Firebase, vamos a esperar su información para volver, que es de nuestras tarjetas ref.doc y luego podemos pasar en nuestra tarjeta ID. Ahora tenemos la tarjeta de Firebase, podemos llamar al método de actualización. En el interior de aquí, montamos nuestros objetos. Por ahora el único campo que vamos a actualizar es el texto. Voy a agarrar esto de tarjeta.texto, decir es igual a nuestra constante de nuevos textos. Justo después de nuestras actualizaciones, podemos entonces cerrar nuestro modal llamando al método toggle modal, que está disponible a partir de los apoyos. Entonces esto.props.toggle modal. En cuanto se esté actualizando la tarjeta y se esté enviando el formulario, entonces cerraremos el modal, y regresaremos a la vista de tablero. Justo antes de continuar, asegúrate de que las tarjetas ref se importen en la parte superior de este archivo y también asegúrate de que esto sea ID. Demos a esto un Guardar y pasemos al proyecto. Selecciona cualquiera de estas tarjetas. Toma el modal, y cambia el valor dentro de las entradas de texto. Ahora guarda los cambios y ahora altera el modal que se va a cerrar. Si pasamos a la consola, recargar esto en la colección de tarjetas. Ahora podemos revisar nuestra tarjeta número uno ha sido cambiada a 100. Dentro de nuestro proyecto, aún necesitamos refrescarnos para ver los cambios hasta que posteriormente agreguemos nuestra funcionalidad en tiempo real. Todo esto está entrando ahora debido a actualizar el contexto. En el siguiente video, nos concentraremos en actualizar las etiquetas. 30. Ajustar las etiquetas: actualizaciones en las etiquetas dentro de nuestros componentes de tarjeta implicarán un poco más de trabajo que en el último video donde actualizamos el texto. Esto se debe a que vamos a estar activando y apagando las etiquetas. Cuando se hace clic en una etiqueta, primero tenemos que comprobar si es necesario agregar o quitar la etiqueta. Para ello, voy a agregar un manejador de clics en línea dentro de nuestro modelo. Cuando el modelo de tarjeta de edición, en esta sección creamos en el último video donde recorremos todas las etiquetas disponibles. También podemos agregar un manejador de eventos al hacer clic. Esta va a ser una función de flecha en línea, que va a llamar a un método llamado este conjunto de puntos Lebel. Pasando también en el valor de etiqueta actual. Tan pronto como el usuario haga clic en cualquiera de estas etiquetas, n va a activar este método set label, que ahora podemos crear fuera de nuestro método aleatorio. Tan set Label, que toma en la etiqueta que se le pasa, configura nuestra función de flecha. El primer paso dentro de aquí es crear una constante que se va a llamar etiquetas. Esto va a almacenar como una matriz todas las etiquetas actualmente seleccionadas, las cuales se almacenan en los estados. Vamos a difundir estos en con este estado de punto, punto seleccionado Etiquetas. El siguiente paso es comprobar si este pasado en etiqueta se almacena actualmente dentro de esta matriz. Hagamos esto creando una declaración if -. Podemos comprobar si las etiquetas, puntos incluye, que es un método JavaScript tomado en la etiqueta actual, abren los borrados de código. Si esto pasado en etiqueta se almacena dentro de nuestra matriz de etiquetas con M12 llame al método de filtro para eliminarlo. Podemos almacenar esto dentro de una nueva matriz llamada nuevas etiquetas. Podemos agarrar nuestra matriz actual llamada etiquetas, llamada el método de filtro JavaScript. Entonces podemos almacenar cada valor dentro de aquí en una variable llamada elementos. Eso se trata de función, es una corrida para cada uno, que va a devolver cualquier elemento que no sea igual a nuestra etiqueta. Podemos entonces actualizar nuestro estado con este estado de conjunto de puntos, donde vamos a obtener las etiquetas seleccionadas para que sean iguales a nuestra nueva matriz. Esto es lo que está pasando si la etiqueta está incluida en la matriz. Si no lo es, entonces vamos a añadir una sección L, que va a empujar la nueva etiqueta al estado. Entonces tenemos las etiquetas. Entonces podemos llamar al método push de JavaScript, que va a empujar la nueva etiqueta a nuestra matriz. Podemos entonces actualizar el estado. Una vez más, actualizando las etiquetas seleccionadas con el valor de nuestras etiquetas, array. Entonces solo para recapitular lo que estamos haciendo aquí, tenemos las etiquetas seleccionadas almacenadas en estados los cuales luego tomarían una copia de y guardarían conocidos por esta constante. Seguidamente comprobamos y si la etiqueta en la que el usuario ha hecho clic se almacena dentro de esta matriz. Si lo es, vamos a seguir adelante y ejecutar esta sección de código, que va a ser responsable de filtrar la etiqueta actual, e instalar en el resto de los valores en esta nueva matriz de etiquetas. Entonces finalmente empujaremos esto a declarar una vez que se haya quitado la etiqueta. Si la etiqueta en la que se está haciendo clic no se almacena dentro de los estados, entonces ejecutamos esta sección l que está justo debajo. En cambio, esto va a empujar nuestra nueva etiqueta a nuestra matriz y luego salvar este estado. Ahora, podemos volver a nuestro método de tarjeta de actualización, que está justo arriba. Podemos actualizar esto para agregar nuestras etiquetas. Justo después del nuevo texto, podemos crear unas etiquetas de llamada constantes y establecer esto igual al valor almacenado en estado. Este punto punto punto punto etiquetas seleccionadas. También podemos empujar esto a Firebase dentro de nuestro método de actualización. También podemos seleccionar los puntos de la tarjeta, etiquetas campos, y establecer esto igual a las etiquetas o. Entonces guarde esto y pasemos al modal. Haga clic en cualquiera de estos, y luego seleccione etiqueta. Actualmente no tenemos esta interestatal. Por lo que se agrega. Si volvemos a hacer clic en él, entonces eliminará esto de los estados llamando al método de filtro. Veamos si alguno de estos está aquí arriba en tu Firebase, podemos hacer click en estos para guardar los cambios. Después cargamos nuestras tarjetas. Esta tarjeta 100 ahora se está actualizando con nuestros dos colores. Antes de ir más allá, este componente modal también está recibiendo apoyos. Por lo que podemos agregar algo de validación de prop. Por lo que como siempre, podemos importar los tipos de prop de nuestro módulo, que se llama tipos de prop. Por lo que esta tarjeta modal está recibiendo tres apoyos diferentes. Si tomamos mirada en tarjeta que cayó un sí. Tenemos el modal abierto, tenemos toggle modal y también los datos de la tarjeta. Por lo que retrocede hasta el fondo del modal. Podemos configurar nuestra validación de prop. Por lo que edita modelo de tarjeta. El tipo de prop, minúscula b, configura nuestros objetos. El primero va a ser modal abierto, que va a ser igual a los tipos de prop. Este es un valor booleano por lo que podemos seleccionar w, esto también es requerido. El segundo es toggle modal. Este tipo de prop es una función por lo que agregamos ese func. Esto también se requiere. Un tercero y final son los datos de nuestra tarjeta. El tipo de prop es un objeto que también se requiere una vez que configuramos los tipos de Prop. El pedazo final de este video será para mostrar dentro de nuestra aplicación las etiquetas seleccionadas justo por encima del contexto. Para esto, necesitamos crear un bucle dentro del card.js. Recuerda dentro de esta tarjeta componentes, si abrimos las herramientas de desarrollador de reaccionar, si buscamos la tarjeta, aquí es donde almacenamos todos nuestros datos actuales dentro de este Dataproc. Dentro de aquí tenemos las etiquetas que vamos a recorrer para cada tarjeta. Por lo que arriba en la parte superior de nuestro render, justo debajo de la clase de tarjeta, vamos a crear un nuevo div, que va a ser una nueva sección que contiene todas estas etiquetas. El nombre de la clase va a ser igual a las etiquetas de las tarjetas. Abre las borras de cartas. Podemos acceder a nuestros apoyos y a las etiquetas de punto de datos. Para ser aprobado y podemos utilizar el método de mapa, que toma en la etiqueta. Por lo que es por encima de la función de flecha. Entonces va a devolver un span elementos para cada uno. Podemos pasar en nuestra clave, que simplemente puede ser el valor de cada etiqueta, el estilo. Por lo que tenemos el valor de color, podemos establecer el color de fondo para que sea también igual a nuestra etiqueta. Entonces, por último, podemos pedirle un nombre de clase a esto, que va a ser etiqueta. Bien. Ahora, le daré un guardado a este archivo y luego pasaré al navegador. Podemos ver al instante que los dos colores que se añadieron como se actualizaron en los componentes de la tarjeta. Vamos a tratar de movernos en el color azul y añadir en un verde y guardar los cambios, refrescar. Esto ahora se refleja dentro de los componentes de la tarjeta. Por lo que ahora todas las funciones de actualización están completas. Te veré a continuación donde mejoraremos en esta tarjeta al permitir múltiples líneas de texto. 31. Reajuste de la área de texto: Si hacemos clic en alguna de nuestras tarjetas y abrimos el modal de edición, actualmente se trata de una entrada de texto, que sólo nos permitirá añadir textos en una sola línea. Será mejor si nuestras tarjetas pudieran tener texto multilínea, y la tarjeta se expandiría para caber en cada línea. Para ello voy a añadir un paquete llamado react-autosize-textarea, que nos permitirá agregarlos al proyecto. Esto nos dará un área de texto, que también redimensionará la altura de la tarjeta, en función del número de líneas de texto. Pasemos al código VS y añadamos esto a nuestro proyecto. Abajo en la parte inferior. Voy a cerrar servidor con Control C, y luego podemos ejecutar y npm i reaccion- autosize- textarea. Entonces vamos a ejecutar esto- 32. Primera mirada: Cada vez que agregamos actualizaciones o eliminamos algo de nuestros proyectos, necesitamos hacer una actualización para obtener los nuevos datos. Bueno, esto es cierto para la mayoría de las cosas, si fuéramos a seguir adelante y agregar un nuevo tablero, digamos, cursos a tomar, agregar el color y luego crear un nuevo tablero, verás que esto aparecerá sin refrescar. Quería mostrarles dos formas diferentes de abordar la actualización de esta aplicación. El primero es igual que tenemos aquí con los nuevos tableros, cada vez que agregamos o quitamos un tablero, ponemos los tableros en estado. Como ya sabemos, uno de los beneficios de esto es, actualizará todos los componentes que usaremos como estado. También va a ser generalmente más rápido que esperar en la base de datos para enviar los datos de vuelta, pero esto también significa que tenemos dos fuentes de los mismos datos. Tenemos el tablero almacenado en estado y también en Firebase. Si se produce un error al actualizar cualquiera de estos, entonces puede provocar que nuestra aplicación esté fuera de sincronización. Otro enfoque que ahora vamos a utilizar nuestras listas y tarjetas es utilizar funcionalidad en tiempo real de Firebase para decirnos cuándo algo ha cambiado. En lugar de pedir los datos, Firebase nos lo enviará cada vez que haya un cambio. Empecemos con el método get list en los componentes de la placa. Vaya al board.js y desplácese hacia arriba para obtener listas. Esto está aquí justo sobre la parte superior de este archivo. Get lists utiliza este método get para obtener lo que se llama una instantánea de nuestros datos en el momento actual. Para obtener actualizaciones en tiempo real, podemos reemplazar esto por un método llamado a instantáneas. En instantáneas, toca a un oyente el cual nos notificará cuando se haya realizado un cambio. Para ello, voy a comentar nuestros datos existentes. Entonces todo justo por encima de nuestro bloque catch, todo el camino hacia el método get. Ahora podemos empezar a reemplazar esto por nuestro propio método de instantáneas. Se aplican los mismos principios. Queremos obtener nuestro bucle de datos a través de él, crear un objeto de lista, y luego guardarlo en estado. En primer lugar hacemos un llamado a snapshot, que toma en una función. Apenas en el auto por, podemos entonces llamar a instantáneas, pasando las instantáneas para cada función. Para cada dato, instantáneas, que es un objeto que contiene detalles sobre consulta, entonces queremos llamar a un método llamado doc changes, por lo que snapshots.doc cambia. Los cambios de Doc devolverán una matriz que contiene los cambios desde nuestras últimas instantáneas. Entonces, ¿qué tenemos que hacer cuando tenemos una matriz de datos? Bueno, necesitamos vivir a través de ella para poder trabajar con cada elemento individual. Justo después de aquí, podemos entonces llamar para cada uno, pasando una función de devolución de llamada, por lo que para cada cambio. Pero voy a ejecutar el código dentro de estas llaves. Antes de ir más lejos sin embargo, vamos a hacer un registro de consola y podemos registrar el valor del cambio. Guarda este archivo. Pasa al navegador, abre la consola, haz clic en cualquiera de estos tableros, y vamos a añadir una nueva lista. Digamos, para hacer la lista uno, pulsa enter, y conseguiremos un registro de consola. Algo que debemos señalar aquí es este tipo de agregados. Tengan esto en mente ya que necesitaremos volver a esto muy pronto, pero lo principal aquí que necesitamos es este doc. Esta es una instantánea de los documentos que contienen todos los datos que necesitamos. Podemos ver que tiene el DNI. Si hacemos click en esto y podemos agarrar esto con doc.id Algo que no es tan obvio al mirar este doc es como obtenemos el resto de los datos de nuestra lista. Cómo podemos de hecho conseguir es llamando a un método de datos. Pasemos a nuestro registro de consola. Podemos acceder a nuestro doc que acabamos de ver en la consola y luego al método de datos, guarde esto. Ahora vemos dentro de aquí, tenemos nuestro objeto de lista el cual contiene el ID de tablero, el creado en la fecha, y también el título. Esto combinado con el ID que parecemos, ahora nos dará toda la información que necesitábamos para construir nuestra nueva lista. Volvamos de nuevo, podemos quitar nuestro registro de consola. Entonces dentro de nuestros cuatro cada uno, podemos crear una constante llamada doc. Esto va a almacenar el valor de change.doc, dándonos una referencia a nuestros documentos. El siguiente paso es crear nuestra lista, que va a ser un objeto. Primero necesitamos agarrar el ID, que está disponible en doc.id, que es exactamente lo que vimos antes, por lo que doc es igual a cambiar.doc.id. Entonces necesitamos agarrar el título, que está disponible en doc, el método de datos que acabamos de ver. Agarra nuestros objetos de lista, y luego agarra el título fuera de nuestro objeto de lista. Podemos entonces establecer el estado, por lo que este.setstates pasando en los objetos. El estado que queremos actualizar es la lista actual. Al ser una matriz, nos vamos a fusionar en la lista actual, lo que esto.date.currentlists luego separados por una coma, podemos agregar en nuestra nueva lista. Ahora guarda este archivo, y podemos volver a nuestro proyecto en el navegador. Podemos intentar agregar una nueva lista, y esto debe agregarse automáticamente. Digamos que hacer lista dos, golpea enter. Ahora esto se está actualizando sin necesidad de actualizar el navegador. No obstante, si ahora hacemos clic en alguna de estas listas y eliminamos, ahora vemos un error dentro de la consola y también nuestra lista ha sido agregada como tercer elemento. El mensaje de error abajo en la consola dice que se encontró con dos niños con la misma clave. Esto es por la forma en que manejamos los cambios de nuestros documentos y esto es lo que veremos en el próximo video. 33. Trabajar con los cambios de documentos: En el último video que discutimos fue una época en la que retiramos uno de nuestros ascensores. Tenemos el mensaje que he encontrado con niños con la misma clave y después hemos visto aparecer una lista extra dentro de nuestro proyecto. Esto se debe a la forma en que tenemos las cosas en este momento en nuestro propio método de instantáneas. Si pasamos a la junta dot.js, donde estuvimos trabajando en nuestro último video y luego en el método get list. Siempre estamos construyendo un nuevo elemento de lista y luego configurando el estado, que es esta sección justo aquí. Incluso si el artículo fue retirado, seguimos obteniendo los datos de cambio de la lista luego lo agregamos a nuestro objeto. Después ponlo en estados, esto resultará en el grupo de ítems que se ven aquí. Por lo tanto encuentro en ella a dos niños con la misma clave a los píxeles. Si recuerdas del último video, dijimos que tuviéramos en cuenta cuando hicimos el registro de la consola, había un tipo de agregado. Podemos usar esto ya sea para establecer el estado o para eliminar el elemento del estado, dependiendo de si la lista fue agregada o eliminada y podemos hacerlo con una sentencia if. Volvamos a nuestro board.js. Entonces justo arriba donde construimos nuestros documentos. Podemos agregar una sentencia if para comprobar si el change.type es igual a la cadena de agregado. Si lo fuera, podemos abrir y cerrar los tirantes rizados. Podemos entonces tomar todos nuestros datos de estados conjuntos, nuestra lista y nuestros documentos. A continuación, agregue estos dentro de nuestra declaración if. Ahora esto solo establecerá nuestro estado si el artículo ha sido agregado. No obstante, si el artículo ha sido eliminado, basta con deshacer nuestra declaración if, entonces podemos agregar una segunda sentencia if, corchete el change.type. Esta vez es igual para quitar. Si lo es, entonces podemos abrir las llaves y luego podemos configurar una vez más el estado, configurar nuestros objetos de estado. El estado que queremos obtener son las listas actuales. Conjuntos de nuestra matriz y ahora como estamos eliminando un elemento del estado, podemos usar el método de filtro JavaScript. Podemos hacer esto fusionando en nuestra matriz una copia de las listas actuales. Fusionar estos en con los tres puntos, .state, .actual listas. Podemos entonces llamar al método de filtro. Dentro de este método de filtro, vamos a ejecutar una función para cada elemento dentro de nuestra lista. Queremos devolver sólo las listas donde la list.id no es igual a Change dot doc, dot ID. Tan sólo para recapitular lo que estamos haciendo aquí, estamos agarrando todas nuestras listas de los estados y luego sólo vamos a devolver nuestras listas donde el id de cada lista en particular no coincide con el que se ha eliminado. Esto está disponible desde change.doc.id Ahora todo lo que queda por hacer es guardar esto e ir al navegador. Dentro de nuestro tablero, podemos agregar una nueva lista. Digamos lista de tareas tres agregar esto en. Vamos a mover cualquiera de estos y ahora estos se agregan y quitan sin causar ningún error. Por último, a partir del último video, aún tenemos la sección comentada donde utilizamos el método guess. Ahora podemos eliminar esto de forma segura ya que ya no necesitaremos este código. Esta es nuestra lista ahora trabajando con datos en tiempo real de Firebase. A continuación, también aplicaremos esto a nuestras tarjetas. 34. Tarjetas en tiempo con las actualizaciones: También podemos agregar esto en las tarjetas totales del oyente de instantáneas también. Es decir, si causamos alguna actualización, si agregamos alguna tarjeta o eliminamos alguna, estos cambios se reflejan inmediatamente en la app. Hagamos esto más en the.js, que se encarga de buscar las cartas con el método fetch cards. Desplazemos hacia abajo para buscar cartas. Al igual que con la lista vamos a comentar todo desde captura ajustable hasta el método get. Entonces ahora podemos reemplazar esto por nuestra instantánea. Tan solo hay que pedir por podemos agregar en snapshot que luego toma en unas instantáneas de cada cambio. Entonces se trata de función, y luego dentro de aquí vamos a vivir a través de cada uno de los cambios de documento. Podemos hacer esto con Snapshot.DocChanges. Para cada cambio de documento, vamos a ejecutar el método ForEach pasando en el cambio. Vamos a construir nuestra tarjeta igual que hicimos con la lista. En primer lugar, crear una constante llamada doc, que va a ser igual a change.doc Luego creamos nuestro conjunto de cartas de todos los objetos de cartas. El ID, recuerda es del doc.id separado por una coma. También tenemos el texto que está disponible en nuestra variable doc. Tenemos el método de datos para agarrar todos los datos. El dato que queremos es del objeto de la tarjeta y del campo de texto. Esta también tiene las etiquetas. Al igual que la línea anterior, llamamos objeto de tarjeta accesible de datos, y luego el campo llamado etiquetas. Entonces al igual que hicimos en el último video, necesitamos rastrear el tipo de cambio. A continuación, establezca el estado dependiendo de si se agregó, eliminó o también se modificó. Hagámoslo. Justo después de nuestros objetos de la tarjeta, podemos agregar una declaración if para comprobar si el change.type es primero igual a agregar las llaves. Entonces podemos establecer el estado, por lo que este.SetState. Dado que esto es una adición, vamos a fusionar en las tarjetas actuales como una matriz para el operador spread, agarrar esto.state. This.States.CurrentCards separados por una coma después vamos a fusionar en nuestros objetos de tarjeta. Debajo de esta primera sección si, podemos agregar una segunda para comprobar si el tipo de cambio, esta vez va a ser igual a quitar. Si esto se quita, vamos a hacer algo muy similar a las listas donde vamos a filtrar por el id Vamos a establecer primero este.SetStates, pasando nuestros objetos, seleccione las CurrentCards. Entonces vamos a difundir esto.State.CurrentCards donde vamos a llamar al método de filtro. Cada artículo se almacenará dentro de esta variable de tarjeta, entonces sólo vamos a devolver las tarjetas donde el ID no coincida con el que se ha eliminado. El card.id que no es igual a cambiar.doc.id,. Después de esta sección eliminada, entonces también vamos a agregar una sección modificada. Esta vez si el change.type es igual a la cadena de modificado, entonces ejecutamos este código dentro de las llaves. El primero que tenemos que hacer es agarrar el número de índice del ítem que se almacena en los estados. Podemos iniciar esto dentro de una constante llamada índice. Esto es igual a esto.State.CurrentCards. Entonces vamos a utilizar el método de índice de hallazgo. Dentro de aquí cada elemento que recorrerá, se va a almacenar en esta variable de ítem. Por lo tanto, sólo podemos devolver el artículo donde el item.id es igual a change.doc.id Esto va a devolver un solo artículo de nuestras CurrentCards. El ítem donde el ID del ítem es igual al que se está cambiando. Necesitamos este número de índice, toda esta posición de nuestro ítem dentro de este estado para que sepamos exactamente qué ítem actualizar. El siguiente paso es crear una constante llamada cartas la cual va a ser igual a todas las cartas en nuestro estado actual. Nos vamos a agarrar estos con el operador de spread para este.State.CurrentCards. Ahora tenemos todo lo que ahora necesitamos para actualizar nuestro estado. Contamos con las CurrentCards las cuales han sido modificadas. Tenemos el número de índice que es la posición que se almacena en estados. Tenemos todos nuestros derechos provienen de estados, por lo que ahora podemos seguir adelante y actualizar esto. En primer lugar, seleccionamos todas nuestras tarjetas en estados. Seleccionamos por el número de índice, la tarjeta individual que queremos actualizar. Por ejemplo, esto serían tarjetas cero, tarjetas cinco, tarjetas 10, todo lo que sea este número en nuestro estado. Entonces vamos a reemplazar esto por nuestro objeto de tarjeta desde arriba. Entonces establece esto para indicar con esto.SetState pase en nuestros objetos, por lo que las tarjetas actuales ahora van a ser iguales a esta matriz de tarjetas. Ahora podemos desplazarnos hacia abajo, y eliminar el código original, por lo que con el método get, y también el para cada uno. También si nos desplazamos hacia arriba, ahora podemos ver que ya no estamos usando esta constante actual. También podemos quitar esto y simplemente espera nuestras CardsRef. Guardaremos este archivo y ahora iremos al navegador y probaremos esto, dirígete a la pizarra. Tendré que añadir algunas listas agregar como ABC. También puedo agregar algunos más a nuestras diferentes listas. Podemos agregar tarjetas y esto actualizado en tiempo real. Tratemos de movernos en el número dos eso es bueno, y el número cuatro, si recargar, estos siguen mostrando. Ahora intentemos modificar esto. Cambiemos uno para ser cien. Guarda nuestros cambios y estos cambios ahora se están reflejando en tiempo real. Esto ahora nos deja con nuestras tarjetas de listado de tableros, todo ahora actualizándose sin necesidad de actualizar el navegador. 35. API de contexto: A medida que el ab se vuelve grande y más complejo, a menudo necesitamos una mejor manera de manejar nuestros estados. Pasar apoyos por muchos niveles que a menudo se conoce como perforación de prop puede agregar una capa de complejidad. Aquí es donde bibliotecas de gestión estatal como Redux han desempeñado un papel para ayudar a manejar esto. Redux está bien, pero también significa aprender cosas nuevas, agregar al tamaño general de nuestro ab, y también puede agregar complejidad si solo lo estuviéramos usando para pasar por el estado. Una solución para utilizar la API React Context. Contexto fue creado para compartir datos que necesitamos en múltiples partes de nuestra app. En esta sección, vamos a estar usando Firebase para proporcionar autenticación de usuario. Los usuarios pueden iniciar sesión e inscribirse, para luego sólo ver los tableros que han creado. Este sería un buen caso de uso para la API de contexto ya que el estado de inicio de sesión es necesario en múltiples páginas. Al usar Contexto, ya no necesitamos transmitir datos, en nuestro caso, los estados ingresados desde el componente padre a través de los componentes hijos. En cambio, básicamente tenemos un componente con estado global, cual podemos importar directamente a cualquier otro componente para poder acceder a los datos. Lo primero que podrías estar pensando es : “¿Por qué no simplemente mover a todos nuestros estados a este Contexto?” Esta es una buena pregunta. Si bien esto es ciertamente posible, los creadores de React sí desalientan esto ya que puede hacer que los componentes sean menos reutilizables, y pasar por abajo apoyos solo unos pocos niveles, puede ser una solución mucho más simple. Encima en el Directorio de Componentes, vamos a crear un nuevo archivo para nuestro Contexto. En el archivo Components, New, voy a llamar a esto el AuthContext.js. Este nombre de archivo depende de nosotros pero tengo nombre este el AuthContext ya que manejará la autenticación de usuario. Arriba en la parte superior del archivo, lo primero que hacemos como siempre es importar React desde React. Este paquete React nos permitirá acceder al método Create context, que ahora podemos almacenar en una constante llamada AuthContext, por lo que es igual a React.CreateContext con los corchetes justo después. Entonces ahora tenemos este objeto de contexto. Podemos crear dos cosas. Necesitamos tanto un componente proveedor como también un consumidor. Dado que ambos sonan, el proveedor proporcionará los datos a otros componentes, y el consumidor obtendrá los datos y también estará suscrito a cualquier cambio. En primer lugar, podemos crear el componente del proveedor, tal como haríamos con cualquier componente normal de React. Podemos crear una clase llamada AuthProvider, que extiende React.Components. Dado que este proveedor es responsable de proporcionar datos, también podemos agregar en cualquier estado. Entonces vamos a configurar nuestro objeto estados donde vamos a configurar el usuario inicial para que sea un objeto vacío. También necesitamos pasar en un método aleatorio, tal como lo haríamos normalmente. Dentro de aquí, vamos a devolver algunos datos JSX entre los corchetes. No obstante, esto no va a renderizar JSX como lo hemos hecho anteriormente. En cambio, vamos a devolver un componente de proveedor de contexto, que se ve así. Entonces podemos agarrar el AuthContext, AuthContext es la variable que establecemos justo arriba, entonces estamos para acceder al Proveedor con una P mayúscula, cerrar esto. Este componente permitirá que otros componentes se suscriban a cualquier cambio de datos. Dentro de la etiqueta de apertura, toma un valor, y este valor puede ser cualquier cosa que no pase por encima de los componentes. Lo voy a usar para transmitir al usuario de estados, que acabamos de establecer antes. Dentro de esta etiqueta de apertura, podemos establecer el valor dentro de las llaves dobles. El nombre del valor del usuario que va a ser igual a esto.state.user. Abajo en la parte inferior, tenemos todo lo que podemos usar esto en nuestros componentes, también necesitamos exportar este proveedor. Dentro de las llaves, podemos exportar nuestro AuthProvider. Por lo que he agregado esto como una exportación con nombre dentro estas llaves ya que también exportaremos un consumidor muy pronto. Por lo que ahora podemos tomar este proveedor y también los datos, que es el usuario, y ponerlos a disposición del resto de nuestra aplicación sobre en el app.js. Dentro de aquí, primero podemos importar este proveedor en la parte superior. Importa dentro de las llaves, nuestro AuthProvider. La ruta del archivo va a ser igual a.slash, esto está en la carpeta de componentes, y el nombre de AuthContext. El modo en que ponemos estos datos a disposición todos los componentes es mediante el uso de esto como componente de envoltura. Bajemos a nuestro router de navegador, y luego podemos agregar esto dentro aquí. Entonces arriba en la parte superior, el router del navegador. Podemos agregar esto igual que un componente normal. Este es el nombre de proveedor. Esto tiene una etiqueta de apertura y cierre, por lo que podemos tomar la etiqueta de cierre y envolver todo el contenido dentro de este proveedor. Para bajar esto, justo encima del router del navegador en este extremo, y luego guarde esto. Si ahora pasamos a nuestra aplicación, y si hacemos una actualización, no vemos ningún contenido en la pantalla. Esto se debe a que como ahora hemos usado este AuthProvider como envoltorio, todos los componentes que ahora están dentro son ahora hijos de estos componentes. Entonces echemos un vistazo a lo que está pasando en el AuthContext. Dentro de aquí tenemos este AuthContext.Provider, cual brindará cualquier valor a todos los componentes hijo. Este componente no tiene contenido entre las etiquetas de apertura y cierre, y es por ello que no vemos ningún contenido en la pantalla. Entonces, ¿cómo le decimos a React este componente también debe renderizar todos los componentes que están anidados dentro del app.js? Bueno, podemos hacer esto con esto.props.children, que podemos agregar dentro de los tirantes rizados. Ahora dale a este archivo un guardado, y luego pasa al navegador. Ahora podemos ver que todos los componentes están funcionando como se esperaba. Esto ahora nos deja brindando el contenido a otros componentes. Por lo que ahora podemos configurar al consumidor el cual seguirá adelante y utilizará estos datos. En el AuthContext es donde vamos a estar configurando esto. Hagámoslo al fondo, justo después de nuestra clase. Entonces lo primero que hay que hacer es crear una constante llamada AuthConsumer. De nuevo vamos a usar el AuthContext, que configuramos en la parte superior aquí pero esta vez vamos a agarrar al consumidor en lugar de proveedor, que usamos antes. Entonces AuthContext.Consumer, y luego lo segundo que hay que hacer es agregar este AuthConsumer a nuestra exportación para que esté disponible para su uso en otros archivos. Entonces justo antes de ir a probar esto está funcionando en otros componentes, vamos a agregar algunos datos iniciales con los que trabajar. Por el momento, tenemos un objeto de usuario en blanco. Simplemente agreguemos un nombre aquí dentro, para que podamos probar los datos que está llegando a los componentes. Entonces ahorita esto. En el app.js, ahora proporcionaremos en estos datos a todos nuestros componentes hijo que utilicen este proveedor. Por lo que ahora podemos entrar en cualquiera de estos componentes anidados por dentro y luego aprovechar al consumidor que creamos para acceder a esta información. Hagamos esto Auth en el componente de tablero. El primero que tenemos que hacer arriba en la parte superior es importar nuestro AuthConsumer de nuestro nombre de archivo que es. /AuthContext, desplácese hacia abajo hasta el render. Después utilizamos este AuthConsumer como envoltorio a todo nuestro contenido. Por lo que justo a cambio, podemos agregar en nuestro AuthConsumer. Cierra esto. Agarremos esto, cortemos esto fuera de lugar y añadamos esto justo en la parte inferior de nuestro contenido. Este componente AuthConsumer nos permite suscribirnos a cualquier cambio dentro del contexto. Entonces, si un usuario se actualizara en nuestro archivo AuthContext, esto entonces se pasaría a este consumidor. Cada vez que hay un cambio, este AuthConsumer toma en una función como niño. Entonces comencemos recortando todos los datos dentro del AuthConsumer. Corta esto fuera de lugar, voy a añadir esto de vuelta aquí en tan solo un momento. Entonces podemos pasar en una función dentro de las llaves. Así que abre los corchetes, configura la función de flecha. Esta función toma en cualquier valor que se esté pasando desde el Contexto. Por lo que actualmente dentro del proveedor, solo estamos pasando en el valor del usuario, así que de vuelta aquí en el consumidor, podemos pasar al usuario dentro de las llaves, y luego dentro de este cuerpo de función, ahora podemos pegar en el contenido que teníamos antes. Entonces agrega esto en, y ahora todos los valores que pasaste a la función ahora deberían estar disponibles dentro de este código. Podemos probar esto está funcionando dando salida a este usuario en cualquier lugar dentro de aquí. Hagamos esto justo encima del encabezado del tablero, dentro de las llaves, podemos dar salida al usuario y luego acceder al nombre desde nuestro objeto, guardar este archivo, pasando al navegador, y ahora vemos el nombre que había sido provistos de nuestro estado. Entonces haremos uso de estos datos dentro de este consumidor en tan solo un rato, pero por ahora voy a eliminar este nombre ya que todo esto está funcionando. Entonces así como un resumen rápido, estamos creando un archivo de contexto, que va a almacenar a nuestro usuario en estados. Vamos a estar agarrando a este usuario pronto de Firebase, pero por ahora hemos codificado duro en un valor justo por debajo. Después hemos configurado nuestro AuthContext, que luego tiene un proveedor y un consumidor. El proveedor es responsable de transmitir datos a cualquier componente hijo. Actualmente el único valor que estamos pasando es este objeto de usuario, entonces creamos un consumidor que luego toma los datos dentro de cualquier componente que lo necesite, luego otra vez en el app.js, importamos el proveedor y luego envolvió toda nuestra aplicación con esto. Por lo que todos los componentes hijo tienen acceso a estos datos en el board.js. Después usamos al consumidor que creamos, que luego tiene un hijo como función, y luego pasamos a este usuario a nuestro código que esté disponible para usar en cualquier lugar que nos guste. Como puedes ver, hay un poco de configuración requerida con Context. Es por ello que se recomienda tal vez solo usar, si pasa apoyos, múltiples niveles. No obstante, una vez realizada esta configuración, ahora podemos acceder a estos datos solo agregando en un consumidor a cualquier componente que lo necesite. A continuación, comenzaremos a ver el uso de la autenticación de Firebase para permitir que los usuarios se registren e inicien sesión. Usaremos este estados ingresados y luego lo pasaremos a cualquier componente que lo necesite vía Context. 36. Autenticación en base en Firebase y configuración: Estaremos utilizando esta API de contexto que miramos en el último video, además del usuario actualmente conectado a diferentes componentes. Estaremos haciendo esto con el paquete de autenticación Firebase, cual tendrá la capacidad para que los usuarios se inscriban e inicien sesión, y también escuchará cualquier cambio y luego actualizará nuestro estado. Por ejemplo, cuando un usuario cierra la sesión, actualizará el estado y esto luego nos permitirá ocultar cualquier información que no deban ver. Otro de los beneficios de tener un usuario conectado es que también podemos usar el ID único del usuario al crear una nueva cuenta de tablero de listas. Esto significa que entonces podemos filtrar los datos que obtenemos de Firebase para mostrar solo los ítems creados por el usuario conectado. También la consola Firebase, actualmente hemos estado usando este enlace de base de datos, pero podemos configurar la autenticación solo para ambos. Acude al método de inscripción, que es este botón justo aquí. Firebase nos proporciona muchas formas diferentes en las que podemos iniciar sesión los usuarios. Tenemos opciones para usar redes sociales, como Facebook o Twitter, pero la que voy a agregar es una combinación de correo electrónico y contraseña. Subiremos a esto en la parte superior, haga clic aquí, habilite esto, y luego podremos guardar usando este botón aquí. El siguiente cosa a hacer es ir a nuestra Firebase Config dentro de nuestros proyectos, que es el Firebase.js, y luego dentro de aquí también podemos importar el paquete Auth igual que hicimos anteriormente con firestore, así que importa desde Firebase, el paquete de autenticación. Entonces debajo de la configuración voy a agregar un atajo al método off y luego almacenarlo dentro de una constante. A continuación de la base de datos, voy a llamar a esta constante, la FireBaseAuth, y establecer esto igual a firebase y luego al método Auth. Podemos entonces importar esta referencia a cada archivo que la necesite y luego acceder a los métodos de autenticación proporcionados por Firebase. Para ello también necesitamos exportar esto, bajar en la parte inferior como llamé exportaciones, podemos agregar FireBaseAuth. Para crear un nuevo usuario, también necesitamos un formulario, por lo que crearemos un nuevo componente para esto dentro de la carpeta Componentes. Vamos a crear un nuevo archivo llamado UserForm.js. Cierra la barra lateral. Entonces podemos importar React desde reacciona, dentro de un componente basado en clases llamado UserForm, que extiende React.Component. Voy a configurar dos métodos diferentes, que va a ser para el correo electrónico y contraseña para que podamos soltar los datos que el usuario ha ingresado. El primero es referencia a nuestra entrada de correo electrónico, y luego podemos crear nuestro ref, igual que lo hemos hecho en videos anteriores. Queremos duplicar esto y luego cambiar esta para que sea la contraseña, y crear nuestro método de render el cual vamos a devolver nuestro formulario. Podemos rodear esto con un React Fragments. Entonces dentro podemos agregar nuestro div, que va a tener un nombre de clase para nuestro CSS llamado sign-up-wrapper. En la parte superior, vamos a añadir un encabezado de nivel dos, que va a ser el texto de iniciar sesión o crear cuenta. Entonces nuestra forma, que tiene los dos insumos. Recuerda Desde aquí utilizamos en la combinación de correo electrónico y contraseña, por lo que necesitamos agregarlos a nuestro formulario. Vamos a crear un formulario con un nombre de clase de formulario de inscripción. Podemos agregar un div que va a rodear cada entrada. El primer insumo va a ser para nuestro correo electrónico y podemos adjuntar nuestro ref, que creamos justo arriba, que es igual a esta entrada de email de punto. En la siguiente línea. Esto tiene un tipo de correo electrónico. También, un nombre que va a ser igual al correo electrónico, y luego un marcador de posición de correo electrónico también. Entonces nuestro segundo div justo debajo. Vamos a agarrar esta sección aquí, copiar esto en, y podemos cambiar esta para que sea la contraseña, por lo que la entrada va a tener un ref de entrada de contraseña, el tipo de contraseña, el nombre de la contraseña, y también el marcador de posición también. Justo después de este div, también podemos agregar un botón. Vamos a crear un div envoltorio, luego un botón. Entonces dentro de aquí el texto de inscripción. Por último abajo en la parte inferior, no olvidemos explotar esto con unos valores predeterminados de exportación con el nombre de UserForm. El formulario de inscripción serán los componentes iniciales verá un usuario cuando visite por primera vez nuestra aplicación. Podemos añadirlo dentro del router en la ruta de inicio o en el app.js. Primero importemos estos componentes en la parte superior. A esto se le llama UserForm, que está disponible en. /Componentes, y luego usas un formulario. Podemos agregar esto a continuación abajo en nuestro router. Actualmente si nos desplazamos por todas nuestras rutas, no tenemos una ruta de barra inclinada hacia adelante para el hogar, lo que podemos sumar esto justo en la parte superior. Podemos crear una nueva ruta. Podemos establecer esto para que sea exacto con la ruta del archivo desde la ruta de inicio, o la barra inclinada hacia adelante. Entonces los componentes que queremos renderizar es este UserForm. También el navegador, ahora podemos probar esto, si vas a nuestro proyecto y luego vas a barra inclinada hacia adelante, ahora vemos los componentes UserForm. Ahora tenemos este formulario de usuario en la raíz de nuestros proyectos. En el siguiente video, haremos uso de este formulario para permitirnos empujar a un nuevo usuario a Firebase. 37. Firma: Voy a utilizar un formulario ya está listo para ser cableado hasta un método para empujar un nuevo usuario a Firebase. Ya que estamos usando la API de contexto para contener todos nuestros datos de usuario, voy a configurar esto por ahí. Pasemos a todos los contextos dot JS. Entonces en la parte superior, necesitamos primero impulsar nuestra referencia al paquete FirebaseAuth. Se trata de una exportación con nombre, lo hacemos dentro de las llaves. El paquete FireBaseAuth de Firebase, que es punto-dot slash y luego Firebase, entonces podemos crear un método de registro el cual hará uso del correo electrónico y la contraseña, cual será ingresada en el formulario pronto. Ahora abajo en nuestra clase, justo debajo de los objetos de nuestro estado, podemos crear un registro, que será una sincronización tomada en el correo electrónico y también la contraseña y luego finalmente la información del evento. Dentro de aquí podemos crear una sección try y también podemos captar cualquier error. En lugar de generar un registro de consola no volveremos a esto muy pronto. Vamos a añadir una lente de mano pronto. Justo por encima de lo primero que vamos a hacer es agarrar la misión inventiva y luego evitar el comportamiento por defecto. Podemos entonces hacer uso de este paquete FireBaseAuth que conduce a [inaudibles] ambos. Vamos a esperar, FireBaseAuth y luego podemos llamar a un método Firebase el cual se llama CREATE_USER con correo electrónico y contraseña. Dentro de los corchetes, esto toma el correo electrónico y la contraseña, que se va a pasar a nuestro método y esto es todo lo que tenemos que hacer ahora para el método de registro. Lo siguiente que hay que hacer ahora tener esto disponible dentro este archivo es que estos dos son proveedor como valor. Justo debajo del usuario, igual que estos en su propia línea. Agrega una coma, ahora también podemos pasar por abajo nuestro método de registro, que es igual a este registro de puntos, exactamente como haríamos al pasar indicaciones. Ahora se puede acceder al método de inscripción en toda la API de contexto. Vamos a un formulario de usuario dot JS. Estoy trabajando ahora importar este Authconsumer en la parte superior. Dentro de las llaves, tienes Authconsumer de nuestro nombre de paquete que está en la ruta del archivo de barra de puntos y luego el AuthContext. Al igual que hicimos con los componentes audaces, necesitamos rodear todo nuestro contenido en este consumidor así que bajemos y agarremos todo de esta sección de devolución. Podemos cortar esto y en necesidad de consumidor. Recuerda del último video dijimos que el consumidor necesita tener una función de niño. Podemos agregar esto justo dentro de las llaves en lugar de una función y luego dentro de aquí vamos a pasar en el método de registro dentro de las llaves. Entonces dentro de este cuerpo de función podemos pegar en todos los contenidos que acabamos de quitar. Con esto ahora como envoltorio, todos estos contenidos ahora tienen acceso al método de inscripción. Esto se puede colocar en el botón como un manejador de clic. Dentro de la etiqueta de apertura, podemos agregar al click crea una función en línea que toma en la información del evento. Esto va a arruinar nuestro método de registro y recuerda esto toma el correo electrónico y la contraseña. El correo electrónico está disponible a partir de esta entrada de correo de puntos, que es nuestro valor de punto actual REF dot. Separados por coma, podemos hacer lo mismo por la contraseña. A la REF se le llamó entradas de contraseña y luego agarrar el valor actual. Además, recuerda cuando configuramos esto en el contexto, si nos desplazamos hacia arriba, esto también toma en la información del evento. Podemos pasar esto como un tercer argumento. Ahora guardemos este archivo y probemos esto de nuevo en el navegador. Vamos a crear un correo electrónico aquí dentro. Entonces también necesitamos agregar una contraseña que sea un mínimo de seis caracteres. Haga clic en inscribirse. Hogar de Firebase. Haga clic en la pestaña del usuario y ahora veremos a nuestro único usuario que acabamos de crear. Si no ves a ningún usuario aplicando dentro de aquí, vuelve a revisar el código y también asegúrate de que la contraseña tenga una longitud mínima de seis caracteres. De lo contrario, verá un error dentro de la consola. Si estás viendo usuarios en esta ley de consolas de Firebase, ahora estás bien para pasar al siguiente video donde vamos a ver cómo un usuario registrado puede iniciar sesión y salir. 38. Conéctate y fuera: Una vez que un usuario se ha inscrito, también necesitan iniciar sesión y salir. También vamos a hacer esto en el contexto off como métodos personalizados, empezando por el inicio de sesión. Dejémoslo al archivo off context.js. Entonces dentro aquí bajo la inscripción, creamos un nuevo método, se va a llamar login, va a ser una sincronización, también tomando el correo electrónico y la contraseña, junto con la información del evento, que vamos a pasar al llamar a esto, como en la sección try, y luego al igual que la sección de inscripción anterior, vamos a pasar en cualquier error, pero nos ocuparemos de esta sección muy pronto. Dentro de la sección try, primero vamos a usar esta información de evento para evitar el comportamiento predeterminado, y luego vamos a esperar, nuestra firebase apagado y luego podemos usar el método de autenticación firebase llamado inicio de sesión con correo electrónico y contraseña, todo camel-case. Inicia sesión con correo electrónico y contraseña, y luego dentro aquí, igual que con el registro, esto toma en un correo electrónico, y también la contraseña y el formulario de registro. Justo debajo de esto, podemos hacer una prueba para comprobar si esto está funcionando con un registro de consola, con el texto de login, y volveremos a probar estos en tan solo un momento. Cerrar sesión, vamos a añadir el método log-out, función adecuada, la sección try, la sección cut justo después, como un en el error, volveremos a esto pronto. Todo lo que necesitamos hacer en la sección try, es acceder a la base de fuego off, y luego llamar a un método llamado sign-out. Una vez hecho esto, podemos entonces actualizar el estado con este punto setState, [inaudible] de los objetos, y el estado que queremos obtener es el usuario. Voy a volver a ajustar esto a unos objetos vacíos. Nuevamente para las pruebas, podemos agregar un registro de consola, que arrojará una cadena de cierre de sesión, hasta el proveedor. También necesitamos proporcionar estos dos métodos, para que estos se puedan acceder dentro de otros componentes, por lo que como valor tenemos login, que es igual a este inicio de sesión de punto, y luego también separados por una coma, nosotros tener cierre de sesión, sobre en el uso de componentes de formulario, podemos luego presionar en el método de inicio de sesión al consumidor. Basta con registrarnos, también podemos agregar login, también podemos agregar en el usuario, y ahora esto significa que ahora podemos activar este método de inicio de sesión dentro de estos componentes, y lo vamos a hacer agregando en un botón justo encima de la inscripción. Desplazemos hacia abajo hasta el botón de inscripción, y luego justo encima de esto, también podemos agregar un nuevo botón, que va a ser para iniciar sesión. Al igual que la inscripción a continuación esto va a pasar en un manejador de eventos onclick, que va a desencadenar un método. Vamos a pasar en nuestros eventos. Denote una función de flecha en línea, con el nombre del método de inicio de sesión. El login necesita acceso a la entrada de correo electrónico, y también a la entrada de contraseña, igual que tenemos a continuación, junto con la información del evento. Voy a copiar estas tres líneas, pegarlas en, y entre las etiquetas de botón, vamos a añadir el texto de login. Guarda esto, y luego ve al navegador, a nuestros proyectos, ahora vemos un botón de inicio de sesión. Abramos la consola. Podemos ahora entonces nuestra combinación de correo electrónico y contraseña, y luego nos registramos con. Antes de hacer clic en iniciar sesión, cambiemos esto para que sea un correo electrónico equivocado. Haga clic en iniciar sesión. Vemos un mensaje de error abajo en la consola. Probemos una contraseña diferente, login. También obtenemos un segundo error. Ahora podemos contestar la información correcta de registro, dar clic en login, y luego tenemos nuestro log de consola logueo de logueo. Volveremos muy pronto a estos mensajes de error. Para ser más claro para el usuario, qué salió mal. Lo siguiente que voy a hacer, es crear un componente de encabezado, cual va a mostrar el usuario conectado actual, y aquí también será donde podremos agregar un botón de cierre de sesión. Vamos a crear el componente de cabecera ahora. Dentro de la barra lateral, bajo componentes, podemos crear nuestro header.js. Como siempre, importamos reaccionar de reacciona. También vamos a usar al consumidor off, así que voy a importar esto. Esto nos dará acceso a la información de inicio de sesión del usuario, que podemos acceder desde una ley de contexto. No necesitamos crear unos componentes basados en clases, ya que esto simplemente va a tomar algo de información, y luego renderizarla en la pantalla. Vamos a configurar unos componentes basados en funciones. Podemos publicitar los elementos de encabezado HTML dentro de aquí, como envoltura, el authconsumer pase en el niño, que va a ser una función dentro de las llaves, esto toma en el usuario, y también el método de cierre de sesión, configurar nuestra función de flecha. Los corchetes, como envoltorio podemos pasar en los fragmentos de reaccionar. Empecemos por la parte superior izquierda de nuestra aplicación. Vamos a añadir un botón de inicio, que va a ser un emoji de casa, donde el usuario puede hacer clic y ser redirigido a nuestra página de inicio. Vamos a tener un elemento, ya que esto será un enlace, la href va a ser igual a barra inclinada hacia adelante. Entonces dentro de los elementos span vamos a tener una entidad HTML, que son los ampersands. El hash, luego el valor de 127968, el punto y coma. Responder también puede tener un rol, que es igual a la imagen, y luego para la accesibilidad se puede agregar una etiqueta, que va a ser igual a house emoji. par de esto, podemos agregar un encabezado de nivel uno, que va a ser para el nombre del proyecto de [inaudible]. Ahora sobre el lado derecho de este encabezado, vamos a añadir una sección que es para el área de usuarios. Vamos a utilizar el contexto para mostrar el correo electrónico del usuario al iniciar sesión. Un botón para cerrar sesión, y también el texto de favor inicie sesión, que vamos a renderizar condicionalmente cuando el usuario no está conectado. Empecemos con los pequeños elementos. Vamos a mostrar al usuario, y luego vamos a generar el correo electrónico de punto del usuario, que vamos a agarrarlo del contexto. Después de esto, un botón, que va a tener un manejador de eventos onclick, y esto va a tomar en la información del evento, luego ejecutar nuestra función de cierre de sesión, y luego dentro de aquí podemos pasar en e, a facilidad gracias, también podemos agregar el texto de logout, y luego lo tercero que vamos a añadir aquí, entre los pequeños elementos, va a ser el texto de favor de iniciar sesión. Grupos muy similares juntos, el botón y el usuario, y sólo mostrarán estos cuando el usuario esté conectado. Cuando el usuario se cierre la sesión, ambos se eliminarán, y luego solo se mostrará el texto de favor inicie sesión. Guarda este archivo, y ahora podemos importar esto en nuestro app.js. Justo en la parte superior, al importar nuestro encabezado desde la ruta del archivo, que es componentes de barra de puntos, y luego el encabezado. Este componente siempre se mostrará en nuestra aplicación, por lo tanto necesitamos agregar esto fuera de los componentes del conmutador de routers, así que solo tienes que ir a cambiar agregar cualquier encabezado, se cierra, guardar esto y ahora volver a cargar el navegador. Es posible que también necesite exportar por defecto dentro del encabezado. Vamos allá ahora, justo en la parte inferior, así que exporte por defecto, y el nombre de cabecera. Probemos esto una vez más. Ahora tenemos el encabezado mostrando dentro de la aplicación. Ya podemos intentar iniciar sesión, utilizando la información correcta. Recibimos el mensaje de logueo. Probemos el botón de cierre de sesión, y voy a recibir el mensaje de cierre de sesión. En el siguiente video, estaremos usando otro método de Firebase, para escuchar cuándo un usuario inicia sesión o sale, y luego obtener el estado con el usuario actual. 39. Escula para los cambios de aude: Cuando un usuario inicia sesión y sale de nuestra aplicación, necesitamos una forma de realizar un seguimiento de esto y actualizar el estado. Firebase nos proporciona un método para esto llamado onAuthStateChanged. Esto escuchará cualquier cambio en nuestros usos de estatus, y luego podremos actualizar nuestro propio estado. Hacer esto nos permitirá proteger ciertas vistas en nuestra aplicación, como la vista del tablero si el usuario cierra la sesión. No podemos adjuntar a este oyente una vez que los componentes se monten en el contexto de auth. Pasemos al archivo de context.js, y luego podemos agregar esto en un método de ciclo de vida llamado componente montará. Dentro de aquí vamos a acceder a un método que se va a llamar onAuthStateChanged. Dentro de aquí vamos a configurar una función que toma en el usuario. Si el AuthStateChanged tiene causa que el usuario inicie sesión, el valor del usuario se almacenará dentro de esta variable. Vamos a comprobar primero si el usuario está presente es decir, si ha ingresado. Después vamos a actualizar el estado con el valor de usuario actual, con este.set.State. Pasando en nuestros objetos estatales, donde vamos a actualizar al usuario. Nuestro objeto de usuario va a contener un id, que va a ser igual al usuario.id También necesitamos agarrar el correo electrónico, que es del usuario.email. Este código se activará si el usuario ha iniciado sesión en la otra información del usuario si no, vamos a agregar una sección else, que también va a actualizar el estado para que sea un objeto vacío. Entonces configuramos al usuario para que sea nuestro objeto vacío, así como este, y tenemos un mensaje de error aquí abajo, así que FireBaseAuth al igual que esto, y también podemos cambiar nuestro estado justo arriba para que sea un objeto vacío. Ya que ahora permitimos que Firebase controle esto. Debajo de esto, ya proporcionamos estos datos de usuario a sobre componentes abajo como el valor. Desplazo hacia abajo, tenemos al usuario, y también en los componentes del encabezado. Si echamos un vistazo aquí, también importamos a este usuario justo aquí, y después agarrando el correo electrónico del usuario justo debajo. Ahora pasemos a nuestros proyectos y podemos probar esto. Intentemos cerrar sesión. Vemos el mensaje de fichaje. Intentemos iniciar sesión. Es bueno no sólo hacer que obtenemos el mensaje de inicio de sesión en la consola, también vemos que el usuario ahora ha sido ingresado en el encabezado. Intentemos cerrar sesión. En el encabezado también se actualiza. Bien, todo esto está funcionando ahora, pero ahora sólo tenemos que mover esto hacia el lado derecho. Para ello, vamos al header.js. Podemos cortar toda la información del usuario. Podemos crear un div como rapero, [inaudible] de vuelta, y luego agregar un nombre de clase. Activa el CSS, que va a ser igual al área de usuario. Guarda esto, y esto ahora empuja nuestra zona de usuario hacia el lado derecho. Bueno, entonces ahora detectamos que el usuario ha iniciado sesión en estado, y en el siguiente video, podemos usar esto para renderizado condicional. 40. Renderizado condicional: Ahora que nuestra aplicación es donde si el usuario está conectado, podemos usar esta información para hacer ciertas cosas. Una de ellas es agregar renderizado condicional, que nos permitirá hacer cosas como solo mostrar un tablero si fue creado por el usuario conectado actual. Tan solo para comenzar aquí dentro de la vista de bola, salimos en un componente de inicio de sesión. Esto es porque más en el app.js, tenemos un error justo aquí, así que voy a guardar esto justo antes de ir más allá. Ahora esto está en su lugar. Podemos ir al board.js, y podemos agregar algún renderizado condicional para los componentes de la placa. Para empezar, voy a agregar una nueva propiedad a estado, que va a ser un mensaje vacío para empezar, y luego podemos actualizar este mensaje cuando no podamos encontrar un tablero o se haya retirado el tablero. Bajemos a nuestro método get board, que está justo por debajo de esto. Aquí adentro, estamos tratando de encontrar una pizarra por el DNI. Si no se puede encontrar ninguna placa en lugar del registro de la consola, podemos actualizar nuestro mensaje en estado. this.setState dentro de los objetos, la propiedad que queremos actualizar es el mensaje, que simplemente va a ser una cadena de tablero no encontrada. También podemos copiar la sección de estado establecido, y también podemos agregar este tableau cuando también eliminamos el tablero. Si guardamos este archivo y ahora pasamos a cualquiera de nuestros tableros, como este componente de placa aquí, cuando se ha retirado o no se puede encontrar una placa, necesitamos ocultar el título del tablero, el botón de borrar, y también el nuevo lista en la parte inferior. Podemos hacer esto en los componentes de la placa agregando un operador ternario basado en si tenemos un mensaje dentro de un estado. Pasemos a los componentes de bola, desplázate hacia abajo hasta nuestro render, y luego justo encima de nuestro encabezado de tablero, podemos agregar nuestro operador ternario dentro de las llaves. Podemos revisar esto.estado. Ese mensaje es igual a una cadena vacía, entonces podemos configurar nuestro operador ternario, que se ve así y esto es simplemente JavaScript regular. Si esto es cierto, y sólo tendremos una cadena vacía dentro de los estados, podemos entonces rentar el encabezado en este primer conjunto de corchetes. Hagamos esto recortando el corchete de cierre justo hasta el final, desplácese hacia abajo hasta justo después del encabezado del tablero, que es esta sección aquí. Entonces podemos pegar esto dentro, decir que ese es nuestro encabezado de tablero con el botón de borrar tablero, y además, el texto está ahora dentro de este primer conjunto de corchetes, si esto es falso y sí tenemos un mensaje de tablero “Not_Found”, nosotros puede entonces emitir este mensaje dentro del segundo conjunto de corchetes, dentro de un seto a los elementos. El mensaje está disponible con esto.state.message. Ahora obviamente el navegador, vamos a darle una prueba a esto. Ahora vemos nuestra sección de cabecera del tablero arriba en la parte superior. Si tratamos de eliminar este tablero, esto ahora quita el título y también el botón, dejándonos con el mensaje de Board no encontrado. Todavía tenemos este nuevo botón de lista en la parte inferior sin embargo, y podemos ocultarlo configurando el tipo de entrada para que se oculte cuando hay un mensaje dentro del estado. Volvamos a los componentes de bolas a nuestra crear nuevas entradas de lista. En lugar de configurar el tipo para que sea texto, también podemos agregar un operador ternario JavaScript dentro de las llaves, podemos hacer lo mismo que arriba. Podemos comprobar si el mensaje dentro del estado es igual a una cadena vacía. Si es así, vamos a establecer el tipo de entrada para que sea texto, si no, estableceremos el tipo de entrada para que se oculte. Ahora vamos a Guardar esto, para este tablero actual que acabamos de quitar. Esto ahora se elimina el tipo de entrada. Vamos a un tablero diferente cualquiera de esto está bien, y los nuevos insumos de lista todavía está ahí ahora este componente de tablero completo. Además, todo lo que necesita para mostrar si el usuario conectado realmente lo posee. En Firebase, si volvemos a nuestra Consola y a la Base de Datos, dentro de nuestros tableros, agregamos un ID de usuario abajo en la parte inferior. Este uso de ABC123 está actualmente codificado cuando creamos una nueva placa. Esto ahora necesita cambiarse mucho el usuario conectado, y podemos hacerlo todo en el formulario Crear tablero. Vayamos a allá, dentro de nuestros componentes, dentro de aquí, necesitamos acceder al usuario actual conectado, y a la lista podemos envolver nuestros componentes en el consumidor off. Subamos a la parte superior, y luego podemos importar esto, el consumidor off, que va a estar disponible desde la ruta de archivo de.. /components carpeta, y luego el contexto off hasta la sección de retorno. Ahora podemos envolver esto en el consumidor off, vamos a agregar los componentes. Recuerda de niño, necesitamos pasar la función que va a tomar en el usuario, que tiene toda la información del usuario conectado sobre la función auto. Entonces dentro de aquí, podemos cortar todo el resto del contenido. Agarra la forma, todo el camino hasta la etiqueta de formulario de cierre, y luego podemos pegar esto dentro de nuestra función. Ahora tenemos a este usuario disponible dentro de estos componentes, necesitamos pasarlo a nuestro método de envío de mango para que podamos agregarlo a los objetos de tablero. Bajemos a nuestro propio método de envío. Tenemos que eliminar esto.HandleSubmit, y luego así puede pasar argumentos con esto, podemos usar una función en línea. Configura una función de flecha, que puedes llamar esto.HandleSubmit. Tener esto en línea ahora nos permitirá pasar los argumentos dentro de los corchetes, por lo que necesitamos la información del evento, y también necesitamos agarrar al usuario.id, por lo que buscará manejar los remitentes. Ese es un argumento que también ahora necesitamos analizar el ID de usuario. Este ID de usuario ahora se puede usar dentro de nuestro objeto de placa, en lugar de este valor codificado duro de ABC123. Este usuario también se puede agregar a la declaración if a continuación donde comprobamos si existe el tablero o título y también el fondo. También podemos agregar una tercera condición para comprobar también si el tablero o usuario está disponible, antes de guardar esto en Firebase. Ahora, vamos a guardar esto y pasar al navegador. Esto tendrá que estar conectado para que podamos agarrar nuestro ID de usuario único. Añadamos el correo electrónico y la contraseña, con los que nos registramos antes. Una vez terminaremos registrándonos con nuestro correo electrónico sobre la parte superior, ahora tenemos que ir a la URL. Si acudimos a nuestros usuarios dentro de una Firebase, podemos agarrar nuestro ID de usuario único. Entonces podemos usar esta URL abierta con barra inclinada hacia adelante pegar esto en, seguido de un tableros de barra inclinada hacia adelante. Después nos llevan a la sección donde podemos crear un nuevo tablero, y ahora estamos logueados como el usuario actual. Ahora vamos a crear un nombre de tablero. Vamos por nuestra prueba en, cambiemos el color, creamos nuevos tableros. Ya veremos si tratamos de hacer este nuevo tablero, que nada parece pasar. Si pasamos a la base de datos y revisamos aquí adentro, veremos que tampoco se está agregando nuestra pizarra dentro de aquí. Esto se debe a la forma en que nuestro ID de usuario se almacena dentro de la Firebase. Actualmente cuando estás comprobando si el título del tablero, fondo y el usuario está ahí antes de guardar esto. Bueno, de hecho no se reconoce al usuario de punto de tablero. Esto se debe a que si vamos a nuestro de contexto aquí dentro, cuando se cambie el estado, entonces se actualizará en nuestros objetos de usuario, para tener el ID y el correo electrónico. Por el momento estamos configurando el ID para que sea el ID de punto de usuario pero si vamos a Firebase y en la autenticación, el ID de usuario realmente se almacena en un campo llamado UID. Necesitamos ahora actualizar esto dentro del contexto. A mi Firebase. Guarda esto en nuestra app. Intentemos probar una vez más, cambiar el color, crear nuevos tableros. Ahora esto se ha agregado. Vamos a comprobar que el usuario ha sido reconocido dentro de nuestra base de datos, dentro de nuestro tablero de pruebas, en lugar del valor codificado duro. Ahora tenemos nuestro ID de usuario. Ahora podemos aprovechar esta propiedad de ID de usuario en el tablero y comprobarlo que coincida con el usuario conectado actual antes de renderizar todos los componentes de la placa. Volver a nuestro tablero dot js. Dentro de aquí vamos a añadir un operador ternario. Añadamos esto justo encima de nuestro envoltorio de cartón. Dentro de los tirantes rizados. Podemos comprobar si el usuario dot ID es igual a este punto estado dot tableros actuales dot usuario dot, dice sobre dos conjuntos de corchetes. Después podemos cortar la sección final, para que podamos envolver nuestros componentes de tablero y luego podemos agregar esto justo al final. Justo después de nuestro envoltorio de cartón, que está aquí, podemos pegar esto en. Dentro de la sección L solo vamos a añadir un lapso vacío ya que no necesitamos renderizar ningún contenido. También para mantener reaccionar feliz también podemos envolver esto dentro de un fragmento. Justo dentro del usuario, podemos añadir un fragmento de punto de reaccionar. Abre la etiqueta, agarra la etiqueta de cierre. Entonces podemos sumar esto abajo en la parte inferior. Justo después de este corsé rizado. Ahora vamos a darle a esto un ahorro y pasar al navegador, a nuestra vista de tableros. Recuerda que solo se crearon pruebas con este usuario conectado actual. El resto todo tenía un valor de tablero codificado. Ahora si hacemos clic en las pruebas, ahora deberían funcionar. Intentamos cualquier egresado. Ahora vemos que solo obtenemos el lapso vacío sin contenido renderizado a la pantalla. Como prueba extra. También voy a probar esto en otro navegador con un usuario de inicio de sesión diferente. Ahora vamos a nuestro componente de casa y registremos un segundo usuario. Vamos a inscribirnos con un segundo correo electrónico. Para esto, voy a abrir Firefox o cualquier otro segundo navegador está bien. Podemos copiar a nuestro host local 3000 en Firefox. Ahora voy a iniciar sesión como segundo usuario. Este es uno que acabamos de crear. Haga clic en iniciar sesión. Ahora como segunda re-comprobación dentro del navegador original, voy a iniciar sesión como el usuario original. Pasa a nuestro tablero de pruebas, abramos esto, así que ahora si copiamos la URL que se había creado con este usuario del Firefox, ahora podemos pegar esto en, pulsa enter. Ahora vemos una pantalla en blanco porque el usuario que está conectado no mucho el campo de usuario dentro de toda nuestra pizarra. Todo esto está funcionando bien. Algo más para lo que necesitamos un renderizado condicional son estos componentes de cabecera. Queremos agrupar al usuario de email y botón de cierre de sesión y solo mostrarlos al iniciar sesión. Una vez desconectado, entonces queremos eliminar estos y solo mostrar el texto de favor inicie sesión. Esto será sencillo ya que el componente header dot js ya tiene acceso al usuario desde el contexto. Pasemos a nuestros componentes de cabecera. Dentro de aquí tenemos acceso a nuestro usuario dentro del consumidor para que podamos desplazarnos hacia abajo a nuestro correo electrónico de usuario y también al botón. Podemos rodearlos en un fragmento. Cierra esto, toma la etiqueta de cierre y agrega esto justo después del botón. Después podemos agregar un operador ternario para comprobar si el ID de punto del usuario está presente. Si lo es, vamos a ejecutar el código dentro de estos primer conjunto de corchetes. De no ser así, se ejecutará el código dentro del segundo conjunto. Agarra los corchetes de cierre, justo hasta los extremos corta esto, pega esto en justo después del final de nuestros fragmentos. Entonces podemos agarrar la pequeña sección de favor inicia sesión y pegarlo en la sección de los demás. Guarda esto y podemos probar esto de nuevo en el navegador. Actualmente estamos logueados y vemos el botón de cierre de sesión y el correo electrónico del usuario. Si hacemos clic en cerrar sesión, esto ahora se elimina y obtenemos el texto de favor iniciar sesión. También haremos copias de seguridad de toda la seguridad pronto cuando agreguemos algunos permisos al servidor. A continuación, nos quedaremos con el renderizado condicional mostrando únicamente los tableros para el usuario actual. 41. Tableros de procesamiento basado en el usuario: Dentro de la vista de este tablero, actualmente estamos logueados como este usuario, que termina en n1. De cualquier consola Firebase, si le das un vistazo a la colección de tableros, micron usuario conectado, que termina en n1, ha creado este tablero. Si bajas a la segunda, esto lo crea abc123 como lo es el tercer y cuarto tablero también. Dentro de nuestra aplicación, sólo deberíamos ver el tablero que ha creado el usuario actual conectado. Esto por supuesto, causó un problema porque un usuario sólo debería ver los tableros que han creado en lugar de los de otras personas también. Esta ruta de inicio ya tiene este ID de usuario pasado como parámetro URL. Encima en los componentes home.js, vamos a abrir esto en la barra lateral, podemos pasar en este parámetro cuando llamamos al método get board. Dentro de componente sí montó, podemos acceder a este punto props punto match, params de punto, y luego el ID de usuario sobre en el app.js. Si guardamos este archivo, dirígete a la app, este método siempre está dentro de componentes donde podemos recibir estos apoyos como argumento. Entonces echemos un vistazo al método que llamamos get boards, que está justo aquí. Ya tenemos este User ID el cual agregamos antes, pero nuestro presente, no se ha utilizado. El primero que hay que hacer después de la ref del tablero, es quitar el método get. Entonces en lugar de esto, qué voy a utilizar el método where que hemos mirado antes, que nos permitirá sólo conseguir los tableros donde el campo de usuario de la junta coincida con el ID de usuario actual. Al ser el primer parámetro, este es el nombre del campo de la placa que es board.User, separado por una coma. Este es el operador de comparación, que es igual al tercero. Queremos comprobar esto contra el ID de usuario, que se está pasando desde los parámetros. Por lo que podemos agregar esta variable dentro de aquí. Entonces también podemos encadenar al final el orden por método, que va a devolver los tableros en orden de cuando fueron creados. Podemos hacerlo accediendo al tablero.created @field. Entonces finalmente podemos llamar a get to jalar todos los datos de nuestra placa hacia el navegador y ahora no vemos ninguna pizarra dentro de aquí, pero si hacemos clic derecho e inspeccionamos y luego entramos a la consola, ahora vemos el mensaje de la consulta requiere un índice. Al igual que antes esto es porque ahora estamos usando una consulta más compleja. Por lo que ahora podemos dar click en este enlace para crear esto en Firebase, y luego como lo hicimos anteriormente, podemos seguir adelante y crear nuestro índice y luego da unos momentos para crear. Una vez hecho esto, ahora vamos a pasar a la base de datos. Entonces da click en la pestaña Datos y luego vamos a eliminar todos estos tableros. También tengo un error ortográfico aquí donde debería crearse esto en. Por lo que también se arregla en solo un momento también. Dejemos la colección, teclea el nombre de los tableros, ya que algunos son fácilmente creados por un usuario codificado de abc123. Ahora vamos a la forma de crear tablero y en el objeto tablero justo aquí, ahora podemos crear justo aquí. Archivos de servicio y ahora los nuevos tableros tendrán ahora los datos correctos. Dentro de app.js. Tenemos todo lo que ahora necesitamos aquí. Entonces pasemos a los proyectos, creemos un nuevo tablero. Llamemos a esto las ideas del curso y va a ser azul, crear en tu pizarra y esto parece bueno. Digamos que todo para el siguiente. Elige un color diferente. Por lo que estos son creados para nuestro usuario actual conectado. Intentemos cerrar sesión. no tenemos ninguna configuración de redireccionamiento o mensajes de error, pero lo manejaremos en el siguiente video. Ahora sigamos adelante e iniciemos sesión con un usuario separado que podamos revisar estos tableros y no mostrar para una cuenta diferente. Agrega el correo electrónico y la contraseña y luego ingresa. También necesitamos agarrar el ID para el segundo usuario. Entonces a partir de la autenticación, tomemos el ID de usuario, ahora podemos pasar a nuestro proyecto. Barra inclinada pega esto en y luego hacia adelante tableros de barra inclinada y ahora no vemos los tableros creados a partir de nuestro usuario anterior, ya que estos son filtrados hacia abajo por nuestro ID de usuario. Intentemos crear un nuevo tablero para éste. Por lo que prueba en crear un nuevo tablero, bueno. Ahora, cualquier tableros nuevos que agreguemos solo se mostrará para el usuario que los creó. Posteriormente en esta sección, también introduciremos algunas reglas de seguridad en el servidor, para ayudar a prevenir estos dos. A continuación, sin embargo, mejoraremos la experiencia de registro y inicio de sesión del usuario proporcionando redirecciones y mensajes de error. 42. Redirigir y errores: Déjame iniciar sesión y también cerrar sesión. Sabemos por el encabezado arriba en la parte superior, así es como está cambiando un estado de usuario, pero también queremos ser redirigidos a. Después de iniciar sesión, nos deben llevar a la página de tableros y cierre la sesión, debería devolvernos de vuelta a esta página de inicio de sesión. También vamos a agregar algunos mensajes de error también al iniciar sesión y también iniciar sesión, así que informe al usuario si su correo electrónico y contraseña estaban equivocados o si el correo electrónico del usuario está actualmente tomado al registrarse. Todo el archivo en el contexto off, que es el punto off context js. Tenemos todos nuestros métodos relacionados con el usuario dentro de aquí. Va a ser aquí donde preguntemos los redireccionamientos. Para usar redireccionamiento, necesitamos acceder al router reaccionar. Vamos a desplazarnos hasta la parte superior y podemos sacar esto de nuestro paquete de rutas. El nombre del paquete que queremos importar es que tenemos router, que hemos usado antes, y esto importamos desde el router de reaccionar dom. Entonces como sabemos desde temprano, también necesitamos envolver este componente al exportar. Desplazemos hacia abajo hasta el fondo. Voy a sacar a nuestro proveedor de autenticación, cual exportamos aquí, dejando en el consumidor. Entonces se exportan por defecto arriba. Después podemos envolver nuestros componentes con router, persona en el proveedor de autenticación. Guarda este archivo y luego de nuevo en la app dot js, dentro de este archivo sobre la parte superior, también necesitamos cambiar la importación ya que ahora es una exportación predeterminada eliminando necesidades que rodean llaves. Con esto ahora en su lugar, podemos volver a nuestro contexto fuera y luego primero necesitamos configurar un mensaje apagado en estados. Subiremos a los objetos de nuestro estado. Entonces justo después del usuario, podemos agregar un mensaje de apagado. Que vamos a establecer inicialmente en una cadena vacía, bajar a nuestro método de registro. Una vez que un usuario ha iniciado sesión, podemos redirigir a la URL de los tableros, cual está conformada por el ID de usuario. Después de iniciar sesión con el correo electrónico y la contraseña, podemos acceder a esto, puntes, historial de puntos, push de puntos para acceder a las fechas push del router. Entonces dentro de las garrapatas traseras, vamos a insertar la URL, que es la slash hacia adelante. Entonces como variable, también podemos insertar nuestro ID de usuario, cual está disponible a partir de este, estado de punto, usuario de punto, ID de punto. Después de esto, también necesitamos ir a reenviar tableros de corte, entonces va a ser la sección de corte a continuación la cual recibe cualquier mensaje de error y podemos usar el mensaje para establecer el estado. En el interior aquí podemos quitar los comentarios. Entonces podemos establecer los estados y este estado va a ser igual a nuestro mensaje de error. Podemos configurar el mensaje apagado para que sea igual al mensaje de punto de error. Debajo de esto el componente de registro va a ser exactamente el mismo. El primero que tenemos que hacer es provocar un redireccionamiento a los tableros del usuario. Podemos agarrar la línea de código de la sección de registro. Después podemos pegar esto en después de donde nos registramos con nuestro correo electrónico y contraseña. También podemos captar cualquier mensaje de error y establecer esto también en estado. Con este estado de conjunto de puntos. Podemos pasar el mensaje off, que de nuevo va a ser igual al mensaje de error. Abajo en el método de cierre de sesión, que está por debajo de esto, un cierre de sesión debe hacer que el usuario redirija a la ruta de inicio, que muestra los componentes de inicio de sesión. Después de cerrar sesión y establecer el estado, también podemos redirigir con los métodos push. Todo lo que queremos hacer aquí dentro es redirigir a la varilla hacia adelante pero al menos donde atrapamos algún error. También podemos establecer el estado que va a actualizar nuestro mensaje de apagado. En el siguiente paso para agregar nuestro mensaje off del estado al proveedor para que pueda ser utilizado dentro de otros componentes. Después de cerrar sesión, también podemos agregar el mensaje de apagado, que va a ser igual a este, punto de estado, mensaje de punto apagado. Ahora tengo todo esto en su lugar. El componente que queremos utilizar está terminado en la forma de usuario dot js. Podemos encontrar esto dentro de la barra lateral, abajo en nuestro consumidor off. También podemos pasar en este mensaje off. Se tiene un pase de mensaje apagado de los estados. Se puede mostrar justo encima del formulario. Vamos a desplazarnos hacia abajo a nuestro formulario con la clase de formulario de registro. Después podemos agregar un operador ternario dentro de las llaves, donde comprobamos si hay un mensaje apagado, si lo hay, vamos a dar salida a un span elementos que va a dar salida a nuestro mensaje off dentro de las llaves. Si el mensaje apagado es falso, esto significa que no se ha establecido ningún mensaje el estado, por lo que después de los dos puntos, simplemente podemos establecer esto para que sea una cadena vacía. Ahora vamos a guardar esto, en el navegador y signo integral de componentes. Primero podemos probar esto con un correo electrónico y contraseña incorrectos para comprobar que nuestro mensaje se está pasando a estos componentes. Encontremos error dentro del correo electrónico con la contraseña correcta. Voy a trazar la consola. Intentemos iniciar sesión. Obtenemos el error dentro de la consola y también el mensaje de error en la pantalla. Déjame usar y saber que no se ha encontrado ningún registro de usuario. Vamos a intentar agregar el correo incorrectamente o eliminar un dígito de la contraseña, iniciar sesión. Volvemos a ver un error dentro de la consola y luego el mensaje actualizado en la pantalla. Corrijamos esto e ingresamos correctamente, que luego nos redirige a la vista de la junta. Pasando también el ID de usuario, lo que significa que no necesitamos teclearlos en cada vez que iniciamos sesión. También eliminemos este ID de usuario de la pantalla ya que ya no necesitamos esto. Esto se sumó más en los componentes del hogar. Vamos al home dot js. Echemos un vistazo a los elementos de span, que está justo en la parte superior aquí. Podemos quitar esto. Otro caso que podemos manejar es un usuario conectado que regresa a la ruta de inicio, ahora es quien ingresó y luego haga clic en el icono de inicio, luego lo llevará a la página de registro. Si nosotros en esta página y también nos hemos conectado, ya no necesitamos iniciar sesión ni crear una cuenta. En cambio lo que necesitamos hacer es agregar un botón, que va a redirigir al usuario de nuevo a la vista del tablero. Podemos volver a hacer uso del operador ternario para sólo mostrar el formulario si no hay ningún usuario conectado. Hagamos esto de nuevo en Visual Studio Code. Vamos al formulario de usuario y luego al div con la clase de un registro-wrapper. Encima de esto, vamos a volver a utilizar el operador ternario para ocultar o registrar formulario si el usuario está conectado. El primero que vamos a hacer es comprobar si el ID de usuario no está presente. Podemos usar esto con el signo de exclamación, para comprobar si el ID de punto del usuario no está configurado actualmente. Después del signo de interrogación, entonces podemos abrir nuestros corchetes. Entonces podemos envolver el resto de nuestra envoltura de registro tomando estos dos y entre paréntesis cerrándolo en su lugar. Después desplázate hacia abajo hasta el div de cierre, justo hacia abajo hasta la parte inferior. Después de nuestro envoltorio de cierre div, podemos pegar esto en. Podemos entonces preguntar la segunda condición después del colon, abrir los corchetes. Entonces este es el caso de si el usuario está conectado. Después vamos a dar salida a un botón el cual redirigirá al usuario de nuevo al de la junta. Añadamos un botón H más dentro aquí. Un manejador de eventos onclick, que va a desencadenar una función en línea. Vamos a configurar aquí una función de error, que vamos a crear en un momento llamado redirecciones. Redireccionar es tomar el ID de punto del usuario, y luego toma entre los elementos de apertura y cierre. Tengo que ir a mis tableros. Este operador ternario ocultará el formulario si el Usuario no está conectado. Si el usuario está conectado, entonces vamos a renderizar un botón, que al hacer clic, va a redirigir al usuario a la vista del tablero. Para ello, necesitamos crear este método de redirección fuera de nuestro render. Vamos a desplazarnos hacia arriba. Crea nuestros redireccionamientos, que toma en el ID de usuario, configura nuestra función y lo único es redireccionar método que va a hacer es empujar a una nueva URL. Podemos acceder a esto, puntales, historia de puntos. Acceder al método push. Dentro de las garrapatas traseras. Podemos redirigir dos slash hacia adelante, agregar en nuestra variable, que va a ser ID de usuario, y luego reenviar tableros de slash. Guardemos esto y pasemos a nuestro proyecto en el navegador. Ya que ya estamos logueados, ahora podemos dar click en este botón, iré a mis tableros. Esto luego nos redirigirá a nuestro ID de usuario, seguido de los tableros. Como redireccionamiento final para este video, también podemos trabajar con el emoji de casa arriba en el encabezado. Esto siempre enlaza con la ruta de inicio pero cuando un usuario está conectado, sería mejor enlazar con los tableros del usuario. Vamos a pasar a nuestro punto de cabecera js. Vamos a desplazarnos hasta nuestro enlace, que es salidas en nuestro emoji. A medida que href, en lugar de esta slash hacia adelante, voy a quitar esto, añadir en las llaves llaves. Podemos hacer que esto sea dinámico. Entonces dentro de aquí también podemos hacer uso del operador ternario para comprobar si el ID de punto del Usuario está presente. Si está dentro de las garrapatas traseras, entonces queremos redirigir nuevamente a los tableros, que es inclinada hacia adelante, luego pasamos en el ID de punto del usuario, seguido de los tableros inclinados hacia adelante. Posteriormente, también podemos agregar la condición else y luego redirigir a la ruta de corte inclinado hacia adelante si el usuario no está conectado. Vamos a probar esto. Si ahora guardamos, alteramos los proyectos, ahora iniciamos sesión, hagamos click en el emoji. Nos redirigimos a nuestros tableros. Si ahora cerramos sesión entonces tomaría en el formulario de registro. Este emoji aún nos redirigirá a estas rutas de inicio. Este usuario redirige un algo que beneficiará al usuario al navegar por nuestra aplicación. 43. Roles y permisos: Ahora es el momento de agregar algunas reglas de seguridad a nuestra base de datos. Mostrar y ocultar cosas en el front-end cuando un usuario está conectado, está bien para mantener la interfaz de usuario buscando como debería. Pero también necesitamos configurar nuestra seguridad de back-end si alguien los pasa por alto creando una solicitud falsa o modificada. Esto significa que la base de datos solo enviará datos cuando el usuario esté conectado y solo mostrará las tarjetas, escuche tableros, si coinciden con el usuario actual. He ido adelante y retirado las listas y tarjetas de nuestra base de datos para darnos un comienzo limpio para este video, ya que vamos a estar agregando un nuevo campo. El nuevo campo que vamos a estar agregando va a ser igual que los tableros donde agregamos un ID de usuario. Vamos a empezar de nuevo en los componentes boards.js, donde creamos una nueva lista. Dentro aquí cuando creamos una nueva lista, podemos hacer uso de este usuario el cual se pasa vía el contexto. Para ello, vamos a desplazarnos hacia abajo a nuestro formulario y en el método onSubmit, actualmente estamos llamando al método CreateNewList. Voy a cortar esto y luego agregar una función en línea dentro de aquí, que va a tomar en la información del evento. Agregar este en línea nos permitirá pasar el ID de usuario al llamar a este método. Podemos agregar de nuevo en nuestro método CreateNewList, pasando en la información del evento y también el usuario.id Ahora con esto podemos subir a CreateNewList fuera del render, que está justo dentro de aquí. Actualmente recibimos la información del evento, también necesitamos recibir el ID de usuario como segundo parámetro justo después de nuestros eventos. Entonces cuando creamos una nueva lista, queremos agregar el campo de usuario, que va a ser igual a este ID de usuario, y lo mismo para agregar una nueva tarjeta también. Vayamos a los componentes list.js. Dentro de aquí actualmente no usamos ningún contexto. Empecemos importando al consumidor off en la parte superior de este archivo. Subiremos hasta la cima. Podemos importar Authconsumer desde la ruta del archivo que es. /AuthContext. Desplázate hacia abajo y ahora podemos hacer uso de este componente AuthConsumer para envolver nuestro código dentro del método aleatorio. Tan solo hay que volver crear nuestro AuthConsumer, el cual tiene una etiqueta de apertura y cierre. Entonces podemos crear nuestra función, que va a ser el niño que pasa en el usuario dentro de las llaves. Configurar el resto de nuestra función. Entonces podemos agarrar el resto de nuestro código de este div con la clase de lista. Agarremos todo esto, hasta el div de cierre. Podemos cortar esto. Después pega esto dentro de nuestra función. Ahora tener acceso al usuario a través de nuestro contexto. Si ahora nos desplazamos hacia abajo hasta donde creamos una nueva tarjeta, podemos hacer exactamente lo que hicimos en el último video. Ponemos nuestro método actual desde el OnSubmit. Después podemos pasar en una función en línea tomar en la información del evento, llamando a CreateNewCard, y luego pasando en la información del evento. Entonces también el usuario.id, que fue pasado desde contexto. Ayudando a CreateNewCard, esto ahora va a recibir este ID de usuario. Podemos pasar esto como segundo argumento. Entonces justo después de CreateDat, también podemos agregar nuestro campo de usuario, que va a ser igual al ID de usuario. Ahora está en su lugar. Podemos darle a esto una oportunidad en el navegador. Vayamos a nuestros proyectos y podemos crear un nuevo tablero. Vamos a ir por a, b, y también cerrar sesión. Ya podemos iniciar sesión con un usuario diferente. Ahora redirigimos, eso es en c y también d Ahora esto nos va a dejar con diversos tableros para diferentes usuarios. También podemos agregar algunas listas y tarjetas para probar esto también. De hecho, queremos ir a uno de los tableros que se creó. Vayamos por c, así que 1, 2, y 3 y agregamos algunas cartas dentro de aquí todas a la consola. Ahora actualicemos y echemos un vistazo a nuestras nuevas tarjetas de descenso. Vamos a pasar por todas las tarjetas para empezar y ahora tenemos el Id de usuario vinculado en estas. Sólo vamos a revisar la lista también están funcionando. Todos estos están funcionando bien. Ahora tenemos estos campos de usuario. Podemos agregar nuestros permisos. Vamos a dar click en la pestaña de reglas y podemos establecer estas dentro de la base de datos. Haga clic en esto. Estas reglas por defecto permitirán a cualquiera leer y escribir en nuestra base de datos, independientemente de si están registrados o no. Mi instalación nos permitirá hacer coincidir documentos o colecciones, y también configurar reglas para cada uno al leer, crear, actualizar o eliminar datos. En primer lugar tenemos este partido exterior circundante, que apuntará a nuestros documentos de base de datos. Se puede pensar en esto como una ruta de archivo a nuestra base de datos. Estas llaves rizadas que tenemos dentro de aquí, son básicamente variables que pueden cambiar, como el documento Id. Después anidados en el interior, podemos especificar ciertos documentos o colecciones que desea asegurar. Este ejemplo apunta a todos los documentos de nuestra base de datos. Es una regla bastante general. Entonces aquí dentro estamos permitiendo que cualquiera lea y escriba nuestra base de datos y por supuesto esto no es muy seguro. He proporcionado con este curso un conjunto de reglas que puedes usar para reemplazar estas y las tengo disponibles en mi escritorio. Voy a abrir estos. Este es un archivo de texto. Si aún no lo has hecho, adelante y descarga estos del curso, y voy a copiar todos estos. Vuelve a nuestra base de datos y luego pega estos en su lugar. Después podemos golpear a publicar para aplicarlos a nuestra base de datos. Estas reglas se dividen en tres secciones, una para cada una de nuestras colecciones. Tendremos la sección de partido que está aquí, donde vamos a hacer coincidir todos los documentos dentro de nuestra colección de tableros. También tenemos lo mismo para nuestras listas y también nuestras tarjetas. Anidados dentro de aquí tenemos varias reglas para cuando queremos leer datos, crear o actualizar datos, crear o actualizar datos, y también eliminar cualquier cosa de nuestra base de datos. Dos cosas a tener en cuenta aquí al usar estas reglas de Firebase, tenemos tanto una solicitud, que vemos aquí, como un objeto de recurso, que usamos bastante dentro de estas reglas. Este objeto de recurso contiene datos que actualmente vive en nuestra base de datos, como aquí donde estamos agarrando en el tablero y luego el campo de usuario. Tenemos entonces el objeto de solicitud, que está justo aquí. Este objeto de solicitud contiene un objeto off anidado dentro del cual contiene información sobre el usuario conectado actual. Esta línea de código está comprobando si el usuario actual conectado coincide con el ID de usuario vinculado con el tablero. Si lo hace, permitirá al usuario leer desde la base de datos. Si no hay coincidencia, la solicitud fallará y el usuario no podrá leer la información que está solicitando. A continuación, tenemos algunas reglas para crear o actualizar el tablero. También se pueden mantener separados, pero en nuestro caso, contendrá el mismo conjunto de reglas. Los he agrupado. Dijimos antes que este objeto de solicitud contiene los datos entrantes. Solicitud también tiene un objeto de recurso también el cual estamos utilizando aquí, y esto contiene los datos que estamos enviando al crear o actualizar nuestros tableros. Acceder a estos nos permitirá proporcionar alguna validación para comprobar que los datos estén formateados correctamente antes de guardar. Aquí comprobamos si el título de los tableros es una cadena, comprobamos si el fondo es una cadena, el campo At creado es una marca de tiempo, y también comprobamos si el usuario que hemos agregado al objeto de tablero también es igual al usuario que ha iniciado sesión. Entonces solo permitimos a los usuarios eliminar realmente un tablero si el balón fue creado por el usuario actual conectado. Todo lo demás a continuación es bastante similar. Configuramos un conjunto similar de reglas para nuestras tarjetas y también nuestras listas para asegurar también estas dos. Configurar nuestras reglas no está tan mal. Una vez que entendemos ajustamos a menudo comparando lo que tenemos en nuestra base de datos utilizando el objeto de recurso con los datos que se están entrando, y esto está disponible desde los objetos de solicitud. Ahora si publicamos esto y vamos a nuestro proyecto, click en el icono de inicio. Estoy conectado con un usuario y aún podemos ver los tableros que creamos. Abramos un segundo navegador con un usuario diferente. Si nos refrescamos, vemos que la Firebase aún nos permite acceder a las bolas creadas por cada usuario. También podemos entrar en cada uno de estos. Intentemos revisar nuestra lista en tarjetas. Intentemos eliminar información, y todo esto está funcionando. También podemos probar eso si copiamos un enlace de un usuario conectado, y pegamos esto en un navegador diferente que no se nos permite ver la información del tablero. Esto ahora se agrega algo de seguridad backend a nuestra aplicación, junto con algunas comprobaciones front-end para mantener la interfaz de usuario en línea. Por supuesto, puedes agregar reglas más complejas a Firebase, pero estos son un buen punto de partida para permitir que solo los usuarios iniciados sesión, y también los creadores de la junta vean sus propios datos. 44. Construir para la producción: Una vez que estamos contentos con nuestra aplicación, es el momento de crear una compilación para la producción. Empecemos por pasar al paquete.json en la barra lateral. Abre esto. Si nos desplazamos hacia abajo a la sección de guiones que tenemos justo aquí. Hasta ahora hemos estado usando el script de inicio para el desarrollo y también hay un script de compilación que tendremos justo debajo para construir nuestra aplicación para producción. Entonces hagámoslo dentro de la terminal. Voy a abrir una nueva pestaña dentro de la terminal. Una vez que estemos en esto, podemos ejecutar npm, ejecutar build, y luego activar esto. Danos unos momentos para seguir adelante y construir para la producción y te veré en un momento en que todo esto esté hecho. Una vez hecho esto, si ahora abrimos la barra lateral, notarás dentro de nuestro proyecto ahora tenemos una carpeta de compilación. Esto contiene lo que necesitamos para desplegar nuestra aplicación para la producción. Se quita todo lo que no necesitamos, como cualquier desarrollo, mensajes de error y dependencias. Hemos construido nuestra aplicación usando muchos archivos JavaScript para páginas y componentes. Dentro de esta carpeta Build se agrupará juntos. Por lo que no tenemos que hacer una solicitud separada para cada archivo. También hará lo mismo si tenemos múltiples archivos CSS también. Podemos ver esto si abres el archivo estático dentro de aquí, tenemos un CSS y también una carpeta JavaScript, y es dentro de aquí donde se agrupan nuestros archivos. Dentro de aquí para nuestro bono JavaScript, por ejemplo, hay bastantes paquetes que se dividen y tienen números en los nombre de archivo para efectos de cobro. El nombre de archivo que habíamos hecho dentro de él, que es éste justo aquí, es nuestro código de aplicación que escribimos. Si abrimos esto es posible que veas ciertas partes de nuestra aplicación las cuales reconocemos. Entonces, por ejemplo, si agregamos aquí estados conjuntos, tenemos nuestra llamada de estado set donde configuramos las Etiquetas seleccionadas. Si seguimos pasando por nuestro código, tenemos uno para abierto el modal. Entonces veremos referencias a nuestro código, pero esto está comprimido y formateado para la producción. Dentro de la barra lateral, también tenemos archivos que comienzan con un número, como estos justo aquí y este suele ser un código de proveedor de terceros, como cualquier módulo de nodo que hayamos incluido y estos se almacenan en caché por separado para el rendimiento. Después los nombres de archivos de tiempo de ejecución que tendrán abajo en la parte inferior. Estos son algunos código de paquete web para cargar y ejecutar nuestra aplicación. Todavía tenemos nuestro archivo principal index.html, que ahora apunta a nuestro archivo JavaScript principal dentro de la compilación. Vayamos a través de nuestros guiones. Esto ahora apunta a nuestro archivo JavaScript, que está dentro de nuestro paquete y este es el archivo principal que buscamos antes. Por lo que ahora tenemos esta carpeta de compilación dentro de nuestra aplicación. Ahora estamos listos para pasar al siguiente video y desplegar nuestra aplicación a la producción. 45. Implementación a Netlify: Hay un montón de hosting y proveedores por ahí. Pero uno realmente popular y fácil de empezar es Netlify. También tienen una opción gratuita para usar también. Podemos conseguir rápidamente nuestro sitio en línea utilizando la CLI de Netlify, que nos dará un conjunto de comandos para empujar nuestra aplicación a la producción. Podemos hacer esto más en la terminal usando npm. Vayamos a nuestro terminal y unicode npm install netlify -cli, luego -g para instalar esto globalmente. Si ves un error al hacer esto, es posible que también necesites agregar la pseudo palabra clave antes de esto para instalarla como administrador. Una vez que estas CLI estén instaladas para usted, podemos ejecutar uno de los comandos que se proporciona llamado netlify deploy. Esto se abrirá en el navegador donde necesitamos crear una cuenta si aún no tienes una. Ahora, tenemos algunas opciones de lo que nos gustaría hacer a continuación. Necesitamos crear y configurar un nuevo sitio mediante el uso de las teclas arriba y abajo y luego presionar “Enter”. Voy a entrar a través de este nombre de equipo. Esto está completamente bien. Podemos entonces elegir un nombre de sitio único o podemos dejarlo en blanco para obtener un nombre generado aleatoriamente, lo cual voy a hacer. Ya he usado la CLI de Netlify unas cuantas veces antes. Si no lo has usado en el pasado, posible que tengas que tomar en el navegador para iniciar sesión o también autorizar la aplicación. Lo siguiente que tenemos que hacer es decirle a Netlify dónde se encuentra nuestra carpeta Build en nuestro proyecto. Esta es simplemente la carpeta Build. Son lo mismo. Antes de poner esto a disposición para que el mundo lo vea, Netlify nos dará un borrador de URL, que es básicamente un sitio de prueba para que veamos si todo está funcionando primero. Comencemos primero copiando este borrador de URL. Podemos copiar esto, todo comando y hacer click para tomar en el navegador. Aquí podemos comprobar si todo está funcionando bien. Vamos a iniciar sesión. Dale una prueba a esto. Tomamos en nuestros tableros. Probemos algunos de estos. También tenemos nuestra lista y nuestras tarjetas apareciendo. Todo esto parece estar funcionando bien. No obstante, si ahora hacemos clic en este icono de “Inicio” en la esquina, entonces recibimos un mensaje de error de página no encontrada. Esto se debe a que cuando hacemos clic en este enlace de la página de inicio en la esquina, luego tratamos de enlazar a una URL que termina en/nuestro ID de usuario y luego /boards. No obstante, no tenemos esta ruta ni esta configuración de enlace en nuestra app. Todo esto se maneja en el front-end usando el router. La solución a esto al usar una aplicación de una sola página es decirle al servidor que siempre solo devuelva la página de inicio y luego manejaremos cualquier enrutamiento en el front-end. Hacer esto es bastante simple, si volvemos a nuestro editor de texto, simplemente necesitamos agregar un archivo _redirect a nuestra raíz de directorio de compilación. Abre la carpeta Build, crea un nuevo archivo dentro de aquí, que va a ser _redirect. Todo lo que necesitamos agregar adentro aquí es/star /index.html 200, guarde este archivo. Esto le dirá al servidor que siempre envíe de vuelta la página index.html y también un código de estado de 200. Ahora con esto en su lugar, si bajamos a nuestra terminal, podemos volver a ejecutar netlify deploy, enviar esto fuera. También nos pedirá el camino de despliegue uno más, que es simplemente construir. Esta ahora construye nuestra aplicación dándonos una URL de prueba en vivo. Podemos hacer click en esto e intentar iniciar sesión. Esto está bien. Haga clic en el icono “Inicio”. Una vez que estamos contentos de que todo esté funcionando como se esperaba, ahora podemos empujar esto a la producción. Podemos hacer esto con un comando más abajo en una terminal. Esto es netlify deploy, entonces -prod, que es abreviatura de producción. También, necesitamos pasar en el camino Build. Esto ahora nos dará una URL en vivo, en la que podemos hacer click, abrir en el navegador. Ahora, nos queda un enlace en vivo para nuestro proyecto en la web, que ahora puedes compartir con otros. 46. Gracias: Enhorabuena, has llegado al final de esta clase. Gracias por inscribirse y espero que se hayan divertido aprendiendo todo sobre lo que es React y cómo podemos usarlo para construir aplicaciones usando JavaScript. Al construir nuestra app, hemos hecho clic en bastante terreno, empezando por el principio, donde miramos los conceptos básicos como configuración de nuestra app, componentes, ciclos de vida, métodos e indicaciones, trabajar con validación estatal y pronta. Pasamos a usar formularios e insumos, y cómo React utiliza componentes tanto controlados como no controlados para diferentes situaciones. Nuestros usuarios también necesitan una forma de navegar por nuestras páginas. Después pasamos a resolver esto usando un enrutamiento front-end. Junto con otras soluciones que proporcionó el router, como las indicaciones y el estado del router, los métodos push y los parámetros de URL. Sin embargo, React sólo cubre el front-end de nuestro proyecto, por lo que a menudo necesitamos un servicio de back end, también. Al menos, conectamos a Firebase para darnos una base de datos en tiempo real para iniciar todos los tableros, listas y tarjetas. A la par de aprender todo sobre la creación, lectura, actualización y eliminación de datos, junto con diversos métodos Firebase y servicios de autenticación de usuarios. Por último, construimos nuestra app para la producción y desplegamos para que el resto del mundo lo vea. Espero que hayas disfrutado de este curso, y espero verte de nuevo en una futura clase.