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