React, Tailwind y Firebase: creación de un sitio de blog moderno

1. Introducción del curso: Oigan, chicos, mi nombre es Joel D Muller, y voy a estar a la cima para este curso, creando un sitio de bloques simple que reacciona acerando css y En este curso, vamos a pasar por diferentes procesos de creación de un sitio de bloque, creación de nuestro blog, subirlo a nuestra base de datos y recuperarlo de nuestra base de Vamos a estar usando para nuestra base de datos, vamos a estar usando Pier base y para nuestro estilo en lugar de CSS normal o el CSS vanilla que conocemos antes, vamos a estar usando te casos en los que necesitas un poco de idea en él para el estilo de este curso. Y también, todos conocemos la eficiencia de reacción en la que vamos a estar usando para que este costo sea preciso. Y después del curso, si hay en ahí está claro para ti, después de subir el curso resplandor ponemos el enlace Para en la descripción a continuación. Puedes comprobarlo y hacer clic y revisar el código por tu cuenta, e incluso copiarlo, si quieres, confía en mí, este curso vas a dejarme anotar y vas a disfrutar del curso sin más yo hago como empezaron. 2. Configuración del entorno: Entonces para empezar, voy a necesitar ejecutar mi entorno, daño para iniciar mis Daños voy a crear una nueva carpeta foi y voy a llamarla puedo llamarlo nombre, pero voy a llamar a este bloque Entonces lo voy a abrir en mi código de visual studio. Entonces después de esto, necesito instalar mi react e iniciar todo correctamente. Necesito instalar mi react y mi t css. Vamos a instalar firebase más tarde porque eso será hacia el final del tutorial antes de que podamos comenzar a implementar la base de fuego Entonces para mí para crear mi reacción, existe esta forma predeterminada de crear reactores MPM create create react, pero no voy a usar eso porque lleva un poco de tiempo evi están usando MPM Entonces hay una alternativa para ello. Eso lo hace más fácil. Haces que tu reaccione sea más ligero y lo haces más rápido. Entonces voy a estar usando T. Así que afortunadamente, puedo instalar mi VT también junto con mi sensor de cola Entonces este es el comando, puedes ir a tu guía tail.com Así que ve a esta guía marco. Así que ve a porque vamos a estar usando VT. Así que solo puedes copiar este particular. No copies todo. No necesito de todo. Simplemente copie este MPM create Tartest porque necesitamos que se instale la última versión de react o la última versión de t Ponlo en tu termina tu hermano, así va a actuar por el nombre del proyecto. Entonces llamémoslo blog o puedo llamarlo mi nombre, J Blog. Puedes usar el nombre para ello. Joel Blog haz clic en entrar Así que va a tener para el nombre del paquete blog Por lo que debes tomar nota cuando estés seleccionando la vista bananas o estamos usando react react. No estamos usando script tipo. No estamos usando ningún script jo para ello. Entonces, ¿por qué haces clic en él actuar a CD a J blog y luego instalar MPM para instalar la dependencia necesaria para esta aplicación Entonces después de la instalación, ahora puedes hacer MPM run para ejecutar la app y S está funcionando correctamente Por lo que puedes hacer click en este control de audio control y hacer click. Entonces vamos a ver aparecer la app. Así que hemos podido configurar nuestra app ambiental de reacción fácilmente, pero aún así necesitamos instalar nuestro paquete de viento de cola Entonces copia esto y luego podrás abrir una terminal diferente para eso. Entonces tienes que verlo tu blog o como sea su nombre lo llames, y controlar. Entonces esto instalará el CSS para t win después de eso, necesitas instalar el P t lo enrolla. Entonces pegas esto también. Entonces después de eso, tenemos nuestro archivo de conflicto CSS y tenemos nuestro si revisas este lugar, tu fuente moda tienes tu índice CSS y otras cosas dentro. Entonces después de eso, Dentro de nuestro tailing config js, necesitamos copiar esto y pegar el interior de nuestro contenido Tenemos que copiar esto y pegar d. éste simplemente simbolizar que cualquier alimento cualquier archivo que tenga este índice índice HTML, o en o hacer Tx podremos trabajar en él Si esto no está en poner el TCS no podremos trabajar en nuestra propiedad Y también en nuestro índice CSS, necesitamos copiar esto en CSS de índice pasado. Entonces puedes simplemente pasarlo encima y y después de eso, creo que estamos bien para irnos. Entonces además para esta tutoria, necesito importar algunas fuentes que voy a estar usando para esta Tutoria, hay algunas fuentes específicas que voy a estar usando para esta historia Entonces voy a importar esta fuente de Google. Puedes copiarlo también y hacer lo mismo abrir San inter barberos y amar estas son la fuente formdal que voy a estar usando Entonces para que yo implemente este frontal necesito agregarlo a mi archivo TV.cc. Así que no te preocupes. Dentro de la configuración. He añadido muchas cosas. Entonces dentro del equipo, sepa que su equipo está un poco vacío antes, pero he agregado la familia de fuentes extendida los extensores Entonces para cada fuente, estos son los fondos que necesitaba. Así puedo llamar a esta fuente en cualquier momento en mi reacción, en mi página o cualquier cosa. Entonces este color, así que no quiero estar agregando color cada vez que tal vez en cualquier momento quiero usar color primario. Solo tengo que agregarme esta A 535 cada vez. Entonces van a facilitar que si lo agrego aquí, solo puedo llamar a tal vez el color de fondo para que sea primario. Entonces si cambio el color aquí, va a cambiar para cada otra página que necesite, o uso este color primario en vez de que vaya de una página a otra para cambiar el color. Entonces después de esto, necesito a la carpeta crismal. En primer lugar, mi carpeta de página y luego mi carpeta de componentes. Entonces dentro de la carpeta de páginas, ahí es donde tenemos todas las páginas que se necesitan para esta aplicación o tal vez, tal vez la página de política o la página de fútbol o cualquier otra página. Y componente, ya sabes, componente react es como un código reutilizable en lugar de que yo lo reescriba para cada página, solo puedo cotejarlo usarlo en esa página en particular Entonces hay algunos otros que también hay que hacer. Entonces dentro de mi app.s6 No necesitamos todo esto. Bien, vamos a comprobar tal vez nuestra reacción nuestros sentidos de la cola está funcionando. Entonces dentro de esto por favor. Déjame ver. Entonces para que uses tu viento de cola, tienes que decir el nombre de la clase Sí, este nombre de clase. Déjame ver los antecedentes deben ser leídos. G seis. Déjame ver tal vez esto va a funcionar no está funcionando. Probablemente, déjame reiniciar mi esta cosa. Oh, ya puedes ver. Entonces después de instalar tu ten sass, tienes que cerrar el servidor en ejecución y reiniciarlo de nuevo Para que veas que nuestro t ss está funcionando bien ahora. Pero no necesitamos esto en nuestro servidor. No necesitamos esta página. Entonces necesitamos una página completamente diferente. Entonces para que yo haga eso, ya tengo algún código Lo vamos a explicar, sólo lo copiaré y pegaré y luego lo explicaré más adelante. Entonces lo que simplemente lo hago ahora es instalar mi ruta para que pueda calificar a través de diferentes páginas en mi distin pero no va a funcionar ahora porque no tengo instalar mi router react doom Entonces para instalar eso, puedes simplemente copiar esto y pegarlo en tu dist check PPG sell para instalarlo en tu navegador a tu app Así que solo copia este comando y ven aquí a tu Así que después de la instalación, puedes volver a tu plan. Entonces definitivamente va a ser plan porque no estoy cargado página en él. Entonces estos son los que vamos a usar más adelante. Estas son las páginas que vamos a estar creando. Necesitamos la página de inicio, la página de contacto, la página de blog diferente. Entonces necesitamos los detalles del blog y crear blog. Entonces, antes que nada, necesitamos nuestro nav y nuestro pie de página. Si revisas el aquí Bien. Lo siento. Entonces si revisamos el hasta aquí, tenemos nuestro nuestro nu tenemos la búsqueda y el nombre del logo y las otras cosas, y tenemos nuestro pie de página. Ese es el que vamos a estar bajo. Así que todas las demás páginas estaremos renderizando dentro de estos dos componentes. Entonces hay dos componentes que necesitamos crear ahora, el d Nerva y el pie 3. Navbar y pie de página: Así que después de instalar puedes volver a tu p. así que definitivamente va a ser plan porque no estoy cargado ninguna página en ella. Entonces estos son los que vamos a usar más adelante. Estas son las páginas que vamos a estar creando. Necesitamos la página de inicio, la página de contacto, la página de blog diferente. Entonces necesitamos los detalles del blog y crear blog. Entonces, antes que nada, necesitamos nuestro Nerva y nuestro pie de página. Si verificamos ahí. Entonces si comprobamos ahí, tenemos nuestro nub tenemos la búsqueda y el nombre del logo y las otras cosas, y tenemos nuestro pie Ese es el que vamos a estar bajo. Así que todas las demás páginas estaremos renderizando dentro de estos dos componentes. Entonces hay dos componentes que necesitamos crear ahora, encabezados Nerva y el pie Entonces para empezar con eso. Entonces prefiero todo junto en la pantalla, en primer lugar, estará en un aislamiento de visualización relativo y cuando la pantalla es un poco grande, el pico la presa p es horizontal verticalmente el relleno sería cero. Si el tamizaje pequeño. El relleno será de ocho para todo el lado y el fondo debe ser blanco y otras cosas así. Así que también exhibo flex también. Entonces flex menos una y otras cosas. Estos son solo básicos los descaros de menos seguir adelante. Entonces necesito crear mi final ahí está nerve.sx, y mi foto Entonces yo reacciono, si estás usando react tienes que importar todo para poder llamar a estas funciones fuera de esta reserva en particular, tienes tu índice índice punto. Esto le permitirá llamar a este dos componente o cualquier otro componente que esté dentro por favor en cualquier momento. Así que básicamente exporta cada dos componentes ahora. Entonces dentro de mi número, puedes escribir este comando. Si ha instalado, hay una estación de ins que necesita restaurar para reaccionar gastado. Entonces voy a poder hacer lo que estoy a punto de hacer ahora. Eso es lo siento, RSC. Entonces esto te ayudará a crear la página para que hagas eso. También puedes hacer lo mismo aquí también en tus alfareros quizá puedan trabajar en nuestro Veamos nuestros componentes. Estamos internando estos dos componentes ahora, nervio y el router Lo siento. Bien. Entonces Nava, Entonces estos dos digamos que tal vez van a estar mostrando ¿Puedes ver los dos componentes que ya están mostrando en nuestra página de reaccionar Entonces en nuestro principal necesitamos envolver este principal juntos en un router para que podamos enrutar a través de diferentes páginas. Así que acabo de agregar este router del navegador de la reacción que instalamos el tiempo y lo armamos para que cada vez que estemos enrutando a través de páginas, podamos Cuando hagamos clic en una página en particular, seamos capaces de apresurarnos a esa página e ir a esa página sin ningún error. Entonces ahora podemos ver que nuestro bar está trabajando un trabajo inútil. Entonces solo necesitamos implementar algún diseño en él. Entonces para empezar a empezar. Sólo voy a repasar algunos códigos. Creo que tienes alguna idea al respecto. No solo sigo el código muy simple que voy a ir escribiendo algún código complejo, simple script gamma el acto. Voy a estar manejando alguna explicación si es necesario. Necesito crear un objeto para tener un los enlaces en él para llamar catión. Entonces básicamente estoy declarando el nombre de un enlace en particular y el enrutamiento Esa es la página a la que quería enrutar. Por ejemplo, quería enrutar al spot de la página. Quería hacer una ruta al spot del blog. Entonces así es como básicamente va a ser por ahí. Entonces sólo voy a copiar esto. Entonces eso es por lo que voy a hacer. Eso también. Así que solo agregué otros como spot de esta manera ella. Ahora he creado el enrutamiento del lado del pitch, pero así es como quiero que se enrute a diferente pitch. Así que no te preocupes. Voy a mostrar cómo vamos a enrutar a una página diferente. Entonces, a continuación, necesito crear una función para el diseño responsive para que cuando sean pieza. Por ejemplo, ahora, comprueba esto. Cuando la app está en un tamaño más pequeño, quiero que muestres este botón y puedas atravesar estas páginas Entonces necesito crear una función para eso para que cuando llegue a ese estado en particular, lo demostremos. Entonces necesito agregar el. Necesito ingresarlo para que pueda usarlo. Entonces dentro de esto necesito a d malo de la lo malo de la Así que este enlace necesita ser importado desde el si tienes algunos symptos en él, eres capaz de importar esta cosa directamente por la pestaña que tienes que importar tienes que poner en ciclo latón Desde el ático Así que este será el logo, el logo para la app, este logo en particular. La forma en que lo estoy envolviendo en enlaces para que cuando haga clic en el logotipo desde cualquier página, pueda enrutar de nuevo a la página también. Así que déjame ponerle estilo a cada una de ellas. Estoy haciendo arreglo para que sea el Na siempre estará en la cima, incluso cuando estoy scling Naver, solo existimos en la página Entonces para el enlace a significa que cuando hacen clic en él, donde quiero así que quiero saltar. Así que déjame darle un poco de estilismo también. Y para el nombre de la clase de imagen el yo debería ser el y el logo en sí, el logo en sí. Necesito importar. Este es el logo que quiero usar y tener exportarlo aquí para que pueda llamarlo desde cualquier lugar. Entonces solo necesito exportarlo. Déjame llamarlo logo aquí. Entonces, ¿puedes ver importar automáticamente Eso es importaciones de semental visual para mí? Así que vamos a comprobar tal vez esto realmente está funcionando nuestra aplicación. Puedes ver que tenemos el logo aquí. Por lo que es seguir siendo el n la barra de pandeo y los otros enlaces. Entonces necesito crear el botón también para que cuando se levanten usando un formulario móvil, así se aplicará el botón. Entonces eso es lo que quiero crear ahora. Entonces necesito el icono, ese es el icono de punto, ya sabes. Uh este icono D. Entonces básicamente, va a estar en, puedes consultar los íconos ero. Hay muchos íconos que puedes ver esto para que puedas copiarlo y simplemente importarlo a tu app. Pero antes que nada, antes de importarlo, tienes que instalarlo en tu proyecto. Eso significa este icono de cero primero, cópielo y pegarlo en esta cosa. Vas a ver éste. Entonces tienes que importarlo primero a través tu terminar antes de poder evaluarlo o usarlo. Entonces tengo que importar importación y el segundo es X M para abogado. Entonces puedo estudiarlo también. Lo que esto simplemente significa que cuando es grande, que la pantalla es grande. Estos iconos deberían estar calentando. Particular debe ser la calefacción. Pero cuando la pantalla es más pequeña que grande, esta ambas una Déjame solo estudiar click, quiero realizar una función establecida móvil a true. Entonces es tan sencillo como eso así que vamos a comprobarlo. Veamos por qué esto no se muestra. Lo siento, hay un mal así que es pasado. Sí, ese es el problema. Entonces puedes ver que el botón está apareciendo. Entonces, cuando la pantalla es pequeña, el botón se muestra cuando la pantalla es grande, el botón no se muestra. Eso es principalmente uno que se quiere lograr con eso. Entonces anidan, necesitamos crear nuestro. Entonces inicialmente, quiero que la búsqueda sea calentando desde cualquier cosa menos que media. Entonces de medio hacia arriba, el tema de la pantalla que es el zapato de búsqueda. Entonces no quiero que se muestre cuando la pantalla es pequeña. Entonces eso es principalmente lo que quiero lograr. Así que vamos a comprobar cuando mostramos y esta nuestra búsqueda en la pantalla más pequeña no es para mostrar sino en las más grandes para mostrar. Eso es principalmente lo que daña. Entonces ahora necesitamos crear nuestros enlaces. Entonces nuestro Así que pudimos lograr estos días, lo que queremos decir nuestros nuestros vínculos. Entonces eso es lo que vamos a lograr ahora con eso. Entonces otra d. entonces a partir de la d vamos a mapear el objeto de navegación que creamos la otra vez. Entonces para cada uno de ustedes quiere un enlace. Entonces definitivamente necesitas poner la llave, que son los artículos. Es decir cuando hacen clic conecta el ítem punto H Necesitas darle estilo también. Por lo que el texto debe ser de forma pequeña debe ser c debe ser semi negrita, principal. Entonces, si no entiendes algo de esto, puedes simplemente ponerle esta cosa, tu cursor sobre ella, tu cursor sobre va a mostrar lo que está cumpliendo C. Así que para liderar seis simplemente significa línea en eso es vertical. Eso es 1.5. Así es como es en CS. Cuando termine de encima quiero el color primario. Quiero que el color sea primario. Entonces estos son los nombres que quiero ser es para estar mostrando maybes funcionando bien Ya están mostrando lo que está colado juntos. Veamos qué podemos hacer estilizando el default. Nombre de clase, Los robos A deben ser catamarán. No recuerda los robos que se ingresan en el momento. Seguimiento, amplio. Entonces este rastreo blanco simplemente significa un espaciado entre letras. Entonces, cuando la pantalla es grande, quería mostrar. Entonces, cuando la pantalla es grande el programa muestra este color de enlace. Entonces veamos el color del texto inicial Pero recuerda, por qué hacemos clic en esto. Este no está mostrando la lista de esta cosa como esta. Por qué hacemos clic en esto, mostrando la lista de funciones como la lista de páginas a las que podemos enrutar. Para lograrlo para lograr eso después de nuestro, necesitamos crear un diálogo. Entonces, para que utilicemos este diálogo, tenemos que ingresarlo. Para que podamos acceder a este diálogo desde también está en una reacción. Nacimiento del ceñido el señor malo el el el pan del nacimiento de la gir Así que esto, hemos podido lograr crear nuestros números con éxito Entonces se ve cambiando a uno pequeño. Entonces el nido es solo nosotros para trabajar en el pie de página. Entonces nuestro destino está funcionando. Entonces nuestro pie de página, tenemos que trabajar en ello. Entonces para nuestro pie de página, solo necesitamos el proceso muy simple, no necesitamos importarlo en especial. Una sección que está agotando todo, este div con el nombre imputa para suscribirse y algunas otras cosas ahí Entonces sin apenas comencemos. Voy a estar usando puedes dejarlo como D pero puedes usar la sección en su lugar. Sección dentro de la sección, tenemos D. Digamos carta noticiosa diaria. Entonces después de eso, tenemos una forma. Así que vamos a darle estilo para que todo lo que hacemos tenga sentido. Vamos a verlo. Entonces esto es vamos a darle estilo y a ver cómo nos vamos a quedar. Así que echemos un vistazo a la pequeña salida real en el sobre el W. S en realidad lo que queremos que sea. Pero solo trae algún pequeño anuncio no lo es. No está lleno como estos otros, así que solo necesitamos trabajar conectados a algún pequeño toque y va a ser exactamente lo que queremos que sea. Sí, así que vamos a comprobar de nuevo por qué esto está apareciendo en una especie de tonto y vamos a comprobar nuestro índice o CC probablemente sea este o éste que no eliminamos la otra vez. Entonces probablemente sean ellos los que están cruzando el con nuestra página. Entonces dejémoslos y etiquetemos este que es t está funcionando. Así que hemos podido lograr nuestra barra nerviosa y nuestro alfarero. Entonces lo siguiente es solo nuestra página Esa es la página ahora. Así que el slider, podemos anidar y ver diferentes imágenes, los iconos de las redes sociales y los diferentes post del blog, el último post y engancha el formulario de contacto y el. Esto va a estar logrando el siguiente video, estado. 4. Componente y página de inicio (a): Entonces volvemos chicos. Entonces en esta siguiente parte, vamos a estar trabajando con nuestra propia página y algunos otros componentes que necesitan ser creados o para funcionar correctamente. He creado mi propio cinco mi archivo, y he exportado un centinpting su componente, sino páginas para que pueda llamarlo en mi Entonces puedo usar eso que he llamado home desde páginas y soy capaz de enrutarlo. Entonces si comprobamos el, ya ves que se puede ver ya está ahí. Entonces solo necesitamos agregarle un poco de código y hacer que funcione. Así que vamos a revisar los trabajos anteriores. Se ve aquí por allá en la página de la que queremos seguir. Tiene un deslizador. Este deslizador es el componente por sí solo, el independiente. Tiene este código, tiene diferente blog. Tiene una sección de blog diferente. Tenemos la política, el negocio, la tecnología, el deporte, el entretenimiento, y cada uno de ellos tiene sus propias tarjetas diferentes. Tenemos el botón y el leer más. Entonces esta tarjeta también es un componente al que podemos llamar desde diferentes. No necesitamos escribir copiar y pegar en todo. Solo necesitas crearlo como componente y repetirlo para otros. Entonces necesitamos esta página de contacto. Esta página de contacto también es un componente. Voy a explicar por qué es un componente. Es un componente porque lo estoy llamando dentro de su página de inicio, y también tengo una sección llamada contacto, que es lo mismo. Entonces no quiero tener tal vez después de escribir el código para el contacto. Ahora volveré a esta lager y escribiré otro código para el contacto Así que voy a crear esta forma como un componente, y lo llamamos dentro de dos de ellos. Creo que eso debería funcionar bien. Entonces eso debería ser para nuestra página de contacto, nuestra propia página en la que vamos a trabajar. Entonces, para comenzar, permítanme comenzar creando nuestro componente slider. Te voy a dar el nombre llamado mi slider. Es mi trabajo en él. Entonces para ello, necesito instalar el componente slider que vamos a estar usando en react. Hay un slider particular que vamos a usar en reaccionar para que no estemos escribiendo nuestra propia diapositiva porque esto es solo un hombre no como una empresa o un blog fuerte. Quiero lo básico sobre cómo blog así que sea importante necesito poner el enlace también porque vamos a estar teniendo estos íconos ahí. Entonces quiero hacer click en él, encamina a un particular la página de redes sociales del bloque. Bien. Además, necesitamos importar un CSS particular que siga el control deslizante y diferentes iconos. Ese es nuestro ícono de Facebook, ícono de estagrama, ícono, en ícono y ícono de Twitter Entonces es el viejo ícono de Twitter. Hay unos nuevos X. Así que solo vas a estar usando el viejo solo para esto. Estas son las CCs que se necesitan. Así que necesitaba ser utilizado con este componente deslizador. Así que a continuación necesitamos tener un objeto o una matriz una matriz que contenga el objeto de cada botón que vamos a tener, ya sabes, como una matriz es un aria buttons o tiene dos componentes principales dentro del objeto. Entonces el área tiene diferentes objetos. Entonces cada objeto del nombre y el HR. El HF significa el enlace a cada uno de ellos. Entonces, si hago clic en este Facebook ahora, debería llevarme a una página de Facebook en particular. Entonces después de hacer clic en él. Entonces debería tener un nombre. Entonces el nombre contendrá el icono que necesitaba y el enlace estará debajo de la H. Así que va a ser voy a llamarlo costo Bien. Entonces estoy usando el icono. No estoy usando un icono de error ahora estoy usando el icono hay diferente icono que puedes usar. Icon también es una biblioteca muy genial que puedes consultar. Y puedes buscar diferentes iconos que necesites. Y después de buscarlo como Facebook, simplemente puedes hacer clic en él y copiar el código hacia fuera. Entonces después de copiarlo después de colocarlo dentro de este espacio. La otra forma en que puedes llamarlo es venir aquí y llamarlo así es la Fase F. Así que estas son quiero llamarlo inicialmente antes de llamarlo dentro de la principal. Entonces no voy a estar poniendo ningún enlace alguno. Pero sólo con fines de práctica. Déjame solo poner déjame ver por defecto para poner tal vez google dot Entonces quiero cada vez que haga clic en esto. Sólo voy a copiarlo y pegarlo. Yo solo voy a copiar y pegar como para otros y solo voy a cambiar el Así que voy por Twitter YouTube Insta gramática y Linden Entonces lo que en vez de poner WW en u google.com pongo web dot Facebook, twitter.com, tube.com Instagram.com y link in.com no se relatan a una cuenta en particular solo por defecto Tuk en cuenta solo por Lo siguiente que queda son los datos que procesará nuestro slider. Ya ves esta imagen, la primera foto aquí está mostrando noticias de última hora y luego tiene los detalles. Esto es igual que por defecto y esto hasta el momento. No tengo beatle para poner ahí. Entonces solo pongo esta IP algo ahí para shocate algo estar ahí algo va a estar ahí dentro de poco Así lo hace para los deportes una estrella estar moviéndose de un ángulo a otro para cada uno de ellos. Entonces queremos poner estos detalles dentro de un objeto así una matriz de objetos. Entonces el nombre será llamémoslo slider slider data. Creo que eso está bien. Entonces va a contener URL de la imagen en particular y también la descripción. La descripción, simplemente estás demostrando eso, bien, esta imagen de la que está hablando tal vez noticias de última hora o está hablando de las últimas noticias deportivas, tal vez Chelsea entre Mao y Chelsea, cualquier cosa cualquier club de fútbol favorito o entre tecnología, mejor esta es la última tecnología que eso está afuera ahora. Entonces eso es lo que simplemente significa éste. Simplemente va a ser como un puntero a Así que para poner algo ahí. Sólo voy a encontrar un enlace aleatorio en Internet. Así que solo puedes verificar el que se ajuste perfectamente a lo que quieres hacer. Tal vez noticias de última hora, definir imagen sobre deportes, imagen fina en noticias de última hora, imagen sobre tecnología, imagen sobre entretenimiento, y así sucesivamente y así sucesivamente. Así que sólo voy a copiar una pieza de la que ya tengo. Entonces después de esto, yo las fotos y los detalles dentro de ella. Entonces el siguiente usa este componente deslizador ahora. Así que solo voy a eliminar este componente entre corchetes y llamar al componente slider el más grande. Así que los componentes slider dentro del componente slider, voy a tener los datos del slider. Voy a mirar a través del deslizador de datos deslizador mapa de datos. Entonces voy a tener una propina el dev contendrá la clave. Voy a tener imagen. Entonces, para que la imagen sea diapositiva D imagen de punto. Para comenzar con esto Así que la estrella necesitamos un nombre de clase. Eso es ahora. Tenemos que estar saturados. Eso significa que estamos cambiando un poco la calidad para sacar algo de belleza, no solo traer normal directamente de Internet. Quería estar un poco profundo saturado por 150, así podemos verificar ese CSS normal. Esto es lo que es el punto de inicio C. Entonces el objeto debería cubrir Así que tenemos otro div dentro. Tenemos nuestra etiqueta H one. Entonces el H uno contendrá la descripción del up que es nuestra descripción del punto de datos de control deslizante. Entonces después de eso, el siguiente será nuestro otro que contendrá el ícono de cada una de las aplicaciones para cada una de las cosas de redes sociales que queremos t. Así que tenemos que marcar icono también iconos que hace icono dentro. Por lo que el icono estará en formato link. Entonces tenemos un objetivo clave en blanco para que al hacer clic en él, se abrirá a una página completamente diferente. No eso va a estar abriendo dentro de esa misma distancia. Y ahí es donde queremos hacer icono. Por lo que también tiene el nombre que los puntos del icono. Ahí es donde va a mostrar el logo. Entonces el logo se va a mostrar dentro de este lugar. Entonces necesitamos darle estilo a algunos de nuestros trabajos. Vamos a darle estilo a este H uno. Oh. Entonces probablemente el problema con esto es que abrimos otra def con otro div Se supone que debes abrir esto dentro este particular de que hemos abierto. Entonces eso es lo que realmente está causando el problema. Entonces, lo siguiente que tenemos que comenzar es este estilo particular. El estilo para el enlace. Entonces tenemos que iniciar este particular de también Así que para que veamos esta participación, tenemos que llamarlo dentro de nuestra propia página porque si vamos a esta página ahora, obviamente, nada va a mostrar Entonces tenemos que llamarlo dentro nuestra propia página para que lo muestres. Entonces, antes de llamarlo, necesitamos trabajar en esto en la página, entonces, ya sabes, este texto se esconde bajo los nervios. Entonces tenemos que trabajar en ello y hacerlo un poco grande. Y la pantalla debe ser grande debería cubrir la pantalla. Entonces después de esto, veamos si podemos llamar al nervio directamente ser el deslizador de este lugar. Entonces ves como lo llamamos, se nota directamente pero hay un problema ves nuestro terminal mostrando que hay un problema. Entonces el tema probablemente estará dentro este lugar sin puertos esto afuera. Entonces creo que esto debería resolverlo y veamos. Bien. Bien. Entonces necesitamos instalar esto ¿verdad? Recuerda, P I usando el enlace MPN para descargarlo. Icono derecho. El otro que estamos usando la otra vez fue icono de error. Entonces acabo de presentar este también que puedes ver cómo puedes usar varios íconos. Puedes usar er. Puedo decidir usar uno. Cuando estés trabajando en los proyectos principales, solo decide usar uno para la historia considera que puedes usar varios icon. Hay er, hay fuentes I. Hay muchas de ellas que pueden usar. Entonces solo depende de cuál quieras usar exactamente. Entonces esto definitivamente debería resolver todo el error. Resplandor. El problema es porque esto ahora está dentro del co blockt podría ser molesto en algún momento Ahora tenemos nuestro icono ahí. Notemos algo. Esto no es mostrar el icono y mostrar el nombre que ponemos ahí. Nuestras fotos no se muestran. No se puede ver la imagen. No está cargando. Veamos qué está cruzando eso En primer lugar, se supone que esto es igualmente brise definitivamente trabajo Lo que está retrasando nuestras fotos de mostrar lo llamamos URL EMG A ver eso debería funcionar ahora. 5. Componente y página de inicio (b): Pero no algo, somos capaces de no estamos viendo el siguiente botón. Esos son los estos botones ahí. Entonces lo que podemos hacer entonces es importar los ajustes particulares que podamos usar aquí. Para tener que introducir algunos ajustes. Entonces lo llamamos vienen ajustes o puedes llamarlo configuración de control deslizante o cualquier cosa. Entonces va a ser una variedad de configuraciones. Entonces las decenas necesitan ser introducidas a pas Lo siguiente es esto y la tarjeta. Esto definitivamente está dentro de nuestra página de inicio. Solo escribamos un poco de código en nuestra propia página y luego nos movemos en eso. Dentro de la sección, sección tenemos uno Echemos un vistazo a esto. Entonces, ¿qué es lo siguiente que tenemos que hacer? Entonces necesitamos crear esta sección diferente del bloque. Entonces después de la sección, necesitamos crear otro di. Separar uno. El primero es la política política como el primero. Entonces necesitamos crear un separado de ese caso todos estos dis, como todas estas cartas en su interior para que incluso cuando sean más que esto, lo sabrá. Ese div sigue siendo parte de V uno. Eso es política pero separado de los demás. Dentro de este lugar ahí es donde vamos a tener este bloque que vamos a crear un componente más adelante. Déjame quedarme con esto ahora. Bien. Entonces después de esto, tenemos un bot botin que lee más bot. Entonces solo lee bot va a estar dentro de un enlace que. Entonces para que usemos eso, supongo, tenemos que importarlo. Entonces déjenme decir definitivamente va a ser al blog vamos a trabajar con nuestro n. Para la política, este es el vínculo para la política. Hemos creado esto es definitivamente lo que va a ser después. Entonces si nos damos cuenta tenemos una flecha una. La flecha debe importarse desde el icono o icono de flecha. Para que puedas elegir a quien quieras. Tenemos que darle estilo a esto también más Vamos a darle estilo a nuestro botón también y te daremos algunos Así que el icono que vamos a estar usando vamos a estar usando Así que puedes iniciar el icono también decir margen izquierdo. No queremos que te quedes unido con el nombre, alguna parte. Así que las tapas emergentes que rm juntas. Sree 0.5. Así que vamos a comprobarlo. ¿Puedes ver? Ya lo tenemos. Pero debido a eso no hay ninguna tarjeta entre ella ahí es donde todo está encerrado. Entonces tenemos una tarjeta en particular, la tarjeta que se suponía que tenían que tener que no va a verse junta. Va a estar en un lugar separado. Entonces necesito repetir esto también para. Eso es para los negocios, la tecnología, el deporte y el entretenimiento, lo que voy a hacer ahora. Entonces repito lo mismo para los demás. Estas ideas simplemente significan identificarlo libro de identificación separado libro de identificación. Cualquier libro de identificación que dañe es una sección separada por sí sola. S que ahora tenemos diferentes secciones. Necesitamos crear la tarjeta que se usaría. Esa es esta tarjeta. Tenemos que crear esta tarjeta. Lo primero que tenemos que hacer es crear un componente para la tarjeta que la importemos a este lugar. Entonces el componente de la tarjeta estará usando props props en react Probablemente solo esté pasando algunos valores dentro de un componente en una página separada Entonces eso es lo que solo vamos a estar usando. Necesito crear otro archivo llamado tarjeta de blog. Entonces como Juez. Entonces tenemos que declarar que el componente va a ser un cierto props Entonces, ¿cuáles son los apoyos que necesitamos que se acepte? Necesitamos el rumbo. El empatado para saber si revisamos aquí. Tenemos la imagen, esta es la adición del título dos, la descripción. La adición y los tipos que es diferente. El título puede ser el título es tecnología. Por lo que la adición está fuera para navegar cliente durante un negocio seguro descripción es los datos y el tiempo. Entonces eso es principalmente lo que necesitamos tit dos descripción en nuestra imagen, UR Auto. Bien. Haga clic. Cuando hacen clic en él, necesitamos realizar una acción específica. Así que bajo clic también y tiempo. Estos son los siete principales apoyos que usaremos. Entonces puedes negar el mensaje de error gin faltando la validación de prop Entonces realmente no necesitamos fechar ese es otro tema completamente. Entonces necesitamos crear nuestro de inside. Necesitamos crear una etiqueta de imagen. Por lo que la C será esta imagen UR. Después de eso, necesitamos otro de. Necesitamos otro de platicar sobre el Tyson Bien. Después de eso, necesitamos otro hay un párrafo hablando de la descripción. Después de esa inmersión dentro del div, necesitas un párrafo dos párrafo. Uno hablando del auto. Y el segundo hablando del tiempo. Bien. Y se señaló ese formato de tiempo. trabajar en ello Hay que trabajar en ello para que cuando tengas tiempo, no te equivoques no va a estar mostrando datos no válidos porque que formatear la hora. Hay que formatearlo a cómo se supone que debe mostrar. Pero principalmente estamos usando un dato por defecto. En realidad no estamos obteniendo un tiempo de la base de datos ahora. Entonces simplemente lo dejamos así por ahora. Entonces dentro dentro de este párrafo, necesitamos el span. Entonces es dentro de este lapso que tenemos el tiempo. Entonces tenemos que darle estilo obviamente. Porque si comprobamos no lo podemos ver ahora porque lo hemos sacado. Entonces plan necesitamos que sea flexible para ser precisos. ¿Qué? Entonces, de este lado, solo puedes importarlo junto con esto. Así que dentro de uno de nuestros t, puedes simplemente salir. El uno es que si la moneda podría estrechar esta es la carta que está mostrando la tarjeta, pero no se muestra apropiadamente porque necesitamos pasar algunos valores en ella. Necesitas dispersar algunos apoyos en él. Y para que le pasemos algunos apoyos daños debemos tener algunos datos para probar con esto Por eso ya tengo estos datos hacer GSX. Entonces estos son los datos que solo estamos usando para probarlo. T ejemplo de blog diferente. Es la misma repetición, pero solo me gusta usarlo para probar pendiente de retorno que vamos a vincular a las facturas de incendios y solo probar apropiadamente. Entonces necesito importar estos datos a mi reactor aquí arriba. Así que importo todo desde el lado mejor. Entonces tengo que mapearlo dentro de este lugar. Entonces voy a llamar al primero ahí está el polwsp de noticias políticas dentro de él, voy a superar Entonces voy a pasar voy a mapearlo a través de él y llamarlo publicar el índice. Entonces dentro de este lugar, la clave será índice. Entonces voy a pasar los datos. Esa es toda la información necesaria para que se pase este post de convocatoria. Sí. Entonces el click bajo click por ahora solo va a estar vacío. Permítame decir que no realice ninguna acción. Digamos que esto tal vez realmente funcione en nuestro P. Guau. ¿Ves que estaba trabajando a la perfección? Entonces probamos con nuestros datos forzados. Necesitamos probar la tecnología empresarial. Entonces es principalmente lo mismo que vas a hacer copia esto. Este derecho. Ir a la política. Ir a base de negocios y cambia la política a los negocios. Bien. Se puede ver. Ahora tenemos un bonito bloque para como una bonita página de blog. Entonces ahora, notamos si revisas algunos sitios de bloques, no muestra todos los bloques a toneladas. No se muestran todas las noticias a toneladas. Entonces después de mostrar algunos de ellos, solo colocamos este botón para que cuando borremos este botón en una ruta a la página adecuada que necesitábamos ser. Entonces, para que hagamos eso, tenemos que rebanar los datos. Hay una función en los javascripts que están permitidos para dividir los datos Entonces, donde cortes puedes deslizarlo de cero a 30 a cuatro de no cero a cinco s los cinco datos que hablan. Eso es principalmente lo que es. Entonces vamos a ver. Entonces básicamente, solo vamos a estar recogiendo los primeros tres o los primeros cuatro datos Entonces para éste, solo dice rebanada. 04. Sta pongo en lugar de st Comprobemos ahora en lugar de todos los seis datos que solo muestran cuatro pueden reducirlo al Sí Así que vamos a una historia. Para que puedas copiar esto y pasters también. Así que eso las repiten todas. Entonces lo siguiente es la página del contador, que vamos a tratar junto con alguna función madre en el siguiente video. 6. Página de contacto, detalles del blog: Bienvenida por chicos. En esta sección del curso, estaremos creando este formulario de contacto que va a ser un componente al que vamos a llamar en esta parte de esta página de inicio y también en la página de contacto. Después de eso, nos ocuparemos de ver detalles. Es decir cuando hacemos clic en este lugar, queremos que vea los detalles del blog y podremos presionar back para retroceder. Entonces en ella, vamos a estar teniendo el tema, los datos publicados, y alguna información al respecto y el auto que esa persona lo publicó. Entonces después de eso, estaremos trabajando con amigos, páginas muy diferentes de cada sección. Entonces tendremos la página spot, la página política, la página de negocios, y la página de tecnología y entretenimiento. Entonces, antes que nada, trabajemos con nuestro contacto cuatro para comenzar, tienes que crear un archivo GSX de contacto dentro de tu carpeta de componentes Entonces después de escribir la RF CU. Sting tienes esto en tu sistema. Entonces tenemos que crear nuestro Dpcpris todo. Lo que necesitamos ahora es este encabezado y diferente cuadro de texto con el bot adentro con otra información consignando el interior del cuadro de texto, tenemos dentro de esta profundidad, tenemos otro profundo por dentro Entonces eso es profundo que comprendemos esta caja naranja. Entonces dentro de nuestro H uno, H uno que dice enganchar. Después de eso, tenemos la forma Así dentro de la forma, tenemos un di di, otro di. Entonces tenemos una etiqueta que será el primer nombre. Nombre de pila. Después de la etiqueta, tenemos la imputa que será el área de texto Dentro de la entrada, tenemos la y colocada sobre ella. Entonces esto imputa va a estar dentro del también. Entonces después de esto, solo necesito darle estilo a todo porque u uno solo va a ser copiar y pegar a otros aspectos. Yo solo voy a ser copiar y pegar en él, copiar y pegar en él a los otros porque tenemos una estructura similar y un diseño similar. Bien. Entonces después de crear esto, lo principal es solo copiar esto y pegarlo y duplicarlo. Como principalmente lo mismo que va a estar ahí. Así que por último simplemente recreando esto y estamos poniendo estos dos para que puedas sion así Entonces tenemos este correo electrónico uno y mensaje uno. Entonces cambiamos al apellido. Entonces puedes decir esto. Después de eso, necesitamos nuestra sección ma esa caja ma. Pero correo electrónico podemos copiar y pegar éste y simplemente cambiar algo en nuestro diseño. Entonces podemos copiar esto y pegarlo, así no va a estar en este yo va a estar afuera. Necesita uno separado. Sí, señor, se supone que deben ser ellos. Sí. Entonces cambiamos esto por correo electrónico. Sí. Entonces necesitamos editar este lugar y ponerle un poco de estilo. Necesito estudiar d así que solo para dar seguimiento a lo que está pasando aquí. Podemos importar esto a nuestra página de cómo y luego hacemos un seguimiento tal vez y veamos qué estamos haciendo. Entonces antes del último tipo, podemos ver contacto contacto. Bien. Supongamos que nuestro navegador reposiciona macetas. Sí navegador Comprobemos nuestro para tal vez. Sí. ¿Se puede ver? Entonces ya tenemos los engancha el cuadro de texto, la etiqueta y la m. Entonces el siguiente es solo el cuadro de mensaje. Ese es el té Entonces tenemos portando algunos detalles al respecto. Entonces para el texto para el mensaje es similar a Este correo electrónico hace eso en lugar de introducir cambios en el área de texto. Entonces eso va a ser un poco grande. Entonces cuando el ID y las otras cosas son similares. Nosotros solo tenemos la regla para que sea déjame mostrarte. Entonces tenemos la regla para que este lugar sea más grande que otros para el mensaje. Entonces eso es. El siguiente es que necesitamos el botón necesitamos el botón enviar y estos dos detalles. Entonces para el fondo, necesitamos el DV después del plegado necesitamos el TVA el lado de la red es, necesitamos un botón y que manden Tenemos que darle estilo con sustancias. Comprobemos esto. Y así tenemos un botón aquí. No solo necesitas las dos cartas restantes debajo. Eso será después de la caída que vayamos otra inmersión debajo de ella. D otro d. Ahora son dos inmersiones diferentes. Dentro de este dip tenemos dos dips diferentes. Entonces solo vamos a hacer primero el primero. Dentro del primer dip, necesitamos un SVG, SVG. Sólo voy a copiar una parte SG dentro de ella. Y después del SVG, necesitamos otro de te voy a dar algunos detalles. A H six dice. Y tenemos la etiqueta P que es un número más. Sólo voy a poner esto porque no quiero poner un cierto número ahí. Déjame copiar y pegar lo profundo dentro de este lugar. Entonces esto es SVG. Entonces necesitamos darle estilo a este lugar. Entonces para la segunda inmersión también Luego bucear que lleva el SVG. Este G es principalmente un teléfono, déjenme solo demostrar que ya lo tenemos. La parte SG SVG que importamos es este ícono de teléfono. Se puede utilizar una serie de iconos. Creo que eso es lo que he usado antes pero. Simplemente continuemos en lugar de G solo puede importar un ícono de teléfono de tal vez ícono o cualquiera para esto Así que lo siguiente es simplemente copiar esto y simplemente replicarlo nuevamente, hasta Entonces va a tener un SVG diferente hace para el correo electrónico. Así que de nuevo, en lugar de usar este SVG, podemos usar un icono diferente de can use en lugar de SVG. El clip SVG, entonces ni siquiera sé que lo uso. Pero creo que un icono es más recomendable que G. Así que cuando estés viendo esto, no te molestes por copiar y solo ve directamente al icono yo solo y lo pongo dentro de este lugar. Entonces para este, solo puedo usar el contacto. Creo que eso debería hacer todo lo que tenemos que hacer aquí. Así que vamos a comprobarlo. Sí. Eso es típicamente lo que tenemos que hacer. En lugar de visitar sólo hay que poner un número aleatorio. Me está mirando de alguna manera. Número eléctricamente aleatorio. Creo que hemos terminado con la página de contacto. Así que solo necesitamos te esto también en nuestra página de contacto. terminamos con el formulario de contacto, necesitamos poner esto en nuestra página de contacto así. Lo mismo. Como lo llamamos dentro de nuestras propias páginas que vamos a llamarlo dentro de la página de contacto. Entonces llegamos a nuestras páginas y hacemos clic en crear nuevo archivo y lo llamamos contacto página seis. Como de costumbre, hay que exportarlo en el índice a G dentro de este por favor Así que dentro de este lugar, solo llama a los contactos desde el componente. Después de esto, llegamos a nuestra x y la exportamos aquí afuera que el enlace cada vez que hacemos clic en el enlace de contactos contacto va a abrir esta página. Eso es. Esta salida. Entonces eso debería hacer es, vamos a ver, a lo mejor va a funcionar. Entonces estas son página. Vamos a hacer clic en contacto. Ya tenemos página de contacto. Así que no necesitamos volver a crear el formulario en nuestra página de contacto, solo necesitamos llamar al componente. Así que la próxima vez es solo la función click de la z. Así que recuerda en nuestra tarjeta, ya tenemos una función llamada open on click. Entonces solo necesitamos regresar a nuestra casa donde sea que tengamos esto al click que pasamos no, tenemos que pasar una función ahí. Entonces la función que solo necesitamos pasar ahí es navegar. Tenemos que usar loose navigate dentro un componente react o una función react, se llama nosotros navegar. Entonces, hagamos eso en un segundo. Bien. Entonces déjame explicarlo vívidamente otra vez, lo que tenemos que hacer Entonces lo que pretendemos que hagas es que cuando queremos usar el estado como función costo. Entonces es por eso que hacemos clic en este Así que estar usando ubicación de uso, es decir, reaccionar componentes, usar ubicación y usar navegar. Así que eso fue sencillamente un gancho devuelve esa es la ubicación actual de los objetos Esto se puede utilizar. Esto puede ser útil si te ha gustado realizar otro efecto de diapositiva cada vez que la página actual cambia de ubicación. Entonces eso significa que podemos pasar los datos en una página actual a otra página que uso esta ubicación de uso. Puedo desde esta página cuando hago clic en otro enlace dentro de ella, puedo pasar algunos datos de este lugar a otra página Entonces que mis notas me parezca claro ahora, pero cuando empecemos a escribir las vainas sea más claro. En primer lugar, necesitamos nuestra página que se llama detalle de blog. Ese será detalle de blog. Eso sería una página. Estamos creando esto para que no estemos creando nueva página para cada detalle que queramos ver. Solo tenemos que crear uno único y luego podemos enrutarlo para que otros lo usen. Entonces dentro de estos detalles de vista, s para los jardines es cenar a mi lado actualmente en el momento en este punto, por lo que necesitamos importar algunas cosas. Entonces como dije antes, vamos a estar usando use navigate, use location y state. Entonces es solo para pasar datos de una página a otra. Entonces, antes que nada, necesitamos dentro de este lugar costo igual para usar que las entradas de funcionamiento en s sobre el yo por allá. Así que fue el navegamos y también necesitamos costo que usé ubicación. Entonces estas son las dos redes que vamos a estar usando. Entonces usan navega a cuando hago clic en el botón Atrás para navegar a la página anterior y usar la ubicación es como los datos que pasé de otra página para que pueda distru lo puedo usar dentro de este Entonces yo dentro de esta página, yo decidiría , quiero que esto se vea. Para que cada vez que haga clic en los datos sólo va a pasar el valor dentro del cual me hace simplemente. Entonces dentro de los detalles del bloque, voy a diseñar las zonas. Voy a decir la imagen vía el título y la otra t. Entonces primero, necesito crear este tip, esto siempre estará ahí. Entonces dentro necesito otra imagen un tirón de imagen luego otro dip a H uno voy a comprender el título Este solo tengo que pasar ese punto de estado ¿Ya ves? Entonces necesitamos verificar estos datos y ver la variable que usamos que podamos convencernos a nosotros mismos. Entonces usamos imagen. Entonces cuando volvamos y decimos imagen como ahí para el arte puedes poner cualquier cosa esa imagen o cualquier cosa. Este será el empate estatal para que podamos llevar esto a los sitios donde podamos dar seguimiento a lo que estamos haciendo. Entonces la segunda vez que necesitamos es un p tags una etiqueta de párrafo que mencionamos la fecha en la que se publicó esto para decir publicado entonces tenemos nuestra etiqueta digamos más suave que necesitamos otra etiqueta como descripción del estado. Ese es un breve párrafo sobre el blog. Necesitamos de nuevo la etiqueta P que mostramos los detalles. Esos son los detalles sobre el Te acuerdas, Mr. Se supone que debe estar en el soporte de poli la diversión es como una variable. Entonces no puedes simplemente p así, 2000 para estar dentro del soporte de poli sstate el siguiente será hay detalles Te mostraré todos los detalles al respecto. Después de eso, después de este pgm después de esto, necesitamos un span necesitamos un botón como este botón para decir volver para que podamos navegar a la página anterior ver si hago clic en un blog, hago clic en volver atrás, volviendo a la página, volviendo a la página p de la que vengo. Entonces eso es lo que queremos lograr. Entonces podemos cerrar éste ahora mismo y decir span, pongámoslo dentro de un lapso. Así que dentro de un lapso tenemos que volver. Entonces necesitamos un butting pacular. Eso es este dis carrito chocando. Así que simplemente podemos obtener eso de nuestro acto en adelante. Entonces veamos a la izquierda. Está apuntando hacia la izquierda, ¿verdad? Entonces busquemos el que es ver este uso esto. Entonces solo copia esto lleva los nombres. Tenemos que poner aquí una función que al hacer clic clic. Entonces cuando acabo de hacer clic en WhatsHPF ahora, pones una que no es ninguna función debería ser Entonces después de eso, necesitamos otra licencia que le enseñemos el nombre del auto. Ese es el auto de esto para nosotros necesitamos esta línea. Entonces necesitamos el nombre del auto. Entonces para la línea, podemos simplemente decir HR, poner en lugar de esa, déjame simplemente poner un profundo entonces ese profundo ahora voy a decir der up, eso es border up, entonces voy a poner una prueba particular dentro del estilo. Entonces dentro de esto necesitamos otro. Entonces este que simplemente hay que hacer es navegar menos uno. Entonces Sp una función, tenemos que hacer esto navegar menos uno. Entonces, para ahora usar esto ahora, tenemos que ir a nuestro donde sea que estemos tirando de estas tarjetas. Entonces, además de eso, tenemos que hacer navegar. Tienes que und la navegación. Entonces necesitamos una función, una función llamada navegar igual a publicar. Entonces necesitamos un recuerdo otra vez un argumento para pasar dentro de él. Entonces no es el argumento que describimos. Entonces decimos navegar. Entonces esto reposiciona para manipular la URL Si si comprobamos esto, si vuelvo a una página ahora, y técnico esto hago clic en esta, es blog blog detalles entonces, hay algunos valores que se toman de esto como navegar cliente, entonces como navegar cliente para que pueda ver. Para que no tenga que poner esto dentro. Entonces decimos slash blog. Entonces estos detalles del blog que estoy escribiendo deben correlacionarse con lo que sea cuando vengo aquí deben correlacionarse con lo que sea que esté poniendo dentro de este lugar Entonces, cuando saque este ahora, detalles del blog, y lo llamo a cabo. Esto que estoy diciendo simplemente quiere decir, quiero navegar por bloque el detalle del bloque. Esta ID, esta columna ID que pongo significa que no es una página estática una dinámica que cualquier valor que este ID represente puede ser destruida, y luego podemos usar el valor Entonces eso es lo que estamos usando aquí. Entonces el valor que se pasa por el ID es lo que podemos destruir a través del estado y podemos usar dentro de este lugar Entonces solo continúo y así los detalles recortan esto. Ya sabes, si estás usando esto, debes usar este doblado el encabezado del poste. Y después de eso, ahora llamas al estado nosotros misma columna de venta, dices coma abro el corchete fríamente y digo Entonces esto es lo principal que necesitamos ahora. Estado fecha cculum post. Eso significa que el valor que se pasó lo pasas a los estados. Siempre que llamemos estado, podemos verificar fácilmente todos los valores que hay dentro de este post. Creo que eso está claro. Ahora, solo necesitas llamar a esta Función en cada aspecto que usemos null. Entonces muestra que estamos diciendo que no, tenemos que cambiarlo. Entonces solo selecciono todo a la vez y digo, supp es la función, tenemos que pasarla así Entonces cuando selecciono esto y verifico que son los cinco anders, correcto Yo uso control shift L. Así que control turno cuando seleccionamos cualquier cosa que sea nula dentro de este código, y luego puedo editar todo al mismo tiempo. Entonces si cancelo esto, puedo editar todo al mismo tiempo. Esta función realmente necesita un argumento post. Recuerda lo que estamos pasando de lado como post, para que solo puedas un post. Para cada uno de ellos, cada uno de ellos tiene su propio puesto particular. Vamos a comprobarlo ahora y a ver tal vez está funcionando. Sí, la flecha es de aquí. No hay nada como navegar. Entonces tenemos que hacer esto en primer lugar igual a la navegación, a la aviación. A ver. Decir esto no proporciona cola hay que ponerlo que el problema. Lo siento, uso navegar. Exactamente. Ese es el tema. No hay nada como usar navegación usar navegar. Entonces veamos si hago clic en esto, tengo este mi botón de visualización, nota que la URL también cambia. Y si hago clic en volver para volver a la página anterior. Así que solo necesitamos darle estilo con algo de CSS como nuestro viento. Así que vamos a comprobarlo ahora. Deberíamos tener una moda más que diseñamos. Está buscando expandirse así. Entonces veamos otras cosas que podemos agregar a la. Sí, creo que el error es exactamente que tenemos uno o más elegantes porque muestran nuestra descripción. A ver. Eso estuvo bien. 7. Sección de blog y página de Creación de blog: Hola, bienvenidos, chicos. Entonces, la siguiente parte de la historia, solo vamos a estar tratando con la página de sección de bloques diferente, y vamos a estar creando nuestra página de crear bloques. Este no es parte del botón que explicamos no puede poner ningún botón afuera porque al momento de crear blog es solo el administrador que tiene el veneno de crear blog o alguien que ha estado dando acceso para crear blog no es cualquiera que solo vaya allí y simplemente pegue cualquier cosa en línea Por eso se encabeza este enlace. Sólo para las personas que necesitan verlo. La siguiente parte que vamos a hacer ahora es crear diferentes secciones de blog y crear página de blog. Lo que principalmente vamos a hacer aquí es este otro que hemos hecho que tenemos un código general para ello. Que ahora estamos enrutando a través diferentes páginas o diferentes datos. Le estaremos pasando diferentes datos para mostrarlo. Entonces este es un simple es un código único que se está ejecutando tanto para el deporte, la política, los negocios, que estamos cambiando se basa estamos cambiando la imagen del nombre y los datos que se le pueden pasar en base a la categoría a la que pertenecen Entonces sin más Dugg comenzó y ejecutó que una simple línea de código y luego terminamos con eso Así que he creado mi página de sección de bloques, es la página de sección de bloques, y también mi página de creación de bloques también, he portado aquí y he creado un enlace para ello por aquí. Entonces después de crear la página de la sección también, todavía necesitamos vincularla a nuestro botón leer más. Entonces si revisamos ahora, si hago clic en este botón de política leer más. Entonces tiene que ir a la página de política. Entonces vamos a hacer esa también. Entonces, después de crear la página y vincularla, así que comencemos y empecemos a escribir nuestro código. Entonces el mantenimiento que necesitamos es una normal de que esté comprendiendo todo, una inmersión que comprendía la imagen, el texto en ella, y esta tarjeta de bloque. No, ya tenemos una tarjeta de bloque ya, sólo vamos a llamarla. Entonces ahora en nuestras secciones de página lo generativo que necesitamos. Entonces necesitamos otro de este div es uno que llevamos la imagen. Este es uno que llevamos el texto. Esa es la marca negra sombra negra o poco descolorido negro fanfarroneado que llevan el texto, este texto et Déjame ir Todavía estamos volviendo a esto por lo que tengo que comentar así. Entonces esta categoría ahora, dejamos arriba una función o una variable que es click spot. Es una noticia spot de prueba, click on business es una prueba de noticias de negocios. Entonces por ahora, no tengo funciones de calificadora, así que por eso lo acabo de poner en una no necesito a una cadena Entonces más bien necesitamos un seis. Este es un Puedes confiar en nuestras noticias faltantes, mantenerte informado e inspirarte. Vas a fuente de últimas noticias en sitios así que eso es eso en eso. Después de eso, ahora necesitamos la profundidad que comprenderá el detalle del blog. Esa es una tarjeta de blog. Entonces por dentro, necesitas otro también. Así que tenemos que llamar a la función blodard tener algunos que es clave igual al índice Voy a pasar posteando a ello y haga clic en ser igual. Entonces esta será la función que hicimos la última vez. Entonces por qué hacen clic en una tarjeta de bloque en particular, si abres los detalles pasamos publicando a ella. Entonces vamos a salir estos porque no creamos la función que se necesita. Entonces eso es todo sobre esto. Entonces lo siguiente es simplemente darle estilo y hacer que se vea bien. Bien. Entonces para esta, voy a poner esto en este tipo de cadena. Dan quiero pasarlo variable por dentro. Entonces esta profundidad será la que lleve la imagen. Así que todavía voy a trabajar en la función de imagen bajo. Entonces va a llevar la imagen que pueda pasar la imagen dentro de este lugar. Entonces va a ser Así que esto es un poco transparente. Entonces si toma nota de esto por favor, paso en la categoría. Al igual que el que explico el tiempo sobre los detalles del bloque. Le paso esta identificación. Así que así lo estoy llamando. El ID es la categoría. El que haga clic será el que los detalles que se mostrarán lipo sean los que mostramos Así que vuelve a tu creo que no ponemos este slash uno. Pongo esto último ahí porque no es no quiero la pierna sea algo que supongo visual diseño. Puede que no le pongas esta barra ahí, pero yo puedo poner barra en este lugar solo necesitamos poner una barra todo Por qué lo hacemos clic aquí. La categoría que estamos pasando será la que mostremos. Entonces hablo mencioné algo sobre la imagen el tiempo. Entonces sí, quiero lo técnico de este lugar, si vemos por política está mostrando la imagen política, click sports está mostrando una imagen deportiva, click business está mostrando imagen relacionada con negocios. Así que eso mismo para replicar ese mismo tiempo para replicar. No sólo quiero la misma imagen para todo. Entonces eso significa que voy a crear, una función aquí llamada GG BG significa imagen de fondo, ¿verdad? Entonces va a recibir va a recibir un argumento co categoría, Así que va a haber una función de cambio, debería estar familiarizado con switch en Java Script, si el caso es política, si la categoría es política bclion política Entonces una imagen en particular. Es devolver una imagen en particular. Yo sólo voy a copiar. Entonces es negocio, clic en negocios, hay un retorno una imagen en particular, cliconspot ya tienen el link Si vuelves a nuestra página de inicio, es el mismo enlace que todavía vamos a usar lo mismo a nuestro deslizador, lo siento. Sigue siendo la misma imagen que hemos usado o esta imagen que hemos usado y que todavía vamos a usar. Simplemente copie el uno para el de la política para las políticas, el de los negocios para los negocios. Después de eso, devuelves un default. 84 daños. Si no es parte de todas las cosas, deberíamos regresar una distancia vacía. Entonces ya no vamos a llamar a esta imagen. Entonces vamos a llamar a esta imagen en este lugar que llamamos put y luego vamos a pasar los datos de categoría. Entonces no podemos pasar categoría ahora porque no tenemos función creativa. Así que sigamos adelante y creamos las funciones necesarias para este lugar. Entonces para continuar, necesitamos importar todos nuestros datos. Entonces aquí es donde vamos a obtener los detalles que necesitamos. Necesitamos importar el uso por también, necesitamos importar el uso navegar. Ahí es cuando usamos cuando hacemos clic en una tarjeta de bloque en particular para ver los detalles. Entonces, ¿qué necesitamos ahora para que no sólo repitamos esas cosas Sólo podemos copiar éste. Lo siguiente es que necesitamos otra variable que se llame parte. Igual a usar por uso por dosis si revisas este lugar estoy pasando categoría. Entonces este uso per simplemente revisa los enlaces y verifica el valor particular que pasé como categoría y luego ingresé a esta y luego obtengo los datos para ello. Entonces, lo siguiente es solo una función de efecto de uso. Entonces esta, tenemos una función en tamaño que dice Noticias seleccionadas . Entonces esta almacenamos el valor de la nueva CA seleccionada dentro de una R. Entonces entonces tenemos un switch. Cambiar la categoría de valor. Entonces como este otro que tenemos aquí yo diputados. Entonces a excepción de los enlaces, voy a comprobar cambiar los enlaces. Entonces, si es política, quiero seleccionar noticias. Seré seleccionado noticias iguales a noticias políticas dañan esta noticia política. Entonces es una matriz, así puedo obtener los valores ahí. Después romper. Entonces la próxima vez contener para los negocios. Entonces si es por defecto, daña si no hay nada ahí se pasa una matriz vacía. Entonces después de eso, vamos a estar lidiando con spot, así que creo que teníamos S. Así que tenemos que quitar esto. Entonces después de eso después de este caso de cambio, así que tenemos que configurar nuestro blog. Daños tienes que crear un bloque de conjunto de co estado Así curso estatal este se establecerá. Entonces set blog, el valor del set blog solo será lo que hay dentro del nosotros seleccionado. Estados si estás usando vector, tienes que pasar un particular para que simplemente comience a recargarse en función de cuándo cambió la categoría Entonces ahora después de esto, ya podemos usar nuestra categoría Sí. Ahora puedes eliminar la columna y usarla con éxito, luego dentro de esta por favor. Entonces lo que tenemos que hacer aquí es marcar dos blogs diferentes que está dando. Entonces aquí, podemos ver la marca del blog Así que creo que nuestro bloque debería funcionar. Entonces tenemos que pasar esta función también dentro de este lugar. Entonces esto también se llama el segundo. Creo que esto debería hacer que nuestra aplicación funcione y cuando hacemos clic en un blog en particular, deberíamos tener nuestra opinión. Entonces volvamos a ver. Déjame probar click spot. Está mostrando pequeñas noticias puntuales y puedes ver el enlace aquí, hacer clic en política, mostrando el de la política. Si hago clic en tecnología, y si hago clic en alguna de ellas, va a ver la d. si hago clic atrás, mostrando esto encendido, pero lo que pasó, nuestra imagen no se muestra. Así que vamos a comprobar por qué nuestra imagen no se muestra. Entonces para la imagen que no se está mostrando, solo puede volver y cambiar el CSS a esto. Así que abre el estilo estilo, ¿verdad? Entonces voy a protagonizar igual a esto. Así podremos escribir la imagen por suelo, por gran tamaño y la distancia. Entonces, si volvemos a tu página, puedes ver por spots, negocios, negocios déspotas Lo siguiente es Así que lo siguiente es nuestra página de bloqueo esta página que ya he creado. Cs block page es similar a nuestra página de contacto, el formulario y todo. Esos en realidad son diferentes. Entonces solo vamos a seguir la frase de nuestra página de contacto como esta. Esos van ahí y copian de aquí, el regreso también. Sacerdote. Sí. Entonces para que podamos darle seguimiento a eso, solo podemos ir a nuestro nuestro nuestro enlace y seguir el enlace que usamos re blog. Puedes copiar puedes ver si volvemos a nuestra Así que si llegamos a nuestra normalidad, vemos res blog, bloque I dos. Tenemos una lista de categoría, tenemos los detalles de la descripción y el enlace de la imagen. Entonces tenemos algunos bots de asiento configurado todas esas cosas que necesitamos corregir Así que en lugar de los dos se supone que es una y algunas otras cosas. Entonces comencemos con eso. Entonces el primero son los detalles de un blog. Entonces volvemos a lo nuestro así que donde estamos nombre y apellido, ¿verdad? Tu así tenemos nuestro blog destino. Entonces tenemos que quitar esto que está debajo del teléfono y cambiarlo a. Sí. Entonces esta categoría, tenemos que trabajar en ella. Entonces para eso para la categoría, necesitamos nuestra lista de categorías, y luego la pasamos dentro de nuestros archivos. Entonces para la categoría en lugar del número uno que tenemos tiempo, vamos a cambiar esto Así que lo que tenemos ahora es una función select no y tenemos nuestro mosaico CSS para ello, es similar a la que hemos estado usando antes. Entonces no cambia nuevo categórico a. Establecer daños corales, hay que crear nuestro estado tanto para el azulejo dos desde el principio hasta el final. Entonces tenemos nuestras diversas opciones ahí. Lo siguiente es crear nuestro estado. Solo necesito que me instalen. Entonces ven a nuestra opinión Así que ahora tienes nuestro uso para el título dos para todas las categorías, blog completo. Blog completo es también los detalles, los detalles, la imagen, y también la descripción. Entonces tenemos que trabajar en nuestro propio cambio. Entonces, cuando los valores cambian hacia arriba. Entonces para nuestro cambio es muy sencillo. Ven aquí cambio en evento de cambio. Así revertir un evento que creamos para la variable hace uti cot al valor objetivo del punto del evento Entonces nos dirigimos a los valores que cuando escribes un particular y enbrites hacia abajo, para que no cambie el maestro Así que vamos a copiar y armar este fors y cambiar lo necesario para cambiar Entonces para Así que vienes aquí, puedes cambiar todas esas cosas. La categoría está ahí, puedes hacer clic en la categoría del enchufe para enviar y también nuestra imagen. Entonces lo siguiente es trabajar en este botón de resolución. Ahí es cuando se hace clic en el botón de servir, lo que así Dame para pasar el valor a la base Entonces eso nos llevará a la siguiente. Entonces probablemente nos lleve a nuestra última o segunda a la última parte del orzuelo que está creando nuestra cuenta de fuego y configurando nuestra base de datos, luego vincularla a esta base, luego reemplazar estos datos con el de la base de datos. Así que el estado 8. Implementación de Firebase (a): Oigan, chicos, bienvenidos chicos. que lo siguiente importante después Se supone que lo siguiente importante después de esto va a trabajar en nuestra presentación. Voy a tratar de hacer clic en el envío. Lo que este dato que vamos a nuestra base de fuego. Entonces esto como ahora mismo, tenemos que montar nuestra base de fuego. Y recuperar datos de nuestro incendio es enviarle datos y recuperar datos de los incendios. Entonces para hacer eso, primero hay que prender un incendio ese. Así que solo ve al consejo hacer clic de firebase. Voy a tener esta página. Entonces después de firmar algunos ya firmé mi cuenta después de firmar y otras cosas. Entonces tienes esta página a un proyecto. Entonces estos otros firebase para antes. Entonces tienes opciones para proyectos artísticos. Entonces quieres hacer click en proyecto de arte. Pones el nombre del proyecto. Entonces digo que el nombre del proyecto debe ser log, log. Después haga clic en continuar. No tengo google analytics dt hay otros diez que no lo ofing solo espera a que termine de preparar. Cuando esté hecho, tienes algo como esto. Tu firebase pro está listo. Da clic en continuar. Usted tiene esto. Entonces aquí donde comenzó el trabajo principal. La app que estamos pujando, prepárate agregando firebase a tu La app que estamos construyendo no es una era no era una varilla, es una aplicación web. Da clic en la web el nombre web. Voy a poner blog. Puedo decir bloque También configura fire hosting para tu app. No quiero alojarlo en abeja de fuego, pero si quieres hospedarlo en fuego sea, solo puedes lamer la opción y hacer algunas otras cosas que necesitas hacer ahí. Así que registra app, entonces tienes que copiar esta copia esto e ir a tu termina termina. Desde hosting, estás ejecutando la app con 11 termina puedes abrir ramina abrir otra Recuerda, ahora estamos en el directorio correcto, tienes que ir al directorio actual después lo pegas hacer MPM install firebase, y haces clic en Enter Entonces va a instalar firebase por ti. Después de la instalación, volvamos a nuestro P. Así que dijeron entonces initiationalz, firebase y comenzar a usar el SDK para el producto que te gustaría Entonces solo copia este dis y ve a tu fader fuente. Ese es tu fuente bader source fader y haz clic en él y crea para ti llamarlo Firebase. Sí dentro se basa la copia del código. No hace falta copiar el que tengo el PIK, el condenar el dominio Esto será único para su propio sitio personalmente. Si copia esto es más probable que se elimine este dominio o APIC después de este proyecto porque es algo que es personal No es algo que pongas afuera o algo que todos puedan ver. Entonces, lo siguiente después de esto es crear nuestra base de datos. La otra cosa que puedes usar base de fuego porque es muy amplia. Puedes usarlo para verificar, usar autenticación, conexión de algunas otras cosas. Hay comodidades que puedes usar firebase. Simplemente puedes realmente subir la documentación y ver más video sobre ella que realmente te ayudamos a saber más sobre firebase Entonces lo que queremos hacer ahora es para nuestra base de datos de almacenamiento contra incendios, base de datos fire st, y dar nuestra base de datos de almacenamiento contra incendios, base clic en. Entonces tienes esto. Entonces cuando tengas esto, puedes ir directamente a crear base de datos. Hay algunas cosas que hacer antes de crear la base de datos. Entonces pulidos a Cómo empiezo. Eso es de regular. Lee todas estas cosas. Cuando llegue allí, verá configurar entornos de documentos de configuración. Ahora estamos usando esto. Creo que estamos usando algunos lados y ya has instalado firebase en nuestra app Lo siguiente que debemos hacer es copiar esto. Volvamos a nuestra app. Entonces tenemos inicial el último día antes. Vamos a copiar esto. Copiemos esto Y colóquelo medialmente debajo de éste Entonces, lo siguiente que hay que hacer después de eso es tener esto. Ya que y algunas otras cosas que puedes hacer es que puedes ocultar todas estas cosas cuando lo estés publicando en línea usando punto EMV Donde quieras publicarlo on line git cosa puede ver punto EMV Para que puedas pasar a PIK y llamarlo desde este lugar dentro de tu pieza de fuego. Eso lo hará seguro y puedes poner gitigno cuando esté empujando a fuego pieza, solo eclde Hacer EMV no debe ser empujado para ir. Entonces ese es otro intento de hacerlo seguro. No estoy por el bien de la historia, no estoy haciendo eso. Entonces después de eso primero para evaluar esto, tenemos que exportar este DP hacia fuera. Para que podamos usarlo en cualquier lugar. Así que este DP es lo que vamos a llamar a menudo cuando estemos trabajando con la app. Primero ahora llámalo solo ven aquí y haz exportar. Así que ahora puedes evaluar esto desde cualquier lugar. Así que aún podemos volver a tu app. Si ves estos datos salientes a tu app. Agrega datos a tu base de fuego, importa este y este usuario de colección Lo proyectamos más tarde. Entonces este es el pequeño código que tenemos que ejecutar para exportar para empujar datos a esta base de fuego Quieres leer datos, de la base de datos, quieres llegar a los datos particulares que vamos a estar haciendo, es el código que sigues para leer datos de la base de datos para asegurar datos a eliminar y así sucesivamente y así sucesivamente. Ahora vamos a crear nuestros datos ese Regresemos ya que crea base de datos, slickness Así que no te preocupes volvemos a esta base. Entonces ahora nuestra recolección de datos tenemos recolección, ponemos una colección como deportes, siguiente, documento ID y algunas otras cosas. Entonces tengo una conexión. Este suplemento de colección de conexión es como una sección particular del blog que estamos creando. Puedo ponerlo en diferente colección. Entonces deporte un deporte, puedo tener política, puedo tener entretenimiento aquí. Puedo tener una sola sección aquí y tener diferentes documentos, pero no va a ser bueno cuando quiera codificar datos y filtrarlos. Entonces es bueno para mí tener diferente colección aquí. Entonces cada colección tiene su propio archivo, su propio documento. Aquí hay cada dato dentro de la colección. Así puedo tener múltiples datos dentro de este lugar. Hay múltiples blogs dentro de la división deportiva dentro la colección deportiva entonces puedo ver cada bloque en este lugar. Entonces tomo de como un archivo en su sistema. Tienes carpeta diferente en tres carpetas o tres cosas diferentes dentro de cada carpeta. A lo mejor uno para película, tienes todo el día de tu película, uno es para música y otro es para documentos. Entonces dices que tienen diferentes cosas que están haciendo y tienen cosas diferentes por dentro. Entonces lo mismo adquirido a esta T de esto como la carpeta. Entonces el archivo dentro es entonces se puede evaluar el archivo dentro es. Así que comencemos y volvamos a nuestro blog de creación. Volvamos o creamos un blog. Trabajemos en cómo hacer que este boxeo funcione. Lo que queremos hacer ahora es que cuando hagan clic en este enviar boxeo, quieras agregar blog. Agregar blogs sartenes quieren hacer esto. Eso significa que queremos enviar datos a nuestra base de datos. Simplemente haciendo esto. Lo que vamos a hacer es importar colección, y agregar blog. Después de la recolección, recuerda la vez esta cosa que exportamos. Tenemos que llamarlo porque es muy importante cuando queremos hacer algo aquí en base de datos porque necesitamos todos estos valores así que para ser rápidos. Entonces importa o creo que es para recordar aquí. Entonces DB firebase. Entonces necesitamos la función aquí que enviemos datos que recordamos siempre que cada vez que queramos enviar datos a la base de fuego Así que cuesta como algo que ya tenemos aquí no c ni nada. Entonces puedes seguir esto y aún me puedes seguir en lo que quiero hacer aquí. Así que costó un blog. Entonces lo primero es que quiero evitar quiero evitar por defecto esa carga predeterminada y algunas otras cosas que por defecto. Entonces la razón principal por la que estoy llamando a esto evita el default. Hay algún script Java de acción por defecto que necesito detener. Así que imagina que quiero enviar el formulario y quiero validarlo antes de enviarlo. Así que quiero detener la acción por defecto del Javascript de enviar el formulario antes validar para usar esto prevenir default porque el default de javascripts cuando yo c default para enviarlo directamente para incluso Después de eso, quiero una condición if. Entonces quiero revisar cada cuadro de texto, lo mejor tienes algo dentro Entonces si este título está vacío, no te permitirá enviar si este tutor está vacío categoría blog completo, todas estas cosas. Incluso de ellos está vacío, no va a permitir que se vayan. Entonces para esta imagen, vamos a ver porque hay un nombre en particular que hemos estado llamando, así que imagen así que eso es bonito. Para que no después de llamar desde la API no queremos ningún problema que nuestra imagen no va a estar mostrando si el nombre no es imagen diferente. Después de eso, después de verificar esto, aunque sea cierto. Entonces deberíamos llamar al. No quiero estresarme demasiado. Así que solo quiero pedir que use eso en uno de estos está vacío. Después de eso Lama el mal de ellos es cierto. Quiero consultar el enlace de la imagen. No, algunas personas si vas a la. Algunas personas quieren ponerle a Jack aquí. Creo que la app es mejor aceptada. Entonces quiero verificar tal vez el enlace sea realmente cierto. A lo mejor el enlace realmente está funcionando, o el enlace es un enlace válido. Entonces para que yo haga eso, tengo que venir a mi fuente para el y crear otoño UT. Así que dentro de ella. Dentro de este tendrá algún índice. Dentro de la X índigo, escribiré un código sencillo para verificar tal vez el PR o el enlace sea cierto o no. Por lo que la exportación puede llamarlo cualquier otro lugar. Verifique si la imagen es verdadera o no o válida o no, la UR y la función cob. Entonces eso es que eso es lo único que tenemos que hacer. Así que solo tenemos que volver a nuestro blog. Entonces además de la imagen del infierno, tenemos que ir a una importación importada que Así que puedo toda la función aquí y decir, y voy a pasar maldita imagen, y voy a pasar esta imagen en ella, es imagen R. Así que después de verificar, tiene que comprobar tal vez la imagen o es verdad o no Si no es cierto, pasó al error de paja. Entonces tiene que comprobar tal vez esta UR sea cierta. Recuerda, las dos cosas que guarda la UR, la UR save y la función cba Una función coa será sync y tenemos una función aquí dentro es común. Yo dentro es ahora, tenemos otra función, otras declaraciones condicionales que dicen que existo si esto es realmente cierto. Es verdadero ahora establecido está deshabilitado a verdadero primero. Entonces esto es que cuando hacen clic en el botón, envíen, recuerden cuando lo pase aquí, cuando lo hagan clic aquí. Entonces, cuando el botón deshabilitado sea verdadero, no podrán volver a hacer clic en este botón. Algunas personas pueden simplemente hacer clic en el botón muchas veces. Entonces, para evitar la acción por recurrencia o picadura repetitiva hay que bloquearla. Entonces después de eso, tienes que un peso, no esto es un scronos técnicamente davi Entonces un peso tenemos que tiempo en el muelle esto tenemos aquí. Abrir colección de cohetes, ¿ estás diciendo dónde la estamos usando Si vuelves a nuestro fuego verás que también tienen su propio DB. Entonces DB no está en nuestra app por eso lo exportamos DB después de DDB, entonces necesitamos la colección en sí, donde queremos detenerla Si revisamos este lugar, este usuario ahora es un lugar de recolección o déjame regresar y mostrarte algo. Si terminas en este , ves un depósito de fuego. Esa es tus tiendas de bomberos en com parte esa cadena es la aguanta este pase ahora es donde quieres almacenar ese es el nombre de tu colección Entonces mi nombre de colección, quiero otro nombre de colección porque quiero uno para el deporte para el deporte, para la política, para los negocios y así sucesivamente y así sucesivamente. Entonces en lugar de que yo pase una sola cuerda aquí, S deportes. Entonces, si paso por Dam es todo eso, los datos de la historia se van a salvar más allá de ese deporte y no quiero eso. Entonces necesito pasar categoría ahí. Entonces categoría si la categoría cambia a deportes para guardar el punto de datos a deporte. Me estás cogiendo. Entonces, si la categoría dice política, la categoría es la categoría. Entonces, si selecciono deporte, guardó estos datos que estoy escribiendo bajo deporte. Yo selecciono la política, guardo los datos bajo la política cuando sigo dedicando y así sucesivamente y así sucesivamente Que hay lógica detrás de ello. Entonces después de eso, tenemos el corchete de coli. Bien. Entonces no voy a pasar todos los datos. Ese es el tipo dos. notas es cuando están pasando todos los datos dentro. Entonces tengo mi tipo dos para escribir. Entonces estoy tan así la categoría también el blog completo, la URL y el tiempo. El tiempo es algo que no hay opción para ti no necesitas poner tiempo con el tuyo. Se va a registrar la hora en que haga clic en el botón de servicio . Si notas en nuestra app aquí, ves algo que dice cuatro eso es apri 2000 2024 en este momento, es el momento en que se creó este blog Entonces es solo registrar la hora particular en la que estás haciendo clic en el botón entonces. Entonces para eso empieza el tiempo. Entonces, si eso tiene éxito es sacar otra alerta que diga, Es posible que queramos recargar nuestra app, quizá quiera volver a cargar Entonces después del blog el blog se ha creado con éxito. Voy a leer. Ahora más significa si éste no existe, si el enlace de la imagen no existe. Entonces, ¿qué debería decir analy Estoy usando aer. Hay una mejor manera de hacerlo. Hay otro que puedo crear un componente para mi notificación en lugar de usar alert. Eso será parte de la evaluación. Quieres expandirlo, así que solo lo llamas en lugar de usar una alerta o puedes diseñar tu propio modelo Aart Puedo decir URL de imagen. URL de la imagen para que ya podamos eliminar la inválida. Eso es todo lo que tenemos que hacer. Pruébalo ahora. Volvamos aquí y volvamos a necesitamos deli esta zona Este será un listado fresco. Así que imagina ahora quiero crear blog en. Déjame posar algo un blog uno, el auto, mi nombre, Joel es un aguijón deportivo Entonces la descripción, cerrando negocios, sigue la geosta Entonces para los detalles. Bien. Déjame encontrar un dx aleatorio. Volveré a mi ab y pegaré. Entonces el enlace de imagen, necesito un enlace de imagen, así que pego. Entonces ahora, quiero probar tal vez esta URL de imagen realmente esté funcionando. A lo mejor si pongo una UR equivocada entonces tal vez va a funcionar. Entonces, en vez de pegar esto, voy a quitar esto de nuevo y simplemente escribir basura Entonces tomemos un los ahora. Vamos a hacer clic en enviar. Sí, hay un error. Todavía no hemos llamado a esta función. Entonces no podemos evaluar esta función. Ese es el error. Ver ahí es cuando hacemos clic en enviar, todo justap llama a la función que salgo tiempo. El gritar la función. Volvamos a ello e intentemos ver tal vez vamos a recuperar la anterior. Déjame ver que esta no es una URL válida. Déjame ver tal vez va a funcionar o no. ¿Puedes ver proporcionar un enlace URL válido? Hago clic. Necesito regresar y copiar el enlace URL correcto ahora. Y déjame colocar esta mesa pasada justo entonces déjame hacer clic en enviar. Así que haz clic en enviar ya. Se supone que es botón de carga tomemos nota de ello. Por lo que estamos recibiendo a la fiesta bloque hookie bloqueado o algo así falta o inst permiso Entonces no tenemos el permiso para publicar en este traje todavía en el perdón en la base de fuego 9. Implementación de Firebase (b): Hokie será bloqueado o algo así faltante o ins otorgar permiso Entonces no tenemos el permiso para publicar en este gb todavía en el perdón, en la base de fuego todavía. Entonces, ya sabes, cuando lo estamos creando, te muestro algo que si vuelves a las reglas, ve a tus reglas. Hay algo que estamos mostrando creo que es para terceros, bla, bla, bla, bla Digo, voy a explicar más tarde. Puedes retroceder un poco el video . Entonces este es el lugar. Necesitamos reescribir este para que todos puedan escribir post puedan tener acceso a escribir publicaciones Entonces, lo que solo tenemos que hacer es cambiar éste a verdadero. Éste a la verdad. Entonces ahora ya tenemos diferente colección para cada uno de ellos, y algunos de ellos tienen dos datos, uno dato a dato. Incluso podemos hacer que esa sea la tecnología, así que tenemos datos de T. Entonces lo siguiente ahora después de agregar todas estas cosas es que volvamos y lo llamemos nuestro. Usted nota que estamos llamando a los datos de nuestra base de datos desde nuestra base de fuego. Entonces, la mayoría será capaz de hacer esto. Es muy sencillo, a lo mejor estamos escribiendo esa línea de código, no, no, no, no, no. Lo que vamos a hacer ahora es volver a nuestro código. Entonces en lugar del mismo donde tenemos el antes en lugar del predeterminado que tenemos ahí antes. Vuelvo a nuestro código. Regresa a nuestra página de inicio. Ahora en lugar de usar todos estos, tenemos que obtener nuestros datos tenemos que leer datos de la base de datos. Recordar opción para un dato, puede llegar a datos. Tenemos que leer todos los datos de la base de datos. Entonces, lo que hacemos copiar esto es obtener documentos y también recuerda que necesitas o tu DB que es TV de base de fuego. Entonces necesitamos eso. Entonces, ¿cuáles son esas funciones que necesitamos escribir? Entonces antes que nada, tenemos que tener un patrimonio para cada uno de ellos. Lo que hace el estado es que después recuperar para recuperarlo en base a cada colección, un recuperamos para polities colección, polities blog tecnología dT, entretenimiento deportes Así que un puerto de la base de datos basado en cada colección. Entonces lo que vamos a hacer ahora es tener nuestro efecto de uso porque va a ser si run consistentemente use effect. Así que usa el efecto, tenemos una función c igual a una scronssd tener Q instantánea de consulta Igual a nuestro obtenemos documentos que ya tenemos ahí colección dentro de la colección, ponemos a nuestro DB el nombre de la colección que queremos conseguir él mismo y como política. Puedes volver a tu dt y checar el nombre aquí, política, si comprobamos aquí, hace lo que tratan también instantáneas, iguales a los estándares Entonces la política también. Entonces tienes otro bloque de costos una R. Así como consulta consulta a personas para cada una. Para cada uno de ellos, queremos almacenarlo dentro de bloques alimentados dot push. Entonces queremos estar empujándolo dentro del CR con una identificación. Ese documento punto ID. Después difundimos los datos del documento. Entonces después de eso, queremos ordenar los datos. Eso significa que el primero que tiene el último, venimos primero antes que el otro. Entonces decimos costo ordenar bloque ordenado igual a f bloques frescos A vienen B dos argumentos hacen tiempo. Entonces, el tiempo que quieren ordenar es batear a tiempo menos a veces que establecerán el Conjunto P B que establece la política bloquea la glock estatal estatal Después de eso, sobre lo que se llama los funcionales. Es un bloque de búsqueda o digamos buscar bloques en lugar de buscar bloques Vamos a buscar bloques. Sí. Porque ahora buscando solo una cuadra. Entonces después de eso, queríamos correr una vez después de cargar. Entonces eso es eso de política. Entonces ahora tenemos que replicarlo para otros también. Entonces, si te tomas el tiempo se correlaciona con el tiempo, así que tenemos que formatear esto que el tiempo sea apropiado. Entonces lo que tenemos que hacer es que tenemos que volver a nuestra tarjeta de bloqueo porque esto es simplemente en nuestra tarjeta de bloque, ¿verdad? Vaya a nuestras tarjetas de bloque dentro de nuestros componentes. Tarjeta. Entonces donde tengamos tiempo, tenemos que reemplazarlo por esto. Hay una nueva cadena d time sus string string. Entonces es formato eléctrico. Muestra la hora en que creamos este blog y las fechas. Vamos a hacer clic en uno de ellos. Entonces se está mostrando pero una cosa es no mostrar todos los detalles. Entonces veamos el nombre que llamamos los detalles completos aquí. A ver lo llamamos blog completo, blog completo en este lugar. Entonces volvamos a nuestro componente aquí. Esa es nuestra vista de los detalles de los deg. Vamos a revisar. Entonces esto fue estados hacer detalles. Ese es el blog completo del estado. Así que vamos a comprobarlo ahora. Lo tenemos. Por lo que nuestros datos no están tan publicados el. Entonces eso significa que tenemos que formatear ese también. Tenemos que formatear esta fecha también. Recuerda lo que hicimos aquí. Solo puedes venir aquí y p a. Entonces este será estado el tiempo. Entonces, vamos a comprobar lo que ya hay, y nuestra votación de regreso está funcionando. Entonces eso es principalmente todo. Pero otra cosa que queda es por este lugar. El otro todavía tiene el antiguo blog. Entonces eso significa que tenemos que ir a nuestros detalles ahí, nuestra sección de blog y cambiar algunas cosas. Entonces lo que necesitamos cambiar se llama la API también para leer todos los detalles y pastoso dentro de cada uno de ellos. Entonces, ¿qué necesitamos hacer? Ya tenemos nuestro bloque de ventas. Así que al igual que la página que necesitamos llamar todo, todo aquí afuera, cada función por ahí, no necesitamos hacer esa necesidad para copiar esto. No necesitamos hacer eso en este lugar. Lo siento. Sí, estos son de sección de bloque. Entonces déjame solo por favor el que no estoy usando correctamente. Vuelvo a mi sección. Así que no necesitamos llamar a todo aquí. Sólo tenemos que llamar a este uno de ellos, y luego pasar categoría, ¿verdad? Entonces la categoría que damos clic aquí si es deporte va a generar el blog de deporte. Voy a conseguir todo este spot blog, la colección de blogs que es perteneciente a los deportes. Si es política, consigue el de la política y así sucesivamente y así sucesivamente. Entonces dentro de este lugar, se establecerá blog en lugar de set set blogs. Eso es eso. Entonces lo que falta aquí es que necesitamos esto para importar esto. Así que volvamos a nuestra página de inicio. Necesitamos esto para estar aquí, ¿verdad? Y aquí tenemos que pasar nuestra categoría dt. Entonces cambiar cuando la categoría cambió tenemos que hacer. Entonces, en vez de este estado ahora, podemos eliminar este estado, que son cosa que debería ser. Volvamos a nuestra p. ¿ Puedes ver ahora solo? Para que estemos seguros, creo que creé un post sobre las políticas que llamo política. ¿Puedes ver? Está cambiando en base al particular que entré, la tecnología, tres entretenimiento como zona. Así que puedes ver la imagen está mostrando wow hermosa imagen. Entonces es que si haces clic en esta muestra, ha sido un momento increíble llevándolos a construir este increíble sitio. Entonces hay mucho que todavía puedes hacer con esto. Entonces y eso será parte de la evaluación. Lo que solo voy a necesitar para ti es trabajar en el modelo. Entonces cuando hago clic en Por ejemplo, cuando vuelvo a este bloque de pliegue, si vuelvo a este bloque de uso y hago clic en este En lugar de usar Alt, puedes crear un modelo, tu modelo será el de notificación útil en su lugar. Y esa cosa, puedes enumerar todos tus bloques para que yo borre el botón para que pueda tener que controlarlo. Puedes eliminarlo de este lugar. Puedes verlo desde este lugar si lo deseas. Pero si no quieres hacer eso, puedes volver aquí y cualquier blog que esté bien que no sea útil. Simplemente puede hacer clic en esto y eliminar documentos. Y eliminar documentos. Puedes eliminar el documento que eliminas todo este blog de este. Entonces eso es todo. Entonces después de eso después de crear algo así, puedes crear tu modelo y hacer que este botón de búsqueda funcione. Los contactos. Entonces ahí es cuando hacen clic en enviar, le mandas un correo a esto cualquier correo electrónico que puedas decirle a tu correo personal cuando se pongan en contacto contigo. Creo que hay algunos sitios que pueden hacer eso tomo imagenes verifico imagenes. Las imágenes pueden ayudarte a hacer eso. Entonces, cuando envíen un mensaje, enviará trans derecho a tu correo electrónico y podrás responderlos desde ese lugar para que puedas hacer un correo no generado y responderlos. Entonces otras cosas. Las cosas increíbles que puedes agregar a esto no se detiene aquí. El diseño no se detiene aquí. Hay algunos de los que puedes esconder como cargando cargando, hay una carga poniendo. Entonces, cuando marque esta cosa, debería haber como una carga poniendo corriendo, redondo redondo, redondo redondo redondo. Hay algunos CSS divertidos, load putting. Yo se carga cargando icono cargando animación, puedes comprobarlo. Diversos ellos, Varios de ellos, puedes comprobarlo y ver como puedes implementarlo a esto. Así que gracias chicos por seguirme hasta el final de esta historia. Um te veo en el siguiente tutorial, cualquiera que vaya a dejar caer a continuación. Así que por favor haz clic en el botón de seguir para que cada vez que deje caer un contenido increíble , unos tutoriales increíbles, me vas a seguir y lo vas a disfrutar juntos. Muchas gracias, Segers Nia