Ultimate Next. sitio web de la cartera js 14 2024 ( Zero to hero )

1. Video publicitario real: Echa un vistazo a este hermoso sitio web. Todo colgado codificado con los siguientes s. Fue meticulosa y profesionalmente diseñado para trabajar en otros dispositivos Entonces, ¿no sería increíble si supieras exactamente cómo diseñar y codificar este sitio web desde cero? Aquí es exactamente donde entré. Hola, bienvenidos, y muchas gracias por su interés en mi curso. En este curso, te enseñaré a construir el último sitio web de la cartera Next GS, utilizando diferentes tecnologías, como next es react Jes, viento lacrimógeno y mailer de nodos Entonces, si eres novato, no te preocupes. Vamos a comenzar de cero explorando cada concepto que se construye dentro del núcleo del siguiente cuadro GS. Así que vamos a cubrir temas como el router, que incluye ruta siguiente, ruta dinámica, ruta dinámica siguiente, y coger todos los segmentos Y también, temas como la obtención de datos, la ruta privada, colocación de archivos, la carga, el diseño, y así sucesivamente y así sucesivamente No nos hemos equipado con todos los conceptos. Luego podemos proceder a construir el último sitio web de la cartera Next S. Durante este curso, te enseñaré cómo estructurar el sitio web, cómo usar componentes de diseño comunes y patrones de maquetación, y para terminarlo, vamos a seguir las mejores prácticas de la industria para diseñar nuestro sitio web. Por lo que haremos que nuestro sitio web sea responsive en dispositivos móviles y luego lo optimizaremos para un mejor rendimiento. Por último, desplegaremos el sitio web en un servidor de vida, lo que simplemente implica. Tu página web de cartera será accesible en Internet. Para que puedas usarlo para mostrar tus trabajos a tus clientes o a tus empleadores. Entonces si buscas un curso integral, fácil de seguir, bien organizado y fácil de seguir, bien organizado y práctico que te lleve de cero a aquí. Este es el mejor siguiente curso e para ti. Suena bien, bien. Únete a mí y comencemos. 2. Introducción 001 de Nextjs: Siguiente S es un marco de reacción para la producción. Y ahora la pregunta es, ¿cuál es exactamente la diferencia entre la siguiente S y la reacción Gs? React S es simplemente una biblioteca JavaScript para construir interfaces de usuario. Y quiero que pienses en una biblioteca como un paquete que se crea para resolver un problema específico. Al ser una biblioteca, React se enfoca en crear interfaces de usuario interactivas. Eso es exactamente lo único que reacciona es hace como biblioteca. Entonces no puedes usar react Gs para realizar ruteo y Htpic. Mientras que un framework es una solución completa. Entonces, el siguiente gas como marco se puede usar para causar efecto, y también para realizar enrutamiento, lo que simplemente implica, se puede usar el siguiente gas para construir una aplicación starck completa. Enseñar bien. Hermoso. No he entendido la diferencia entre next as y react es. En la próxima conferencia, seguiremos adelante para crear una nueva próxima aplicación S. 3. Instalaciones de nodos 02: En esta sección del curso, vamos a hacer algunas instalaciones necesarias para ponernos en marcha. De hecho, es un requisito previo tener el nodo S funcionando en su máquina antes de instalar el siguiente gas. No obstante, animo a cada uno de ustedes a descargar e instalar la última versión estable. Este de aquí en el edd izquierdo de la pantalla. Entonces, por favor, no instales a este tipo a la derecha d de la pantalla, simplemente porque viene con complejidades extra sobre las que quizás no puedas razonar Descarguemos e instalemos rápidamente la última versión estable. Aquí está. Se está descargando. Descarga, exitosa. Vamos a abrirlo dentro de la carpeta de descargas. Haga clic para instalar. Todo bien. Entonces antes de continuar, también tenemos que salir de este directorio de aquí. Y ahora nos quedamos con no vítores. Vamos a continuar. Para que puedas pasar por todas las cosas si tienes tiempo. Pero para mí, sólo tengo que continuar. De acuerdo. Se en el botón de instalación. Si eres Mc, definitivamente te va a pedir tu contraseña. Pero si estás trabajando en windows, va a ser una instalación express, así que no necesitas ninguna contraseña. Ahora mismo, voy a introducir mi contraseña. Instalar software. La instalación está en curso. Instalado, exitoso. Vamos a cerrarlo. ¿Quieres conservar los asentimientos después de instalación o quieres moverlo a la basura Vamos a moverlo a la basura. Ahora mismo, vamos a hacer aparecer el set b pulsando comando y barra espaciadora. Sólo tienes que s para terminal. Lo que vamos a hacer es comprobar la versión que instalamos. Voy a hacer Node space, V. Déjame ver si puedo acercarlo un poco. Todo bien. Puedo acercar el zoom, está en la clave enter, y ahora tenemos instalada esta versión de nodo. Hermoso. Ahora ya terminamos con la instalación. En la próxima conferencia, seguiremos adelante para instalar el código VS. Esto ya está apagado. Nos vemos en la próxima conferencia. 4. Instalaciones 3 contra C: Hola ahí. Bienvenidos de nuevo a clase. En la conferencia anterior, instalamos el nodo GS. Ahora en esta conferencia, seguiremos adelante para instalar el editor de código. Siéntase libre de usar cualquier editor de código de su elección. Pero para mí, el código VS siempre es mi favorito. Te animo a que descargues el código VS. Simplemente porque a lo largo de la línea, voy a compartir con ustedes algunos consejos y trucos que acelerarán el proceso de desarrollo. Y seguro, quiero que todos ustedes sigan adelante. Suena bien, bien. Hermoso. Rápidamente dirígete al código vistudio.com, y este componente se abrirá justo en frente tuyo Ahora vamos a agachar. En el extremo izquierdo de la pantalla, tenemos el código VS para windows, y justo en el centro, lo tenemos para Obuntu y otras cosas Por último en el extremo derecho de la pantalla, lo tenemos para Marc. Justo aquí, estoy en Mac, así que definitivamente lo descargaré para Mac. Pero si estás trabajando en windows, también tienes que descargar este aquí mismo. Éste. Tienes que descargar este. Pero ahora mismo, quiero descargar este aquí mismo para Marc. Entonces, si estás usando Mac al lado, puedes descargar rápidamente el cielo. Haga clic para descargar. Vamos a revisar el proceso de descarga. ¿Puedes ver que Visual Studio Code ya se está descargando? La descarga definitivamente tomará un tiempo. Entonces solo tengo que adelantar la conferencia. Descarga, exitosa. Vamos a abrirlo con en la fo Vamos rápidamente en Zip. Boom. Aquí está. Aunque ya lo tengo en mi máquina, y por eso puedes ver el duplicado por aquí. Este es el que estoy usando anteriormente, y este es el nuevo que acabo de descargar. Puede hacer clic para abrir. Y aquí está. H. Esto ya está apagado, y en la próxima conferencia, vamos a seguir adelante para instalar algunas de las extensiones que se necesitan. Esas prórrogas son sumamente importantes porque vamos a estar haciendo uso de ella en el futuro. Entonces, por favor, no se salten la siguiente conferencia. 5. 4 extensiones contra C: Por lo que en esta conferencia, seguiremos adelante para instalar las extensiones que se utilizarán para facilitar las cosas en el futuro. Entonces primero, tenemos que salir de la página de notas de la versión. Todo bien. En la esquina media izquierda de la pantalla, verá la extensión. Aquí está. Y yo flojo, ven bien las extensiones. Haga clic para abrir. Dentro de la caja de salvia, vamos a buscar E seven react dor Snipe Entonces voy a hacer E seven más React slash red Dox slash react Native Y aquí está. Haga clic para abrir. Ya lo tengo instalado en mi código VS, y esa es la razón por la que puedes ver el butting desinstalado Al final, se habilitará el topeteo de instalación. Entonces todo lo que tienes que hacer es hacer clic en el butting instalado Y entonces tendrás instalado este potente fragmento. Este fragmento es extremadamente potente porque lo estaremos usando para generar algún código de componente funcional de reacción sin tener que teclearlo desde cero Ahora volvamos a dicha caja. Ahora tenemos que instalar el script Java y escribir script todas las noches Javascript y mecanografiado todas las noches. Alejemos un poco. Espero que puedan ver Claramente. ¿Se puede ver en el embarque de instalación? La instalación está en curso. Instalado con éxito. Entonces tenemos que cerrarlo. Otra extensión poderosa es el intellisense del viento de cola. Por lo que esta inteligencia ayudará a mostrar el CSS equivalente a la clase de utilidad de viento de cola cuando se ciernen en ella No te preocupes, todo esto puede sonar complicado, pero en el futuro, definitivamente obtendrás lo esencial Así que vamos a instalar. T viento intellisense. Y aquí está. Entonces parece que ya lo tengo instalado. Nuevamente, a tu final, si no lo tienes instalado, vas a ver el botin de instalación Todo lo que tienes que hacer es destrozar el butting de instalación, y entonces todo va a estar bien contigo Nuevamente, si esta es tu primera vez para trabajar con T wind Css, quiero que te animes, porque te explicaré cuidadosamente todas y cada una de las clases de utilidad eólica T. Suena bien, bien. Hermoso. 6. 5 Instalación de Nextjs: Bienvenidos de nuevo a clase. En esta conferencia, seguiremos adelante para crear nuestra primera próxima como aplicación. Vuelve al escritorio. Justo dentro, haga clic con el botón derecho en la nueva carpeta. Voy a llamar a esta carpeta. Siguiente Práctica Ys. Toma nota, al nombrar tu proyecto, usa siempre un nombre descriptivo que describa la intención del proyecto para que puedas relacionarte con él fácilmente en el futuro No he creado la carpeta. Abre rápidamente tu código VS. La siguiente línea final es arrastrar y soltar la carpeta en el código Vas. Vamos a maximizar rápidamente. Bien, tenemos que darle algún permiso aquí, y luego dejemos el trabajo en la página. Contra bactic para abrir el terminal integrado de código VS. Y aquí está. Y por cierto, la garrapata ba se encuentra en la esquina superior izquierda del teclado justo debajo de la tecla de escape. Y si no puedes hacerlo con el atajo, todo lo que tienes que hacer es ir al menú superior y luego terminal, nueva terminal. Y entonces se abrirá esta ventana de abajo. Ahora, para crear una nueva aplicación Jz siguiente, sigamos el comando Y aquí está. P X, crea siguiente ap, y luego lo vas a hacer a Latest. Para copiar el comando, hay que dar clic en este icono de copia. Vuelve al código VS y luego manda V para pegar. Lo que voy a hacer ahora mismo es espaciarlo y luego hacer. Esto ayudará a instalar los siguientes Js justo dentro de la siguiente carpeta de práctica JS. Está en la tecla enter para que se encienda. De nuevo, pulsa la tecla enter para continuar. ¿Te gustaría usar script tipo? Por supuesto, sí. ¿Te gustaría usar sí pelusa? Por supuesto, sí. Puedes cambiar entre sí o no, usando la tecla de flecha izquierda o derecha. ¿Te gustaría usar gemelos? Sí. ¿Te gustaría usar SRC Sí, A. Sí. Casi todo va a ser sí. ¿Te gustaría usar el Import? Queremos que todo esté completo. Iré con la opción sí. Después, por último, pulsa en la tecla enter. Instalado, exitoso. Lanzemos rápidamente nuestro proyecto en la web. Lo que voy a hacer ahora mismo es PM, Ron Dev. Sencillos eso. Y luego en la tecla enter. El proyecto se estará ejecutando en el puerto de Localhost 3,000, y para abrir el proyecto, todo lo que tienes que hacer es presionar hacia abajo el comando o la tecla de control en tu teclado, y luego dar clic en el enlace para abrirlo Y en la pantalla está nuestra primera próxima aplicación GS. 7. 6 Nextjs BoillerPlate: Todo bien. Bienvenidos de nuevo a clase. En la conferencia anterior. Aprendimos a crear y ejecutar una siguiente aplicación básica de GS. Ahora vamos a adentrarnos en los archivos del proyecto y estructura de carpetas para entender cómo funciona todo cuando ejecutamos nuestra aplicación. Procedamos con el archivo JS del paquete. Contra baci para cerrar la terminal. Comando B o control B para abrir el explorador de código VS. Dentro del Explorer, vas a encontrar el paquete punto JN archivo, y aquí lo tienes. Hermoso. Dentro del script, tenemos el Dave para ejecutar nuestra aplicación en modo de desarrollo. siguiente es la compilación, que se utiliza para construir la aplicación y prepararla para la implementación de producción. El script de inicio se utiliza para iniciar el servidor de producción de aplicaciones. La pelusa se usa para configurar siguiente configuración GS incorporada en la pelusa S. Y para las dependencias, tenemos reaccionar domo y siguiente GS Entonces tenemos instalada la versión 18 de react, y luego tenemos la siguiente versión 14.0 0.1 Entonces, a partir del momento de la grabación, esta es la última versión. A continuación, tenemos las dependencias de desarrollo. Por supuesto, tenemos el script tipo y tipos, y aquí tenemos el post CSS, tailwind, ES links, y así sucesivamente y así sucesivamente Así que vamos a cerrarlo rápidamente. Nuevamente, dentro del Explorer, tenemos el paquete lock dot archivo JN. Este archivo garantiza una instalación consistente de nuestras dependencias. Justo arriba, tenemos que es ignorado, lo cual es útil para el control de versiones. Y a continuación, tenemos el archivo yd dot MD. El yd me dot MD es una documentación que contiene instrucciones relacionadas con la ejecución, construcción e implementación de la aplicación. Y tenemos los siguientes env dts. Consiste en declaración mecanografiada para los siguientes gs. ¿Y qué archivo nuevamente tenemos que hablar? Hablemos de los next.com higos. Y aquí está. Tenemos los siguientes higos. También tenemos las configuraciones ts justo debajo. Además, tenemos el post css fig para configuraciones t wind. Pasando a la cima, tenemos el directorio público, y aquí está. La carpeta pública contiene todos los activos estáticos a guardar, incluyendo las imágenes y los SVG Cuando estamos construyendo una aplicación de recompensa, todos los SVG que vamos a usar serán importados dentro de este directorio público. Ciérrela. La siguiente línea es el SRC, que es el paquete fuente Cuando haces clic para abrir, vas a ver la app, y dentro de la app, tenemos el ícono Cinco, y aquí está. Déjame mostrarte en la pantalla, y aquí está el icono de cinco, guardando como logotipo. Vamos a cerrarlo. Aquí está el CSS global, que es muy útil cuando se quiere estilizar múltiples secciones en la aplicación A continuación se muestra el punto de diseño TSS. El punto de diseño TSS es el contenedor principal de toda la siguiente aplicación GS Por último, tenemos la página.tss. El punto de página TSS entrará en el diseño raíz como hijos. Déjame mostrarte. Entonces, lo que sea que tengas aquí mismo, entrará en el diseño de niños. ¿Puedes ver? Y aquí está. Cuando viene aquí, lo que aparece dentro la etiqueta se renderizaría en la pantalla, así como esto. Entonces todo dentro de la página hacen TSS. ¿Ves que tenemos la etiqueta P que dice empezar editando Cuando vuelvas al navegador, vas a ver comenzar editando. Esto es posible simplemente porque la página do TS se transmite al diseño padre como hijos. Más simple como eso. Ahora hemos podido entender el flujo de control de una próxima aplicación GS. El siguiente en la fila es limpiar el código. Hagámoslo en la próxima conferencia. 8. Limpieza de códigos 7: En esta conferencia, vamos a proceder limpiando el código. Navegue a la página Ts. Justo dentro, vamos a destacar de las líneas cinco a las líneas 111. Por lo que queremos limpiar todo para empezar de nuevo Límpielo. P. La aplicación se está quejando simplemente porque va a devolver UI Aquí vamos a tener una D. Guarde el proyecto. Cuando compruebes la recarga del navegador, vas a ver una pantalla vacía Volver al código VS. Ahora tenemos que abrir el CSS global. Se encuentra dentro de la fuente, la aplicación y luego CSS global. Cuando hagas clic para abrir, verás el CSS que generamos cuando hicimos MPX create app Lo que voy a hacer ahora mismo es destacar desde las líneas cinco. Uy. Echa un vistazo. Todo bien. Resaltar, y luego bajar a las líneas 27. Límpielo. Cuando guardes, echa un vistazo al navegador y bomba. ¿Puedes ver? Ahora hemos logrado eliminar todo lo que no queremos. Tenemos que empezar de cero. Entonces vamos a construir la aplicación desde cero. Y eso es sumamente bueno para ti. Sé que quizás te estés preguntando por qué no eliminamos esta configuración de dw por aquí Es simplemente porque si me quieres de viento de cola, esta configuración debe ser incluida. Entonces hay que dejarlo exactamente como es. Cuando guardas, y otra vez, tenemos una pantalla vacía. Esto ya está apagado, y en la próxima conferencia, hablaremos del sistema de ruteo en el próximo GS 14. 9. Router de aplicaciones (sistema de rutas en Nextjs 14): En esta conferencia, seguiremos adelante para discutir el sistema de ruteo en el próximo GS 14. Entonces hablemos del enrutador de aplicaciones. Siguiente GS, implementar un sistema de archivos basado en técnicas de enrutamiento, en las que el elemento web UR dentro de la pestaña del navegador es controlado por las carpetas de archivos dentro de su base de código. Suena estrictamente correcto. No te preocupes, cuando empecemos a practicarlo, definitivamente lo entenderás lo suficientemente bien Toma nota de este punto clave. En el siguiente GS 14, cuando se crea una carpeta dentro del directorio de aplicaciones. Esa carpeta se convierte automáticamente en una ruta cuando se crea una página.ts o un punto de página S dentro Siguiendo la siguiente convención de enrutamiento e 14, para poder implementar una ruta, definitivamente debes tener que crear una carpeta dentro del directorio de aplicaciones. Supongamos que estamos construyendo un sitio web de recompensa, donde necesitamos una página de contacto y una página de perfil. B común para abrir el Explorer. Gana el directorio de aplicaciones, haz clic con el botón derecho y luego una nueva carpeta. Vamos a llamarlo contactos, igual que estos. Otro, dentro de la app, clic derecho, nueva carpeta. Este será co perfil. Una vez hecho esto, vamos a comprobarlo en el navegador para ver si es enrutable Vuelve al navegador, y aquí voy a hacer Localhost Pot 3,000 slash Contacto Cuando golpeas en el entaky, dice que arroja hacia atrás una página de 44t encontrada. ¿Sabes por qué? Es simplemente porque tenemos que crear una página hacer TSS o gs dentro de la carpeta de contacto Ahí es exactamente cuando esta carpeta se convertirá en una ruta. Haga clic en nuevo archivo. Y vamos a hacer página TSS. Dentro de RFC para generar el componente funcional de reacción. Página de contacto. Puedes usar una etiqueta H one si quieres. Echa un vistazo. Ahora, cuando revises el navegador, vas a ver la página de contacto. Vamos a enrutar la página de perfil. Voy a hacer Localhost que perfil. Cuando se pulsa en la tecla enter, devuelve una página 404 ernaut encontrada Supongo que a estas alturas deberías saber exactamente qué hacer a tu final. Publica el video e implementa la ruta del perfil. Déjame ayudarte con eso. W en el directorio del perfil, clic derecho, nuevo archivo, y lo vamos a llamar página punto TSX Simplemente porque estamos usando script tipo. Por eso vamos con la extensión punto TSS. Pulsa en la tecla enter, nuevamente, RFC para generar el componente funcional de reacción Aquí, voy a hacer página de perfil. Vamos a implementarlo dentro de la etiqueta H one. Corte esto, colóquelo dentro y hueso. Todo bien. Guardar en el navegador, ¿lo ves? Ahora, ahora la página es visible. Puedes darle un nombre de clase a la etiqueta Hadron, y luego vamos a hacer texto nueve Excel Esta clase de utilidad de viento de cola simplemente significa que estamos aumentando el tamaño de fuente a su RM. Cuando veas y revises el boom del navegador. Ya ves, se vuelve muy audaz así. Ahora bien, así es exactamente cómo implementar el ruteo en la próxima S. También podemos enrutar a la página de contacto, así como esta y boom. ¿Puedes ver? Toma nota de estos puntos clave. Las rutas se asocian con los archivos en función del nombre de las carpetas que contienen dentro del directorio de la aplicación. Un punto de página Ts dentro la carpeta de contacto se mapeará para cortar el contacto, y un punto de página TSS dentro la carpeta de perfil se mapeará para cortar Es por eso que cuando vienes aquí y haces contacto de corte, obtienes la página de contacto De hecho, en realidad podemos darle un color de fondo, para que entiendas de lo que estamos hablando. Aquí vamos a dar el nombre de la clase SVA. Entonces dentro del nombre de la clase, vamos a hacer uso de la clase utilitaria PG yellow 500. Cuando guardas y revisas el navegador, y aquí está la página de contacto. En resumen, cada carpeta dentro del directorio app corresponde a un segmento URL, cuando se crea una página con un punto TS o una extensión de punto GS dentro de la enseñanza Good. Hermoso. 10. Ruta interconectada: En esta conferencia, seguiremos adelante para discutir el sistema de ruteo en el próximo GS 14. Entonces hablemos del enrutador de aplicaciones. Siguiente GS implementa un sistema de archivos basado en técnicas de enrutamiento, en las que el elemento web UR dentro de la pestaña del navegador es controlado por las carpetas de archivos dentro de su base de código. Suena stricky bien. No te preocupes, cuando empecemos a practicarlo, definitivamente lo entenderás lo suficientemente bien Toma nota de este punto clave. En el siguiente GS 14, cuando se crea una carpeta dentro del directorio de aplicaciones. Esa carpeta se convierte automáticamente en una ruta cuando se crea una página.ts o un punto de página S dentro Siguiendo la siguiente convención de enrutamiento e 14, para poder implementar una ruta, definitivamente debes tener que crear una carpeta dentro del directorio de aplicaciones. Supongamos que estamos construyendo un sitio web de recompensa, donde necesitamos una página de contacto y una página de perfil. B común para abrir el Explorer. Gana el directorio de aplicaciones, haz clic con el botón derecho y luego una nueva carpeta. Vamos a llamarlo contactos, igual que estos. Otro, dentro de la app, clic derecho, nueva carpeta. Esto se llamará perfil. Una vez hecho esto, vamos a comprobarlo en el navegador para ver si es enrutable Vuelve al navegador, y aquí voy a hacer Localhost Pot 3,000 slash Contacto Cuando golpeas en el entaky, dice que arroja hacia atrás una página de 44 raíz encontrada. ¿Sabes por qué? Es simplemente porque tenemos que crear una página hacer TSS o hacer gs dentro de la carpeta de contacto Ahí es exactamente cuando esta carpeta se convertirá en una ruta. Haga clic en nuevo archivo. Y vamos a hacer page dot TSS. Dentro de RFC para generar el componente funcional de reacción. Página de contacto. Puedes usar una etiqueta H one si quieres. Echa un vistazo. Ahora, cuando revises el navegador, vas a ver la página de contacto. Vamos a enrutar la página de perfil. Voy a hacer Lost than profile. Cuando golpeas en el ak, Devuelve una página de 404 ernaut encontrada Supongo que a estas alturas deberías saber exactamente qué hacer a tu final. Publica el video e implementa la ruta del perfil. Déjame ayudarte con eso. W en el directorio del perfil, clic derecho, nuevo archivo, y lo vamos a llamar página punto TSX Simplemente porque estamos usando script tipo. Por eso vamos con la extensión punto TSS. Él en la clave enter, nuevamente, RFC para generar el componente funcional reaccionar Aquí, voy a hacer página de perfil. Vamos a implementarlo dentro de la etiqueta H one. Corte esto, colóquelo dentro y hueso. Todo bien. Guardar en el navegador, ¿lo ves? Ahora, ahora la página es visible. Puedes darle un nombre de clase a la etiqueta Hadron, y luego vamos a hacer texto nueve Excel Esta clase de utilidad de viento de cola simplemente significa que estamos aumentando el tamaño de fuente a su RM. Cuando veas y revises el boom del navegador. Ya ves, se vuelve muy audaz así. Ahora bien, así es exactamente cómo implementar el ruteo en la próxima S. También podemos enrutar a la página de contacto, así como esta y boom. ¿Puedes ver? Toma nota de estos puntos clave. Las rutas se asocian con los archivos en función del nombre de las carpetas que contienen dentro del directorio de la aplicación. Un punto TS de página dentro la carpeta de contacto se mapeará para cortar el contacto, y un punto de página TSS dentro la carpeta de perfil se mapeará para cortar Es por eso que cuando vienes aquí y haces contacto de corte, obtienes la página de contacto De hecho, en realidad podemos darle un color de fondo, para que entiendas de lo que estamos hablando. Aquí vamos a dar el nombre de la clase SV. Entonces dentro del nombre de la clase, vamos a hacer uso de la clase de utilidad, PG amarillo, 500. Cuando guardas y revisas el navegador, y aquí está la página de contacto. En resumen, cada carpeta dentro del directorio app corresponde a un segmento URL, cuando se crea una página con un punto TS o una extensión de punto GS dentro de la enseñanza Good. Hermoso. 11. Ruta dinámica: En la conferencia anterior, se discutió la ruta anidada Entonces creamos más a los usuarios. Y dentro de los usuarios más adelante, seguimos al primer usuario y al segundo usuario Y dentro tenemos una página TSS, que corresponde a la parte URL, slash user slash Fs user, y slash user slash segundo usuario Aunque este enfoque funciona perfectamente bien, pero al construir una aplicación de recompensa, no siempre es posible definir una ruta basada en una parte predefinida. Entonces déjame desglosarlo rápidamente usando un ejemplo de recompensa. Este es el elegante y súper rápido siguiente sitio web de portafolio de Jazz que vamos a construir en este curso. Y por cierto, el enlace está justo dentro de la descripción. Por lo que te animo mucho a que te inscribas. Hay tanto valor que aprender de ello. Aquí he enumerado algunos de los post del blog. Ahora, si hago clic en alguno de los elementos, deberíamos poder pasar el artículo a una nueva página. Déjame mostrarte, por ejemplo, cuando haga clic en este tipo, échale un vistazo. Si observas bien la UR, vas a ver un detalle de cartera de slash s cero Significa que este ítem tiene el ID de cero. Vamos a probar con otro artículo. Volvamos a casa. Déjame probarlo con este tipo. Ahora, si observas el camino, verás detalle de cartera de slash, slash cinco Simplemente implica que este ítem tiene el ID de cinco. El sistema de enrutamiento dinámico nos permitió pasar este ítem a una nueva página. Y con la ayuda del ID, podemos obtener los datos correspondientes Puedes ver a la izquierda, puedes ver los datos correspondientes a este ítem. Entonces esto ejemplifica el sistema de enrutamiento dinámico. No he discutido todo esto. Dirígete rápidamente al código VS y menos practicarlo. Volver al código VS. Entonces vamos a crear una nueva carpeta cad blog. Entonces dentro del blog, vamos a crear una página punto TSS Voy a hacer slash page TSS. Entonces este es un atajo para crear una carpeta y una página dentro. Entonces cuando golpeas en la clave enter, aquí está el blog. ¿Puedes ver? Aquí está la página Ts, generar el componente funcional. Lo que deberíamos hacer ahora mismo es renderizar una entrada de blog. La forma en que podemos hacer eso aquí mismo, vamos a usar la etiqueta H one, y voy a hacer block post uno así, resaltar, duplicarlo ocho veces. Después cambiarlo para bloquear el poste dos, tres, cinco, seis, siete, ocho. Cuando guardes el proyecto, vuelve al navegador y veamos qué tenemos. Bien. Tenemos que navegar hasta la app demo. Y voy a hacer slash blog. Echa un vistazo. Ahora hemos podido renderizar la publicación de bloque en el navegador. Entonces, la siguiente línea es hacer clic en cualquiera de los ítems y luego pasarlo a una nueva página. Y ahí es exactamente donde entra en juego el enrutamiento dinámico. Ahora vuelve al proyecto. Entonces dentro de la carpeta block, click derecho, vamos a crear una nueva carpeta llamada block ID. Para crear una ruta dinámica, tenemos que cerrar el nombre de la carpeta dentro de un corchete. El corchete significa una ruta dinámica. Ahora voy a hacer ID de blog, simple como eso, o puedes hacer post ID. Hagamos post ID. A lo mejor es más legible así. Identificación del puesto. Dentro del ID de publicación , haz clic derecho, y luego vamos a crear una nueva página. Esto se llamará página Terex, generar el componente funcional Aquí vamos a tener una etiqueta Hage one, y voy a hacer página de detalles Cuando hacemos clic en cualquiera de los elementos del bloque, deberíamos poder pasarlo a esa página de detalles. Cuando guardes y revises el navegador, ahora vamos a hacer slash blog slash, por ejemplo, vamos a hacer uno Cuando presionas la tecla enter, y ahora ves la página de detalles. Cuando hagas slash blog slash, 100, también vas a ver la página de detalles Slash 800, o cualquier identificación que tengas dentro de tu proyecto Entonces vas a ver la página de detalles. Th deberíamos sacarlo a colación un poco. Estamos avanzando, y me gusta. Entonces, en simplicidad, a continuación, tratar un corchete como un segmento dinámico que nos permita crear una multitud dinámica. Entonces, cuando una carpeta está envuelta dentro del corchete, no es necesario hacer referencia a la carpeta dentro la URL antes de poder obtener el contenido dentro de la página. Por lo que la esencia de la ruta dinámica es poder extraer el ID de un puesto y luego trabajar en el poste individualmente. Entonces, por ejemplo, volvamos a la primera demo. Entonces, si extraes el ID de este contenido, al hacer clic, con base en el ID, podremos realizar alguna operación sobre el mismo. Por lo que podremos recuperar los datos correspondientes. También podemos eliminar y hacer lo que queramos hacer con los datos. Entonces ahora déjame mostrarte cómo extraer el ID. En los siguientes gs. Cada página en el router recibe un params de ruta como sondas Así que Gana la página, asegúrate de abrir el ID de publicación así y luego la página ts. Witin la función. Entonces vamos a tomar los params como sondas. Una vez hecho esto, lo siguiente en línea es vincularlo con la UI. Extremadamente fácil de hacer eso. Gana la etiqueta hedge one, vamos a abrir y cerrar los corchetes C, y dentro del corchete C, voy a hacer params dot post ID Tan simple como eso. Toma notas, el segmento dinámico que creamos debe corresponder con la IU. Entonces lo que sea que tengas dentro este segmento dinámico como el ID de post, eso es exactamente lo que tendrás aquí. Así que por favor asegúrate de que la ortografía correcta porque esto es exactamente lo que estamos haciendo referencia, y estamos tratando de vincular estas cosas aquí con la interfaz para extraer el ID, así de simple como eso Entonces la aplicación se está quejando, tenemos que definir el tipo Los params es un objeto con una clave llamada post ID, y el tipo es string Esa es exactamente la forma de definir tu tipo cuando se trabaja con script de tipo. Aquí, vamos a hacer params. El objeto tiene un ID de post con la cadena de tipo, y ahora hemos satisfecho el tipo. Vamos a comprobarlo en el navegador. Ahora voy a hacer slash blog slash 200. Echa un vistazo. ¿Puedes ver? Ahora tenemos DTS página 200 Entonces esta es la identificación. Lo estamos agarrando de la URL. Déjame mostrarte algo. Aquí, vamos a dar el nombre de la clase, y luego voy a hacer texto nueve Excel. Hermoso. Hagámoslo más legible. Página DTS con el ID y el hueso. Tenemos página de detalles con el ID 200. Comprobemos otro. Hagamos 17. Detalles de la página con el ID 17. Entonces podemos hacer 800, y así sucesivamente y así sucesivamente. Ahora hemos podido tomar el ID de la URL. Entonces podemos comenzar a trabajar en el puesto. Esto es todo por ahora, y si le resulta útil esta conferencia, asegúrese de romper el tablero de luz y de lo contrario, presione suscribirse. 12. Ruta dinámica anidada: Siguiente multitud dinámica. Al construir una aplicación compleja. Definitivamente te encontrarás con un escenario en el que se requieren varios segmentos dinámicos de multitudes. Déjame mostrarte un ejemplo del sitio web de Reward. Bien. Este es el sitio web de Reword, por supuesto Hemos visto que al hacer clic en este ítem, pudimos pasarlo a una nueva página, ¿verdad? Hermoso. Ahora lo que queremos hacer es buscar también un comentario que se escribió sobre el post. Entendido. Por ejemplo, haces clic. Se abre en una nueva página, recogiéndose los detalles por el ID Y luego cuando te desplazas hacia abajo, deberíamos poder ver el comentario escrito sobre este post. Bueno. Entonces si queremos especificar la ruta, podemos hacer slash portfolio det zero, slash comment slash Entendido. Hermoso. Vuelva al código a menos que lo implemente rápidamente. Como su nombre lo indica, todo lo que tenemos que hacer es crear una nueva carpeta dentro del ID de entrada. Aquí está el bloque, tienes que abrirlo dentro del ID del post, click derecho, crear una nueva carpeta. Y vamos a llamar a estos comentarios. Dentro del comentario click derecho, crea una nueva carpeta. Y en este tiempo, queremos crear una siguiente ruta dinámica. Entonces, para crear una ruta dinámica, todo lo que tienes que hacer es envolverla en el corchete. Entonces vamos a hacer comentario ID así como este. Y dentro del ID de comentario, click derecho, tenemos que crear una página dentro de la página punto T sex. Aquí vamos a hacer RFC para generar el componente funcional Ahora estamos tratando de que se escriba el comentario sobre un post en particular. Creamos un comentario de código de carpeta dentro del ID de publicación, y dentro del comentario, creamos nuestra ruta dinámica, y aquí está la página dentro. Entonces, para una identificación de publicación dada, una página hacer TSS dentro de la carpeta de comentarios, que es este tipo ayudará a mostrar la revisión de la publicación por su ID Et lo practican. Entonces dentro, claro, tenemos que tomar los params, y ¿cuáles serán los params ahora Por supuesto, los params es un objeto con el ID de post y el ID de comando Habiendo hecho esto, vengamos aquí y hagamos algo. Bien. Usemos la etiqueta H one. Gana. Voy a hacer Params punto ID de comando Déjame mostrarte. Por favor, tienen que ser estos. Vaya, échale un vistazo Hemos esparcido algo erróneamente por aquí. Hay que ser gramaticalmente exactos. Así que vamos a quitar la n así. Se trata de identificación de elogio. Se puede dejar, pero hay necesidad de ser gramaticalmente en honestamente Entonces lo que voy a hacer ahora es cerrar el explorador, y luego tenemos el ID del comando punto de Params Este params es el segmento URA aquí para el ID de comentario, que es el segmento dinámico aquí, y debe ser exactamente la misma ortografía por aquí cuando intentas vincularlo aquí Entonces tenemos Param dot command ID, que es el segmento dinámico que creamos Tratando de explicarlo simplemente para que todos lo entiendan lo suficientemente bien. Entonces aquí vamos a hacer para las publicaciones de bloque, Param punto post ID Cuando veas y check out al navegador. Block slash, el ID es uno, slash, Comment slash Y aquí tienes comentarios uno para block post uno. Entonces si lo haces aquí, por ejemplo, 800, entonces vas a ver comentarios 800 para la publicación de bloque 800. Entonces así es exactamente cómo implementarlo. Volver al código. Tenemos que satisfacer este tipo antes de cerrar la conferencia. Por supuesto, params es un objeto. El ID de publicación es tipo string. El ID de los elogios también es tipo string. Entonces se satisface el tipo, los errores se han ido todos. Bien. 13. ErrorPage (archivos especiales): Cuando se dirige a una ruta que no está definida dentro de la carpeta de la aplicación. A continuación, renderizaremos una página de 44 errores no encontrados por falla D. Déjame mostrarte rápidamente. Por ejemplo, todos ustedes saben que no tenemos ninguna ruta como slash Portfolio, no tenemos esta ruta dentro de nuestro proyecto Al presionar la tecla Intro, Eche un vistazo. Dice cuatro oh cuatro, esta página no se pudo encontrar. Esta es exactamente una de las bellezas de los próximos gs. Te ayuda a definir una página de error de cuatro oh cuatro no encontrada. Sin embargo, al construir una aplicación de recompensa, definitivamente querrías diseñar una página de error más hermosa de cuatro oh cuatro no encontrada. Todo bien. Veamos cómo podemos implementar eso. Vuelve a tu proyecto y luego w en el directorio de aplicaciones. Haga clic con el botón derecho y luego vamos a crear un nuevo archivo. Y esto se llamará no encontrado punto TSX. ROFC para generar el componente funcional, y aquí, lo que voy a hacer ahora mismo es, digamos, echar un vistazo a esto, quitar el guión entre los no encontrados para que la función no se queje Entonces dentro, vamos a tener una etiqueta He one y dentro del hedge una etiqueta, voy a hacer página no encontrada Y luego vamos a tener otro seto una etiqueta. No se pudo encontrar el recurso solicitado. Entonces ahora puedes seguir adelante para agregarle color y luego diseñarlo a tu gusto. Cuando vuelves al navegador, y luego puedes ver la página no encontrada, no se pudo encontrar el recurso de solicitud. Entonces así es exactamente cómo implementar cuatro o cuatro páginas de error no encontradas en los próximos años. Si apuntas a alguna ruta que no tengas en tu proyecto, esta página definitivamente subiría. Entonces digamos, por ejemplo, Localho que carros. Ya que no tenemos ninguna ruta dentro nuestro proyecto que corresponda a los cortes, por lo que nos va a redirigir a la página no encontrada. Y así exactamente es como implementar el cuatro oh cuatro error no encontrado página. que puedas seguir adelante para agregarle más colores, la fuente y todo lo que quieras hacer. Puedes seguir adelante para hacer eso. 14. Colocación de archivos: Ubicación de archivo co. Colocación de archivos significa simplemente la forma en que organizas tus archivos de proyecto en los siguientes gs Tomemos este ejemplo rápidamente. Dentro de la app, vamos a crear un dashboard de carpetas. Dentro, vamos a crear un archivo establecido en puntos, TSX. Generemos rápidamente el componente funcional. Vamos a comprobarlo en el navegador. Tablero de Slash. No se pudo encontrar el recurso solicitado. ¿Sabes por qué? Es simplemente porque este archivo no es enrutable Recordemos que en la conferencia anterior, mencioné que cada vez que se crea un directorio dentro de la carpeta app, ese directorio automáticamente se convierte en una ruta cuando una página hace TSS o se crea una página de puntos dentro Entonces esa es la convención, y ahora estamos haciendo ajustes punto TSS Esto no va a funcionar. Para que podamos colocar este archivo correctamente Lo que tenemos que hacer es dentro del tablero, voy a hacer nuevo archivo. Entonces vamos a tener un punto de página TSX como este, RFC para generar el componente funcional, bien Lo que tenemos que hacer ahora es volver a la configuración, y luego copiemos esto rápidamente. La función como esta, resaltar copiar, volver a la página, vamos a pegarlo aquí, así. Cuando ahorras, Como tenemos que guardar algo aquí así. Cuando vuelves al navegador, y ahora la página es enrutable Pero aunque es posible que no puedas ver la configuración por aquí. Pero al menos ahora la página es enrutable. Otra forma en la que puedes organizar tu archivo y que te recomiendo encarecidamente es que crees una carpeta de componentes separada para tu interfaz de usuario. Dentro del recurso, que es el SRC, haga clic derecho, nueva carpeta, y luego llamarlo componentes Dentro de este componente es donde se va a sentar toda tu interfaz de usuario. Dentro del componente, puedes tener algo como esto, los componentes para el hogar hacen GS. Por lo que ahora se puede generar el componente funcional. Y aquí puedes comenzar a construir tu UI. Esta es una de las mejores formas de cocate tu archivo. Y todas estas paradas, la vamos a practicar en el futuro cuando empecemos a construir el sitio web de la cartera de recompensas. Por supuesto, se despliega por allá en buque. Puedes echarle un vistazo para ver lo bonito que es, y les sugiero encarecidamente a todos que inscriban porque tenemos mucho que le. 15. Carpeta privada: Bienvenidos de nuevo a clase. En esta conferencia, vamos a discutir en detalle las carpetas privadas. La carpeta privada es un futuro proporcionado por next S para ayudarte a organizar eficazmente tu proyecto. Esta carpeta y todas sus subcarpetas no son enrutables. Incluso si apuntas al segmento de ruta, no se renderizarán en la pantalla. Entonces, para crear una carpeta privada, hay que prefijar el nombre de la carpeta con un guión bajo Déjame mostrarte abrir el Explorer. W en la aplicación, haga clic derecho. Imaginemos que quieres realizar alguna operación privada dentro de la carpeta de la biblioteca. Para que las notas de esta carpeta sean enrutables, todo lo que tienes que hacer es prefijarlo con un guión bajo, y luego presionar la tecla enter Ahora tenemos prefijo con un guión bajo. Haga clic derecho y vamos a crear un nuevo archivo. Así que voy a hacer página TRX, luego pulsa la tecla enter Cuando haces RFC y boom, yo voy a hacer aquí, esta es la página Privada Bien. Cuando dices incluso echa un vistazo al navegador. Veamos qué tenemos. Slash, guión bajo, Es la archia, y vamos a ver la página no encontrada. ¿Puedes ver eso? Entonces esto es simplemente porque cada vez que prefacias un potenciym con un guión bajo, continuación lo tratas como una Entonces no va a ser enrutable. Pero veamos ahora cuando eliminemos el guión bajo, veamos qué pasa Vamos a quitarnos el guión bajo así. Boom. Vuelve al navegador y también, quítate el guión bajo, así y la bomba Esta es la página privada. Entonces ahora hemos eliminado el guión bajo. Ya no es una página privada. Pero si quieres que sea una página privada, tienes que volver atrás y luego prefijarla con un guión bajo Y donde esta esta carpeta. Todo bien. Aquí está. Haga clic derecho, renombrar. Entonces aquí vamos a tener el guión bajo, así como esto Echa un vistazo. Dice, no encontrado, los resultados solicitados no se pudieron encontrar. Entonces, siempre que prefijas una carpeta con un guión bajo, indica que la carpeta tiene algunos detalles de implementación privados, y esa carpeta no debe ser considerada por el sistema de enrutamiento, y con ello optando la carpeta y todas sus subcarpetas fuera del Enseñanza buena, Hermosa. 16. Grupo de rutas: En esta conferencia, vamos a discutir el grupo de Ruta. El grupo de rutas es una característica muy hermosa de la siguiente S que le permite organizar su segmento de ruta y archivo de proyecto en un grupo lógico sin afectar la estructura de ruta URA. Si quieres crear un grupo de rutas, todo lo que tienes que hacer es envolver la carpeta en parentenss, y esa es exactamente la convención No he puesto todo esto. Practicémoslo rápidamente implementando un sistema de autenticación con la página de registro, la página sesión y olvidar la contraseña Haga clic derecho en la aplicación, nuevo archivo. Vamos a crear el orden de registro slash una página Ts. P es el archivo. Hermoso. RFC para generar el componente funcional, y dentro, veamos qué podemos hacer aquí Vamos a tener una cabeza una etiqueta, y voy a hacer Registrar página. Vamos a darle un nombre de clase. Después texto, hagámoslo cinco Excel. Fondo serf. Hagamos esto e Excel. Nuevamente, haga clic derecho sobre la aplicación, nuevo archivo. El siguiente es el inicio de sesión para crear la página Ts. Tienes que usar la diagonal hacia adelante y luego página TSX. Nuevamente, generar el componente funcional rápidamente. Volvamos a la página de registro, destaca la etiqueta Hage one, policía, ven aquí Pegar. Aquí vamos a hacer página de inicio de sesión. Puede hacerlo más hermoso especificando el color de fondo y todo eso. Por último, vamos a crear la contraseña olvidada. Nuevamente, vamos a pegar la etiqueta de la edad uno, y luego aquí se va a olvidar la contraseña. Bien. Fresco. So Safe, asegúrate de ejecutar la aplicación. Como pueden ver, el mío ya está funcionando, así que solo tengo que esconder la terminal. En el navegador, vamos a hacer localhost tres que registrarse Aquí está la página de registro. Hermoso. Cuando hago slash login, aquí está la página de inicio de sesión Por último, se le olvidó la contraseña. Y aquí está la página de contraseña olvidada. Aunque todo parece estar funcionando perfectamente bien, pero este enfoque no está organizado. No es una buena práctica. Porque si otro desarrollador recoge tu proyecto, estructura de tu proyecto será difícil de leer. Por lo tanto, tenemos que organizar nuestro archivo relacionado con la autenticación en un fer padre. Por ejemplo, déjame mostrarte, digamos que entregaste este proyecto a otro desarrollador. Entonces si el desarrollador quiere implementar algo dentro del login, la estructura no está organizada. Si estás construyendo una aplicación compleja, lo más probable es que tengas más de 20 archivos. Dentro de la aplicación, cree una nueva carpeta llamada th. El siguiente en la línea es mover la página de registro a la th. Nuevamente, tenemos que mover la página de inicio de sesión o la ruta de registro al dd. Por último, también tenemos que mover la contraseña falsificada a la tierra así. Esta es una de las mejores formas de organizar tu código. Por ejemplo, si otro desarrollador recoge tu código y si quieres hacer algunos cambios dentro de la página de inicio de sesión o de registro, siempre pueden ir al directorio earth porque ese es exactamente el lugar donde albergamos todos los archivos relacionados con la autenticación. Cuando haces clic para abrir, vas a ver la contraseña forjada, el inicio de sesión y el registro. Entonces esto es más coincz. Ahora, déjame mostrarte el problema. Cuando vuelvas al navegador, vas a ver la página no encontrada. Esto sucedió porque hemos movido el archivo fuera de la carpeta padre. Anteriormente, estaba dentro del directorio de aplicaciones, y ahora creamos una carpeta padre cortada y movimos el archivo dentro. Para que te acerques a la ruta de los registros, debes tener que hacer referencia a la O. Déjame mostrarte. Vamos a hacer slash of slash register. ¿Ves? De nuevo, slash slash Iniciar sesión Todo parece estar funcionando perfectamente bien, pero la estructura de ruta URA se está viendo afectada. Recordemos que cuando creamos la página de registro, host local 3,000 slash register Ahora dice página no encontrada. La idea es agrupar cuidadosamente la ruta sin tener que afectar la estructura del camino URA. ¿Cómo implementamos eso? Vuelve al código y déjame mostrarte. Entonces, para implementar correctamente un grupo Route, todo lo que tienes que hacer es envolver el directorio padre con parentenss Haga clic derecho en Cambiar nombre. Entonces aquí, voy a abrir el soporte aquí, y luego cerrarlo aquí. Diga ayer. Entonces, cuando vuelvas al navegador, podrás enrutar la página de contraseñas sin tener que hacer referencia al off. Además, el inicio de sesión y el registro. Entonces este fuera de aquí ya no es visible en la estructura URA. Déjame mostrarte. ¿Puedes ver? Hermoso. Vamos a hacer, cortar, iniciar sesión ¿Puedes ver? Todo está funcionando perfectamente bien como se esperaba. Enseñar bien. Hermoso. 17. disposición/composición/diseño: Bienvenidos de nuevo a clase. En esta conferencia, vamos a aprender y entender el concepto de maquetación. Ahora bien, ¿qué es exactamente un layout? El diseño es simplemente una interfaz de usuario que se comparte entre varias páginas de la aplicación. Al construir un sitio web complejo, lo más probable es que desee tener un encabezado que se mantenga consistente a lo largo de las páginas, y que se pueda lograr mediante el uso de diseño. Ahora bien, la pregunta es, ¿cómo definimos realmente un layout? Un diseño se puede implementar por defecto exportando un componente de reacción desde un punto de diseño TSS o un punto de diseño GS Y el componente de diseño aceptará un apuntalamiento hijo que se rellenará con una página de gráfico durante el renderizado Toma nota de este punto clave. El diseño sirve como el componente raíz de cada aplicación GS siguiente. Debe tener una etiqueta HTM y un cuerpo. Abra la aplicación y luego dentro de la aplicación. Aquí está el diseño raíz. Creo que te lo mostré en la conferencia anterior. ¿Puedes ver? Entonces tiene una etiqueta HTM, un idioma que se dice al inglés, y luego tiene un cuerpo. Tomemos, por ejemplo, que queremos implementar un componente de encabezado que se mantenga consistente o a través del proyecto. Entonces digamos que queremos un componente encabezado y un pie que se mantenga consistente o a través del proyecto. Ahora dentro del componente aquí dentro del componente, haga clic derecho en nuevo archivo. Y voy a hacer aa punto es. Chicos, voy a ser un poco más rápido ahora mismo. Entonces aquí voy a hacer Pie a punto es. Dentro de la Futa, hagamos FC para generar el componente funcional Y aquí vamos a darle un nombre de clase, y luego vamos a darle un guión BG. Este es el Futa vamos a darle un guión BG. Tablero amarillo 300. Entonces esta es la Futa. Lo que voy a hacer ahora mismo es copiar parte de la prueba del th, porque ya me encanta el diseño. Solo tengo que copiar el Hage dentro del registro o la página de inicio de sesión Ven aquí dentro del pie de página y pega. Aquí voy a implementar el padding, P por haber hecho todo esto. Rápidamente tengo que copiar este de aquí, y luego ir a encabezar un punto S, RFC para generar el componente funcional Entonces dentro de la devolución, solo hay que pegar. Guarde y maketure para formatear el código. Todo bien. Ahora cambiemos el amarillo a azul 300, algo así. Entonces aquí vamos a hacer operaciones, miren. Esta debería ser la página principal. Y guardas, vuelve al pie de página, y esta debería ser la página del pie de página. Ya estamos construyendo una aplicación de recompensa, y eso es agradable. Entonces esta es la página de inicio de toda la aplicación. Queremos que el encabezado y el pie de página se mantengan consistentes a lo largo de las páginas. Entonces, si vas a la página de bloqueo, se mostrará el encabezado y el pie de página, los usuarios, la autenticación, y todas las páginas. Entonces la forma en que podemos hacer eso ahora mismo es desplazarnos un poco hacia arriba, layout TSS, desplazarnos hasta la parte superior y aquí vamos a poner encabezado de punto punto slash componente slash Entonces, por último, vamos a poner pie de página de componentes de barra, pie de página de barra Por aquí, tenemos que hacer que el encabezado lo cierre con la etiqueta de cierre automático. Y aquí vamos a renderizar el pie de página. Cuando guardas y revises el navegador y haces esto. Ahora cuando haces slash blog. Puedes ver, el encabezado aparecen tanto en la página del blog. Y entonces podemos hacer perfil de barra diagonal. Tenemos todas estas rutas dentro del proyecto. Por supuesto, lo implementamos en las conferencias anteriores. Y boom. El encabezado y el pie de página son consistentes a lo largo del proyecto. Entonces los vas a conseguir en cualquier parte de tu página. Entonces ese es exactamente el concepto de un layout. 18. Grupo de grupo de rutas de diseño: Bienvenidos de nuevo a clase. En la conferencia anterior. Aprendimos a crear generalmente un diseño que pueda mantenerse consistente o a través de las páginas. Pero a veces es posible que desee crear un diseño único que se aplique a una página específica en su aplicación. Supongamos que quieres que otra página del usuario tenga un fondo similar. Puedes crear un layout dentro y luego cuando ejecutes la aplicación, la página entrará en el layout y asumirá la forma y el fondo. Vamos a practicarlo rápidamente. Dentro de los usuarios, vamos a crear un layout. Disposición punto TSX, así como esto. Entonces vamos a generar rápidamente el layout. Solo tengo que copiar y pegar, y puedes pausar el video al final para escribir todas las cosas ahí mismo. Lo que hice aquí mismo, Empecemos de cero. Sólo tengo que limpiar a este tipo. Bien, entonces vas a darle así el nombre de esta clase dv. Gana el nombre de la clase, el fondo va a ser el sd, 200. Y entonces la pantalla va a ser es de 100 vista de altura. Habiendo creado este fondo, la ruta del primer usuario y la ruta del segundo usuario entrarán en este trazado como niños, y aquí está. Entonces puede asumir esta propiedad por aquí. Entendido. Hermoso. Cuando guarde la aplicación, consulte el navegador. Cuando haces Lhost 3,000 usuarios slash slash primer usuario. Y luego vas a ver al primer usuario con el color de fondo del rojo. Ahora hagamos algo. No me gusta el fondo rojo, y por cierto, esa es mi opinión. Yo sólo voy a hacer azul aquí mismo. Azul 200. Creo que es genial así. Podemos llegar a ser 100. Bien. Este es el filtro, y este es el encabezado. Recordemos que renderizamos el encabezado y el componente footer dentro del layout raíz. Esa es la razón por la que puedes ver el encabezado y la fola alrededor de las páginas en la aplicación Pero para el layout, creamos dentro de los usuarios. El primer usuario y el segundo usuario es la única página que puede entrar en este layout. Incluso si haces slash usuarios slash, segundo usuario, hagamos algo como Puedes ver ahora tenemos segundo usuario y asumió el mismo color de fondo. Ahora lo cambias a amarillo y aparece muy bien. Así que cada vez que estás construyendo una aplicación, y quieres que dos o tres páginas diferentes asuman la misma propiedad, todo lo que tienes que hacer es crear un diseño dentro del padre más adelante. Y entonces todas las rutas dentro del padre más adelante definitivamente entrarían en el diseño. Es tan sencillo como eso. Ahora la pregunta es, qué pasa si tenemos otro usuario, pero no queremos que ese usuario asuma el mismo fondo. Entonces aquí es exactamente donde entra el reto. Déjame mostrarte. Digamos, por ejemplo, que tenemos hasta terceros usuarios. N su archivo, voy a hacer tercera er página TSX. Generar los componentes funcionales. Entonces aquí, solo tenemos que ir al primer usuario y copiar las propiedades. Vamos a copiar las propiedades de aquí. Por supuesto, puedes comprobarlo cómo implementé estas propiedades detrás de escena. Aquí tenemos la patente cuatro. Pat y top es 20. El tamaño del texto y la altura de línea es ocho Excel, la fuente es extra ligera. Para que puedas hacer eso a tu final. Bien, hablo demasiado, de verdad. Es por tu propio bien, porque quiero explicarte todo. Aquí, vamos a hacer usuario de la Fed, así como esto, ¿de acuerdo? Cuando ahorras. Entonces, cuando lo haces, los usuarios recortan el usuario de la Fed. Y aquí está el tercer usuario, asumiendo el mismo fondo de propiedad dentro de este layout. Entonces el tercer usuario, el segundo usuario y el primer usuario. Toda esta página de aquí va a entrar en el diseño, y ellos residirán aquí como los niños. Entonces cuando esto suceda, esta propiedad se aplicará a los hijos, que en este caso, el primer usuario, segundo y el tercer usuario. Pero ahora mismo, el reto es excluir al tercer usuario. Por lo que no queremos que el tercer usuario entre en este layout. Queremos estilizarlo de otra manera. Lo que tenemos que hacer ahora mismo es crear un diseño de grupo de rutas. Es bastante sencillo hacerlo. Ahora dentro de este usuario, se trata de los usuarios padres. Vamos a crear una nueva carpeta, maquetación de usuarios. Ahora, lo que vamos a hacer es mover este layout dentro del layout del usuario así. Una vez hecho eso, también tenemos que mover al primer usuario dentro del layout del usuario. Por último, tenemos que mover al segundo usuario al layout del usuario. Habiendo hecho esto, lo que tienes que hacer es abstraer esta carpeta lejos de la URL para que no tengamos que hacer slash users slash users layout, slash, first user Ahora cuando vuelvas al navegador, te darás cuenta de que el tercer usuario ya no asume la propiedad del layout. Pero tenemos un problema aquí mismo. Gana la URL, tenemos que apuntar al layout del usuario. Slash, primer usuario. I Si observas con atención, te darás cuenta de que estamos haciendo demasiadas cosas solo para apuntar al primer usuario. La mejor práctica es abstraer el diseño del usuario lejos del segmento URL. La única forma en que podemos hacerlo es envolver el layout del usuario en parentenss, así. Pulsa la tecla Intro. Con esta implementación, hemos logrado abstraer el diseño del usuario del segmento URL Este tipo de aquí mismo no será inyectado en la URL. Ahora cuando te diriges al navegador, dice, página no encontrada. ¿Sabes por qué? Es simplemente porque el diseño de los usuarios se está abstrayendo del segmento URL Al hacerlo, no se va a inyectar en la URL. Todo lo que tenemos que hacer es limpiarlo así. Ahora va a ser Localhost 3,000 usuarios de slash slash slash usuario de Fas y boom ¿Puedes ver? Todo está funcionando perfectamente bien como se esperaba. Cuando haces Localhost slash usuarios slash tercer usuario. El tercer usuario ya no puede hacer uso de las propiedades dentro del layout. Entonces así es exactamente como puedes crear tu propio diseño y luego abstraer algunas de las páginas que no quieres asumir las mismas propiedades. En este ejemplo, queremos que el primer y el segundo layout asuman el mismo fondo, y luego queremos crear un layout único para el tercer usuario. Quiero mostrarte todo. Tercer usuario, p Ts, vamos a darle un nombre de clase de fondo, y luego Bg rojo 200. También podemos darle una altura, pantalla H. Por lo que esto hará que la altura de vista sea de 100. ¿Puedes ver? Ahora hemos implementado un fondo único para el tercer usuario. Pero cuando revisas al primer usuario, tiene un fondo amarillo claro, y luego el segundo usuario también tiene el fondo amarillo claro. 19. Ruta de metadatos: Volvemos a clase. En esta conferencia, vamos a discutir el enrutamiento de metadatos. A la hora de construir aplicaciones profesionales. Garantizar una optimización SEO adecuada es crucial para mejorar dicha visibilidad que conduce a conversiones. La API de metadatos introducida por next GS le permite definir metadatos para cada página. Asegurar que la información precisa y relevante se guarda cuando su página es compartida o indexada. En esta conferencia, vamos a discutir cómo utilizar la API de metadatos para mejorar el enrutamiento de metadatos. Siguiendo la nueva convención de ruteo. Hay dos formas de configurar metadatos. Puede generar el objeto de metadatos estáticos o exportar una función de metadatos de generación dinámica. Esto puede sonar un poco complicado. Pero preocúpate, cuando empecemos a practicarlo, definitivamente lo entenderás lo suficientemente bien Ahora, abre el código VS y déjame mostrarte. Aquí mismo, tenemos que cerrar algunas de las cosas. Nosotros en la app. El diseño aquí mismo contiene los primeros metadatos. Los primeros metadatos que tenemos en nuestro proyecto se pueden ver en donde se encuentra el layout raíz. Haga clic para abrir. El diseño raíz está justo dentro del directorio de la aplicación. Este es el diseño predeterminado de cada aplicación S siguiente. Aquí están los metadatos. Dentro, tenemos el título y la descripción. Cuando vuelvas al navegador, ops, mira. Esta es la página de inicio. Implementemos rápidamente la altura. Dar el nombre de la clase rápidamente. Dale la altura de 100 pies de altura. Bien, mira, está funcionando bien. Entonces rápidamente vamos a darle un nombre de clase al H one. Entonces voy a hacer texto para Excel. Muy bien, bien. Página de inicio. Está bien. Se puede implementar el relleno y el resto de ellos, pero esa no es la intención de esta conferencia. Ahora, cerremos la página, volvamos a los layouts a TS. Entonces no he visto el título y la descripción. Cuando vuelvas al navegador, inspeccionemos rápidamente la consola. Abre la ventana del elemento. O Aquí, dentro de la cabeza, da click para abrir. Entonces cuando te desplazas hacia abajo, vas a ver el título criect next app De aquí es de donde viene justo aquí. Se puede hacer, digamos siguiente caso desde principiante hasta avanzado. Ahora, ¿puedes ver? W en el título, vas a ver el siguiente curso de principio a avanzar. No he visto los primeros metadatos. También podemos crear nuestros propios metadatos dentro de la página. Entonces déjame mostrarte cómo hacer eso. Tenemos que buscar una página que podamos usar. Así que intentemos usar el perfil aquí. Después abre la página TS. Entonces aquí en la parte superior, tenemos que definir los metadatos. En su interior, se va a tomar en una propiedad llamada título. Dentro del título, voy a hacer código con un do barbero. Guarda la aplicación y echa un vistazo al navegador. Ahora quiero mostrarte algo. Aquí está la página principal. Cuando vuelvas a cargar, y aquí tenemos el título como próximo curso de principio a avance Ahora, cuando haces s perfil. Vuelve a ver el título. Ahora se le llama con un do baba. Así es exactamente como puedes crear tus metadatos estáticos. Una vez hecho esto, veamos rápidamente cómo podemos crear metadatos dinámicos. Supongamos que está creando una aplicación de bloque. Y cada bloque tiene varios puestos. Al hacer clic en todas y cada una de las publicaciones, deberíamos poder ver el título de la publicación como metadatos. Hagámoslo rápido. Abre el bloque y dentro del blog aquí mismo, dentro de la página que TSS no aquí Este es para la página de un solo bloque. Abre el ID del post dentro, vas a ver los puntos de la página. Todo bien. Aquí es exactamente donde comienza el teléfono. Primero, tenemos que importar metadatos del siguiente. Importar entre parénteos, metadatos del siguiente. Una vez hecho eso, vamos a crear rápidamente el tipo. Ahora, params va a ser un objeto con un ID de post de cadena. Hermoso. Una vez hecho esto, vamos a exportar rápidamente los metadatos. L et's toman rápidamente en las palmas. No tuvimos que configurarlo en una función de flecha. Ahora vamos a regresar. Entonces con la devolución, vamos a acceder al título de propiedad. La entrada del blog. Entonces voy a hacer Params punto post ID Estamos tratando de vincular los metadatos y el ID de publicación. Entonces, cuando hagas clic en alguna publicación, vas a ver el título de esa publicación dentro del título de metadatos. Habiendo hecho esto. Por último, tenemos que alterar esta función aquí porque ya hemos creado el tipo aquí. Bien. Sólo tenemos que borrar éste así. Quítelo, y luego voy a hacer probs. Y habiendo hecho esto, bien, aquí hay un problema. Bien, chicos, echen un vistazo. Entonces cuando vengas aquí, vamos a darle post ID porque esto debe ser lo mismo con el cielo aquí mismo, que es el segmento URL. ¿Bien? Y aquí debería ser post ID, así como esto. Echemos un vistazo al navegador, actualicemos. Ahora voy a hacer Localhost 3,000 slash blog slash 800. Veamos qué pasa. Bien. Hermoso. Vamos a sacarlo en la ventana del elemento. Haga clic en la cabeza en. Y con en el título, vas a ver el bloque post 800. ¿Puedes ver el poste de bloque 800? Así que hemos logrado extraer el ID y luego pasarlo al título usando metadatos. Entonces si lo haces, por ejemplo, slash block, slash football Entonces cuando revises el título, vas a ver block post football. 20. TitleField: Metadatos de título. El propósito principal del campo de título es definir el título del documento, y puede ser una cadena o un objeto. Un ejemplo de campo de título de cadena es lo que tenemos aquí dentro del diseño. Este es el campo de título de cadena. En esta conferencia, seguiremos adelante para implementar el campo de título del objeto. Para lograrlo, lo que tenemos que hacer es limpiar a este tipo mientras tanto, y luego abrir y cerrar el soporte central ly. Asegúrate de colocar una coma aquí mismo. Nuevamente, asegúrese de importar los metadatos en una tina. Importar metadatos de tipo de siguiente. Habiendo hecho eso, dentro del título, tenemos tres propiedades diferentes. La primera propiedad es la absoluta. La segunda propiedad es la propiedad Default. Por último, la propiedad de plantilla. Ahora, hablemos de la propiedad Default. La propiedad Default es útil cuando se desea proporcionar un título para un segmento de ruta que no tiene metadatos. Por ejemplo, veamos una ruta de página dentro del proyecto que no tenga metadatos. Yo digo que tengo que cerrar esto para una comprensión adecuada. El usuario no tiene metadatos. Veamos qué tenemos aquí. Esta página no tiene metadatos. Cuando vuelves al layout, todo lo que tienes que hacer es, este es el título predeterminado para todos los layouts sin metadatos. Esto es por ejemplo sake, puedes usar una frase más legible al final que describa la intención de tu proyecto. Cuando veas incluso echa un vistazo al navegador, ahora vamos a hacer localhost slash, 3,000 slash usuarios slash d usuario La atención debe estar dentro de la ventana de elementos. Vamos a abrir la cabeza, desplazarnos hacia abajo, y luego ves que este es el cuarto título para todo el layout sin metadatos. Incluso si revisas, por ejemplo, los usuarios de slash slash slash el primer Este es el primer usuario, y tiene exactamente el mismo título. ¿Puedes ver esperanza puedes ver el título por aquí? Este es el título predeterminado para todo el diseño sin metadatos. Esto ejemplifica la propiedad predeterminada. La siguiente línea es la plantilla. La propiedad template es útil cuando se desea crear un título dinámico agregando un prefijo o una corrección S. Vamos a practicarlo rápidamente para que consigas la idea central. Aquí está la plantilla derecha. Lo que voy a hacer ahora mismo es el signo porcentual, y luego S así, algo así, y luego voy a hacer una Duba por digital Cuando guardes, abramos rápidamente la página de bloqueo. Usemos la página de bloques para esta. Aquí está el blog. Aquí está la página de bloque. Bueno. Dentro de la página de bloque, tenemos que importar los metadatos de la siguiente, luego habiendo hecho eso. Exportemos rápidamente. Y el tipo son metadatos. Especificar el título, y voy a hacer aquí lista de blogs. La idea es simple. Queremos usar esta lista de blogs de aquí para reemplazar, déjame mostrarte a este tipo. En el navegador, vas a ver lista de blogs, b datos. Guarda L et's echa un vistazo al navegador. Localhost slash 3,000 slash. Oh, Dios mío. Chicos, vivo cerca del aeropuerto. Entonces, si escuchas algún sonido del avión, simplemente implica que vas a viajar pronto. Todo bien. Vamos a continuar. Ahora vamos a tener el blog Localhost 3,000 Aquí dentro del título, se ve la lista de blogs y luego Duba digital Hemos utilizado la lista de blogs para reemplazar el cielo aquí mismo. Es decir, estamos suponiendo el sufijo a la lista del blog con los digitales Duba, tal y como se ve en el navegador dentro de la ventana del elemento Lista de blogs, doblaje digital. Siempre que quieras prefijar o sufijar algunas cosas dentro de tu proyecto, así es exactamente como implementarlo usando metadatos Hablemos de lo absoluto. Todo bien. La propiedad absolute es útil, si desea proporcionar un título que ignore la plantilla de título, establece dentro del diseño padre Por ejemplo, si quieres ignorar a los chicos de aquí mismo, toda la plantilla de título aquí mismo. Si quieres ignorarlo, tienes que hacer uso de lo absoluto. Volvamos a comprobarlo en el navegador. Aquí, tenemos lista de blogs y una Duba digital. Si vuelves a esa misma página, que es la página del blog, Ahora vamos a implementar lo absoluto. Lo que tenemos que hacer es limpiar a este tipo y luego introducir el objeto. Dentro del objeto, vamos a hacer absolutos. Sólo tengo que cerrar esto. Estamos implementando lo absoluto aquí mismo, así que ya no lo necesitamos dentro del diseño padre. Limpia esto así. Sa Aquí mismo, lo que tienes que hacer es, este es el título absoluto. Cuando revisas el navegador, puedes ver, este es el título absoluto aquí mismo. Todo esto se trata de enrutamiento y metadatos. 21. Enlaces y navegaciones: Bienvenidos de nuevo a clase. En la conferencia anterior, exploramos las siguientes técnicas de enrutamiento del sistema basado en archivos GS , y aprendimos a crear diferentes técnicas de ruta como la siguiente ruta dinámica de Ed y la ruta Ca. Sin embargo, notarás que hemos estado ingresando la URL manualmente dentro de la pestaña. Si queremos enrutar a la página del blog, tenemos que hacer Localhost 3,000 slash blog, así Y luego si queremos enrutar a la página de perfil, tenemos que hacer slash profile Desde el punto de vista del desarrollador, no hay nada de malo en esto. Pero desde el punto de vista del usuario final, se considera inadecuado porque es posible que los usuarios finales ni siquiera conozcan la ruta que tienes dentro de tu proyecto. Por lo tanto, deberíamos poder facilitarle al usuario final la ruta de una página a otra haciendo clic en un enlace, y eso por supuesto se implementará con el componente link presente en el próximo 14. Déjame mostrarte rápidamente. Vuelve al código VS, común B para abrir el Explorer. Gana la app. Entonces aquí está la página de inicio. La página hace S S que está justo dentro del directorio raíz, que es la aplicación. Cuando haces clic para abrir, aquí mismo, tenemos que implementar el enlace. Para implementar el enlace, primero, echa un vistazo. La siguiente imagen no está en uso. Entonces tenemos que importar el enlace del siguiente enlace de slash. Una vez hecho esto, implementemos rápidamente los enlaces debajo de la etiqueta H one. Entonces, supongamos que queremos enrutar a la página de bloqueo. Enlace, y por favor tome nota. El enlace está en letra mayúscula L. El hipertexto referencia equ, no vamos a usar el corchete C. En cambio, hagamos uso del código único o el código doble. Ahora, veamos algo. Dentro del explorador, te darás cuenta de que tenemos una ruta llamada blog, ¿verdad? Entonces para apuntar a esta ruta, todo lo que tenemos que hacer es slash, y luego tenemos que especificar la ruta, que es blog Sencillos eso. Entonces cierra el enlace. Aquí, voy a hacer block page. El HTML interno va a ser la prueba que se mostrará en la pantalla. Y cuando hagas clic en la prueba, te llevará a la página del blog. Siete echa un vistazo al navegador. ¿Bien? Tenemos que navegar a la página principal. Y aquí está el blog. Al hacer clic, ahora estamos en la página del blog. Enseñar bien. Hermoso. Entonces sabes que al implementar una aplicación de recompensa, cuando visitas la página de bloqueo, no tienes que hacer clic en la puñalada aquí mismo para volver En cambio, deberíamos poder implementar un enlace por aquí que nos redirigirá de nuevo a la página principal. Entonces lo que voy a hacer ahora mismo es volver al proyecto, dentro de la página de bloques. Esta es la página de bloque aquí mismo. Vayamos rápidamente desde el siguiente enlace de barra diagonal, y tenemos que poner el enlace en la parte superior así HREF igual. Vamos a hacer casa, y aquí, vamos a hacer a casa. Ahora, no tenemos que especificar un hogar aquí mismo. Deslímpielo. Entonces, si quieres enrutar a la página de inicio, la convención es especificar una barra diagonal hacia adelante como estas Esto será un puntero a la página de inicio. Al hacer clic en esta casa dentro del HTML interno. Serás redirigido a la página principal. Siete compruébalo. Y aquí está en la parte superior. Puedes ver, cuando haces clic en el Inicio, vuelves a casa, y luego haces clic en el blog, bloque. Y ahora estamos dentro de la página del blog. También podemos volver a la página de inicio. Todo está funcionando perfectamente bien como se esperaba. Ahora lo siguiente en la fila es implementar el sistema dinámico de hacinamiento Por ejemplo, si haces Localhost que slash blog slash 800 Ahora hemos podido pasar la publicación de bloque a la página de detalles. Entonces eso es exactamente lo que queremos hacer, ¿verdad? Entonces, por ejemplo, cuando vuelves a la página de bloqueo, si haces clic en el Bloquear post uno, deberíamos poder pasar el post bloque uno a una nueva página. No tenemos que escribir la URL manualmente en la barra de direcciones. Muy bien, hablé demasiado, de verdad. Pero es por tu propio bien. Entonces dentro de la página de bloques, lo que tenemos que hacer ahora es implementar la multitud dinámica. Ya importamos el enlace en la parte superior. Entonces aquí mismo, Lo que debemos hacer es sencillo. Destaca a este tipo, y luego córtalo, que es el texto HTML interno. Y entonces vamos a tener un enlace como este. Entonces este enlace, el H REF, que es la referencia hipertextual Slash block slash uno. Y luego aquí, vamos a pegar el bloque post uno. Tan simple como eso. Ahora, al hacer clic en el Bloquear publicación uno, se abrirá una nueva página con la publicación de bloque uno. Entonces así es exactamente cómo implementar un vínculo dinámico. Ahora tenemos que copiar el enlace, resaltar de las líneas 18 a 20 resaltar copia. Ven aquí. Destaca el texto interno de HTMA, límpialo y luego enmudece a este tipo Pero ahora tenemos que cambiar el ID a dos y el poste de bloque a dos también. Y así sucesivamente y así sucesivamente. Para que puedas hacer el resto al final porque eres un tipo listo. Por supuesto, puedes hacerlo. Tres, aquí van a ser tres. Bien, no perder el tiempo. Sólo tengo que guardar, volver al navegador, y veamos qué tenemos a bordo. Vamos a probarlo haciendo clic en Bloquear publicar uno. Echa un vistazo. Dice página Datos con el ID de uno. Echa un vistazo a la URL, bloquea barra diagonal uno, y ahora hemos logrado pasar el ID de un cabello Esto es tan bonito. Entonces, cuando haces clic en Bloquear publicación dos, Página de datos con el ID de dos, y así sucesivamente y así sucesivamente. Algo muy importante que quiero compartir con ustedes es la sustitución de sondas. Así que aquí, vamos a formatear rápidamente el código. Bien, ahora tiene una forma muy bonita. Entonces aquí puedo hacer algo como reemplazar. ¿Bien? Cuando guarde, veamos el comportamiento de las sondas de reemplazo. Este tipo. Vuelve al navegador. Ahora, pruébalo. Hacemos clic en Bloquear post uno. Abre la página B Dt con el ID de uno. Entonces regresas. Bloquear poste dos. Aquí, tenemos el ID de un puesto dos. Todo bien. Ahora, hagamos clic en Bloquear post tres. Quiero que notes el comportamiento. Cuando haga clic en este tipo de aquí mismo, ¿lo ve? Nos envía de vuelta a la página principal. Bien. Así la página del blog. La primera entrada de blog cuando haces clic, te lleva de vuelta a la lista de blogs. Y luego si haces clic en el segundo y vuelves, te lleva de vuelta a la página de la lista de blogs. Pero cuando haces clic en el Post tres, cuando vuelvas, te va a enviar de vuelta a la página principal. Entonces eso es exactamente lo que hace el prop de reemplazo. Dar el intento. Hago clic. Verás, nos envía de vuelta a la página principal. Esto está apagado por ahora, y en la próxima conferencia, discutiremos cómo estilizar condicionalmente un vínculo 22. enlaces condicionales: Bienvenidos de nuevo a clase. En la conferencia anterior, aprendimos a implementar los enlaces de navegación. Seguiremos adelante para estilizar el enlace en función de la condición. Por ejemplo, si observas este hermoso sitio web de portafolio, te darás cuenta de que estamos justo dentro de la página de inicio, y esa es exactamente la razón por la el enlace de inicio está resaltado porque la URL está activa. Además, al hacer clic en la cartera, se destaca el enlace de la cartera, simplemente porque la cartera URL está activa. Si haces clic en sobre mí, lo mismo aquí, simplemente porque la URL está activa, el enlace se marcará como seleccionado. Eso es exactamente lo que queremos implementar en nuestra aplicación demo. W en el proyecto C y B para abrir el explorador. Vamos a implementarlo en la página de registro. Aquí mismo, lo que tenemos que hacer es hacer clic en el layout. Por supuesto, sabes que la contraseña olvidada, el inicio de sesión y el registro definitivamente entrarían en el diseño. Ahora haga clic en el diseño para abrir y luego cerrar el Explorer. Lo primero que voy a hacer aquí mismo es destacar y luego hacer un comentario sobre los meta datos. Habiendo hecho eso en la parte superior, vamos a importar enlace de la siguiente colocación de barra Ahora, vamos a importar el nombre de ruta de uso. El nombre de ruta de Estados Unidos va a ayudar a paralizar bien al UR activo. Cuando se para bien la UR activa, entonces podríamos extraer la URL y estilizarla U nombre del camino, por supuesto, es un gancho, y viene de la siguiente nación slash Habiendo hecho todo esto, hagamos algo rápidamente. Nuevamente, cosas muy importantes que tienes que quitar de aquí es que queremos leer todos nuestros enlaces dentro de una matriz. Después de eso, solo tenemos que mapearlo a través de él. Así es exactamente cómo construir una aplicación como un profesional. Empecemos con una constante. Tener enlaces equ, abrir y cerrar array, y luego dentro de la matriz, vamos a tener el primer objeto Vamos a llamarlo por su nombre. El nombre va a tener registro. Esta va a ser la vibra interna de HTM. Va a ser el texto el que definirá el enlace. Ahora vamos a tener una cabeza ref. Además, tenemos que establecer la ref de cabeza para slash register. Sabiendo que tenemos una ruta llamada registro por aquí dentro del proyecto. Estamos apuntando a esta ruta. Ahora la siguiente línea es para resaltar, duplicada dos veces. Aquí, vamos a hacer inicio de sesión. Y va a ser slash Iniciar sesión. Por supuesto, aquí, vamos a hacer olvidé la contraseña. Todo bien. Una vez hecho esto, asegúrate de cambiar esto a letra minúscula porque debería coincidir exactamente con lo que tenemos aquí. La mejor manera de hacerlo es haciendo clic derecho y luego renombrar el nombre. Copia el nombre, y aquí solo puedes venir y pegar exactamente el nombre de la ruta. Vaya, échale un vistazo Tenemos que colocarle una leva . Habiendo hecho esto. Sigamos adelante para mapear todas las cosas aquí mismo y hacer que se muestren en la pantalla. Justo debajo del tu ren, vamos a tener soportes Ci de apertura y cierre para que podamos tomar en Java scrypt y estufas así Ahora vamos a hacer enlaces Nav, mapa de puntos. Entonces vamos a tomar en el enlace. Este tipo de aquí representa cada eslabón en la RA. Colóquelo en una función R, abra y cierre el soporte co. Y dentro, vamos a devolver la UI. Abrir y cerrar los padres, dentro de los padres, vamos a tener El H REF, que es la referencia del hipotex, vamos a hacer link.hf Nuevamente, tenemos que especificar la clave porque estamos mapeando a través de un ítem. La clave va a ser el nombre Link Dot. Podemos usar el nombre para identificar de manera única cada una de las cosas aquí mismo. Tenemos registro, inicio de sesión y olvidamos la contraseña. Me siento bien. Rápidamente, vamos a cerrar el enlace, aquí mismo, darle un nombre de clase. Tenemos que dar el nombre. Entonces voy a hacer el nombre de Link Dodd. Guarda y echa un vistazo al navegador. El esto. Obsérvalo cuidadosamente en la parte superior. ¿Puedes ver? Tenemos el registro, el inicio de sesión y la contraseña olvidada. Ahora al hacer clic en Iniciar sesión, pasaremos a la página de inicio de sesión. Al hacer clic en contraseña, pasaremos a la página de contraseñas, y también, podremos volver a la página de registro. Hermoso. Ahora, quiero que recuerde la intención. La idea es marcar el enlace como seleccionado al hacer clic en él. Al hacer clic en cualquiera de los enlaces, queremos que se mantenga activo. Por ejemplo, cuando haces clic en Olvidé contraseña, queremos que la contraseña olvidada esté resaltada porque está activa aquí dentro de la URL. Hagámoslo rápidamente con la ayuda del nombre de ruta estadounidense. El nombre de ruta de uso es un gancho. Tenemos que invocarlo. Hagámoslo aquí mismo. Como lo intentamos aquí. El nombre de ruta de uso es un gancho que tenemos que invocar. Utilice el nombre de ruta, y por supuesto, es una función. Entonces vamos a almacenarlo a una constante. Cs nombre de ruta equ usa nombre de ruta. Ahora el nombre de la ruta va a almacenar la URL activa. Ahora tenemos la URL activa almacenada dentro del nombre de la ruta. Tenemos que hacer uso de ella. Cuando vengas aquí, lo que debemos hacer es que vamos a hacer C es activo equ Nombre de ruta punto, dentro del uso path name hook, tenemos un método llamado start with. Ahora vamos a aceptar un método llamado start with. Y luego vamos a hacer link a HREF. Ahora no estamos obteniendo la URL actual, lo que tenemos que hacer es estilizar condicionalmente el enlace en función de la URL activa Es bastante sencillo hacer eso. Dentro del classme de aquí, vamos a reemplazar esto con el corchete C porque vamos a hacer muchos scripts java en el medio Si está activo es verdad, lo que vamos a hacer es tener el texto para sea texto amarillo 400. Entonces podemos cambiar la fuente a serif. Hagámoslo bod un poco. Fuente dash bod. Puedes seguir adelante para estilizarlo y hacer que se vea mejor a tu final, la manera en que te Si no, ¿qué hacemos? Te vamos a dar el texto color del pelaje azul cien. Cuando guarde la aplicación, consulte el navegador. Vaya, elimine gráfico en nodo. Muy bien, chicos. mostrarte algo dentro de la consola. ¿Puede ver el error use path name solo funciona en el componente cliente Por defecto, el siguiente gs se ejecuta en el lado del corte. Si desea hacer uso de ganchos, debe cambiar del renderizado del lado del ahorrador al renderizado del lado del cliente. Es sumamente fácil hacer eso. Scrot en la comilla simple, vamos a hacer uso ****. Tan simple como eso. Puedes terminarlo con la columna sem si así lo deseas. Cuando vuelvas a guardar, veamos qué tenemos ahora. Todo bien. Vamos a comprobarlo en el navegador. Y ellos son estos. Pero antes de continuar con la demo, quiero mostrarles algo muy importante. Cuando vuelva a cargar la página en la esquina inferior izquierda de la pantalla, verá el error allert Al hacer clic para abrir, dice, contenido de prueba no coincide con el HTML renderizado de corte Algo anda mal detrás de escena. Volvamos al código. W en la maquetación que TSS. Tenemos que hacer algo. Vamos a quitarnos este HGM de aquí. Quítatelo. Aquí vamos a reemplazar el cuerpo por un fragmento. Entonces solo hay que resaltar el cuerpo, y luego mandar D a multiselección, limpiarlo. Guarde la aplicación. Rápidamente, echemos un vistazo al navegador. Recargar, y el error se ha ido. Cuando observe la pantalla cuidadosamente, verá el registro iniciar sesión y olvidó la contraseña. Vamos a probar haciendo clic en el inicio de sesión. Cuando haces clic, ¿puedes ver? Ahora, dentro de la barra de direcciones, te darás cuenta de que el inicio de sesión está actualmente activo. Para ello, hay que destacar esto. Además, al hacer clic en la contraseña, el URO se activará, y aquí se seleccionará. Está activo por aquí, y así sucesivamente y así sucesivamente, regístrese, inicie sesión, olvidé la contraseña. 23. Página de error (archivos especiales): S. Nuestra aplicación funciona perfectamente bien cuando navega a localhost 3,000 slash blog, s one, slash comments slash Y esto nos llevará a donde tenemos los comentarios para una entrada de blog. Entonces todos saben que a veces puede ocurrir un error en su aplicación, ¿verdad? Entonces, supongamos que estás tratando de encajar el primer comentario para el primer post. Y así solo te encuentras con un error. Para demostrar este ejemplo, tenemos que crear un error en la aplicación nosotros mismos. Abre el explorador, y luego el ID de entrada de blog, comms, commend Abre este tipo comando B para cerrarlo. Ahora vamos a crear rápidamente un error. Aquí, vamos a tener una función. Obtener un azar. Voy a tener un conteo. Entonces lo que debemos hacer es devolver Matt dot flow. Esto es solo un script Java básico que debes conocer. Entonces punto mate al azar hermoso. Habiendo hecho esto, ven aquí. Almacenemos rápidamente lo aleatorio a una constante. Const Aleatorio igual, obtener Aleatorio. Aquí es exactamente donde vamos a tirar el error. Si random es igual a uno, entonces vamos a lanzar un nuevo error. Error al cargar este comentario. Ahora ya terminamos con esto. Vamos a comprobarlo rápidamente en el navegador. Vamos a recargar Y lo tenemos aquí, error al cargar estos comentarios. La intención de que creamos este error es ver cómo podemos manejar un error en el futuro cuando se produce un error. Así que solo toma por ejemplo, alguien visita tu sitio web, y está tratando de procesar algo. De pronto, aparece un error así. La persona perderá la confianza de ese sitio web de inmediato. ¿Bien? Entonces, si hay algún error dentro del proyecto, deberíamos poder manejar ese error sin descomponer la aplicación. Porque aquí mismo, la aplicación está rota. Incluso cuando recargues, mira, La aplicación está rota Entonces esto no es profesional. Lo mejor que debemos hacer es capturar este error y luego mostrarlo en la interfaz de usuario para que los usuarios puedan tener una mejor experiencia. Así es exactamente como podemos manejar este error profesionalmente. Entonces vuelves al código VS. Abre el explorador. Dentro del ID de comentario, este tipo, clic derecho. Nuevo archivo. Vamos a llamar a este error punto TSX Dentro del punto de error TSS, vamos a detectar rápidamente el límite de error RFC para generar el componente funcional. Pero esta vez, vamos a llamarlo límite de error, así como esto. Y luego aquí en la UI, vamos a tener una etiqueta He one. Entonces dentro, vamos a tener una etiqueta H one, y luego vamos a hacer error en el ID de comentario. Entonces tenemos que cambiar del lado del servidor al lado del cliente. SF nuevamente en el navegador, Todo bien. Ahora dice error en el ID de comando. Anteriormente, cuando implementamos un error en nuestro proyecto, toda la aplicación se rompió, y luego vimos el molesto error en la pantalla. Esa es una muy mala experiencia para dar a tus usuarios. ¿Bien? Entonces, por ejemplo, visitas el sitio web para comprar algo, y de repente el sitio web se rompió, y ves un montón de líneas rojas por todas partes, quejándose de un error Creo que perderás la confianza de ese sitio web. Entonces la mejor manera es presentar el error a los usuarios de una manera muy profesional. Y eso es exactamente lo que hicimos aquí, ¿de acuerdo? que puedas volver a tu proyecto y personalizar el error de la manera que quieras, ¿de acuerdo? Entonces puedes darle el nombre de la clase, por ejemplo, entonces puedes hacer P cuatro , Bg rojo, digamos 200. Texto, es Excel, es Excel. Veamos qué tenemos ahora. Recargar, recargar una y otra vez. Entonces ves error en el ID de comando. Esto es exactamente cómo manejar el error en los siguientes gs. Otra cosa que puedes hacer es mostrar el error programáticamente Tenemos un prop aquí llamado error, y el prop es de tipo error. Habiendo hecho esto, lo que tenemos que hacer aquí es mostrarlo en la interfaz de usuario. Voy a mostrar error error hacer mensaje. Cuando guardas y salgas al navegador. Se error al cargar este comentario, y las cosas vienen de este lugar justo aquí. Estamos recibiendo el mensaje de error de aquí. Bien, esto está apagado por ahora. Nos vemos en el próximo señuelo. 24. Plantilla vs diseño: El archivo de plantilla es similar a un diseño en que envuelve cada diseño o página hijo. A diferencia de los diseños que persisten entre rutas y mantienen su estado. Las plantillas crean una nueva instancia para cada uno de sus hijos en la navegación, que simplemente implica, el estado de la aplicación se verá alterado cuando navegue a una nueva página. Para obtener una comprensión profunda de cómo funciona la plantilla, definitivamente tenemos que ponerla en práctica comparándola con la maquetación. Vamos a implementarlo rápidamente. Comando B para abrir el explorador. Todo bien. Entonces creo que deberíamos hacerlo dentro del registro, que es la tierra, ¿verdad? Entonces hagamos algo. Bien, así que abre el oth, y luego este diseño aquí mismo. Vamos a implementarlo porque la contraseña olvidada, iniciar sesión, registrarse, todos van a entrar en el layout. Bum. Necesitamos estados en nuestra aplicación para demostrar este ejemplo. Vamos a imputar rápidamente el gancho usado de reaccionar. Vamos a declarar rápidamente las variables y la función seta para actualizar el estado. Aquí mismo, voy a hacer Cs impute Ca set impute. Y el estado inicial va a ser una cadena vacía. Por supuesto, debes saber esto a partir de reaccionar. Una vez hecho esto, vamos a implementarlo rápidamente dentro del proyecto. Ahora vamos a tener un df dentro de este dif, vamos a tener un tirón imputa Especifique el valor. El valor va a ser imputado. Al cambiar, lo que significa que cuando el usuario comience a escribir en el campo impute, tenemos que agarrar los datos Ahora vamos a tener acceso al evento. Con la ayuda del evento, vamos a llamar a la función seta para actualizar el estado inicial, y dentro de la función seta, entonces tenemos que usar el evento para apuntar y agarrar el valor. Sencillo eso. Por último, tenemos que cerrar la imputa con una etiqueta de cierre automático Rápidamente le demos un estilo. Un poco de estilo para que parezca bien. Nombre de la clase, voy a hacer esquema. Queremos que la esquina sea redondeada un poco, así que vamos a hacerla redondeada SM. Una vez hecho esto, vamos a comprobarlo rápidamente en el navegador. Ahora vamos a hacer Localhost tres que registrarse. Y ahora puedes ver a la imputa aquí mismo. Bien. Hagamos algo. Vamos a dar este nombre de clase div. Vamos a especificar que el relleno sea cuatro. Y bueno. Todo bien. Echa un vistazo. Ahora tenemos a la Imputa aquí mismo Vamos a escribir rápidamente algo dentro del campo Impute. Dub digital. Quiero que observen el comportamiento cuando navegue a la página de inicio de sesión. Entonces hago clic en la página de inicio de sesión. Déjame mostrarte. Estamos dentro de la página de inicio de sesión. Mira, puedes ver que el estado no está alterado. Cuando también navegue para olvidar la contraseña, se dará cuenta de que el estado no se altera también. El diseño mantiene un estado consistente dentro del proyecto. Se puede ver, incluso cuando se pulsa iniciar sesión, cuando se pulsa registro, y el estado no se altera. Este es el estado del cabello. Ahora, queremos reemplazar el layout con las plantillas, y luego podemos observar el comportamiento para entender la diferencia entre el layout y la plantilla. Todo bien. Hagámoslo rápido. C y B para abrir el Explorer. Lo que tenemos que hacer es hacer clic derecho y luego renombrar el nombre, borrar el diseño, y luego voy a hacer plantilla.tss Boom. Tenemos que decirle que sí. Ahora, guarda el proyecto en el navegador. Recarguemos rápidamente. Todo genial. Ahora, vamos a probarlo y voy a hacer Duba digital Cuando golpeas al iniciar sesión, ves, al navegar, se destruye el estado. Esta es exactamente la diferencia entre la plantilla y el diseño. 25. Página de carga(archivos especiales): Expedientes especiales. El archivo especial que vamos a hablar en esta conferencia es el punto de carga s. El punto de carga S o TSS le ayuda a crear una interfaz de usuario de carga significativa con bandejas de origen de reacción. le ayuda a crear una interfaz de usuario de carga significativa con bandejas de origen de reacción Con esta convención, puede mostrar un estado de carga instantánea desde el servidor mientras se carga el contenido de un segmento de ruta. El nuevo contenido se intercambia automáticamente una vez que se completa el renderizado Entonces, por ejemplo, si un usuario hace clic en una entrada de blog, tardará algún tiempo para la publicación se recupere y se renderice en la pantalla Entonces, mientras sigues esperando la publicación, deberíamos poder crear una barra de carga para darle al usuario una especie de respuesta que la publicación está recuperando actualmente Ahora abres el explorador. Vamos a implementarlo rápidamente en la pose de bloque. Woad en el bloque, clic derecho, crear un nuevo archivo Y esto se llamará. Punto de carga TSX. Puedes llamarlo cargando punto S dependiendo de lo que estés usando. Al presionar la tecla enter, Generar el componente funcional. Diseñemos rápidamente la interfaz de usuario de carga. Dale un nombre de clase, y luego la altura va a ser de 100 Vg El ba suelo BG, Amarillo, 800. Uy. Eso va a ser demasiado. Hagámoslo 400. Todo bien. Una vez hecho esto, dentro del HTML interno de la D, vamos a tener una etiqueta H one, y luego vamos a hacer loading. Estilizemos rápidamente la etiqueta H one también. Texto, es Excel. Texto, azul, 100. El color del texto es azul, y luego tenemos que alinear la prueba al centro. Bien, guarda la aplicación. Vuelve al navegador. Entonces, cuando hagamos clic en el cabestrillo aquí mismo, antes de que se abra la página de bloqueo, definitivamente verá la página de carga. Echa un vistazo. Aunque es bastante rápido, pero tenemos que hacerlo de nuevo. Todo bien. Esto es exactamente de lo que estamos hablando. 26. Demo de sitio web: Aquí exactamente está la aplicación que vamos a construir en este curso. Ahora vamos a proceder. En la esquina superior izquierda de la pantalla, verás el menú. Al hacer clic, va a abrir el cajón de navegación. Y cuando se ciernen en los enlaces, se va a destacar Floto, la cartera se destaca sobre mí y me contrata. Justo abajo, tenemos los enlaces de redes sociales, y todo está funcionando perfectamente bien como se esperaba. De hecho, cuando haces clic en Instagram, puedes abrir mi página de Instagram. Para que puedas hacer clic en el icono de la X para cerrarlo. También en la parte superior, tenemos el encabezado. Dentro del encabezado, tenemos los enlaces. Tiene exactamente el mismo comportamiento que el del cajón de navegación. Cuando pasas el cursor sobre él, se resalta. Cuando haces clic, por ejemplo, cuando hago clic en la cartera. Se va a desplazar suavemente hasta el componente de cartera y luego se resaltará este enlace. Echa un vistazo. ¿Ves? Ahora estamos dentro del componente de cartera, y se destaca este enlace de cartera de aquí. Lo mismo aquí, y cuando vuelves a casa es exactamente el mismo comportamiento. Dime, no se ve bien. Claro que sí. Sigamos. A la izquierda edd de la pantalla, tienes mi nombre y mi compañía Además, tenemos el proyecto botin y el Get resume butting El tope del proyecto hace exactamente lo mismo con el enlace de cartera de aquí Cuando haga clic en el proyecto, también suavizará el desplazamiento hacia el componente de cartera. Cuando haga clic en el Obtener currículum a tope, va a descargar mi currículum. Echa un vistazo. ¿Puedes ver descargado? Vamos a comprobarlo rápidamente. Aquí está. Hermosa vuelta al proyecto. Aquí tenemos la foto de perfil. Justo en la parte inferior, tenemos la caja sesgada. L et's pasan rápidamente al componente de cartera. Cuando haga clic en el proyecto, eche un vistazo. Hermoso. los diversos proyectos en los que he trabajado. Tenemos am Food Company, el sitio web de la cartera del próximo año, que es este sitio web que estoy mostrando, y así sucesivamente y así sucesivamente Así puedo hacer clic en cada elemento de la tarjeta para abrirlo en una sola página. Ahora cuando me muevo en esta tarjeta, van a ver este icono aquí como los ojos. Haga clic para abrir, y aquí está la página de detos de cartera. Esto es lo que tengo que decir sobre la cartera, la descripción, y estas son las tecnologías que utilicé. Muy interesante. Cuando te desplazas hacia abajo, podemos dar click en el botón para mostrar el siguiente proyecto. ¿Puedes ver? Echa un vistazo. También, podemos dar click en el anterior para mostrar el proyecto anterior. Volvamos rápidamente al componente del hogar. La siguiente línea final es el componente sobre mí. Y este es otro componente interesante. Luce tan hermosa. Cuando cierras el cursor, ves algún hermoso efecto de vuelo estacionario ¿Ves esa hermosa animación? Los desarrolladores front-end matan, back end, y así sucesivamente y así sucesivamente. puedes cambiarlo con este botón aquí mismo dentro de la tarjeta. Echa un vistazo. Una vez hecho esto, pasemos al componente testimonial. También puedes usar el mouse para deslizar el testimonio. Por último, tenemos el componente footer. En la esquina inferior derecha de la pantalla, vas a ver el botón c a la acción. Cuando haga clic, va a así al componente del hogar. Y ahora estoy a punto de exhibir una de las características más importantes del sitio web del portafolio, que es la página de HaM. Al hacer clic en HiAme, se va a abrir la página de HaE Y aquí tenemos este hermoso escrito. Y además, tenemos las tarjetas que muestran tu dirección, tu número de teléfono, correo electrónico y tu horario de atención. Ahora cuando haga clic en el formulario de contacto, va a suavizar el desplazamiento hasta la sección de formulario de contacto Echa un vistazo. Perfecto. Ahora, comencemos haciendo clic en el bot enviado en. Al hacer clic en el embarque enviado, le va a solicitar que rellene los campos para el nombre, D. Para el correo electrónico, David at tm com. Para el número, sólo voy a escribir un número aleatorio. Para el tema, diré, probando el sitio web. Justo aquí, lo que voy a hacer es Así que habiendo hecho esto, déjame llevarte rápidamente de vuelta a mi bandeja de entrada para mayor claridad. Aquí mismo, voy a tener que volver a cargar porque quiero que todo aparezca transparente Ahora puedes ver, no tengo nada dentro de la bandeja de entrada. No hay mensaje nuevo. Volver a la página web. Vamos a probarlo haciendo clic en el boton enviar. Hago clic. Comienza a cargarse. ¿Puedes ver esta barra de carga por aquí mensaje enviado con éxito Gracias por contactar con una barra D bar. Volvamos a la bandeja de entrada y veamos qué tenemos. Ahora hago clic para abrir. Entonces este es el mensaje de David. Dime, ¿no se ve bien? Claro que sí. Seguro, puedes responderle a David haciendo clic en el botón de respuesta aquí y la conversación puede continuar. Probemos rápidamente la aplicación en el dispositivo móvil. Ya ves, hermosa. Puedes hacer click en el servicio para abrir el contenido de los servicios aquí, la compañía, el enlace de corazón, y todos estos tops, vas a aprender a hacerlos desde cero Tapa atornillada, abre el cajón de navegación. Volvamos a casa. Echa un vistazo. Esto es súper increíble. Bien. Y al hacer clic en el botón C a la acción, Boom. Hermoso. Puedes descargar tu suma si quieres. ¿Puedes ver eso? Simplemente descárgala ahora mismo. Puede desplazarse suavemente hasta el componente de cartera, y puede comprobarlo aquí. Bien. Entonces, habiendo hecho esto, vamos a echarle un vistazo en el dispositivo iPad. ¿Puedes ver? Esto es tan bonito. Esto es hermoso. Puede hacer clic para abrir. Puede golpear el nido, el nido, y así sucesivamente y así sucesivamente. Puede volver a casa. He incluido el enlace al sitio web de demostración, justo dentro de la descripción. Simplemente porque también quiero que tengas la experiencia a tu final para ver lo rápido y hermoso que es el sitio web. Efectivamente, te lo mereces para que te vean. 27. Instalación de Nodejs. Instalación de código frente a la misma. Instalación de la extensión de código contra la: Comenzando con el último sitio web de la cartera de GS. En esta sección del curso, vamos a realizar algunas instalaciones necesarias para ponernos en marcha. Empecemos discutiendo las versiones de los nodos. Está claro que antes de instalar, reaccionar o siguiente GS, necesita tener el nodo GS instalado en su máquina. Mi consejo para ti es sencillo. Awats asegúrese de descargar e instalar la última versión estable Ves a este tipo de aquí. No es para ti y para mí. La razón es que viene con complejidades extra que quizás no puedas manejar Así que vamos a descargar e instalar rápidamente la última versión estable. Haga clic, entonces ya estamos descargando, y aquí lo. Haga clic. Vamos a continuar. Tienes que pasar por todas las cosas si tienes tiempo. Pero para mí, sólo tengo que continuar. Entonces estoy de acuerdo. Continuar golpeando en el embarque de instalación. Por supuesto, si eres mac, tienes que iniciar sesión. Haga clic en Instalar sofá. Instalado con éxito. Abre la terminal. Dentro del terminal, tenemos que verificar y estar seguros de que tenemos instalado el nodo. Lo que voy a hacer es el nodo V. Esto realmente va a mostrar la versión del nodo que acabamos de instalar. Pulsa en la llave. Ahora tenemos nodo versión 18.17 0.0. Ciérrela. La siguiente línea de tiempo es instalar un editor de código, y el editor de código que voy a usar el curso es el código VS. Siéntase libre de usar cualquier editor de código de su elección. Pero para mí, el código VS siempre es mi favorito. Dependiendo del sistema operativo con el que estés trabajando. Da click en esta flecha y luego instala para MAC Windows o líneas. Justo aquí, estoy trabajando en Mac OS. Sólo tengo que descargar para MAC. Ya lo tengo instalado, así que ya no tengo que hacer esto. Solo tienes que seguir adelante, descargar e instalar el código VS. Habiendo hecho eso, abramos rápidamente el código Vs. Él. Maximizar. Ahora ya terminamos de instalar el código VS. Sigamos adelante para instalar el taponamiento necesario que será útil en el futuro Extremadamente importante. Abre la extensión. W en el set box, vamos a establecer para. Reaccionativo fragmento de redock de reacción. Aquí está. Tienes que hacer clic para instalar. Este es un atajo que nos ayudará a generar alguna pieza de código. Así que no tenemos que teclear todas esas cosas desde cero. No te preocupes, definitivamente obtendrás lo esencial en el futuro. No he instalado este , ciérrelo. Nuevamente, vamos a instalar Pi. Haga clic para abrir y luego instalar. Básicamente, Predia ayudará a formatear tu código para las sangrías adecuadas Ahora ya terminamos con la instalación, ciérrela. Y seguro, algunos de ustedes tienen curiosidad por conocer el tema del código VS que estoy usando. No te preocupes. Definitivamente voy a compartir contigo. De nuevo, dentro de la caja de la colanza, vamos a establecer para usted Haga clic para abrir. Ya lo tengo instalado en mi código VS, así que asegúrate de instalarlo a tu final. Entonces el tema real que estoy usando. Déjame mostrarte, haz clic en Establecer tema de color. Estoy usando U D. Aquí está, así que puedes decidir usar cualquiera de estos temas por aquí. Todos son fantásticos. Anteriormente, estaba usando U espejismo. Pero ahora estoy usando UDC. Así que por favor asegúrese de instalar todos estos enchufes, ya que va a ser de gran ayuda en el futuro. Una vez hecho esto, pasemos a la siguiente conferencia donde instalaremos a continuación. Nos vemos en la próxima conferencia. Mantente enfocado, y cuídate siempre. 28. Instalaciones de Nextjs 13: En esta conferencia, seguiremos adelante para instalar el próximo S. Antes de continuar con la próxima instalación de S. Asegúrate de reiniciar tu código VS. La razón es que en la conferencia anterior, descargamos algunos plugins. Para que estos plugins funcionen, tienes que reiniciar tu código VS, y lo he hecho a mi final. Una vez hecho eso, crea rápidamente una carpeta justo dentro del escritorio. Clic, nueva carpeta. Voy a llamar a esta carpeta. Portafolio. Arrastre y suelte esta carpeta en el código Vs. Salga del trabajo en la página. Maximizar el código VS, contro bactic para abrir el terminal integrado de código VS O puedes ir a la terminal Mw superior, nueva terminal, y luego se abrirá este tipo de aquí mismo. Ahora tenemos que proceder con la instalación. Entonces voy a hacer Px, crear. A continuación, dale un espacio s. este tipo de aquí va a apuntar a la cartera del directorio, y eso tendrá la siguiente S instalada dentro del directorio de cartera. Está en la tecla enter para que se encienda. Aquí, dice, ¿te gustaría usar type script? No, no estamos usando script de tipo. ¿Te gustaría usar los enlaces de sí? Sí. T viento. Sí. Puedes usar la tecla de flecha izquierda o derecha para alternar entre sí o no. ¿Te gustaría usar el directorio fuente? Sí. ¿Te gustaría usar router? Sí. Entonces dice, ¿te gustaría personalizar los hábiles allers de importación Voy a decir que sí. Una vez hecho eso, es la clave enter para que se encienda. La instalación está en curso. Esto definitivamente tomaría un tiempo. Sólo tengo que adelantar la conferencia. Siguiente gs instalado, exitoso. Ahora vamos a ejecutar el servidor. PM. Corre D. Es el boom de la tecla enter. Ahora, el servidor se abrirá en el puerto de Localhost 3,000. Aquí está. Da clic en el enlace para dar seguimiento, y aquí está el mismo. Así se ve la aplicación Deft next S. Limpiemos el código. Volver al código VS. Abra la página del SRC. Vamos a derribar la terminal. Voy a hacer B común para cerrar al explorador. Destacemos desde la línea 62 líneas 110. No he resaltado todos estos. Sólo tenemos que limpiarlo. Seguro. Además, no queremos hacer uso de ninguno de este tipo de aquí. Usted saf, vuelve al navegador. No se ve nada en el navegador. Común B para abrir el explorador. Tenemos que ordenar el CSS global. Haga clic en bn, seleccione entre las líneas cinco hasta el final. Límpielo. Guardar en el navegador, aquí está. Esto está apagado por ahora. En la próxima conferencia, realizaremos los ajustes necesarios. Nos vemos en la próxima conferencia. Mantente enfocado y cuídate. 29. Importación y configuración: Básicamente queremos que todos y cada uno de logren exactamente el mismo resultado. En cuanto a la fuente, las imágenes, incluido el estilo. Abrir los recursos de la cartera. A su final, los recursos de la cartera se colocarían debajo de esta conferencia. Abrir los recursos de la cartera. Ahora bien, aquí están algunos de los activos que vamos a utilizar, incluyendo los datos Rápidamente, abre las imágenes de la cartera. Aquí están las imágenes y fondos que vamos a utilizar. Cuando abres el directorio de fuentes, tenemos todo el rect que queremos usar. Hermoso. Ahora abre el directorio de portafolios. Abre el público. Lo que vamos a hacer es destacar todo por aquí, click derecho, copiar. Ven aquí y pega. Tenemos que reemplazar, y también, tenemos que reemplazar. Estos son solo los dos artículos que reemplazamos. El siguiente SVG y el buque svg. Terminamos de importar las imágenes y fuentes. Una cosa más que vamos a hacer. Cierra esto. Volver a los recursos de cartera. Abre en el siguiente directorio. Ahora tenemos el Fondo Google. Volver a VS Code. Abre el siguiente módulo. Desplázate hacia abajo, y vas a ver en el próximo Abierto. Minimizamos el código VS. Lo que voy a hacer es arrastrar esta fuente a la derecha en el siguiente directorio. Maximizar. ¿Puedes ver? Perfecto. Habiendo hecho esto, aún en los recursos de cartera. Abrir código recursos hacer MD. Vamos a copiar la estrella global. Deténgase en las líneas 72. R haga clic en Copiar. Volver al código VS. También tenemos que cerrar el módulo de nodo. Justo en el SRC, vas a encontrar el CSS global Haga clic para abrir, comando V para pegar. Este es el estilo global que vamos a usar a través de los cos. Seguro, este tipo de aquí es responsable del tick azul cuando se hace clic en el enlace dentro del encabezado Esto es responsable del desplazamiento suave. Así que no tienes que preocuparte por las cosas ahora mismo. Se va a explicar con detenimiento en el futuro. Así que seguro ciérralo. Una cosa más que vamos a hacer es configurar los fondos de Google. Acero dentro de los recursos de código hacer MD, desplácese hacia abajo. Tenemos que copiar las cosas. Volver al código VS. Abre el layout punto S. No queremos usar los fondos inter. Vamos a importar un Local funds from at nest slash font slash, Este tipo ya no es necesario. Límpielo. Y ahora vamos a pegar. Una vez hecho esto, tenemos que conseguir todos estos fondos en sincronía con el proyecto. Entonces aquí mismo, quitamos el inter, y luego vamos a hacer pops. Bien. Todo es genial. Entonces Amigos, por favor, asegúrese de importar todas las cosas correctamente. 30. Estructura de proyecto: Aplicación construida con siguiente S y reaccionar la siguiente manera el enfoque arquitectónico basado en componentes, lo que simplemente implica que los componentes son uno de los bloques básicos de construcción de cada aplicación de reacción En esta conferencia, vamos a definir la estructura de nuestro proyecto siguiendo las mejores prácticas. En la pantalla está el componente home. En la parte superior, tenemos el componente header. Cuando te desplazas hacia abajo, también tenemos el componente de obras recientes. Hay algo que quiero mostrarte por aquí. Dentro de estos componentes, cuando haces clic en alguna de estas tarjetas, déjame mostrarte. Se va a pasar los datos correspondientes a una nueva página Podemos decir que tenemos una página portfoli Datos, o puedes llamarla una sola página de post Esto nos abrirá los ojos al sistema de enrutamiento dinámico en los próximos años. Regresa a casa. Ya, tenemos el componente de obras recientes. Ahora tenemos el componente acerca de mí. Tenemos el componente testimonial. Por último, tenemos el componente footer. Cuando observas la esquina inferior derecha de la pantalla, verás el auto a la acción chocando, y eso también es un componente Podemos convertirlo en un componente reutilizable en el futuro. Cuando hago clic en el auto a tope de acción, va a suavizar el desplazamiento hasta el componente del hogar Aquí está. Hermoso. Y cuando haga clic en H i am, también abrirá una nueva página. Entonces podemos decir que tenemos dos páginas diferentes en esta aplicación, y tenemos vamos a ver cuántos componentes tenemos aquí. El componente de cabecera es uno, entonces el componente doméstico es dos, tres, cuatro, cinco, seis. En la esquina inferior derecha de la pantalla, tenemos el componente de acción del carro. Ahora en la esquina superior izquierda de la pantalla, tenemos el componente de dibujo diagonal. Los componentes de dibujo diagonal también se pueden encontrar dentro de los componentes de cabecera. Dicho todo esto, pasemos a crear las carpetas correspondientes que mapearán a estos componentes. Abre el SRC, justo dentro del directorio app, click derecho, nueva carpeta, y vamos a llamarlo componentes Dentro de los componentes, clic derecho, nueva carpeta. Vamos a crear el directorio header para el componente header. Gana los componentes, tenemos el componente home. De nuevo, clic derecho, nueva carpeta. Tenemos el Abt M, Tenemos la tarjeta deslizante, y la tarjeta deslizante se mapeará al componente de cartera. Déjame mostrarte. Este es el componente de cartera, así que todas las cosas aquí. Bueno. De nuevo, estamos en los componentes Nuevo el componente de contacto. Vamos a tener el componente de acción corto. Déjame mostrarte. En la esquina inferior derecha de la pantalla, vas a ver la acción de corto chocando Cuando haga clic en este botón, va a suavizar el desplazamiento hasta el componente home, y aquí está. Hermoso. Cuando te desplazas hacia abajo, aparece el botón. Por último, vamos a tener el componente f. 31. Configuración de diseño de casa: Bienvenidos de nuevo a clase. En esta conferencia, vamos a diseñar el componente del hogar. Abra rápidamente el componente y dentro de este directorio, haga clic derecho, nuevo archivo. Vamos a crear un componente llamado home component dot gs. Si tienes el fragmento react antive react redox, cuando haces RR de C, deberías poder generar el componente funcional Hermoso. Una vez hecho esto, rendericemos rápidamente el componente dentro de la página principal, y aquí está la página principal. Haga clic para abrir. Justo en la parte superior. Tenemos que importar componentes para el hogar de componentes para el hogar. Eso es simple eso. Entonces tenemos que renderizarlo por aquí. Sf. Veamos qué pasa en el navegador, y aquí está el componente home. Hermoso. Sigamos adelante para diseñar el componente del hogar. Común B para cerrar al explorador. No vamos a usar un padre simplemente porque no queremos un nodo extra en nuestro árbol. Deslímpielo. Lo que vamos a utilizar es reaccionar fragmento. Bueno. Gana el fragmento, vamos a tener un dv, darle una identificación, casa, cerrar el df. Vamos a crear la maquetación. Aquí vamos a tener una rancia inline. El gradiente lineal de la imagen de fondo. Queremos girarlo 62 grados y el color de la izquierda va a ser cero 50%. Coloca un coma aquí mismo. Le vamos a dar una altura mínima de 500 pixeles. Sepárala con el coma, la altura máxima va a ser de 1,200 pixeles. Hay que separarlo con el coma. Vamos a especificar la altura real, altura va a ser del 100%, la anchura del 100%. Cuando guardas en el navegador, aquí lo tienes. Hermoso. 32. Diseño de artículos para el hogar: En la conferencia anterior, logramos configurar el layout. En esta conferencia, vamos a proceder con el diseño. Donde en el código VS, lo primero que vamos a hacer es importar la fuente trasera. Voy a hacer importación. Se trata de una exportación con nombre. Vamos a hacer una pista del siguiente slash font slash Google. Entonces aquí voy a hacer const int equ, Hind. Nosotros en el objeto, vamos a tener el subconjunto. Vamos a tener el latín, separado con la coma ¡Uy! Bien. Bueno. El qué 300400500600, y por último, 700 ¡Uy! Echa un vistazo. Todo bien. Ya terminamos de configurar la fuente. Procedamos con el diseño. Aquí, vamos a tener una d, darle un nombre de clase. Queremos que este dv sea responsive en todas las plataformas. Para eso, vamos a hacerlo contenedor. Entonces la imagina, vamos a ponerla en auto. Por supuesto, si quieres ver el equivalente de CSS, todo lo que tienes que hacer es pasar el cursor sobre la clase de utilidad R W en los intellisens. Vas a ver el equivalente CSS. Si a tu final, no tienes los intellisens, todo lo que tienes que hacer es abrir el Explorer. Después haga clic en extensiones. W en el cuadro de búsqueda vas a buscar intellisens de viento de cola Y aquí está. Ya lo tengo instalado. Al final, solo tienes que presionar el botón instalado. Como puedes ver por aquí, el botón instalado está deshabilitado. Es por eso que se puede ver desinstalado. Instala los intellisens del viento de la cola y divirtámonos juntos Ciérralo hacia abajo. Asegúrate de estar seguro también. Cerremos al explorador. Vamos a tener otro df, darle un nombre de clase. Vamos a tenerlo display grid. La columna de plantilla de cuadrícula es 12. Ahora vamos a tener otro df, nombre de clase. Vamos a establecer el color de fondo para que sea blanco. Vamos a tenerlo display flex, flex direction es columna. Justificar contenido, centro. La columna de plantilla de cuadrícula es 12. Vamos a estilizarlo en dispositivo mediano. En el dispositivo medio, la columna de plantilla de cuadrícula es de cinco. Por último, para esta D en dispositivo medio, queremos que el fondo sea transparente. B transparente. Ciérralo hacia abajo. Bueno. Formateemos rápidamente el código para obtener la sangría adecuada. Haga clic derecho. Formato ancho del documento. Priya. ¿Puedes ver? Perfecto. A mí me encanta esto. ¿Cuándo deve, vamos a tener otro deve? El margen va a ser para. Con esto, todo lo que tengamos dentro de este df va a estar centrado. Con esto, el df va a ser responsive en todas las plataformas. Enseñanza buena, hermosa. Otro df. En dispositivo grande, vamos a tener el padding dejado para ser 24, que en equivalentes CSS reales, el padding left va a ser de seis m. En un pequeño dispositivo, el padding left es diez. Y así el relleno real que queda va a ser cero. La parte superior acolchada y la parte inferior del acolchado es de 20. En dispositivos medianos, py cero. La parte superior acolchada y la parte inferior de palmaditas van a ser cero. Así como en dispositivos medianos, la prueba va a alinear inicio. También tenemos que alinearlo al centro. Bueno. Ahora vamos a tener una etiqueta P. Déjame mostrarte. Esta es la etiqueta P de aquí, la i D. Dentro del HTML interno, voy a hacer i. Dale un nombre de clase. Pero ahora vamos a usar la interpolación de cadenas. Abra y cierre el soporte co, dentro del soporte C, garrapata trasera abierta y cerrada. Y por cierto, la garrapata b se encuentra en la esquina superior izquierda del teclado, justo debajo de la tecla de escape. Aquí vamos a tener que probar. El color de prueba va a ser azul claro. Vamos a tener 47 A EDE. Digamos, échale un vistazo y aquí está. Hermoso. En T wind Css, siempre que quieras implementar un estilo personalizado, todo lo que tienes que hacer es abrir y cerrar corchete, y luego hacer lo que quieras hacer dentro del corchete. Prueba Excel. Esto mapeará al tamaño de fuente y a las alturas de línea. En dispositivos medianos, prueba d b. en el dispositivo grande, la prueba va a ser texto dos Excel. Cuando guardas en el navegador, bueno. ¿Puedes ver? Pero el problema aquí es que no queremos usar esta fuente. Para eso, vamos a tener la fuente aquí. Voy a hacer nombre de clase de punto trasero. Cuando guardes, compruébalo en el navegador y boom. Algo ha cambiado. A mí me encanta. Ahora bien, la línea de anidación es esta. Vamos a implementarlo con la etiqueta hedge one. Después de la etiqueta P de cierre, vamos a tener una de cobertura Vamos a darle un nombre de clase a este seto uno. Especificemos el color de la prueba. La fuente va a ser recta negra. El tamaño de la prueba. Hagámoslo cinco excel. En dispositivo mediano, el tamaño de fuente va a ser cinco excel. En un dispositivo grande, la fuente va a ser siete Excel. En dispositivo extra grande. También la prueba va a ser texto, siete Excel. El margen tb va a ser cinco. En dispositivos medianos, el margen tb va a ser tres. Que en la etiqueta He one, vamos a hacer yo soy un H seis. Cuando guardes, compruébalo y bom. Hermoso. Después de la etiqueta He one, vamos a tener una etiqueta H dos. Vamos a hacer esto para tener el nd signo, y un instructor. Este es el resultado por ahora. Vamos a comprobarlo en el dispositivo móvil. Echa un vistazo. Es extremadamente receptivo en todas las plataformas. Hermoso. Volvamos rápidamente al código. Vamos a darle la h a un nombre de clase. El color de prueba va a ser exactamente lo mismo por aquí. Copiar y pegar. Poner arriba y palmaditas en el fondo van a ser dos El tipo de letra va a ser negrita, y luego vamos a hacer que se transforme o beneficios. En dispositivos medianos. La prueba va a ser x l, por lo que la altura de línea y el tamaño de fuente serán 1.25 ram. Creo que eso es todo por la etiqueta H dos. Una cosa más que vamos a hacer es hacer uso de la interpolación de cadenas Así como esto. Después bati bati. Gana el bati, tenemos que copiar estas fuentes, resaltar y pegar. Cuando guardas en el navegador, tenemos este resort. A mí me encanta todo. La siguiente línea es implementar los Butings. Para implementar los batings, vamos a usar la etiqueta A. Después del cierre de la etiqueta H dos, vamos a tener una etiqueta A. Pero en la etiqueta A, vamos a hacer proyectos. Vamos a dar el nombre de la clase. En esta ocasión, vamos a usar la interpolación de cadenas debido a los fondos que hemos estado usando Lo vamos a tener en bloque de línea, el bground, vamos a usar este fondo Transición a todos. La duración de la transción, que sea 300, y la animación va a ser está dentro y fuera. Queremos que los bordes del atornillado sean un poco curvilíneos Voy a hacer Excel redondeado. La prueba dentro del atornillado va a ser ingenio. Poniendo top y parting bottom , van a ser tres. También, dando palmaditas a la izquierda y partiendo a la derecha, van a ser cinco Ahora cuando revisas el botm, tienes algo hermoso como esto A mí me gusta esto. Todo bien. Estamos avanzando. Acabo de notar algo. No me gusta lo curvilíneas que son las fronteras. Así que volvamos aquí. El redondeado, hagámoslo redondeado G. La G redondeada hará que el radio del borde sea 0.5 ram. Al guardar en el navegador, este es exactamente el resultado esperado. El tipo de letra va a ser bod, margin top, hagámoslo ocho Vamos a hacer que se transforme o caso. Aquí está. Mientras que nuevamente, vamos a estilizarlo rápidamente en dispositivos móviles En dispositivos medianos, la parte inferior acolchada y la parte superior acolchada van a ser dos dispositivos grandes, P tres. Además, los dispositivos grandes, el padding left y padding right, van a ser ocho. L et's reducen el tamaño de la prueba en dispositivos medianos. Pruebe ta, Excel y dispositivo grande. Etiqueta de texto B. Creo que hemos terminado con la capacidad de respuesta móvil para el botin. Una cosa más. En dispositivos medianos, el margen superior va a ser cinco. En dispositivos extra grandes, el margen superior va a ser diez. Por último, también tenemos que hacer uso de este fondo. Este fondo. Copia, ven aquí y pega, seguro, y aquí está. Ahora cuando se ciñe en el botin, no pasa nada. Implementemos rápidamente el efecto hover. Cuando se ciernen en la parte inferior, queremos cambiar el fondo Vamos a hacer BG. O n Hova va Columna sombra da LG En Hova traducir Y uno. Creo que eso es todo por el efecto Hova. Cuando guardes en el navegador, échale un vistazo. Ya ves, esto me encanta. Cuando Hva, ves este hermoso efecto. Ahora, lo que vamos a hacer es resaltar la etiqueta A y luego duplicarla, o bien puedes resaltar copiar y pegar. Ahora, cambiemos estos a mi currículum. Por supuesto, el color de fondo vamos a cambiar el color de fondo. Entonces en ho, también tenemos que cambiar el color de fondo. Cambiémoslo a azul claro. Porque cuando guardes y revises el navegador, te darás cuenta de que este tipo de aquí es negro, ¿verdad? Y una cosa más, no hay espacio entre estos dos botones. Entonces lo que voy a hacer aquí es venir y luego hacer Mag izquierda, diez. El ML que tanto amo es el de los mensajes Bs. A la derecha. Hablo demasiado. Cuando ahorras, y escuchas el. Ahora tenemos espacio entre las porras. Vamos a especificar el cursor para que sea puntero. C te ahorras. Compruébalo. Bueno. Ahora ves esta hermosa mano apuntando al currículum. Copia. Ven aquí. Y pegar. Guardar. Ahora, implementemos la funcionalidad de currículum de descarga. Gana la etiqueta A, vamos a especificar la referencia de hipotexto HDF, voy a hacer un CV punto PDF. Queremos que sea descargable. Voy a hacer descargar equ. Cuando se está descargando el CV, queremos mostrar este nombre y luego el nombre del CV PDF. CF, vamos a comprobarlo. Hermoso, ¿lo ves? Y él es. Perfecto. Me encanta cada pedacito de las cosas. Justo donde en el proyecto. Vamos a implementar el HRF. Él ref equ, s signo de libra, y luego cartera. Porque cuando hacemos clic en este botón, queremos que nos dirijan al componente de cartera. Por ahora, no tenemos el componente de cartera. Pero en el futuro, cuando creamos el componente de cartera, vamos a establecer el ID del componente de cartera exactamente con la misma palabra de una cartera H. Entonces, al hacer clic en este botón, se desplazará suavemente hasta el componente de cartera. Después del cierre deve fue el color de fondo del blanco, sí deve por aquí Vamos a implementar la imagen. Vamos a tener una d, dale el nombre de la clase. Lo que en el nombre de la clase, vamos a hacer llamar a un span 12. La tapa de patente va a ser. Queremos especificar una parte superior acolchada personalizada. Hagámoslo uno t píxeles, y esto será en dispositivo medio. Parte superior acolchada de 50 píxeles. En el dispositivo medio, queremos que el color de fondo de la imagen sea transparente. El color de fondo de la barra va a ser azul más claro. L et's cerrar la D. Hagámoslo receptivo en la plataforma móvil. En el dispositivo mediano, llamada span siete. En donde la D, vamos a tener otra D. Especificar el nombre de la clase. Hagámoslo contenedor para que podamos tenerlo receptivo en nuestras plataformas. Entonces el margen va a ser auto. En donde el DF, vamos a llamar a la imagen. IMG, SRC, equ, barra diagonal, A Por cierto, todas las paradas se pueden encontrar aquí mismo donde en el directorio público. Recordemos que lo importamos en la conferencia anterior. Aquí está mi CV. Estas son algunas de las imágenes que vamos a utilizar. Puedes abrirlo y luego comprobarlo a tu final. Vamos a cerrarlo. Cuando guardas en el navegador, aquí lo tienes. ¿No es esto hermoso? Hagamos los ajustes necesarios para la imagen. Que la codificación, vamos a hacer que sea una sincronización. Si el enlace de la imagen es malo, tenemos que mostrar algo. Voy a hacer aquí pasteles de perfil. Haga clic derecho en formato documento con Pred El código se ve extremadamente Al guardar, este es el resultado final. Vamos a comprobarlo en el dispositivo móvil. Todo bien. Chicos, esto se ve bien. Honestamente, se ve bien. Echa un vistazo. En iPad. Oh, Dios mío. Esto es hermoso. A mí me encanta esto. Habiendo hecho esto. En la próxima conferencia, seguiremos adelante para implementar el cuadro sesgado Nos vemos en la próxima conferencia. 33. Implementación de un control deslizante con el cuadro de habilidades: Sigamos adelante para implementar el cuadro sesgado. Antes de continuar, tenemos que hacer algunas instalaciones necesarias. Gana el terminal contra C para detener el servidor que se está ejecutando actualmente. Vamos a hacer MPM install, slick, react, slick, y luego también vamos a instalar Pulse la tecla enter para que se encienda el fuego. Y por favor, asegúrate de que tu conexión a Internet esté encendida. Instalación exitosa. Vamos a bajarlo un poco. Escrota la parte superior. Ahora vamos a hacer los insumos necesarios. Vamos a pot slick crus slash, slick slash, slick.cs Otro, vamos a pot slick carer slash slick slash, slick them dot CSS . Por último, vamos a importar slider de react slick. Tan simple como eso. Una vez hecho esto, copiemos rápidamente la configuración del control deslizante. Abre el código recurso punto MD. Resaltar, copiar, volver al código FS, y dentro del componente, vamos a pegar. Déjame explicarte rápidamente. Desplázate hasta la parte superior. Aquí tenemos una configuración verbal, y dentro del objeto, establecemos el infinito a verdadero. Slide to show va a ser seis. El deslizamiento para desplazarse es uno, y la velocidad es de 2 segundos. Flechas, lo configuramos en fs, Autoplay va a ser verdad Y luego la velocidad de reproducción automática es de 2 segundos. Entonces aquí tenemos el loop, establecemos el loop a la verdad, y luego el Css es lineal. Habiendo hecho todo esto, también queremos que sea responsive en todas las plataformas. En el punto de quiebre de 17 60, tenemos que reiniciar el control deslizante. La diapositiva a mostrar es seis, diapositiva a desplazamiento es una, infinito se establece en true, y los puntos se establecen para forzar. En un punto de quiebre de 60, también tenemos que restablecer la configuración, pero en este caso, creo que es exactamente lo mismo con 17 60. Y así sucesivamente y así sucesivamente. Y aquí tenemos la diapositiva para mostrar para ser cuatro. Deslizar para desplazarse es uno, y el infinito y punto se establece en verdadero y falso. Así continuamente y así sucesivamente y así sucesivamente. No he montado el carrusel. La línea de anidamiento es para implementar los artículos en sí. Desplácese hacia abajo. Justo abajo, vamos a tener otra d, darte el nombre de la clase. Hagámoslo receptivo en nuestra plataforma. El margen va a ser para. Vamos a tenerla posición absoluta. Ahora vamos a tener otro df. Nombre de clase, P x tres. Esto implica que el relleno izquierdo y derecho es 0.75. Ciérrala, justo debajo de d, vamos a tener otra d, dale un nombre de clase. Vamos a tenerla posición relativa. El maxi max S n. luego el fondo. Abajo, tenemos que especificar una estancia personalizada. Hagámoslo 70 pix. En dispositivos medianos, MD, columna, Max, cinco excel. En dispositivos tra grandes. Vamos a tenerlo Mx W seis cel. Padin izquierda y derecha va a ser cuatro. Hagamos cinco. Pero en un dispositivo grande, queremos que sea Px 14. Desbordamiento, va a ser auto x auto. El margen izquierdo derecho es automático. Qué otra vez, vamos a especificar el BG, que es el fondo. BG blanco. Entonces voy a hacer redondeado d a Excel. Queremos que la esquina de la caja de esquí sea un poco curvilínea Y el índice z índice z va a ser 20. Todo bien. Cierra el deve hacia abajo. Dentro de este d, vamos a tener los rubros. Ejecutemos la aplicación para ver el resto final. Todo bien. Lo que vamos a hacer ahora mismo es hacerlo. Por favor, un comentario sobre la entrada, la entrada del deslizador. Aún dentro del Steve. Vamos a usar el estilo inline. Estilo. Vamos a especificar la sombra de caja. 25 píxeles, 50 píxeles y diez píxeles a la derecha. Solo estamos configurando la sombra de caja redonda de izquierda a derecha, de arriba a abajo. Cuando guardas y veamos, bien. Está saliendo un poco. Pongamos algo dentro para que lo veas. Ahora vamos a tener otra d, darle el nombre de la clase. Queremos que la parte superior de palmaditas y la parte inferior de despedida sean diez. En el dispositivo mediano, las palmaditas superior y la parte inferior de partición van a ser seis, en un dispositivo más pequeño, PY Coss, A da cuervo. Hermoso. Te voy a mostrar en GP, para que no tengas que preocuparte por eso. Ahora cuando revisas el navegador, aquí está. La caja sesgada está lista. Y cuando te acuestas en la caja sesgada, te darás cuenta de que tu cos va a cambiar Echa un vistazo. Parece el signo de la cruz. ¿Puedes ver? Bueno. Por lo que esto es responsable del rumbo o cambio. Muy bien, así que sigamos rápidamente para mostrar los elementos dentro de la caja sesgada IMG, SRC, e qu, barra diagonal, Mongo Y por cierto, importamos todas estas imágenes en la conferencia anterior. Entonces cuando abres al público, siempre puedes ver todas las imágenes que usamos por aquí. Todo bien. Vamos a cerrarlo. T igual Mongo db. Demos el nombre de la clase para que podamos estilizarla. Básicamente, lo que vamos a hacer es especificar la altura. Ciérralo con la etiqueta de cierre automático, resalta, duplícalo seis veces. Cuando guardas en el navegador y los anuncios. No te preocupes, vamos a armar todo. Ahora aquí, vamos a cambiarlo para que reaccione png. Vamos a exhibir los siguientes gs. Vaya, debería haber resaltado éste también. Siguiente. Doc PN. Entonces vamos a tener vítores expresos. Aquí, vamos a tener notas es. Hagamos aquí expresos es. Cuando ahorras, y aquí todos los matanzas. Uy. Nota S no aparece. T hay algo mal allá. Debe ser nota J punto PNG. Hay que especificar el formato de imagen. Ahora somos capaces de exhibir los cráneos. Hagamos que se deslice rápidamente. Desplázate hasta la parte superior. Aquí vamos a encomiar las cosas. SF, y para los ajustes, ahora tenemos que aplicar todos estos ajustes. La forma en que lo hacemos es en realidad muy sencilla. Win hace D. Vamos a renderizar rápidamente el control deslizante. Dentro del control deslizante, vamos a extender la configuración. Ciérrela, resalta la etiqueta de cierre. Córtala. Ven aquí, y luego pegarlo. Cuando guardas en el navegador, vaya. ¿Qué demonios? Oh, Dios mío. Dice, súper expresión debe ser saber o funcionar. Así que vamos a atornillar a la parte superior. Déjame revisar la terminal. Módulo Ro. Bien, chicos, tenemos que hacer algo dentro de los puntos de página. Cierre la terminal. Abre la página punto S. Simplemente porque estamos renderizando el componente home dentro de las páginas. Tenemos que cambiar del renderizado del lado del servidor al renderizado del lado del cliente Entonces en la parte superior, nos vamos a hacer clientes. Justo así. Vamos a borrar esto. Todo bien. Nuevamente, vamos a echarle un vistazo al navegador. ¿Puedes ver? Todo está funcionando perfectamente bien como se esperaba. Esto es súper increíble. Impresionante. 34. Evento de ventana en desplazamiento: Bienvenidos de nuevo a clase. En esta conferencia, continuaremos con el componente header. Rápidamente, dentro del encabezado del directorio. Vamos a crear un nuevo componente, header dot JS. Código VS, comando B para abrir el explorador. Componente SRC. Y aquí está el encabezado. Haga clic en nuevo archivo. Encabezado punto S. Nuevamente, dentro de la cabecera, crear un nuevo archivo. Puntos diagonales de cajón, Gs. Por último, cajón diagonal C S. Hermoso. Cierre el archivo CSS. Además, cierra el cajón diagonal. Ahora vamos a hacer RFC para generar el componente funcional El encabezado va a mantenerse consistente en todo el proyecto. Entonces tenemos que renderizarlo dentro del layout. Abre el diseño. Vamos rápido. Heada del encabezado de barra diagonal del encabezado de barra diagonal del componente de barra diagonal de la aplicación dot slash Vamos a renderizarlo en la parte superior de los niños. Aquí vamos a renderizar el encabezado. Y aquí está. ¿Se ve hermosa? Básicamente, lo que vamos a hacer en esta conferencia es obtener la posición inicial de la aplicación sobre el eje y. Hagámoslo rápido. Vuelve a la cabeza en punto s. Cierra el explorador. Déjame acercarme un poco. Bonito. Primero, tenemos que importar el efecto de uso y el gancho usado. Por esa razón, vamos a cambiar del renderizado del lado del servidor al renderizado del lado del cliente Vamos a hacer e cliente. Tan simple como eso. Coloque una coma aquí mismo, p y cierre el corchete co. Vamos a importar el efecto de uso. Ca. El gancho estatal. Ahora vamos a declarar las variables de estado necesarias para ser utilizadas. Dentro del componente, vamos a hacer const el índice seleccionado uno, C establece el índice seleccionado uno Equ, el estado, el estado inicial va a ser cero. Nuevamente, vamos a tener const está abierto. Ca set está abierto, equ. El estado inicial va a ser de fuerza. Declaremos la variable de estado para obtener la posición de la aplicación en y xs. Vamos a tener costo crudo conjunto es y el estado inicial va a ser fuerza. Hermoso. Para demostrar este ejemplo. Sólo tenemos que duplicar los componentes del hogar para que podamos desplazarnos. Vamos a abrir la página punto s. componentes para el hogar. Sólo tengo que duplicarlo tres veces. Y por favor, esto es por ejemplo sake. Al guardar, ahora podemos desplazarnos por la aplicación. Sólo quiero demostrártelo para que lo entiendas lo suficientemente bien. Vuelve al código, cierra el explorador. La idea es simple. Cuando la aplicación en la página y offset es igual a cero, queremos establecer el estado inicial para forzar. De lo contrario, queremos establecer el estado inicial en verdadero, lo que simplemente implica. Ven aquí. Ahora, la aplicación en la página y offset es igual a cero. ¿Sabes por qué? Es simplemente porque no nos desplazamos por la aplicación. Pero cuando desplazamos la aplicación así, cuando metes la pata. La aplicación en la página y offset va a ser mayor que cero. Para ello, vamos a establecer el estado inicial en verdadero. En un término sencillo, cuando atornillas la aplicación, solo queremos actualizar el estado. La razón de ello es poder darle al encabezado un nombre de clase para estilizarlo de manera única cuando el usuario atornilla la aplicación Definitivamente obtendrías la idea esencial después de la implementación Aquí vamos a tener un efecto de uso. ¿Cuál es el efecto de uso? Vamos a tener handle scroll. Vamos a tener desplazamiento constante Tp Q ventana punto página y desplazamiento. O documento documento elemento scroll T. Terminar con la semi columna. Y aquí tenemos que actualizar el estado inicial. Establecer en pergamino dos. La parte superior de desplazamiento es mayor que allí. Y aquí vamos a hacer punto de ventana en evento litener. Desplazamiento, desplazamiento manejado. Una vez hecho esto, la siguiente línea es limpiar la función quitando el scroll. Aquí, vamos a tener una devolución. Punto de ventana, eliminar el oyente de eventos. Desplazamiento con asa de desplazamiento. Vamos a condicionar rápidamente el efecto de uso aplicando una matriz de dependencias vacía. Después de eso, vamos a hacer el registro de puntos de consola. Vamos a registrar un sc. Al guardar la aplicación, común I para abrir la consola. Cuando la fastidio. La aplicación en Page y offset va a ser cred que cero Y luego actualizaremos el estado inicial a true. Pero cuando desguace, la aplicación en la página y offset será igual a cero, y luego se actualizará el estado actual para forzar Entendido. Hermoso. Entonces hagámoslo una vez más. Enroscar hacia arriba hacia abajo. Compruébalo en la consola. Abajo. Con esto, podremos estilizar el encabezado cuando el usuario desplace la aplicación Una vez hecho esto, vamos a prepararnos para diseñar los componentes del encabezado en la próxima conferencia. Nos vemos entonces. 35. Implementa pageYoffSet: Apliquemos rápidamente el ejemplo. Entonces vamos a implementarlo aquí mismo. Vamos a borrar la d porque no queremos agregar nodos adicionales al árbol. Tenemos que usar el fragmento de puntos de reacción. Dentro del fragmento, vamos a tener un encabezado. Ahora vamos a estilizar el encabezado. Dale un nombre de clase. Vamos a hacer uso de la interpolación de cadenas. Vamos a abrir y cerrar co bracket, dentro del co bracket, especificar la bolsa di. Vamos a decir, si scrode se establece en true, vamos a hacer header show, y de lo contrario, no pasa nada Hermoso. Siempre que se desplaza por la aplicación, queremos que el encabezado permanezca fijo en la parte superior. Vamos a tener la posición para ser arreglados. Desde arriba va a ser cero porque no queremos ningún espacio entre la cabecera y el eje Y. El índice z va a ser 50. Transición a todos. Entonces la duración para arriba, va a ser de 500. Ahora vamos a tener un rancio. El color de fondo. especificar condicionalmente el color de fondo Lo vamos a hacer si scroll se establece en true, lo que significa que si el usuario desplaza la aplicación, queremos que el color de fondo sea blanco. De lo contrario, no queremos ningún color de fondo. Queremos que sea transparente. Separado con el co, limpie la columna. Para la sombra de caja, también queremos especificar condicionalmente la sombra de caja Si scrolle se establece en true, lo que significa que cuando el usuario desplace la aplicación, vamos a tener una sombra de caja azul alrededor de la cabeza Y de lo contrario, no pasa nada. W en el HTML interno, solo vamos a tener una etiqueta H one para la enseñanza de trabajos. Voy a hacer pruebas del encabezado. Está bien. Guardar en el navegador, aquí lo. ¿Puedes ver? Ahora, el encabezado no tiene antecedentes. Pero cuando el usuario jode la aplicación, el color de fondo del encabezado se vuelve blanco, y luego aparecerá la sombra de caja. Al atornillar, la sombra de la caja desaparece y el color de fondo también desaparece. Entonces cuando la fastidié, puedes ver, observarlo por aquí en la esquina superior izquierda de la pantalla. ¿Ves? Bien, déjame hacer algo. Vamos a darle a esto un nombre de clase y luego, voy a hacer texto siete Excel. Esto hará que el texto sea extra grande, y luego el ejemplo será más solucionable Cuando me desplace hacia arriba, la aplicación en la página y desplazamiento va a ser mayor que cero, y luego actualizará el estado inicial a true. Cuando el estado inicial se está actualizando a true, basado en el verdadero s, entonces tenemos que aplicar un color de fondo b de blanco a la cabecera con una sombra de caja. Entendido, hermoso. Ahora cuando me desplazo hacia abajo, desaparece. Hacia arriba, la cabecera por el color del suelo se vuelve blanca y la sombra de la caja se vuelve azul. Todo está funcionando perfectamente bien como se esperaba. En la próxima conferencia, comenzaremos a diseñar la cabeza. Nos vemos en la próxima conferencia. Mantente enfocado, y cuídate siempre. 36. Vínculos de navegación: Sigamos adelante para implementar los enlaces de navegación, justo dentro de la cabeza. Pero antes de continuar, tenemos que llevar todo a la normalidad. Ven aquí. Vamos a limpiar la cabeza una etiqueta. Volver a la página a aplausos. Tenemos que borrar los duplicados. Guardar en el navegador. Hermoso. Bien. Volvamos a la cabecera, y aquí vamos a tener suficiente vamos a darle un estilo. Vamos a hacerlo invisible. Se va a ocultar la visibilidad. Ahora en dispositivo extra grande, vamos a hacerlo visible. También un dispositivo extra grande, el ancho máximo para ser para Excel. Esto le dará el ancho máximo 56. En este punto de quiebre, vamos a tener el ancho para ser ocho Rm. El margen izquierdo y derecho va a ser automático. Nuevamente, dentro de la nove, vamos a tener en o esa lista Vamos a darle un estilo. Vamos a tenerlo display flex. El tipo de letra va a ser co negro. Uy. El negro tiene que estar en gorra así. Rollo de etiqueta flexible. La dirección de flexión es roll. Tenemos que alinear los artículos al centro. La altura va a ser 24. Ahora vamos a tener la etiqueta LI. Vamos a darle el estilo. Vamos a tenerlo agrupado. El texto va a ser a Excel, que mapeará a la altura de la línea y al tamaño de la forma. Vamos a tener una posición relativa. La fuente se va a aburrir. El margen derecho. Hagámoslo 20. Guardar en el navegador, no pasa nada. Ahora, comencemos a implementar los enlaces. Aquí vamos a tener una etiqueta A. Entonces vamos a hacer a casa. Ahora cuando revises el navegador, vas a ver casa. Hermoso. H. Vamos a darle un estilo. Nombre de la clase. Vamos a tener algún script java en el medio, así que usemos la interpolación de fuerza Ahora, queremos aplicar el estilo de menú. Elemento del menú. No te preocupes, te lo mostraré ahora mismo. Abre el explorador. Dentro del CSS global. Copiamos y pegamos las estufas aquí mismo. Y aquí está el efecto menú. Entonces, desde la izquierda, -0.75 M, desde arriba, el índice Z, altura con radio de borde, colores, y el resto de ellos. Si el índice uno seleccionado es igual a cero, vamos a tener la prueba negra, y de lo contrario, no pasa nada. Ahora, vamos a aplicar la prueba real. Sé que esta parte es bastante complicada, pero en, después de la implementación, la voy a explicar simplemente. El valor de color va a ser 666 d47. Bueno. La portada del grupo, cuando te escondes sobre ella, el texto va a pasar a blog Vamos a especificar la referencia de hipertexto. Esto es un puntero al componente del hogar. Al hacer clic en este enlace, tenemos que actualizar el índice seleccionado. Deberíamos actualizarlo a cero. Justo después de la L, vamos a hacer seleccioné el índice uno es igual a cero, entonces vamos a hacer algo. Aquí vamos a tener un lapso. Vamos a darle el efecto de menú de estancia. Transformar, la opacidad lo convierten en 100. Lo rotaremos hacia la dirección negativa. Por lo tanto, menos rotar 12, por lo que esto tendrá que rotar hacia el ángulo negativo. Grupo. También tenemos que rotarlo. S. Sólo tenemos que destacar el lapso. Copia, ven aquí y pega. Entonces la diferencia es que esto va a rotar hacia la dirección positiva. No tienes que prefijarlo con el signo menos. Y creo que es lo único que tenemos que hacer. Vamos a ver el navegador. Ahora, ¿puedes ver? Se resalta. Bien. Bueno. Lo que tenemos que hacer ahora mismo es resaltar la etiqueta LI y duplicarla tres veces. O puedes copiar y pegar tres veces. Resalte de las líneas 38 a 50. Voy a duplicarlo tres veces. Perfecto. Entonces este es el primer duplicado. Ahora aquí, si se establece el índice seleccionado uno es igual a uno. Actualízalo a uno, y esto nos va a llevar a la sección de cartera. Esto va a ser dos. Dos. Cuando se hace clic en este enlace, queremos desplazarnos suavemente a la sección Acerca de mí Acerca de mi componente. Por último, ops , chicos, lo siento por eso. Mira, tenemos que cambiar el HTML interno. Aquí voy a hacer cartera. Aquí voy a hacer sobre mí, o puedes hacer sobre Por último, aquí van a haber tres. H. Tres. Vamos a exhibir ami. Guarde la aplicación. Compruébalo en el navegador. Hermoso. ¿Puedes ver cuando yo ho? Muy bien, entonces no estoy completamente convencido con el resultado que tenemos. Porque si observas con atención, te darás cuenta de que los enlaces están todos resaltados. No lo queremos de esa manera. Entonces vamos a arreglarlo en las próximas dos conferencias. Nos vemos entonces. 37. Menú de cajón de navegación por encabezado: Bienvenido de nuevo a Clouds. En esta sección del curso, vamos a proceder a diseñar el dibujo diagonal. Abra el componente de encabezado. Desplázate hasta la parte superior. Despejemos rápidamente el registro de la consola. Aquí vamos a hacer cajón abierto constante, configurarlo en una función de flecha. Ganar la función, vamos a actualizar está abierta. Vamos a actualizarlo a true. Recordemos que en la conferencia anterior, declaramos que la variable de estado está abierta, y el estado inicial es falso. Entonces ahora estamos actualizando el estado justo dentro de esta función. Bonito. Vamos a renderizar rápidamente el cajón. Lo que voy a hacer primero es importarlo en la parte superior. Vamos a importar cajón de punto slash, ellos van a dibujar Entonces dentro de los fragmentos, vamos a tener un div. Dar el nombre de la clase. Seguro, queremos hacer uso de la interpolación de cadenas, así podemos escribir algún script java en el medio Dagon a d cajón. Si está abierto se establece en true, vamos a tener la clase es abierta, y de lo contrario, no pasa nada. Vamos a estilizar esta clase en el futuro. Cerremos la D. Dentro de la D, tenemos que renderizar el cajón. Ciérralo con la etiqueta de cierre automático. Ahora vamos a hacer es abrir, va a ser igual a es abierto. Entonces el conjunto está abierto. Se va a establecer está abierto. El índice seleccionado uno, va a ser igual a, el índice seleccionado uno. Por último, establecer el índice seleccionado uno, se va a establecer el índice seleccionado uno. Hermoso. Estamos enviando todas estas tapas como apoyos hacia abajo en el componente del cajón Ahora habiendo hecho todo esto, tenemos que recibir estos apoyos dentro del componente de cajón Abre el explorador y luego diagnodrad o sillas. Generemos los componentes funcionales. Justo dentro, tenemos que desestructurar está abierto. El conjunto de coma está abierto. Coma seleccionado índice uno, conjunto seleccionado índice uno. No he desestructurado todo esto. Volvamos al componente de encabezado. Lo que vamos a hacer dentro del componente de cabecera es mostrar el cajón. Aquí mismo, vamos a tener una d, darle un nombre de clase. Vamos a tener su posición relativa. Dentro de esta d, vamos a tener otra d. el índice Z va a ser 30. Vamos a tener su posición absoluta. Los autos van a ser punteros. El ancho es de 14. La altura también es de 14. En dispositivos grandes, el ancho, hagámoslo 24. Columna O G, H 24. El color bagrond, vamos a tener nuestro propio color personalizado, vamos a hacer para ocho AF d E. Vamos a tenerlo display flex, justificar contenido al centro Alinea los elementos al centro, y queremos que los bordes sean redondeados. Redondeado d, B R, x l Esto hará que los derechos inferiores del borde sean un poco curvilíneos. Esto hará que los derechos inferiores del borde Aquí. Cerremos la d, y dentro de la D. Antes de continuar, tenemos que implementar el click. Al hacer clic fuera del deve, queremos abrir el cajón Déjame mostrarte rápidamente. ¿Puedes ver? ¿Aquí está? Entonces ahora vamos a poner el menú por aquí y mirar esto. ¿Qué demonios es esto? Eso se arreglará en el futuro. Vamos a continuar. Ahora vamos a tener un dev. Dale un estilo al dev. Vamos a tener su posición relativa. El ancho va a ser siete, G diez. La altura va a ser siete. G H, diez. Vamos a tenerlo display flex, ify content to center Alinea los artículos al centro. Cerrar la D. Dentro de la D, tenemos que mostrar la imagen, que es la imagen del menú. IMG SRC equ slash cajón punto PNG. La alternativa, vamos a hacer artículo de cajón. Vamos a dar el estilo, el ancho, vamos a especificar un ancho personalizado de 150 píxeles. La altura va a ser diez. Más cerca con la etiqueta de cierre automático. Cuando guardas y revisas el navegador, los ADs, ¿puedes ver? ¿No es esto hermoso? Cuando observes con atención, verás las cosas por aquí, y en realidad está ocupando espacio y no me gusta. Este escribir. No sé dónde lo tenemos, pero tenemos que buscarlo. Creo que eso debería estar dentro del cajón diagonal. Y aquí está, esta sobrecarga profunda. Ahora voy a borrar este ítem dentro del HTML interno. Cuando guardas el proyecto. Hermoso. Ahora estamos avanzando y me gusta. Cuando observe el enlace de navegación, se dará cuenta de que el cajón está cubriendo el enlace de inicio. Puedes ver, hay un enlace en la esquina superior izquierda de la pantalla, el enlace de inicio. Entonces tenemos que alinearlo correctamente para que el hogar llegue justo después del cajón de navegación. Entonces necesitamos un espacio intermedio. Hagámoslo en la próxima conferencia. 38. Desafío de enlace a la casa: Con base en la observación de la conferencia anterior, nos dimos cuenta de que el cajón de navegación está cubriendo el carril de la casa, y ese fue exactamente el tema prometí revelarle. No lo he dicho. Vamos a arreglarlo rápidamente. De vuelta a S cot, dentro de la cabeza S, hay que desplazarse hasta la parte superior donde tenemos la cabeza en la etiqueta, y aquí está. Lo que vamos a hacer aquí es especificar un ancho del 100%, que es W. El equivalente real de CSS va a ser ancho 100%. Y cuando se ciernen sobre él, dentro de los intellisens lo van a ver Guardar en el navegador, son estos. ¿Puedes ver? Hermoso. Ahora, cuando haces clic en el inicio, el hogar se resalta y el resto del enlace de navegación se desmayan un poco Al hacer clic en portafolio, va a quedar resaltado y el color de prueba será el negro. Lo mismo aquí, lo mismo aquí. Entonces lo mismo aquí. Todo está funcionando perfectamente bien como se esperaba. Algo que quiero que hagamos aquí es renderizar los múltiplos de la página principal. Quiero mostrarte algo muy rápido. Abra las páginas y luego rendericemos rápidamente el componente doméstico varias veces. Yo sólo quiero hacer esto para que obtengamos un pergamino. Ahora podremos desplazarnos por el sitio web. Entonces observarás que cuando me desplace hacia arriba, puedes ver, el encabezado se vuelve blanco y la sombra de la caja se vuelve azul. Y aquí haciendo más visibles los enlaces de navegación. ¿No es esto hermoso? A mí me encanta. Todo bien. Es responsive en nuestra plataforma. ¿Puedes ver? En iPad. Hermoso. Bien, chicos, así que esto es exactamente lo que vamos a lograr en esta conferencia. Rápidamente, vuelve al código VS. Limpie los múltiples renders, y luego tengamos solo un componente home renderizado en la pantalla. Muy bien, todo genial. Y eso es correcto. 39. Abrir y cerrar el menú de navegación button: En la conferencia anterior, implementamos el menú de navegación. Pero cuando haces clic en él, no pasa nada. En esta conferencia, seguiremos adelante para implementar la funcionalidad de abrir y cerrar. Él al código VS. En la parte superior, vamos a importar. Utilice router, com Ue nombre de ruta. Y esto viene de la siguiente s Navegación. El router de uso es una función, así que tenemos que invocarlo. Y luego le asignaremos una variable. Const ruta equ. Hagamos lo mismo con el nombre de ruta de uso. C nombre de ruta equ U nombre de ruta. El nombre de ruta de uso es un enlace de componente de cliente que le permite leer el nombre de ruta URL actual. Habiendo hecho eso, reemplacemos esta d con fragmento de reacción. Dentro del fragmento, vamos a tener un df, dar el nombre de la clase para estilizarlo. Vamos a tenerla posición relativa. Dentro de este d, vamos a tener otro df, darle el nombre de la clase. Ahora queremos usar la interpolación de cadena para que podamos escribir alguna pieza de script java en el medio El índice z índice 50. Ahora mismo, vamos a tener alguna condición. Si el nombre de ruta es como este, que es el puntero al componente home, lo vamos a tener desde el punto superior cero píxeles, y de lo contrario desde arriba va a ser de 100 píxeles. Entonces aquí vamos a tener el cos o a ser señalados. Queremos que se fije a la cima. El menú dentro del cajón va a tener exactamente la misma altura con el menú dentro del componente de cabecera. ¿Bien? Dt te preocupes, definitivamente obtendrás la idea clara. Así que ve al componente de encabezado, desplácese hacia abajo y copiemos todo aquí mismo. A partir de la altura. Ven aquí. Y luego pegarlo. Hermoso. Ciérralo hacia abajo. Otro, dar el nombre de la clase, dentro del nombre de la clase, vamos a estilizarlo. También, ven aquí. Copiemos esta inmersión porque va a ser exactamente lo mismo. Vamos a reemplazarlo. Ciérralo hacia abajo. Una cosa más que tenemos que hacer dentro de este df es, ven aquí. Queremos especificar el clic. Al click de este df, queremos cerrar el menú. Vamos a establecer está abierto a la fuerza. Aquí vamos a hacer. Si está abierto es e quo true, queremos mostrar el SVDiC cerrado Así que rápidamente abre el código recurso punto MD. Resaltar de las líneas 192 2205. Copia, ven aquí y pegarlo en el medio. Y s. también tenemos que mostrar el icono del menú. Resalta copia, ven aquí y pegarlo en el medio. Todo lo que tenemos para formatear el código. Cuando guardas en el navegador. Todo bien. No pasa nada. Entonces, por ahora, es posible que no puedas ver el efecto en la pantalla. Déjame mostrarte algo. Cambiemos el BG a rojo para que entiendas de lo que estamos hablando. BG, rojo, 500. Habiendo hecho esto, apliquemos rápidamente las estrellas. Abre el dibujo diagonal en CSS. Tenemos que estilizar que van a dibujar dentro de la cabeza en vítores Copia, ven aquí, punto, van a dibujar. El ancho del sorteo va a ser del 100%. La altura 100 vista altura. La posición se va a fijar a la parte superior. Transformar el origen, lo queremos desde arriba a la derecha. Transformar traducir, -100%, -100%. Transction, queremos transformarlo 0.5 segundos en un. El Coso va a ser puntero. El índice z es 100. Ahora para la diagonal abierta, el cielo. Si este open se establece en true, también tenemos que estilizar esta clase por aquí abierta Copia el dibujo diagonal, ven aquí y pega. Punto abierto. Todo lo que tenemos que hacer aquí es transformar, traducir 00. Tan simple como eso. Volver al componente header, justo en la parte superior, vamos a pot do dot slash, header slash Ellos van a dibujar CSS de punto. Cuando guardes, ahora definitivamente verás algo bueno en la pantalla. ¿Puedes ver? Cuando haces clic, lo cierras. Haga clic para abrir, lo cierra. Ahora, déjame explicarte todo línea por línea. Te darás cuenta que cuando haga clic en este menú, el cajón de navegación aparecerá desde la esquina superior izquierda de la pantalla hacia la derecha. Échale un vistazo. C. Entonces cuando aparezca, vas a ver el icono x, que es el icono de cerrar. Ahora, cuando haga clic en el icono de cerrar, si estás lo suficientemente alerta, verás un ícono de menú Ahora mira. ¿Ves? Hay un icono de menú que aparece antes de este otro menú. Déjame acercarme un poco. Échale un vistazo. ¿Ves? Se apaga con un icono de menú. Entonces eso fue exactamente lo que hicimos dentro del cajón. Déjame mostrarte. Si su apertura se establece en true, vamos a mostrar el icono de cerrar, y aquí está, el icono x. Y si está abierto está configurado para forzar, que es si cierras el cajón de navegación, vamos a mostrar rápidamente este icono antes de que se cierre. Entonces echa un vistazo, obsérvalo con atención. Todo bien. Bueno. Habiendo hecho eso, en la parte superior aquí, hemos diseñado el layout para el cajón. Entonces el color es rojo, y aquí está. Tiene exactamente el mismo tamaño que el del componente de cabeza. ¿Puedes ver? Ahora hemos podido iniciar el está abierto y está cerrado. En la próxima conferencia, comenzaremos a implementar los elementos del menú. Muy bien, todo genial. Pero una cosa que debemos hacer aquí es cambiar el BG a azul. ¿Bien? De hecho lo hice rojo para enseñar trabajos, así que hay que devolverlo a este color. Cuando guardas en el navegador. Ahora cuando haces clic, ¿puedes ver? Todo bien. Todo está funcionando perfectamente bien. Pasemos a la siguiente conferencia donde implementaremos los elementos del menú. Nos vemos en la próxima conferencia. 40. Vínculos de navegación de menú a cajones: Entonces, procedamos con el diseño del menú. Abrir dibujo diagonal Gs. Todo bien. Desplácese hacia abajo. Justo después de este cierre d, vamos a tener un cabezazo. L et's estilizan rápidamente el encabezado. Dale el nombre de la clase, vamos a usar una interpolación fuerte Se va a arreglar la posición. El ancho va a estar lleno, lo que lo hará 100%. La transición va a ser todo. La duración, vamos a hacerla 500. El índice z es 40 hermoso. Una vez hecho eso, aquí vamos a tener una condición. Si el nombre de ruta es igual a esto. Lo vamos a tener desde arriba cero. A s, vamos a tenerla desde arriba -98 pixeles, o puedes hacerla 100 si quieres Bien. Entonces dentro de la cabeza vamos a tener un dif, dale el nombre de la clase, vamos a tenerlo posición relativa. Otro df con el nombre de la clase. Aquí vamos a tener la posición del índice z, vamos a posicionarla absoluta. Transformar GPU. Vamos a tener que entra y sale. La duración es de 500. La transición es todo. Escala, queremos escalarlo 100. Traducir x, ninguno. Destacemos esto. Copia, ven aquí. Pegar. Esto se va a traducir Y. Vamos a darle opacidad, 100 La barra de tierra dos, dos, 3740. Vamos a cerrarlo. Todavía lo estamos estilizando. Aún no hemos terminado con el estilo. opacidad BG, que es la opacidad de fondo, va a ser El ancho 100%, vamos a tenerlo flex columna. Entonces en dispositivos más pequeños, vamos a tener su flex roll. Ya terminamos con esto. Ahora dentro de este de, vamos a tener un nervio. La prueba dentro del nervio va a ser blanca. Las fuentes, queremos usar la tabla de colores. Prueba alinear c. T para Excel. Hagamos que transforme ese. Todo bien. Bueno. Una vez hecho esto, vamos a tener la UL. Gana la UL. Rápidamente le demos el estilo. Nombre de clase, display flex. La dirección de flexión es columna. Gana la UL, vamos a tener una etiqueta LI. Vamos a darle el nombre de la clase para estilizarla. Vamos a tenerlo agrupado. Moting superior e inferior. Va a ser cuatro, A Excel, vamos a tener el apareamiento superior e inferior para ser cuatro. Esto mapeará al margen superior e inferior del margen en el punto de ruptura de 15 36 píxeles. Una vez hecho esto, cuando guardes en el navegador, da clic en el menú. Todo bien. Se viene. ¿Pueden ver que viene el cajón, pero tratemos de finalizarlo para ver si tenemos problemas Dentro de la etiqueta LI, vamos a vamos a tener una d, dar el nombre de la clase Vamos a tener un bloque en línea de visualización. La posición es relativa. Estamos en la D, vamos a tener la etiqueta A. Estamos haciendo mucho aquí en el encabezado. H REF, la referencia hipertextual. Vamos a hacer slash a casa. Entonces, cuando hagas clic en este , te llevará al componente del hogar. Especifique el clic. Haga clic, vamos a establecer el índice seleccionado uno a cero, simplemente porque ese es el valor predeterminado para el hogar. Y espero que entiendas lo que estamos haciendo aquí de la conferencia anterior donde declaramos las variables de estado a utilizar. Entonces, cuando se establece el índice seleccionado uno es cero, significa que estamos en la página de inicio. Entiendes, no te preocupes, ya que seguimos rockeando, definitivamente entenderás todo Aquí vamos a establecer está abierto a la fuerza. Porque al hacer clic en el enlace, deberíamos poder cerrar el menú. Entonces pongámoslo a fuerza. Cerremos la etiqueta A. El HTML interno, vamos a mostrar a casa. Cuando revises el navegador, haz clic, puedes ver, viene. Al hacer clic en él, te lleva al componente home y el cajón de navegación desaparecerá. Esa es exactamente la idea. Habiendo hecho todo esto, queremos que se resalte al hacer clic Fuera de la etiqueta A, vamos a tener algún script Java. Si el índice uno seleccionado es igual a cero, queremos darle algo de estilo. Ahora vamos a tener una d, dar el nombre de la clase. Vamos a tenerla posición absoluta. De arriba, va a ser dos de izquierda, va a ser menos dos. Cada vez que me veas prefijo la clase de utilidad de viento de cola con un signo menos, debes entender que queremos especificar un valor negativo. Izquierda, dos. Se va a dejar, negativo dos. El ancho va a estar lleno, lo que lo convierte en 100%. La altura también va a estar llena, lo que la hace 100% de altura. Transformar GPU. La transición es toda la duración. Hagámoslo 300. Vamos a rotarlo negativo seis menos gira seis. La opacidad 100. Grupo dv rotar seis. Grupo dv. La opacidad del Hva va a ser de 100. Lo siento, el baground, vamos a tener que randed Excel porque queremos que los bordes sean curvos El índice z, vamos a tener un diez negativo. Bien, vamos a guardarlo y a ver qué pasa. Vaya, antes de ahorrar, tenemos que cerrar la d así El cierre de no debería estar aquí. Córtala, y luego vamos a cerrarla aquí abajo. Ls ls, ls, no pasa nada. Asegúrate de cerrar el bajo de por aquí. Entonces resalta esta d otra vez, C P. Ven aquí. Uy. También, tenemos que cerrar el bajo d. Luego pegarlo aquí. Ahora vamos a hacer algunos cambios. A Esto va a ser. Girar cero, la opacidad va a ser cero. ¿Y qué es otra vez? Creo que eso es todo. Cuando guardas en el navegador, cuando haces clic, cuando coloco el cursor sobre el menú, echa un vistazo Se va a resaltar el rojo, y este rojo se está rotando. Entendido. Hermoso. Ahora, vamos cambiarlo al color real. Creo que el color real va a ser azul claro, así que tenemos que copiarlo desde aquí. La copia del cielo. ¿Dónde tenemos el color? Bien. Aquí está. Comando D para seleccionar mult. Límpielo en ambas líneas y luego pegue. Guardar en el navegador. Otra vez, cuando te ho, echa un vistazo. Esto me encanta. Vamos a resaltar la etiqueta LI y luego duplicarla tres veces, tal como hicimos cuando estábamos implementando los enlaces dentro del componente head. Caliente en el turno diez probabilidades, y luego toque la tecla de flecha hacia abajo para duplicar duplicar uno, dos y tres. Hermoso. Cuando guardas en el navegador, ahora lo tienes así. Pero tengo dudas en mi corazón. Este tipo de aquí se supone que va a cubrir la pantalla, que es este menú de aquí, y no sé por qué no aparece así. Bien. ¿Puedes ver? Se ve bien. Ahora comencemos a hacer algunos cambios. Esta es la primera etiqueta LI para la página de inicio. Para este de aquí, vamos a actualizar el conjunto de índice seleccionado a uno, y configuro el índice seleccionado es igual a uno, entonces tenemos que hacer esto. Y aquí va a haber cartera. Esto nos vinculará con el componente de cartera. La segunda etiqueta LI N C. Para la tercera etiqueta LI. Vamos a actualizar el conjunto seleccionado índice dos. Si entonces si es igual a dos, queremos pasar al componente Acerca de mí. Y por cierto, también tenemos que cambiar la ref. Entonces aquí, voy a hacer sobre componente. Desplazarse hacia arriba. Aquí, tenemos que cambiarlo dos. Portafolio. Y ésta es la última. Entonces vamos a actualizarlo a tres. Si es igual a tres, entonces tenemos que pasar a los componentes iami Aquí, vamos a especificar una M, justo en la unidad. ¿Qué es otra vez? Tenemos que comprobarlo muy bien. ¿Todo bien? Bien, está bien. Si nos perdemos algo en el futuro, definitivamente podemos arreglarlo. Cuando guardes en el navegador, abre y boom. Ahora cuando cierras el cursor, ves cosas como esta. ¿Puedes ver? Por lo que en la próxima conferencia, implementaremos los íconos de las redes sociales. 41. Desafío de navegación con el cajón (cómo arreglar la altura): Entonces el diagono dra es media pantalla, y no estoy contento con el resultado final Seguro, hay un problema con la altura. Entonces quiero que lo tomes como un reto, publiques el video e intentes lo más posible para arreglarlo a tu final. No he intentado solucionar el problema de tu parte. Rápidamente, déjame mostrarte cómo lo arreglé también. Volver al código VS. Gana el Dagono dra do s, aquí está el cabezazo. Tenemos que especificar la altura de esta t. Así que tenemos la dirección flex para ser columna. Lo correcto es que se muestre flex, y luego la dirección del flex es columna. Habiendo hecho eso, también tenemos que hacer H da pantalla. Esto mapeará la altura a 100 alturas de vista. Cuando guardes, compruébalo en el navegador. Ahora puedes ver, todo está bien alineado. Cuando yo ho, echa un vistazo. Se ve bien, y me gusta. Cerrar. Abrir, cerrar. Entonces básicamente, el problema está arreglado, y todo está funcionando perfectamente bien como se esperaba. Ponencia de sangría, comenzaremos a implementar el ícono de redes sociales justo debajo del Nav, que es el enlace Aquí lo vamos a implementar. Hagámoslo en la conferencia de Dinos. 42. Iconos de redes sociales con cajón de navegación: Bien así que comencemos a implementar los íconos de las redes sociales. Gana diag para empatar, justo después del nervio de cierre Vamos a tener una sección. Vamos a darle un nombre de clase. El margen superior y margen inferior va a ser 14 y menor dispositivo. El margen superior y margen inferior van a ser 12. Bien, así que en dispositivos más pequeños, vamos a tenerla posición absoluta. En O G, vamos a tenerlo relativo. Nuevamente, en dispositivo más pequeño, desde la derecha va a ser cero. La altura va a ser pops antes de proceder a la altura, también implementada en dispositivo grande. Espero que puedas ver con claridad. Todo bien. En Pequeño el dispositivo, la altura va a ser de altura completa, lo que lo hará 100%. En LG, la altura va a ser automática. Todo bien. Entonces dentro de la sección, vamos a tener una etiqueta H. Vamos a dar el nombre de la clase. Vamos a tener un bloque de visualización. En un dispositivo más pequeño, queremos que esté oculto. En un dispositivo más pequeño, queremos que no muestre ninguno. Ahora G, vamos a tener un bloque de visualización, el augurio de la fuente La prueba, tenemos que especificar una prueba personalizada. Prueba guión a Excel. Entonces vamos a tener que transformar mayúsculas. El fondo del margen va a ser cinco. Dentro del HTML interno, vamos a hacer seguirme por ahí. Así como esto. Cuando guardes, consulta el navegador. Abre el cajón. Uy. Vamos a ver algo. Déjame volver a guardar. Cargar. Todo bien. Aquí está. Hermoso. La siguiente línea es mostrar el ícono de redes sociales. Dentro de la sección, vamos a tener una D. Vamos a darle el estilo. Vamos a tener un flex de display. Dirección flex, va a ser rollo. En dispositivos más pequeños, la dirección de flexión va a ser columna. Dispositivo grande, queremos que flexione roll. Dentro de la D, vamos a tener un remolcador. Dentro del remolcador A, vamos a darle un ref. Aquí mismo, tienes que especificar tu identificador de Twitter. El enlace, y yo sólo pegué el mío. Bueno. Darle el nombre de la clase. La prueba va a ser gris, y después tenemos que especificar el valor para hacerla más gruesa. Al flotar, queremos cambiar la prueba a. Texto blanco. Transición, color y luego la duración. Hagámoslo 300. La siguiente línea es copiar y pegar el SVG de Twitter. Ahora vuelve al recurso de código MD. Aquí está el SVG de Twitter. Copia de las líneas dos, 27, 2238. Resaltar y copiar. Regresa al código. Dentro del Html interno de la etiqueta A, solo tenemos que pegar. Cuando guardes, formateemos el código para obtener la sangría adecuada Todo bien. Bien. Guarda y echa un vistazo al navegador. Ya ves, ahora tenemos el ícono de Twitter. Una cosa que estoy observando es que no hay mucho espacio entre la etiqueta H y el icono. Vamos a ver algo. Todo bien. Aquí es donde la mística ly. En efecto, se trata de un error tipográfico. Va a ser B, que es el fondo de Magin. ¿Bien? Cuando guardes en el navegador, ahora echa un vistazo. ¿Puedes ver? Hermoso. Me gusta cada pedacito de los puntajes. Y espero que escribas un comentario maravilloso para realmente apreciar mi trabajo manual. Gracias por ello. Entonces el nido en línea es resaltar la etiqueta A y luego duplicarla tantas veces como quiera. Voy a duplicarlo tres veces. Creo que ya es suficiente. Todo bien. Es agradable. Una vez más. Y cuando guardes en el navegador, echa un vistazo. Se ve bien. Entonces lo que voy a hacer ahora mismo es cambiar los íconos y la referencia del hipotexto Sí. Para mí, he hecho esto al final. Entonces tienes que copiar bien el UR de tu perfil y luego pegarlo justo dentro del Hage reve Ahora, el segundo Hage reve Vamos a tener el git. Yo sólo voy a hacer aquí git. Esta no es la URL de mi perfil de Git. Puedes hacer tu al final. Abre tu cuenta de git, ve a tu perfil, y luego copia la URL, pegarla dentro del HRF Una vez hecho eso, tenemos que cambiar el SVG porque se trata de un SVG de Twitter. Volver al recurso de código. Ahora, aquí está el git. Copia los gits así. Compruébalo de las líneas 242, dos, 254. Copia, vuelve, y luego pegarlo aquí mismo. Formatee rápidamente el código. Además, vamos a tener este para Dribble. Copia la URL de tu cuenta de Dribble y pegarla dentro. Lo que solo voy a hacer es cambiar el SVG y luego puedes hacer el resto al final. Límpielo, vuelva al recurso de código, resalte y luego cópielo. Bien, pegarlo aquí. A formas de asegurarse de formatear. Y por cierto, puedes sostener el turno y t y luego tocar la tecla F para formatear. Ese es el atajo para formatear con predia. Y aquí, vamos a tener ng adentro. Además copia tu cuenta de Link Den y pegarla aquí, el enlace. Sólo voy a especificar Link Dn. Eliminar el SVG. Regresemos al recurso de código y luego copiemos el SVG para el Enlace D. Resaltar y copiar. Ven aquí, pega, mantén presionado el turno y d, presiona el FG en tu teclado para formatear. También aquí, tenemos que todo esto lo puedes hacer a tu final, incluso sin ver la conferencia. Aquí, voy a hacer Instagram. Copia tu cuenta de Instagram. Para eso, sólo tengo que copiar mi propia cuenta de Instagram. Límpialo, más allá de la URL de tu cuenta de Instagram. Esto es mío, y por cierto, puedes seguirme en Instagram. Entonces también tenemos que cambiar el SVG por el Instagram. Así como así. Desplace un impar y presione la tecla F a los formatos. Ahora vamos a ver el resultado final. ¿Se ve extremadamente hermosa? En el iPad, está alineado a la derecha. Entonces en dispositivo móvil, t una mirada. Funciona perfectamente bien, exactamente lo que esperábamos. Esto responde en todas las plataformas, y me gusta. Así que puedes hacer clic para abrir mi identificador de Instagram, y luego asegúrate de seguirme. Todo bien. Entonces todo está funcionando perfectamente bien como se esperaba. Nos vemos en la próxima conferencia. 43. Diseño de la pantalla de la cartera y visualización de artículos: Volveremos a clase. En esta sección del curso, seguiremos adelante para diseñar los componentes de la cartera. Básicamente, lo que vamos a hacer en esta conferencia es configurar el diseño de fondo. Donde después lo hago. Empecemos. Rápidamente abrimos el explorador, y luego SRC, tenemos que implementarlo dentro de las páginas s. antes de continuar, tenemos que hacer la entrada necesaria respecto a la fuente Abre el componente, el hogar y luego los hogares. Tenemos que copiar de las líneas cinco a las líneas diez. Resaltar y copiar, cerrarlo hacia abajo, volver a la página, que es la página principal. Común B para cerrar al explorador. Y luego tenemos que pegarlo aquí mismo. Hermoso. El nido y la línea es para especificar la altura aquí. Vamos a darle rápidamente un nombre de clase. Hombre, pantalla. Vamos a tenerla posición relativa. La altura mínima va a ser de 100 v. Habiendo hecho eso, debajo del render del componente home, vamos a configurar el layout para la cartera. Ahora vamos a tener un dev. Dale un nombre de clase, y dentro del nombre de la clase, tenemos que aplicarle estilos. El margen superior para ser cero. Entonces el Padin top cinco, el margen inferior, vamos a tenerlo -40 menos margen inferior, 40 Cierra el dev. Además, tenemos que especificar la identificación de la d. voy a venir aquí. Vamos a hacer ID, equa, portafolio. Entonces hay que ser precisos por aquí. Abre el explorador. Vuelve al encabezado, encabezado punto G. Así que tenemos que buscar bien. Aquí está. Es sumamente correcto. Así que asegúrate de que coincida con lo que tenemos por aquí porque cuando se haga clic en este enlace, queremos abrir estos componentes Hermoso. Todo lo que hablo demasiado. Cierra el encabezado, cierra el explorador. Y ahora continuemos. Una vez hecho eso, también tenemos que darle este estilo DV. Queremos usar un poco de estilo inline aquí. La imagen de fondo, gradiente lineal, vamos a rotar -62 grados Coma, y el color va a ser un azul claro. Vamos a tener EF siete F B. Vamos a tenerlo cero, 50%. Y esta porción va a ocupar cero, 50%. Si el coma y la otra porción va a ser blanca, y va a ocupar de cero a 100%. puedes recalcularlo a tu final y hacer que se vea más mejor en cuanto a dividir la pantalla Pongamos un coma aquí mismo, y luego bajemos. Sepárala con la coma. Ven aquí a menos que se especifique ancho. El ancho va a ser del 100%. Cuando guarde, asegúrese de que la aplicación se esté ejecutando y, a continuación, consulte el navegador. Por ahora, es posible que no veas nada en la pantalla. Vamos a mostrar rápidamente algunos elementos para que sea visible. ¿No sería esta D? Tenemos que formatear rápidamente el código. Justo dentro de la d, vamos a tener otra D, darle un nombre de clase. Entonces tenemos que hacerlo receptivo en nuestra plataforma, contenedor. Entonces el agine va a ser auto. Dentro de este df, vamos a tener una etiqueta P, y el hetermal interno de la etiqueta P va a ser portafolio. Queremos que esta cartera quede detrás del fondo. Guardar. Ahora, aquí está la cartera. Vamos a darle una estrella. Nombre de la clase, donde en el nombre de la clase. Vamos a tener la prueba. Hagámoslo 300 pix porque queremos que sea grande. Por ahora, puedes ver el portafolio por aquí, cómo es correcto. Ahora, dale 300 pix cuando vuelvas al navegador, y luego te ves hermosa. Ahora, quiero que observen cuidadosamente la pantalla del portafolio. Te darás cuenta de que se divide en dos porciones. La primera porción es blanca y el borde derecho de la porción es azul claro. Entonces queremos que esta cartera se asiente solamente En esta porción, la porción blanca. Entonces lo que vamos a hacer es hacer que el desbordamiento se oculte, y luego le aplicaremos más estilos. Pero por ahora, solo fíjate que la pantalla está dividida en dos porciones, y aquí está la implementación. Este tipo de aquí. Aquí. Hermoso. Bien. Vamos a continuar. La prueba, vamos a tener una prueba de color personalizada, F seven FB, cod. En dispositivos medianos, el patrón que queda va a ser de 50 píxeles. De lo contrario, vamos a tener el paddn de izquierda y derecha para ser cinco El max con, tenemos a 2750 pixeles. El ancho 100%. Después desbordamiento. Hagámoslo pegando. Al guardar, ahora la cartera aquí va a ocupar la primera porción de la pantalla. Échale un vistazo, y aquí está. Todo bien. Ahora vamos a tener un estilo. Vamos a hacer que se transforme, traduzca, cero pix, -20 píxeles. Ahora después de la etiqueta p, vamos a tener otra d. vamos a tener exactamente el mismo estilo con esto, así que solo tengo que destacar cop. Ven aquí. Por favor, échale un vistazo y pegarlo dentro de la D. Dentro del HTML interno de la d, vamos a tener una etiqueta P. Darle el nombre de la clase. La prueba, vamos a tener una prueba azul. Para A, FDE, en dispositivos medianos, va a ser de ocho píxeles De lo contrario, el relleno a la izquierda y el relleno a la derecha. Van a ser cinco. El frente, queremos que sea cuerpo extra, dentro de los dos tip, y luego tenemos que seleccionar cuerpo extra. El texto cinco Excel. Gana el HTML interno de la etiqueta P, vamos a hacer trabajos recientes. Guardar. Vamos a echarle un vistazo. Todo bien. Hermoso. Ahora tenemos el trabajo reciente. Bien. Ya me estoy dando cuenta de algo, pero te lo diré cuando terminemos Después de la etiqueta P de cierre del trabajo reciente, vamos a tener otra etiqueta P. Vamos a darle la estrella. Queremos hacer uso de la interpolación de cadenas. El ancho máximo, hagámoslo a Excel. En los dispositivos medianos, el indulto se fue. Mantengamos 80 pixes. Almohadilla izquierda y almohadilla y derecha, mantengamos cinco. La prueba va a ser pixes del sistema. El color de prueba para siete, c26d. Entonces altura de línea, vamos a hacerlo, margen superior, et cinco. Ahora, vamos a asignarle el teléfono, así haremos uso de la trasera de Google. Voy a hacer nombre de clase de punto trasero. Perfecto. Dentro del H T ML interno de la etiqueta P, vamos a copiar y pegar algo ahí. Abrir la obra terminada. Sólo tengo que destacar esto. Haga clic y copie. Puedes seguir adelante a escribir lo que describa a tu empresa o a ti mismo. Sólo tengo que pegarlo aquí mismo. Vamos a formar como el código, guardar. Y aquí está. Todo está funcionando bien, pero tenemos que arreglar algún problema. El portafolio se superpone, además, la prueba se superpone. Vamos a comprobarlo en el trabajo terminado. Ver en la obra terminada, todo está dentro de la primera porción. Además, la cartera se utiliza como fondo para el resto del ítem, y se puede ver c. ¿Qué hacemos ahora mismo? Regresa al código. Es bastante fácil hacerlo. Cuando te desplazas hacia arriba, a la derecha no lo haría este d. Hagamos que esto sea menor de 250 píxeles para que pueda empujar el ítem hacia arriba. Ahora cuando guardes en el navegador, mira, todo está bien alineado. A mí me encanta esto. Hermoso. Una cosa más que quiero traer a su aviso es que los artículos en el borde izquierdo de la pantalla están en cultivarlo contenedor. La forma en que podemos arreglarlo es hacer que este contenedor sea más grande que el contenedor en el edd derecho de la pantalla Espero que puedan observar y ver de lo que estoy hablando. Ven aquí. Veamos dónde dividimos la pantalla. Justo aquí. Ahora, hagamos que esto sea 45%. Cuando guardas en el navegador, todo está bien alineado, y este es exactamente el resultado esperado. Ahora ya hemos terminado de configurar el layout. En la próxima conferencia, seguiremos adelante para implementar las tarjetas slider. Esto es todo por ahora. Nos vemos en la próxima conferencia. Mantente enfocado, y cuídate siempre. 44. Tarjeta de cartera: Sigamos adelante para mostrar los elementos en la pantalla. Volver al código VS. Lo primero que vamos a hacer aquí mismo es importar los datos. Minimice el código VS, arrástrelo al borde derecho de la pantalla y luego abra los recursos de la cartera. Dentro de los recursos de cartera, vas a ver la fuente de datos, abrir la fuente de datos y aquí yace los datos gs. Volver al código VS. Común B para abrir el explorador. Ahora, arrastre y suelte los datos directamente dentro del directorio de aplicaciones. Hermoso. Ahora maximiza el código ias. Esto incluye los datos que vamos a usar dentro de la tarjeta deslizante Es solo una matriz de objeto. Dentro del objeto, tenemos el título, nombre, descripción e imágenes. Además, el segundo elemento, tenemos exactamente lo mismo. Y así sucesivamente y así sucesivamente. Vamos a renderizar rápidamente todos estos elementos en la pantalla. Abra los componentes. Haga clic derecho en la tarjeta deslizante. Aquí en Nuevo archivo. Mi punto deslizante, G es. Otro, haga clic con el botón derecho en Nuevo Archivo. Tarjeta deslizante punto gs. Genere el componente funcional justo dentro de los archivos. Cierra el explorador. Procedamos con mi deslizador GS. Para que los elementos se muestren en la pantalla. Primero, tenemos que importarlo dentro de este componente. Importe la matriz de datos de los datos de barra diagonal de la aplicación. Por supuesto, los datos S están justo dentro del directorio de aplicaciones. Habiendo hecho esto, ven aquí. Limpia. Nosotros en la D, vamos a mapear a través de los datos. Ahora vamos a hacer Data array dot map. Vamos a tomar un índice de columna de ítem. Este elemento de aquí representa cada elemento de la matriz. Déjame mostrarte el título, el nombre, la descripción, las imágenes, etc. Siempre que queramos recuperar el título, vamos a hacer el título del punto del elemento, el nombre del punto del elemento, la descripción, etc. Puedes cambiar el nombre del artículo a lo que desees, pero asegúrate de darle un nombre descriptivo que describa la intención. Aquí, vamos a configurarlo en una función de flecha, abrir y cerrar perentens Vamos a devolver la interfaz de usuario. Vamos a tener una d con el nombre de clase de control deslizante M. Gana mi slider, vamos a renderizar la tarjeta slider, que es este tipo de aquí mismo. Así que ve a la cima. Ahora tenemos que importar deslizador de la tarjeta deslizador de barra diagonal de puntos. Entonces yo sencillez, voy a hacer slider. Más cerca con la etiqueta de cierre automático. Y ahora vamos a pasar el ítem y el índice como apoyos hacia abajo en la tarjeta deslizante Entonces voy a hacer item equ item. Y luego índice índice equ. Entonces estamos pasando estos apoyos hacia abajo en la tarjeta deslizante. ¿Qué ness? Sigamos adelante para recibir los apoyos justo dentro del control deslizante Deslice un corte, y luego tenemos que desestructurar ítem, un índice Creo que deberíamos usar un fragmento de pelo. Destacar, borrarlo, y voy a hacer reaccionar fragmento de punto W en los fragmentos, vamos a tener una D, dar el nombre de la clase. La altura va a ser de 200 pixeles. Es una altura personalizada. En un dispositivo grande, la altura va a ser de 450 pixeles. En un dispositivo mediano, la altura va a ser de 400 pixes. En un dispositivo más pequeño, su teléfono, la altura va a ser de 200 píxeles En un dispositivo grande, el ancho va a ser de 650 píxeles. En un dispositivo medio, el ancho va a ser de 450 píxeles. L et's lo hacen 300 pixeles. Vamos a tener una posición relativa. El margen va a ser tal, cerrado en la def. Gana el dv, vamos a tener otro df. Dale un nombre de clase. La altura va a estar llena, lo que la hace 100%. El ancho completo. Vamos a darle un grupo. Entonces vamos a hacer todo el desplazamiento de Coso. El índice z z 50 posición ávida relativa. Cerró la d, y dentro de la D, vamos a tener una etiqueta IM, S R C equ Ahora, recordemos que recibimos los apoyos por aquí ítem, y este ítem representa cada elemento dentro de la R A. H, y por aquí, Mapeamos a través de la matriz de datos, y luego pasamos en el ítem Recuerda que este ítem se envió un índice al componente slider como probs Entonces aquí abajo para acceder a las imágenes, voy a hacer imágenes de punto de ítem. Y aquí están las imágenes. Entonces queremos obtener la primera imagen dentro de la matriz. H. Hablo demasiado. Para acceder al primer elemento de una matriz. Por supuesto, ya lo sabes. Sólo hay que usar el índice de matriz de cero. Ciérrala con el auto cerca en etiqueta. Cuando tú mismo. Veamos qué tenemos en el navegador. No se muestra nada en la pantalla. ¿Sabes por qué? Déjame mostrarte. Abre el explorador. ¿No se desplazará hacia abajo la página que Jz? Después del dif de cierre, déjame mostrarte este dif era el nombre de clase de contenedor. Vamos a tener otro dif. Dale un nombre de clase. Por ahora, no vamos a aplicar estilo. Aquí, vamos a renderizar mi slider. Ciérrela de la etiqueta de cierre automático y asegúrese de importarla en la parte superior. Guardar en el navegador. Ellos son estos. ¿Puedes ver? Ahora hemos logrado mostrar las imágenes. Se ve bien. Pero tenemos que dimensionarlo adecuadamente. Vamos a estilizarlo para que aparezca muy bien. La t va a ser. El ancho va a ser del 100%. La altura va a ser 200 pixeles, pero en dispositivo grande. Hagámoslo 50 pixeles. En el dispositivo mediano, hagámoslo 300 píxeles. El ancho máximo 100%. ¿Puedes ver? Ahora las imágenes tienen exactamente el mismo tamaño. Hagamos que los bordes sean redondeados un poco. Ahora voy a hacer dash redondeado G. Sf y el navegador. Echa un vistazo. ¿Puedes ver? Ahora los bordes están todos redondeados. Después de esta d, vamos a tener otra d. Vamos a tener esta posición absoluta. Desde arriba, 14, y dispositivo más pequeño. Izquierda 12, de izquierda, redondeada LG. También queremos que se redondeen los bordes. Estamos creando la superposición de tarjetas, dale el color blanco. La altura va a ser de 200 pixes. Entonces en dispositivo grande, la altura 30 50 pixeles, en la mediana, 300 pix, ancho va a ser del 100%. Entonces dentro de la inmersión. Bien. Justo antes de continuar, tenemos que darle una sombra de caja. Déjame mostrarte algo. Ahora voy a hacer VG, rojo 500. De veras quiero que veas la superposición de la tarjeta. ¿Puedes ver? Ahora, ve que se ve bien, ¿en serio? Se ve bien. Esta es la superposición de tarjetas. W el fondo rojo. Ahora vamos a cambiarlo a blanco. Entonces para que sea visible porque si está en blanco, es posible que no veas con claridad. ¿Puedes ver? No es lo suficientemente visible. Entonces lo que tenemos que hacer es aplicar sombra de caja alrededor de las esquinas. Entonces voy a hacer sombra de caja rancia. 48 A de la E. Queremos aplicar la sombra de caja tanto desde la izquierda, derecha, arriba como abajo. Menos diez pixs, diez pixeles, 20 pixs, diez px. Vamos a guardar y ver. Todo bien. Hermoso. A mí me encanta esto. Se ve bien, de verdad. Formatear el código con predia. Donde en este d, vamos a mostrar el nombre del ítem. Vamos a tener otro div con el nombre de la clase. Vamos a tener su posición altura relativa, siempre 200 pixes. En un dispositivo grande, la altura va a ser de 50 pixs. En dispositivo medio, la altura va a ser de 300 pixes. Por supuesto, estas son todas mis especificaciones, así que puedes hacer tu propia t a tu final. 100%. Cerrar la D. Dentro de la d, vamos a tener una etiqueta p. Gana el hetemel interior de la etiqueta P. Vamos a hacer el nombre del punto del artículo. Déjame mostrarte donde en los datos s. Aquí están los nombres. ¿Bien? Guardar en el navegador. Uy. Todo bien. Entonces en realidad está apareciendo, pero está detrás de la imagen. Entonces lo que voy a hacer ahora es darle el estilo. Tenemos que posicionarlo absoluto. Y luego el fondo tres. Y cuando revisas el navegador, aquí lo tienes. Todo bien. No me gusta la forma que aparece desde el lado izquierdo. No hay margen en absoluto. Lo que voy a hacer ahora es desde la izquierda. Vamos a darle lejos. La prueba, va a ser O G, la fuente. Hagámoslo 300. Bien. Todo bien. Ahora todo está bien alineado, y me gustan los resultados finales. Echa un vistazo. No es esto hermoso. Una cosa más que vamos a hacer es mostrar el icono en el que se puede hacer clic Justo después de la etiqueta IMD, vamos a tener una D, dar el nombre de la clase Vamos a tenerla posición absoluta. Desde abajo, 270 pix, en un dispositivo grande. Así que en realidad estamos tratando de apuntar a todos los puntos de quiebre. Entonces sí, va a aparecer a los 44, un dispositivo mediano. Va a aparecer dos en un dispositivo más pequeño. Va a aparecer 270 pixeles. Pero algo que tenemos que hacer aquí mismo es, cambiemos esto a 100 píxeles. Sí. Creo que eso es más correcto. Izquierda, seis, desde la izquierda, va a comenzar desde seis. Entonces lo queremos redondeado LG, transiction, La duración va a ser de 300 Espero que puedan ver con claridad. La opacidad de la opacidad es cero. Tengámoslo grupo agrupado. Solo queremos que aparezca el icono cuando nos escondamos en la imagen Grupo. Ahora la opacidad va a ser de 100 Bg, el fondo, 47 c2cd. El cos, el Coso va a ser puntero. Vamos a tener que mostrar flex, alinear elementos al centro, Justificar contenido a centro. Color de acento de sombra. G para 76 a seis d. El ancho del icono va a ser diez, la altura diez, y el dispositivo medio, el ancho 12. Nuevamente, en dispositivo medio, la altura va a ser 12 y LG, no estoy hablando de LG en cuanto a producto. Más bien en un dispositivo grande. W 20, nuevamente en LG H 20. Todo bien. Es bastante complejo por aquí. ¿Bien? Así que vamos a cerrar la D. Hermosa. Se puede pasar por ello una vez más. Si se vuelve tan estresante, puedes copiar y pegar mi código. No es un delito en absoluto. Ahora, vamos a mostrar el SVG. Volver al recurso de código. Vas a ver I S V G para deslizador de tarjeta. Copiemos este SVG aquí mismo. Regresa al abrigo. Pégalo dentro de este seve Vamos a formatear el abrigo. S en el navegador. Todo bien. Ahora, cuando me ciñe en el navegador, ves el yo soy. ¿Puedes ver? A mí me encanta así. ¿Puedes ver? Ya ves, vamos a darle una sombra de caja. Ve y estiliza el d. Coloca tu ratón aquí mismo. Pulsa en la tecla enter, el estilo, sombra de caja. Va a ser lo mismo con el slider cut shadow. Sólo tengo que venir aquí, y luego pegar. Guardar en el navegador. Ahora lo tenemos. Me encanta el resultado final. Echa un vistazo. Todo bien. Esto es hermoso, fantástico. Creo que hemos terminado con este componente, y estamos hechos para siempre. Ahora ya terminamos de mostrar la tarjeta. Un punto muy importante que quiero hacerle notar es el sistema de ruteo dinámico. No queremos mostrar este icono como diseño. Queremos que funcione. Entonces es más de funcionalidad que de diseño. Cuando hago clic en este icono, deberíamos poder pasar estos elementos a una página de detalles de cartera. Cuando hago clic en este tipo, el nombre, las imágenes, y todo lo relacionado con este tipo pasaría a una nueva página. Igual que este tipo y el resto de ellos. La idea es simple. Queremos obtener una publicación individual cuando se haga clic en este icono. Vamos a implementarlo conferencia en Internet, simplemente porque me gustaría explicarla en detalle. Ver conferencia en internet. Mantente enfocado. Yo siempre me encargaré. 45. Implementación de deslizador de tarjeta: Tenemos los ítems alineados en una columna. Pero cuando revises el proyecto terminado, te darás cuenta de que todos los artículos están alineados en una fila. Implementemos eso rápidamente con la ayuda de React Slick Volver al código FS C B para abrir el explorador. Tarjetas deslizantes, abre mi punto deslizador s. nuevamente, tenemos que copiar algunas directamente desde el componente del hogar, el componente del hogar, el componente del hogar Tenemos que copiar de las líneas dos a cuatro. Copiar, y luego pegarlo aquí. El nido en línea es para implementar la configuración del deslizador. No te preocupes, ya lo tengo preparado. Así que vamos a agarrarlo rápidamente del recurso de código do MD. Aquí está. Hay que resaltar y copiar desde las líneas 340 2482 Copia, ven aquí, y luego pégalo dentro del componente así. Ahorra, tenemos que aplicarlo. Entonces vamos a tener un bucle consistente. Slide to show va a ser uno, slide to scroll va a ser uno. Esta es la velocidad. La flecha está lista para caer porque no queremos que tenga una flecha izquierda o flecha derecha. El modo centro es cierto. El relleno central es de 400 pixes. Los puntos se establecen en true. Queremos tener algunos puntos justo debajo de los deslizadores de imagen Ahora aquí, queremos estilizarlo en dispositivos móviles. En el punto de ruptura de 1,700, vamos a tener la diapositiva para mostrar para ser uno Deslice a tornillo es uno. Vamos a hacer que se vea continuamente. Los puntos se establecen en true. El relleno central es de 400 pixes. Entonces lo tenemos sensible al punto de ruptura de 640. En este punto de ruptura, slide to show es uno, desplazarse es uno, infinito, lo que significa que queremos que se desplace continuamente. El punto se establece para forzar. El modo central se establece para forzar, y luego la partición central se establece en cero Vamos a aplicar estos ajustes de control deslizante a los elementos. Ahora tenemos que borrar de esta d. aquí, vamos a hacer slider. Justo dentro del control deslizante, tenemos que extender la configuración. Así como esto. H resaltar y cortar, y luego tenemos que envolverlo arriba. Hermoso. SF. Echemos un vistazo al navegador. Uy. Dice que el control deslizante de nombre se define varias veces. Vamos a desplazarnos hasta la parte superior y ver qué pasa. Tenemos un slider aquí, y también tenemos un slider aquí. Entonces hay un conflicto de nombres. Atornille a la parte superior y vamos a tenerlo fijo. Hagámoslo tarjeta deslizante de la tarjeta deslizante. También tenemos que aplicarlo aquí. SF, y en el navegador, son estos. ¿Puedes ver? Luce tan hermosa. A mí me encanta. Ahora, aquí están los puntos. ¿Puedes ver los puntos justo en la parte inferior? Así que vamos a comprobarlo en el dispositivo móvil. En dispositivo móvil. La diapositiva para mostrar es una, y la diapositiva para desplazarse es también una. Ahora deshabilitamos los puntos en la parte inferior. ¿Puedes ver eso? Pero en el iPad, la diapositiva para mostrar es una, y la diapositiva para desplazarse también es una. No podemos mostrar dos diapositivas. Ya ves, sólo tenemos una presentación, que es este tipo del centro. Todo está funcionando perfectamente bien. Uy, tenemos que limpiar la consola por ese molesto error porque ya lo hemos arreglado . Todo bien. Ahora bien, si observas con atención, te darás cuenta de que el espacio entre la etiqueta P y el deslizador es bastante enorme. Así que vamos a empujar un poco el deslizador hacia arriba. Y aquí hay otro reto para ti. Así que publica el video al final y luego trata de darle una solución rápida. Todo bien. Entonces déjame ayudarte. VS Code, abre la página punto s. aquí mismo, dentro de este deve donde renderizamos mi slider Vamos a borrar el nombre de la clase. Desplázate hasta la parte superior. Vamos a copiar este estilo desde aquí. Resaltar copia. Gana esta D. Vamos a pegarla. Entonces ahorras, la. Bien Subió un poco. Entonces aquí voy a hacer 100. Esto es más como especificar que la parte superior del margen sea -100 píxeles, y eso empujará al elemento hacia arriba Se ve genial, pero también queremos empujarlo más alto. Hagamos 170 tartas. Menos 170 pixes. Hermoso, y esto soluciona el problema. ¿Puedes ver? Me encanta el resto final. 46. Ruta dinámica: Hola ahí. Bienvenido de nuevo a Claus. En esta conferencia. Seguiremos adelante para implementar la página de post único. Cuando hago clic en este ítem, deberíamos poder pasar el artículo a una nueva página. Además, cuando hago clic en este tipo, deberíamos poder pasar precisamente cada uno a una nueva página. Podemos llamarlo página de detalles de cartera. Aquí es exactamente donde entra en juego el enrutamiento dinámico. Sigamos adelante para implementarlo rápidamente. Código VS, abre el explorador. Tarjeta deslizante, tarjeta deslizante. Por aquí, si te das cuenta, te darás cuenta de que no tenemos un on click. Incluso cuando haces clic en este tipo, nada habra. ¿Puedes ver? Solo puedes pasar el cursor sobre él y aparece. Pero cuando haces clic, nada se endurece. Tenemos que implementar al click D. D D por aquí que está albergando el SVG. Por defecto, Next es se ejecuta en el lado del servidor. Para implementar el “on click”, tenemos que cambiar del renderizado del lado del servidor al renderizado del lado del cliente Scrot top, para tener un switch, vamos a hacer uso cliente Además, vamos a hacer algún insumo. Vamos a importar el uso del router de la siguiente navegación de slash El router de uso es una función, así que tenemos que invocarlo. Enrutador Ue. Asignar su a variable. Costo enrutador equ Ue enrutador. Definamos rápidamente el clic aquí en el Steve. Vamos a tener un on click, configurarlo en una función de flecha. Así que con la ayuda del router de uso, podremos empujar el ítem a una nueva página. Y cómo lo hacemos es sencillo. Voy a hacer router dots, empujar, abrir y cerrar perentenss, y luego queremos hacer uso de la Queremos obtener los artículos por el ID dinámicamente. Entonces lo que voy a hacer es slash, detalle de cartera, slash, el ID Recordemos que en la conferencia anterior, les dije que estamos usando el índice como identificación, y lo desestructuramos aquí como probs. Enseñar el Bien. Hermoso. No he hecho esto. Cuando un usuario haga clic en el DF que contiene este icono. Entonces en otras palabras, cuando un usuario haga clic en este icono, queremos pasar este ID a una nueva página llamada cartera Dt. Entonces, cuando guardes y revises el navegador, vamos a volver. Al hacer clic, devuelve la advertencia de error 404, que dice que no se pudo encontrar la página. Una cosa es el ajuste. Hemos logrado agarrar el ID dinámicamente. Cuando revises dentro de la pestaña, vas a ver que la D de este post es cero, que es el índice del post. Entendido. Perfecto. Cuando regreses, hagamos clic en esto. Échale un vistazo. Dentro de la pestaña, vas a ver el ID. El ID es uno. Ahora volvamos al código VS para crear la página dinámica. B común para abrir el Explorer. Voy a copiar el detalle de la cartera, que especificamos aquí como ruta. Copiar, haga clic con el botón derecho dentro de la aplicación, Nueva carpeta. Pegue el detalle de la cartera, él en el entaky Toma notas. Lo que tienes aquí debe ser exactamente con lo que especificaste como ruta. Si haces lo contrario, no va a funcionar. Vaya, échale un vistazo. Todo bien. Gana el detalle de la cartera, ahora vamos a crear la ruta dinámica en sí misma. Carpeta nueva. Para crear una ruta dinámica, tenemos que envolverla en un corchete. Lo que vamos a agarrar aquí es el ID it en la tecla enter. Una vez hecho eso, tenemos que crear una página dentro del ID. Haga clic derecho sobre el ID, nuevo archivo. Voy a llamar a esta página punto Gs. RFC para generar el componente funcional. Vamos a tener una etiqueta Hage one para la enseñanza de trabajos. Voy a hacer página dinámica. Vamos a darle el Hage en un nombre de clase y la prueba siete Excel Echa un vistazo al navegador. Cuando hago clic, Ups, algo salió mal. Todo bien. Oh, mi mal. Chicos, tenemos que especificar el slash delantero así. Creo que lo hicimos anteriormente. Cuando vuelvas a cargar la aplicación, hagamos clic. ¿Puedes ver? Ahora tenemos página dinámica. Vamos a darle click a este tipo. ¿Puedes ver? ¿Tenemos la página dinámica? Hermoso. Todo está funcionando perfectamente bien como se esperaba, y me está encantando el resto final. Esta es la página en la que J Now hemos podido implementar nuestra ruta dinámica. En la siguiente conferencia, vamos a agarrar el post y hacer que se muestren en la pantalla. Créeme, el resultado final te va a volar la mente. Esto está apagado por ahora. Nos vemos en la próxima conferencia. Mantente enfocado, A cuídate. 47. Obtener el id en una nueva página (de forma dinámica): En la conferencia anterior. Logramos pasar el ID de cada elemento a una nueva página. Al hacer clic en cualquiera de los elementos de aquí, vamos a pasar dinámicamente el ID a una nueva página. Cuando observes la pestaña, definitivamente la verás por ahí. Este artículo tiene el ID de uno. Recordemos que estamos usando el índice como ID. En esta conferencia, seguiremos adelante para agarrar esta identificación, y eso se hará con params Abre el código VS. Dentro de la app, vamos a crear una nueva carpeta llamada página. Dentro de la página, vamos a crear otro directorio llamado portfolio Dt design. Dentro del diseño portfoli Dt, creemos rápidamente una nueva página Haga clic derecho en nuevo archivo, y luego lo vamos a llamar índice punto GS. Una vez hecho eso, cierra la página. Ahora abre el detalle de la cartera. Dentro de la ruta dinámica, tenemos que abrir la página. Detalle de cartera, ID y página. Cierra el explorador. Lo que tenemos que hacer aquí es resaltar y borrar los componentes funcionales básicos que generamos. Entonces vamos a tener cartera const, configurarlo en una función de flecha L et's exportan rápidamente la cartera por defecto. Importemos reaccione de react. Tenemos que tomar apoyos. El nido en fila es para agarrar la identificación y los datos. Tenemos que importar el diseño de detalle de la cartera. L et's importan rápidamente la matriz de datos. Hecho. Aquí mismo, vamos a devolver la interfaz de usuario. Vamos a usar fragmentos de puntos de reacción. Enrolle los fragmentos, rendericemos el diseño de la cartera. Diseño de detalle de portafolio. Ciérralo con la etiqueta de cierre automático. La línea de anidamiento consiste en pasar los datos como apoyos hacia abajo en el diseño de la cartera Datos iguales, matriz de datos, y aquí vamos a hacer puntales puntos Params punto ID Recuerden que tomamos en apoyos por aquí, hermoso. El ID igual props punto params ID. Por último, matriz de datos igual, matriz de datos. Consolemos los params. Consola dot log P params ID. Habiendo hecho esto, en la parte superior, vamos a hacer uso cliente. Tenemos que cambiar de la renderización del lado del mar a una renderización del lado del cliente. Hagamos clic para ver la Consola. Entonces cuando haces clic en un ítem, vengo un I para abrir la consola. Entonces vas a ver que el ID del ítem es cero. Hagámoslo más legible. Aquí voy a hacer. El ID es cualquiera que sea el ID. Guardar, y aquí, quiero hacer clic en un elemento diferente. Vamos a darle click a este tipo. Abre la consola, y verás que el ID es dos. Dos 48. Página de publicación única (diseño de detalle de cartera): L et's continúan con el diseño de cartera Dido. Vamos a configurar rápidamente el diseño de fondo. Justo después del cierre df de posición absoluta. Aquí está. Vamos a tener otro df, darle un nombre de clase. W en el nombre de la clase, vamos a tenerla display grid, grid template column es 12. Vamos a tenerlo posición relativa. El espacio izquierdo y derecho es cero. En un dispositivo grande, el espacio izquierdo y derecho también es cero. Cierra la d, dentro de la d. ahora vamos a darle la estrella. El trasfondo. Gradiente lineal. Queremos tener sus 90 grados RGBA 238, 247, 251, y uno Queremos que esta porción sea 58% sobre 100. Después la otra porción RGB A dos, 255 2551. Queremos que ocupe 52% de la pantalla. Esta es sólo mi especificación. Puedes hacer más a tu final. Ahora dentro de la def, vamos a tener otro de, darle un nombre de clase, y luego Column span 12 En un dispositivo grande, Columna, lapso ocho, margen inferior. Queremos desplazarnos. En un dispositivo grande, Patting izquierda y despedida derecha es cero En un dispositivo más pequeño, Patting izquierda y partición derecha también es cero Hagámoslo 20. Entonces todos sabemos que cada puesto de cartera tiene imágenes multiplicadas. Vamos a mostrar rápidamente las imágenes. Datos imágenes de puntos mapa de puntos. Llévate un artículo. Vamos a tener una D, darle un nombre de clase. Apliquemos rápidamente la clase de utilidad. Vamos a tener un flex de display. Justificar el contenido al centro. Pero en un dispositivo grande, ¿ queremos justificar el contenido hasta el final? Alineemos los elementos al centro. Cierra la d. no va a esta d, vamos a tener la etiqueta IMD, S R C equ, item, que es este tipo de aquí mismo Ciérrala con la etiqueta de cierre sf. Cuando veas ventrículo, el navegador, y aquí está él. ¿Puedes ver? Aquí están todas las imágenes que corresponden al sitio web de la empresa de entrega de alimentos. Tenemos todas estas imágenes justo dentro del ara. Puedes ir y comprobarlo dentro de los datos como. Ahora hemos logrado mostrar las imágenes. Apliquemos estilos rápidamente a él. En fotos de cartera. La altura va a ser Auto. Vamos a darle un nombre de clase. El margen superior es 20. Queremos que se redondeen los bordes de las imágenes. En el navegador, aquí está. ¿Puedes ver? Todo parece muy bien. Una cosa que no queremos aquí es que la primera imagen esté desbordando contenedor Entonces vamos a controlarlo aplicando el ancho. El ancho va a ser 800 en tu guardado en el navegador, y ahora lo tenemos. Hermoso. Toda la siguiente línea es implementar los ítems a la derecha de la pantalla. Por cierto, cuando vuelvas a casa, si haces clic en alguno de estos artículos, los vamos a ir a buscar dinámicamente . Después de revelar df. Vamos a tener otro df. Ahora quiero ser rápido un poco. En un dispositivo grande, solo hay que copiar esto, y luego hacer una pista. También en un dispositivo grande, queremos que el px sea cero. Pequeño dispositivo, también queremos que el P X sea cero. Por supuesto, debes conocer el equivalente CSS del Px y el resto de las estufas Te he estado enseñando a todos. Ahora vamos a tener otro dif, dale este nombre de clase div. El margen tb es diez, pero en un dispositivo más pequeño, el margen tb es 24. El ancho va a ser ancho completo. En LG, vamos a tener el ancho máximo para ser de 300 pixeles. También en LG, vamos a tener el parting left end pardan derecho a ser uno El relleno extremo izquierdo perdón derecho va a ser tres. Entonces vamos a tenerlo pegajoso de top ts. El fondo de despedida, va a ser 14. Entonces esto tendrá su posición pegajosa. Creo que esa es la única clase de utilidad que no expliqué. Y ahora lo expliqué. Hermoso. Habiendo hecho eso. Vamos a tener una etiqueta de cobertura uno. Gana el de cobertura, vamos a mostrar el nombre de la cartera. Entonces el nombre del proyecto, por así decirlo. Voy a hacer Data dot name. Veamos qué tenemos. Todo bien. Se trata de Yum Food Company A. Demos rápidamente el Estilo. Vamos a acceder a la clase de utilidad de texto d tres cel. El margen inferior es de cuatro, por lo que el texto color del texto dah, queremos ser consistentes en nuestros colores. Entonces usemos un azul claro. Para ocho FDE. Si te das cuenta, te darás cuenta de que hemos sido consistentes con nuestros colores, incluyendo el tamaño de fuente y el resto de ellos. Eso es simplemente porque al construir una aplicación profesional, tenemos que ser consistentes con las fuentes, el color y el resto del diseño. Por supuesto, ese es un punto importante que hay que tomar nota. Vaya, échale un vistazo. Hagamos esto 20. Ahora mismo lo tenemos aquí. Vamos a continuar. Bien chicos, no hay margen entre la imagen y el nombre. Vamos a proceder. Tenemos que arreglarlo al final. No se ha mostrado el nombre del proyecto. Procedamos a mostrar la descripción uno y la descripción dos. Ahora tenemos que usar una etiqueta p. Descripción del punto de datos. Aquí está. Rápidamente le demos el estilo. El tamaño de la prueba va a ser de 14 píxeles. Vamos a hacer uso del tamaño de fuente. El fondo del margen va a ser cuatro. Entonces también tenemos que ser consistentes en el color de prueba. Dos, dos, 370. Todo bien. Ahora, lo hemos hecho. Otra etiqueta P. Ponle esta etiqueta P, queremos mostrar datos punto, descripción uno. Veamos qué tenemos, y aquí está la descripción uno. Perfecto. Dale el nombre de la clase, y vamos a aplicar la clase de utilidad. Para las clases de utilidad, todo va a ser igual. Entonces solo tengo que resaltar copy, ven aquí y pega. Cuando ahorras, Oh, hermosa. A mí me encanta esto. Todo bien. Habiendo hecho esto, mostremos los cielos justo después de la etiqueta P. Vamos a tener un d dar el nombre de esta clase D. Vamos a tenerlo display flex, y vamos a tenerlo Flex Rb. A H una etiqueta. Rápidamente dale este estilo. Chicos, antes de continuar con esto, creo que vamos a tener un punto culminante entre las etiquetas p. Justo después de esta etiqueta P, vamos a tener otra etiqueta P. Dale una identificación a la etiqueta P, e qui, resalte. Vamos a hacer descripciones de proyectos. Veamos aquí es. Lo que voy a hacer ahora, habiendo hecho esto, darle un nombre de clase. Margen arriba y margen inferior, van a ser dos. El texto, lo vamos a hacer excavar. 20 pixes, la fuente es sis. Todo bien. Este es exactamente el resort esperado. Sigamos con este D. El derecho de margen va a ser cinco. El texto, hagámoslo 14 fotos. Aquí nos estamos manteniendo consistentes. El suelo del bar, vamos a tener un azul muy claro. 65f1. En un dispositivo grande, queremos cambiar el color del fondo de la barra. Px dos, Py, uno. Queremos que las esquinas sean redondeadas, las fuentes, margen inferior. Los textos, en dispositivo grande, queremos cambiar el color de prueba a 6a787 d. ganar el término H interno de la etiqueta H uno, vas a mostrar tu escala IU x diseño. Guarde y vea lo que tenemos en el navegador. Todo bien. Echa un vistazo. Aparece muy bien. Lo que voy a hacer ahora mismo es resaltarlo y duplicarlo tantas veces como quiera. Resalta la etiqueta Hadron. Voy a duplicar uno, dos, tres, cuatro, cinco. Seguro, hermoso. Aparece muy bien. Se pueden cambiar las escalas. Siguiente punto s. se puede hacer reaccionar, y así sucesivamente y así sucesivamente. Todo bien. Ahora ya terminamos con el diseño y todo se ve sobresaliente. La siguiente línea final es hacer un espacio entre las descripciones y la imagen. Hagamos esta corrección en el siguiente señuelo. 49. Desafío de espacio de cartera (assignment): En la conferencia anterior, tuvimos un reto con la imagen y la descripción. Si observas con atención, te darás cuenta de que no hay espacio entre ellos. Entonces quiero que publiques el video y luego intentes lo más posible para que lo arreglen a tu final. Bien. Entonces déjame mostrarte cómo lo arreglé. Atornillado a la parte superior donde tenemos el padre de. Este es el padre de que contiene cada artículo justo después del terreno de trabajo. Todo aquí así está justo dentro este d. Si observas el dv, te darás cuenta de que en un dispositivo grande especificamos el margen izquierdo y derecho para que sea cero. Vamos a cambiarlo a dos s en el navegador. Ahora tenemos un poco de espacio en el medio. Sigamos adelante para aumentar el valor. Voy a hacerlo seguro. Y por cierto, esta es la especificación de la mente. Puedes probar otro valor al final. ¿Puedes ver? Ahora tenemos espacio en el medio. Y todo está funcionando perfectamente bien como se esperaba. Vamos a comprobarlo en el dispositivo móvil. ¿Puedes ver? En dispositivo móvil, tenemos este fondo para ser azules. El fondo de prueba por aquí que resalta la escala, y ese es exactamente el resultado esperado. Bien, así que todo está funcionando perfectamente bien. El nido on line es implementar el siguiente, el avance del embarque. Hagámoslo en la próxima conferencia. 50. Siguiente y anterior Button: El. Bienvenidos de nuevo a clase. En esta conferencia. Iremos a implementar la siguiente y la funcionalidad anterior para que cuando el usuario haga clic en el siguiente bot en, podamos abrir el siguiente proyecto dentro de los detalles del portfolo Lo mismo aplicable al atornillado anterior. Permítanme demostrarlo rápidamente para que todos lo entiendan lo suficientemente bien. Aquí está el proyecto final. Cuando me desplace hacia abajo, van a ver el anterior el siguiente atornillado. Quiero que observen cuidadosamente. Ahora bien, si observas con atención, te darás cuenta de que dentro del atornillado anterior, tenemos la imagen de portafolio. Dentro del próximo empernado, tenemos la imagen de entrega de comida a domicilio. Ya sabes por qué. Es simplemente porque al hacer clic en el atornillado anterior, el proyecto anterior a mostrar es el portafolio, Axal el siguiente proyecto es la entrega de alimentos Déjame mostrarte, cuando haga clic en siguiente, ves, ahora aquí está el proyecto de entrega de comida. Si observa el siguiente embarque, el sitio web de bienes raíces es el siguiente, y el anterior es el sitio web de Administración Hotelera. Vamos a implementarlo dentro del código VS. Justo en la parte superior, vamos a importar el gancho de estado usado, y el gancho de efecto de uso. También tenemos que importar el router de uso. A partir de la siguiente barra, navegación. Importemos rápidamente la fuente de Google. ya lo hemos hecho antes. Ahora sólo tenemos que copiar. Abre la página, desplázate por la parte superior, copia de las líneas cuatro a nueve. Ciérrela, pegarla. Hermoso. Declaremos las variables de estado necesarias y el conjunto de funciones. Dentro del componente. Inicialicemos rápidamente el router de uso. Es una función, por supuesto, tenemos que invocarla, y luego asignarla a una variable Costo router equ uso router, declarando las variables de estado Vamos a tener el siguiente guión establecido a continuación. También, vamos a tener, sólo tenemos que destacar y luego duplicarlo. Aquí, vamos a tener anterior, y vamos a establecer anterior. Tan simple como eso. Dentro del efecto de uso, tenemos que implementar la funcionalidad. Si Js pasa punto, si Js en ID de paso de punto, los datos iguales son rad en longitud. Vamos a escribir rápidamente el código, y voy a explicar mejor cuando hayamos terminado. Aquí vamos a poner al lado de cero. De lo contrario, vamos a establecer junto a Json dot paz ID más uno. Habiendo hecho esto para el siguiente, vamos a duplicarlo rápidamente para el anterior. Vamos a reemplazar todas las ocurrencias de conjunto siguiente dos conjuntos previos. Comando D para resaltar los dos y luego aquí Vamos a hacer set anterior, y vamos a cambiar a menos uno porque en realidad estamos decrementando Cuando haces clic en siguiente, estás incrementando. Pero cuando haces clic en anterior, te estás moviendo hacia atrás tipo de. Sí, así que eso es lo que es. Una vez hecho esto, implementemos los bodins y luego apliquemos esta funcionalidad Justo después de este cierre d, vamos a tener otro d. Dale a esta d un nombre de clase. Vamos a tener su posición relativa. Tenerlo display flex, fondo como color. La altura va a ser 48. El texto porque vamos a mostrar texto dentro, el color va a ser blanco. Dentro de este df, vamos a tener otro div, darle un nombre de clase. Ahora vamos a usar la interpolación de cadenas porque estamos esperando la expresión de script java en el medio Por cierto, el ti trasero se encuentra en la esquina superior izquierda del teclado justo debajo de la tecla de escape. El ancho va a ser 1/2, que en CSS real, eso mapeará al 50%. Vamos a tener un flex de display Alinear elementos al centro, Justificar contenido a centro. Cubierta BG. Entonces queremos hacer uso de la fuente de Google ind punto, cerrar la D. Una vez más, lo que tenemos que hacer es usar nuestra estrella real. Por supuesto, deberías saber lo que queremos hacer ahora mismo. Queremos especificar la imagen de fondo. Vamos a usar una bolsa ti. URL. Rayos de datos tomados imágenes de puntos anteriores. Y vamos a agarrar la primera imagen justo dentro de la matriz de imágenes. Guardar y ver lo que tenemos. Componentes, tarjeta deslizante, mi tarjeta deslizante. ¿Hablas en serio? Uy, chicos. ¿Qué demonios es esto? Limpia. No lo necesitamos aquí. Y creo que ya estaremos bien. Vamos, adelante. Uy. Nuevamente, vamos a ir a la página tiene. Oh, Dios mío. Yo cometí un error ahí, mi mal, y lo siento por eso. Pégalo aquí. H. Bien. Ahora estamos tenemos un error, no se pueden leer propiedades de imagen de lectura indefinida. Una cosa que vamos a hacer ahora es antes del punto, vamos a aplicar una marca que como esta, y esto va a resolver ese problema. Échale un vistazo. Ahora tenemos el anterior. Definitivamente obtendrás la esencia. Vamos a tener una etiqueta A. Estilizemos rápidamente la etiqueta A. Tenemos un display flex justify content center, y entonces el color es el color real que hemos estado usando. El puntero coser, transición, color D, duración, Sk it 300. La barra de tierra 405 b66. La opacidad BG, hagámoslo 90. Artículos Alinear al centro. El ancho va a ser ancho completo, y por supuesto, ya deberías conocer el equivalente CSS. Y la altura va a ser de altura completa. Una vez hecho esto, implementemos rápidamente el on click. Dentro del HTML interno de la etiqueta A, vamos a hacer proyecto previo. Saf, en el navegador, y luego lo obtienes. Una vez hecho esto, tenemos que mostrar el ícono anterior. Abre el recurso de código. Aquí está el ícono anterior. Resalta y hazlo copiado. Pégalo aquí. Dar formato al código para una sangría adecuada. Sef en el navegador, ahora lo obtienes. Hermoso. Ahora cuando haces clic en este botón, no pasa nada. Implementemos rápidamente el on click. E Dentro de la etiqueta A. Vamos a tener el on click. Al hacer clic en este botón. Vamos a hacer ruta a punto. Empuje. ¿Qué vamos a empujar? Tomando una garrapata de bolsa y luego recorta el detalle de la cartera. Entonces debería ser exactamente lo mismo aquí dentro del sistema de enrutamiento dinámico. Detalle de la cartera. Bien. Slash, anterior, Guardar los cambios Todo bien. Entonces intentemos seleccionar un artículo. L et's se desplazan rápidamente hacia abajo. Ahora cuando hagas clic en anterior, nos va a llevar al proyecto anterior. ¿Puedes ver? Ahora vamos a implementarlo para el siguiente. Tenemos algo de aire por aquí dentro de la terminal. Bien, chicos, a ver qué vamos a hacer ahora mismo. Atornille a la parte superior. Déjame mostrarte. Diez lo hacen. Vamos a hacer algo así. Guardar. A ver. Y la anterior Exige que lo hagamos por el título. Hagámoslo aquí. Hagámoslo aquí. Hagámoslo en todas partes. Guardar. Vamos a golpear de nuevo. Da nombre 177. Esperanzas fechadas a la derecha. Aquí está. Ahora, el problema está resuelto. Bien. Bonito. Hermoso. Creo que tenemos que implementar también el siguiente para que todo esté equilibrado. Ahora lo que voy a hacer rápidamente es destacar este de. Ves esto de por aquí. Aquí termina. Escribir en líneas 138. Copiemos dos líneas una, 38. Resalta y copia, ven aquí y luego pegarlo. Guardar en el navegador. Ahora tenemos anterior anterior. Cambiemos rápidamente las propiedades. Primero, aquí va a ser el próximo proyecto. Guardar y C. Ahora tenemos a continuación. Puedes ver que la flecha apunta hacia la izquierda, así que usemos el SVG propol para el siguiente proyecto W en el recurso de código, copia el siguiente SVG, y luego borra esto y pégalo. Guarde y formatear el código para una sangría adecuada. Cuando revises el navegador, ahora tenemos el siguiente. Código. ¿ Qué más tenemos que hacer? Ahora tenemos que llamar a la imagen real para la siguiente. Lo que voy a hacer aquí es lo siguiente. Tenemos que actualizar el siguiente aquí, y luego llamar a la imagen. Como estamos aquí, tenemos que empacar el próximo proyecto. Cuando guardas y revises el navegador. Vamos a acertar a la siguiente. Regresa a casa. Ahora, comencemos de nuevo. Vamos a darle click a este tipo. Anterior. Todo bien. Siguiente, hermosa. Siguiente, hermosa. Siguiente. Todo está funcionando perfectamente bien. Está funcionando. Bien, chicos, así que terminamos con la siguiente y la anterior portabilidad. Y espero que esta conferencia les resulte útil. Todo bien. Esto ya está apagado. En la próxima conferencia, comenzaremos a implementar la sección Abt M. Nos vemos en la próxima conferencia. 51. Acerca de la disposición: Hola ahí. Bienvenidos de nuevo a clase. En esta conferencia, vamos a diseñar los componentes Aba M. Rápidamente, tenemos para eso hacer. Empecemos. VSCode, abre el Explorer Componentes S RC, dentro del directorio Abad M, clic derecho, crear un nuevo archivo llamado Abat Mi Dot s. Generar el componente funcional Cierra el explorador. Procedamos con el diseño del layout. Como es habitual, vamos a hacer uso de los fragmentos. Reacciona el fragmento de punto. Gana los fragmentos, vamos a tener una d. el color de fondo va a ser f3d Vamos a darle el top de patente de 250 píxeles. Dale un margen top ten. El relleno inferior 100 pixs. En un dispositivo grande, el relleno inferior. Hagámoslo 600 pixes. Vamos a tenerla posición relativa. En un dispositivo grande, la altura va a ser de 800 pix. Otro. Vamos a tenerlo contenedor, y el margen va a estar en. Esto tendrá algo dentro de esta t para ser centrado porque el margen izquierdo y derecho va a ser igual. Ahora vamos a tener una etiqueta de cobertura uno. Dentro del HTML interno de la etiqueta Hage one, vamos a hacer sobre mí. Vamos a pis a cabo. Además, apliquemos las clases de utilidad en la etiqueta Hage one El texto va a ser de 240 píxeles, el W 8%. Calefacción por desbordamiento. Posición absoluta. En un dispositivo grande, desde la izquierda va a ser 40. En un dispositivo medio, desde la izquierda va a ser 30. El top, vamos a tener -50 pixes. El color del texto e7fc. Bueno. Compruébalo en el navegador. Bien, no pasa nada. Vamos a renderizar rápidamente estos componentes dentro de la página s. salir del steve. Entonces vamos a renderizar sobre mí. Y por favor, asegúrese de importar estos componentes en la parte superior. Se importó automáticamente para mí. Todo bien. Ahora volvemos aquí, seguros en el navegador. Rojo. Todo bien. Y aquí está. Bien, entonces, los antecedentes no están apareciendo. Es simplemente porque espaciamos el corchete cuadrado para un estilo personalizado. Hagamos rápidamente el ajuste necesario dentro del corchete. Y él lo. Hermoso. Después del seto un tirón, vamos a tener otro tirón de Hedge uno, y esta vez voy a hacer Rápidamente le demos la estrella. Vamos a tenerlo posición relativa. El tipo de letra va a ser bloque rector. Texto, cinco Excel. Nuevamente, el color del texto, vamos a permanecer consistentes con el color del encabezado. Voy a hacer 48 AF de. Ahora lo entiendes. Margen inferior. Va a ser cinco, y también el margen superior va a ser -40. En un dispositivo mediano, relleno izquierdo y relleno derecho, va a ser 24. Y E, vamos a tener palmadita izquierda y patrón derecho para ser cinco en el otro punto de quiebre Vamos a guardar y a ver qué tenemos si el rubro está bien hecho, y aquí está. Hermoso. Todo está alineado correctamente. Todo bien. Perfecto. Muy bien Antes de continuar, rápidamente démosle una identificación a esta D. ¿Bien? ID, equ, guardar el proyecto, comando B para abrir el explorador, ir a la cabeza gz Echemos un vistazo al enlace para ver la referencia si en realidad es correcta. Este es el Abt M, y aquí apuntamos al componente A. Te aconsejo destacar y C. Regresa a Abt M y luego pegarlo así Guardar, veamos si funciona. Ahora hago clic en el Acerca de mí. Boom. Se mueve desplazada a los componentes Abat me. Portafolio, boom, Hm. Por último, Hm. Ahora volvamos a hacerlo. Sobre mí y boom. Bellamente hecho. Todo bien. Vamos a continuar. Cierra el explorador. Ahora tienes que escribir sobre ti mismo. Después de la etiqueta Hage one, vamos a tener una etiqueta H four Dentro. Solo voy a hacer knack de pod en software con operación front-end n y back end Vaya, échale un vistazo. Todo bien. Guardar. Vamos a echarle un vistazo. Bien. Vamos a estilizar rápidamente el H f t. Vamos a tenerlo relativo El ancho va a ser ancho completo. El ancho frontal va a ser de 300. En dispositivo medio, vamos a tener el ancho para ser 3/4, que el equivalente CSS es 70%. En un dispositivo grande, W 2/3. En dispositivo grande, el ancho va a ser 66.6% thereab En dispositivo extra grande, W 1/2 El frente va a ser rector. El texto. Vamos a mantenernos coherentes con el texto, dos, dos, tres, 740. El tamaño de fuente y la altura de línea es de dos Excel. Margen inferior diez, indulto izquierdo y indulto derecho es cinco, en un dispositivo mediano El P x, que es el indulto izquierdo y indulto derecho va a ser 24 Veamos y veamos si está bien alineado ahora. H. Hermoso. En realidad estamos haciendo s. hagamos algunas otras paradas. Después del calor cuatro remolcador. Formateemos el código. Bueno. Ahora tenemos una sangría adecuada Después de la etiqueta calor cuatro, vamos a tener una sección. Dentro de la sección, vamos a tener una etiqueta p. Antes de continuar con la etiqueta P, vamos a darle la estrella. Vamos a tenerla posición relativa. Vamos a tenerlo display flex. La dirección de flexión es colon. En un dispositivo grande, se va a enrollar la dirección de flexión. separación izquierda y derecha es de cinco. En un dispositivo mediano. Por supuesto, que debe mantenerse consistente. La separación izquierda y derecha va a ser 24. Bien. Bueno. Dentro de la etiqueta P, sólo tengo que escribir paradas sobre mí mismo. Entonces copié y luego pegué la escritura dentro de la etiqueta P. Debes saber exactamente cuál es el derecho de cabeza para describir tu capacidad. Habiendo hecho esto, cuando revisas el navegador, son estos. Entonces lo que vamos a hacer es dividir la pantalla en tres porciones distintas en un dispositivo grande. W en la etiqueta P. Vamos a dar el nombre de la clase. Vamos a hacer uso de la cadena en tapulación por la pista de Google El ancho completo. Hagámoslo rápidamente en un dispositivo grande. On are dispositivo, vamos a tener el ancho para ser 1/3. Ahora bien, esta es la primera porción. Está ocupando uno de toda la sección. Entendido, hermoso. La prueba, el color de la prueba, claro, vamos a mantenernos consistentes. Sólo tengo que agarrarlo desde aquí. D hecho. Aquí está. Pegar. El margen derecho va a ser cero. El margen inferior es cinco. En un dispositivo grande, el margen derecho va a ser cuatro. No me gusta como es la fuente, queremos que sea un poco desmayada Sí. Rápidamente vaya a la página a s, que es la página principal. Copiemos rápidamente las vainas. Desplázate hasta la parte superior y luego pega. Nuevamente, vamos a agarrar este de las líneas siete a diez. Después pegarlo aquí. Desplácese hacia abajo. Ahora vamos a aplicar la fuente. Nombre de la clase Ind dot. Guardar en el navegador. Vamos a echarle un vistazo. Esto parece tan hermoso. A mí me encanta. Todo bien. Pero me estoy dando cuenta de algo que no está en forma. No te preocupes, definitivamente le daremos una solución cuando hayamos terminado. Y así es exactamente como quiero que termine la conferencia. Bien, bien. Resalta rápidamente la etiqueta P, duplicarla dos veces. SF, este es exactamente el resultado esperado. Y me encanta. Puedes cambiar la escritura aquí y aquí. Ahora sólo voy a publicar la conferencia y luego volver a mi portafolio, copiar y pegar. El conjunto de este derecho a de un cabello describe un seis. Al final, haz todo lo posible para describirte correctamente. Perfecto. Ahora, la siguiente línea es implementar los clics de artículo. Creo que deberíamos hacerlo en la próxima conferencia. Pero antes de pasar a la siguiente conferencia, ves esto sobre mí antecedentes. Quiero empujarla a la cima un poco. Quiero dejarlo como un reto para cada uno de nosotros. Pone rápidamente la conferencia y luego intente tanto como sea posible para arreglarla a su final. Este reto es muy importante porque nos abrirá los ojos a los errores comunes que cometemos al usar t wind CSS. Ahora postea la conferencia y arréglala tú mismo. Todo bien. Déjame arreglarlo contigo. Volver al código VS. Desplázate hasta la parte superior, donde tenemos el seto una etiqueta de la Aba me. Ahora, cuando vengas a este lugar, te darás cuenta de que desde arriba, queremos que empiece desde -50 píxeles Pero ahora mismo hay algo mal. Donde tenemos la parte superior, no la implementamos con el guión. Tienes que sufijar la clase de utilidad de viento de cola con guión para que funcione Aquí está. Ya ves, ahora está en la cima. Hermoso. Todo bonito, portafolio sobre mi casa. Entonces dime, ¿no se ve bien? Por supuesto que sí. Esto está apagado por ahora. Nos vemos en la próxima conferencia. 52. Acerca de la lógica de componentes: Ahí volvemos a clase. En esta conferencia, seguiremos adelante para configurar las variables de estado necesarias y definir las funciones a utilizar. Hagámoslo rápido. Código VS en la parte superior. Vamos a importar el gancho estatal. No se permiten ganchos en los componentes del servidor. Por lo tanto, tenemos que cambiar a los componentes de los clientes. L et's importan rápidamente los datos. Un dato de un dato de barras oblicuas. Y dentro de los componentes. Const es volteado conjunto es volteado. E afirma, el estado inicial va a ser f. Sólo hay que resaltar duplicarlo tres veces. Aquí, vamos a tener se desvaneció. Entonces ese conjunto se desvanece a cuatro. Este va a ser índice selector. C Establecer índice de selector. Por favor, asegúrese de cambiar este tipo a capit Establecer índice selector Vamos a ponerla a cero. Bien. Datos Mp. Vamos a configurarlo para establecer datos de mapa. El estado inicial va a ser sobre datos. Vamos a tener el primer ítem en los datos, que sirve como estado inicial. Todo bien. Habiendo hecho esto. Pongamos todos estos juntos en una función. Ahora vamos a tener const mis funciones, puestas a funcionar, dentro vamos a tomar en el Bien. Set volteado. Mantengámoslo como falso. Satisfecho. Caída. Establezca los datos del mapa, vamos a configurarlos en datos. Todo bien. Vamos a conseguir el clic de tarjeta de asa. Const. Manejar clic de tarjeta. E qui, vamos a tomar en datos, índice. Vamos a darle un formato rápido. Esta función va a actualizar el estado inicial a un nuevo estado. Vamos a establecer se voltea a true. El conjunto se desvanece a la verdad. Establezca el índice seleccionado en índice. Aquí vamos a hacer cosas. Establezca el tiempo de salida. Mis funciones, y luego pasar datos, y lo queremos Básicamente, lo que estamos tratando de hacer es que al hacer clic en la tarjeta, se va a desvanecer. Va a tomar algún tiempo desvanecerse y deslizarse hacia otra tarjeta. No te preocupes. Nuevamente, cuando empecemos a implementarlo, definitivamente entenderás lo fundamental. Confía en mí. Definitivamente entenderás lo esencial. Una vez hecho esto, vamos a implementar la siguiente y la función anterior. C y siguiente. Configura en una función R. Ahora vamos a tener alguna declaración e aquí, y dice, si el índice seleccionado es menor que cinco, entonces vamos a llamar a la función handle click. Gana la función, vamos a obtener los datos, y luego seleccionamos el índice más uno. Vamos a obtener los datos y luego incrementados en uno. Nuevamente, el índice seleccionado más uno. Flechas, Asa carrito clic. Acerca de los datos. Vamos a mantener el primer ítem. Si no se hace clic en el botón, vamos a mantener el primer elemento Vamos a mantener todo por defecto. Todo bien. Hablo demasiado. Ahora, vamos a implementar el mango previos. Sólo hay que resaltarlo y luego duplicarlo. También puedes copiar y pegar. Manejar anterior. Si el índice seleccionado no es igual a cero, entonces vamos a llamar a la función handle click, acceder a los datos dentro, y luego decrementados en uno simple como eso, de lo contrario, nos vamos a quedar con el quinto ítem, así como este. Bien, bien. Ahora ya hemos terminado de establecer la lógica, no te preocupes. En la siguiente conferencia. Cuando comencemos a consumir esta lógica, definitivamente conseguirás el clast Esto es de por ahora. S en la próxima conferencia. Mantente enfocado, y cuídate siempre. 53. Implementación de buttón de cuadrícula: Ahora ya terminamos de implementar la lógica. Vamos a aplicarlo rápidamente a la interfaz de usuario. Desplácese hacia abajo. Lo primero que vamos a hacer aquí mismo es crear el diseño de fondo. Por supuesto, hemos estado haciendo esto a través de las conferencias. Lo que voy a hacer ahora mismo es copiar y pegar rápidamente . Pégalo aquí. Cerrar la d. solo tenemos el fondo, un gradiente lineal. Sólo estamos especificando el diseño de una cabeza. En un dispositivo grande, establecemos el margen superior en -60. Dentro de esta d, vamos a tener una sección. Apliquemos las clases de utilidad. Vamos a ponerlo en contenedor. Vamos a tenerlo display flex, flex direction es columna, margin dash auto. Entonces en un dispositivo más pequeño, vamos a tenerlo flex. La dirección de flexión va a ser enrollada. El relleno a la izquierda a la derecha es de cinco. En un dispositivo mediano, Relleno izquierdo derecho es 24. La tina de margen, hagámosla 50 pixeles. En un dispositivo más pequeño, la tina de margen va a ser cero. Hagamos que se transforme. Traducir Y, lo va a hacer -100 pixeles. Dentro de esta sección, vamos a tener otra D, dar el nombre de la clase. Entonces lo vamos a tener rumbo en un dispositivo más pequeño, vamos a tenerlo display flex. Con va a estar lleno. Nuevamente, en un dispositivo más pequeño, El ancho va a ser 50% 1/2. En dispositivo grande, el ancho, hagámoslo 7/12. Cómo. Ciérrala. Ahora dentro de lo profundo, vamos a mapear a través de los datos y tenerlos visualizados en la pantalla Pero antes de continuar, quiero mostrarles algo. Desplázate hasta la parte superior. Por aquí, donde tomamos en el índice y los datos. Anteriormente, me gustaba esto, lo cual no está bien. Debes saber que esto va a ser índice. Hermoso. Sólo un pequeño error tipográfico Y creo que todos se equivocan. Y por cierto, no soy un robot. Todo bien. Ahora vamos a hacer un mapa de puntos de datos. Por favor, quiero que prestes atención por aquí. Estamos mapeando a través de los datos. Vamos a tomar en el primer parámetro, que representa cada elemento dentro de la matriz o dentro de los datos. Entonces el segundo parámetro es el índice, que sirve como ID. Ahora, fuera de los padres, vamos a tener una función de flecha En esta ocasión, vamos a devolver UI. Por esa razón, tenemos que usar los padenss, y no el corchete co. F W en los padres, ahora vamos a escribir la Primero, vamos a tener una etiqueta A. Vamos a especificar el clic de esta etiqueta A. Por cierto, siempre que desee especificar el clic, definitivamente tiene que cambiar de renderizado del lado del servidor a un renderizado del lado del cliente Desplázate hasta la parte superior, y luego aquí está. Si no lo has hecho a tu final, déjame limpiarlo para mayor claridad. Yo sólo voy a hacer uso de cliente. Tan simple como eso. Bien. Vamos a continuar. R dentro. Vamos a invocar el asa de la tarjeta click Se me ocurrió que también hay un error en la ortografía del clic del mango. Entonces así es exactamente como deletrearlo. Si el tuyo no es así, no se va a registrar. Así que atornilla a ella hasta aquí, va a ser manejar tarjeta click. Publica el video, haz las correcciones necesarias, procedamos. Manejar clic de tarjeta. Entonces vamos a tomar en ítem un índice. L et's le dan un estilo. La sombra de caja 48 e DE. Hay que mantenerse consistente. Vamos a tener menos cinco pixes, o alrededor de las cuatro esquinas de la carta, vamos a aplicar la sombra de caja Diez pixeles, 20 pix, cero pix. Uno de los lados no conseguirá la sombra de caja. Fresco. Ahora, vamos a darle un nombre de clase. Dentro del nombre de la clase, tenemos que hacerlo dentro de la garrapata posterior. La posición va a ser relativa. El coser va a ser puntero, transction, todo. Entonces vamos a hacer que se transforme. La duración, va a ser de 300. L et's la cosecha. Los bordes de esta tarjeta van a ser redondeados. Entonces esta tarjeta va a servir como el tope. No te preocupes, obtendrás la imagen de aplaudir cuando hayamos terminado con las implementaciones. No hay nada de qué preocuparse. Por cierto, siempre puedes hacer preguntas tantas veces como desees. Y estaré ahí para responderle de inmediato. Excel redondeado. Vamos a tenerlo en el centro, el acolchado, vamos a hacerlo seis. En un dispositivo grande, el acolchado, hagámoslo diez. Vamos a hacer que muestre flex, flex direction es columna, Justificar contenido al centro, y luego alinear elementos al centro, y eso es todo para la etiqueta A. Dentro de la etiqueta A, dale un nombre de clase. Entonces esta d va a servir como contenedor de la imagen. Vamos a dar el ancho con d 16, altura 16. Después un dispositivo más pequeño, ancho diez. También altura diez. Un dispositivo más grande, el ancho va a ser 16. Nuevamente, un dispositivo más grande, la altura va a ser de 16. Hermoso. Vamos a tener un IMG para mostrar la imagen, S RC, e qui, este ítem por aquí que representa cada elemento en la matriz Entonces vamos a hacer item dot. Así que siempre que queramos acceder a los elementos que tenemos dentro de la matriz, vamos a usar este parámetro. Punto de artículo, IMG. Más cerca con la etiqueta de cierre automático. Déjame mostrarte rápidamente. Aquí tenemos los datos gs. Cuando atraviesas, vas a ver los datos sobre. Entonces tenemos los recuentos, el título, el IMG, y los arreglos de informaciones Y todos los stups están dentro del objeto array, ¿de acuerdo? Y lo tenemos en seis lugares. Entonces cuando haces punto de artículo, cuenta, vas a obtener el conteo de uno. Título del punto del artículo, haga IMG o R A, y así sucesivamente y así sucesivamente Así que vamos a cerrarlo rápidamente, cerrar el Explorer. Al guardar, veamos si aparece en el navegador. Aparece muy bien, pero este no es el resultado esperado. ¿Todo bien? Las imágenes están bien en la D. Creo que ya lo expliqué antes. El artículo está en rollo. Esta no es una forma en la que queremos que sean los artículos. Hagamos algo como esto. Vamos a tener una d, dar el nombre de la clase. Vamos a tener una rejilla de visualización, en un dispositivo más pequeño, arenilla, C a una extra grande, grit tres La brecha es de seis margen derecho, cero. En un dispositivo grande, el margen derecho va a ser diez. Cierra la d. ahora, dentro de esta d, déjame mostrarte. Copia desde el soporte co de apertura hasta el soporte co de cierre. Solo tienes que presionar hacia abajo la marca de opción y luego tocar la tecla de flecha para moverla dentro del steve. O bien puedes resaltarlo, cortarlo y luego pegarlo dentro del steve. Guardar y ver lo que tenemos. Ahora todo está alineado como se esperaba. Hermoso. Pero ahora mismo, cuando pasas el cursor sobre los botones, puedes ver que no pasa nada Incluso cuando haces clic, no pasa nada. ¿Puedes ver? Entonces vamos a implementar el on hover. Y luego cuando el usuario haga clic en el botón, queremos que se resalte el butting También tenemos que exhibir el título dentro del boton. ¿Bien? Volver al código FS. Después del cierre D que sirve como contenedor IMG, vamos a tener una etiqueta H four. Gana la H cuatro. Vamos a hacer item dot title. Guardar y ver lo que tenemos. Ahora tenemos los títulos mostrados, pero no está bien alineado. Vamos a alinearlo rápidamente. Ahora dale un nombre de clase. Vamos a usar la interpolación de cadenas porque estamos esperando script Java dentro Vamos a hacer que pruebe alinear, centrar. Pero en un dispositivo más pequeño, el tamaño de fuente y la altura de línea es de 0.8 RM. En un dispositivo más grande, la prueba Excel. La fuente, junta rectora. El B debe estar en Cp. Colores de tránsito, duración 500. ¿Qué es otra vez, tenemos que hacer? Grupo, vamos a tenerlo grupo, flotar. Texto, blanco. Cuando flotemos sobre la parte inferior, el texto va a cambiar a blanco Y de lo contrario, el texto color texto, vamos a mantener el color que hemos estado usando F siete, 626d, margen superior es tres Todo bien. Entonces ahora vamos a tener las condiciones. Hagámoslo así. Si el índice seleccionado es igual índice, entonces queremos mostrar el texto blanco. Texto blanco, de lo contrario, no pasa nada, Guardar y ver si está funcionando. Ya ves, cuando flojo, el texto se transforma en blanco Una cosa más que vamos a hacer es mostrar el conteo. Cuando pasamos el cursor sobre este tipo, queremos mostrar el recuento de este ítem justo dentro de la matriz Si aparece como número uno, número dos, tres, y así tenemos que hacerlo. Justo después de la etiqueta H four, vamos a tener un di, dar el nombre de la clase. Nuevamente, usemos el ba ti. Vamos a tenerla posición absoluta. Desde la derecha, lo vamos a tener menos dos, y desde arriba, lo vamos a tener menos dos. Vamos a hacer que se transforme. La transición va a ser todo. Duración, 500. La opacidad es cero. Cerremos rápidamente la profundidad para que el error de moine pueda estallar. Agrupar, flotar, vamos a implementar el hover. Cuando se ciñe sobre él, la opacidad será de 100. Recuerda que establecemos la opacidad por defecto en cero. Cuando cierras sobre la tarjeta, entonces estableces la opacidad 100 y luego el ítem se mostrará en la Tan simple como eso. El show shadow Excel. El ancho va a ser 12, el alto 12. Las esquinas van a ser redondeadas. El trasfondo. Para los trabajos de enseñanza, vamos a utilizar un fondo aleatorio. B, guión verde, 500. No te preocupes, voy a usar el fondo original. Vamos a tener un flex de display. Justificar el contenido al centro Los elementos se alinean al centro. ¿ Qué otra vez tenemos que hacer? Las fuentes, hagámoslo barco. Fuente d bot. Tex d blancos. Y el tipo de letra, recuérdalo presentado. También, el texto X l bueno. Gana la d, tenemos que mostrar el conteo, item dot, count, simple como eso. Guardar y ver lo que tenemos. Cuando pase el cursor sobre la tarjeta, el conteo se mostrará en la esquina superior derecha de la tarjeta Echa un vistazo. Entonces este es el número uno dentro de la matriz, dos , tres, cuatro, cinco, seis, y espero que te den el queso. ¿Qué más podemos hacer ahora? Queremos que aparezca de una manera muy agradable. Vamos a rotarlo como que. Ahora, lo que voy a hacer. A veces la mejor explicación que puedes dar es la implementación. Entonces déjame implementar lo que tengo en mente para que lo entiendas. Si se selecciona índice igual índice. La opacidad va a ser de 100 y no de cero. Entonces vamos a girarlo 12 grados. Entonces vamos a rotarlo un poco, y luego s, ¿qué pasa? Agrupar, rotar 12. Vamos a comprobarlo rápidamente. ¿Puedes ver? Observe que cuando coloco el mouse sobre los contrafuertes, el conteo de cortes se inclina hacia Eso es como resultado de la clase de utilidad rotate que implementamos. Una vez hecho esto, queremos resaltar el tope al hacer clic Hagámoslo rápido. Desplázate hasta la parte superior, donde tenemos la etiqueta A. D D. Aquí está el nombre de la clase de la etiqueta A. Gana el batik Ahora vamos a tomar en algunos scripts java. Si se selecciona índice igual índice, lo mantendremos resaltado, lo que simplemente significa, si un usuario da clic en el boton Si un usuario da clic en la etiqueta A, por así decirlo, queremos tenerla resaltada. Para ello, sólo tenemos que especificar el color. BG. Usemos rojo, 500. Cuando ahorras, tenemos que implementar la casa antes de que funcione. Bueno. Guardar. ¿Puedes ver? Todo funciona. Bueno. Ahora bien, otra cosa importante que tenemos que implementar es que cuando coloquemos el cursor sobre los artículos, queremos cambiar el color Y por cierto, el rojo es sólo para enseñar trabajos. No te preocupes, vamos a tener todo arreglado. Bien. Incluso como queremos especificar el color, también queremos un poco de animación dulce. Bien. Animación muy fácil. Menos traducir Y. Y menos dos. Es así como podemos predecirlo si quieres aplicar un valor negativo. En Ha, el color de fondo, hagámoslo azul. La sombra va, va a ser Excel. Entonces vamos a tener que traduzca y menos dos. Sólo tengo que resaltar y copiar a este tipo, hilvanarlo dentro del ho ¿Qué es otra vez? El color. Hagámoslo blanco. BG Blanco. Bien. Ahora vamos a ahorrar. Formatee rápidamente el código para obtener sangrías adecuadas. Guarda y echa un vistazo al navegador, estos. Haga clic. ¿Puedes ver? Cuando pasa el cursor sobre él, el color cambia y al hacer clic, se resalta Muy bien, tan hermosa. Y quiero que notes la animación. ¿Puedes ver? Echa un vistazo. A mí me encanta esto. Ahora, tenemos que hacer uso del color correcto. Para el fondo whoa, vamos a usar un color personalizado, resaltarlo, borrarlo, abrir y cerrar corchete, y dentro del corchete, tenemos este color Lo mismo aplicable a Destacaron así con exactamente el mismo color. Además, creo que tenemos que cambiar otra cosa aquí en la cuenta. Derecha. Vamos a darle el mismo color de fondo para el conteo. Bien. Hermoso. Todo genial. Bien, chicos. ¿Ves? Se ve bien. ¿ Puedes ver? Echa un vistazo. Bien, me encanta así. Esto está apagado por ahora, y en la próxima conferencia, seguiremos adelante para implementar la cartelera del espectáculo. Nos vemos entonces. 54. Pantalla de tarjetas de habilidad: En la conferencia anterior, mostramos la imagen y el título, justo dentro de la etiqueta A, que estamos usando como el butting Cuando tienes en él, está funcionando perfectamente bien como se esperaba. En esta conferencia, vamos a mostrar los datos que se relacionan con cada título. Por ejemplo, cuando hago clic en el desarrollador front-end, queremos mostrar los datos que están relacionados con el front-end, que es la escala Además, cuando hago clic en back end, deberíamos poder mostrar los dos o datos relacionados con el back end, por así decirlo Déjame mostrarte rápidamente qué hay en los datos. Aquí dentro de los datos s, tenemos los datos sobre aquí, y dentro, tenemos un objeto dentro del objeto, tenemos recuentos para ser uno, el título, que es I x, la imagen. Lo que hicimos en la conferencia anterior, mostramos el título y la imagen. Aquí. En esta conferencia, al hacer clic en el botón, queremos mostrar todas las estufas Lo mismo aplicable al resto del objeto para poner en la matriz. Al hacer clic en el back-end, queremos obtener los datos relacionados con el back-end, que es el nodo S, Mongo DB, y el resto La matriz de nombres de aquí se puede cambiar. Puedes cambiarle el nombre a artículos o cualquier nombre que creas que describe tu intención. Pasar a sobre mi componente. Después de este d, déjame mostrarte este df aquí. Este es el cierre d. cuando en este d, vamos a tener otro dif, dar el nombre de la clase. El ancho va a estar lleno, lo que lo convierte en un 100% de ancho. En un dispositivo pequeño, el ancho va a ser de 1/2, que lo convierte en 50%. En un dispositivo grande, el ancho, va a ser 5/12 Sobre flujo visible. Poniendo izquierda y derecha, el hash cero. En un dispositivo pequeño, parte e izquierda va a ser seis en dispositivos grandes. Poniendo izquierda y derecha, van a ser diez. Cierra el df, y dentro de esta def, vamos a tener otro df Vamos a darle el nombre de la clase. El fondo va a ser blanco. Así que queremos que las cuatro esquinas sean redondeadas. separación es de diez. En el dispositivo extra grande, la separación es de 14 Acento de sombra, color. Lo tenemos posición relativa, y dentro del deve, vamos a tener una sección Ciérrala. Apliquemos rápidamente el estilo a la sección. Dale un nombre de clase. Ahora queremos usar la interpolación de cadena. Gana el bati, vamos a asignarle un nombre de clase de pies a la izquierda. Toma nota del nombre de esta clase. Vamos a estilizarlo en el futuro. Desbordamiento, hagamos que se caliente para que no crezca fuera de su contenedor. Ahora vamos a tener algo de script Java dentro. Vamos a hacer si se desvanece es igual verdad, entonces vamos a asignar el nombre de clase Fad out, y de lo contrario, no se asignará ningún nombre de clase Gana la D, vamos a tener una etiqueta p que servirá como etiqueta. Voy a hacer mi texto es A. Entonces vamos a tener el texto cielos abajo Pero antes de eso, guardemos y echemos un vistazo al navegador. Bueno. Aquí está. Mis cielos de texto son, sean cuales sean tus señales de texto cuando haces clic en cualquiera de este Para la tarjeta, déjame mostrarte. Aquí está la D. Con el fondo de Excel blanco, redondeado, lo que hace que todas las esquinas de este dv sean redondeadas. Espero que veas perfecto. W en la etiqueta P, vamos a dar el nombre de la clase, y también queremos usar la interpolación de cadena Ahora, vamos a tener el texto. Mantengamos el color. Entonces vamos a tener aquí 476 26d. Siete C. Bueno. Puede que no te des cuenta, pero se ha aplicado el color. Ahora, hagámoslo por la fuente. Podemos hacerlo aquí. No hay problema. Vamos a hacer int dot class name. Nuevamente, ahorre. Todo bien. Ahora, échale un vistazo. Bueno. El texto va a ser G, que mapeará al tamaño de fuente y altura de línea, y eso lo hará 1.2 m. en un pequeño dispositivo, el texto Bs en G, texto, excel. Tengamos una transción, y luego la duración Hagámoslo 500. Hagamos que se transforme. La opacidad, la opacidad debe ser de 100. Está bien. Después de la etiqueta P, queremos mostrar los títulos. Vamos a tener una etiqueta H one. Hagámoslo con una etiqueta H dos. Con en la H dos, déjame mostrarte, vamos a hacer Mapa data dots title. Cuando hago clic en front end, ahora tenemos el front end. Cuando hago clic en el back end, tenemos el back end. Para y cosas, tenemos la herramienta y las cosas. Vamos a mostrar los ítems, las habilidades relacionadas. Antes de continuar, tenemos que estilizar la etiqueta H dos. Rápidamente, vamos a dar el nombre de la clase estrella. Las fuentes, recta bod. El color del texto va a ser el mismo ejemplar, ven aquí y pega. Texto d tres cel. En un pequeño dispositivo, envíe un mensaje de texto d para sobresalir. En dispositivo medio, escriba tres Excel. Ahora estamos tratando de aplicar un tamaño de fuente diferente en cada pantalla. Cada punto de ruptura. Margen inferior seis, el ancho es 44. En dispositivo medio, el ancho va a ser cinco, seis. Tengamos una transción. La duración, 50. Entonces vamos a tener una transformación. Especificar la opacidad para que sea 100. Tan simple como eso. Guardar en el navegador, hermoso. Échale un vistazo. Exactamente el resultado esperado. Regresa al código. Después de la etiqueta H dos. Formateemos rápidamente el código para una sangría adecuada. Presiona entonces el teclado Mayús y la opción Ken, y luego presiona la tecla F. Además, puede hacer clic en formato de documento con formato de pre código. Después de la etiqueta H dos, vamos a tener una etiqueta UL. Ahora queremos disp el ke correspondiente al título. Hagámoslo rápido. Aquí, vamos a hacer Mapa Datos de puntos matriz de puntos mapa de puntos. Vamos a tomar en habilidades, lo que representa cada elemento dentro de la matriz. A continuación, conéctelo a una función de flecha. Queremos devolver una interfaz de usuario, por lo que debe abrir y cerrar los padres. Y por favor no utilice el soporte Ci. Ahora vamos a tener una etiqueta LI. Dentro de la etiqueta LI, tenemos que mostrar la habilidad. Guardar y C. Vaya! Deberían ser habilidades. Todo bien. Vamos a echarle un vistazo. Ahora, desplácese hacia abajo. Aquí lo tenemos. Hermoso. Demos el estilo y hagamos que la fuente se vea extremadamente impresionante. Todo bien. La etiqueta UL, dale el nombre de la clase. Vamos a usar la interpolación de cadenas. En primer lugar, la fuente va a ser d punto nombre de clase. El peso de la fuente es de 300. Último disco. El último tipo de estilo es disco. El color del texto va a ser el mismo con esta copia resaltada pegada aquí M ocho, margen izquierdo, ocho, y ampliar el dispositivo, M diez. El texto B, que mapea a la altura de línea y el tamaño de fuente. En dispositivo grande, texto G, S transction, Lo siento. La duración siempre 500. Después transforma. La opacidad es de 100. Bien, Save. Mira cómo aparece ahora. Vaya, dice, Oh, Dios mío, échale un vistazo. Chicos, esto así sea. Guarda y vamos a echarle un vistazo. Bien. Hermoso. Todo parece muy bien, y me gusta. Cuando haces clic en el extremo B, la habilidad relacionada con el back end aparece aquí. Oh, Dios mío. Dime, ¿no se ve bien? Por supuesto que sí. Bien, continuemos. En un dispositivo móvil, queremos ocultar este diseño de cuadrícula por aquí, estos contrafuertes, y luego solo se mostrará esta tarjeta Entonces necesitamos otro chocar dentro de la tarjeta para cambiar entre las básculas Hagámoslo en la próxima conferencia. 55. Conteo de habilidades: Queremos hacer algo excepcional. Queremos crear una nueva tarjeta en la esquina superior derecha de esta tarjeta. Hagámoslo rápido. Después de la etiqueta de cierre de la sección, vamos a tener una d con el nombre de la clase. Tengámoslo posición absoluta. Perspectiva. 500. Nosotros le vamos a dar menos siete desde arriba. En un pequeño dispositivo, menos ocho de la parte superior. El derecho es cero y un pequeño dispositivo. El derecho es 20. Se va a iniciar desde 20 en un dispositivo más pequeño. Y si no, vamos a darle un nombre de clase de tarjeta. Por favor, tome nota de esta tarjeta. Vamos a estilizarlo en el futuro. Ahora después de eso, vamos a tomar en el script Java. Cerró la D. Ahora dentro, vamos a hacer si volteado es igual verdad, vamos a tener un nombre de clase volteado y de lo contrario, no vamos a tener ningún nombre de clase También formatear el código para que tenga una sangría adecuada. Dentro de la D, vamos a tener otro dif, dar la tarjeta de nombre de clase interna. Vamos a estilizar el interior de la tarjeta con Cs. Dentro de la tarjeta interna, vamos a tener otro dif, darte el nombre de la clase. Queremos que las fronteras sean redondeadas. Los Cs, vamos a señalarlo. El texto dentro de esta tarjeta, vamos a hacer que sea siete Excel. En dispositivo extra grande, el texto nueve sobresalen. La fuente va a ser recta negra. Texto blanco. BG, vamos a darle un color de fondo de bolsa, y queremos que el color bagrand tenga exactamente el mismo color de texto que hemos estado usando Copia todo dentro del estilo personalizado, y luego pegarlo dentro. Guardar y ver lo que tenemos ops. Tenemos que cerrar la D. Aún no se muestra nada. Ahora después del color de fondo, queremos que el relleno sea cinco. Un dispositivo extra grande, relleno va a ser ocho. El ancho es de 28. La altura es de 28. Un dispositivo extra grande, el ancho 48. Un dispositivo extra grande nuevamente, la altura 48. Formateemos el código. Vamos a hacer que se transforme, transction, la duración 500 Entonces vamos a tener transformar preservar. Ahora queremos girarlo menos, rotar seis. De nuevo, vamos a hacer transformar preservar. Una vez hecho esto, deberíamos poder ver la tarjeta aquí. Ya ves, ahora tenemos una tarjeta por aquí. Lo que queremos hacer es mostrar el conteo dentro de la tarjeta. Aquí vamos a abarcar. Nosotros en el lapso, vamos a hacer mapa de datos puntos Ct. Antes de continuar resaltarlo y cortarlo, queremos hacerlo fuera del lapso. Ahora veamos cómo se ve en el navegador. Perfecto. L et's estilizan el lapso. Dale un guión de texto de nombre de clase a Excel, un dispositivo extra grande, texto da six Excel. Margen derecho, dos, y un pequeño dispositivo, M R, que es el margen derecho, va a ser tres. Una vez hecho esto, vamos a tener una estrella entre el lapso para que se vea hermosa. Ahora lo conseguimos. Todo aparece como se esperaba. Hermoso. Hermoso. Tommy. ¿No se ve bien? Por supuesto que sí. Perfecto, chicos. Bien. Ha sido un viaje muy largo. Habiendo hecho esto. El siguiente en línea es implementar el siguiente y el anterior boting, justo dentro de la tarjeta Simplemente porque en los dispositivos móviles, los bots justo dentro del diseño de la cuadrícula van a ser invisibles. Déjame mostrarte. Esto es solo en iPad y. Vayamos al iPhone. Desplázate hacia abajo. Verás, todos los botins desaparecieron Así que queremos un tropiezo para cambiar entre los cielos justo donde está la tarjeta Bien, así que hagámoslo en la próxima conferencia. 56. Button Flip: Bien así que el componente Acerca de mí está configurado, y todo está funcionando perfectamente bien como se esperaba. Una cosa más. Tenemos que implementar el siguiente y el anterior boting. Poner en la tarjeta. Todos ustedes saben que el tope de la grilla va a estar golpeando en el dispositivo móvil Entonces necesitamos un boting para movernos entre las escalas, y el tope estará aquí Déjame mostrarte en dispositivo móvil. ¿Ves? El tope de la rejilla se ha ido. Tenemos que implementar el butting justo dentro de la tarjeta. Hagámoslo rápido. Después de este cierre d, vamos a tener otra D. Dar el nombre de la clase. Vamos a tenerla posicionada absoluta. R d diez. Desde la derecha, lo vamos a tener diez. Los cinco últimos. Y entonces vamos a tener un flex de display. Dentro, vamos a tener una etiqueta A. Dentro de la etiqueta A, tenemos que mostrar el SVG. Esta una etiqueta manejará la funcionalidad de la anterior. Implementemos rápidamente el clic, para que lo entiendas. Al hacer clic en la etiqueta A, vamos a llamar al mango previos. No. Dentro del remolcador A, vamos a pegar el SVG Volver a los resultados del código do MD. Entonces vas a ver el SVG anterior para a mi flip. Copia de las líneas 527 2541. Copia resaltada, dentro de la etiqueta A. Pegar. Asegúrate de formatear, guardar y ver lo que tenemos. Debido a que el SVG es blanco, posible que no lo notes en la pantalla. Cambiémoslo a rojo. Veamos qué tenemos. Recarga de L et Ya lo he visto. ¿Puedes ver? ¿Aquí está? Todo bien. Vamos a estilizarlo rápidamente. Hagámoslo blanco. Vamos a darle a la etiqueta A un nombre de clase. El ancho es de 12, la altura es de 12. Redondeado, Excel. Queremos que la frontera sea un poco curvilínea. Creo que deberíamos especificar el fondo para que se pueda ver en la pantalla. BG 47, 626d. C. Aquí está. ¿Puedes ver? Hermoso. Ahora vamos a continuar. El derecho de margen va a ser uno. Vamos a tener transformación. Tranction, duración, hagámoslo 300. Aquí está. El cosor debe ser punto. En hove, cuando se ciernen en el botón, vamos a traducir y uno Se va a mover un poco hacia arriba con una dulce animación. Déjame mostrarte. L et's lo extendieron. Ahora cuando me ciñe sobre él, se mueve hacia abajo. No, queremos que se mueva hacia arriba. Tenemos que especificar un valor negativo para empujarlo hacia arriba. Vamos a hacer menos, traducir y uno, que es menos uno. Pruébalo. ¿Puedes ver? ¿Se mueve hacia arriba? Bueno. Te dije que voy a explicar cada pedacito de la clase de servicios públicos de viento de cola. Vamos a justificar el contenido al centro. Y luego los elementos se alinean al centro. Vamos a tener el SVG en el centro de la tarjeta. Todavía no aparecí en el centro. Mira, el SVG sigue aquí. Antes de que todo el material funcione, vamos a tener que mostrar flex. Y ya ves, ahora los artículos estarán centrados. ¿Puedes ver? Tenemos que mostrar flex antes de que podamos alinear y justificar el artículo. ¿Bien? Creo que esto a menudo ahora. Es genial así. Está bien. Aquí no tenemos que hacer demasiado. Entonces lo que voy a hacer ahora mismo es sencillo. Tenemos que duplicar los resaltados de la etiqueta A de las líneas 182, dos, 199, duplicarla o puedes copiarla y pegarla. Entonces tenemos la primera etiqueta A. Esta es la primera etiqueta A. Y entonces esta es la segunda etiqueta A. Cuando ahorras, bien. Entonces lo tenemos así. Ahora, al hacer clic, haga clic. Entonces tenemos los botones haciendo exactamente lo mismo. ¿Puedes ver? Esto es anterior. Reloj. Bien. Ahora tenemos que implementarlo para el siguiente. Primero, tenemos que eliminar este SVG, destacar de 242217. Límpialo, vuelve al recurso de código punto MD. Aquí, tenemos que destacar este SVG, el siguiente SVG para flota A M. Resalta copia, ven aquí y pega. Ahora, formatear rápidamente el código. Limpie el mango anterior. Vamos a hacer manejar a continuación. Cuando ves el navegador, todo aparece muy bien como se esperaba. Anterior, anterior, y puede ir siguiente, siguiente. Atrás, atrás, adelante, adelante , adelante y adelante siempre. Hermoso. Todo está funcionando perfectamente bien. Entonces tenemos que comprobarlo en el dispositivo móvil. Buenas noticias. Ahora en dispositivo móvil, tenemos el botón para pasar de una habilidad a la orden. Ahora tenemos la habilidad de desarrollador back-end. Y así puedes volver, puedes avanzar, puedes retroceder. ¿Puedes ver? Todo está funcionando perfectamente bien. Y me encantan los resultados finales. Todo bien. Así que pasemos rápidamente a la siguiente conferencia donde comenzaremos a implementar la f. esto es de por ahora. Nos vemos en la próxima conferencia. 57. Animación de volteo: Bienvenidos de nuevo a clase. En esta conferencia, queremos implementar la animación en los volteretas cuando se hace clic en la tarjeta Ahora mismo, se puede ver la forma en que voltea tradicionalmente. No es agradable así. Bien. Vamos a agregarle algunas buenas animaciones. Volver al código VS. Abre el Explorador. Justo dentro del directorio Acerca de mí. Haga clic derecho en nuevo archivo. Voy a llamarlo Abt M punto CSS. Primero, tenemos que estilizar la tarjeta. Tarjeta de punto. Déjame mostrarte. En esta D? Ahora, vamos a conseguir la tarjeta. Aquí está. Sí. Entonces hagámoslo aquí mismo. La perspectiva 800 píxeles. El puntero del Cursor, vamos a tener un flex de visualización, justifican el contenido a la derecha. La tarjeta A tarjeta NA. Una vez más, déjame mostrarte. Aquí está. Entonces esta tarjeta de aquí, creo que la mejor manera de mostrarte las cosas es cambiar el color de fondo. Supongamos que el color de fondo es rojo 500. Ahora cuando guardas y revisas el navegador, ¿lo ves? Aquí está la tarjeta interna. Ahora déjame mostrarte la tarjeta contenedora. Esta es la tarjeta contenedora. Hagamos BG, Blue 500. Guardar en el navegador, aquí está. Ya ves, esta tarjeta de aquí está colocada sobre esta otra tarjeta. Así que vamos a estilizarlo rápidamente. Vamos a obtener el ancho 100%, la altura, 100%. Transción. Vamos a hacer que transforme 0.6 segundos. Después el estilo de transformación. Preservar tres d. antes de continuar, tenemos que vincular el componente con el archivo CSS. Vuelve a Acerca de Ms, escrota hasta arriba, y hagámoslo sobre hea Vamos a poner s Abt M C S S. Una vez hecho esto, volver a Acerca de M Css Tenemos que estilizar los puntos de la tarjeta. Voltear tarjeta en operaciones. Echa un vistazo. Debería ser un concatador Transformar. Queremos rotar en ángulo Y x 90 grados. Hagámoslo un ángulo negativo. Ajustar Dash izquierda. Y por cierto, déjame enseñarte las clases. Aquí está el alimentado a la izquierda y luego se alimenta. Para la izquierda alimentada, vamos a tener una transción, la opacidad 0.5 segundos Transformar también 0.5 segundos, y aquí la opacidad uno Transformar traducir en eje x. Hagámoslo cero. Para el ajuste izquierdo y fit out, la opacidad está ahí Transformar. Transformar, traducir x, vamos a tenerlo 40%. Habiendo hecho todo esto, volvamos rápidamente al Navegador y comprobemos si está bien hecho. Echa un vistazo. L et's clic. Hermoso. Verás, dentro de la tarjeta, tenemos un dulce flip de animación. ¿Puedes ver? Pero también, queremos que afecte a esta tarjeta de aquí. ¿Qué hacemos ahora? Veamos qué pasa. Antes de continuar, tenemos que cambiar el color de la tarjeta. Tiene exactamente este mismo color. Este tipo no tiene color, pero este tipo sí B G. Bien. Hermoso. Volvamos al CSS. Comienza desde aquí, la tarjeta, carrito en corte flip cut.in Oh, Dios mío. Chicos, quítense las cosas. Cuando lo haces así, todo va a funcionar. Sí, M. R. Inténtalo de nuevo, inténtalo una y otra vez. Esto es realmente fantástico. Echa un vistazo. Y luego podemos cambiarlo con los botones. En iPad. Funciona. Esto es increíble. Todo bien. Terminamos con el componente About. Pero lo que tenemos que hacer en la próxima conferencia es arreglar algunas cosas, como el margen superior en el dispositivo móvil. A ver. ¿Puedes ver esto por aquí? El margen superior en el dispositivo móvil calzado baja un poco. 58. Configuración de deslizador de testimonio: Hola. Bienvenidos de nuevo a clase. En esta conferencia, vamos a diseñar el componente testimonial. Pero antes de continuar, tenemos que implementar la configuración del deslizador. Abra rápidamente el explorador, común B, abra el componente. Witin el componente, clic derecho, Nuevo Fd. Testimonial. Así que haga clic derecho sobre testimonial, No file, testimonial dot GS RFC para generar el Hagamos el testimonio dentro de la página principal. Justo debajo del componente M aparte. Vamos a hacer testimonial. Y por favor asegúrate de importarlo en la parte superior. Guardar, Luego volver a testimonial. Implementemos rápidamente la configuración del control deslizante. Para implementar la configuración del deslizador, tenemos que hacer algunas importaciones. Abrir las casas componentes del hogar. Resaltemos rápidamente de las líneas dos a cuatro. Ven a la cima y luego pega. También, vamos a hacer uso de lo tenido. También tenemos que copiar de las líneas cinco a diez. Después pega. Por último, copiemos rápidamente las propiedades del control deslizante. Abra el recurso de código MD y luego desplácese hacia abajo. Vas a ver la configuración del deslizador para testimonial. Destacar. Destacados del 584 2667. Copia, vuelve al código y pega. Déjame ir rápidamente a través de la configuración. Aquí tenemos una configuración variable. Por supuesto, esta variable es un objeto. Dentro del objeto, tenemos las propiedades del deslizador. Hemos establecido el infinito en true, lo que hará que el deslizador se desplace continuamente sin terminar. Aquí hicimos slide to show es tres. Deslizar para desplazarse es uno, por lo que solo puede desplazarse una diapositiva a la vez. La velocidad es de 3,000 milisegundos. Flecha está puesta a fuerza, que es la flecha izquierda y derecha, así que no la necesitamos aquí mismo. Configuramos el autoplate a true, lo que significa que el deslizador comenzará a desplazarse sin tener que hacerlo manualmente El modo central se establece en true, y luego el pad central, que es el espacio entre cada deslizador. Se establece en diez px, y entonces aquí tenemos la velocidad autopl para que sea de 3,000 milisecs Ahora dentro de la capacidad de respuesta, es un área de objeto por supuesto, y luego tenemos el punto de quiebre Ahora en el punto de interrupción de 17 60, queremos cambiar los ajustes, los ajustes de aquí En este punto de ruptura, vamos a tener dos diapositivas para mostrar La diapositiva para desplazarse va a ser una. Infinito se establece en true para bucle continuo, y luego el punto se establece para caer, y así sucesivamente y así sucesivamente hasta llegar al punto de ruptura mínimo Formatea el código. Bueno. Ahora hemos terminado con la configuración del deslizador. Pasemos rápidamente a la siguiente conferencia donde comenzaremos a diseñar el testimonio. Nos vemos en la próxima conferencia. 59. Diseño de deslizador testimonio: L et's proceden con el diseño testimonial. Aquí con en la vuelta. Limpie esto. Vamos a darle una identificación a esta D. Testimonial. Nosotros en esta d, vamos a tener otra d, darle el nombre de la clase. La altura máxima va a ser de 450 pixeles. Poner la parte superior y la parte inferior de separación es 12. En un dispositivo grande, poner la partición izquierda derecha es 12 En un dispositivo mediano, poner la partición izquierda derecha es de cinco Y, el relleno por defecto va a ser tres. Vamos a tenerlo redondeado G. Habiendo hecho esto, vamos a crear rápidamente el layout. Ahora abre el punto de página. Queremos copiar este estilo en línea para el diseño. Coloca un ratón aquí mismo. Después pega. Todo va a ser igual, así que no necesitamos hacer ningún cambio. En el navegador, ahora tenemos el layout. Déjame mostrarte, aquí está. Cuando comencemos a exhibir los artículos, va a estar muy limpio para que los veas. Dentro de esta d, vamos a tener otra d, darle el nombre de clase. En un dispositivo grande, vamos a tenerlo contenedor. El margen a la izquierda gira a la derecha es automático. Padin giro a la izquierda a la derecha cero. En un dispositivo pequeño, la altura máxima es de 350 píxeles. Ahora dentro de este df, vamos a tener otro df, darle un nombre de clase. El texto va a alinear el centro. Ahora vamos a tener una etiqueta de encabezado, y voy a hacer lo que mis clientes digan de mí. Y aquí está. Va a ser un rubro. Ahora vamos a darle rápidamente el puesto. La fuente extra de madera. El texto cinco Excel. Queremos que sea grande, así que ahora lo tienes. Margen inferior y B seis. El texto. Vamos a darle un tamaño de texto, y queremos mantenernos consistentes con el color de prueba del encabezado, que va a ser 48 ADD. Cuando ahorras, y aquí está. Todo bien. Hermoso. Después de la etiqueta H dos, vamos a tener una etiqueta p. Entonces esta etiqueta P va a ser la descripción. Dirígete rápidamente al recurso de código, copia la descripción del testimonio y pegarlo entre ellos Cuando ahorras, y aquí está. Vamos a darle un estilo. Dale a la etiqueta P un nombre de clase. Queremos usar la interpolación de cadena. Max D W a Excel. Los pons 200. Reco una tabla. Margen izquierdo y derecho es automático. El margen inferior es 12. En un dispositivo grande, el margen inferior es de 24. Todo bien. Ahora vamos a echarle un vistazo. Bueno. Aparece muy bien. Mm. Una vez hecho esto, vamos a implementar el control deslizante. Justo después de esto de. Vamos a renderizar el control deslizante. Recordemos que importamos el control deslizante de react slip. Vamos a darle un nombre de clase. Entonces vamos a hacer parte de arriba, diez. Entonces también el cos scroll, todo scroll. Diseñemos rápidamente los elementos dentro del control deslizante. Vamos a tener una d para el nombre de la clase. Vamos a tener un flex de display. La parte en la izquierda es cero. Gana esta d, vamos a tener otra d. el ancho es del 100%. Sí. ¡Uy! Echa un vistazo. No debe haber ningún espacio entre ellos. Sí. En un dispositivo pequeño, el ancho es del 95%. Acolchado izquierda, 20. El margen es oral. Los bordes serán redondeados a Excel. Entonces estamos tratando de diseñar la tarjeta. Sí. Vamos a darle el relleno de cuatro. En un dispositivo grande, el relleno es de seis. Vamos a darle una altura media de 250 píxeles. Y eso es todo. Tenemos la tarjeta mostrada en el navegador. Pero no va a ser visible simplemente porque no especificamos la co. Cuando vienes a hacer PG, verde 500. Ahora tenemos la tarjeta en el navegador. No queremos usar esto. Más bien, queremos configurar un diseño dentro de la tarjeta. Atornille rápidamente a la parte superior y copiemos el estilo en línea. Pégala aquí mismo. Limpie el ancho, y así hagamos los ajustes necesarios. Aquí lo vamos a tener cinco grados. Esta porción se posicionará cinco grados con el color azul, 48 AFD E. Ahora, échale un vistazo Se puede ver que la tarjeta ahora está dividida en dos porciones iguales, la porción blanca en la parte superior y la azul en la parte inferior. Pero esto no es lo que queremos. Ahora hagámoslo diez porque es demasiado grande, y hagamos que la porción blanca sea 90. Hermoso. Vamos a mostrar los elementos dentro de la tarjeta. Ahora dentro de la tarjeta, vamos a tener una D, darle el nombre de la clase. Tengámoslo display flex. Otro. Hombre, 100 pixeles para la media w. Entonces vamos a tener una etiqueta IMD, SRC Las imágenes que vamos a usar justo dentro del directorio público. Puedes comprobarlo, y después yo voy a hacer Papo punto PNG Ahora a salvo, y ahora tenemos morado en la pantalla. Bien, queremos hacer algunas paradas por aquí en lo que respecta a la configuración. Todos sabemos que no todas las imágenes son redondeadas. Lo que vamos a hacer es darle un tamaño a la imagen para que cuando tengas imágenes de cuatro esquinas, también se pueda redondear. Ahora lo que voy a hacer. Vamos a darle rápidamente un nombre de clase. 20 de altura, 20 redondeadas completas. Aquí está papá. ¿Puedes ver? Hermoso. Nuevamente, tenemos que especificar la alternativa. Y voy a hacer foto de clientes. Por favor, no hagas la imagen del cliente. Aprendí que la imagen es ahora un camino clave. Ahora tenemos foto de cliente. Mm hmm No he mostrado la imagen. También tenemos que mostrar el derecho. Después de este df, vamos a tener otro df. Debes necesitar un contenedor para definir la forma de tu sitio web. Entonces la D es algo de lo que no puedes huir. Dentro del nombre de la clase, vamos a tener que mostrar flex, columna Flex, que es la dirección flex. Entonces vamos a hacer gab x cuatro, que es el hueco de columna En un dispositivo mediano, queremos que flexione la dirección de la columna. También en un dispositivo mediano, los elementos se alinean en el centro. Bueno. Entonces dentro de esta def, vamos a tener otra def. Como desarrollador front-end, el df es tu amigo. El ingenio frontal va a ser medio. Base de guiones de texto, que mapeará al tamaño frontal y a la altura de la línea. Hecho. Entonces dentro de la def, voy a hacer Daisy Papo Todo bien. Suena gracioso, ¿verdad? Aquí está. ¿ Qué otra vez tenemos que hacer? Ahora, después de este cierre d, vamos a tener otra d con el nombre de la clase. Pero en esta ocasión, queremos hacer uso de la interpolación de cadenas El frente vamos a ser 300. Entonces usemos el Google back Hind, nombre de clase. El color del texto. Va a tener el mismo color de prueba con el encabezado. No necesito hacerlo dos veces. Yo solo destaco y copio y luego lo levanto aquí. Cierra la d. y dentro de la d, voy a hacer estudiantes de YouTube. Das Papo comentó en mi canal de YouTube, así que tengo que levantarlo aquí No he hecho esto. Vamos a tener una etiqueta P. Gana la etiqueta P, volvamos rápidamente al recurso de código y copiemos la reseña de Des Papo Aquí está. Resaltar y copiar, pegarlo dentro de la etiqueta P. Al guardar en el navegador, el. Hermoso. Alineemos rápidamente la etiqueta p. Dale un nombre de clase. Nuevamente, queremos hacer uso de la interpolación de cadenas. Margen abajo, va a ser seis, la fuente. Para que veas que la fuente es demasiado negrita. No me gusta así, así que queremos que aparezca un poco más ligero. Entonces la fuente especifica 200 para la w. ahora ves Código. Usemos el bloque rector. La altura media, 70 píxeles. El texto, hagámoslo 15 pixeles. Margen superior. Hagámoslo tres. Ahora guarda hermosa. Primero, formatear el código. Ya ves, este tipo, están alineados al centro, y ese no es el resultado esperado. Vamos, compruébalo. Esta es la d dice en la mediana del elemento del dispositivo alineado al centro. No creo que esto sea necesario. Entonces ahora lo tenemos. Una vez hecho esto, apliquemos rápidamente la diapositiva. Desplázate hasta la parte superior, donde tenemos el deslizador. Primero, quiero decirles que la brecha entre el deslizador y la descripción es demasiado. Entonces creo que tenemos que quitar algo. ¿Dónde tenemos el deslizador? Slider, ¿dónde estás? Oh, Dios mío. Aquí está. Vamos a quitar la almohadilla en la tina. Una vez hecho esto, vamos a aplicar el control deslizante por aquí, luego la configuración. Tan simple como eso. Ahora, lo que voy a hacer porque necesitamos múltiples elementos para que funcione la diapositiva. El punto culminante D. Vamos a destacar desde las líneas uno, dos, 42160. Puedes copiar, pero para mi, solo tengo que duplicarlo tantas veces como me guste. Guardar, veamos qué tenemos en el navegador. Cama. Ahora todo está funcionando perfectamente bien como se esperaba. Echemos un vistazo rápidamente a la capacidad de respuesta móvil. En el iPad, la diapositiva para mostrar es una. Echemos un vistazo a los teléfonos móviles. Además, la diapositiva para mostrar es una. De hecho, es receptivo en nuestra plataforma. Esto es hermoso. Todo parece muy bien, y me encanta. Esto ya está apagado. Insure, comenzaremos a diseñar el Nos vemos Idee. 60. Insignia de pie de página: H id. bienvenidos de nuevo a clase. En esta conferencia, vamos a diseñar el componente fa. Nosotros lo hago, comencemos. Común B para abrir el explorador. Asegúrese de abrir el componente dentro del filtro, haga clic derecho, cree un nuevo archivo. Grasa Gs. Otro. Gana el filtro. Codón punto s. Generar el componente funcional. Guardar y volver a la RO fa s. de C para generar componente funcional de reacción. El filtro va a permanecer consistente durante todo el proyecto. Entonces tenemos que renderizarlo dentro del layout. Abre el layout dot s. vamos a renderizar el filtro. Ciérralo con la etiqueta de cierre automático y asegúrate de importarlo en la parte superior. Seguro, y luego cerrar el punto de diseño como. Ahora comencemos con la fa. Rápidamente demos a este dv ID ID igual. Fa. Ahora veamos qué tenemos en el navegador. ¿Ves que este es el filtro de aquí? E incluso si abres la página de detalles del portafolio. Cuando te desplazas hacia abajo, vas a ver el filtro. ¿Puedes ver? Esto sucede simplemente porque lo tenemos renderizado dentro del layout a as. El filtro se mostrará a lo largo de las páginas. Limpia. Vamos a darle rápidamente un nombre de clase. Margen superior vacío. Hagámoslo 90 pixeles. Dentro de la d, vamos a tener otro df, darle un nombre de clase. El color de fondo va a ser blanco. Parte en cero superior. En un dispositivo grande, parte en los 100 pis superiores. Cierras la d, y ahora vamos a tener otro df, dale un nombre de clase. El max w max 11 40 pis. F El fondo va a ser azul d 500. Redondeado, excel. Cerremos la D. Hagámosla receptiva. Px 20 pixeles. En un dispositivo pequeño, px 64 píxeles. Py 64 píxeles. Mm auto. Este es el acolchado izquierdo y derecho. El acolchado a la izquierda a la derecha en un pequeño dispositivo, la parte superior acolchada y la parte inferior acolchada. Ahora vamos a tener un estilo inline. Vamos a hacer que se transforme. Traducir cero píxeles, 70 píxeles. Ahora cuando revisas el navegador, aquí lo tienes. ¿Puedes ver? Bonito. Todo bien. Todo va bien. Vamos a mostrar el contenido dentro del. Vamos a tener una d. vamos a tener display grid grid template columna 12. Otro. La columna de rejilla es 12. En el dispositivo grande, la columna de la cuadrícula es de nueve. Dentro de la d, vamos a tener una etiqueta P, y dentro del tirón P lo voy a hacer listo para comenzar Y él es. Ahora, vamos a alinearlo rápidamente correctamente. El texto 30 píxeles. El color de prueba es el blanco. Alineemos rápidamente la prueba al centro. En un dispositivo grande. Vamos a hacer inicio de texto. Y ahora lo tienes. En un dispositivo grande, va a comenzar desde aquí, pero en un dispositivo más pequeño, la prueba se alineará al centro. Échale un vistazo. ¿Puedes ver? Hermoso. Justo después de la etiqueta P, vamos a tener otra etiqueta P. Después voy a pegar el derecho correspondiente a. Puedes usar esta etiqueta P para decirle a tu cliente tu empresa. Cuando veas, ahora lo tenemos así. Demos esto rápidamente. El texto va a ser blanco. Suena la fuente. Nuevamente, aquí vamos a tenerlo exactamente igual. Sólo tengo que resaltar copia, y luego levantarla aquí abajo. Guardar y ver lo que tenemos. Hermoso. Nuevamente, en un dispositivo más pequeño, se va a alinear al centro. Genial. ¿Qué ese otra vez tenemos que hacer? Ahora necesitamos la navegación. Justo después de este cierre D. vamos a tener un div con el nombre de la clase llamada spam 12. En un dispositivo grande. De nuevo, sólo tengo que destacar y copiar a este tipo. Ven aquí. Pegar. Cambiémoslo a tres. Cierra la d, justo dentro de la d. Vamos a tener otra. Vamos a tenerlo display flex, Justificar contenido al centro. El margen top cinco. Pero en un dispositivo grande, el margen superior cero. Dentro de la d, vamos a tener una etiqueta a. Un remolcador, dentro del H temel interior de la etiqueta A, vamos a hacer, apúntate ya. Lo tenemos a la furia del contenedor. Vamos a estilizarlo rápidamente. Dale un nombre de clase. Fuente Sans. La familia de fuentes es Sans. El Cs, vamos a hacer que señale. P X diez, P Y, cinco. El BG, que es el color de fondo. Ahora, vamos a hacer algo diferente por aquí. 01, d9ff. Vaya, échale un vistazo. Ahora tenemos el tope. Pero queremos que los bordes sean un poco curvilíneos. Lo que voy a hacer ahora es dash redondeado, Excel. Aparece muy bien. El texto blanco. El tipo de letra nosotros, hagámoslo medio. Texto g, y esto mapeará con el tamaño de fuente y la altura de línea. Todo bien. Creo que eso es todo. Cuando guarde, formatee rápidamente el código para una sangría adecuada Y ahora tenemos algo hermoso como esto. Una vez hecho esto, pasemos a la siguiente conferencia donde vamos a diseñar al padre de familia. Viendo la siguiente conferencia. 61. Iconos de pie de página: Sigamos con la tina de comida. Abre el código recurso punto MD. Copiemos rápidamente los elementos de la puta, que es la matriz de datos. Sólo tengo que destacar del 6852 708. Desplázate hasta la parte superior, y luego pegarlo dentro del componente así. Una vez hecho esto, el nido y la línea es para mostrar el logotipo. Justo después del cierre d, vamos a tener una etiqueta de bote. L et's rápidamente le dan un trasfondo. BG 223740. Dentro del pie, vamos a tener un d.M X auto, que es el margen izquierdo y derecho. Max W pantalla Excel. Espacio, y ocho. P X cuatro, y el P Y va a ser 16. Por supuesto, a estas alturas, ya deberías estar familiarizado con las clases de servicios públicos de viento de cola. En un dispositivo pequeño, P X seis, en un dispositivo grande, espacio, y, 16 LG, Px ocho. Formateemos el código. Otro, L et's lo hacen contenedor. X auto. P para D en un dispositivo mediano. Queremos que sea calefacción. Entonces tenemos que mostrar bloque, margen superior, pluma. El margen izquierdo y derecho se establece en auto. El ancho máximo es de 12 80 píxeles, y estamos especificando el margen superior y el botón de margen. Conoces el resto de las clases. Hermoso. Ahora vamos a mostrar el logo. En dispositivo mediano, queremos que se oculte. De lo contrario, vamos a tenerlo bloque de visualización. Otro. El texto t s cien. Tengamos un flex de display, justifique el contenido al centro. El margen superior es de diez. Lo que debemos hacer ahora es copiar el SVG y luego pegarlo entre ese d. Volver al recurso de código punto MD. Destacemos desde 712 2742. Destacar desde el SVG de apertura hasta el SVG de cierre. Copia, vuelve al código y luego pegarlo dentro. Formateemos el código. Hermoso. Después de este cierre d. vamos a tener una etiqueta P, y yo voy a hacer, te mereces que se la vea. Vamos a estilizar rápidamente la etiqueta P. Dar el nombre de la clase. Margen top cuatro ases máximos. Esto hará que el ancho máximo sea de 20 M. Texto. ¿Qué color de texto vamos a usar aquí? Siete b858b. Las fuentes, que es la familia de fuentes. El vamos a alinearlo al centro. Todo bien. Ahora vamos a tener una etiqueta P. Y esto va a ser un derecho de copia. Vamos a tener exactamente el mismo color, exactamente el mismo color de prueba, así que solo hay que levantarlo ahí arriba. Nuevamente, exactamente la misma fuente, resalta y copia, pegarla aquí así y boom. Nuevamente, lo que tenemos que hacer después de revelar d, vamos a tener otra d. Vamos a tenerlo display grid La brecha seis, la columna de plantilla de cuadrícula, seis, y el dispositivo mediano, parte y parte superior es 20. Y ahora queremos mostrar el logo en un dispositivo más grande. Lo voy a hacer en un dispositivo mediano. Vamos a tenerla bloqueada, si no, vamos a tenerla escondida. Ahora vamos a tener otra d. texto Azul 500. Todo bien. También tenemos que copiar y pegar el SVG. Ya está resaltado. Sólo tengo que copiar. Pégalo dentro del formato d del código. SF scroll a la parte superior, vamos a tener exactamente la misma información aquí. Solo tengo que resaltar copiar todas las etiquetas P. Después pegarlo justo después de este profundo. Una vez hecho esto, compruébalo en el navegador. Muy bien, tenemos el logo. El logotipo azul aparecerá en un dispositivo grande, y en un dispositivo más pequeño, vamos a cambiar el logotipo a verde y así sucesivamente y así sucesivamente. Entonces déjame mostrarte rápidamente. Desplázate hasta la parte superior. El primero aquí, tenemos el logo calentando en dispositivos medianos. Y entonces va a aparecer solo en un dispositivo más pequeño. Y el segundo logo de un aquí, lo tenemos calentando en un dispositivo más pequeño y lo mostramos en dispositivos medianos, y luego este es el logo. Tan simple como eso. Pero el tema que tenemos ahora es que las cosas no están bien alineadas. Entonces veamos qué pasa. Desplázate por la parte superior. Muy bien, chicos. Échale un vistazo. P X. Vamos a cambiarlo y a ver si vamos a conseguir la alineación adecuada. Recargar. Lo mismo aquí. Tenemos que volver al código. Todo bien. Así que aquí, ya sabes, levantamos este código de aquí, ¿verdad? Entonces tenemos que cambiar algunas de las propiedades. No queremos que se alinee al centro. Una vez hecho esto, desplázate hasta la parte superior. La columna de plantilla de cuadrícula aquí va a ser cinco. Y creo que eso va a resolver el tema. Todo bien. Hermoso. Vamos a comprobarlo o más por dispositivo. Este es el resultado esperado. Muy bien, chicos. El pie de página va tomando forma poco a poco. El nido en línea es para mostrar los artículos. Hagámoslo en la conferencia de la red. 62. Artículos de pie de página: Vamos a mostrar rápidamente los artículos de la puta. Y justo en la parte superior. Así que tenemos una variedad de servicios. W en la matriz, tenemos todas las cosas que puedes renderizar. Y por cierto, puedes cambiarlo a tu final. Sí. Para que puedas especificar el tipo de servicio que prestes. Aquí también, tenemos una variedad de companing. Tenemos un bate conocer la revisión de la cuenta del equipo. Y aquí tenemos una serie de montón, que contiene el contacto, las preguntas frecuentes y el chat en vivo Y aquí tenemos las políticas legales. Ahora vamos a mostrar todas las cosas en la pantalla. Justo después de su cierre dv. Vamos a tener una d, darle un nombre de clase en dispositivo mediano. Vamos a tenerlo bloque de visualización, contrario, vamos a tenerlo escondido en un dispositivo más pequeño. Entonces la idea es usar el accodu para alternar y abrir los elementos en un dispositivo más pequeño Ahora vamos a tener una etiqueta P. Voy a hacer servicios. Vamos a darle un rancio El medio de fuente, que es la fuente húmeda. Texto blanco. Tamaño de fuente. Todo bien. Después de la etiqueta P de cierre, vamos a tener en esa lista, una UL, dentro de la UL, vamos a mapear los ítems. Aquí voy a hacer Servis mapa de puntos. Entonces estamos tratando de mapear a través de esta matriz de datos, que es el servicio. Cuando mapeamos a través de esta matriz, vamos a tener todos estos elementos la división en la pantalla, que son los elementos dentro del servicio. Todas las cosas son en realidad las básicas. Ahora vamos a hacer item, y este ítem representa cada elemento en la matriz. Entonces vamos a devolver la interfaz de usuario. Dentro de la UI, vamos a tener una etiqueta LI. Dentro de la etiqueta LI, vamos a tener un tirón A, y luego sólo tenemos que mostrar el artículo Guardar y ver lo que tenemos. Todo bien. Ahora lo tenemos por aquí. Vamos a darle rápidamente el s. Dale un nombre de clase al remolcador A. El texto, siete B, 858b. The font dash, Sans, que es la familia de fuentes. En Hova, la opacidad va a ser de 75. Guardemos y veamos, ahorren. Ahora lo tenemos en el navegador. En Hova, ¿ves? Una cosa más, hagamos la coser al puntero. Ya se ve hermosa, pero no estoy satisfecha con la alineación. Entonces veamos si podemos estilizar la etiqueta UL. Dale un nombre de clase. Margen superior seis espacio y cuatro. Entonces el tamaño del texto va a ser SM. Guarde el proyecto. Se ve más hermoso así. Ahora habiendo hecho esto, desplácese hasta la parte superior. Tenemos uno, dos, tres, significa que lo vamos a duplicar tres veces. Destacados desde esta inmersión de apertura hasta el deve de cierre. Sólo voy a duplicarlo tres veces. Puedes copiarlo y pegarlo tres veces. Bien Déjame copiar y pegar. Copié, luego vengo aquí, pego, pego, pego. Quiero que sea fácil para todos seguir adelante. En ahorras, ahora tenemos los mismos artículos en tres lugares. Así que rápidamente vamos a th los artículos individuales. On you scrot to the top, esto va a ser companing. Este es el primer ítem. Este es el segundo ítem. Vamos a mapear a través de la compañía, y aquí la etiqueta P, vamos a hacer política de Copanin Creo que suena más mejor así . Muy bien cuando veas. Bueno. Puedes ver Hermosa Desplazarse hacia arriba otra vez, tenemos la hep C. Esta es la empresa, entonces vamos a mapear a través de la ayuda ¿Qué hacemos aquí? Enlaces útiles. Sí. Por último, tenemos que mapear el lego. Y aquí está. Entonces voy a hacer política legal o políticas. ¿Qué opinas? Ahora vamos a hacer el mapa de puntos del ego, y luego los ítems se mostrarán en la pantalla. Echa un vistazo. Hermoso. Así que terminamos con el pie de página en dispositivos grandes. Cuando revises el dispositivo móvil, te darás cuenta de que ahí no aparece nada . No te preocupes, entiendo que el testimonio está superando a su contenedor Definitivamente lo arreglaremos en el futuro. No se muestra nada en la pantalla en un dispositivo pequeño. Veamos qué tenemos en el iPad A. Bien. En el iPad, lo tenemos así. Y me gusta cada pedacito del diseño. Perfecto. El nido y la línea es mostrar los iconos de las redes sociales. Hagámoslo en la próxima conferencia. 63. Muestra iconos de redes sociales: Bienvenidos de nuevo a clase. Bien, sigamos adelante para mostrar los íconos de las redes sociales. Justo después de este d, vamos a tener otro d. Un dispositivo extra grande, el max w va a ser seis excel. Además, vamos a tener que sobresalir max con siete excel. Px diez en dispositivo mediano, Px 20. Un dispositivo extra grande, px 44, Mx o dos. En un dispositivo más pequeño, el Pi va a ser diez calefacción por desbordamiento. Ahora vamos a tener otra d, dar el nombre de la clase. Tengámoslo display flex. Entonces vamos a tenerlo flex wrap. El flex wrap va a ser wrap. Justificar un contenido, espacio entre. Elementos alineados al centro. Otro. El ancho va a ser un par de la pantalla. Un pequeño dispositivo, el ancho va a ser automático. Nuevamente, en un pequeño dispositivo, margen izquierdo y derecho es para Margen inferior es diez y un dispositivo pequeño, B cero. Uy. Echa un vistazo. Hermoso. Ahora vamos a tener una etiqueta A. Dentro de la etiqueta A, tenemos que pegar el SVG. Abre el recurso de código. Desplácese hacia abajo. Vas a ver los íconos fo. Vamos a copiar el SVG para Twitter. Resaltar y copiar. Ven aquí, pegarlo entre la etiqueta A. Dar formato al código. Guarda y mira lo que tenemos en la pantalla, y ahora lo tenemos así. Rápidamente le demos un estilo. Dale a la etiqueta A un nombre de clase. Tengámoslo display flex. Dirección de flexión, es columna. Artículos, Alinear Centro. Además, justificar el contenido al centro. Todo bien. Al hacer clic en el icono de redes sociales, queremos abrir una nueva pestaña, así que Target equa, en blanco Dentro de la referencia de hipótesis H REF, asegúrate de pegar tu enlace de hilo por ahí o tu tweeter por así decirlo, si hay algo así ahora Habiendo hecho esto, debajo de la etiqueta de cierre del SVG. Vamos a tener una H cinco. Voy a hacer hilo de Twitter. Puedes hacer hilo si tienes una cuenta de hilo, y también puedes usar el subproceso SVG. Mm. Ahora vamos a dar el nombre de la clase. Va a ser rector. Mting top, va a ser uno. En dispositivo grande, Ming top tres. Texto S y un dispositivo más, texto B. Fuente, La familia de fuentes, vamos a tener sus hijos, y luego la prueba, el color de la prueba va a ser gris 200. La transición se fijará en los colores. La duración es de 300. Grupo, hove. Vamos a tener un mensaje de texto. Ahora cuando se ciernen en la prueba, vamos a tener un color de prueba azul 48, e de dE. L et's guardar y ver lo que tenemos. Bueno. Echa un vistazo. ¿Ves? Ahora, lo que voy a hacer es sencillo. Vamos a destacar este de select de las líneas uno, nueve, tres, dos, dos, uno, dos. Yo lo duplicaría cuatro veces. Puedes copiar y pegar cuatro veces. Todo bien. Cuando guardas, y aquí está el resultado final. Todo es hermoso. Entonces, reemplacemos todas las cosas. Vamos a tener Instagram, driblar, y así sucesivamente y así sucesivamente Entonces solo tengo que poner el señuelo y luego implementarlo a mi final. Es sumamente fácil hacer eso. Entonces por ejemplo, abre el recurso de código, Entonces aquí está el SVG Git. Resalte y copie por aquí. Voy a hacer Twitter. Ahora, voy a reemplazar este SVG, y este es para Git. Por favor, asegúrate de pegar la URL de tu perfil o tu perfil de Gits dentro de la H. Se presta al formato Aquí voy a hacer Git. Bien, déjame hacerlo por ti. C ver la conferencia al final. Este es para Dribble, destaca, límpielo de pasta. Ahora voy a hacer driblar. Aquí está el regate. El siguiente es enlace D. Copia el enlace, entonces va a hacer también, nosotros entonces va a hacer también, nosotros también, lo tenemos para el Instagram. también, lo tenemos para el Instagram. Cuando ahorras, échale un vistazo. Hermoso. Entonces, al hacer clic, se abrirá una nueva página. Por ejemplo, si has pegado la URL de tu Github, al hacer clic, abrirá tu cuenta de GitHub en una nueva También vamos a implementarlo para el Gmail. También tenemos que duplicarlo una vez más. Resalte de líneas 28223 oh tres duplicadas. Esto será G mail. Vamos a reemplazarlo con el SVG de correo G. Todo bien. Cuando guardas y revisas el navegador, aquí tienes el resultado final. Esto es extremadamente impresionante. Una vez hecho esto, pasemos rápidamente a la siguiente conferencia para que podamos mostrar estos elementos en un dispositivo más pequeño. Si lo revisas en un dispositivo pequeño, notarás que todo está funcionando bien excepto los artículos. 64. Menú de pie de página en un dispositivo móvil: H i ahí. Bienvenidos de nuevo a clase. En esta conferencia, vamos a implementar el menú Futa. Cuando el usuario haga clic en el menú, los elementos se mostrarán en la pantalla. Vamos a implementarlo rápidamente. Abra el directorio de filtros. Filtrar punto z. también, tenemos que abrir el codón. Vaya, échale un vistazo. Cierra el explorador. Dentro del filtro, lo primero que vamos a hacer es importar el codón. Codón de entradas a partir del codón dot slash. Una vez hecho esto, la siguiente línea final es pasar la totalidad de estos elementos como apoyos hacia abajo al codón ¿Cómo lo hacemos? Déjame mostrarte rápidamente. Desplácese hacia abajo. Escribir traer la sección después del s. vamos a renderizar acordeón Ciérralo con la etiqueta de cierre automático. Ahora tenemos que tomar el título, y vamos a hacer servicios. Aquí, entonces pasemos en el contenido contenido igual, desplázate hacia arriba y déjame mostrarte. Este tipo de aquí mismo, que es la gama de servicios. Resaltar y copiar. Ven aquí y pega. Ahora resalte, tenemos que duplicarlo tres veces. Mantenga presionado el turno y hacia fuera, toque la tecla de flecha hacia abajo para duplicar. Duplica uno, dos y tres. Ahora tenemos que cambiar el título y el contenido. Aquí vamos a tener. En realidad, puedes comprobarlo desde aquí. Déjame mostrarte. Entonces estos son los títulos. La política de Copaning, los enlaces útiles y las políticas legales también Entonces ahora creo que tenemos la política de companing. Resalta y copia, ven aquí y pega. Atornille a la parte superior. Tenemos que pasar en esta matriz de compañía como apoyos hacia abajo en el acodeón Entonces lo que debemos hacer ahora mismo es pasarlo como contenido aquí porque el contenido ya es un atributo que va entrando en el accodon Aquí tenemos los enlaces útiles. Después resalta, límpiala, pega. Tenemos sepsis. Desplázate hasta la parte superior. Aquí vamos a tomar en ayudar, la variedad de ayudar. Por último, para el título, vamos a tener las políticas legales. Desplázate hasta la parte superior, donde tenemos la variedad de legal. Resaltar y copiar. Ven aquí. Tenemos que reemplazarlo también. Una vez hecho esto, el nido y la línea es para recibir estos apoyos dentro del acodón Haz qué guardar, vuelve al acordeón gs, dentro del parámetro de esta función Vamos a desestructurar título y contenido. Déjame mostrarte otra vez. Aquí está el título, y aquí está el contenido. Por favor, asegúrate de deletrear correctamente para que no tengas problemas. Ahora, todo se hace correctamente. Declarar las variables de estado necesarias a utilizar. Aquí arriba, vamos a portar el gancho del estado U. El gancho Ute es una función. Por lo tanto, tenemos que invocarlo. Nosotros en la función del estado U. Vamos a tomar vigencia como el estado inicial. Entonces aquí vamos a tener una matriz de dos entradas. El costo está abierto, el conjunto C está abierto, luego asígnelo así. Esta es la variable que contiene el estado inicial, y esta es la función seta que se utilizará para actualizar el estado inicial. Tan simple como eso. Creo que deberías darme algunos acólitos por estas hermosas explicaciones Ahora vamos a tener una función. C, vamos a llamarlo Tg, Tg accodu. Ajustarlo a una función. Ganar la función, vamos a hacer set está abierto para no abrir. Ahora dentro de DUI Si al final, su d no tiene nombre de clase, por favor haga qué para especificar el nombre de la clase. Vamos a darle el borde, y el borde de color borde d39, 39, 39 La parte inferior del margen es de cuatro, parte superior de partición y la parte inferior de partición. Hagámoslo seis. Vamos a tener otra d. Dale un nombre de clase. Vamos a tenerlo display flex, Justificar espacio de contenido entre. T. Alinee los elementos al centro. El relleno es de dos, pero en un dispositivo más pequeño, el acolchado es de cuatro. El ancho va a ser 100% completo. Por último, el fondo va a ser rojo 500 para trabajos docentes. Sí. ¿Gana hace D? No, no me gusta así. Bien. Cuando hace D, vamos a tener una etiqueta H dos. H dos. Gana la etiqueta H dos, vamos a mostrar el título. Este título por aquí, recordemos que lo desestructuramos aquí dentro del parámetro de la función, y viene de aquí Lo pasamos como apoyos hacia abajo en el codón, y luego lo recibimos aquí Ya que lo hemos recibido aquí, deberíamos poder hacer uso de él en cualquier lugar alrededor del componente. Veamos y veamos qué tenemos en el dispositivo móvil. Cuando recargas, dice, módulo f países de codion Pared. Veamos qué tenemos aquí. Dentro del pie de página, tenemos el codón. Volvamos al pie de página, desplácese hasta la parte superior. Estamos importando codón a partir de codón. Echa un vistazo. Tenemos que quitarnos el trineo. Ahora funciona. Atornille. Todo bien. Hermoso. ¿Puedes ver el título? Contamos con el servicio, la política de Copanent, el enlace útil y las políticas legales Si observas con tus ojos de ingeniería, te darás cuenta de que el espacio entre cada artículo es extremadamente marge Vamos a arreglarlo rápidamente. Todo bien. Volvamos al Acordeón Cierra el Explorador. Creo que tenemos que estilizar la etiqueta H dos. Vamos a dar el nombre de la clase. Texto d dos Excel. Vamos a hacerlo amplio. La fuente va a ser semi negrita. Todo bien. Vamos a guardar y ver. Bien, me encanta el color de la prueba y cómo aparece. Redujamos rápidamente el espacio entre los artículos H. Entonces lo que voy a hacer ahora mismo es cambiar la parte superior acolchada y la parte inferior de palmaditas Vamos a reducirlo. Hagámoslo también. Cuando ahorras. Todo bien. Creo que esto es lo suficientemente mejor. Sí, esto me encanta. Compruébalo en otro dispositivo. Bueno. Echa un vistazo. Se ve bien. ¿Qué hacemos ahora mismo? Aquí, vamos a tener una D, darle un nombre de clase. BG vamos a darle el color de fondo. Vamos a tener exactamente el mismo color de pelo, policía de alta luz. Después, haga una pista. La altura va a ser ocho. El ancho va a ser ocho. Vamos a tenerlo display flex, Justificar contenido al centro. Alinea los artículos al centro. Entonces vamos a hacer que los bordes sean redondeados. Entonces vamos a hacerlo redondeado completo. Queremos que se le dé un círculo. Una vez hecho esto, copiemos el X VG y lo peguemos aquí abajo. Abre el código recurso punto MD. Copia el acordeón SVG. Vuelve al código, pegarlo entre, guardar, asegúrate de formatear. Compruébalo en el navegador. Aparece muy bien. Pero tenemos que cambiar el color para que sea más visible. Vamos a darle un nombre de clase. Aquí, vamos a hacer W seis. Ahora estamos estilizando el icono mismo. El ancho del icono va a ser seis, la altura va a ser seis texto blanco. Compruébalo. Ahora, ¿puedes ver? Hermoso. Me encanta lo que estoy diciendo. Vamos a continuar. Cuando hacemos clic en este ítem, queremos rotar el icono. Déjame mostrarte rápidamente. Entonces dentro de la clase ahora, tenemos que tomar en la interpolación de cadenas porque estamos esperando el script Java para que podamos escribir la condición Todo bien. Ahora podemos tener la condición. Si abierto se establece en true, preste atención, no pasará nada. De lo contrario, tenemos que rotar el icono. Menos rotar 90 grados. Cuando veas el resultado, definitivamente entendemos lo que hicimos aquí mismo. Ahora tenemos el icono así. Sí, vamos a implementar rápidamente el clic. Entonces, ¿dónde implementamos el click ahora? Vamos a implementarlo dentro de esta D. Click, vamos a llamar al acordeum Togol Seguro. Ahora, compruébalo. Cuando haga clic en este icono, va a girar hacia abajo exactamente al ir 90 grados. Echa un vistazo. Dime, no se ve bien. Por supuesto que sí. Cuando vuelves a hacer clic , giras, giras. También puedes hacer click para ajustar Todo funcionando, todo genial. A mí me encanta. Esto suele ser ahora para esta conferencia. En la siguiente conferencia, vamos a mostrar los ítems cuando se haga clic en el título Al hacer clic en este menú, deberíamos poder mostrar datos relacionados con los servicios Además, al hacer clic en la política de Copanent, deberíamos poder mostrar los datos relacionados con la política de Copanent Tan simple como eso. Hablé demasiado. Nos vemos en la próxima conferencia. 65. Menú desplegable para pie de página en un dispositivo móvil: Hola ahí. Bienvenidos de nuevo a clase. En esta conferencia, vamos a implementar el menú desplegable. Para eso, vamos a hacer uso de la interfaz de usuario sin cabeza. Dirígete rápidamente a headless.com y desplázate un poco hacia abajo Aquí vas a ver el comando de instalación. Asegúrate de resaltar y copiar, vuelve al código FS. Abre la terminal. Asegúrese de hacer clic dentro del terminal y luego hacer contra C para detener el servidor que se está ejecutando actualmente. Ahora vamos a poner en pista el comando para instalar la interfaz de usuario headless Pulsa en la tecla enter para que se encienda. Instalación exitosa. Vamos a derribar la terminal. Atornille a la parte superior. Por favor, todavía estamos dentro del codón. Ahora vamos a macetas, échale un vistazo. Deberíamos separar las cosas. A Vamos a importar transction de UI headless. Una vez hecho esto, desplácese hacia abajo, entonces ¿dónde lo implementamos ahora? Justo después de este d, déjame mostrarte justo después de esta D, donde implementamos al click. Vamos a rendir la transción. Vamos a hacer algunos ajustes dentro de la transucción Pero antes de hacer eso, rendericemos rápidamente los artículos. Abrir y cerrar co soportes. Dentro de los corchetes co, abrir y cerrar parentenss, y luego vamos a tomar en R, ponerla en una función Ahora vamos a tener una d, darle el nombre de la clase. El patrón de la d, vamos a tener que ser cuatro, el BG para enseñar palidece El BG va a ser amarillo 500 para enseñar morados, ciérralo. Vamos a tomar y atribuir. Dentro de la D, vamos a hacer mapa de puntos de contenido. Tenemos que mapear a través de los contenidos para que se muestre en la pantalla. Por supuesto, debes conocer otros procesos involucrados. Ahora, tomando elementos, que representan cada elemento dentro de la matriz. Sigo diciendo esto porque quería pegarme a tu memoria. Vamos a tener una etiqueta P rápidamente. Dentro de la etiqueta P, vamos a mostrar el ítem. Guardar ops, tenemos que hacer dentro de la terminal, y PM Run dev. Veamos qué tenemos. La aplicación está abierta en macetas host locales, 3,000. Y ahora dice que se usa transección, pero le falta la propiedad show, que es una operación booleana que devolverá true o false Entonces lo que tenemos que hacer ahora dentro de la transción, vamos a montar la propiedad aquí, vamos a hacer show Vamos a fijarlo también está abierto. Todo bien. Vamos a ahorrar. Desplácese hacia abajo. Ahora al hacer clic, así podremos abrir el menú. Pero no sé por qué no aparecen los artículos. Tenemos que regresar y ver lo que hemos hecho aquí. Aquí está la etiqueta P. Mapa de puntos de contenido. A ver. Sí, ahí tenemos el contenido. ¿Qué es otra vez? Bien, chicos, ya saben que estamos regresando a ustedes por aquí. Siempre te digo que no cometas ese error. Pero ahora parece que todos somos víctimas. Bien. Aquí, tenemos un parentensis y no un corchete. Asegúrate de abrir los padres aquí y cerrarlo. Guarde y veamos. Hermoso. ¿Puedes ver? Échale un vistazo. Esto es increíble. A mí me encanta esto. Ahora me siento aliviado ¿Puedes ver? Ahora me siento bien. Implementemos algunas propiedades dentro de la transacción para que se vea mejor. Dirígete a la cabeza L UI. En la esquina inferior izquierda de la pantalla, vas a ver la transción Haga clic para abrir. Lo que voy a hacer es copiar todas las propiedades aquí. R clic, Copiar. Ven aquí. W en la transción, pégalo, ahorra. Yo seguro formatear el código. Ahora vamos a comprobarlo de nuevo. A mejor. ¿Ves la animación? Échale un vistazo. Todo genial. Vamos a estilizar rápidamente la etiqueta P. P Y uno. El texto, hagámoslo gris. Texto gris, 500. Hagámoslo 400 porque el gris será dos du y es 500, pero correcto. Ahora tenemos el valor real. La fuente suena bien. Seguro. Tockle otra vez Perfecto. Pero ahora tenemos que quitar los colores bgrond porque lo usé con fines de enseñanza para que entiendas lo suficientemente bien lo que hice El color de fondo debería ser exactamente lo mismo con todas estas cosas aquí. Resaltar copia. Ven aquí. Pegar. Vaya, envuélvala en un corchete cuadrado. No me gusta el fondo del menú. Creo que deberíamos usar el fondo de pie para el menú para que se pueda mezclar. Todo bien. Abre rápidamente el pie de página. Donde tenemos el fondo para el pie de página. Aquí está. Tenemos que copiar este fondo, resaltar copia dentro de la sección de pie de página en las líneas 52. Cuando vengas aquí, solo tenemos que reemplazarlo. Lo mismo aquí. También tenemos que reemplazarlo. ¿Bien? Cuando ahorras, veamos qué tenemos. Ahora, hermosa. ¿Ves lo hermoso que se ve esto? Extremadamente hermosa. Échale un vistazo. Esto es de primera categoría. Creo que ya terminamos. Ya terminamos. Efectivamente, ya terminamos. Así que vamos a echarle un vistazo en el iPod. Perfecto. Todo genial. Entonces esto es ofrecer un alfarero, y espero que les guste el diseño. Asegúrate de leer y revisar las puntuaciones. Significa mucho para mí. ¿Sí? 66. Diseño de encabezado de página de contacto: Hola ahí. Bienvenidos de nuevo a clase. En esta sección de la causa. Procederemos con la página de contactarme. Rápidamente, dentro del directorio de páginas. Haga clic con el botón derecho, Nueva Carpeta, y esto se llamará Contacto. Gana el directorio Contáctame, clic derecho, nuevo. Vamos a tener las páginas. Hermoso. Ahora dentro de la página, tenemos el contacto conmigo y el diseño de detalle de la cartera. Será muy agradable si seguimos los principios básicos del diseño de sitios web profesionales, lo que implica que debemos cambiar el nombre de la página dos páginas. Debería ser una palabra pleura. No te preocupes por eso por ahora. Lo haríamos al final del curso. Contáctame páginas. Cierre el explorador, RFC para generar componentes funcionales de reacción Vamos a hacer página de contacto. Abre el componente explorer, y luego abre el encabezado, header dot js. Desplázate hacia abajo rápidamente. Dentro de esta etiqueta LI, lo que vamos a hacer es golpear la página de contactarme. En siguiente g indicando, cada vez que se crea un paquete dentro de la página del directorio, que es el chico, ese directorio automáticamente se convierte en una ruta. Por ahora, podemos decir que el contactarme es una ruta porque la página se crea dentro del directorio contáctame, y el directorio contáctame se crea dentro de la página. Déjame tomarlo una vez más. En siguiente g indicando, cada vez que se crea una carpeta dentro del directorio de la página, Esta carpeta se convertirá automáticamente en una ruta cuando se cree un punto de página s dentro. Sencillo y corto. Ahora, lo que vamos a hacer es apuntar a la página y luego contactarme. Déjame mostrarte rápidamente. Y supongo que definitivamente lo entenderás cuando lo implementemos. Voy a hacer slash page slash, contáctame así Cuando guardes, vamos a echarle un vistazo en el navegador. Asegúrate de recargar. Vamos a probar haciendo clic en el botón Hyam ¿Puedes ver? Ahora hemos podido abrir la página de contactarme. Déjame aclarar tu hacer. Regrese a las páginas de códigos. W en el DP, vamos a tener una etiqueta Hage one. W en la cabeza una etiqueta, vamos a copiar esta prueba. Lo sentimos, tenemos que cortar y luego pegar. Dar el nombre de la clase. Vamos a usar viento de cola y voy a hacer texto siete Excel. Esto hará que el texto sea extra grande. Ahora tienes el texto en la esquina superior izquierda de la pantalla. También tengo que aclarar tu curiosidad. Vamos a tener un flex de display. Justificar contenido para centrar alinear elementos al centro. Esto es solo para fines docentes, y aquí está la página de contactarme. Se ve bien. Aquí no necesitamos ninguna de las cosas. Resaltar, borrar, comando B para cerrar el explorador. Aquí, vamos a ser un poco rápidos para que podamos ponernos al día con lo que tenemos para esta conferencia. Adelante a escribir un hermoso comentario si te gusta la forma en que enseño. Vamos a tener un fragmento de reacción. Puedes seguir adelante para usar los fragmentos vacíos si lo deseas. Todos son iguales solo que los fragmentos de reacción pueden aceptar algunos apoyos. Sí. Creo que esa es la diferencia. Aquí vamos a hacer una inmersión. Dar el nombre de la clase. Vamos a tener el dv para mostrar flex. La dirección de flexión es columna. Alineemos los elementos al centro. Además, justificar el contenido al centro. W, parte superior de pading completo, 80 px. Parte inferior de padin. Además, hagámoslo 80 pix. Hagamos margin top, F vamos a tener otra D. Lo mismo aquí. Sólo tenemos que destacar estos desde aquí, copiar, venir aquí, y pegar. No tenemos que perder el tiempo. Vamos a especificar el fondo, BG, abrir y cerrar corchetes. Gana los corchetes, vamos a tomar en la URL. Después abre y cierra los padres. Gana el doblete. Vamos a hacer slash offices dot JPG. Contamos con oficinas de imagen. Y esta imagen está dentro del directorio público. No tengo que llevarte más allá porque ya deberías saberlo. Aquí, vamos a hacer portada de BG. Estamos tratando de estilizar la imagen. Por cierto, cerremos a D. W Full. Vamos a dar la altura. Hagámoslo 400 pixeles. Guardar en el navegador, aquí está. Perfecto. Está saliendo con cuidado. Una cosa más que tenemos que hacer es alinear la imagen al centro, PG centro. Guardar y ver lo que tenemos. Todo bien. Se ve bien. Escribe O en esta definición, vamos a crear una superposición de fondo Vamos a tener otro df, dar el nombre de la clase. Aquí lo tendremos exactamente lo mismo. Resalta copia, ven aquí y pega. Sí. Entonces el ancho va a ser el mismo. La altura, lleno, el fondo, vamos a mantenernos consistentes con el fondo oscuro que estamos usando 223, 740. Lo que vamos a hacer ahora es que vamos a hacer slash, que se divide por 70 Queremos reducir el grosor del fondo. Cuando ahorras lo siento, tenemos que cerrar los dientes, guardar y ver lo que tenemos. Ahora lo tenemos. Si me quito el 70 así, ¿ves?, Va a ser así, algo así como opaco. Pero si quieres que sea transparente, solo tenemos que hacer dividir por 70 o puedes dividirlo por cualquier valor de tu elección para darte ese aspecto transparente que realmente deseas tener. El mío es así. Estoy satisfecho con esto. Apliquemos el brillo. Brillo de fondo, brillo. No, vamos a tener 50. Creo que fue cuando ves. Bonito. Putin este d, vamos a tener otro d. Poner en una UI es d. Test align center. BG, queremos darle los antecedentes. Por supuesto, vamos a mantenernos consistentes con los antecedentes. 48, AFD E, PY, un pix, Px, ocho pixeles Pista y blanco. Vamos a tener que transformar nuestro por caso, la fuente va a ser semi negrita. Texto 20 pixes. Texto blanco para el color, y queremos que los fondos sean redondeados G. Dentro de la D. Puede verlo ahora mismo. Bien. Creo que debería aumentar un poco el frente . ¿Te gusta así? Esto es una lástima y va a esconder casi todo. Sigamos así. Entonces, ¿qué es otra vez? Vamos a echarle un vistazo. Es posible que no veas nada en el navegador hasta que mostramos algo entre la d. Así que vamos a tener una etiqueta a aquí. W la etiqueta A, vamos a hacer formulario de contacto. Cuando ahorras, aquí está. Esta es exactamente la expectativa. Poniendo arriba y parte e abajo, hagámoslo cinco pixeles. Creo que está bien. Entonces hagamos estos diez pixeles. Muy bien, hermosa. Vamos a hacer HREF igual, contacto. Cuando hacemos clic en esta etiqueta A, que en este caso, hace chico por aquí, va a suavizar desplazamiento hasta el formulario de contacto exactamente. Sí. ¿Qué va a hacer ahora? Vamos a dar el nombre de la clase. Hagámoslo po. Hermoso. ¿ Qué más tenemos que hacer ahora? Después de esta inmersión, vamos a tener otro deve. El margen superior del deve va a ser de diez píxeles. Gana, vamos a tener una etiqueta Hight one. Recuerda que nos estamos manteniendo consistentes con el teléfono. Aquí vamos a tener las fuentes para ser recollect board. El texto d cinco excel. Nuevamente, el texto texto, ex del mismo color. Sólo voy a resaltar copy, y luego reemplazarlo. Pan va a ser dos. Vamos a probar alinear al centro. Esto es para el espaciado posterior. Gana la cabeza una etiqueta, yo voy a hacer i y tu guardas M Bien. Aquí está. Nosotros lo conseguimos. Bueno. Después de este DF, vamos a tener otra D, darle el nombre de la clase. Hagamos algo. Ahora vamos a tener una etiqueta P. Gana la etiqueta P, solo tenemos que copiar el write up y luego pegarlo entre. Dentro del código resource.md, tenemos que copiar la redacción Resaltar y copiar, volver atrás, pegarlo. Dar formato al código. Guardar en el navegador y aquí. Estilizemos rápidamente la etiqueta P. Primero, vamos a esterilizar lo profundo. Vamos a tener display flex, Justify content to center. Vamos a tener una línea de prueba, centro. Margen top ten. O dispositivos medianos, queremos el ancho 700 pius y s. poner en la etiqueta p rápidamente darle un nombre de clase Texto con pizca. La fuente la vamos a hacer 300, que es la fuente con. Después texto centro texto Excel. Habiendo hecho esto cuando veas, Hermosa. Este es exactamente el resultado esperado. A mí me encanta. Se ve hermosa. Entonces, habiendo hecho esto, vamos a echarle un vistazo rápidamente en un dispositivo móvil. ¿Puedes ver? Bueno. Perfecto. 67. Tarjeta de menú de página de contacto: En la conferencia anterior, diseñamos el encabezado contactame. En esta conferencia, seguiremos adelante con las tarjetas, el código de Hao s, justo después de esta d, la d sobre cabeza. Este tipo. Vamos a tener otra d. relleno izquierda y derecha, 20 pix. Dentro, vamos a tener una d, dar el nombre de la clase. En un dispositivo más pequeño, vamos a tener un flex de pantalla, el GAP 20 píxeles, margen superior 50 píxeles. El ancho máximo el ancho real va a estar lleno, que es 100%, y la altura también es 100%. Qué en dos de, vamos a formatear rápidamente el código. Lo tenemos así. Ahora vamos a tener otra def. Vamos a tenerlo di flex. La dirección de flexión es columna. Entonces vamos a hacer flex. Un dispositivo extra grande, la dirección de flexión va a ser enrollada. Vamos a dar la palabra. 20 pixeles. Estamos tratando de crear las cajas. Vamos a tener otro dv. PY, 35 púas, P X 45 púas. Redondeado d G porque queremos que los bordes de las esquinas de las cajas sean un poco curvilíneos La sombra, G, el cos, vamos a hacerla puntero. Quiero tenerlo transction, todos. El transformar la duración Bash 300. En Hova cuando se ciernen en la tarjeta, vamos a cambiar el fondo. Sí. Va a ser el fondo real de Hova que hemos estado usando Te lo dije, hay necesidad de ser consistente a la hora de construir un sitio web profesional. También queremos cambiar el texto de Hova. También en Hova. Queremos traducir Y. Vamos a tenerlo. El color de fondo real del sard va a ser B, blanco. Quiero mostrarte para que lo veas c. Ahora lo tenemos. Eso está bien. Apliquemos rápidamente la sombra de caja a ella. Rápidamente, abra el recurso de código dot MD y luego copie esta sombra de caja. Una vez hecho eso, vuelve al código y pegarlo dentro de la D. Vamos a pegarlo aquí. Si, cuando revisas el navegador, y aquí está él. Y cuando se ciñe sobre él, aparece el fondo La línea nido es para mostrar el contenido dentro de la d o dentro de la tarjeta por así decirlo. Pero quiero que notes que cuando me hove, se traduce a la baja Echa un vistazo. Ese no es el resultado esperado. Debería traducirse hacia arriba y no hacia abajo. Volver al código donde implementamos el hover. Aquí así, creo que tenemos que especificar un valor negativo como este. Lo hicimos anteriormente. Una vez más, échale un vistazo. Todo bien. Bien. Lo que el df, vamos a tener otro div. Haga que exhiba flex como centro de artículos alineados. La brecha, vamos a hacerla 15. Podemos escoger de aquí. Hagámoslo 16. No, vamos a especificar una brecha personalizada. 15 píxeles serán buenos para ello. W en la D, tenemos que mostrar el icono para proceder con los íconos. Primero, tenemos que instalar el icono de reaccionar. Haga clic dentro del terminal cont C para detener el servidor que se está ejecutando actualmente Voy a hacer MPM install react icons. Golpea la tecla enter para que se dispare. Instalado, exitoso. De nuevo, sólo tengo que poner en marcha el servidor. Vamos a bajarlo un poco. Todo bien. No he instalado el icono de reaccionar. La línea de anidamiento es para importar los iconos necesarios que se necesitan De nuevo, vuelve al resultado del código punto MD. No hay necesidad de tiempo occidental para escribir todos los tops. Solo tienes que resaltar los íconos de reacción para Contact me box. Aquí están los, de las líneas 8472 850. Copia, vuelve al código y luego desplázate hasta la parte superior. Justo aquí, sólo tenemos que pegar. Estos son los íconos. Déjame mostrarte a este tipo, la ubicación de F A, la llamada telefónica de FI y el resto de ellos. Entonces aquí vamos a renderizar el punto de ubicación F. Ciérralo con la etiqueta de cierre de surf, y vamos a estilizarlo rápidamente El tamaño, hagámoslo 40. P, esto debería ser un soporte de Cole, 40. El enfriador también tenemos que mantenernos consistentes 48, AFE. ¿Qué está mal? Vaya, Lo siento, esto tiene que hacerse dentro del doble o uno sencillo Cuando revisas el navegador, aquí lo tienes. Se ve bien. Date prisa. Vamos a continuar. Justo después de esto, este tipo de aquí, vamos a tener otra D, flex, y luego la dirección flex es columna. Otro, y dentro del deve, vamos a tener una etiqueta P, y yo voy a hacer ubicación, así como esto Lo tenemos así. Bonito. ¿Qué tenemos que hacer ahora? Vamos a darle rápidamente a la inmersión un rancio. El texto, este tipo, cópielo, pégalo. Vamos a especificar el tamaño de impuesto personalizado de 14 píxeles. Todo bien. Echa un vistazo. ¿Puedes ver? Se pegan en forma, y me gusta. Vamos a tener otra d. dentro de la D, vamos a tener una etiqueta p y dentro de la etiqueta P, voy a hacer anuncio de visitantes. Tienes que especificar tu dirección. Cuando ahorras, puedes ver, echa un vistazo. Poco a poco las cosas van tomando forma, y me gusta. Dentro de la D. Otra vez, la dah delantera, vamos a hacerla semi bot. Texto, 20 píxeles, pista en blanco, que es el espacio lineal. Hermoso. Habiendo hecho esto. Ven aquí, vamos a tener un d. Olvidémonos. Gana la D resalta este icono. Presiona hacia abajo la opción K mac y luego toca la tecla par para moverla dentro de la D. Habiendo hecho eso. Destaca la d de cierre y aquí la. Este tipo de aquí en las líneas. Resalte la d de cierre en las líneas para cinco, córtela. Tenemos que pegarlo aquí mismo. Lo que simplemente implica, este deve de aquí está terminando aquí. Las líneas 40 terminan en las líneas 54. Formateemos rápidamente el código para las sangrías adecuadas. Ahora cuando revisas el navegador, lo tenemos así, y este es exactamente el resultado esperado. Justo después de este df, déjame mostrarte el deve por aquí al que nos dirigimos no hace mucho Vamos a tener otro df. Dentro, vamos a tener una etiqueta P. Gana la etiqueta P. ¿Yo sólo voy a hacer? Por cierto, esto es solo una dirección de calle Domi Sí. Rápidamente dé a la P un nombre de clase. Tablero de texto. Justo así, a quién hacerlo gris. No está mal, destaca, lo duplica. Puedes cambiar el nombre de la calle aquí y lo que sea. Todo bien. Entonces, habiendo hecho esto, lo que vamos a hacer ahora mismo es destacar. Déjame mostrarte. Hace de por aquí, Está terminando aquí así. Echa un vistazo. Termina aquí en las líneas 63. Vamos a destacar 38-62. C P, ven aquí. Pasado. Guardar agradable. Lo tenemos así. La siguiente línea es sc top. Tenemos que destacar este de. Este de aquí a partir de las siete termina aquí en las líneas tres. Resaltar de 37293 copiar y pegar. CF formatea rápidamente el código. Volvamos. Ahora lo tenemos se ve así. Extremadamente hermosa. Compruébalo en el dispositivo móvil. Se ve así. En el iPad, se ve exactamente así. Ya ves, todo está bien alineado en el dispositivo iPad. Habiendo hecho todo esto. El siguiente en línea es cambiar los íconos y los tops correctos. ¿Bien? Déjame mostrarte. Esta es la primera caja por aquí. Y esta es la segunda caja. Que en la segunda casilla, vamos a tener el número de teléfono. Entonces voy a hacer F llamada telefónica. Yo sólo voy a hacer aquí 27 servicio. Aquí voy a ponerme colores. Entonces solo tienes que especificar tu número de teléfono por aquí. Entonces todo esto lo puedes hacer al final. Sí. Así que solo voy a tener un número de teléfono aleatorio. Todo bien. L guardar. Ahora lo tienes así. Hermoso y limpio. ¿Qué es otra vez, tenemos que hacer? ¿Debería hacer todas las cosas por ti? Todo bien. Déjame tomar el dolor. Este es el tercero. Aquí vamos a mostrar el correo. Entonces voy a hacer correo AI. Entonces, ¿qué hacemos aquí? Sólo vamos a hacer soltar una línea. Puedes escribir algo aquí que pueda hacer que tu sitio web se vea bien. Sólo vamos a hacer dirección de correo. Todo esto lo puedes hacer. Entonces aquí, sólo voy a hacer un este en gmail. Puedes usar tu correo electrónico y por favor no uses mi correo porque este sitio web es ahora para ti. Por último, vamos a tenerlo para el momento. Entonces los días de la semana en que abre su empresa. Conoces todas las paradas. Entonces aquí vamos a tener el tiempo de campo de esquema de IA. Por supuesto, aquí tenemos que especificar la hora de oficina. Voy a hacer horario de oficina. Especifique cuándo abre y cuándo cierra. Voy a hacer horario de apertura. De lunes a viernes. Y entonces la hora es de las 9:00 A.M Dos 6:00 P.M Así que el horario de cierre, normalmente, no abrimos los domingos. Los domingos, solo tienes que ir a la iglesia o puedes ir a la mascarada donde quieras ir Puedes salir a la fiesta. Y. Cuando estás, aquí está el resultado. Se ve así. No me gusta así. Ya ves que este tipo de aquí está ocupando casi todos los demás espacios. Qué debemos hacer para resolver esto. Puedes resolverlo a tu final, pero para mí, solo tengo que reducir porque este correo electrónico no es válido. No hay necesidad de tener un correo electrónico largo dentro la p tack que está obstruyendo la caja Otra forma de resolverlo es especificando el tamaño del teléfono. No tiene que superar una cierta cantidad de espacio. Bien. Ahora aparece así y me gusta. Sí, esto está bien. Mm hmm. Esto es genial para mí. Por cierto, echa un vistazo a los efectos de vuelo estacionario. Se ve hermosa. Oh, Dios mío. Vamos a comprobarlo en el dispositivo móvil, lo siento, en el iPad. Echa un vistazo. Chicos, este diseño es de primera categoría. Mira eso. ¿Puedes ver? Tiene sentido. Todo bien. A suficiente de esto. Pasemos a la siguiente conferencia donde diseñaríamos el formulario de contacto. Nos vemos entonces. 68. Diseño de formulario de contacto: H i ahí. Bienvenidos de nuevo a clase. En esta conferencia, vamos a proceder con el diseño de contactarme. Rápidamente, vuelve al código VS. Justo después de esto d. Déjame mostrarte, cual es la inmersión por aquí. Ahora vamos a iniciar una nueva sección. Vamos a tener un dev con el nombre de la clase, y luego vamos a tener un display flex. Cerremos la d por el ínterin. No esta d, tenemos que especificar el ID de este d. ID igual, atornillar a la parte superior y déjame mostrarte . Este tipo de aquí. Recordemos que te lo dije al hacer clic en esta etiqueta A, queremos alisar atornillar a la sección contactame. Por lo que tenemos que resaltar y copiar esta identificación. Contacto. Y luego pegarlo aquí. Dios. La dirección de flexión es columna. En dispositivo extra grande, queremos flexionar rollo. Justificar contenido al centro, la brecha, 60 pis, Mging top, diez Pix Poner en izquierda y parte derecha, píxeles. Max con scrot a la cima y déjame mostrarte. Tenemos que mantenernos consistentes con el ancho máximo de aquí. Creo que aquí especificamos el ancho máximo. Max con, ¿dónde estás? Aquí está el ancho máximo. Sólo tengo que resaltar y copiar. Ven aquí, y pega. Mm o dos, que es margen. El relleno es de diez. Dentro del dF, vamos a tener un df, darle el nombre de la clase. En un dispositivo más pequeño, vamos a tenerlo calentando. Dispositivo mediano, vamos a tenerlo bloque de visualización. Después posicionar relativo, W, 50% en Excel W, 50%. H 550 pix. Vamos a tenerlo redondeado Excel. En un dispositivo mediano, el ancho va a estar lleno. En un dispositivo grande, el ancho también va a ser del 50%. Ahora lo que debemos hacer es especificar la imagen. Lo que voy a hacer, ahora vamos a usar el estilo inline. Dentro, vamos a tener la imagen de fondo. Especifique la garrapata ba. Gana la garrapata ba. Voy a hacer UR Bueno, abriendo cerrar perinenss. Lo que voy a hacer es slash cliente seve punto JPEG. Cuando guardes, veamos si aparece la imagen. Bueno. Ahora tenemos la imagen así. Como puedes ver las esquinas están todas redondeadas. Bueno. Regresa. Lo que debemos hacer ahora mismo es centrar la imagen. Podemos usar la clase de utilidad de viento de cola. Centro PG, y también PG CV. Ya ves, ahora aparece muy bien. Bueno. Una vez hecho esto, también tenemos que crear la superposición de fondo para que se vuelva transparente. Ahora bien, no la d la cerraría, formatearía rápidamente el código, y dentro del nombre de la clase. Vamos a tenerla posicionada absoluta para que descanse encima del steve. Ahora este deve se posiciona relativo. Cuando posicionemos a este tipo absoluto, va a descansar encima del tipo. Sé que lo sabes. H f con gradiente de Bg hacia arriba. Esto hará que el fondo degradado de abajo hacia arriba. Entonces vamos a tenerlo de. Ahora tenemos que especificar el color para comenzar con 22, tres, 740. Vía mismo color aquí. Sólo tengo que destacar a este tipo copiar y pegar. Shadow dash en. Ahora, la opacidad, hagámoslo 70. Cuando veas en el navegador. Eso no funcionó. ¿Por qué las cosas no funcionan? opacidad es de 70 años, lo que hará que sea ta Lo de la sombra Nova aquí es cad. Oh, Dios mío. Échale un vistazo. Absoluto. No. ¿Qué fue eso? Esto es lo correcto. Alto lleno con lleno, y ahora lo vas a tener así Hermoso. Bien, así que échale un vistazo. Esta es la d de cierre, ¿verdad? No tenemos nada dentro de la inmersión. Simplemente lo usamos como una superposición de fondo. Entonces vamos a tener otra inmersión fuera de la inmersión. ¿Bien? Espero que estés siguiendo. Nuevamente, vamos a tener su posición absoluta. En conjunto cero. Tengámoslo display flex. La dirección de flexión es columna. El gap, hagámoslo 20 pixes. Los artículos se alinean al centro. Justificar el contenido al centro. El texto va a ser blanco. Shadow va a ser todo g, y el patrón va a ser seis. W en la d, vamos a tener otra d. el texto va a ser para Excel. Un dispositivo de lag estra, la parte superior del margen. Hagámoslo 150 pix. El margen superior va a ser cero, redondeado completo. Entonces queremos que esté asegurado aquí. Eso lo verás en una GV. P X 15 pixeles, PY, 15 pixeles. Y el trasfondo. Mantengámonos consistentes con este BG. Vamos a hacer uso de estos antecedentes por aquí. Si no tiene sentido, lo reemplazaremos. Bien. Texto dentro, el texto va a ser blanco. Entonces vamos a mostrar el icono para que veamos lo que tenemos. Recordemos que lo importamos en la conferencia anterior. Sí, copiamos la importación del recurso de código, y luego la pegamos aquí. Quiero que todos sigan adelante, y por eso me tomo el tiempo explicándolo todo. Y espero que premies mi trabajo hecho a mano y escribiendo un comentario maravilloso Eso será muy apreciado. Todo bien. Hablé demasiado. Audífonos F A. Cierre con la etiqueta de cierre suave. Ahora veamos qué tenemos. Boom. Ves que aparece aquí? No te preocupes, para cuando comencemos a implementar los artículos debajo de este tipo, lo va a empujar hacia arriba. Entonces justo después de este deve, vamos a tener otro dv Fuentes, semi negrita. Texto dah, 24 pixes. Y voy a hacer con la vida. Puedes hacer otra cosa. Aquí está. Charla con la vida. Fuera de la D, vamos a tener otra D. Darte el nombre de la clase. Gana, vamos a tener una etiqueta P. Dentro de la etiqueta P, sólo tenemos que fastidiar. Destacemos la copia del texto. Pégalo dentro. Formatee rápidamente el código. Cuando ahorras, y aquí está. Bueno. El tipo de letra no se ve bien, no te preocupes, definitivamente lo arreglaremos. Lo que quiero traer a tu conocimiento es este tipo de aquí. A veces cada vez que formateas tu código con PD, esto aparecerá. Entonces no quiero que tengas curiosidad al respecto. Estilizemos rápidamente la etiqueta P. No mucho sino precisar el texto y el resto de ellos. Centro de texto. Margen top cinco. Fuente. Hagámoslo 200 apa el peso de la fuente. Texto Excel. No creo que sea necesario que el rígido tenga un nombre de clase. Ahora aparece así, y se ve más hermoso, alto como. Todo mecedora perf bien y todo genial. Una vez hecho esto, implementemos el boton a continuación. Justo después del cierre def. No necesitamos también un nombre de clase aquí. Aquí, vamos a tener un paseo en bote, y dentro de la navegación, voy a hacer menos charlas Y aquí está. Todo bien. Vamos a dar el inicio rápidamente. El fondo, co, debemos usar el BG, resaltar copia, venir aquí y hoyo. Texto. Margen inferior 30 pix. Poner izquierda y derecha es cuatro. Poner la parte superior y la parte inferior de palmadita son dos. Al hover, hover, también debemos mantenernos consistentes con el color real de la libración No sé si podemos conseguirlo en la parte superior aquí, dentro de la c. Echa un vistazo. Aquí está. C P, sustitúyalo aquí. Color de transición, y queremos que el botón esté un poco redondeado. Veamos qué tenemos. Cuando ahorras. Oh, hermoso. Échale un vistazo. Ver eso. Se ve bien, y me gusta. Todo bien. Una vez hecho esto, vamos a tener una parte superior derecha a la derecha de esta tarjeta. Después de este d, vamos a tener otra D. Vamos a tener un flex de pantalla. La dirección de flexión es columna. Brecha. Vamos a operaciones. Debe ser brecha y grupo. 20 pixures. Otro. Dentro del deve, voy a hacer contactores. Fuera de la D, vamos a tener una etiqueta P. También tenemos que envolver la etiqueta p dentro de la D. Resaltar la etiqueta P y luego meterla. Ya sabes cómo hacerlo. W en la etiqueta P, voy a pegar el derecho a por aquí, solicitar el core de vuelta, no dude en llegar y contactarnos. No necesitamos teclear eso. Bien. Ahora aquí está a la derecha de la esquina. No me gusta la forma en que aparece, así que tenemos que darle un poco de estrella. Vamos a estilizarlo rápidamente. A partir del contacto. El D aquí, vamos a tener un centro de texto, W. 100 píxeles, que es el ancho el PG. Entonces aquí mismo para el fondo, voy a usar PG rojo 500. Entonces esta en realidad es mi especificación porque quiero que se note. Déjame mostrarte. ¿Puedes ver? Sí. Entonces, si no te gusta el color, también puedes cambiarlo al final. P Y, el interlineado. Vamos a hacer que se transforme por caso. La fuente d 300, fuente Sans, texto 14 pixeles. El texto es blanco, y luego el redondo lo LG. Guardar ¿Puedes ver eso? Se ve bien así. Una vez hecho eso, también tenemos que estilizar la etiqueta P. Para la etiqueta P, no tenemos que hacer. Entonces, vamos a darle el nombre de la clase. Texto 30 pix. Texto, este color por aquí, resalta copia. Y pieza. Cuando guardas y bom Perfecto. Esta es exactamente la expectativa. Bien, nuestro diseño está listo, y la siguiente línea es pero el formulario de contacto de aquí. Justo después de la etiqueta de velocidad. Vamos a tener el formulario de contacto aquí. Y todo se ve bien. Por supuesto, se ve bien. Esto es hermoso. Sigo admirando este diseño. Honestamente hablando, el diseño es de primera categoría. Échale un vistazo. Bien, basta de eso. Nos vemos en la próxima conferencia. 69. Formulario de contacto: El diseño ya se ve tan hermoso. Entonces vamos a finalizarlo rápidamente en esta conferencia. En esta conferencia, básicamente, vamos a configurar el formulario de contacto. Vamos a tener el campo de nombre, correo electrónico, número de teléfono, asunto y el campo de mensaje. Sigamos adelante con ello. Justo después de este df. Vamos a tener una forma. Dale al formulario un nombre de clase. Vamos a tenerlo display flex, flex direction es columna. La brecha 20 pixes. Si observa con atención, se dará cuenta de que hemos estado manteniendo exactamente esta misma brecha. Enseñarte el concepto y los principios de un sitio web profesional. Siempre tienes que ser consistente con tu fuente, tu tamaño te y todo eso, incluido el tuyo. Ahora vamos a tener un div con el nombre de la clase. Vamos a usar la interpolación de cadena. Vamos a tener un flex de pantalla. La dirección de flexión es la columna en un dispositivo más pequeño, la dirección de flexión es el rollo. Nuevamente, la brecha, 20 pixes. Gana la D, vamos a hacer ind nombre de clase. Recordemos que importamos la trasera de Google. Uy. No lo importamos. ¿En serio? Hagámoslo rápido. Dentro del recurso de código, puede copiar rápidamente la importación. Pégalo así. Todo bien. Desplácese hacia abajo. Lo tenemos aquí. Cerremos el dee. Donde en el deve, vamos a tener un campo imputado. El tipo va a ser textos. Hagámoslo así. En primer lugar, vamos a cerrarlo con la etiqueta de cierre suave. Todo bien. Nombre Nombre. Lugar mantenga un su nombre, y va a ser requerido. Es una forma de validar el formulario de una manera muy rápida No tenemos que hacer todas las cosas. Dale el nombre de clase Px, 12 pixes, el contorno Redondeado, MD, P Y. De nuevo, 12 pix. Flex dash one, Bg gris 200. No lo hagas con él. Siguiente y línea es resaltar el campo imp, duplicarlo unos. Cuando guardes, veamos qué tenemos en el navegador. Todo bien. Ahora lo tenemos así. Tu nombre, tu nombre. No hay espacio entre ellos. Volvamos al código. Primero, tenemos que cambiar algunas de las propiedades. Aquí, vamos a hacer correo electrónico. Y claro, el tipo put va a ser el correo electrónico. Nuevamente, qué en el marcador de posición, vamos a hacer tu correo electrónico Bien, tu nombre y tu correo electrónico. Pero miren, estamos teniendo este tema. No hay espacio entre el campo. Repasemos rápidamente el código. Aquí tenemos display flex, flex direction columna. En un dispositivo más pequeño, la dirección de flexión es fila. Y échale un vistazo. La brecha y aquí. Todo bien. Bueno. Todo genial. La siguiente línea final es para resaltar. Déjame mostrarte desde 1932 208. Duplicarlo una vez. Si en el navegador, aquí lo tenemos. Cambiemos rápidamente las propiedades. El tipo imputa va a ser prueba, pero el nombre va a ser el número de teléfono Su número, y esto va a ser para el tema. Cambiar el nombre a sujeto. Todo bien. Se ve bien. A mí me gusta. Lo que debemos hacer a continuación es implementar el área de texto. Justo después de este d, vamos a tener otro df, y básicamente lo que debemos hacer aquí es solo la diversión. Voy a hacer Área de texto. Ciérralo con la etiqueta de cierre automático. Vamos a tenerlo requerido. El mensaje del nombre. Por favor, sostenga. Vamos a hacer tu mensaje. Rápidamente da el nombre de la clase, y va a ser exactamente lo mismo con esto. Luz alta llama P, ven aquí. La pasta es bastante igual, pero algo cambió, que es la altura. Hagámoslo 180 pix para el área de texto. Bueno. La altura se ve bien y me gusta. También tenemos que especificar el ancho, así que vamos a hacer con completo Echa un vistazo. Todo bien. Todo tiene sentido. Implementemos rápidamente la navegación. Para el arranque, justo después de este df, vamos a tener otro df Vamos a tener un boting. Y voy a hacer enviarnos mensaje. O puedes hacer algo mejor por dentro. Si tienes un mejor inglés para hablar, puedes verlo aquí. No es un delito. Ahora aparece aquí. Vamos a quitar el estilo aquí para la D. En cambio, tenemos que hacerlo en el boting. El fondo, vamos a mantener exactamente el mismo fondo que hemos estado usando. Copia aquí en las líneas 176. Regresa y pegarlo aquí. El ancho d caída. En un dispositivo más pequeño, el ancho es automático. Px 30 pixeles. Py, 12 pixeles. Al hover, entonces creo que deberíamos copiar el efecto hov de aquí Aquí está. Va a ser exactamente lo mismo. Copia de las líneas 17, seis, ven aquí. Después pega. Transction va a ser color. La duración 300 f, semi presagatorio. Deberíamos cambiar el color del texto a blanco, y luego hagamos que las esquinas del botin sean redondeadas Rápido, hagámoslo. Voy a hacer G redondeado, texto, y eso es todo. Bueno. Hermoso. Esto es clásico. Todo bien. Algo que también quiero mostrarte scroll a la parte superior. Recordemos que implementamos el desplazamiento suave dentro de esta una etiqueta. Entonces cuando hago clic y boom, ¿lo ves? Perfecto. Vamos a comprobarlo en el dispositivo móvil. Desplácese hacia abajo. Echa un vistazo. Amigos, esto es clásico. Extremadamente receptivo en nuestras plataformas. Eso lo puedo decir en términos generales. Si observa cuidadosamente con sus ojos de ingeniería, se dará cuenta de que el espacio entre el formulario de contacto y el pie de página es fusionarse. El espacio aquí. Mm hmm. Incluso en dispositivos grandes. ¿Puedes verlo como que lo hace parecer vacío? Entonces volvamos rápidamente al código. Ahora, pergamino. Arriba. Este es el contin a D de la sección de contacto. Lo que voy a hacer ahora mismo es especificar el margen inferior y B. Hagámoslo menos 150 píxeles. Cuando veas, bien. Hagámoslo 160. Espero que no vaya a estar demasiado cerca. Creo que es genial. Así estoy bien. Ahora ya terminamos con el diseño. La siguiente línea final es convertirla en una imputa controlada para que podamos agarrar lo que escriba el usuario dentro del campo impute Sé que entiendes de lo que estoy hablando. Hagámoslo en la próxima conferencia. 70. Entrada controlada (formulario de contacto): Ahora tenemos un diseño de aspecto muy bonito, pero el formulario de contacto no está funcionando. No se va a actualizar cuando se escribe algo dentro de los campos imputa Para que el formulario de contacto funcione, tenemos que convertirlo en una imputa controlada Él al código Vs, se desplaza a la parte superior. Lo primero que vamos a hacer aquí mismo es importar el gancho usted. Hagámoslo en línea también. No han hecho eso. También tenemos que cambiar del renderizado del lado del servidor al renderizado del lado del cliente porque ahora estamos haciendo uso del gancho del estado U y definitivamente haremos uso del clic Entonces aquí, vamos a hacer e cliente. Y ahora vamos a proceder. Declaremos rápidamente la variable de estado necesaria para el imputado. Const estado dijo estado. Entonces vamos a hacer equa estados. El estado inicial va a ser un objeto con propiedades. Solo hay que abrir y cerrar un corchete dentro de la función de estado. Para el primer campo, tenemos nombre, correo electrónico, número, asunto y mensaje. Rápidamente, vamos a hacer name set it a una cadena vacía. C y luego resaltar, duplicarlo cuatro veces. Ahora vamos a sustituir esto por correo electrónico, y este será el número de teléfono. Estos temas. Por último, tenemos el mensaje. Todo bien. Hermoso. Antes de continuar, hagamos algo rápidamente. Vamos a tener otra variable de estado. Definitivamente, vamos a usarlo en el futuro, así que hagámoslo aquí. Vamos a llamarlo cargando, establecer cargando dos Vamos a configurarlo para forzar. Tan simple como eso. Déjame explicarte la lógica. Cuando el usuario comience a escribir dentro del campo impute, esa acción activará una fecha Cuando pasa la fecha, tenemos que tomar la prueba, enseñando bien. Hermoso. Vamos a tener la función, manejar el cambio. Const manejar el cambio, igual, configurarlo en una función de flecha Llevando el parámetro de esta función, vamos a tomar en el evento. Y aquí, voy a hacer const key equ event dot, target Sólo tenemos que destacar, duplicarlo. Aquí vamos a tener valor. Vamos a hacer eventos hacer valor de punto objetivo. Básicamente, lo que estamos tratando de hacer es agarrar la prueba dentro del campo impute cuando el usuario está escribiendo Aquí. Una vez hecho esto, tenemos que actualizar el estado conjunto de estados, dentro del parámetro. Vamos a tener un objeto y dentro, vamos a difundir el estado, vamos a tomar clave. Valor de columna. Tan simple como eso. Habiendo hecho esto, La siguiente línea de diez. Es obvio que no queremos aceptar ninguna carta dentro del campo telefónico. Lo único que queremos es el número. Vamos a validarlo rápidamente. Después de esta función, vamos a tener otra función. Cs y cambio de teléfono. E qua. Definitivamente, tenemos que tomar en el evento y luego dejarme aumentar mi ritmo ahora mismo. Entonces vamos a tener valor de costo equ et valor de punto objetivo Ahora ya terminamos de obtener el valor. La línea neton es usar las expresiones regulares para validar el fd Entonces voy a hacer aquí costo. Valor numérico equ valor punto reemplazar. Dentro de la función replace, tenemos que realizar las operaciones aquí. Vamos a tener dos slash delantero y dentro, vamos a tener el corchete Lo que queremos es 0-9 más simple eso. Deberías saber todas las cosas. Esto es solo un material básico del script Java, Establecer estados dentro de los estados establecidos, extender el número de teléfono del estado, asignarle un valor numérico de propiedad. Tan simple como eso. Bueno. Por último, cuando el usuario haga clic para enviar el teléfono, queremos refrescar la disputa Por ejemplo, después de escribir dentro de la feuda, y cuando haces clic en el botón enviar, si todo está bien, queremos borrar el fd sé que entiendes de lo que estoy hablando Hagámoslo rápido. Costo clástico equa, Así que dentro de este objeto, vamos a llamar a la función seta para actualizar el estado dentro de la función seta Lo que voy a hacer ahora mismo, desplázate hasta arriba. Tenemos que destacar todo desde aquí desde las líneas 19 hasta la 23. Copiar porque queremos llevarlo de vuelta al estado predeterminado. Este es el estado por defecto, nada en el medio. Todas son cadenas vacías. Dar formato al código para las sangrías adecuadas. Ahora ya terminamos de configurar las funciones y todo lo necesario. El siguiente en la línea es aplicar estas funciones. Entonces, vamos a acurrucarnos a la feudo. ¿Bien? Esta es la forma. Lo que debemos hacer ahora mismo es implementar el cambio. Hagámoslo aquí mismo. Un cambio. Todo lo que tenemos que hacer es llamar al cambio de mango. La responsabilidad del cambio es actualizar la disputa cuando el usuario comience a escribir dentro de la imputa Ahora también tenemos que establecer el valor para indicar el nombre del punto. Recordemos que este es el campo imputado para el nombre. Hermoso. Ahora, copiemos estas dos líneas de código, resaltemos y copiemos, dentro del campo impute para el correo electrónico, más allá de aquí Tenemos que cambiar el nombre a correo electrónico porque este es el campo de correo electrónico. Para el campo telefónico, así que tenemos que pegarlo aquí. Por supuesto, copiamos antes. Aquí va a estar el número de teléfono del punto del estado, y así sucesivamente y así sucesivamente. Sujeto punto estatal. Por último, esto es para el mensaje. Hagámoslo aquí. Mensaje de punto ste. Sencillo en eso. Compruébalo en el navegador. Ahora, veamos. Todo está funcionando. Para estar seguros de lo que hicimos, tenemos que consolar registrar el estado. Desplázate hasta la parte superior. Justo después de la función de cambio de mango, vamos a hacer estado de registro de punto de consola. Olvidémonos, el cambio de teléfono de la manija debe llamarse dentro del campo telefónico y no el cambio de manija. Volvamos al campo telefónico. Este es el correo electrónico. T. Este es el campo telefónico. No necesitamos llamar al cambio de mango porque el cambio de asa es para el resto del campo de entrada y no para el campo telefónico. Voy a hacer manejar el cambio de teléfono. Habiendo hecho esto, cuando guardes en el navegador, echemos un vistazo rápidamente a la consola. Ahora cuando comencemos a escribir algo dentro del campo de entrada, definitivamente experimentarás las actualizaciones y los cambios. Aquí va a ser por el nombre. Yo voy a hacer John. Echa un vistazo a la consola. ¿Puedes ver la forma en que se actualiza? Para el campo de correo electrónico, voy a hacer ¿Ves la forma de actualizar? El feudo de Fm está funcionando perfectamente bien. Para el número de teléfono, sólo tengo que imputar cualquier cosa, y para el tema, voy a hacer texto en el formulario feud. Es caminar. Echa un vistazo. De hecho, está funcionando. Todo bien. Déjame ver. Todo genial, todo bien. ¿Qué segundo tenemos que implementar? El campo de la granja está funcionando y está funcionando perfectamente bien. Esto está apagado por ahora y espero que hayan disfrutado de esta conferencia. Nos vemos en la próxima conferencia. Manténgase enfocado y enumere la atención. 71. API de nodos con Nextjs13: Hola ahí. Bienvenidos de nuevo a clase. En esta sección del curso, seguiremos adelante para crear la API. Rápidamente, ¿qué tengo que hacer? Empecemos. Abre el código VS y haz todo lo posible para abrir el explorador. Abra el SRC, que es el directorio fuente Ahora dentro de la app, vamos a crear una carpeta llamada EPI Para algunas personas, es posible que tengas el EPI ya creado cuando generamos la siguiente placa de caldera GS desde cero Borré el mío simplemente porque voy a empezar de cero. Si ya tienes el directorio EPI dentro de la carpeta app, bien por ti Pero si no lo tienes, todo lo que tienes que hacer es hacer clic en la nueva carpeta de la app, EPI Dentro del directorio API, vamos a crear otro directorio. Todo derecho haga clic en Carpeta Nueva, y la llamaré Contacto. Dentro del contacto, haga clic derecho en Nuevo archivo. Nuevamente, dentro del contacto. Haga clic con el botón derecho, Nuevo archivo. Voy a llamar a estos puntos de ruta GS, simples hacer. Antes de proceder a crear la API, tenemos que instalar los paquetes necesarios. Voy a cerrar al explorador. Común B para cerrarlo. Haga clic dentro de la terminal. Entonces contra C para detener el servidor que se está ejecutando actualmente. Voy a hacer la instalación MPM. Espacio de centro comercial Node. También necesitamos el punto EMV, así que voy a hacer.env, así como Es la tecla enter para que se encienda. Se realiza la instalación exitosa. Vamos a echarle un vistazo. Abre el paquete.jf. Aquí está. Vamos a desplazarnos hacia abajo. Aquí tenemos la EMV Y aquí tenemos el nodo Mailer. Ciérralo hacia abajo. Cerremos la terminal. En la parte superior, vamos a importar siguiente respuesta del siguiente protector de barras Habiendo hecho eso, tenemos que exportar este archivo Exportar una publicación de función sing. Va a ser una postsolicitud, así que dentro, vamos a tomar en la solicitud, y aquí exactamente es donde empieza el teléfono. Vamos a importar rápidamente el EM V. Vamos a requerir do en V dot config. Aquí vamos a tener una constante. Peso igual de datos. Solicitar punto JS. Vamos a hacer nodo correo equ. También tenemos que requerir el nodo mailer. Requieren Nodo Mel. No han hecho eso, vamos a tener un tri bloque. Dentro del tri bloque, tenemos que crear el transportador. Voy a hacer Node Ma punto. Hay un método dentro del Nodo Mela llamado transporte creecto, y aquí está el Dentro de este método, vamos a tomar algunas propiedades. Propiedades como el bote, que es el número de bote, va a ser 465. C Estas cosas. No sé seguir perturbando. El anfitrión, en este caso, va a ser SMTP gmail.com, El servicio va a ser lo que conjetura. Correo G. Todas las cosas, tenemos que asignarlo a una variable. Aquí voy a hacer Cs transportador equ, derecho. Así que estamos asignando todo al cielo aquí transportador de código Y dentro del nodo mailer, aceptamos una función, creamos transporte Dentro de la función, tomamos en este objeto. Y este objeto aquí, tenemos la propiedad de puertos, y le asignamos valor f65 El anfitrión es sp y el servicio es Gmail. Sencillo y corto. Seguro, siempre que tengamos un tri block, definitivamente tenemos que atrapar. Aquí vamos a hacer corte. ¿Qué atrapamos? Vamos a cortar algunos errores, pero ahora no. Vamos a configurarlo para el significado. Aquí mismo, vamos a tomar en la propiedad de. Vaya, échale un vistazo Hay que separarlo para poner el coma. Nosotros en el, vamos a tener el usuario, y este va a ser mi Gmail. Por favor, haga bien en incluir su correo G al final. Sí. Voy a hacer aztec@gmail.com. Puedes golpearme con esta dirección de Gmail y asegúrate de reemplazarla por la tuya al final. C, también tenemos la propiedad pass, que es la contraseña, single. Para el pase, tenemos que generar la contraseña de google app. Déjame mostrarte rápidamente. Abre tu cuenta GML en la esquina superior derecha de la pantalla, si vas a ver el perfil Haz clic para abrir y luego administrar tu cuenta de Google. En la esquina superior izquierda de la pantalla, verás el menú. R W en el menú, haga clic en seguridad. La fastidia. Asegúrate de que tu verificación en dos pasos esté encendida. Como pueden ver, tengo el mío alt. Significa que mi verificación de dos pasos está encendida. Haga clic para abrir. Aquí es acento para la contraseña. Tengo que incluir mi contraseña, y luego aquí en el siguiente. Desplázate hacia abajo. Justo en la parte inferior, vas a ver las contraseñas ap. De recientes, ya tengo tres contraseñas a generadas. Para fines de enseñanza, tengo que hacerlo de nuevo desde cero. Ahora da click sobre esta flecha derecha. Dentro de este campo, vas a especificar el nombre de la app. En este caso, voy a hacer cartera de baba para trabajos docentes. Ahora, hagamos clic en Crear. Aquí está el generado una contraseña. Destacar, copiar hecho. Toma nota, no copie la contraseña de mi aplicación. Simplemente porque después de esta conferencia, definitivamente la eliminaría. Va a ser de ninguna utilidad. Genera al final y luego vuelve al código. Dentro del pase, pegarlo aquí. Asegúrate de eliminar esos espacios intermedios así, así, y así. Hermoso. Habiendo hecho esto, La siguiente línea es llamar a la función de enviar correo. Para eso, voy a hacer punto transportador, enviar correo. Así que solo estamos llamando al método send may que se encuentra dentro del nodo mailer. Entonces dentro de esta función, estamos tomando un objeto y dentro del objeto, vamos a tener una propiedad de lo que significa de donde viene el correo electrónico. En este caso, va a venir del campo imputado. Sí. Entonces voy a hacer el nombre del punto de datos, separarlo con la coma Esto va a mi cuenta de Gmail. Todo bien. Lo estoy enviando a mi cuenta de Gmail. Y por favor a tu final, tienes que reemplazar cada aparición de mi GMil con tu propio Gmail y cada aparición de mi contraseña de aplicación con tu propia contraseña A continuación, tenemos los temas. Voy a hacer indagación de cartera Duba. Separado con la coma. No sé por qué esto sigue obstruyendo la vista. El texto aquí mismo, usemos un ti como este. Aquí, vamos a usar una cadena vacía porque no quiero nada dentro. HTML. Vamos a usar el backtick. Dentro de la garrapata trasera, vamos a diseñar la plantilla. La plantilla de bandeja de entrada de correo electrónico. Ya tengo el diseño, así que solo tenemos que copiar y pegar. Es solo un CSS HTML que todos pueden entender fácilmente. Dentro del recurso código punto MD, tenemos que copiar desde la etiqueta HTM de apertura, que es de las líneas 8722, líneas 928 Nuevamente, puede comprobarlo. Copia. Ahora tenemos que pegarlo dentro del ba ti. Aquí tenemos el cuerpo, especificamos la familia de fuentes. Tenemos el contenedor emo. El ancho máximo es de 600 pix, tenemos el margen, el relleno, color de fondo es blanco, y luego la sombra de caja es el azul consistente que hemos estado usando. El radio del borde es de diez pixus, lo que hará que las esquinas sean un poco curvilíneas Aquí tenemos la etiqueta P, el tamaño de fuente, la altura de línea y todas las cosas que conoces. Tenemos la etiqueta UL y LI. La firma y el resto de ellos. Ahora tenemos una etiqueta UR, y por cierto, esta es una etiqueta P que dice una Duba por digital, que aparecerá en la parte superior del tema como encabezado Aquí con en la etiqueta UR. Tenemos la etiqueta LI, y también tenemos la fuerte, lo que hará que esta etiqueta aparezca más gruesa y más visible. Ahora tenemos el nombre del punto de datos, el correo electrónico del punto de datos, el número de teléfono, el asunto y el mensaje. Esto aparecerá de acuerdo a sus campos. Así que por favor no confundas nada aquí. Incluso las ortografías, compruébalo cuidadosamente y asegúrate de que esté bien hecho Una vez hecho esto, desplácese hasta la parte superior. Ahora vamos a asignarlo a una constante. Costo info e quo peso. Significa que va a devolver una promesa. Por lo tanto, tenemos que esperarlo. Todo genial ahora mismo. Desplázate hacia abajo. Aquí vamos a comprobar si el mensaje es exitoso o no. Si el mensaje es exitoso, Si los puntos de información ID del mensaje, vamos a regresar. A continuación, responde punto Jason. Ahora presta atención. Si la propiedad error se establece en force, lo que significa que si el mensaje es exitoso, entonces vamos a tener un mensaje de brindis. Mensaje enviado correctamente. Gracias por contactar a un bar Duba. Tan simple como eso. Como L et's copian rápidamente esto escrito. Destacar y policía. Ven aquí y pega. Si la propiedad error se establece en true, El mensaje de brindis será algo que salió mal. Uy mostró un error dentro de la e. chicos tenemos que derribarlo Dentro del enchufe de captura, también tenemos que atrapar el error. Contras log. Tenemos que registrar el error. Después resalta este mensaje de error y pegarlo aquí. Tan simple como eso. Ahora formatee rápidamente el código, y todo se ve limpio. Ahora ya terminamos de crear la API. En la próxima conferencia, seguiremos adelante para consumirla. Nos vemos en la próxima conferencia. 72. Barra de progreso: O volver a clase. En la conferencia anterior, creamos la API. En esta conferencia, seguiremos adelante para consumir la API, escribir dentro de la página de contacto. Abre rápidamente la página de contacto. Escribe dentro de las páginas, página de contacto para aplausos. Común B para cerrar al explorador. Desplázate hasta la parte superior. Primero, tenemos que importar Tenemos que importar contenedor de tostadas de react Ttify. También tenemos que importar el brindis. Esto es para el mensaje del brindis. Por último, vamos a importar react, Tf slash, dist slash, react Tii Una vez hecho esto, vamos a consumir rápidamente la API. Ahora vamos a tener una función. Limpie el registro de la consola. Vamos a tener la función handle submit. Costos, manejar enviar. Q, configurarlo a la función de flecha, dentro del parámetro de esta función, vamos a tomar un evento, y luego voy a hacer evento punto, prevenir de Fd. Rápidamente, vamos a establecer el sloding en true. Recordemos que tenemos la variable de estado pendiente en la conferencia anterior Vamos a dejar que los datos equa, lo pongamos en un objeto vacío y dentro, vamos a extender el estado Por supuesto, ya sabes lo que depara todo esto. Aquí está. el nombre e número de teléfono, mensaje del asunto. Aquí exactamente es donde vamos a golpear la API. Ahora, tomando la doble cotización y voy a hacer slash API Déjame mostrarte, estamos tratando de darle a este directorio EPI y al contacto del directorio Esta es la ruta que estamos tratando de golpear. Contacto Slash. Vamos a tener una coma aquí mismo y luego abrir y cerrar corchetes. Dentro, vamos a tomar en un método de propiedad. Por supuesto, el método va a ser posts, otra propiedad, encabezados, y aquí es donde implementaremos el tipo de contenido. Barra de aplicación, plan de barra diagonal de texto J. Estamos tratando de configurar el tipo de prueba que queremos obtener. Para el tipo de contenido tipo de contenido. Va a ser aplicación, barra, pecado. Estamos tratando de conseguir las cosas en formato Jin. Eso es lo más simple. Justo dentro del cuerpo. Cuerpo. Vamos a hacer cadena de puntos JS. Queremos convertir los datos en formato Jin en una cadena. Mira el cuerpo está mostrando una flecha, simplemente porque tenemos que separarlo con la coma por aquí Vamos a tener los diez. Esto va a estar en un sinc. Entonces la respuesta. Dentro, vamos a poner en vigor la carga. Equia de respuesta de costos, peso. Entonces voy a hacer descansos en. Si la respuesta no devuelve un error, vamos a borrar los campos y luego a un mensaje SX. De lo contrario, también tenemos que c la f y luego un mensaje de error. Entendido. Vamos a practicarlo ahora mismo Si no respon error, Por supuesto, tenemos que despejar el estado llamando a la función Cleste Después de eso, vamos a tener un mensaje de brindis. Esto va a ser mensaje de puntos de respuesta. Si hay un error que valga la pena el proceso. También tenemos que despejar el estado, y luego tenemos que brindar por el mensaje de error. Algo salió mal. Aquí, vamos a coger el error correctamente. Nosotros el bloque de captura. Vamos a tomar un error. Establecer carga. Vamos a establecer la carga para que caiga. También tenemos que despejar el estado. Copia exactamente este mensaje de brindis, resalta copia, ven aquí y pega. Habiendo hecho esto, ahora es el momento de echarle un vistazo. Aquí mismo, vamos a renderizar el contenedor de tostadas. Por lo que aparecerá en la parte superior derecha. Todo bien. Una vez hecho esto, la siguiente línea final es implementar el someto. Desplácese hacia abajo dentro del formulario. Aquí voy a hacer enviar, vamos a llamar al asa enviar. Tan simple como eso. Algo que quiero traer a tu conocimiento es eso, déjame mostrarte. Se puede ver que este es el campo de correo electrónico, y este es el campo telefónico. Ahora dentro del tema fd, tenemos que sustituir el tipo a texto. Habiendo hecho esto, todo va a funcionar bien. Dentro de la terminal, voy a hacer PM Run Dev. Inicie la aplicación al final de su cuenta. Volvamos al navegador. Desplácese hacia abajo. Aquí, voy a hacer Peter. Hagamos peter en g. Vendamos un número aleatorio. Déjame decirte Te stander API. Entonces lo que voy a hacer es resaltar todo dentro este lugar copiar y pegar. Pulsa en el botón enviado. Echa un vistazo. En la esquina superior derecha de la pantalla, dice mensaje enviado con éxito. Gracias por contactar a un bar Duba. Estoy muy contenta por esto. Volvamos al Gmail. Y aquí está. Haga clic para Abrir. ¿Puedes ver? Perfecto. Chicos. El nombre es Peter. Peter en gm.com, que es el correo electrónico, el número de teléfono, el asunto, y aquí está el mensaje Recuérdese la etiqueta P dentro de la API. Aquí está. Déjame mostrarte. Regresa a la ruta, y luego esta es la etiqueta P. Aquí estamos tratando de mostrar los datos. Tan simple como eso. Tenemos el nombre, el nombre. Esta es la etiqueta con el nombre. Y lo tenemos Peter, que es este tipo, nos rendimos entre la etiqueta LI. Tenemos el correo electrónico, que es esta etiqueta de correo electrónico, y luego tenemos los datos dot e mail, que renderizamos dentro del HTML interno de la etiqueta LI, y aquí está el correo electrónico. Y así sucesivamente y así sucesivamente. Amigos, todo está funcionando bien como se esperaba. 73. Implementación y lógica de llamada a la acción: Bien, así que terminamos con el diseño y todo está funcionando perfectamente bien como se esperaba. Súper fina, súper fantástica. Me encanta cada parte del diseño. Básicamente, lo que vamos a hacer en esta conferencia es implementar el core to action boarding. La idea es simple. Cuando el usuario se desplaza hacia abajo por la aplicación, el desplazamiento de la página y va a ser mayor que cero. Entonces si el desplazamiento de página es mayor que cero, tenemos que mostrar el auto a botón de acción a la derecha d de la pantalla. Que cuando el usuario haga clic en el botón c to action, la aplicación suavizará el desplazamiento hacia el componente home. Lo más simple que se dirige al código VS a menos que se implemente rápidamente. Código VS. Abra rápidamente el componente. Aquí está el directorio del auto a la acción. Lo creamos en las primeras conferencias. Si no tienes este directorio, todo lo que tienes que hacer es hacer clic derecho sobre componentes, nueva carpeta, y luego nombrarlo a acción, así como esto. Hermoso. Dentro del auto a la acción, clic derecho, nuevo archivo. Llamado a la acción S. Generar el componente funcional rápidamente. Vamos a importar el efecto de uso de gancho del estado U. Una vez hecho eso, volvamos rápidamente al componente header y luego copiemos la función handle scroll. Cabezal de cabecera gs. También tenemos que copiar la variable de estado, para el evento scroll. Tenemos que destacar de las líneas 11 a 24. Copiar, volver a la C a la acción, y luego pegarlo aquí mismo. Aquí mismo, estamos comprobando si la ventana punto página Y del conjunto es mayor que cero. Si window dot page i de set es mayor que cero, entonces vamos a actualizar a este tipo a true, y si este tipo es cierto, tenemos que hacer algo. Ahora vamos a hacer si s crow se establece en true, entonces vamos a devolver una interfaz de usuario. W entre paréntesis, vamos a tener una D, darle el nombre de la clase El color de fondo va a ser rojo 500. Esta es sólo mi especificación. Puedes hacer otra cosa al final. Queremos que se arregle. El fondo va a ser ocho. Desde la derecha, también queremos que sean ocho. Rápidamente, cerremos al explorador. El cos, vamos a señalarlo. El índice z para que pueda aparecer en la parte superior o contenido. Hagámoslo encajar. Cerrar la D. Lo que tenemos que hacer ahora mismo es copiar y pegar el SVG dentro de la D. Volver al recurso de código punto MD. Desplázate hasta la parte inferior. Creo que lo tenemos aquí. Aquí está. Copia el SVG. Resaltar copia. Gana la pasta D. S. No vamos a tener nada. Formatee rápidamente el código. Cuando guardes, veamos qué tenemos en el navegador. Todo bien. Tenemos que renderizarlo con la página, que es la página de pago y aquí la. Desplácese hacia abajo. Creo que deberíamos hacerlo justo después del testimonio. Aquí voy a hacer llamado a la acción. Asegúrate de importarlo en la parte superior, y aquí está. Guardar en el navegador. Ahora cuando desplace la aplicación, aquí la. Puedes ver en la esquina superior derecha de la pantalla, verás la llamada a la acción portando. Pero cuando haces clic en él, no pasa nada. Implementemos rápidamente el clic. Convocatoria a la acción. Atornillar a la parte superior, justo donde en hace D Vamos a tener el click, y cuando un usuario haga clic en este botin, queremos suavizar el desplazamiento al componente home Entonces voy a hacer ventana punto, scroll 200. Sabes que déjame mostrarte aquí. Cuando esto es mayor que cero, va a actualizar el estado inicial a true. Cuando el estado inicial es verdadero, este de por aquí aparecerá a la derecha d de la pantalla con el boting. Ahora la idea es ésta. Déjame mostrarte. Cuando desplace la aplicación, aparecerá este tipo de aquí. Ahora en el eje y, la aplicación es mayor que cero. Pero cuando hacemos clic en este botin, queremos igualar la aplicación en el eje y a cero Queremos devolverlo a cero. Eso es exactamente lo que estamos haciendo aquí mismo. Inicialmente, lo hicimos cuando este tipo es mayor que cero, este tipo se pondrá en verdad, y luego esto aparecerá. Ahora bien, cuando esto aparece, significa que es mayor que cero. Cuando hacemos clic en este DF, también queremos devolverlo a la posición normal. Piensa que así es lo lejos que puedo explicar esto. Entonces sí, cuando guardes la aplicación, echa un vistazo al navegador ahora, haz clic en el botin y bomba ¿Puedes ver? Entonces, en cualquier lugar en la aplicación, al hacer clic en este tope, siempre devolverá la aplicación a cero en el eje y Lo que significa que siempre volverás a casa. Creo que esta explicación es lo suficientemente clara, honestamente. L et me implemente la animación por ti. Vuelve aquí mismo en el Steve. Voy a hacer animate. Vamos a hacer encuadernados. Tan simple como eso. Ahora, échale un vistazo. El botón de llamada a la acción rebota alegremente en el extremo derecho de la pantalla cuando se desplaza por la aplicación A mí me gusta. Otra cosa que quiero hacer es hacer que el icono sea un poco pegatina. Para que podamos hacerlo por aquí. En vez de 1.5, podemos hacer cinco. Ahora aparece ampliamente, y se ve bien. Entonces esta es exactamente la intención. 74. 49 Barra de carga: Él así hemos implementado el formulario. También hemos probado la API. Todo está funcionando perfectamente bien como se esperaba. En esta breve conferencia, seguiremos adelante para hacer el formulario más interactivo para que cuando el usuario haga clic en el senboart en, aparezca la barra de carga y eso le dé una idea de que algo está sucediendo detrás de una escena El usuario tiene que esperar para ver el resultado. Suena bien, ¿verdad? Tenía en código Vs a menos que se implementara rápidamente. Desplázate hacia abajo hasta donde tenemos el formulario. Y aquí está. También tenemos que desplazarnos hacia abajo. Vamos a implementarlo aquí mismo encima de este botin. Vamos a implementar la barra de progreso en función de la condición, y la condición es unilateral. Después de rellenar el formulario, cuando el usuario haga clic en el atornillado de envío, aparecerá la barra de carga Se va a hacer en base a truc, y eso es bastante sencillo de implementar Ahora vamos a hacer. Yo cargando, y n, entonces vamos a mostrar la barra de carga. No vamos a tener una L. Así que vamos a tener una d, darle un nombre de clase. Nosotros en la d, el margen inferior es tres. El texto, vamos a alinearlo al centro. ML, no estoy hablando de ML en términos de Mercedes, sino margen izquierdo. W6h6. Vamos a darle la frontera. Y el borde de color del borde, azul 500. Hagámoslo 600. La frontera va a ser sólida. Y luego vamos a hacer animate, dash, spain. Cierra el dev. Bien, compruébalo en el navegador. Cargue, rellene rápidamente el formulario. Ahora, vamos a hacer clic en arena. Uy. Échale un vistazo. Puedes ver, y el mensaje es exitoso. No me gusta la forma de la barra de carga. Lo que vamos a hacer ahora mismo es redondeado. Vamos a tenerlo. Nuevamente, rellena el fd. Aquí en enviado, y echa un vistazo. Puedes ver, y aquí tenemos el mensaje post. Todo está funcionando perfectamente bien como se esperaba. Volvamos a casa. Échale un vistazo. Tommy. ¿No se ve bien? Por supuesto que sí. Todo bien. Una última cosa que tenemos que implementar es el llamado a la acción a tope Déjame mostrarte, cuando me desplace hacia abajo por la aplicación así, la llamada a la acción a tope aparecerá en el borde derecho de la pantalla Y cuando haga clic en la llamada a la acción a tope, va a suavizar el desplazamiento hasta el componente home Sea cual sea que estés, por ejemplo, si estás aquí abajo, va a aparecer en el borde derecho de la pantalla Al hacer clic, se suavizará desplazamiento hasta el componente de inicio. Bien, vamos a redondearlo implementando el abordaje core to action. 75. Correcciones de encabezado (indicación): Hola ahí. Bienvenidos de nuevo a clase. En esta breve conferencia, vamos a corregir el comportamiento del encabezado en el dispositivo móvil, y también cuando abres otra página. Déjame mostrarte rápidamente. En los dispositivos móviles, cuando nos desplazamos hacia arriba así, el encabezado sigue apareciendo en la parte superior. Eso no nos gusta porque ya tenemos la navegación por aquí, así que no hay necesidad de mostrar este espacio aquí. El menú ya está aquí, así que no hay necesidad de todo este espacio. Tenemos que quitársela. Ese es el comportamiento número uno a corregir. Cuando se extiende la aplicación, por ejemplo, vamos a ir a la sección ME Superior. Haga clic para abrir. Ahora al hacer clic en el menú, La altura del diagno dra ya no es un completo Y además, te darás cuenta de que el menú en realidad se ha caído un poco. Eso no es lo que queremos. ¿Bien? Lo primero que vamos a hacer aquí es corregir el comportamiento en el dispositivo móvil. Déjame mostrarte. ¿Puedes ver? Echa un vistazo. No se ve nada bien. Entonces vuelves al código VS, abres el componente. Encabezado encabezado punto s. Desplázate hacia abajo y déjame mostrarte. Aquí mismo, tenemos una condición e. Dijimos, me desplazé se establece en true, que es cuando la aplicación en eje y es mayor que cero Al desplazarse por la aplicación, vamos a asignarle un nombre de clase head, de lo contrario, no se le asignará ningún nombre de clase. Justo aquí, y también lo estamos estilizando de otra manera Dijimos que si el scrode se establece en true, el color de fondo será blanco, y entonces de lo contrario va a ser transparente aquí Además, si es cierto, le estamos dando esta sombra de caja. No creo que esto sea necesario aquí. Colocar un comentario al respecto. Guarde el proyecto. Compruébalo en el navegador. ¿Puedes ver? Todo está funcionando bien en el dispositivo móvil. Y ahora trae a colación otro problema. Cuando maximizas la aplicación en un dispositivo grande, desplázate hacia la parte superior, ¿ves? Ahora ya no tenemos ese suelo de empaque transparente. Y eso no es agradable porque hace que estos menús en realidad parezcan algo raros. ¿Puedes ver? No tiene sentido, así que tenemos que darle un terreno de paquete cuando desplazas la aplicación en un dispositivo grande? Vuelva rápidamente al código VS. Siguiendo esta condición, si scroll se establece en true, vamos a estilizar la cabeza en tierra Aquí, tan rápidamente vuelve al CSS global. Aquí está. Haga clic para abrir. Desplácese hacia abajo. Ahora tenemos que apuntar a un punto de quiebre particular. Abrir y cerrar paréntesis, guión medio w en un punto de ruptura de 12 80 píxeles Vamos a estilizar el header show, head show. Toma nota, el espectáculo está en carbohidratos, y por cierto, tenemos que usar el punto aquí Aquí, el color de fondo va a ser blanco. La sombra de caja. Vamos a copiar desde el encabezado. Va a tener exactamente la misma sombra de caja por aquí. Así que pegarlo dentro cuando guardes el proyecto en el navegador. Ahí están estos. ¿Ves que está funcionando? A mí me gusta. Esto es hermoso. Echa un vistazo. Ahora en dispositivo móvil, vas a tener un comportamiento muy bonito. ¿Puedes ver? Echa un vistazo. Todo bien. Tengo que reducir a este tipo a 75. Un hermoso. Bien, bien. La siguiente línea final es corregir este comportamiento por aquí. El diagno dibuja en una página diferente. ¿Puedes ver? Estas cosas no están bien, así que volvamos rápidamente al punto diagno draw Cerrar el CSS global, cerrar el encabezado, y luego tenemos que abrir el dibujo diagonal. En realidad es muy sencillo. Déjame mostrarte aquí. No sé dónde tenemos esta condición. Oh, chico. W en la cabecera. Tenemos una condición aquí. Dijimos, si el nombre de ruta es un quo, esto es por aquí, lo que significa que cuando el usuario haga clic en este nombre de ruta, lo asignamos desde arriba para que sea cero. Es lo asignamos de arriba para ser -98 píxeles, y es por eso que ves este comportamiento. Echa un vistazo. Este espacio en blanco por aquí en la parte inferior es -98 pix. Esa es la razón por la que el menú no está tapando la pantalla. Cuando eliminemos este valor, este valor negativo, solo hagamos que sea cero. Al guardar el proyecto, ahora está cubriendo la pantalla, pero tenemos otro espacio en la parte superior. No te preocupes, definitivamente tenemos que arreglarlo ahora mismo. Ahora, vuelve al código VS. Abre el dibujo diagonal Cs. Dentro del cuadro diagonal, vamos a hacer top. Hagámoslo cero, así como esto. Cuando guardas el proyecto. Ahora para el sorteo diagonal, todo está funcionando perfectamente bien como se esperaba. Pero para el menú, también es exactamente el mismo problema que acabamos de arreglar ahora mismo. Volver al código VS, dentro del dibujo diagonal punto S. Tenemos que buscar el lugar donde tenemos la condición. Creo que debería estar en la cima aquí. Sí. Está en la parte superior. Se puede ver cuando el nombre del camino es igual, este tipo. Ahora la parte superior aquí, la ponemos a cero, y de lo contrario, la configuramos a 100 píxeles. Sería súper increíble si lo pusiéramos a cero. Entonces, cuando el usuario haga clic en el menú, va a aparecer desde arriba cero. Y de lo contrario también va a aparecer desde cero superior. ¿Puedes ver? Es caminar. Perfecto. Así que volvamos a casa. Tenemos que probarlo. Bien. Vamos a darle click a este tipo. Echa un vistazo, está funcionando. Entonces está trabajando Pavel la multa. En un dispositivo móvil, también está funcionando en iPad Mini. Está funcionando. Esto es súper limpio, súper increíble. Bien, terminamos con la cabeza. Y ahora tenemos el comportamiento esperado. Bueno. En la próxima conferencia, vamos a corregir la tarjeta en el dispositivo móvil. Déjame mostrarte en dispositivo móvil. ¿Puedes ver? El texto en la parte inferior de la tarjeta desapareció. Entonces eso es exactamente lo que vamos a arreglar en la próxima conferencia. En realidad es una solución muy rápida. Nos vemos entonces. 76. Arreglo de deslizante en un dispositivo móvil: Bienvenidos de nuevo a clase. En esta conferencia, vamos a corregir el comportamiento de la tarjeta en dispositivos móviles. Después de eso, seguiremos adelante para corregir los teléfonos. Al ser un dispositivo móvil, ya no verás la etiqueta P. ¿Ves? Entonces no lo queremos así. Vuelve al código VS, abre los componentes, dentro de los componentes, abre la tarjeta deslizante, y luego la tarjeta deslizante a S. Desplázate hasta la parte superior R aquí, donde tenemos esta D. Hagamos que la altura sea de 280 píxeles. Al guardar, en el navegador, son los. Todo está funcionando perfectamente bien. Ahora hemos corregido el comportamiento en el dispositivo móvil. Bien. Volvamos rápidamente a donde tenemos la etiqueta P, que es el título de aquí. Lo que debemos hacer. mostrarte aquí se supone que tenemos que hacer fuente, pero pipográficamente, cometimos un error y hicimos frente. Entonces esta es fuente. Al guardar el navegador, ahora, aparece así. Puedes ver que no es demasiado bot. Este es el estándar. A mí me gusta. Nuevamente, sácalo del dispositivo móvil. Todo está bien alineado. Echa un vistazo. Todo bien. Entonces para el testimonio en dispositivo móvil, no quiero que aparezcan Por cierto, esa es mi opinión, así puedes hacerlo a tu final como quieras Entonces para mí, sólo me voy a quitar el testimonio en dispositivo móvil La forma en que podemos hacerlo es realmente muy sencilla. Bien, testimonio testimonial. Dentro de este df, voy a hacer calefacción, pero en dispositivo medio. Vamos a tener un bloque de visualización. Cuando guardes, compruébalo. Ahora lo tenemos en un dispositivo más grande. Pero en más por dispositivo, va a desaparecer. Todo genial aquí. Todo bien. Se ve bien. Vamos a comprobarlo en el iPad. Lo tenemos en el iPad. En el iPad A. La mitad de la cosa aparece muy bien. Uy. Creo que deberíamos Bien. Todo bien. Echa un vistazo. Esto está diseñado de manera profesional y experta para funcionar en todos los dispositivos Increíble. Esto ya está apagado. Asegúrate de leer y revisar las puntuaciones. Adiós, y cuidado holístico.