Reaccionar Curso De principiantes de Js Para Avanzar (Aprende Haciendo)

1. Todo sobre el curso de React Js: Echa un vistazo a este hermoso sitio web. Todo está codificado a mano con React js usando un framework CSS llamado tailwind. Está cuidadosamente y profesionalmente diseñado para funcionar en todos los dispositivos. ¿Y este hermoso clon de Netflix? No te guste esta increíble aplicación de tablero reacciona. Echa un vistazo a este sitio web profesional actualizado de la cartera React js. Y qué, sería súper increíble si supieras exactamente cómo diseñar y codificar cualquiera de este sitio web desde cero. Aquí es exactamente donde entré. Hola, Bienvenido y muchas gracias por tu interés en mi nuevo React js. Porque para principiantes, mi nombre es, aquí está x y voy a ser tu instructor en este curso. En este curso, partiremos de cero para aprender y entender los conceptos básicos. Reacciona. Al final, estarás bien equipado para construir aplicaciones web complejas usando React j. Vamos a comenzar instalando las herramientas necesarias que se necesitan para trabajar con React años. Y después de eso, seguiremos adelante para crear nuestra primera aplicación React. Entonces no tienes nada de qué preocuparte simplemente porque te tomaré de la mano y te guiaré a través los fundamentos que son puntos más finos de reunir a React js. Y al igual que nuestro conjunto de instancias de bits, Si no puedes explicarlo simplemente, no lo entiendes lo suficientemente bien. Mi objetivo en este curso es explicar, reaccionar simplemente para que todos lo entiendan lo suficientemente bien. Por lo tanto, vamos a tratar todos los conceptos básicos de React, incluyendo temas avanzados como quién se ve. En efecto, va a ser una serie completa. Y al final de este curso, estarás bien equipado para construir aplicaciones web complejas como el clon de Netflix, reaccionar la aplicación de tablero, aplicación de recetas de comida, y es el sitio web profesional de primera categoría de la cartera React js, que puedes usar para mostrar tus trabajos a tu cliente o tus empleadores, incluyendo a tus familiares y amigos. Sin más preámbulos, únete a mí y comencemos. 2. 2 ¿Qué es exactamente la reacción js?: ¿Qué es exactamente reaccionar y por qué lo usaríamos? React JS es una biblioteca JavaScript declarativa, eficiente y flexible para construir interfaces de usuario rápidas e interactivas. Quiero que subrayen estos puntos clave. Interfaces declarativas de usuario de la biblioteca JavaScript. Antes de proceder, quiero corregir una impresión. React js no es un framework. Es una biblioteca. Y el propósito para el que se creó esta biblioteca es construir interfaces de usuario interactivas, lo que simplemente implica renderizar la vista y asegurarse de que la vista esté sincronizada con el estado. Eso es lo único que abre. Y lo hace perfectamente bien. Por lo tanto, react, no tiene una solución incorporada para manejar llamadas HTTP, enrutamiento y otras funcionalidades. Sin embargo, podemos manejar todas estas funcionalidades instalando bibliotecas externas. Por ejemplo, si implementa un botón haga clic para redirigirle del Componente a al Componente B. Tiene que instalar una biblioteca externa llamada domo de enrutador React. Otro punto importante es que React js es declarativo. Y este paradigma simplemente implica que u tau reaccione lo que quiera escribiendo código. Y con la ayuda de la biblioteca Reactome, react actualizará y renderizará de manera eficiente solo el componente real cuando cambie su estado. Bien, Así que React tendrá abstracta de distancia. ¿Son damas? Y facilitarte la creación de IU interactiva y compleja? Y ahora la pregunta es, ¿por qué aprenderíamos a reaccionar? ¿Y cuál es exactamente la ventaja en la industria tecnológica? El punto número uno es la demanda del mercado. Cuando revises la tendencia de Google, te darás cuenta de que React js está dominando la industria tecnológica en términos de biblioteca o framework para construir interfaces de usuario. Si quieres ampliar tu oportunidad como desarrollador front-end, React js es una de las mejores herramientas que puedes agregar a tu caja de herramientas. El punto número dos es de alto rendimiento. React solo usa algunas técnicas inteligentes para minimizar la cantidad de costosas operaciones de domo que se requieren para actualizar la interfaz de usuario. Lo que a su vez, permite a los desarrolladores crear una aplicación web que pueda cambiar los datos a lo largo tiempo sin tener que volver a cargar la página. Y por favor tome nota de eso. Bien, por lo que permite a los desarrolladores crear una aplicación web que puede cambiar los datos a lo largo del tiempo sin tener que volver a cargar la página. Déjame darte rápidamente una metáfora. Por ejemplo, uno de tus amigos publicó su foto en Facebook. Entonces sigues adelante para abrir la imagen y luego dar la imagen como de inmediato. Le das la imagen por igual. El LikeCount se incrementará incluso sin tener que volver a cargar la página. Y esa es una gran ventaja de las sillas React O portones. Entonces es un poco reacciona a los cambios. Pero aunque no es totalmente reactiva en términos de comunicación con base de datos, sino con la ayuda de redox y otra herramienta de gestión estatal, puede tener arranques de aplicaciones con reacciona para ser completamente reactivo. El punto número tres es un equipo de ingeniería fuerte. React es creado y mantenido por Mehta. Por lo tanto, cuando una empresa como metta usa reacciona para crear y administrar su propio producto, puede estar seguro de que React js no va a morir pronto. Sin embargo, algunas de las aplicaciones más grandes del mundo estamos construidas con React. Aplicaciones como Netflix, PayPal, Facebook, Instagram, Dropbox y muchas más. Entonces en este curso, Netflix es una de las aplicaciones que vamos a construir desde cero hasta la etapa final de despliegue. Y claro, Lenin, cómo construir este proyecto será una gran ventaja para ti. Suena bien, ¿verdad? Hermoso. Otra ventaja es su gran comunidad y popularidad. React js tiene una comunidad muy grande. Entonces cada vez que te encuentras con problemas, tienes miles de artículos y biblioteca en Internet que te ayudarán. Así puedes configurarlo en Stack Overflow, escuela W3 y muchos más. Técnicamente, las botas de aplicaciones con React siguen el enfoque de arquitectura basada en componentes, que simplemente implica quejas, son uno de los componentes básicos de la aplicación React. Y ahora la pregunta es, ¿qué es un componente? ¿La preocupación? En la próxima conferencia, lo discutiremos en detalle. Esto es todo por ahora. Nos vemos en la próxima conferencia. Mantente enfocado y cuídate siempre. 3. 3 componentes: Componentes. El componente es una pieza aislada de interfaz de usuario que se compone para construir interfaces de usuario complejas. En otras palabras, representa una parte de la interfaz de usuario. Es sitio web tradicional se puede desglosar en el componente de encabezado, pero un contenedor de navegación lateral y los componentes de pie de página. ¿Correcto? Así que déjame hacerlo más limpio. Echa un vistazo a este sitio web de portafolio. Y seguro, este es otro gran proyecto que vamos a construir en este curso. Ahora, entendamos la estructura y cómo se veía. Este sitio web de cartera se divide en un segmento aislado más pequeño llamado componentes, que incluye el componente doméstico. Y nuevamente, el componente doméstico se descompone en partes más pequeñas, lo que incluye el componente de cabecera, los componentes de perfil y, por último, el alimento de perfil. Entonces tenemos el resto de los componentes como los componentes Acerca de mí, currículum, testimonio y el componente Contact Me. Así que todos estos componentes anidados están envueltos en una empresa raíz, nodos tecnológicos. El componente roots es el componente predeterminado de cada aplicación React. Por lo que la responsabilidad de los componentes raíz es servir como contenedor para cada otro componente que se creará al construir la aplicación React. De hecho, llamo a este componente la madre de todas las empresas. Y por cierto, esa es mi opinión personal. Entonces, cuando lo mires de cerca, te darás cuenta de que cada uno de estos componentes define solo una sección de la interfaz de usuario. Y toda esta sección se arma entonces para conformar toda la solicitud. Técnicamente, si queremos representar esta aplicación en un árbol de componentes, vamos a tener en la parte superior, el componente app, que son las empresas raíz, ¿verdad? Entonces a continuación, vamos a tener los componentes del hogar. Y anidado dentro de los componentes del hogar están el perfil de encabezado, el pie de perfil, nuestra empresa. Y luego tenemos el componente de pilar, curriculum vitae, testimonial, y contactarme componentes. Entonces, en resumen, el componente nos permite descomponer nuestra aplicación en segmentos encapsulados más pequeños, que luego se pueden componer para hacer más compleja la interfaz de usuario. Técnicas más simples. A la hora de grabar, aplicación como Facebook tiene más de 30 mil empresas. Por lo que el tamaño de la aplicación determina el número de componentes a utilizar. Una cosa buena de los componentes es que los componentes son reutilizables. Entonces, en React js, un componente reutilizable es una pieza de interfaz de usuario que se puede usar en varias partes de la aplicación para construir más de una instancia de UI. Entonces, en un término simple, significa que un componente se puede usar con diferentes propiedades para mostrar información diferente. ¿Correcto? Entonces esto es todo por ahora. En la próxima conferencia, procederemos con la configuración e instalación. Mantente enfocado, y cuídate siempre. 4. Instalación de 4 herramientas (Node js, vs code, google chrome): En esta conferencia, seguiremos adelante para instalar las herramientas necesarias que se necesitan para trabajar con React js, como Node.js, Visual Studio Code no es ningún navegador de su elección, sino preferiblemente Google Chrome. Así que rápidamente dirígete a Node js.org. Aquí está la dirección. Entonces aquí mismo, vamos a descargar e instalar la última versión estable. Ya lo tengo en mi máquina. Pero para enseñar pimientos, tengo que descargarla e instalarla junto a ti para mayor claridad. Entonces, cuando observes la pantalla, vas a ver dos versiones distintas. Así que por favor no descargues esta versión. ¿Sabes por qué? Es simplemente porque viene con complejidades adicionales que quizás no puedas entender. Entonces procedamos a descargar el LTS. Aquí, ¿se levanta de la pantalla? Sólo voy a hacer click para descargar. La razón por la que estamos instalando Node.js es para hacer uso del paquete MPM para instalar bibliotecas de terceros. Descarga exitosa. Abierto. Vamos a continuar. Usted puede decidir leer el contrato de licencia de software. Pero para mí, sólo voy a seguir nuestro acuerdo. Vamos a continuum. Y por último, tenemos que darle al botón Instalar. Aquí, ¿es? Por supuesto, si tu taza, esto definitivamente aparecería. Entonces solo tienes que introducir tu contraseña. Y si estás en Windows, va a ser una instalación sencilla. Por lo tanto, el software de instalación oculto, no la instalación de GS, está en curso. Y estos definitivamente te tomarían un tiempo. Entonces sólo tengo que adelantar la conferencia. Node.js instalado. Exitoso. Vamos a cerrarlo. Correcto, para que puedas decidir conservarlo o moverlo a la viga. Pero para mí, sólo me lo voy a quedar. Ahora abramos la terminal. Mantén presionada la tecla de comando en tu Mac y luego presiona la tecla de espacio. Entonces vamos a buscar terminal. Y aquí está. Por aquí, tenemos que comprobar la versión de nodo que acabamos de instalar. Nodo guión V, presiona la tecla Enter en tu teclado. Y esta es la versión de un cabello. Cerrar la terminología. La línea delgada nido es para instalar el editor de código. Y el editor de código que voy a utilizar en este 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 es mi favorito. Y te sugiero encarecidamente que te quedes con código VS para que no puedas seguirme conmigo en el futuro. Desplázate hacia abajo y hagámoslo descargar. Se levantó de la pantalla. Tenemos para Windows y en el borde derecho de la pantalla, lo tenemos para Mark. Entonces solo tengo que descargar para Mac. Y si estás en Windows, también tienes que descargar para Windows. La Descarga definitivamente tomaría un tiempo. Entonces sólo tengo que adelantar la conferencia. Descargar. Exitoso. Abierto. Aquí está. Sólo hay que lanzarlo. Y eso es todo. Se abre el Código VS. Entonces, a mi final, van a ver el proyecto reciente. No te preocupes, esto puede no parecer terminar simplemente porque no has abierto ningún proyecto con VS Code. Así que asegúrate de descargar Google Chrome. Y claro que ya deberías tenerlo. Esto es todo por ahora. Y en la próxima conferencia, seguiremos adelante para crear nuestra primera aplicación React. Nos vemos en la próxima conferencia. Mantente enfocado y cuídate siempre. 5. Instalación de 5 reactos: En esta conferencia, vamos a crear nuestra primera aplicación React. Así que rápidamente dirígete a React js.org. Aquí está la dirección. Haga clic en perros. Aquí está. Bien, entonces a la derecha de la pantalla vas a ver la pestaña. Así que justo en la parte superior, tienes que hacer clic en Crear una nueva aplicación React. Aquí está. Entonces, lo primero que vamos a hacer es generar básicamente una versión alternativa de una aplicación React, que comprende las bibliotecas, los archivos iniciales y las carpetas para ejecutar una sencilla aplicación React. Desplázate hacia abajo, déjame mostrarte. Para crear una nueva app de React. Tenemos que seguir estas instrucciones. El comando NP X se usaría para crear una nueva aplicación React sin tener que instalarla en nuestro sistema. No he entendido todos estos. Procedamos a crear una nueva aplicación React. Dirígete al escritorio. Y por aquí, vamos a crear un directorio raíz. Reaccionar causa. Haga clic con el botón derecho aquí en Nueva Carpeta. Reacciona, corre, causa, hoyo en la tecla Enter. Técnicas. Al nombrar tu proyecto, siempre usa un nombre descriptivo que indique el propósito del proyecto. Entonces quieres poder reconocerlo en el futuro. Suena bien, hermoso. Así que rápidamente abre el Código VS. Cerremos esta página de muestra. Ahora, lo siguiente en la línea es arrastrar y soltar la carpeta hacia abajo en el código VS. Nuevamente, cierre la página de muestra, maximice el Código VS. Vamos a abrir el terminal integrado VS Code. Y voy a hacer Control back tick. Puedes ver que el Ártico se encuentra en la esquina superior izquierda del teclado, justo debajo de la tecla de escape también. Si el atajo no te funciona, todo lo que tienes que hacer es ir a la cima y luego dominó nueva terminal. Das clic en él, se abre para ti. Justo en la terminal. Tenemos que crear una nueva app de React. Y p x Create React app. La aplicación React se instalará en un directorio llamado Klein's. Y también puedes decidir cambiar el nombre de este directorio. Pero te recomiendo encarecidamente que te quedes con el cliente de la convención simplemente porque React js tiene que ver con el front-end, lo que implica la parte UI de la aplicación. También puedes, limita el front end así. Entonces esto también es convencional. ¿Bien? Pero para mí, solo me voy a quedar con el calor convencional en la tecla Enter para proceder. La instalación de React está en curso. Y estos definitivamente tomarían un tiempo. Entonces sólo tengo que adelantar la conferencia. React js instalado correctamente. Para proceder, tenemos que entrar en el directorio del cliente donde instalamos el React js. Entonces solo voy a hacer C, D, golpe de Klein en la clave de impacto para proceder. El siguiente en la fila es poner en marcha el servidor dev front-end. Y yo voy a hacer npm, empieza a golpear la tecla Enter para que se encienda. Y por cierto, MPM simplemente significa Node Package Manager. En la pantalla está la página de React London. Y por defecto, se está ejecutando en el puerto localhost 3,000. Entonces ahora ya terminamos con la instalación. En la próxima conferencia, comenzaremos a dar a conocer el boilerplate de React. Esto es todo por ahora y nos vemos en la próxima conferencia. Mantente enfocado y cuídate siempre. 6. 6 placa de boiller: En esta conferencia, vamos a desvelar el React boilerplate Command B para abrir también el Explorer, tenemos que cerrar la terminal. Por lo que hay que hacer clic en el icono aquí en el lado derecho de la pantalla. Pero para mí, sólo voy a hacer el control de vuelta. Abra el directorio de clientes. ¿Aquí está? Procedamos con el archivo package.json. ¿Aquí está? El archivo package.json es donde se todas las dependencias que ubicarán todas las dependencias que conciernen al front-end. Por aquí. Hemos reaccionado las ayudas visuales y 0.2 instaladas. Justo abajo. Tenemos la cúpula del reactor. El domo de reactivos se utiliza para trabajar con el módulo de objeto de documento en el navegador. Aquí tenemos los scripts de React en la web vitals. Y aquí abajo tenemos los guiones. Y en la conferencia anterior, hicimos MPM start para poner en marcha el servidor dev front-end. Justo debajo tenemos lo visto. Cuando hacemos npm run build, va a vencer a los activos estáticos para las implementaciones. Entonces, cuando queremos desplegar una aplicación en el servidor, definitivamente haríamos uso de lo visto. Aquí. Tenemos la prueba. Bajo expulsión. Expulsar es necesario cuando quieres expulsar de Create, React, app y personalizar tu parque web. Y aquí tenemos la configuración para carriles ES, lo que ayuda a resaltar algunos posibles errores en tu código. Por último, tenemos el navegador compatible menos hecho con el archivo package.json. Procedamos con el registro de paquetes. Abierto. Los cubos de registro de paquete para la instalación constante de su puerta de dependencias. No tenemos ningún negocio por aquí, pero también tenemos que hablar de ello. Aquí tenemos el archivo Redmi dot md, que ayuda para la documentación. Por ejemplo, ha terminado de construir su aplicación. que puedas llegar al punto Redmi vacío encontrado para documentar los procesos involucrados. Así que develemos rápidamente las carpetas. Abre al público, ¿verdad? En el directorio público, tenemos el archivo index.html, el logo y el archivo JSON de punto manifiesto. El archivo JSON punto manifiesto se utiliza para Progressive Web App que por ahora no es relevante para el propósito de este curso. Entonces, como principiante, tenemos que enfocarnos en el índice de punto HTML. Y aquí está. Esto es todo por ahora y nos vemos en la próxima conferencia. Mantente enfocado en el cuidado holístico. 7. 7 Cómo funciona la reacción debajo de la capucha: En esta conferencia, vamos a entender el flujo de reacción como una aplicación de una sola página, lo que implica cómo funciona React JS bajo el capó. Abre rápidamente el Comando B index.html para que abra el explorador. Clientes públicos y nebulosos índice punto HTML. Sigamos adelante para abrir el index.js y la app. Proceder a la fuente, cual es el índice SRC dot js aquí ¿está? Por último, tenemos que abrir la app js comando B para cerrar el Explorer. Comencemos con el index.html. Desplázate hacia abajo. Quiero que tomes nota de este div con el id de root. Es sumamente importante. De hecho, este div con el id de ruta sirve como contenedor para la aplicación empire. Pasemos al index.js. El index.js es el punto de entrada de cada aplicación React. Para una mejor explicación. Antes de proceder, vamos a degradar la aplicación para reaccionar 17. Y luego ya terminé con la explicación. Vamos a traerlo de vuelta para reaccionar, comiendo justo en líneas para resaltar que el cliente lo borra. Por aquí. Destaca, límpialo. Y también, tenemos que destacar nuevamente el Comando X para colocar una coma aquí mismo y pegar. Entonces tenemos que quitarnos el punto y coma, los corchetes en este otro corchete de aquí. Entonces tenemos que quitar la raíz. Vamos a usar la cúpula del reactor para copiar, pegarlo aquí nido. Sólo tenemos que marcar el modo estricto. Hermoso. Ahora hemos logrado degradar la aplicación para reaccionar 17. Todo lo que quiero que hagas en esta conferencia es sentarte tranquilamente y prestar la máxima atención a mi explicación. Procedamos a entender cómo funciona React JS bajo el capó. En la parte superior, tenemos React importado del módulo React. Abajo. Tenemos React DOM de react al módulo. El React DOM ayuda a atar la cúpula de bajo nivel de HTML con la cúpula de alto nivel de React. Y también el domo React tiene un método llamado render. Y el método aleatorio toma en dos parámetros. El primer parámetro son los elementos, que en este caso un elemento de reacción a renderizar. El segundo parámetro es un JavaScript vainilla, que es document.getElementById. Y dice, Hey, voy a atar con el elemento DOM en el HTML. Precisamente. Un elemento DOM repentino con el id de raíces. Y este elemento DOM con el id de raíces se encuentra justo dentro del archivo HTML. Entonces, lo que reacciona puertas es inyectar el primer parámetro en el elemento DOM con el id de roots. En simplicidad, lo que sea que tengas aquí como primer parámetro se pasará al nodo DOM raíz. Se va a sentar justo dentro de este div. Y lo que es más importante, el index.html es la única página que se guarda en el navegador con el fin de mostrar lo que pase como primer parámetro en el nodo DOM roots. Bien, entonces este enfoque de renderizar componentes en una sola página y cambiar la cúpula exabytes el comportamiento de una sola página. Y de ahí, podemos decir que React js se utiliza para construir una aplicación de una sola página. Déjame desglosarlo de nuevo al índice j. Así que por aquí, voy a despegar el componente app como primer parámetro, limpiarlo. Entonces voy a tener una etiqueta en la cabeza, ¿verdad? Estamos en la etiqueta de la cabeza. Yo voy a hacer. Ahora, vamos a guardar la aplicación para ver qué pasa. Seguro. Boom. Se puede ver la cabeza una etiqueta se muestra en el navegador. Entonces cuando inspeccionamos el elemento. Haga clic derecho en Inspeccionar. Aquí mismo, vas a ver el archivo index.html, que es la única página que se guarda en el navegador. Entonces vamos, intentemos abrir el cuerpo. Cuando abres el cuerpo, vas a ver el div con el id de root. Así que vamos a abrir rápidamente esta D. ¿ Puedes ver la cabeza una etiqueta se inyecta justo dentro de este div con el id de root Es tan sencillo como eso. Entendido, hermoso. Vamos a tomarlo una vez más. Ella, ¿verdad? Entonces, lo que sea que tengas aquí como primer parámetro se inyectará justo, entre el div con el id de roots y el diff con la idea de roots se encuentra justo aquí en el index.html. Entonces el index.html es la única página que se guarda en el navegador con el fin de mostrar lo que sea que haya inyectado entre el dv. Y es por eso que cuando inspeccionas la consola, vas a ver la etiqueta head one entre el div con el id de una raíz. La mejor explicación, poniéndose bien. Hermoso. Así que de nuevo, vuelve a VS code index dot js. Así que vamos a limpiarlo y traer de vuelta el componente de la aplicación. Y por cierto, el componente app se importa en la parte superior. Y cuando ahorras en el navegador, boom. Y vas a ver la página de Londres. Vamos a desvelar la aplicación de nuevo a VS code up dot js. Y por aquí en los objetos tenemos un div con el nombre de clase de nuestra app. Y aquí tenemos un Herder. Tenemos la etiqueta IMG que describe este logotipo por aquí que está girando continuamente en la pantalla. Tenemos la etiqueta p. Aquí, ¿es así? Por último, tenemos la etiqueta a. Esto es justo aquí. Entonces aquí mismo tenemos el cuerpo, y aquí está el div con el id de root. Vamos a abrirla. Puedes ver cuando abres el div con el id de root, vas a ver otro div con el nombre de clase de up. ¿Aquí está? Vamos a abrir el div. Vamos a ver el encabezado con el nombre de clase de nuestro encabezado de aplicación. Y aquí está. Vamos a abrir el encabezado. Entonces tenemos el resto de los contenidos como la etiqueta IMG, que describe el logotipo. Tenemos la etiqueta p. ¿Puedes ver? Y por último, tenemos la etiqueta a es tan simple como eso. Vamos a traer de vuelta rápidamente la aplicación para reaccionar 18 index.js. Y luego sólo tenemos que deshacer. Ahora hemos actualizado de nuevo la app para reaccionar. 18 es exactamente el mismo dolor. El componente app está por aquí como primer parámetro, y va a pasar por esta línea de código al div con el id de root hairs it. Y siempre debes recordar que el div con el id de root es divertido aquí en el index.html. Y el index.html es la única página que se guarda en el navegador con el fin de mostrar cualquier contenido que inyecte que entre este div y eso es todo. Esto es todo por ahora. Nos vemos en la próxima conferencia. Mantente enfocado en cuidar siempre. 8. 8 jsx: En esta conferencia, vamos a entender los GSA. Así que rápidamente dirígete a la aplicación Js comando P para que haga aparecer este pequeño cuadro de búsqueda en la parte superior y luego configurado para AARP punto j está aquí, ¿verdad? Si el atajo no funciona para usted, todo lo que tiene que hacer es navegar hasta el Explorer y luego abrir la mezcla para abrir el SRC cliente. Y entonces aquí está. Cerró el explorador. Hermoso. Entonces justo en la pantalla tenemos una función que devuelve una pieza de UI. Entonces todo lo que ves por aquí se llama DSS. Dss simplemente significa JavaScript XML. Es una extensión de sintaxis de JavaScript que se utiliza para definir el significado y la estructura de su contenido web. Por lo que estos pueden parecer familiarizados con HTML, pero no es HTML. Lo que ves en la pantalla se llama GSA. Una de las diferencias entre HTML y Jesús es el atributo class name. En HTML, es una clase. Y aquí mismo en Jess's, es un nombre de clase simplemente porque class es una palabra clave reservada en JavaScript. Así que toda esta maqueta de aquí define la página de Londres, que comprende el logotipo, la etiqueta p y la etiqueta a. Déjame mostrarte rápidamente. Volver al código VS. Aquí está la etiqueta IMG que describe el logotipo. Estoy aquí, ¿está justo abajo? Tenemos la etiqueta p. Esto es justo aquí. Y por último, tenemos la etiqueta a aquí. ¿Vuelve al código VS? Entonces cuando trato de borrar todo, justo dentro de este div, vamos a experimentar un nuevo comportamiento. Voy a destacar desde la etiqueta de encabezado de apertura hasta la etiqueta de encabezado de cierre. Límpielo. Seguro. Este es el nuevo comportamiento. La pantalla está en blanco simplemente porque hemos eliminado las expresiones GSS que definen la página de Londres. Volver a VS Code. Y también tenemos que eliminar el div con el nombre de clase de nuestra app. Queremos hacer todo desde cero. Entonces aquí vamos a tener una etiqueta de cabeza y luego hola palabra, guardar en el navegador. Oye, ¿es así? ¿Qué tan hermoso es esto? Entonces la etiqueta head one de aquí describe el HelloWorld que ves aquí en el navegador. Es tan sencillo como eso. Vuelve al código VS y continuemos. Ahora, permítanme acercar aquí a Francia en algunos puntos clave importantes que hay que tener en cuenta al usar GSA. En todos estos puntos clave que quiero compartir con ustedes son sumamente importantes. Punto. número uno es que solo puedes tener un elemento de envoltura padre en Jesús. Entonces, cuando haces algo como esto, por ejemplo, vamos a tener un hashtag y yo lo voy a hacer. Mi nombre es Bárbara. Entonces esto definitivamente arrojaría un error. Cuando guardes y revises el navegador, vas a ver la queja. Dice, acabo de enviar a Jesús elementos deben estar envueltos en una etiqueta de cierre, lo que implica que no se puede tener Jess's fuera de otro GSA. Entonces, la única manera de hacer esto es envolviendo a Jesús entero en un elemento padre. Así que vamos a tener un dv por aquí. Entonces. Vamos a resaltar, mantén presionada la tecla Alt en tu teclado, toca la tecla de flecha hacia arriba para moverla. Y como se puede observar, el error se ha ido. Mantengamos el código limpio. Hermoso. Checkout, el navegador, todo está funcionando como se esperaba. A mí me encanta. Regresa. Entonces este dv de aquí sirve como el elemento padre. Por lo tanto, no puede tener elementos de gestos fuera de un elemento JSX padre. Entonces, cuando hago algo como esto, por ejemplo, cuando tengo un div por aquí, va a arrojar un error. Acabo de enviar Jesús elemento debe estar envuelto en una etiqueta que encierra. Entonces esto simplemente implica que todas las expresiones de gestos deben estar envueltas en un elemento padre. Entonces, por ahora, este div se usa como el elemento padre. Sólo tenemos que moverlo así es tan sencillo como eso. Punto número dos. atributo class en HTML se reemplaza con el nombre de clase en los GSA, simplemente porque class es una palabra clave reservada en JavaScript. Entonces intentemos darle a este div un nombre de clase. El nombre de la clase es contenedor. Guardar. En el navegador. Todo está funcionando perfectamente bien. Entonces, inspeccionemos rápidamente la consola. Comando I para abrir la consola. ¿Ves que todo está bien? Volver al código VS. Entonces intentemos reemplazar el nombre de la clase con class save en el navegador. Aquí está la advertencia en la clase de propiedad DOM válida. Y hizo una pregunta. ¿Quiso decir un nombre de clase? Sí. Nos referimos a un nombre de clase. Entonces tengo que regresar y luego ahorrar. Compruébalo. Vamos a refrescar la consola. Todo está funcionando perfectamente bien. Punto número tres. Hasta el momento en su Gmail se sustituye por HTML4 en Jesús. Y también para es una palabra clave reservada en JavaScript. Entonces cuando intentamos implementar algo como esto, así que aquí mismo, vamos a tener una etiqueta. Y vamos a especificar el atributo for, equa, nombre de usuario. Entonces esto funciona para HTML. Y cuando lo pruebes en GSA definitivamente obtendrás alguna advertencia en la consola. No válido no propiedad cuatro. Ven aquí. Tenemos que cambiar esto por dos, HTML4. Entonces estos resolverán el problema. Seguro en el navegador. Refresca la consola. Todo está bien. Punto número tres, en Jess's, el onclick en la parte superior, los atributos de índice se escribirán en claves de coma, lo que simplemente implica que mayúsculas la primera letra de cada palabra excepto la primera palabra. Entonces, supongamos que queremos implementar un botón aquí mismo. Entonces tenemos que especificar su propia camarilla. Si te das cuenta, te darás cuenta de que el onclick también está escrito en caso de karma. Lo pusimos a un compañero de paréntesis. Entonces así es como implementar el OnClick en GSA. Para recapitular, la clase en HTML se reemplaza con el nombre de clase en los GSA. Para HTML se sustituye por historia, y por lo tanto en el jazz es el manejador de eventos onclick en Jessie's está escrito en claves de coma y también se dice a un compañero de paréntesis. Entonces por aquí puedes llamar a cualquiera de las funciones que hayas definido en la aplicación. Sólo voy a borrar esto por ahora porque en el futuro vamos a tratar a manejador de eventos en de Dios, límpielo. Y por último, no se pueden tener aspiraciones de GSS fuera de los elementos padres. Así que todos los gestos, expresiones que vas a tener al crear tu UI van a estar envueltos en un elemento padre. Entonces tenemos que trasladarlo. Eso es. Esto es todo por ahora y nos vemos en la próxima conferencia. Mantente enfocado y cuídate siempre. 9. 10 tipos de componentes: Ahora ya terminamos con JSX. Pero es sumamente importante, ya sabes, estos, si quiero hacer un comentario sobre los gestos, expresiones, ¿cómo hago eso? Tech, e.g. Quiero hacer un comentario sobre la historia. ¿Cómo puedo lograrlo en los GSA? Entonces los atajos para hacer eso es seleccionar con precisión los elementos GSS sobre los que quieres colocar un comentario. Y en este caso, voy a hacer un comentario sobre la etiqueta H2. Entonces solo tienes que seleccionar. Déjame mostrarte otra vez. Seleccione y luego mantenga presionada la tecla de comando en su teclado, luego toque la diagonal hacia adelante. Y esto precisamente colocará un comentario sobre la expresión de Jess que seleccionaste. Si te das cuenta, te darás cuenta de que aquí todo está envuelto en corchetes de Ecoli, ¿de acuerdo? Y justo, dentro de los corchetes, podrás usar los comentarios de varias líneas. Entonces este es el comentario de apertura multilínea. Aquí está el comentario de cierre multilínea. Entonces en simple término, para poder usar comentarios en Jess's, tienes que envolverlo en un corchete. Entonces, cuando está envuelto en un corchete, React js lo va a tratar como expresiones JavaScript. Ahora puedes usar los comentarios de varias líneas en él. Entonces lo mismo aplicable si quieres eliminar el comentario, destaca. Mantenga presionada la tecla de comando, toque la diagonal hacia adelante. Es tan sencillo como eso. Incluso si quieres hacer un comentario sobre todo el Jesse's, es exactamente el mismo proceso. Supongamos que quiero hacer un comentario sobre todo, no lo haría el elemento padre. Entonces solo tengo que resaltar así, mantener presionada la tecla de comando arriba. El slash delantero es tan sencillo como eso. Y además, si quieres eliminar los comentarios, resalta, mantén presionada la tecla de comando, presiona la baraja hacia adelante. Entonces así es exactamente como los comentarios caminan en los GSA. Veo que disfrutaste de esta conferencia. Mantente enfocado en el cuidado holístico. 10. 9 comentarios en Jsx: Anteriormente, hablamos competente y prestamos que los componentes son reutilizables y también se puede anidar dentro de otro componente. Y ahora la pregunta es, ¿cómo se traduce la competencia en código en nuestra aplicación? La forma más sencilla de definir un componente es escribir una sencilla función JavaScript. En React G es, tenemos dos tipos de quejas. Empresas de componentes funcionales y clase. Componentes funcionales o función JavaScript. Pero acepta sondeos como argumento y luego devuelve un GSA válido, cuyo electro sense es la maqueta que describe la interfaz de usuario. En simplicidad, la sintaxis se verá así. Esta función es un componente funcional de reacción válido simplemente porque acepta un solo argumento de objeto de sonda con datos y devuelve elementos React. Entonces, si vamos a hacer lo mismo usando el componente class, la sintaxis se verá así. Desde el punto de vista React. Los dos componentes anteriores son equivalentes, pero solo ese componente de clase suele ser irregular. Clases es6 que tiñen una clase competente de la biblioteca React. Y debe tener un método aleatorio que devuelva los Jess, que a su vez describe la UI. No obstante, en este curso, nos vamos a quedar con la empresa funcional simplemente porque es extremadamente fácil razonar. Y también el componente de clase se va desvaneciendo gradualmente. La mayoría de las empresas ahora están reescribiendo la aplicación con componente funcional. Entonces definitivamente necesitamos seguir tendencias. Usando el componente funcional. No necesitamos preocuparnos estado porque con la ayuda de ganchos, no podremos usar el estado y otros futuros de React sin escribir una clase. Y los ganchos se introdujeron en 2018. Técnica de conferencia React. Al nombrar sus componentes, siempre use la convención de condimentos pasada, lo que implica que ponga en mayúscula la primera letra de cada palabra. Entonces, por ejemplo, los componentes para el hogar se escribirán así. Cuando lo nombras así, React js, lo trataremos como un parque domo. Hermoso. Pero el punto es que un código de componente suele estar escrito en un archivo JavaScript con una extensión dot js o una extensión dot CSS. Pero en este curso, nos quedaremos con la extensión dot js, por ejemplo, los componentes del hogar se escribirán así. Componentes para el hogar punto. Bien, así que esto es todo por ahora. Y en la próxima conferencia, seguiremos adelante para crear nuestros primeros componentes funcionales de reacción. Nos vemos en la próxima conferencia. 11. 11 Creación de nuestro primer componente funcional: Sigamos adelante para crear un componente funcional. Para continuar, tenemos que crear el directorio de componentes. Abre el cliente. Dentro del SRC. Tenemos que hacer clic derecho y luego nueva carpeta. Y voy a llamarlo componentes. Observe que he usado una palabra plural por aquí. Es simplemente porque vamos a tener tantos componentes, derecho, dentro del directorio de este componente. Por lo que debería ser una buena práctica nombrarlo con pleura road pizza en la clave enter. Entonces estamos en el directorio Componentes. Vamos a crear el archivo de componentes. Haga clic con el botón derecho en los componentes aquí en Nuevo archivo. Componente de demostración puntos frase de j. Quiero que tomen nota de lo convencionalmente utilizado para nombrar a este componente. Se llama la convención de nomenclatura Pascal. Es implica que pones en mayúscula la primera letra de cada palabra. Y también, quiero que tomes nota de la tensión. Aquí está el punto g es golpeado en la tecla Enter y menos proceder Comando B para cerrar el Explorer. Así que por aquí, vamos a crear el componente funcional desde cero. Entonces primero, tenemos que importar React desde el módulo React. Por ahora, esto es opcional. Bien, entonces en términos de código, los componentes son simplemente funciones de JavaScript. Y el nombre de este componente es componente demo. El componente funcional devuelve el marcado JSX, que describe la interfaz de usuario. Vamos a tener un div, ¿verdad? Dentro del div, vamos a tener una etiqueta de cabeza y voy a hacer hola mucho. Así más simple eso. Ahora hemos logrado crear nuestro componente funcional. El siguiente en la línea es tenerlo visualizado en el navegador. Para que este componente se muestre en la web. Lo primero que vamos a hacer es exportar el componente. Así que aquí voy a hacer la función de exportación predeterminada, componente de demostración. Entonces no he exportado la función. Tenemos que renderizar el componente demo directamente en la aplicación. G es Comando P para que aparezca el cuadro de búsqueda en la parte superior. Y vamos a buscar arriba. Aquí, ¿es así? Entonces aquí vamos a dar dos pasos. El primer paso es importar el componente demo. Entonces aquí, tenemos que importar componentes de demostración de comillas simples abiertas y cerradas, o también puedes usar comillas dobles. Entonces aquí tenemos que apuntar al directorio donde se encuentra el componente demo. Entonces para eso, voy a hacer componentes de barra de punto slash componente de demostración es tan simple como eso. No lo he hecho. Tenemos que renderizar este componente dentro de la declaración return. Entonces lo que voy a hacer ahora mismo es resaltar de las líneas nueve a 13, borrarlo. Así que tenemos que renderizar el componente demo justo entre este div con el nombre de clase de container, y luego cerrarlo. Si no tenemos hijos entre la etiqueta, será muy agradable usar la etiqueta de cierre automático. Entonces voy a resaltar la etiqueta de cierre, borrarla justo entre corchetes. Sólo voy a especificar el slash delantero. A esto se le llama la etiqueta de cierre automático. Seguro. En el navegador. Boom, todo está funcionando como se esperaba. Y aquí se ve la palabra hola. Hola otra vez. Ahora hemos creado con éxito los componentes funcionales y los hemos mostrado en la web. Enhorabuena. Esto es todo por ahora y nos vemos en la próxima conferencia. Mantente enfocado en el cuidado holístico. 12. 12 tipos de exportación: Ax6 proporciona dos formas diferentes exportar módulos desde un archivo, que incluyen la exportación predeterminada y la exportación con nombre. Cuando observes la pantalla, te darás cuenta de que exportamos ese componente como exportación por defecto. Bien, por lo que la exportación predeterminada nos permite exportar un módulo y especificar cualquier nombre a ese módulo cada vez que desee importarlo. Así que ya que exportamos componente demo como una exportación por defecto por aquí, vamos a ser capaces de nombrarlo cualquier cosa. Bien, así que tomemos, por ejemplo solo voy a borrar esto y luego voy a hacer componentes de rejilla. Y aquí también tenemos que hacer lo mismo. Tenemos que renderizar cuadrículas, componentes, checkouts. Todo está funcionando como se esperaba. Por lo que esto sólo puede funcionar cuando se hace uso de la exportación por defecto. Otro punto importante que hay que tener en cuenta es que solo hay una única exportación por defecto por módulo. Entonces por aquí, justo, en este componente, ya no podremos tener una exportación por defecto. Solo se puede tener una exportación predeterminada en un módulo. Suena bien, Hermosa. Ahora, la siguiente en la línea es la exportación con nombre. Las exportaciones con nombre son útiles para exportar varios valores. Y durante la importación, se podrá usar exactamente el mismo nombre para referirse al valor correspondiente. Déjame mostrarte rápidamente. Entonces por aquí, si queremos usar la exportación con nombre, todo lo que tenemos que hacer es resaltar el valor predeterminado por aquí y luego limpiarlo. Esto se ha transformado en exportación con nombre. Entonces, cuando guardas en el navegador, aquí está la queja. Se trata de decir que el componente de rejilla no existe. Vuelve a VS Code, dirígete a la app js. Y luego tenemos que usar exactamente el mismo nombre del módulo. Y por aquí, el nombre del módulo es componente demo head on to the app. Entonces, para trabajar con la exportación nombrada, tenemos que envolver exactamente el mismo nombre entre corchetes. Justo aquí. Vamos a tener un corchete. Entonces sólo voy a borrar esto. ¿Correcto? Dentro de los corchetes universitarios, tenemos que importar precisamente el módulo por su nombre, y el nombre es componente demo. Una vez hecho esto, también tenemos que importar el componente x hat por aquí, resaltarlo, limpiarlo, y luego voy a hacer componente demo. Compruébalo en el navegador. Todo está funcionando como se esperaba. A mí me encanta. Bien, así que para recapitular, al usar la exportación predeterminada, no podrás especificar ningún nombre para comer cuando quieras importarlo. Y sólo se puede tener un módulo de par de exportación predeterminado. En comparación con las exportaciones nombradas, donde podemos ser capaces de exportar varios valores de un módulo. Durante la importación, se podrá usar exactamente el mismo nombre para referirse al valor correspondiente. Esto suele ser en conferencia sincrónica. Mantente enfocado en el cuidado holístico. 13. 13 beneficios: Venimos ahora a hablar tal vez sin mencionar componentes. Anteriormente en las conferencias anteriores, aprendimos que el componente le permite dividir las interfaces de usuario en segmentos independientes y reutilizables. Entonces ahora mismo, quiero que piensen en cada segmento de forma aislada. La pregunta es, si los componentes están separados entre sí, ¿cómo pasamos la información del Componente a al Componente B? Aquí, como ese Lee es donde entran las sondas. Entonces, ¿qué es exactamente tal vez, quizás significa propiedades. Es un objeto que almacena el valor de un atributo de ataque. Y también quizás te permita pasar datos de un componente a otro. Precisamente de un componente padre a un componente hijo. Toma nota de estos puntos clave. Los apoyos son inmutables, lo que simplemente implica que el valor no se puede cambiar. No he entendido todos estos. Dirígete a VS Code y menos práctico ya que rápidamente. Deshagámonos rápidamente de la etiqueta de la cabeza. Procede al componente de la aplicación. Por aquí. Solo tengo que cambiar el nombre de la clase a app simplemente porque quiero hacer uso del archivo CSS predeterminado. Otro punto importante del que quiero que tomen nota es que las indicaciones se pueden pasar a un VGS competente son nuestros atributos. Por ejemplo, queremos pasar los datos del componente App al componente de demostración. Entonces para ello, primero, tenemos que especificar los atributos. Entonces, supongamos que queremos pasar un nombre sondeos. Entonces aquí se va a nombrar el atributo, asignarle un valor. Margarita. Entonces este es el atributo. Aquí, está el valor en. Todo esto pone juntos se conoce como sondas. Entonces, habiendo hecho esto, hemos logrado pasar sondas al componente demo. Pero cuando revisas el navegador, no pasa nada. Por lo que no se puede ver nada en el navegador. ¿Sabes por qué? Es simplemente porque también tenemos que recibir las sondas, ¿verdad? En la compañía demo volver al componente de demostración de código VS para recibir las sondas es muy sencillo. Todo lo que tenemos que hacer es tomar un sondeo como argumento, derecho, dentro de la función. Entonces voy a hacer sondas. Puedes decidir cambiar el nombre de las sondas por otra cosa. Pero te sugiero encarecidamente que te quedes con las sondas de conversión porque esa es la convención que se usa ampliamente entre los desarrolladores. Entonces, habiendo hecho esto, hemos logrado recibir las sondas aquí mismo en el componente demo. Déjame mostrarte. Entonces este props aquí mismo se almacenará dentro del objeto props. Déjame demostrártelo. Ven aquí. Entonces. Vamos a consola de apuntalamientos de registro. Entonces queremos ver el valor que se almacena dentro de este objeto props. Dirígete al navegador. Inspeccionemos rápidamente la consola. Comando alt I para abrir la consola. Cuando inspeccione la consola, verá un objeto. Así que vamos a abrir rápidamente el objeto. Justo aquí. Tenemos en el objeto y nombre de atributo con el valor Daisy. Entonces, técnicamente, hemos recibido las sondas hacia abajo en el componente demo. El nido y ln es acceder al valor de props y mostrarlo en el navegador. Entonces, si queremos acceder al valor de las sondas, solo tenemos que apuntar a los atributos y luego el valor se mostraría de frente al código VS. Y hagámoslo rápidamente. Entonces aquí mismo, voy a especificar una etiqueta de Adriano porque quiero hacerlo justo dentro de la etiqueta h1 de encabezado. Entonces, ordinariamente, voy a hacer props nombre de punto en el navegador. Vas a ver sondas que ese nombre simplemente porque ha sido tratado como pruebas. Entonces para que esto funcione, aquí, tenemos que tomar entre llaves y luego Resaltar Comando X para cortar pégalo aquí. Entonces, cuando lo envuelves en un corchete, el analizador JSON podrá reconocerlo como expresiones JavaScript en lugar de un sabor seguro en el navegador. Aquí tenemos a Daisy. Bien, así que agreguemos rápidamente al código VS y agreguemos más atributos para el componente de la aplicación Árbol de componentes. Y aquí tenemos los apoyos como nombre. Ahora vamos a tener otras sondas. Como país, asignarle el valor Brasil, seguro. En el navegador. Definitivamente verás que ven en la pantalla. Pero cuando inspecciones la consola, vas a ver el nombre Daisy y el país, Brasil. Así que vamos a tener rápidamente que se muestre en el navegador. Volver al componente de demostración de código VS. Y entonces aquí voy a hacer props punto país, seguro en el navegador. Y llegamos aquí, Brasil. Bien, así que hagamos que estos sean más significativos. Ven aquí, justo dentro de la etiqueta de cabecera h1. Voy a hacer soy props nombre punto de sondas, ese país. Seguro en el navegador. Soy Daisy de Brasil. Qué hermosamente estos. Bien, así que continuemos. De vuelta aquí. Ahora, hemos pasado satisfactoriamente sondeos de un componente padre hacia abajo a los componentes hijos. Entonces, para recapitular, cuando se trata de sondas, se involucran tres pasos. primer paso es enviar las sondas, cierto, Jess tiene atributos en el componente hijo. Y el paso dos es recibir las sondas, bien, llevando el parámetro de una formulación. Y después de eso, tenemos que mostrarnos en el navegador es tan sencillo como eso. Bien, entonces ahora quiero que recuerdes que los componentes son reutilizables. Dirígete rápidamente a los objetos y déjame enseñarte cómo reutilizar este componente. Reutilizar este componente solo voy a resaltar y luego duplicarlo tantas veces como me guste en el navegador. Ahora hemos reutilizado estos componentes pero sondas. Esta es una de las bellezas de React que me hace girar la cabeza. Entonces otro punto importante es que el componente reutilizable se puede reutilizar con diferentes propiedades para mostrar diferente información se mantiene en el código VS, y hagámoslo rápidamente. Vs Código. Aquí. Este atributo también se conoce como la propiedad. Quiero cambiar el valor del atributo. Aquí voy a hacer mi objetivo, y mi meta es de USA. Cambia el atributo aquí. Sahel. El Sahel es de la India. Y por último, vamos a tener una barra doble. Y lo hacen. Baba es de Reino Unido. En el navegador. ¿Puedes ver eso? Aquí tenemos DC de Brasil, Michael de USC, Sahel de India. Y por último, se barra de herramientas de Reino Unido. Esto ejemplifica cómo los componentes reutilizables funcionan con sondas. Esto es todo por ahora. Nos vemos en la próxima conferencia. Mantente enfocado en el cuidado holístico. 14. 14 Props.children: Puntales punto de drenaje jhu. Cuando miras de cerca, observarás que estamos usando etiqueta de cierre automático para todos estos componentes. ¿Por qué? Es simplemente porque los componentes no tienen hijos. En React, G es un componente con hijos, siempre se identifica por una etiqueta de apertura y una etiqueta de cierre. Y los niños deben colocarse entre las etiquetas de cierre. Entonces digamos que queremos agregar un par de información sobre este tipo, incluida su foto de perfil. Qué bien, entonces qué voy a hacer primero para limpiar la etiqueta de cierre automático y luego cerrarla con la etiqueta de cierre real. Y aquí está. Entonces esta es la etiqueta de cierre que se usa cuando el componente tiene hijos. Y en este caso, aquí, vamos a tener una etiqueta p. Y justo, dentro de esta etiqueta p, voy a hacer aquí, vamos a tener otra etiqueta P. Y voy a hacer por último, vamos a tener una foto de perfil. Con el fin de trabajar con imágenes. Primero, tenemos que importar esa imagen. Entonces hay varias formas de hacerlo. Voy a hacer el Comando B para abrir el Explorer justo dentro del SRC. Vamos a crear una nueva carpeta. Y esto serán captadas imágenes. Así que bien, dentro de esta carpeta de imágenes, vamos a importar la foto de perfil. Entonces lo que voy a hacer ahora mismo es maximizar el Código VS. Y aquí en mi escritorio vas a ver el directorio de materiales básicos. Haga clic para abrir. Y por cierto, este directorio está ahí mismo en la descripción. Y aquí está la foto de perfil. Así que solo voy a arrastrarlo directamente al directorio de imágenes. Puedes ver aquí está la foto de perfil. Maximice el comando B de código VS para cerrar el Explorer y luego también cerrar la imagen de perfil. Entonces justo en la parte superior, tenemos que importar picos de perfil de. Entonces tenemos que apuntar al SRC, justo dentro del SRC, tenemos el directorio images. Justo dentro de las imágenes, tenemos que apuntar precisamente a la foto de perfil. Fotos de perfil punto PNG. Creo que esto es correcto, ¿verdad? Así que vamos a comprobarlo rápidamente. Comando B. Aquí tenemos perfil cerdos punto PNG. Es sumamente correcto. Así que desplácese hacia abajo y aquí vamos a tener una etiqueta IMG como RC equa esta entrada por aquí. Entonces tenemos que llamar a esto Import Copy, ven aquí, pega, cierra la etiqueta IMG. Cuando guardes y revises en el navegador, vas a ver a los niños sondeando por qué. Es simplemente porque también tenemos que recuperar a los niños sondas rápidamente heroína al componente de demostración VS Code. Así que aquí mismo, vamos a recuperar las sondas infantiles. Así que vamos a hacerlo bien dentro de la etiqueta H2, abrir y cerrar el corchete. Entonces, para recuperar las sondas infantiles, todo lo que vamos a hacer son apoyos, puntos, niños en el navegador. Aquí están los niños. Esto es extremadamente impresionante. Para recapitular. Abra la aplicación js, y luego lo que sea que tenga aquí entre la etiqueta de apertura y cierre se conoce como las sondas infantiles. Y para recuperar las sondas infantiles, todo lo que tienes que hacer son sondas, puntos niños es tan simple como eso. Vuelve a los componentes de la app. Y ahora la pregunta es, qué tipo de contenido está permitido para sondeos dot children, el contenido pasa a un componente, true prompts que los hijos pueden incluir el siguiente número booleano nulo indefinido, cadena, elementos React incluyendo un RA. Esto es todo por ahora. Nos vemos en la próxima conferencia. Mantente enfocado y cuídate siempre. 15. 15 beneficios inmutabilidad: Otro punto importante que tenemos que tomar nota es que las sondas son inmutables. Y eso simplemente implica el valor de una sonda no se puede cambiar. Déjame probarlo rápidamente. Abra el componente demo. Y aquí vamos a intentar reasignar otro valor al atributo name. Entonces voy a hacer aquí. Apoyos, nombre de punto, equa, Angela en el navegador, la aplicación se rompe. Inspeccionemos rápidamente. La consola. No se puede asignar al nombre de propiedad de solo lectura. Por lo tanto, las sondas son de solo lectura, que simplemente implica que el valor de una sonda que se envía desde un componente padre no se puede alterar en el componente hijo. Y es por eso que cuando tratamos de reasignar otro valor al atributo name, la aplicación Briggs. Esto es todo por ahora. Nos vemos en la próxima conferencia. 16. 15 destructuración de beneficios: Prompts destructor en esta doctrina se introdujo en EXE es un futuro JavaScript que permite extraer múltiples piezas de datos de una matriz o un objeto y luego asignarlos a sus propias variables. Una de las bellezas de la estructuración es que mejora la legibilidad del código. Entonces, en componente funcional, hay dos formas de desestructurar sondas, pero vamos a ir con la mejor opción, que es desestructurar sondas justo dentro del perímetro de una función. Vamos a probarlo. ¿Correcto? Estamos en el parámetro de esta función, tenemos que borrarla. Y luego técnicamente corchete. Así que volvamos a la aplicación. Aquí tenemos el nombre del atributo y el atributo país, ¿verdad? Entonces vuelve, tenemos que apuntar precisamente a ese atributo nombre país más tranquilo, coma. Los niños no han realizado esta estructuración. Tenemos que acceder directamente a todos los atributos. Ya no necesitamos las sondas. Entonces voy a destacar todas las ocurrencias de puntales punto. Luego, mantenga presionada la tecla de comando, toque la letra D en su teclado. D para perro, así, y luego límpielo. Presiona la tecla Escape para desactivar la edición multicultural. Echemos un vistazo al navegador. ¿Ves que todo está funcionando como se esperaba? A mí me encanta. Entonces, para recapitular, si se quiere desestructurar las sondas, se tiene que hacer justo dentro del parámetro de una función. Y para hacer eso, primero, hay que tomar en un corchete rizado. Y justo, dentro del corchete, puede entonces apuntar con precisión al nombre del atributo. Entonces lo que debes saber es esto. Así que aquí, si cometes un error, por ejemplo hagamos algo desagradable por aquí. Vamos a Pell el país así. Al hacer esto, vamos a guardar en el navegador. Vas a obtener un resultado raro. Mira, el nombre se muestra en la pantalla, pero los países desaparecieron. Entonces, al realizar esta estructura en, existe la necesidad de apuntar con precisión al nombre del atributo. Así que sólo voy a deshacer, salvar a Bone. Todo está funcionando como se esperaba. A mí me encanta. Esto es todo por ahora. Nos vemos en la próxima conferencia. 17. 16 función como accesorios: Anteriormente en la conferencia anterior, aprendimos a pasar los apoyos de un componente padre a un componente hijo. Ahora la pregunta es, ¿es posible pasar props de componentes secundarios a un componente padre? Y la respuesta es no. No se pueden pasar sondeos directamente del componente secundario a un componente padre. Pero puede, sin embargo, pasar una referencia a una función como sondeos al componente hijo. Algunos rayados, ¿verdad? Vamos rápidamente a los ojos prácticos para que puedas entenderlo lo suficientemente bien. Abre el Explorador. ¿Verdad? Estamos en los componentes. Vamos a crear un nuevo componente. Parents dot g vuelve a estar justo dentro del componente. También tenemos que crear otro componente, child dot js. Hermoso, cierra el Explorer. Entonces tengo que cerrar también la demo y la app se burla. Entonces no lo haría el componente padre, voy a usar los atajos RFC para generar el componente funcional React js. Nuevamente, si el atajo no está funcionando al final, es porque no ha instalado el fragmento. Para instalar el fragmento, dirígete a las extensiones. Haga clic para abrir. Entonces aquí mismo, vamos a establecer para ESM. React slash, Redox slash GraphQL, react dash, fragmentos nativos. Estoy aquí. ¿Es click para abrir? Y a mi fin, ya lo tengo instalado. Y por eso se ve por aquí el voto desinstalado. Entonces al final, solo tienes que hacer clic en el botón Instalar y después lo tendrás instalado. Ciérrela, y también cerrar las extensiones. Ahora el atajo va a funcionar para ti. Qué bien, sigamos. Así que justo dentro del div, vamos a tener un hit one tag aquí voy a hacer esto es componente padre. Pasemos al niño. G está aquí, ¿es así? Tenemos que generar el componente funcional React js, RFC y hueso. Hermoso. Una vez hecho esto, definamos una función directamente en los componentes padre y luego pasemos esa función como sondeos al componente hijo, componente padre. Y hagámoslo aquí mismo. ¿Verdad? Entonces voy a hacer función saludar a los padres. Entonces bien, dentro de esta función, vamos a tener un diálogo. Justo aquí. Queremos mostrar los padres de bienvenida. Entonces el nido y la línea es pasar esta función como sondas hacia abajo en el componente hijo. Déjame mostrarte rápidamente. Entonces, en la parte superior, tenemos que importar componentes secundarios secundarios de barras de punto. Así que vamos a renderizar rápidamente los componentes secundarios. Niño más cerca con la etiqueta de cierre automático. Hermoso. No he hecho esto. Ahora podemos proceder a pasar la función como sondeos hacia abajo en el componente hijo. Para ello, tenemos que especificar el atributo, luego asignarle un valor. Pero esta vez el valor va a ser esta función, resaltar y luego Copiar, ven aquí, pega. Entonces estos son los atributos y aquí está el valor. Y a todos estos se les llama sondas. Entendido, hermoso. Entonces, cuando haces esto, hemos logrado pasar esta función como sondeos hacia abajo en el componente hijo. Entonces, habiendo hecho esto, tenemos que renderizar el componente padre justo en el comando de la app P para que aparezca el set box en la parte superior. Entonces voy a buscar por aquí arriba ¿verdad? Por lo que solo tenemos que hacer un comentario sobre todos estos aspectos destacados de estufas. Mantenga pulsada la tecla de comando, presione la baraja hacia adelante. Entonces, en la parte superior, tenemos que importar componentes principales de componente de slash dot slash parent. Justo abajo. Tenemos que acercar a los padres con la etiqueta de cierre automático. Guardar, volver a los componentes principales. Entonces ahora hemos logrado pasar apoyos a los componentes hijos. La línea occidental es recibirla directamente en el componente hijo. Niño. Y para ello, sólo tenemos que tomarle como argumento los apoyos. Y luego cuando la consola registra sondeos en el navegador o Comando I para abrir la consola. Y también tenemos que abrir el objeto props. Y aquí está la cuadrícula de atributos con los padres de cuadrícula de función a medida que su valor se remonta. Entonces el propósito de esta conferencia es llamar a la función que definimos en el componente padre aquí mismo, En el componente hijo. Entonces onClick de abortar en el componente hijo, queremos poder llamar a esta función, volver a contactar. Tengamos un botón aquí mismo. Y justo aquí. Tenemos que especificar el onclick. Onclick de la navegación. Queremos poder llamar a la función grid parent. Y claro, ya sabes que la función grid parent ya está almacenada en el objeto props. Entonces ahora voy a hacer utilería, puntos, cuadrículas. Entonces cuando haces esto, seguro en el navegador, Este es el componente padre. Aquí están los componentes hijos. Entonces, al hacer clic en este botón, queremos invocar la función que se definió en la camarilla del componente padre. ¿Puedes ver eso? ¿Trabajar en padres de familia? Para recapitular, definimos la función aquí en los componentes principales. Y después de eso, luego pasamos la función como sondeos hacia abajo a los componentes hijos. Así que cada vez que hacemos props dot grid, se va a recuperar el valor que se pasa a los atributos, que en este caso la función cuadrículas padres. Y finalmente, activamos el fondo especificando el onclick. Onclick de este botón. Esta función de aquí mismo se encenderá. Entonces, ¿cuál es exactamente el beneficio de hacer esto? Bien, entonces la ventaja de hacer esto es que ayuda a mejorar el rendimiento. Entonces, al construir una aplicación de recompensa, es probable que te encuentres con una situación en la que quieras hacer uso de una función en diferentes componentes. Bien, entonces déjame mostrarte rápidamente. Abre el Explorer y luego los derechos dentro del componente. Haga clic con el botón derecho en nuevo archivo. Y voy a llamar a estos usuarios punto js. Cierra el explorador, genera el componente funcional React js. ¿Verdad? Dentro de este componente, también queremos hacer uso de esta misma función. ¿Bien? Entonces lo que voy a hacer ahora mismo es importar primero los componentes del usuario del usuario de dot slash user. Tenemos que renderizarlo por aquí. Más cerca con la etiqueta de cierre automático. Voy a especificar los atributos cuadrículas y luego asignarle un valor, que en este caso la función grid parent head-on para reutilizar como componente. Entonces tenemos que recibir las sondas. Entonces ahora mismo, sólo tengo que volver con el niño y copiar este fondo. Estoy aquí. Pegar. Vamos a comprobarlo en el navegador. Aquí está el canotaje del componente hijo, y aquí está el canotaje del componente de usuario. Entonces cuando hacemos clic en el botón y el componente de usuario, ¿ puede ver que estamos llamando a la misma función que se define en el componente padre Y también cuando hacemos clic en el componente gráfico, funciona exactamente igual. Entonces, si estás construyendo una aplicación y quieres hacer uso de la misma función en diferentes componentes. La mejor opción es pasar esa función como sondas al componente que necesita semillas. Es tan sencillo como eso. Volvamos con el niño. Otro punto importante del que quiero que tomes nota es cómo pasar parámetro al llamar a una función definida en el componente padre desde el componente hijo. Por lo que esto es sumamente importante. De hecho, aparece mayormente como una pregunta de entrevista. Entonces ahora vamos a prestar atención a cómo hacer eso. Entonces, la forma más sencilla de pasar el parámetro del componente hijo al componente padre es implementando la sintaxis de la función arrow. Vamos a tener una función de flecha que venga aquí. Especificarlo así. Entonces con esto, podremos pasar cualquier número de parámetro a la función greet. Déjame mostrarte rápidamente. Entonces aquí mismo, no haría disfunción. Vamos a tomar en cadena aquí mismo. Voy a hacer soy niño. Queremos pasarlos como parámetro hacia abajo a la función padre de cuadrícula. Aquí. Tenemos que incorporarlo bien, dentro de la función padre decretada. Entonces aquí voy a hacer niño. Ahora vamos a usar la interpolación de cadenas. Cámbialo para embarcar tick, tock, tick. Vamos a tomar entre corchetes. Así que voy a hacer niño aquí mismo. Sólo voy a hacer un comentario sobre estos. Entonces habiendo hecho estos, echemos un vistazo al resultado en el navegador. Haga clic en el botón. Vas a ver, bienvenido padre, soy niño. Y quiero que recuerde que esto se pasó como parámetro desde el componente hijo hacia abajo a la función padre de cuadrícula. Y la función padre de cuadrícula se define en los componentes padre. Así que esto es exactamente cómo pasar parámetro al llamar a una función definida en los componentes padre desde el componente hijo. Y por favor, quiero que tomes nota de eso porque aparece mayormente como una pregunta de entrevista. Esto es todo por ahora. Veo que disfrutaste de esta conferencia. Mantente enfocado y cuídate siempre. 18. 17 Estado de reacción (useState): En esta conferencia, vamos a entender cómo funciona el estado en React js. Muy bien, así que supongamos que está construyendo una aplicación y desea mantener datos de componentes que cambian con el tiempo. Por ejemplo, al hacer clic en un botón, desea cambiar el título de su aplicación a otra cosa. Sí, entonces eso se hará con los ganchos de deuda de Estados Unidos. Menos práctico ya que rápidamente, así que rápidamente crear un nuevo componente llamado título Componente Comando B. Haga clic con el botón derecho en el directorio de componentes aquí en Nuevo Archivo. Tipo Componentes de herramienta punto g se genera. El componente funcional. Aquí tenemos una firma que comienza después de eso, abre la app js, y luego ejecutemos ese componente aquí mismo. Primero, tenemos que importarlo, importar componentes de título de componente de componente de título de barra diagonal. También tenemos que hacer un comentario sobre estos. Ven aquí y luego título competente, más cerca con la etiqueta de cierre automático, dirígete al componente de título. Por lo que el objetivo de esta conferencia es cambiar el título de nuestra aplicación cuando se hace clic en el botón. Entonces, para mantener un dato de competencia que cambie con el tiempo, tenemos que hacer uso del Estado estadounidense que mira. Entonces justo en la parte superior, solo tenemos que importarlo. Presiona una coma aquí mismo, abre y cierra los corchetes. Y voy a hacer usar fechas. El uso que hook es una función especial que toma el estado inicial como argumento y luego devuelve una matriz de dos entradas. Es una función, así que tenemos que invocarla. Voy a hacerlo así. Y el estado inicial va a ser una cadena vacía. También mencionamos que usamos ese gancho devuelve una matriz de dos entradas. Entonces aquí mismo, vamos a tener const, coma del título establece un agarre apretado, asignarlo así. Entonces esta variable de aquí se usa para mantener el estado inicial. Y entonces este tipo de aquí mismo es una función de configuración que se utiliza para actualizar el estado inicial. Y en este caso, vamos a tener el estado inicial para ser React JS. Porque para los principiantes no han hecho esto. Vamos a mostrar el estado inicial, a la derecha, dentro de la etiqueta H1. Golpeó a uno. Vamos a tener un corchete y luego sólo tenemos que mostrar el estado inicial, que es el título. Pégalo aquí, Guardar. Entonces esta variable de aquí mantendrá el estado inicial cuando guardes y revises el navegador. Aquí vamos. ¿Ves eso? ¿Hermoso? Por lo que la intención de esta conferencia es cambiar el título de esta aplicación cuando se hace clic en un botón. Aquí, vamos a especificar un paseo en bote. Aquí. Voy a hacer cambio de título. Hermoso. Aquí está. Entonces ahora mismo cuando haces clic en el botón, no pasa nada. Implementemos rápidamente el onclick. Onclick equa. Vamos a tomar una función de flecha por aquí. Y luego tenemos que invocar la función de configuración establece la herramienta tipo, que es este tipo de aquí. Y escribir dispuesto a establecer nuestra función, vamos a pasar en el nuevo estado. Entonces aquí sólo voy a hacer, vamos a guardar y echarle un vistazo en el navegador. Vamos a probarlo haciendo clic en el cambio título canotaje. ¿Ves ese onclick de la canotaje, el título cambió? Vamos a recargar. ¿Puedes ver las llamadas de React js para principiantes Y cuando hago clic en la parte inferior, vemos las llamadas definitivas de React Hooks. Esto es realmente hermoso. Y en realidad esto es solo un atisbo de EU hizo ganchos, No te preocupes. ¿En el futuro? Vamos a discutir los ganchos en detalle. Entonces, para recapitular, siempre que quieras manejar datos que cambian con el tiempo, definitivamente tienes que hacer uso del uso de ganchos Git. El uso que hook es una función que toma en el estado inicial como argumento y luego devuelve una matriz de dos entradas. Entonces, correcto, dentro de esta matriz, la primera variable aquí se usa para almacenar el estado inicial. Y entonces los segundos elementos de esta matriz es una función de configuración que se utiliza para actualizar el estado inicial. Entonces, cuando se haga clic en el botón, invocará esta función. Y entonces vamos a tener un nuevo estado que se utilice para actualizar el estado inicial. Esto es todo por ahora. Nos vemos en la próxima conferencia. 19. 18 manejo de eventos: A la hora de trabajar en proyectos de recompensa, definitivamente la aplicación va a tener interacciones con el usuario. Entonces, cuando el usuario interactúa con la aplicación, se activan eventos. Por ejemplo, clic del mouse, desplazamiento del mouse, pulsación de teclas y muchos más. Por lo que manejar eventos con elementos React es muy similar a manejar eventos con sus elementos HTML DOM. Pero la diferencia es que los eventos React se nombran usando el caso del karma. Entonces, por ejemplo vamos a tener onclick es el de on-click. Y también los manejadores de eventos de reacción están escritos dentro de las llaves. Bien, vamos a prácticamente abrir rápidamente los derechos del explorador dentro del directorio de competencias. Vamos a crear un nuevo componente. Y estos se llamarán manejador de eventos click punto g es RFC para generar el componente funcional. Aquí mismo, vamos a definir una función. Función. Controlador de clic. ¿Correcto? Dentro de la función, vamos a consola log Euclid, los derechos de voto de acción dentro del div. Vamos a tener la acción votando, bien. Entonces la intención aquí es enseñarte cómo funciona el evento onclick. Así que justo dentro de la navegación, vamos a especificar el onclick y luego configurarlo para equilibrar estos onclick de este botón. Queremos activar esta función. Entonces aquí sólo voy a hacer clic manejador. Entonces, habiendo hecho esto, tenemos que renderizar este componente justo en la app. Burisas. Destacados, haga un comentario sobre estos. Entonces vamos a tener el manejador de eventos click más cerca con la etiqueta de cierre automático. Guardar en el resultado del navegador y yo para abrir la consola. Y ahora cuando hacemos clic en este botón, el mensaje se registraría en la consola. Vamos a probarlo. ¿Ves que hiciste clic en el botón de acción? Cuando vuelvas a hacer clic, el mensaje se registraría dos veces. Entonces VAP es que Lee es cómo manejar los eventos en los años de React. Bien, así que volvamos al código y resaltemos el error común de que comenzamos a hablar con el manejo de eventos. Entonces a veces te puede gustar hacer algo como esto. Tomando los paréntesis. Entonces, cuando incluyes los paréntesis, se convierte en una llamada a función. Veamos el comportamiento cuando incluyas los paréntesis. Primero, tengo que recargar. ¿Puedes ver cuando observes la consola, te darás cuenta de que el mensaje está registrado en la consola Por lo tanto, no es necesario hacer clic en el botón para que se registre este mensaje. Puedes ver, aunque hagas clic en el botón, no pasa nada. ¿Por qué? Cuando se especifican los paréntesis, se convierte en una llamada a función. Entonces, cuando guardes la aplicación y vuelvas a la consola, la función será invocada inmediatamente. Golpeado. Bien, y ahora intentemos quitarse los paréntesis seguros en el navegador. Ahora tenemos que refrescarnos. ¿Puedes ver que no hay nada registrado en la consola? Y ahora hay que hacer clic en el botón Acción para poder registrar el mensaje en la consola. Punto a tomar nota al manejar eventos. No es necesario especificar los paréntesis. Cuando haces esto, se convierte en un manejador de eventos llamado no es una llamada a una función. Bien, entonces es sólo una función. Vamos a limpiarlo. Guardar en el navegador. Todo está funcionando como se esperaba. Para recapitular. El manejador de eventos en React js está escrito en claves karma, lo que implica que pones en mayúscula la primera letra de cada palabra excepto la primera palabra. Después de eso, hay que configurarlo en un corchete. Y justo, dentro de las llaves, sólo hay que pasar. La función es tan simple como esa. 20. 19 Renderización condicional: Al construir una aplicación del mundo real, definitivamente te encontrarás en una situación en la que tienes que renderizar Jess según la condición establecida. Entonces tenemos cuatro enfoques diferentes para resolver este problema. Incluya las declaraciones if else, la variable de elemento, operador condicional de curtiduría y los secretos cortos o burrito. Pero en esta conferencia, vamos a ir con lo más confiable y el enfoque que es ampliamente utilizado, que incluye curtiduría, operador condicional, y secreto corto o burrito. Vamos a ser práctico es abrir rápidamente el Explorer, ¿verdad? Dentro del componente. Vamos a crear un nuevo componente llamado user login dot js. Generar el componente funcional. Entonces justo dentro del div, vamos a tener un hit one park. Y voy a hacer proyecto de bienvenida a clase. Y también vamos a tener otra etiqueta H2. Y esto será, no se puede acceder a este proyecto. Entonces la idea es esta, si la condición es cierta, vamos a mostrar el hedge one tag y else. Si la condición es falsa, vamos a mostrar la etiqueta H2. Ejecutemos rápidamente ese componente en la aplicación, GAS destaca y coloquemos un comentario sobre él. La fastidia. Justo aquí. Vamos a importar usuario desde el inicio de sesión de usuario de la parte inferior del componente. Justo aquí. Sólo tenemos que atropellar murió por aquí. Más cerca con la etiqueta de cierre automático y se mudó de nuevo aquí. Vamos a declarar rápidamente una variable por aquí. Entonces voy a hacer es iniciar sesión, configurarlo en true. Entonces, procedamos con la implementación. Entonces primero, tenemos que envolver esto en un corchete Comando X para cortar, abrir las llaves, venir aquí y pegarlo. Así que ahora mismo voy a hacer es iniciar sesión. Es verdad. Vamos a mostrar la etiqueta H1 un else. Vamos a mostrar la etiqueta H2 en el navegador. Bienvenido al proyecto de ED Baba. Entonces, si cambiamos esto a falso, seguro, compruébalo. No se puede acceder a este proyecto. Entonces todo está funcionando perfectamente bien como se esperaba. ¿Bien? Entonces esto se usa para denotar cuando la condición es verdadera. Y esto se usa para denotar cuando la condición es falsa. Déjame acercarme un poco. Puedes ver esto se usa para denotar cuando la condición es verdadera. Esto se usa para denotar cuando la condición es falsa es tan simple como eso. Por lo que la siguiente línea es el tiro Enfoque secreto. Así que el enfoque de tiro Secreto se usa cuando se quiere renderizar o bien algo o nada. Menos práctico, ¿es rápido? Entonces primero, tenemos que hacer un comentario sobre este punto culminante. Mantenga oprimida la tecla de comando, tab, el slash delantero para hacer uso del enfoque de disparo Secreto. Así que supongamos que quieres mostrar hola, estoy conectado cuando la condición es verdadera. Y si la condición es falsa, no queremos exhibir un etano. ¿Bien? Entonces voy a tomar entre llaves. Así que aquí voy a hacer es iniciar sesión y por ciento, um, por ciento, entonces vamos a tener una etiqueta en la cabeza. Y justo dentro de esta etiqueta, voy a hacer hola. Estoy conectado en el navegador. No pasa nada. ¿Por qué? Es simplemente porque la condición es falsa. Entonces cuando lo cambias a true, seguro en el navegador, hola, estoy logueado. Por lo que el enfoque de tiro Secreto se utiliza para renderizarlo o algo o nada. Entonces déjame explicarte rápidamente cómo funciona. Por lo que el enfoque de tiro Secret primero evaluará el lado izquierdo para verificar si la condición es cierta. Y con base en la verdadera C, Se evaluará el lado derecho. Entonces si está logueado es falso, el lado derecho, nunca seremos evaluados. Reacciona, ignorará el lado derecho. Simplemente porque no queremos que nada se muestre en la pantalla si la condición es falsa. Por lo que no habría necesidad evaluar el lado derecho. 21. 21 Método de mapa (representación de lista): Cuando estás construyendo una aplicación React, uno de los problemas que siempre tendrás que resolver es cómo mostrar una lista de elementos en la pantalla. ejemplo, se le puede pedir que muestre la lista de productos que los empleados nos utilizan, y así sucesivamente y así sucesivamente. React G es la mejor manera de mostrar una lista de elementos en la pantalla es mediante el método de mapa. El método map le permite iterar sobre una matriz y modificar su elemento usando una función de devolución de llamada. La función de devolución de llamada se ejecutará entonces en cada uno de los elementos del iris. Técnicas. Mapa no es un futuro de React. En cambio, es una función estándar de JavaScript que podría llamarse en cualquier matriz. Vamos práctico, ¿ es rápido para que todos lo entiendan lo suficientemente bien? Adelante para crear un nuevo componente. Derecha, dentro del directorio del componente. Golpear en Nuevo Archivo. Esto se llamará empleado menos Delta G es genérico, el componente funcional. Cerremos el Explorer. Así que aquí mismo, estamos resplandor crear una variedad de empleados. Empleados equa, abrir y cerrar corchetes. Y justo dentro de la matriz, vamos a tener coma Daisy, vamos a tener coma Mike, Joe. Y por último, vamos a tener a angela. Observe que he usado una palabra plural por aquí. De hecho, es una buena práctica usar siempre una palabra plural al nombrar su matriz. Simplemente porque una matriz es una colección de elementos con un tipo de datos similar. Así que aquí tenemos varios elementos justo dentro de la matriz. Vamos a continuar. Ahora, el mayor reto de aquí es mostrar la lista de empleados en el navegador. Entonces, ordinariamente, también podemos hacer eso usando el índice de matriz. Entonces bien, dentro de este div, vamos a tener una etiqueta H2. Entonces derechos dentro de la etiqueta H2, vamos a especificar unos corchetes y luego escribir dentro de estos corchetes, no tuvimos que acceder a los elementos en la matriz. Y por supuesto para acceder al primer elemento de la matriz, tenemos que hacer uso del índice array de cero. Entonces ahora mismo voy a hacer empleados corchetes cero. Entonces esto va a recuperar el primer elemento de esta matriz, destaca, duplicarlo tres veces. Después para acceder a los segundos elementos, tenemos que usar la herramienta index one index. Y por último, para el índice del cuarto elemento tres Comando P. Pasemos a la app Js. Y por aquí tenemos que hacer que el empleado se vaya. Primero, tenemos que importar la lista de empleados de las hojas de empleados de barras de componentes. Y abajo, solo tenemos que renderizar un componente por aquí y luego cerrarlo con la etiqueta de cierre suave. Y debajo del navegador aquí. Ahora tenemos la lista de empleados que se muestra en el navegador. Bien, entonces este enfoque puede parecer sencillo y funcionar bien, sí, pero tiene un inconveniente muy grande. Déjame mostrarte rápidamente de nuevo al código VS y colocar menos, cuando observes la pantalla, te darás cuenta de que implica repetición de código. Entonces imaginemos que tenemos miles de empleados, cierto, dentro de esta colección. Entonces significa que tenemos que hacer estas mil veces. Vamos a tener algo como esto apuntando al índice correcto mil veces. Esto hará que nuestro código sea extremadamente ruidoso y que uno sea agradable en absoluto. Entonces, siguiendo las mejores prácticas, tenemos que usar el método map para realizar una titulación en la matriz. Bien, así que vamos a deshacer rápidamente. Hermoso. Ahora sólo tenemos que despejar la etiqueta H2. Empecemos de cero. El método map es un código JavaScript que necesita ser evaluado, ¿verdad? Entonces tenemos que envolverlo en un corchete. Entonces la línea Nestor es llamar al método map en la matriz. Por lo general, la sintaxis es array dot. Mapa. Entonces esto es exactamente las mismas etiquetas, pero en este caso, el nombre del área de aquí es empleados. Así que solo voy a hacer Employees dot map. El método map toma una función como argumento, y en este caso una función de flecha. Y también la función flecha toma en un argumento al que voy a llamar empleado. Este empleado de aquí representa cada elemento de la matriz. Ella nuevamente, puedes decidir cambiar el nombre de este argumento, pero te sugiero encarecidamente que uses un nombre descriptivo que sea relevante para la matriz sobre la que estás iterando. Es tan sencillo como eso. Bien, así que justo dentro del cuerpo de función es donde se llevaría a cabo la transformación. Entonces por cada empleado, vamos a devolver una cobertura para etiquetar con el empleado como un retorno HTML interno, vamos a tener una etiqueta H2. Y justo, dentro de la etiqueta H2, vamos a devolver al empleado como un HTML interno, que es este argumento de aquí que representa cada elemento en la matriz, es tan simple como eso. Guardar en el navegador. Aquí lo hermoso, este problema que acabamos de resolver es bastante sencillo. Escojamos un escenario más complejo. Volver al código VS. En una organización de recompensa. Los detalles de los empleados incluirán el nombre del empleado, identificación, número de teléfono, etc. Bien, así que hagamos rápidamente el objeto de un empleado para incluir todos estos detalles correctamente, entre corchetes. Yo solo voy a borrar los elementos, luego presionar la tecla Enter así. Vamos a tener un objeto justo dentro de la matriz. Así que justo dentro de este objeto, vamos a tener las propiedades y su valor. Y en este caso, los empleados detallan. Vamos a tener el nombre separado con una coma. Vamos a tener género, macho separado con coma. Vamos a tener país, Reino Unido. Y por último, vamos a tener edad. Por lo que puedes elegir tener tantos detalles como en su lugar como quieras. Pero para mí, sólo voy a parar aquí justo afuera del objeto. Vamos a separarlo con la coma. Ahora, vamos a destacar y luego duplicarlo tantas veces como quieras. Pero asegúrate de cambiar los detalles, que son los valores. Entonces aquí mismo, voy a cambiar estos. El día de hoy, lo siento. Esto va a ser femenino. Aquí. Vamos a hacer 19. Entonces solo hay que cambiar los detalles son para terminar. Y ya terminé con el mío. ¿Se ve hermosa? Entonces este enfoque ya no va a funcionar para este objeto simplemente porque ya no estamos tratando con cadenas. Así que aquí mismo, voy a borrar la etiqueta H2 y luego abrir y cerrar paréntesis, ¿verdad? Paréntesis. Vamos a tener una etiqueta H2 y escribir una etiqueta H2. Tenemos que mostrar al empleado como un HTML interno. Y en este caso, el empleado de aquí representa cada objeto de la lista. Y para acceder a las propiedades, tenemos que hacer uso del operador punto. Y aquí voy a hacer empleado nombre punto. Entonces cuando apuntemos a la propiedad, el valor se recuperará tan simple como eso resalta, duplicarlo cuatro veces. Y tenemos algún error por aquí. Dice gestos, las expresiones deben tener un elemento padre. Ven aquí. Vamos a tener un div padre. Así que justo dentro de este div destaca y luego mueve el código adentro. Aquí, vamos a tener empleado punto, género, empleado ese país. Y por último, empleado a la edad. Seguro en el navegador. Se puede ver que todo se muestra en el navegador funcionando perfectamente bien como se esperaba. Ahora tenemos la lista de empleados en la pantalla, pero hay otro enfoque para hacer esto solo en una línea. Y eso es con el uso de la interpolación de cadenas, que son literales de objeto, frente al código VS. Y hagámoslo rápidamente. Vamos a deshacernos de todo aquí. Límpialo ahora así que tenemos que limpiar un poco el código. Perfecto. Entonces aquí vamos a tener otra etiqueta H2, H2. Vamos a tener unas llaves rizadas, ¿verdad? Dentro de las llaves. Vamos a hacer uso de la interpolación de cadenas. Para hacer eso. Sólo tenemos que especificar el té de corteza. Y el batik se encuentra en la esquina superior izquierda del teclado, justo debajo de la tecla de escape. Aquí voy a hacer nombre. Vamos a tener señal de $1, abrir y cerrar llaves. Y voy a hacer empleado nombre punto. Ven aquí. Y aquí vamos a tener agenda, puntos de empleado, género. Vamos a tener país, empleado punto país. Y por último, vamos a tener a cada empleado dot age, salvarla. Bien, así que vamos a formatear rápidamente este código con más bonito. Formatee documentos con más guapa. Creo que el código se ve bonito en estos momentos. Para que puedas echarle un vistazo. Verás, déjame alejarme un poco. Y aquí está. Echa un vistazo. ¿Puedes ver bien? Vamos a sacarlo en el navegador. ¿Ves que todo está funcionando perfectamente bien como se esperaba? Me encanta. Bien, entonces después de mapear, otra cosa que hacen la mayoría de los desarrolladores es desestructurar el código. Déjame enseñarte rápidamente cómo hacer eso. Entonces destructor el código. Vamos a venir aquí y luego podremos tener una función regular de JavaScript o incluso un componente. Entonces ahora voy a hacer const, abrir y cerrar llaves. Queremos estructurar el nombre, la coma, el género, karma, el país y la edad, y luego asignarlo al empleado real. Lo más sencillo es que habiendo hecho esto, ya no necesitamos usar el operador punto para acceder a las propiedades. Ahora, podremos acceder directamente a él. Ven aquí, selecciona el punto empleado y luego mantén presionada la tecla de comando en tu teclado. Toque la letra D para seleccionar todas las ocurrencias de los empleados perro. Es tan sencillo como eso. Después límpielo. Guardar, presiona la tecla Escape para desactivar la edición multicultural. Y en el navegador. Tienen estas hermosas. Ahora el código se ve más conciso y más legible. A mí me encanta así. ¿Correcto? Por lo que seguir las mejores prácticas para la línea de anidamiento es refacturar el código. Al refactorizar el código, simplemente quiero decir que debemos mejorar la estructura de nuestro código para mejorar la legibilidad y mantenibilidad. Entonces, la forma de hacerlo es separar la lógica del componente de presentación. Hagámoslo rápido. Entonces no queremos que toda la lógica se escriba aquí. Entonces tenemos que ocultar la lógica en unos componentes separados. Abra el Explorer derecho, dentro del directorio competente, cree un nuevo archivo, y esto será capturado. Empleado punto j es genérico. Los componentes funcionales. Vuelva rápidamente al lugar M menos. Después tenemos que resaltar de las líneas 3032, líneas 38, comando X para cortar. Vuelva a empleado, seleccione de menos cuatro a seis, límpielo y luego Comando V para pegar. Entonces, habiendo hecho esto, tenemos que mapear a través de este componente, que es la compañía del empleado y volver a emplear una lista fastidiarla. Entonces justo en la parte superior, tenemos que importar empleado de empleado de empleado de punto slash. Justo abajo. Tenemos que renderizarlo aquí. Más cerca estaban las etiquetas de cierre automático. Entonces lo siguiente en línea es pasar los DTs como sondas. Así que bien, ¿no sería el empleado, vamos a tener nombre igual. Nombre del punto del empleado. Vamos a tener género, empleado punto género. Y tenemos country equa, empleado punto país. Y por último, tenemos h igual empleado punto h. ¿ Correcto? Así que sólo tenemos que formatear el código. Hermoso. Hemos logrado pasar todos estos detalles como sondas al componente empleado. Entonces, lo siguiente en la fila es recibir las sondas tan rápido y dirigirse al empleado. Primero, tenemos que recibirlo pasando sondas como parámetro, derecho, dentro de la función. Y después de eso, tenemos que asignarlo a sondas. Seguro. Sácalo en el navegador. ¿Correcto? Tenemos una pantalla en blanco. Bien, vuelve al código VS. Todo parece estar bien por aquí. Echemos un vistazo al menor daño del empleado, ¿verdad? Entonces tenemos que marcar el corchete, limpiarlo, Ven aquí, límpialo, y también, quitarte el punto y coma. Guardar en el navegador. Ellos son, estos. Todo parece estar funcionando perfectamente bien. Pero cuando inspeccionemos la consola, échale un vistazo. Vamos a ver este molesto error por aquí que dice, es hijo en una lista debería tener un utilete clave único. Hagámoslo en la próxima conferencia. Nos vemos entonces. 22. 22 apoyos clave únicos (apuntando): Bien, así que cuando abras la consola, vas a ver este molesto error por aquí. Y dice, cada niño en una lista debe tener un utilete clave único. Para resolver este problema, solo tenemos que volver al código y especificar la clave. Tan rápido heroína al código VS. La clave debe ser algo único. Dentro de lo mínimo, vamos a buscar una propiedad que pueda ser utilizada para identificar de manera única a cada empleado. Entonces cuando observes la lista, te darás cuenta de que el nombre es bastante único. Los empleados, justo dentro de esta lista se tienen diferentes nombres. Luego podemos proceder a usar el nombre como una sonda clave única. Ven aquí. Voy a hacer equa clave, empleado nombre punto. Cuando guardas y revisas el navegador, ¿ves que el error se ha ido? Hermoso. Todo parece estar funcionando perfectamente bien, pero no es recomendable usar el nombre como un utilete clave único. ¿Por qué? Es simplemente porque en una organización de recompensas, lo más probable es que tengas dos empleados diferentes. Ese B tiene el mismo nombre. Por lo tanto, no es apropiado usar el nombre como una sonda clave única. Déjame mostrarte rápidamente. Aquí tenemos una de dos barras. Entonces cambiemos a este tipo de aquí para que haga baba, porque en una organización de recompensas, lo más probable es que dos empleados sean del mismo nombre. Entonces cuando tengas algo como esto, va a haber un conflicto. Entonces, usar el nombre como sonda clave ya no va a funcionar. ¿Puedes ver que dice y contar a los niños con la misma clave Se Abeba. Las claves deben ser únicas para que el componente mantenga su identidad a través de D. Así que la mejor manera de resolver este problema es especificar una identificación de empleado simplemente porque en una organización del mundo real, los empleados deben tener una identificación única. Entonces cada empleado tiene una identificación diferente. Y esa es la mejor manera de especificar las sondas clave. Ven aquí. Justo en la lista. Sólo tenemos que especificar la identificación, hacerla una, resaltar, copiar, venir aquí, pegar Mickey para que sea tres. Y por último, hazlo para. Entonces, si tienes más empleados en la lista, también puedes especificar sus identificaciones para que coincidan con el número de empleados. Y aquí mismo, vamos a cambiarlo a ID en el navegador. Actualicemos rápidamente la consola. ¿Ves que todo está funcionando perfectamente bien como se esperaba? Otro punto importante del que quiero que tomen nota es que al especificar las sondas clave únicas, se debe hacer en el nivel superior. Vuelve al código VS y déjame mostrarte rápidamente. Si debo terminar todo en el div padre. Destacados. Mantenga oprimido la tecla Alt en su teclado, toque la tecla de flecha hacia arriba para moverlo. Y luego cuando guardemos y volvamos al navegador, la clave ya no va a funcionar. Se está cargando al menos debería tener un utilete clave único. Es simplemente porque las sondas clave deben hacerse en el nivel superior. Así que sólo voy a destacar y luego cortarlo. Ven aquí justo dentro del div. Pégalo. Bien, sólo tenemos que formatear rápidamente el código. Hermoso en el navegador. Vamos a refrescar la consola. Puedes ver que todo está funcionando perfectamente bien. Esto es todo por ahora. Veo que disfrutaste de esta conferencia. Mantente enfocado. Poco realista. 23. 23 css regular: En esta conferencia, vamos a aprender a diseñar los componentes de React. Hay varias opciones para aplicar estilo al componente React. Y esta opción incluye hojas de estilo CSS regulares, CSS en línea, módulo CSS, CSS en componente de inicio GIS y mucho más. En esta conferencia, vamos a seguir con los tres primeros, nuestro enfoque. Y ahora comenzaremos con la hoja de estilo CSS regular. Tan rápidamente dentro del directorio de competencias, vamos a crear un nuevo componente. Hojas de estilo irregular. Dot G es siempre me aseguro de usar un nombre descriptivo en limine mis estufas para que sea tan fácil para mí referirme a ellas en el futuro. Cierre el Explorer y luego genere rápidamente los componentes funcionales. Entonces bien, dentro del div, vamos a tener una etiqueta en la cabeza y vamos a darle una etiqueta. Voy a hacer aprendiendo a diseñar el componente React. Muy bien, así que vamos a estilizar rápidamente la etiqueta de la cabeza. Abra el Explorer y cree rápidamente un archivo CSS dentro del directorio del componente. Este archivo CSS sería capturado. Mis estilos puntean CSS. Entonces habiendo creado el archivo CSS, tenemos que estilizar la etiqueta Adriana. Ven aquí. Primero. Para hacer eso. Tenemos que especificar el nombre de la clase. Voy a llamarlo primaria. Ir al archivo CSS. Aquí, tenemos que estilizar el primario, que es el nombre del clúster que se utilizará para hacer referencia a la etiqueta H1. Entonces bien, dentro de las llaves, regular especificar el tamaño de fuente. Hagámoslo 50 pixeles, el color. Hagámoslo azul. Y por último, sólo tenemos que especificar la familia de fuentes. Y voy a hacer que sea moneda más alta, ¿verdad? Entonces lo siguiente en la fila es vincular el archivo CSS con la empresa. Y ven aquí justo en la parte superior. Vamos a importar dot slash, mis estilos dot css, los más simples que abren el componente app. Por lo que tenemos que hacer un comentario sobre estos. Rápidamente. Vamos a importar. Vamos a importar rápidamente hojas de estilo regulares hoja de estilo regular de barra diagonal de componentes. Justo aquí. Solo tenemos que renderizar las hojas de estilo regulares más cerca con la etiqueta de cierre automático. Guardar en el navegador, aquí está, ¿lo ves? ¿Hermoso? Bien, entonces otra cosa que también puedes hacer es aplicar condicionalmente una clase basada en sondas o estados de la compañía. Déjame mostrarte rápidamente. Entonces aquí mismo, vamos a tener un igual primario de prop. Pongámoslo a verdad. Una vez hecho esto, tenemos que recibir las sondas, justo en el componente de hoja de estilo regular. Y lo hacemos tomando sondas como derechos de parámetro dentro de la deformación. Ahora, lo que voy a hacer es esto. Vamos a tener una variable llamada className. Entonces si props dot primary es igual true, vamos a establecer el nombre de la clase en primary y errors. Vamos a establecer el nombre de la clase secundario, el punto más simple. Entonces básicamente el resultado de la operación en el lado derecho se almacenará en esta variable. Y ahora esta variable será utilizada como el nombre de la clase. Vendrá aquí. Destaca, límpialo, abre y cierra las llaves. Y luego tenemos que pasar en el nombre de la clase, que es este tipo de aquí. Entonces, si props dot primary es igual a true, vamos a tener el nombre de la clase para que sea primario, y luego vamos, vamos a estilizar el primario. Y de lo contrario, si es falso, vamos a tener el nombre de la clase para que sea secundario. Por lo que todos estos se almacenarán en una variable constante llamada class name. Y luego lo pasamos dinámicamente aquí abajo. Entonces esto de aquí va a mantener la primaria cuando la condición sea verdadera. Y va a sostener la secundaria cuando la condición sea falsa. Volver al archivo CSS. Tenemos que estilizar la secundaria. Sólo voy a copiar todo desde aquí, aquí abajo. Solo tenemos que cambiar el color a. Tomate. Aquí. Vamos a borrar la familia de fuentes. Seguro en el navegador y el hueso. ¿Ves que la condición es verdadera? Por lo tanto, vamos a tener la viga primaria estilizada. Entonces cuando vuelvas aquí y cambies la condición para forzar la seguridad en el navegador, vamos a tener algo como esto. ¿Ves lo flexible que puede ser? ¿Hermoso? Por lo que esto es extremadamente útil cuando se quiere estilizar como competente basado en la condición. Muy bien, así que el siguiente es el CSS en línea. Agárrate al código VS. Vamos a crear rápidamente un nuevo componente llamado inline dot js. Generemos el componente funcional. Para lograr los estilos inline, solo tenemos que crear un objeto y aplicarlo al atributo style. Déjame mostrarte rápidamente. Como de costumbre, vamos a tener una etiqueta de auriculares. ¿Correcto? Estamos en la etiqueta head, voy a hacer, bien, así que usando el CSS inline, tenemos que aplicar el atributo style. Entonces aquí voy a hacer equa de estilo. Supongamos encabezamiento. Bien, entonces ahora tenemos que crear un objeto de este rubro e implementar este pueblo justo dentro. Ven aquí. Voy a hacer const encabezando equa, ponerla en objeto vacío, ¿verdad? Dentro de este objeto, tenemos que implementar este tamaño de fuente tau. Entonces esto es en forma de par clave y valor, ¿verdad? Entonces voy a hacer 100 pixeles, más tranquilo. Karla, el músculo va a hacer tomate. Hermoso. Entonces quiero que notes que el tamaño de la fuente está en las teclas de coma. Entonces así es como funcionan los estilos inline GS. Así que no tuvimos que importar el inline de slash inline competente. Coloquemos un comentario sobre el CSS regular. Y luego tenemos que acercar el inline con una etiqueta de cierre automático. Guardar en el navegador. Y boom, bien, algo anda mal en alguna parte. Esta tau no se aplica a la cabeza una etiqueta. Muy bien, echemos un vistazo a la línea n. Uy, aquí hay un error tipográfico. Entonces solo tenemos que hacer la corrección necesaria eliminando la t. Así que esto se supone que es Style. Ahorra y boom. Todo está funcionando perfectamente bien como se esperaba. Una cosa que quiero discutir contigo es que si quieres estilizar a otra, dale una etiqueta, algo así. Hagamos que sea un enganche etiquetar esta vez. Voy a hacer darle un atributo de estilo. Ahora tenemos que crear otro objeto para la etiqueta H2. Entonces aquí vamos a hacer constantes. Vamos a llamarlo de cabeza a. Vamos a tener el tamaño de fuente para ser de 50 pixeles. Hagámoslo azul. Una vez hecho esto, tenemos que aplicar esta tau haciéndola referencia aquí. Pegar, guardar en el navegador y hueso. ¿Puedes ver? Entonces, al usar el estilo inline, tienes que crear un objeto diferente para los atributos que quieres estilizar. Esto es todo por ahora. Y en la próxima conferencia, vamos a discutir el módulo CSS. Nos vemos en la próxima conferencia. 24. 24 Módulos de Css: Módulos css, nuestros archivos CSS en los que nuestros nombres de clase y animaciones tienen un alcance local por defecto, lo que simplemente implica que no se puede usar fuera de su dominio. Y esto es muy útil para evitar conflictos en CSS. Entonces, para explicarlo lo suficientemente bien, tenemos que hacer uso de las hojas de estilo CSS regulares y compararlo con el módulo CSS. Así que rápidamente abre el Explorer y luego justo cuando el SRC, tenemos que crear la hoja de estilo CSS regular hasta estilos punto css. Y también justo cuando el SRC, ahora tenemos que crear el módulo CSS. Y lo voy a llamar mi app styles dot, sacado del módulo de convención punto CSS. Esto es al menos cómo nombrar tu módulo CSS. Así que volvamos a la hoja de estilo regular, ¿verdad? En las hojas de estilo regulares, vamos a tener una clase de error. Y voy a estilizarlo especificando que el color sea rojo. Simple y corto. Derechos dentro del módulo CSS, vamos a tener clase de éxito. Y claro, el color va a ser verde. Es tan sencillo como eso. Pasemos a la aplicación. Burisas. Los derechos estaban en el app.js. Tenemos que importar la hoja de estilo CSS regular, app styles dot css. La línea Western es para importar el módulo CSS, y la entrada es bastante única. Entonces tenemos que especificar un nombre. En este caso, voy a llamarlo torres de módulos. Así que tenemos que importarlo desde dot slash my app styles dot module dot CSS. Entonces así es exactamente como importar el módulo CSS. Hagamos uso de los archivos CSS. Entonces primero, pongamos un comentario sobre los componentes en línea. Entonces justo debajo, vamos a tener una etiqueta H2 cuyo nombre de clase es error. Así que este nombre de clase de aquí es este tipo de aquí, ¿verdad? Y luego voy a hacer error. Cuando guardas en el navegador. Vas a tener aquí error. Así que vamos a implementar rápidamente estos para el módulo CSS. Voy a tener un aquí para etiquetar. Vamos a tener el éxito y luego especificar el nombre de la clase. Entonces el nombre de la clase va a ser módulo toallas calcetines x. así que este estilo de módulo de aquí es el nombre que usamos para hacer referencia al estilo del módulo CSS. Entonces ahora vamos a decir tau module dots la clase de éxito misma que se definió. Por aquí. Es tan sencillo como eso. Vamos a guardar rápidamente y ver qué código puedes ver? Hermoso. Y ahora aquí es exactamente donde comienza la diversión. Volver a VS al cuadrado. Déjame mostrarte la cabeza al app.js y luego vamos a descomentar el G en línea es seguro en el navegador. Estos son los estilos que vienen de las J's en línea. Sí. Ahora déjame mostrarte algo. Esta etiqueta h2 es para las hojas de estilo CSS normales. Entonces si copio esto y lo pego por aquí, justo en el inline, podemos hacerlo así. Y por aquí voy a flecha desde inline para que podamos diferenciarlo. ¿También puedes ver el error en línea? Tenemos el error del componente app. Quiero que pongas atención por aquí. Vuelve al app.js. Y luego cuando copio el módulo CSS y lo pego justo dentro del CSS inline, así. Cuando guardas en el navegador, vamos a encontrar un error. Y dice, módulos toalla no está definida. Esto es exactamente de lo que estamos hablando. Módulos css, nuestros archivos CSS, que todos los clústeres, nombres y animaciones tienen un alcance local por defecto. Entonces, cuando tienes un módulo CSS definido aquí, no puedes usarlo en un componente diferente porque tiene un alcance local. Entendido, hermoso. Entonces cuando nos lo quitamos inseguro, ¿ves que todo está funcionando perfectamente bien? Y la ventaja del módulo CSS es que permite el alcance de CSS creando automáticamente un nombre de clase único del formato. En segundo lugar, los módulos CSS te permiten usar el mismo nombre de clase CSS en diferentes archivos sin tener que preocuparte por los choques de nombres. ¿Qué es exactamente un gran futuro? Esto es todo por ahora y espero que entiendas cuáles son los módulos CSS. Cuídate. 25. 25 Inscripción de formulario (Componente controlado): En esta conferencia, vamos a discutir cómo trabajar con forma en React JS. Aprenderemos a capturar datos del elemento de formulario y luego hacer que los datos de captura estén disponibles para su envío. En HTML regular. Forma, los elementos son todos responsables por su cuenta de manejar la entrada del usuario y actualizar los valores respectivamente. Retratado aquí, queremos reaccionar ante una herramienta de mano y controlar el elemento de forma. Entonces tales elementos de forma cuyo valor es controlado y 100 por React se llama componente interpretado. Vamos a proceder rápidamente mediante la creación un nuevo componente en donde el directorio competente. Vamos a crear un componente a partir de impute dot js. Generar el componente funcional. Así que sólo voy a borrar esto. Vamos a tener una firma dentro de la forma. Vamos a tener un div, ¿verdad? Estamos en la def, vamos a tener etiqueta. Entonces aquí voy a hacer nombre. Y aquí voy a tener la prueba de tipo de entrada más cerca con la etiqueta de cierre automático. Entonces, ordinariamente, esto es solo una imputa básica de HTML. Pero en React, tenemos que convertir esta entrada en una imputa controlada. Entonces para ello, tenemos que seguir tres pasos. primer paso es importar el gancho usted y declarar la variable de estado que controlará los periodos de conformación. Así que vamos a importar rápidamente EU sí gancho. Y aquí tenemos que declarar las variables de estado a utilizar. Y en este caso, vamos a tener costos, ¿verdad? Estamos en la matriz, vamos a tener nombre coma, la función de configuración que se utilizará para actualizar el nombre. Entonces el estado inicial va a ser una cadena vacía. Hola, bien, así que habiendo hecho esto, vamos a mostrar el valor dinámicamente. Aquí. Voy a hacer valor. Vaya, échale un vistazo. Se supone que este es el nombre. Y aquí vamos a hacer nombre. Vamos a abrir la mezcla de componentes de la aplicación para hacer un comentario sobre todas estas cosas por aquí. En la parte superior. Tenemos que importar de imputes, de componentes slash de impute. Justo abajo. Tenemos que correr eso si se forman compañeros seguros en el navegador y boom, empujarlo un poco así. Bonito. Entonces esto es lo que tenemos navegador. Pero por ahora, cuando escribes en el campo de texto, no pasa nada. ¿Por qué? Es simplemente porque tenemos que especificar el onchange para actualizar el valor cuando el estado cambia justo en el código VS. Sobre el cambio un núcleo. Vamos a tomar una función estrecha por aquí. Tenemos que llamar a la función setName para actualizar el estado inicial. Entonces el onchange dará acceso a los eventos y con la ayuda del objeto event, vamos a agarrar el nuevo valor que el usuario ingresaría. Para agarrar el nuevo valor, vamos a hacer eventos, puntos, objetivos, valor de punto, que es el valor actual que estás escribiendo en los detalles vistos. Este valor de aquí va a actualizar la etapa inicial. Seguro, y vamos a probarlo. Duro ahora mismo, mi ratón está justo en el campo de entrada, y lo voy a hacer Abeba. Todo está funcionando perfectamente bien como se esperaba. Entonces, para entender cómo funciona el onchange, tenemos que consolar registrar el nombre. Así que aquí mismo voy a hacer console.log nombre seguro en el navegador. Entonces, inspeccionemos rápidamente la consola. Ahora mismo. No tenemos ningún derecho de dolor, en el campo de entrada. Y además, la consola está vacía. Entonces se supone que tenemos una cadena vacía. Entonces cuando tecleo algo como esto, puedes ver ahora tenemos E en la consola y tenemos E por aquí, justo en el campo de entrada. Puede ver que esto es exactamente como se activa el evento onchange para llamar a la función de configuración para actualizar la etapa inicial. Entonces esta es la función de configuración que se utilizará para actualizar el estado inicial. Y con la ayuda de estos eventos, podremos agarrar lo que sea que el usuario esté escribiendo en el campo de entrada y luego usarlo para actualizar el estado inicial. Lo más sencillo que hablo demasiado. Entonces, continuemos. Declaremos rápidamente más variables de estado, resaltes y dupliquemos dos veces. Cambiemos estos para abordarlos. Tenemos que establecer la dirección. Y esto va a estar sesgado. Dice q. El estado inicial de este campo va a tener React js así, bien, porque queremos que sea más como un cuadro de selección. Entonces ven aquí. Destaca de longitudes 102 líneas 18. Duplicarlo dos veces. Bien, entonces para esto, vamos a cambiar esto a dirección. El valor va a ser dirección, que es el estado inicial. Entonces tenemos que llamar a dirección. Ven aquí. Entonces por aquí, las cosas van a cambiar. Me gustó de las líneas 29 a 35. Ahora vamos a tener un nivel diferente derechos dentro de la etiqueta. Voy a hacer escala. Vamos a tener un selecto. Derechos dentro de la selección. Vamos a tener las opciones, especificar el valor. Reacciona. Entonces aquí voy a hacer React. Js destacados, duplicarlo tres veces. Aquí voy a tener Angola. Entonces aquí vamos a haber visto años como este, ¿verdad? Entonces, por último, también tenemos que especificar el onclick. Así que a la derecha, dentro del seleccionar y especificar el valor. Se va a escalar el valor, que es el estado inicial. Entonces el onchange va a ser igual a, vamos a tomar una función anónima por aquí, que dará acceso al evento. Entonces vamos a llamar a la función sets Q para actualizar el estado inicial. Y luego vamos a apuntar y agarrar las nuevas imputas. Objetivo de punto E, valor de punto. Tan simple como eso. Cuando guardas en el navegador, veamos si la opción de seleccionar está funcionando. ¿Se ve hermosa? Todo está funcionando perfectamente bien. A mí me encantan estos. Bien, así que por último, tenemos que especificar el botón para presentar la firma. ¿Verdad? ¿Dónde hacemos esto ahora? Bien, vamos a tener otro div por aquí. Justo dentro de este div, vamos a tener un tipo de botón de atornillado va a ser submit, value. Enviar. Aquí, vamos a hacer bomba segura. Todo está funcionando muy bien. ¿Verdad? Finalmente, tenemos que definir una función para la navegación. Vamos a desplazarnos hacia arriba rápidamente. Y entonces como lo intentamos aquí, const, manejar somete un coro. Aquí vamos a llevar un evento a nuestra función. Entonces, para evitar la actualización automática de la página, tenemos que llamar a los prevenidos predeterminados. Entonces voy a hacer EV t dot prevenir default. Y finalmente, cuando se hace clic en el botón, queremos que el valor en el campo de entrada aparezca en el cuadro de diálogo de alerta. Así que aquí vamos a hacer uso de la interpolación de cadenas. Primero, tenemos el nombre, tenemos la dirección, y por último, tenemos la habilidad. ¿Verdad? Entonces ahora tenemos que invocar bien esta función, dentro de la firma. Para hacer eso. Primero, tenemos que especificar el onsubmit. Y luego voy a hacer manejar, enviar. Los datos más simples. Cuando guardas en el navegador. Vamos a comprobarlo. Bien, sí reacciono. Entonces, vamos a presionar el botón de enviar. Echa un vistazo. ¿Puedes ver que la entrada aparece aquí mismo en el cuadro de diálogo de alerta? Entonces, para recapitular, cuando estás creando formulario en React JS, tienes que convertir el formulario en componentes controlados. Y para ello, primero, hay que importar los EU did hook, y luego declarar las variables de estado necesarias para ser utilizadas. Después de eso, hay que especificar la entrada y luego tomar el estado inicial como valor. Entonces, habiendo hecho esto, tenemos que especificar el onchange más alto, ¿verdad? Entonces formateemos el código. Hermoso. Puedes ver que esto es al menos cómo trabajar con forma en años React. Esto es todo por ahora. Nos vemos en la próxima conferencia. Mantente enfocado en el cuidado holístico. 26. 26 fragmento de reacción: En esta conferencia, vamos a discutir fragmentos. Un patrón común en React es un componente devuelva múltiples elementos. Así que los fragmentos nos permiten agrupar una lista de elementos hijos sin agregar nodo extra a la cúpula. Vamos a entenderlo suficientemente bien con un ejemplo. Tan rápidamente dentro del directorio del componente, vamos a crear un nuevo paquete llamado Fragments demo, frog demo. Y justo cuando la demo rana, vamos a crear un nuevo componente llamado demo fragment. Haga clic con el botón derecho en Nuevo archivo. Fragmentos demo punto js. Generar el componente funcional. Presiona la tecla Escape para desactivar la edición multicultural. Entonces aquí, sólo voy a borrar esto. Reemplacemos el div con una etiqueta Adriana. Ahora, voy a resaltar el comando div D para seleccionar múltiples el div, borrarlo. Y ahora lo vamos a hacer es presionar nuevo la tecla Escape para desactivar la edición de Montecarlo. Justo aquí. Vamos a tener fragmentos de ejemplo. Muy bien, entonces déjame mostrarte algo. Aquí. Vamos a tener una etiqueta en la cabeza otra vez, latidos cardíacos. Hagámoslo de esta manera. Puedes ver, si observas la pantalla, te darás cuenta de que la aplicación se está quejando. Y cuando colocas el mouse sobre él, dice gestos, las expresiones deben tener un elemento padre. Entonces la demanda de la aplicación, debemos concluir la expresión GSS en un elemento padre. Tan rápido, vamos a hacerlo por aquí, div. Vamos a darle a este div un nombre de clase de contenedor. Destacados. Presiona hacia abajo la tecla Alt y luego presiona la tecla de flecha hacia arriba para moverla. Hermoso. Guardar, rendericemos rápidamente un componente en la aplicación. G se desplaza hacia la parte superior. Y por aquí, los vamos a importar o fragmentos de fragmentos de demo de slash frog demo slash component . Justo abajo. Haz un comentario sobre esto. Vamos a renderizarlos son fragmentos. Más cerca con la etiqueta de cierre suave. Asegúrese de guardar la aplicación. Y en el navegador. Boom, puedes ver que todo está funcionando perfectamente bien como se esperaba. Pero cuando inspeccione los elementos, haga clic con el botón derecho en Inspeccionar. Déjame mostrarte algo. Abrir el cuerpo y los derechos. Dentro del cuerpo, vas a ver un div con el id de rutas abiertas, justo dentro de este div, vas a ver otro div con el nombre de clase de nuestra app. Vamos a abrir. Y justo dentro de este div también, vas a ver otro div con el nombre de clase de contenedor. Mira, tenemos tantos nodos padres por aquí, y estos podrían ralentizar el rendimiento de nuestra aplicación. Bien, así que cuando abras el div por aquí con el nombre de clase de container, vas a ver la etiqueta H2. Pero el problema son estos, este div con el nombre de clase de contenedor es necesario para envolver los gestos, expresiones. Bien, entonces sirve como el nodo padre. Es decir, Jess tiene elementos. Pero el tema aquí es que tenemos tantos elementos de padres por aquí. Y eso podría ralentizar el rendimiento de nuestra aplicación. Lo que vamos a hacer ahora mismo es eliminar este div. Entonces, la única manera de hacerlo es con el uso de React Fragments. Heroína a Código VS. Abre el fragmento demo. Así que tenemos que borrar el diff. ¿Puedes ver que la aplicación se queja? Ahora lo que voy a hacer es reemplazar el div con React dots, fragment, highlights. Presiona la tecla Alt en tu teclado. Toca la tecla de flecha hacia arriba para moverla. Y no lo olvides, tenemos que formatear el código. Hermoso. Entonces, inspeccionemos el elemento. Puedes ver justo por aquí, vas a ver un div con el nombre de clase de app. Anteriormente. Dentro de este div, tienes otro div con el nombre de clase de container, que guarda como un nodo extra. Pero ahora no tenemos muestras por aquí. Entonces los nodos extra que se agregaron se han ido. Esta es exactamente la belleza de React Fragments. Bien, así que ayuda a eliminar nodo extra y mejorar el rendimiento de tu aplicación. Entonces, rápidamente tomemos otro ejemplo. Abre el Explorador. Cierto, ¿no demostraría la rana? Vamos a crear un componente llamado my table dot js, genérico, los componentes funcionales. Entonces vamos a reemplazar el div con una tabla. ¿Correcto? Estamos en la mesa, vamos a tener el cuerpo de la mesa, justo dentro. Vamos a tener la fila de la mesa. Entonces justo dentro de la fila de la tabla, vamos a tener los dos puntos de la tabla. Pero en este caso, la columna se mantendrá en un componente separado. Rápidamente, vamos a crear el componente de columna Raqueta construir demo nuevo archivo, mi columna punto js RFC para generar el componente funcional, cerrar el Explorer. Así que hacia la derecha en este div, vamos a tener los datos de la tabla. Y aquí voy a tener destrezas destacadas, duplicarlo. Entonces aquí voy a tener React js. Así que dirígete al componente de la aplicación. Tenemos que rendir mi mesa. Primero, sólo hay que hacer un comentario sobre esto. La fastidia. Importemos mi mesa de competente slash frack demo slash my table. En la parte inferior. Tenemos que hacer que mi tabla G esté más cerca con esas etiquetas de cierre automático. Guardar. Una vez hecho esto, tenemos que renderizar los componentes de columna a la derecha, dentro del cero, que es la fila de la tabla. Entonces primero, tenemos que importar mi columna de mi columna. Por supuesto, está en el mismo directorio. Entonces aquí tenemos que poner a salvo mi colon. El navegador y el hueso. Aquí es hermoso? Nuevamente, inspeccionemos rápidamente los elementos. Abre el cuerpo. El div con el id de raíces. Tenemos otro div con el nombre de clase AB. Y luego tenemos la mesa, el cuerpo de la mesa, el papel de la mesa. Y ahora tenemos un nodo extra que se agrega al árbol, que es este div de aquí, abierto. Y justo, dentro de este div, tenemos los datos de la tabla. Entonces, cuando inspecciones la consola, vas a ver alguna flecha molesta por ahí. Puedes ver que dice Validar anidamiento DOM TDI no puede aparecer como hijo de una Div. Déjame mostrarte en una columna. Ves a este tipo de aquí. No puede aparecer como hijo de un div. Entonces, la única manera de resolver este problema es reemplazar el div con un fragmento. Ahora, vamos a venir aquí, comando D para seleccionar todas las apariciones de DV, limpiarlo, y voy a hacer reaccionar fragmentos de punto. Seguro. En el navegador. Tenemos que refrescar la consola. Par. Puede mirar, el error se ha ido. ¿No es esto hermoso? ¿Alto? Me encanta. Muy bien, déjame llevarte a los elementos. Ven aquí. Ahora, cuando inspecciona los elementos, el nodo extra que se agregó al árbol DOM se ha ido. Entonces aquí tenemos el teorema del cuerpo T y TD. Puedes ver que este es exactamente el punto que tienes que tomar nota al trabajar con mesa. Entonces el TDI no puede aparecer en un div. Más bien, tenemos que encerrar los elementos td en un React Fragments. El más simple hecho. Hay una sintaxis más corta que puede usar para declarar fragmentos. Y la sintaxis se ve así. Solo tienes que seleccionar React dot fragment Command D para seleccionar todas las ocurrencias, límpialo. Entonces la etiqueta vacía que ves por aquí es otra forma de escribir React Fragments. Cuando guardas en el navegador, el resultado se ve exactamente igual. Entonces, los puntos clave de los que quiero que tomes nota es que al usar la etiqueta vacía como React Fragments, no puedes pasar los atributos clave para comer. Los atributos clave solo se pueden pasar con fragmentos de puntos React. Déjame mostrarte rápidamente. ¿Puedes ver que el atributo key es el único atributo que se puede pasar a un fragmento de punto React Entonces cuando haces algo como esto, usando la etiqueta vacía como fragmento, no va a funcionar para ti. Entonces, los puntos clave a tomar nota es que la clave son los únicos atributos que se pueden pasar a un fragmento. Y en el futuro, pueden agregar algún soporte para la adición de atributos. Por ahora, key es el único atributo que se puede pasar para reaccionar fragmento punto número dos. Fragmentos declarados con sintaxis explícita de fragmento de punto React es el único tipo de fragmentos que pueden tomar los atributos clave. Entonces esto es todo por ahora. Nos vemos en la próxima conferencia. Mantente enfocado en cuidar siempre. 27. Introducción a los ganchos: ¿Qué son exactamente los ganchos y por qué es importante aprenderlo? Bien, entonces, ¿qué realmente necesitó ganchos? ¿Antes de proceder? Quiero estar seguro de que ya conoces los conceptos básicos de React js. Y usted está familiarizado con temas como componente funcional, indicaciones, Estados, mapas, control, imputar, y así sucesivamente. Sin embargo, si eres un novato, te sugiero encarecidamente que revises mis llamadas uno-a-uno de React js para principiantes fin de equiparte con los conceptos básicos de React y luego volver a enganches y continuar con los nuestros. Y ahora comencemos. Lo que exactamente está enganchado en React G es que los ganchos son una edición próxima en el sistema React 0.8, lo que nos permite hacer uso de las características de estado y ciclo de vida sin escribir una clase. Bien, entonces implica que podremos engancharnos al estado React, hacer uso de todos los futuros estatales en componentes funcionales. De hecho, usando React Hooks, puedes lograr exactamente los mismos resultados que tuviste usando el método del ciclo de vida. Y se puede hacer eso con menor código. Nodos tecnológicos. React Hooks solo funciona con componentes funcionales. Ahora la pregunta es, ¿qué necesitaban ganchos? Y por qué es importante saber quién es el punto número uno. Anteriormente cuando se creó React. Para trabajar con clases, hay que entender claramente esta palabra clave en JavaScript. Y si estás familiarizado con el script java, sabrás de estos en JavaScript no funciona exactamente como en otros lenguajes. Sin embargo, cuando se trata de React Hooks, no tienes que preocuparte por estas Varillas clave. ¿Por qué? Es simplemente porque queremos usarlo más. Suena bien. Hermoso. Punto número dos. Siempre tendrás que vincular evento en el componente de clase. Pero con la introducción de ganchos en componente funcional, no más métodos de unión. Y eso es por supuesto, un enorme relevo. Punto. Número tres. Clases mezclan recarga en caliente, muy poco confiable. Simplemente porque no minimizan muy bien. Bien, entonces las clases mezclan recarga caliente, muy escamosa. Punto número cuatro, hooks hace posible shell lógica de estado entre componentes sin cambiar su jerarquía de componentes. Toma nota de estos puntos clave. No se pueden usar ganchos dentro de un componente de clase. Los ganchos solo funcionan en componentes funcionales. Bien, por lo que los ganchos solo se pueden usar en compañía funcional y son ineficaces dentro del componente de clase. Número dos, los ganchos no contienen ningún cambio de ruptura y se liberan , es compatible con versiones anteriores. En resumen, ganchos o función especial que nos permite engancharnos a React States y futuros del ciclo de vida del componente funcional, por ejemplo, usan ese gancho es un gancho que le permite agregar estados de reacción dos componentes funcionales. Hooks te permite engancharte a futuros de React sin escribir una clase. Con el uso de ganchos. Ya no tienes que preocuparte por estas palabras clave. Y finalmente, nos permite reutilizar la lógica stateful. Ahora hemos limpiado el conocimiento de lo que se trata React Hooks. Vamos a los ojos prácticos en la próxima conferencia. Esto es todo por ahora. Hacerlo bien para suscribirte. Y te veré en la próxima conferencia. Todavía enfocado en cuidar siempre. 28. 27 useState Hooks: Procedamos con los ganchos de usted prácticamente usándolo. Cree rápidamente una nueva aplicación React y asígnele un nombre descriptivo. Por ejemplo, puede decidir llamarlo práctica de aros. A mi fin. Ya lo tengo creado. Entonces, continuemos con VS Code. Abre los clientes exploradores. ¿Correcto? Estamos en el SRC. Vamos a crear el directorio de componentes. ¿Correcto? Dentro del componente, vamos a crear un nuevo archivo llamado counter dot js. Generar los componentes funcionales. Perfecto. Bien, así que hablemos del uso que engancha. Utilizan que hook es una función especial que toma el estado inicial como argumento y luego devuelve una matriz de dos entradas. El primer elemento de la matriz se utiliza para almacenar el estado inicial. El segundo elemento de la matriz es una función de configuración que acepta los argumentos que se utilizan para actualizar el estado inicial. Vamos a implementarlo rápidamente para tener un conocimiento claro de lo que estoy hablando. Para proceder. Primero, tenemos que importar los ustedes que vienen aquí más una coma aquí mismo, abrir y cerrar el corchete. Y voy a hacer ustedes así como esto. ¿Cómo pueden usar ese gancho es una función especial, verdad? Entonces tenemos que invocarlo así. Esta función toma en estado inicial como argumento. Y en este ejemplo, el estado inicial va a ser cero, que luego devolverá una matriz de dos entradas, const array. Entonces vamos a tener conos, coma, setCount, asignarlo así. Esta sintaxis de aquí se llama estructuración RE. Es un futuro de ES6 aquí mismo. El primer elemento de esta matriz es una variable que se utiliza para almacenar el estado inicial. Entonces el segundo elemento es una función de configuración que acepta un argumento que se utiliza para actualizar el estado inicial es tan simple como esas técnicas. El estado inicial podría ser un número, booleano, cadena o una matriz. Bien, entonces todos ellos pueden entrar aquí dentro de este parámetro. Vamos a mostrar rápidamente el conteo en el navegador. Entonces bien, estamos en los GSA. Usemos nuestro paquete hedge one para mostrar la apertura de la cuenta y cerrar las corchetes. Y entonces vamos a hacer referencia al estado inicial, que es el conteo que sostiene. Este tipo. La mezcla de punto de guardado más simple para ejecutar su aplicación en el terminal. Entonces antes de proceder al navegador, tenemos que renderizar este componente en la app. G está justo aquí. Tenemos que seleccionar de la etiqueta de cabeza de apertura, la etiqueta de encabezado de cierre. Justo en la parte superior. Vamos a importar conos de conos de barra diagonal de puntos. Así que vamos a ejecutar la cuenta por aquí. Más simple que de nuevo, se asegura de ejecutar la obligación segura. En el navegador. Y hueso. Puedes ver aquí es el estado inicial de la aplicación del contador. Hagámoslo más hermoso ahora mismo. Lo voy a hacer aquí, ¿ es perfecto? Por lo que la intención de esta conferencia es cambiar el estado inicial de nuestra aplicación de contenido cuando se hace clic en el botón. Entonces para eso, tenemos que especificar una votación, ¿verdad? ¿Cuáles son los paseos en bote? Vamos a especificar el onclick, onclick de este botón. Vamos a invocar esta función de configuración. Entonces aquí mismo voy a hacer set count. Y entonces la función setup tomaría en un argumento que se utilizará para actualizar el estado inicial. Y en este caso, el argumento va a ser la cláusula estados iniciales, el nuevo valor de esta t. Déjame arrastrar esto hacia abajo. Frecuencia cardíaca, y esta es una llamada de función. Tenemos que convertirlo en una función de flecha. Así como esto. Guardar en el navegador y el hueso. Vamos a probarlo haciendo clic en el cambio de navegación. ¿Puedes ver eso? Perfecto. Esto es Lee es lo que la intención es. Para recapitular. Si quieres hacer uso de estos datos, React G es primero, tienes que importar el uso que a quien le importa esperanza. Y después de eso, hay que invocar a EU sí enganchar y luego pasar en el estado inicial como argumento. Entonces, habiendo hecho eso, hay que asignarlo a una matriz de dos entradas. Y estamos en esta matriz, tenemos los primeros elementos para ser una variable que se utiliza para almacenar el estado inicial. Y el segundo elemento es una función de configuración que acepta un argumento que se utiliza para actualizar los estados iniciales. Y en este caso, el argumento de aquí son los estados iniciales más uno. Bien, así que por primera vez los componentes se renderizan. En su lugar se crea la variable y se inicializa a cero. Ahora, al hacer clic en el botón, se invocará el segundo método, que luego incrementará en uno el conteo actual. Por lo tanto, invocar el método setColor hará que los componentes vuelvan a renderizar. Y después de eso, los recuentos contendrán el valor actual que luego se muestra en el navegador. Entonces es tan sencillo como eso. Hay dos reglas de impotencia a considerar al usar React Hooks. Regla número uno, los ganchos solo se pueden atrapar en el nivel superior. Así que no llame a hooks dentro de una condición de bucle o funciones anidadas. Regla número dos, los ganchos solo se pueden llamar dentro de la función React. Esto es todo por ahora y nos vemos en la próxima conferencia. Mantente enfocado en el cuidado holístico. 29. 28 estado de actualización basado en el valor de estado de prev: En esta conferencia, vamos a aprender a establecer el estado con base en el valor del estado anterior. Y también, discutiremos la diferencia entre este ejemplo y el ejemplo anterior que hicimos. Entonces aquí en esta conferencia, vamos a demostrar cómo incrementar, decrementar e incluso reiniciar el contador. Entonces hagámoslo rápidamente. ¿No sería el directorio de componentes? Vamos a crear un nuevo componente llamado contador para generar los componentes funcionales. Así que vamos a importar rápidamente el uso de ese gancho. Es una función. Tenemos que invocarlo y luego tomar como argumento el estado inicial. Y en este caso, el estado inicial va a ser cero como siempre. Y esto devuelve una matriz de dos entradas, ¿verdad? Así que voy a hacer const una matriz aquí. Vamos a tener que contar. Después tenemos la función de configuración para actualizar los estados iniciales asignando placa. Esto simplificó nuestro derecho. Entonces, habiendo hecho eso, pasemos rápidamente al GSS. Usemos la etiqueta Adriano para mostrar la corriente. Una vez hecho esto, tenemos que implementar la junta Haynes. Primero, vamos a tener aquí incrementos como duplicarlo tres veces. Aquí vamos a tener decremento. Y aquí vamos a tener resets. Así como esto. Especifico el onclick. Tomado una función de flecha. Vamos a invocar los recuentos establecidos y luego pasar el conteo inicial más el nuevo valor. Lo mismo aquí. Entonces solo voy a copiar comparar, pegar. Entonces la diferencia es que esto va a ser una producción. Para el reinicio. Tenemos que declarar un recuento variable, constante, inicial. Equa Zara. Al hacer clic de esta navegación, queremos restablecer las contrataciones de contador. Entonces voy a hacer algo como esto ahora mismo. Vamos a envolverlo en un div. Muévelo tan rápido formatear el código. Perfecto, mira, cada vez que formatear el código, vas a obtener la sangría adecuada. Aquí, vamos a especificar el OnClick. Entonces tenemos que establecer llega a la corriente inicial. Bien, entonces habiendo hecho esto, abre la app. Y aquí tenemos que importar tatuaje de contador de slash competente a tenemos que renderizarlo aquí mismo. Desde la obligación. Presionemos los comentarios sobre la corriente, que es el ejemplo anterior. Compruébalo en el navegador. ¿Puedes ver? Entonces vamos a probarlo haciendo clic en el equipo de barrenador de incremento. Quién hermoso. Bien. Decrementos, incremento, incremento, decremento, reset. Todo está funcionando perfectamente bien como se esperaba. Por lo que la intención de esta conferencia es actualizar el estado con base en el valor estatal anterior. Así que vuelve a la cámara dos. Vamos a demostrar este ejemplo con el equipo barrenador de incremento. Y después de eso, puedes seguir adelante para implementarlo en el resto del botón onclick de este botón, vamos a llamar a una función incrementos. Y esta función se definiría en la parte superior. Vamos a tener incrementos const, configurarlo a nuestra función. Entonces aquí mismo, vamos a establecer conteo para contar más uno. Guardar en el navegador. Y todo sigue funcionando perfectamente bien como se esperaba, ¿no? Entonces, vayamos directo a cuál es el problema ahora. Supongamos dentro de esta función, queremos incrementar el conteo en dos. Entonces es más fácil hacer algo como esto. Sólo tenemos que duplicar estos y después tenerlos así. Cuando guarde en el navegador, actualice, haga clic en el incremento de embarque. ¿Puedes ver que todo va incrementando en uno? Pero miren, esperábamos que esta aplicación se incrementara en dos. Pero ahora en el navegador, lo tenemos incrementado en uno. Parece que no está funcionando bien. Entonces ese es uno de los inconvenientes al usar CMS más uno en años de React. Entonces déjenme explicarlo suficientemente bien. Cuando veas esto de cerca, te darás cuenta de que estamos actualizando el mismo estado varias veces. Como resultado, react agregará todos estos datos en un solo lote y los ejecutará una vez. Entonces aunque hagamos esto 1 millón de veces, déjame mostrarte así. Guardar. Estos también se incrementarán en uno. Por lo que React agregará todos estos datos en un solo lote y como agudos ellos los datos. Así que quizás no veas los efectos de lo que hiciste aquí porque esto se supone que incluso se supone que incrementa por MSE 123456. Entonces se supone que esto se incrementa en seis, pero miren, son incrementos en uno. Entonces este es el inconveniente de usar contar más uno y reaccionar. Y ahora la pregunta es, ¿por qué reaccionan del Estado encarna? No te preocupes. Te daré la respuesta a esta pregunta Hacia el final de esta conferencia. Entonces resolvamos rápidamente este problema. Para resolver este problema, tenemos que pasar función anónima que tiene acceso al valor estado anterior. Y ahora la sintaxis se verá diferente. Establecer recuentos. Así que bien, estamos en esta función, vamos a hacer recuentos previos, establecerlo en nuestra función, entonces vamos a tener aquí recuentos anteriores más uno, bien, destacados. Duplicarlo. Entonces cuando haces esto y revisas al navegador, recarga, golpea el incremento comprado en, y ves que se incrementa en dos. Es tan sencillo como eso. ¿Ves eso? Ahora la aplicación está funcionando como se esperaba? Confía en mí, efectivamente está funcionando como se esperaba. Aquí pasamos una función que tiene acceso al valor del estado anterior y la incrementamos en uno. Entonces también podemos incrementados en cinco. Déjame mostrarte duplicado, duplicado, duplicado, seguro. En el navegador. Tenemos que recargar incrementos en cinco. Es tan sencillo como eso. Así que toma, por ejemplo, quieres incrementar todos estos tops en diez. Entonces vas a tener repetición de código así. Eso no me gusta. Así que vamos a realizar alguna ventaja a la deshidratación por aquí. Ahora voy a hacer por dejar que sea igual a cero. Yo es menos de dos y luego más, más así. Entonces aquí vamos a tener la función set. Entonces justo dentro, vamos a tener acceso al valor estatal anterior. Después el valor del estado anterior más uno. Guardar en el navegador, refrescarlo en los incrementos. Puedes ver que se incrementa en dos. Cuando vienes aquí, haces cinco. Guardar en el navegador, actualizar. Se incrementa en cinco. Entonces esto nos lleva de vuelta a la pregunta, ¿por qué reacciona actualizar el estado encarna? Déjame darte una respuesta. El motivo por el que reaccionar de las insignias del estadio es simplemente porque en React js, cada vez que se actualiza el estado, el componente volverá a renderizar. Imaginemos que tenemos esto actualizado mil veces. Simplemente significa que nuestro componente se va a volver a renderizar mil veces. Y eso es lo que afecta el rendimiento de la aplicación. Reacciona, dale un tenso y decidió actualizar solo se quedó en lotes. Entonces va a agregar todas esas ocurrencias y ejecutarlas unas. Bien, entonces entiendo que esta conferencia es bastante complicada, pero le sugiero encarecidamente que reproduzca el video una y otra vez para obtener un palo en su memoria. Esto es todo por ahora. Nos vemos en la próxima conferencia. Mantente enfocado en el cuidado holístico. 30. 29 Objeto como variable de estado: En esta conferencia, vamos a entender cómo funciona el objeto con la deuda estadounidense que trabaja duro, ¿verdad? Así que comencemos. Estamos en el directorio Componentes. Vamos a crear un nuevo contador. Y lo voy a llamar contador tres punto g es genérico, el componente funcional. Cierra el Explorer. Tan rápido. Vamos a importar el uso que engancha como declaró las variables de estado necesarias para ser utilizadas. Entonces aquí vamos a tener a const Mary vistiendo esta matriz. Vamos a tener conjuntos de coma de empleados, equa de empleado, ¿verdad? En este ejemplo, la etapa inicial va a ser un objeto, derecho, para votar en estos objetos. Vamos a tener columna de nombre, ponerla en coma de cadena vacía. Vamos a tener la columna country, ponerla en una cadena vacía también. Bien, entonces el estado inicial por aquí es bastante diferente de las conferencias anteriores. Por lo que tratar con el objeto y usar ese gancho implicará un nuevo enfoque. Es bastante simple, así que no quiero asustarte justo por aquí. Vamos a borrar esto. Entonces dentro del div, vamos a tener una etiqueta de entrada y el tipo equa prueba el valor. Tenemos que mostrar el valor dinámicamente, nombre del punto del empleado. Esta imputa va a ser utilizada para el nombre sin cambios si el usuario comienza a escribir en el campo de entrada. Aquí mismo, vamos a tener acceso a los eventos, configurarlo en nuestra función, y luego vamos a invocar el método set employee. Por supuesto, ya debes saber que esto aceptará un argumento que se utilizará para actualizar el estado inicial. Es tan sencillo como eso. Entonces, ¿cuáles son los paréntesis que vamos a tomar en un objeto, y voy a nombrar estos objetivos de punto E, valor de punto. Hermoso. Cerremos la etiqueta de entrada. Bien, vamos a formatear el código. Mejor. Destaca de la línea 72, líneas 11. Duplicarlo. Entonces aquí va a ser empleado punto país. Entonces, lo siguiente en la línea es mostrar en lugar nombre y país en el navegador. Y vamos a tener un div, justo dentro del div, vamos a tener una etiqueta p y escribir la etiqueta p. Yo voy a hacer. Mi nombre es empleado, nombre de punto, destacados y duplicado va a ser empleado. Pero país. Entonces aquí solo voy a hacer, soy de empleado punto country. Entonces, cualquiera que sea el país en el que estés escribiendo en el campo de entrada va a aparecer aquí. Bien, tan seguro. Abre la app. Sí, tenemos que renderizarlo por aquí. Y voy a hacer en parte, comparar tres de componentes slash coma tres más un comentario en Canvas también. Entonces tenemos que renderizar el conteo de tres puntos G está más cerca con la etiqueta de cierre automático. Guardar en el navegador. Boom, Perfecto. Así que vamos a escribir algo en el nombre. Entonces el nombre es una barra doble. Todo está funcionando para el nombre. Entonces cuando comencemos a escribir en el campo country, vamos a experimentar si agregamos comportamiento, país vas a ser tú. ¿Bien? Puedes ver cuando lo escribes en el campo de entrada, el nombre de aquí desaparecería. Y cuando empieces a escribirlo en el FUD Nim, el país de aquí va a desaparecer. Entonces lo que de cerca. Ya ves ahora, también, cuando empieces a escribir en el campo de entrada del país, el nombre se va a borrar. Bien, así que déjeme llevarlo rápidamente a sus anualidades. Bien, hagámoslo aquí mismo. Vamos a tener otro div, ¿verdad? Qué en este div, vamos a tener una etiqueta p, ¿verdad? Estamos en la etiqueta p. Voy a hacer JSON dot stringify. Entonces tenemos que hacer referencia al empleado seguro en el navegador y hueso. Ya ves que tenemos el nombre y tenemos el país. Entonces, cuando escribimos en el campo de entrada de nombre, va a aparecer aquí entre la cadena. Y cuando aprovechemos el país, va a aparecer aquí entre esta cadena también. Compruébalo. Entonces el nombre va a ser una barra doble. Cuando escribo en el campo country, ¿ves que el nombre desaparece y el país se queda? Entonces esto sucede simplemente porque usan ese gancho no administra y actualiza automáticamente el objeto, a diferencia del método set state que se encuentra en el componente de clase. Entonces la solución a este problema es usar el operador spread para administrar y actualizar manualmente el objeto. Déjame mostrarte rápidamente es sumamente sencillo. Entonces aquí mismo, tenemos que difundir así al empleado. ¿Bien? Aquí también, tenemos que difundir al empleado. Por lo que esto ayudará a administrar y actualizar manualmente los objetos. Un simple que cuando ahorras. Bien, vamos a probarlo. Baba. Baba aparece aquí. El país, Reino Unido. El Reino Unido aparece aquí. Todo está funcionando perfectamente bien como espectador. Entonces, en conclusión, siempre que se trata objetos como una variable de estado, hay que hacer uso del operador spread para administrar y actualizar manualmente el objeto. Esto es todo por ahora. Nos vemos en la próxima conferencia. Mantente enfocado en el cuidado holístico. 31. 30 Array como variable de estado: En esta conferencia, vamos a aprender a usar array como variable de estado. Así que bien, dentro del directorio del componente, crear rápidamente un nuevo archivo llamado hooks. Ellos RE hacen clic derecho en nuevos ganchos de ventilador, ese array punto g es RFC para generar el componente funcional. Cierra el Explorer. Vamos a declarar rápidamente unas variables de estado para ser utilizadas. Pero antes de continuar, primero, tenemos que importar el gancho tú en el nivel superior más una coma aquí mismo. Abre y cierra llaves rizadas, ustedes. Ahora vamos a declarar los elementos variables de estado. Tenemos que establecer artículos. Y el estado inicial va a ser una matriz vacía. ¿Bien? Entonces la intención de esta conferencia de agregar elementos a esta matriz. ¿Bien? Entonces los elementos que vamos a agregar a esta matriz van a provenir de la entrada vista. Entonces, por lo tanto, tenemos que declarar las variables de estado para el campo de imput. Así que imaginemos que queremos agregar los nombres de los empleados a esta matriz. Y lo voy a hacer aquí. El coma del empleado establece la equa del empleado, usted declara, y el estado inicial va a ser una cadena vacía. Entonces dondequiera que tengamos aquí se agregará a esta área. Y la pregunta es, ¿cómo podemos hacer eso? No te preocupes, te voy a mostrar en un GC. Pasemos rápidamente a la interfaz de usuario. Destacar. Estos, límpialo. Ahora vamos a tener una etiqueta H2. Y voy a hacer agregar empleado. Justo abajo. Vamos a tener un imput más cerca con la etiqueta de cierre automático. Y entonces el tipo va a ser valor de prueba. Vamos a tomar en este tipo de aquí mismo, que es esta variable que va a mantener el estado inicial. Rápidamente cópielo y pegarlo aquí. Entonces, cuando el usuario comience a escribirlos en el campo de entrada, tenemos que agarrar esos valores que están escribiendo. Entonces para eso, tenemos que especificar el onchange. Justo aquí. Vamos a tomar en la función de error. Así que bien, dentro de la función de error, tenemos que invocar la función set employees setup. Entonces, habiendo hecho esto, son función por aquí nos va a dar acceso a los eventos. Y con la ayuda de este evento, podremos apuntar y agarrar el valor que el usuario está escribiendo. Punto de evento, objetivo, valor de puntos. El más simple eso. Entonces, la intención es agregar elementos a esta matriz en la camarilla de navegación. Entonces, concretemos rápidamente la votación. Derechos de voto usando esta navegación voy a hacer en artículos dentro de la navegación. Tenemos que especificar su propio CLI. Entonces, al hacer clic en este botón, vamos a invocar la función add items. Definamos rápidamente esta función. Ven a la cima. Entonces vamos a tener Constant Add Items. Establezca esto en nuestra función. Así que bien, dentro de esta función, vamos a invocar esta función de configuración de un conjunto de elementos de cabeza. Pasemos rápidamente los conjuntos de valores para la matriz de elementos. Y en la conferencia anterior, aprendimos que la función de configuración no tiene la capacidad de igualar una actualización. O en el caso de array, podemos decir que la función setup no puede anexar item al final del lease. Por lo tanto, necesitamos manejarlo manualmente con la ayuda del operador de propagación. Déjame mostrarte rápidamente. Bien, entonces para establecer el elemento, vamos a tener una matriz y luego extender la matriz de elementos. Entonces, por último, vamos a empujar un nuevo objeto. Tan simple como eso, ¿verdad? Estamos en este nuevo objeto. Tenemos que especificar los elementos ID, puntos, tierra, porque queremos un ID que se utilizará para identificar de manera única los elementos que se agregarán a la matriz. Nombre empleado. Entonces por aquí, justo dentro de este objeto, puedes agregar tantos datos como quieras. Entonces, por ejemplo, si quiero agregar la dirección de los empleados, solo hay que duplicar la variable de estado y especificar las variables y la función setter. Entonces ven aquí más tranquilo. Puedes agregarlo a continuación. Más simple que habiendo hecho esto, mapeemos rápidamente estos elementos. Hagámoslo justo debajo de la parte inferior. Quiero usar la etiqueta UL. ¿Correcto? Dentro de la etiqueta UL, vamos a tener las llaves y luego los elementos, mapa de puntos. El método del mapa. Vamos a tomar una función de flecha y luego abrir y cerrar paréntesis. ¿Correcto? No funcionaría el error. Vamos a pasar en un parámetro. Este parámetro representa cada elemento de la lista. Entonces aquí tenemos que mostrarlo en la pantalla. Y lo voy a hacer, voy a usar la etiqueta LI. Vamos a especificar la clave para ser item dot id. Y justo, dentro del HTML interno, vamos a tener puntos de elemento, nombre, que es este nombre de aquí, el ID y el nombre. Vamos a ejecutar bien ese componente, dentro de la app Js. Tenemos que importar ganchos que array desde componentes slash hooks. ¿RA, presionó un comentario sobre estos? Ven aquí. Renderizar, enganchado, Ira, seguro en el navegador. Y boom, Hermosa. Vamos a echarle un vistazo. Aquí. Voy a clavar. Un bar, tiene el primer empleado y me pega en la pizarra en ella se le agregan. Vamos a tener el micrófono C boom. Bien, entonces vamos a tener este nombre por aquí. Esto es querido para mi corazón, ¿verdad? Todo está funcionando perfectamente bien como se esperaba. Enseñanza buena, Hermosa. Vuelve al código VS y déjame explicarte qué pasa bajo el capó. Entonces algo está pasando aquí y tengo que explicarlo simplemente para que todos lo entiendan lo suficientemente bien. Pasemos a la función. Antes de continuar, formateemos rápidamente el código. Perfecto. Se ve limpio y me encanta. Bien, entonces cuando se llama a la función Agregar elemento, esta función de configuración se activaría. Así que hacemos una copia de todos los elementos de la matriz usando el operador spread a la lista de elemento copiado. Luego agregamos un nuevo objeto. Y al hacerlo, no estamos sobrescribiendo la matriz original. Esto en realidad lo agregará al final del contrato de arrendamiento. Entonces, en resumen, cuando se trabaja con array como variable de estado, primero, hay que hacer una copia de los ítems usando el operador spread. Una vez hecho eso, hay que anexar un nuevo ítem y pasarlo como argumento a nuestra función. Esto es todo por ahora. Nos vemos en la próxima conferencia. Curso cuidadoso y cuidado holístico. 32. 31 Organice el código: Bienvenidos de nuevo a todos. Entonces en esta conferencia, vamos a organizar la estructura de carpetas. Abre el Explorer, justo dentro del directorio de la compañía. Tenemos un vistazo, creamos un nuevo directorio llamado usted practica. Entonces ahora vamos a copiar todos los archivos que se relacionan con el uso que engancha a EU. Practicó la comida. Mantenga pulsada la tecla de comando en su teclado. Toque para seleccionar los archivos relacionados. Arrástralo y suéltalo en Estados Unidos. Practicó. Haga clic en Mover. Perfecto. Entonces ahora tenemos el directorio competente y los derechos dentro del directorio de componentes. Tenemos a EU did practice, que contiene todos los archivos que están relacionados con el uso de ganchos Git. Porque vamos a practicar tantos ganchos en este curso. Entonces es bueno. Organizamos nuestra estructura de carpetas. Ahora bien, el problema aquí es que faltarán las entradas. Cierra el Explorer. Y luego veamos qué pasa. Derechos en la terminología. ¿Ves que estamos teniendo problemas con las entradas? Puedes ver qué tan bien? Vamos a resolverlo rápidamente. Volver al componente app, porque aquí es donde tenemos casi todas las importaciones. Así que vamos a quitarnos rápidamente todas estas cosas y luego hagámoslo desde cero. Como estos. Import Counter from dot slash components slash utilizó su contador de barra diagonal de práctica. Puedes hacer el resto al final. No lo entiendas, bien. Entonces cuando revisas el navegador, pero todo está funcionando perfectamente bien como se esperaba. Por lo que en la próxima conferencia, comenzaremos a practicar el uso de esos ganchos. Esto suele ser nuestro n atraparte en la próxima conferencia. 33. 32 useEffect: El efecto Estados Unidos es un gancho para encapsular código que tiene que ver con efectos secundarios. Y es una combinación de componente did mount, component, did update. El componente se montará. Anteriormente, los componentes funcionales no tenían acceso al ciclo de vida del componente. Pero con el gancho de esfuerzo de Estados Unidos, puedes aprovechar los futuros del ciclo. Por lo tanto, podemos decir que Usar ganchos de esfuerzo le permite realizar efectos secundarios en sus componentes. Algunos ejemplos de efectos secundarios incluyen la obtención de datos, actualizando directamente el domo. Temporizadores. En simplicidad, utilizan sintaxis de efecto se verá así. Si quieres hacer uso del efecto EU. Primero, hay que importarlo en la parte superior. Ellos usan efecto es una función, por lo tanto, tenemos que invocarla. Aquí es que Lee es donde comienza la diversión. Bien, ahora, quiero que doble las manos y preste atención a mi explicación. Y por favor no se unan a mí en escribir código. Entonces el efecto EU es una función escribe. Y aquí invocamos la función. La función toma en dos parámetros. El primer parámetro es una función que se ejecuta después de cada renderizado. Bien, lo que simplemente implica cada vez que el componente se renderiza, se llamará a la función. Entonces, el primer parámetro del efecto US es una función que se llama después de cada render. Este tipo de aquí. Bien, déjame armarlo para que puedas entender lo esencial. Este es el primer parámetro del efecto US, que es una función que se ejecuta después de cada render. Y el segundo parámetro es una matriz vacía, que se llama ampliamente la matriz de dependencias. Entonces para eso, solo tenemos que colocar una coma aquí mismo y luego tomar una matriz vacía. Entonces este es el primer parámetro de los efectos de Estados Unidos. Y entonces este es el segundo parámetro de los efectos estadunidenses. Este tipo de aquí se pone en marcha después de cada renderizado. Entonces a esto se le llama el efecto. Esta función aquí mismo en los Estados Unidos, effect hook se llama effect cuando se pasa una matriz de dependencias vacía como segundo argumento para reutilizar efecto hook, simplemente significa que usan efectos se ejecutarán solo en el primer render. Entonces cada vez que el componente vuelve a renderizar, el efecto no se va a ejecutar. Ese es exactamente el uso de la dependencia vacía RA. Otro punto importante es que también se pueden condicionar efectos usando las sondas o el valor de estado. Y haces eso pasándolo, ¿verdad? Estamos en esta matriz. En la siguiente conferencia. Cuando comencemos a las implementaciones, definitivamente lo entenderás lo suficientemente bien. Bien, así que esto es solo un atisbo de lo que usan. El efecto es. Otro punto importante del que quiero que tomen nota es que el efecto EU se define dentro del componente. Y al hacerlo, podremos acceder al estado y sondeos sin tener que escribir códigos adicionales. Así que vamos a formatear rápidamente este código y hacer que se vea mejor. Perfecto. Entonces, para recapitular, antes de hacer uso de estos efectos, primero, hay que importarlo en el nivel superior. El efecto Estados Unidos es una función aquí. Entonces tenemos que invocarlo por aquí. Y habiendo hecho eso, el efecto estadunidense acepta dos parámetros. El primer parámetro es una función de error, que en este caso el efecto. Y el segundo parámetro es una matriz vacía. No he entendido todos estos. Probablemente podamos decir que el segundo argumento ayuda a ejecutar condicionalmente el efecto. Vamos prácticamente ¿es en la próxima conferencia? Nos vemos entonces. 34. 33 El componente se montó y actualizó: En este ejemplo, vamos a construir una aplicación muy sencilla que actualice el título del documento cuando se haga clic en el botón. Así que vamos a imitar el componente sí montó y el componente sí se actualizó rápidamente dentro del directorio de componentes. Vamos a crear un nuevo paquete llamado práctica de efectos de usuario . Comando B. Para abrir el explorador, haga clic con el botón derecho en el componente, nueva carpeta. ¿Correcto? Estamos en la práctica del efecto de Estados Unidos. Vamos a crear un nuevo componente llamado Efecto ejemplo un punto g es generar el componente funcional. Así que olvidemos los efectos secundarios por ahora, y vamos a crear una sencilla aplicación de contador. Importa rápidamente el uso de ese gancho. Declaremos la variable de estado necesaria para ser utilizada. El estado inicial va a ser un número, y en este caso va a ser cero, ¿verdad? Dentro del cuerpo. Tenemos que mostrar el conteo. Y luego vamos a tener un paseo en bote y onclick de este botón. Vamos a actualizar el estado inicial. Entonces solo voy a hacer click. Y aquí tenemos que especificar que onclick. Onclick, vamos a llamar a la función setCount. Y justo, dentro del parámetro, vamos a tomar en el estado inicial más las nuevas actualizaciones. Guarde, abra los componentes de la aplicación y haya llovido menos por aquí. Así que vamos a importar Efecto ejemplo uno de componente slash utilizado si en la práctica slash efecto ejemplo uno. Justo aquí. Pongamos un comentario sobre esto. Hagamos el efecto ejemplo uno. Seguro en el navegador y los huesos son correctos. Todo está funcionando perfectamente bien. ¿Puedes ver? Bien, déjame hacer algo hermoso. Personalicemos esta aplicación. Así que solo tengo que quitar el click justo dentro del HTML interno. Y voy a indicar con el signo más, guardar en el navegador y boom, lucir más guapa así. A mí me encanta. Vamos a acercar la bilirrubina. Esto se llama, la intención de esta conferencia es actualizar el título del documento cuando se hace clic en el botón. Hagámoslo implementando los efectos de uso. Para implementar el efecto EU. Primero, tenemos que importarlo. Utilizan efecto también es una función. Entonces tenemos que invocarlo. Ven aquí, y voy a usar efectos. El uso de ganchos AT, acepta una función como argumento que se ejecuta después de que el componente se renderiza. Y esto va a ser una función de error. Entonces la función que se pasa como argumento, ¿no? Dentro de los EE.UU. si a la función de gancho se llama el efecto, ¿de acuerdo? Entonces nos referimos a esta función como efecto. Entonces bien, en donde los efectos, vamos a actualizar el título del documento. Documento punto título igual. Indiquemos qué marca el dólar y yo voy a hacer. Has hecho clic en tiempos de conteo. Así que simplemente estamos pasando el conteo aquí mismo. ¿Bien? Cuando guardes y vuelvas al navegador, derecha, hagamos clic en el botón más. ¿Ves cuando observas con atención, te darás cuenta de que el título está actualizado Cuando hago clic, ¿puedes ver, ahora dice que hiciste clic dos veces Espero que lo veas. Bien, por lo que inicialmente el título del documento lee cero veces. Entonces cuando hacemos clic en el botón, va a hacer que los componentes vuelvan a renderizar. Y después de que el componente se renderiza, se llamará al uso de ese gancho. Haga clic en ¿Puedes ver y ahora te hemos hecho clic una vez? Haga clic de nuevo, hizo clic dos veces. Y así como así. Entonces cada vez que hago clic en el tablero en, el estado se actualiza y el componente volverá a renderizar. Cuando el componente se vuelva a renderizar, esto hará que el gancho de efecto estadounidense se encienda y luego el título del documento cambiará al valor de recuento actualizado. Entonces esto simplemente implica que el efecto estadounidense Hooke se llama después de que el componente renderiza. Por lo que ahora podemos ver que el comportamiento de esta aplicación es exactamente como se esperaba. Déjame explicarte qué pasa bajo el capó. Provocar efectos secundarios en componentes funcionales. Primero, tenemos que importar el efecto estadunidense. ¿Quién? El efecto estadunidense quien es una función, tenemos que invocarla. Entonces después de eso, vamos a pasar una función como argumento, ¿verdad? Dentro de la función US IF. Entonces, justo dentro del efecto, establecemos el título del documento usando la API del navegador de título del documento. Entonces, lo que sea que tengas aquí dentro esta función anónima se va a poner frío después de que el componente se renderiza. Entonces, cuando los renders de React están acompañando, recordará los efectos que usamos. Después ejecuta nuestros efectos después de actualizar la cúpula. Esto sucede por cada render, incluido el primero. Toma nota de estos puntos clave. Punto número uno, los efectos de Estados Unidos se ejecutan después de cada renderizado. Punto. Número dos, El efecto de uso se define dentro de los componentes. Y al hacerlo, obtendremos acceso a estos datos y sondeos sin tener que escribir ningún código extra. Y por eso pudimos acceder al título del documento. Para recapitular, siempre que quieras hacer uso del efecto US, tienes que importarlo desde el módulo React después de las entradas. Hay que llamarlo derechos dentro del componente así. Así que justo dentro de la función, vamos a tomar en una función de flecha como argumento. Entonces, bien, cuando la función de error es donde tiene lugar la transformación, después de que el componente se renderiza, esta función quedaría atrapada. Esto es todo por ahora. Nos vemos en la próxima conferencia. 35. 34 Efecto de funcionamiento condicional: En este ejemplo, vamos a aprender a ejecutar efectos condicionalmente. En la conferencia anterior, aprendimos que el efecto 2k se llama después de cada render. Y en la mayoría de los casos, llamar a los efectos después de cada renderizado podría crear un problema de rendimiento. Entonces necesitamos una manera de ejecutar condicionalmente efectos en unos componentes funcionales. Rápidamente prácticamente para entenderlo lo suficientemente bien. Cree rápidamente un nuevo archivo llamado ejemplo de efectos a la derecha dentro de la práctica de efectos de Estados Unidos, vamos a tener Efecto ejemplo dos. Puntos, jeers genera el componente funcional, cierra el explorador o hermoso m phi. Entonces como es habitual, tenemos que importar los ustedes y ellos usan efecto porque las mujeres son imágenes de los ejemplos de Buda. Entonces lo que vamos a hacer es copiar todo desde el ejemplo de efecto uno aquí abajo. Efecto ejemplo uno resalta copia. Ven aquí. Sólo tenemos que pegar. Y después de eso, vamos a cambiar los componentes para efectuar el ejemplo dos. Entonces aquí abajo, solo tenemos que efectuar el Ejemplo dos. Seguro. Abra también el componente de la aplicación. Tenemos que renderizar efecto ejemplo a importaciones efecto ejemplo dos punto g es venir aquí, colocar un comentario sobre esto. Y entonces vamos a renderizar efecto ejemplo para guardar. Volvamos al ejemplo dos. Así que aquí mismo, vamos a la consola de registro. El efecto de uso se llama Guardar la aplicación y pagar el navegador. Haga clic en el botón. Todo está funcionando como se esperaba. Cuando inspeccionemos la consola, vas a ver el resultado esperado. El efecto de uso se llama. Ahora quiero mostrarte algo. Implementemos rápidamente el campo de entrada. El uso se importa en la parte superior. La variable de estado está aquí. Ahora tenemos que hacer la variable de estado para el campo de entrada. Supongamos name, setName. Usted afirma. Y el estado inicial va a ser una cadena vacía. Podría ser una comilla doble o una sola cita. De esos dos irán. Bien, implementemos rápidamente el campo de entrada. Hagámoslo justo debajo de la parte inferior. Ciérralo con la etiqueta de cierre automático. Aquí, voy a hacer tipo, probar el valor. Va a ser el nombre. Así que sin cambios, lo que significa que cuando el usuario comienza a escribir en el campo de entrada se llama la función de error, que luego dan acceso a los eventos. Bien, llamemos a la función de nombre del conjunto. Entonces derechos dentro del parámetro de la función setName, vamos a usar los eventos para agarrar lo que sea que el usuario esté escribiendo en el campo de entrada. E Puntos, valor de punto objetivo. Creo que a estas alturas ya deberías entender lo suficientemente bien el evento onchange. Habiendo hecho esto, dirígete al navegador, menos que se compruebe el comportamiento, tenemos que actualizar la consola. Ahora, cuando empiece a escribir en el campo de entrada, vamos a experimentar un comportamiento extraño. Entonces lo hago por bar. ¿Puedes ver cuando tecleas en el campo de entrada, se llama al efecto US? ¿Puedes ver eso? Ahora hemos captado siete veces el efecto de Estados Unidos. Pero mira, nuestra intención es llamar a los efectos solo cuando se hace clic en el botón. Entonces, cuando también haces clic en el botón, también se llama al efecto de usuario. Y cuando se escribe algo en el campo de entrada, ellos usan efecto también se llama. Por lo que esta convocatoria es en realidad irrelevante y definitivamente ralentizará el rendimiento de la aplicación. No es óptimo. La solución a este problema es invocar condicionalmente el efecto US solo cuando se actualiza el valor de conteo. Porque nuestra intención aquí es actualizar el título del documento cuando se hace clic en el botón así, ¿lo ves? Entonces queremos que los efectos se enciendan solo cuando se haga clic en el botón. Pero en este caso, si se escribe algo en el campo de entrada, ellos usan efecto se llama hacer algo así. ¿Ves que todas estas cosas son realmente irrelevantes? Vamos a arreglarlo rápidamente. Aprendimos en la conferencia anterior que el uso de la función vectorial acepta dos parámetros. Primero está el efecto afortunadamente en sí, y el segundo es el array de dependencias aquí mismo. Para poner fin a este problema, tenemos que especificar aquí la coma del segundo parámetro, y luego vamos a tomar una matriz vacía. Por lo que esta aplicación depende de los recuentos para actualizarse. Cuando se actualicen los recuentos, queremos que también se actualice el documento atado. Entonces podemos decir que la aplicación depende de la variable count. Entonces, por lo tanto, tenemos que tomar en la cuenta. Significa que el efecto se va a activar cuando se actualice el conteo. Entonces esta es al menos cómo ejecutar condicionalmente un efecto. Cuando guardas y vuelvas al navegador. Tenemos que actualizar el navegador y también actualizar la consola. Ahora, cuando presionas el botón más, se llama al efecto y el título del documento se levanta detalle. Otra vez. Muestra los mismos resultados. Cuando comencemos a escribir en el campo de entrada. ¿Puedes ver que ya no experimentamos que agregamos comportamiento? Entonces ahora nuestro efecto se llama cuando se actualiza la corriente. ¿Puedes ver? Así que vamos a intentarlo de nuevo, refrescar. Cuando lo meto en el campo emperador, no pasa nada. El efecto no se llama simplemente porque queremos que se llame a los efectos cuando se actualice el conteo. Entonces, cuando presiono el botón más, va a hacer que los componentes vuelvan a renderizar. Y después de que el componente se renderiza, el efecto quedará atrapado. ¿Se puede ver la consola tecnocrática? Todo está funcionando perfectamente bien como se esperaba. Entonces ahora el efecto obtiene código solo cuando se actualiza el recuento de variables de estado. Esto es todo por ahora. En la próxima conferencia, vamos a aprender sobre la función de limpieza de efectos de Estados Unidos. Nos vemos en la próxima conferencia. Mantente enfocado en el cuidado holístico. 36. Función de limpieza de 35 efectos: En esta conferencia, vamos a fortalecer nuestro conocimiento sobre los ganchos de efectos noticiosos. Precisamente. Vamos a discutir la función de limpieza de efectos de Estados Unidos. Entonces, ¿qué es exactamente la función de limpieza de efectos? La función de limpieza es una función inductora de efecto gancho que nos permite ordenar el código antes de nuestro componente en las monturas. Sin embargo, el efecto estadounidense 2k está construido de una manera que podemos devolver una función justo dentro de él. Y esta función de retorno es exactamente donde están los arpones de limpieza. La función de limpieza evita fugas de memoria y elimina algunos comportamientos innecesarios y no deseados. Técnicas. No se puede actualizar el estado dentro de la función de retorno. Entonces para este ejemplo, vamos a construir una sencilla aplicación que bloqueará la posición de nuestro mouse en la consola, comenzando desde las coordenadas x e y. Así que bien, vamos a usar la práctica efectiva. Vamos a crear rápidamente un nuevo componente llamado efectos. Ejemplo tres. Generar el componente funcional. Vamos a importar rápidamente el uso de ese gancho y ellos usan efecto. Efectos más calmados. El más simple eso. Entonces, para las coordenadas x e y, vamos a declarar la variable de estado necesaria para ser utilizada, derecha, dentro del componente. Vamos a tener constante x coma establecida x igual. Usar eso en el estado inicial va a ser un número. En este caso, cero resaltados y duplicados. Aquí va a ser por qué tenemos que establecer y lo más simple que vamos a definir la función para registrar la constante de posición del ratón. Tomando eventos, configurarlo a nuestra función, y vamos a la consola de registro. Este es el evento del ratón. Justo aquí. Tenemos que llamar a la función de configuración para la x y escribir usando la función, vamos a obtener la coordenada x E punto cliente x resaltados y duplicados. Entonces aquí vamos a conseguir y. así que tenemos que llamar a la función de configuración para y o hermosa. Llamemos rápidamente al efecto de uso. Justo fuera de esta función, que está dentro del componente, vamos a invocar el efecto US. Y el efecto es una función que toma en dos parámetros. El primer parámetro es una función de flecha. Y el segundo parámetro va a ser el array de dependencias. Pero por ahora, mantengámoslo así. Así que bien, cuando la función anónima vamos a la consola de registro, se llama al efecto de uso. Y aquí queremos agregar el oyente de eventos. Puntos de ventana, agregar oyente de eventos. Entonces vamos a tenerlo en movimiento del ratón. Cuando mueve el mouse en el navegador, queremos elegir las coordenadas x e y. Movimiento del ratón Kolima. Entonces vamos a invocar la posición del ratón del registro. Estoy aquí. ¿Es lo más sencillo que había en el cuerpo? Vamos a mostrar la posición. Tengamos una etiqueta p coordenada x e y. y. Tenemos que renderizarlo en la app js. Ven aquí. Tenemos que importar el efecto ejemplo tres del efecto de slash de componente. Ejemplo tres destacados. Haz un comentario sobre estos. Ciérralo con la etiqueta de cierre automático. Guardar. Echemos un vistazo al resultado en el navegador. Y yo para abrir la consola. Muy bien, así que cuando mueves el mouse, ¿ puedes ver, ahora puedes ver la posición del mouse en la pantalla Pero una cosa que no nos gusta es que cada vez que movemos el ratón, se llama al efecto. El efecto se llama cada vez que el componente vuelve a renderizar. Muy bien, entonces ahora tenemos que condicionar el efecto pasando el segundo argumento, que en este caso va a ser una matriz vacía. Entonces, cuando especificamos la matriz vacía, prácticamente estamos diciendo a react que este efecto no depende de ninguna sonda ni se quedó. Entonces no hay razón para llamar a este efecto sobre las consecuencias re-renders, lo que simplemente implica que va a quedar atrapado solo por primera vez después de que el componente se renderiza. Pasemos en la matriz vacía como segundo parámetro. La fastidia. Y aquí tenemos que separarlo con una coma y luego tomar una matriz vacía, guardar en el navegador. Vamos a recargar. ¿Puedes ver que el efecto se llama después de que el componente se renderiza por un tiempo falso Ahora, cuando mueva el ratón, el efecto ya no va a enfriarse. Verás, ahora solo tenemos la mayor cantidad coordenadas ingresadas en la consola. Pero cuando elimino la matriz de dependencias, cada vez que mueves el mouse , los componentes se vuelven a renderizar. Y entonces eso hará que este tipo de aquí se encienda. Ahora C, echa un vistazo. Puedes ver cuando muevo el mouse, el componente se vuelve a renderizar y el efecto que se dispara. Y claro, no queremos que los efectos encadenen cada vez que movemos el ratón. Entonces, por lo tanto, tenemos que especificar la matriz vacía así. Cuando especifique la matriz vacía, esto hará que los efectos se enciendan después de que los componentes se renderizen por tiempo falso. Entonces para la consecuencia re-renders, el efecto ya no va a enfriarse. Entonces si pocos meses tus efectos para quedar atrapados, solo unos. Hay que especificar la dependencia vacía RA y visitar. Hermoso. Esto suele ser en n, Guardar en la próxima conferencia. 37. 36 El componente se desmontará: Bienvenidos de nuevo a todos. En la conferencia anterior, aprendimos a imitar componente sí montar con efecto estadounidense. Así que en esta conferencia, vamos a aprender a usar los componentes de voluntad entre funcionalidad que está disponible usando el efecto. Básicamente, lo que vamos a hacer en esta conferencia es crear un contenedor de componentes para el ejemplo log mass que implementamos en la conferencia anterior. ¿Correcto? Dentro del contenedor, vamos a agregar el botón que se utilizará para alternar la visualización de los componentes. Así que rápidamente crea un nuevo archivo llamado contenedor de mamá. Así que bien, dentro de la práctica de efectos, crear un nuevo archivo llamado mouse container dot g es genérico, el componente funcional. Vamos a importar rápidamente EU hizo quién. Además, tenemos que importar el efecto Ejemplo tres. Entonces el siguiente en línea es declarar la variable de estado necesaria para la visualización. Entonces aquí voy a invocar EU sí gancho. Entonces vamos a tener exhibición que venga aquí. Esto tiene que estar en las claves de coma y el estado inicial va a ser cierto. Habiendo hecho esto, correcto, estamos en los GSA no tendremos que agregar un botón para alternar la variable de visualización entre true o false. Alternar pantalla. Especifique el OnClick. Así que vamos a invocar la función de configuración para un conjunto de visualización. Ahora vamos a tener aquí mucha exhibición alta, ¿verdad? Entonces, cuando se haga clic en este botón, vamos a cambiar de verdadero a falso, ¿de acuerdo? Cada vez que se hace clic en el botón y si la variable de visualización es verdadera, queremos renderizar el ejemplo del efecto tres componentes. Hagámoslo rápidamente aquí mismo. Así que vamos a tener si display es true y n, vamos a renderizar Efecto ejemplo tres más cerca con la etiqueta de cierre suave. Entonces el estado inicial de la pantalla se establece en true. Y por esa razón, el efecto ejemplo tres componentes se renderizarán en la pantalla. Y cuando se hace clic en este botón, la pantalla se pondría a false el efecto ejemplo tres componentes serán ascendidos desde la cúpula es tan simple como eso. Vamos a correr rápidamente eso. Un contenedor de mouse en la aplicación destaca. Haz un comentario sobre estos. Ven aquí. Así que vamos a importar la mayoría de los contenedores de slash de componentes, use practice slash mars container. Y claro que tenemos que correr muerto por aquí. Guardar. Vamos a comprobarlo en el navegador. Todo está funcionando perfectamente bien como espectador. Bien, vamos a inspeccionar la consola. Ahora cuando muevo el ratón, se actualizan las coordenadas x e y y la declaración se está imprimiendo en la consola. Y ahora cuando haga clic en la pantalla de alternar, este componente se montará desde el domo. Vamos a darle una oportunidad. ¿Puedes ver eso? ¿Hermoso? Ahora bien, el problema aquí es éste. Si trato de mover el ratón, la declaración también se imprimirá en la consola. Echa un vistazo. Verás, quiero que notes a este tipo de aquí. Cada vez que mueva el ratón, las declaraciones se imprimirán en la consola. Pero mira, tenemos un montado los componentes, pesar de que el componente ha sido eliminado, el oyente de eventos que pertenece al componente sigue escuchando y ejecutando. ¿Ves cuando muevo el ratón por ahí? ¿Ves eso? El problema es este, siempre que montes tu componente, siempre asegúrate de cancelar todas las suscripciones, los oyentes y la solicitud de búsqueda que hiciste. Simplemente porque no queremos exponer nuestra aplicación a fugas de memoria. Lo que tenemos que hacer para resolver este problema es limpiar la función. Al limpiar la función, vamos a imitar el componente ascenderá n. Lo hacemos devolviendo una función, ¿verdad? Estamos en el primer parámetro de los efectos de Estados Unidos. Hagámoslo rápido. Entonces abre el efecto Ejemplo tres. Déjame mostrarte, ¿verdad? Dentro de esta función, vamos a devolver otra función que se llama la función de limpieza. Y voy a hacer ventana dot remove. El oyente de eventos debe mover la posición del ratón del registro más tranquilo. Tan simple como eso. Ahora vamos a buscar algo en la consola para indicar realmente que hemos limpiado nuestra función. Console.log componente es un montado y el código es limpio, seguro. Vamos a sacarlo en el navegador. Vamos a recargar, bien, vamos a mover el ratón. Puedes ver que estamos obteniendo las coordenadas x e y de la posición del mouse. Y tenemos al estadista impreso en la consola. Ahora, cuando haga clic en la pantalla de alternar, el ejemplo de efecto tres componentes estarán montados. Echa un vistazo. Movamos el ratón alrededor para comprobar si todo está bien. Puedes ver que ya no está escuchando el evento. Ahora en la consola, el componente está montado. El código está limpio. Minuto tecnológico de estos puntos clave. Siempre que quieras montar tu componente, asegúrate siempre de cancelar todas las suscripciones, los oyentes y la solicitud de búsqueda que hiciste. Esto es todo por ahora. Nos vemos en la próxima conferencia. Curso más rígido, aquí animalista. 38. 37 Encuentra múltiples publicaciones: Con los sólidos conocimientos adquiridos en las conferencias anteriores. En esta conferencia, vamos a aprender a obtener datos de una API. Y así para implementar este ejemplo, vamos a usar la API de marcador de posición JSON. El marcador de posición JSON es una API de descanso en línea gratuita que puedes usar siempre que necesites algunos datos falsos. Y se utiliza principalmente para enseñar prosa en pareja. Así que rápidamente dirígete a Jason placeholder.code.com. Desplácese hacia abajo hasta las rutas. Aquí. Tenemos diferentes puntos finales. Pero en esta conferencia, vamos a llegar a los múltiples puntos finales de post. Haga clic para abrir. ¿Puedes ver eso? Entonces aquí tenemos los datos en formato JSON, que es simplemente una matriz de objetos con diferentes propiedades en términos de par de valores clave. Entonces, usando el gancho de efecto, queremos recuperar estos datos y mostrarlos en la pantalla con la ayuda de una biblioteca externa llamada ox use. También puedes usar la API de Fetch. Pero en esta conferencia, vamos a concentrarnos en cómo usar los actos. Use rápidamente diríjase a VS Code. Bien, entonces aquí es exactamente donde comienza la forma. ¿Verdad? Estamos en el directorio de componentes. Vamos a crear un nuevo paquete llamado data fetching. Derechos dentro de los datos de envejecimiento, vamos a crear un nuevo componente llamado fetch. Múltiples publicaciones generan el componente funcional. Vamos a declarar rápidamente unas variables de estado para ser utilizadas. Pero antes de continuar, primero, tenemos que importar EU sí enganchó en el nivel superior. Justo aquí. Vamos a declarar unas variables de estado para el post. Voy a hacer const posts, coma, set posts. Y el estado inicial va a ser una matriz vacía. Cuando observes la estructuración del RAD, te darás cuenta de que el elemento se nombra con pleura preocupada, ¿sabes por qué? Es simplemente porque estamos recuperando múltiples datos. Entonces, cuando escribes código como un profesional, siempre tendrás que enfocarte en las convenciones de nomenclatura. Tienen razón. Hablé demasiado. Sigamos. Bien, entonces lo siguiente en la fila es llamar al aro de efecto. Y antes de continuar, también tenemos que importar el efecto estadunidense. En el nivel superior. Aquí. Vamos a llamar al uso la función de efecto. Y la función de efecto toma en una función de flecha a medida que cae parámetro. Así que bien, dentro de esta función de error es donde vamos a hacer el cuestionario getter. Pero antes de continuar, también tenemos que instalar una biblioteca externa llamada axial. Rápidamente aquí en la terminal. Tenemos que detener el servidor actualmente en ejecución Control C para detenerlo y asegurarnos de que estás en el directorio del cliente. Y luego voy a hacer node package manager install. La instalación está en curso. Hecho, Acceso instalado, exitoso. Y en la parte superior, también tenemos que importar axiomas desde el módulo de acceso. Lo más simple ese derecho, dentro de la función de efecto, tenemos que hacer una solicitud get a la URL. Y voy a hacer axiomas punto get. Y luego volver al navegador. Tenemos que copiar la URL. Y cuando lleguemos a esta URL, se recuperará la totalidad de este post. Suena bien. Hermoso. Hagámoslo rápido. Copiar y luego pegarlo aquí mismo. El más sencillo que no lo hayan hecho, la solicitud get devolverá una promesa. Entonces tenemos que registrar la respuesta. Aquí. Voy a hacer punto. Entonces. Aquí vamos a tomar en respuesta. Justo debajo, vamos a consolar a los encuestados de registro. Si hay algún error, tenemos que atraparlo e ingresarlo también en la consola. Capturan puntos. Para captar el error y registrarlo en el error de la consola. Así que estamos cortando el aire por aquí. Entonces, sea cual sea la flecha, vamos a la consola de registro. El error es el más simple que tienen razón. Entonces, habiendo hecho esto, siguiente en la fila es actualizar el estado inicial con la nueva Costa. Entonces para eso, tenemos llamar a la función de configuración por aquí. Establecer las publicaciones a los datos de puntos de respuesta. Chicos geniales. Cuando hagas esto, todo aparecerá como se esperaba. Vamos a renderizarlo rápidamente en la pantalla. Ven aquí. Voy a usar los derechos de etiqueta UL dentro las llaves de cierre de apertura UL para tomar expresiones JavaScript. Y voy a hacer post dot map. Déjame mostrarte este post aquí mismo. Este tipo, queremos mapear a través de lo que tengamos aquí y cómo se muestra en la pantalla. Y sabes que el método map toma en otra función. Y esta función toma en un parámetro. Este parámetro de aquí representa cada puesto en lo mínimo. Aquí vamos a tener la etiqueta LI. Así que bien, dentro del HTML interno, podemos hacer post dot title. Déjame mostrarte rápidamente. Puedes ver que tenemos el título por aquí, el ID del cuerpo y el ID de usuario. Entonces en mi caso, solo quiero recuperar el título. Puedes decidir recuperar el cuerpo y el resto de ellos. Entonces ahora también tenemos que especificar la clave, clave equa post dots ID, que es este ID de aquí. Qué hermoso. Vamos a importar buscar múltiples publicaciones de datos de barras de componentes que buscan, lodos , buscar múltiples publicaciones. Y cierra esto rápidamente. Trae múltiples publicaciones, guarda, dirígete a la terminal. Tenemos que poner en marcha el servidor. Y son estos hermosos. Ahora, hemos logrado recuperar todas estas publicaciones por aquí, que es precisamente la herramienta PIE. Si quieres recuperar el cuerpo, es sumamente sencillo. Ven aquí y luego solo tienes que hacer post dots body safe en el navegador. Puedes ver ahora que hemos recuperado tanto el título como el cuerpo. Así que puedes hacerlo al final, pero quiero que sea sencillo por aquí. Guardar en el navegador. Todo está funcionando perfectamente bien como se esperaba. Pero cuando observes la consola, verás la repetición continua de datos para el envejecimiento. ¿Puedes ver? Pero queremos que los datos sean buscados solo en el componente que montó. Para ello, tenemos que volver al código y especificar la matriz de dependencias. Derecho, dentro de la función de efecto. Justo aquí. Déjame mostrarte que esta es la función de efecto. Entonces el segundo parámetro va a ser una matriz vacía. Al guardar y volver al navegador. Vamos a recargar. ¿Ves ahora la consola está extremadamente limpia y todo está funcionando perfectamente bien como se esperaba? Esto es todo por ahora. Nos vemos en la próxima conferencia. Mantente enfocado y cuidado holístico. 39. 38 Botón clic id: En esta conferencia, vamos a aprender a desencadenar el efecto en la camarilla de votación. Por lo que la intención de esta conferencia es hacer la solicitud GET dentro del manejador de clics. Para continuar, necesitamos una variable de estado cuyo valor solo cambiará en la camarilla de navegación. Y por ahora, el único valor que cambia en esta aplicación es este id Así que déjame mostrarte rápidamente como pilar Zuma siendo. Entonces cuando hago una, ¿lo ves? Entonces de esto es de lo que estoy hablando ahora mismo. Nosotros queremos hacerlo en la camarilla de votación. Por lo que no queremos implementarlo de esta manera. Vuelva rápidamente al código VS y procedamos. Implementar dicha funcionalidad. Declaremos rápidamente una nueva variable de estado cuyo valor cambiará cuando se haga clic en el botón. Justo aquí. Voy a hacer justo así. Entonces llamaré a este botón clic ID. Por supuesto, esto va a ser cambiado así, simple como eso. Entonces vamos a dejar el estado inicial así. Así que vamos a implementar rápidamente la navegación. Bien, así que antes de continuar, tenemos que formatear el código para que se vea limpio, un poco Hermoso. Ahora vamos a tener el botón por aquí. Onclick de este botón. Queremos invocar una función y se maneja el nombre de la función. Haga clic en el botón, escriba, canotaje, y luego el valor va a ser id y ratas. Pero en la prueba interna voy a hacer post graso. Bien, estamos bien para irnos. Sólo queda una cosa, ahora mismo. Y así queremos establecer el botón click ID al nuevo ID en el campo de entrada. ¿Y cómo lo hacemos? Tenemos que hacer eso, verdad? Dentro de esta función. Aquí, la tina, vamos a tener una función constante cien clic, Configúrela a nuestra función. Y luego tenemos que llamar a la función de configuración para el botón set click. Y ahora lo estamos actualizando con el ID actual en el que el usuario ingresará, en el campo de entrada así. Es tan sencillo como eso. Entonces con esto, estamos configurando el botón click ID, el ID que se capturará desde el campo de entrada. Y así lo siguiente en línea es permitir que el efecto dependa del ID desde el ID de clic inferior y no del onchange irregular. Déjame mostrarte rápidamente. Puedes ver previamente nuestro efecto depende de este ID que será capturado desde el campo de entrada. Pero ahora queremos fijarlo en el ID de clic inferior, que es este tipo de aquí. Aquí. Tenemos que cambiarlo a botón click ID. El ID que capturamos del campo de entrada está siendo almacenado justo dentro de este tipo de aquí. Vamos a comprobarlo en el navegador. Guardar en el navegador como el indicado. No vas a buscar. Hermoso. Hagamos dos. Aquí en buscar. Frase perfecta. Todo está funcionando perfectamente bien como se esperaba. Esto es todo por ahora. Nos vemos en la próxima conferencia. Todavía enfocado en el cuidado holístico. 40. Introducción a la API de contexto: Bienvenidos de nuevo a todos. Ahora vamos a discutir unos ganchos muy interesantes y poderosos llamados contexto estadounidense. Pero antes de continuar, es bueno. Entendemos qué es la API del concurso y cómo funciona. Entonces, después de eso, exploraremos los ganchos del contexto estadounidense que facilitan las cosas. Entonces, ¿qué es una API de concurso? Consideremos rápidamente una aplicación React que tenga varios componentes. Ahora, en la parte superior está el componente de la aplicación, que es, por supuesto, los componentes raíz de cada aplicación React anidada dentro de los componentes de la aplicación son varios otros independientes, un componente aislado en diferentes niveles de árbol. Y tenemos los componentes a, b, y c son el primer nivel. Componente. X está anidado dentro del componente B. Componente ¿Por qué se anida dentro de la competencia? Y el componente z está anidado dentro del componente y. Y ahora el reto que tenemos aquí es mostrar el precio total de un artículo en los componentes a, x y z. Y el precio del artículo se mantendrá como una propiedad en el componente app. Entonces, para poder mostrar el precio y los componentes anidados, tenemos que pasarles el premio como sondas. Bien, así que para que el componente a reciba este precio, tenemos que pasarlo directamente como utilería. Y eso es bastante sencillo y directo. Para que el componente X reciba este precio, tenemos que pasarlo por el componente intermedio B hasta la compañía y los huevos. Para que el componente z reciba el concurso de precios, tenemos que pasarlo por la competencia intermedia y Y. ¿Bien? Entonces, cuando observes el árbol del componente cuidadosamente, te darás cuenta de que los componentes b, c e y no necesitan las sondas. Pero aún tenemos que pasar las sondas por el componente para llegar al componente requerido donde se consumirán los datos. Entonces, en este escenario, los componentes B, C e Y se denominan portadores de sondas que no hacen uso de las indicaciones, sino que tienen que llevar las sondas a los componentes requeridos de preocupación. Por lo que el proceso de pasar apoyos a través del componente anidado se llama sondeos de perforación. Entonces ahora mismo, quiero que cierren los ojos e imaginen que tenemos más de 25 componentes anidados por aquí. Entonces significa que todo este componente intermedio, tendremos que reenviar las sondas al componente de preocupación. Y claro, vamos a ensuciar nuestro código. Y por la presente se convierte en un problema para ciertos tipos de indicaciones que requieren muchos componentes en nuestra aplicación. Como las preferencias de idioma. La autenticación utiliza el tema de la interfaz de usuario. Bien, Así que quería ser amable si podemos enviar datos directamente al componente requerido de preocupación sin tener que sondear, perforar a través de los componentes anidados. Bien, Así que aquí es donde concurso de columnas API. concurso proporciona una manera de pasar datos a través del árbol de componentes sin tener que perforar manualmente a lo largo del semestre. Empresas. En otras palabras, el concurso de reacciones nos permite compartir datos a través de nuestro componente más fácilmente. Ayuda a evitar sondas, perforaciones. Sí, así que esto es todo por ahora. En esta conferencia, vamos a ver cómo se utilizó la API de contexto antes de la introducción de quién se ocupa de eso. Tenemos muchas mentiras prácticas, el contexto estadounidense se engancha para ver la flexibilidad que aporta a la mesa. Bien, así que vamos a usarlo prácticamente en la próxima conferencia. Nos vemos entonces. 41. 39 contexto de implementación: En esta conferencia, vamos a tener una comprensión práctica del contexto, API y cómo funciona. Por lo que vamos a implementar un concurso de precios que permitirá a los componentes de diferentes tres niveles leer una sonda que se pasa en el nivel superior. Y justo, en este ejemplo, vamos a utilizar el componente z para mostrar el precio de los artículos sin tener que sondear, perforar la competencia intermedia y por qué. Y por cierto, he creado una aplicación React llamada concursos de práctica. Así que rápidamente pausa la conferencia al final y luego genera una nueva aplicación React. Bien, habiendo hecho eso, vamos a crear rápidamente el directorio de componentes. Derecha, dentro del SRC. Haga clic con el botón derecho en nuevos componentes de alimentos. Y el directorio de componentes. Vamos a crear competencia y y z componente z punto js. Por último, vamos a tener competente y punto j es hermoso. Entonces solo tengo que llevar la z al STM por aquí, comando V para cerrar el Explorer. Y luego vamos a generar los componentes funcionales, ¿verdad? Estamos en las flores. Y ahora nos vamos a centrar en el borde derecho del árbol. ¿Bien? Entonces, cuando observas el borde derecho del árbol, te darás cuenta de que el componente z está anidado dentro del componente y componente y está anidado dentro de la competencia. Y por último, la competencia se anida justo cuando el componente de la aplicación. Así que sigamos rápidamente este patrón y lo transformemos en código. Entonces siguiendo el patrón del árbol, el componente z se anida en y Entonces aquí es competente ¿por qué? Vamos a importar el componente z, el componente z y luego vamos a renderizarlo por aquí. Componente ¿por qué está anidado dentro del componente C? Volver a la competencia, importa componente y. Entonces aquí tenemos que renderizar el componente y. Por último, la competencia se renderizará en el componente app. Vaya al componente App. Competencia de importación de competencia de barra competente y pelo rojo. Tenemos que hacer que la competencia sea tan simple como eso. ¿Verdad? Entonces aquí es que Lee es donde comienza la diversión. Para implementar concursos. Tenemos que seguir cuatro pasos. primer paso es crear el concurso usando concurso decretado metilo justo en la parte superior. Y por favor no lo hagas aquí mismo. No lo hagas dentro del componente. Tiene que estar afuera aquí. Hermoso. Y ahora vamos a crear un concurso de precios. Costo. Concursos de precios, iguales, reaccionar, puntos, crear concurso. Una vez hecho esto, el paso dos es tomar su concurso creado y envolver al proveedor de contenido alrededor de su árbol de componentes. Entonces aquí solo tengo que destacar a este tipo por ahora y luego cortarlo. Y por aquí, vamos a hacer concurso de precios proveedor punto. Perfecto. Y luego tenemos que pegar el componente en el medio. Es tan sencillo como eso. ¿Verdad? Pasemos al paso tres. Ahora, vamos a poner el valor requerido en tu proveedor usando el valor prop. Lo que voy a hacer aquí mismo es llevarle utilería, que es igual valor. Ahora, tenemos que especificar un premio, y voy a hacer $200. Y por último, el paso cuatro es consumir el valor dentro de cualquier componente utilizando el consumidor del concurso. Entonces, antes de continuar, tenemos que exportar el contexto. Ven aquí. Vamos a hacer este tipo aquí mismo. Podremos importarlo en un módulo diferente. Y ahora el reto aquí es consumir este valor en el componente z sin tener que sondear, perforar la competencia e y. hagámoslo rápidamente. Ven a empresa y z. En la parte superior, vamos a concurso de precios de importación desde el componente app. Tan rápido limpie esto. Entonces aquí vamos a tener concurso de precios punto consumidor. Y vamos a tener precio. Así que aquí mismo, vamos a devolver un div ¿verdad? Dentro de la def. Tenemos que mostrar el precio seguro. Asegúrese de ejecutar su aplicación y luego pagar el navegador. Aquí está. ¿Puedes ver eso? ¿Hermoso? Déjame acercar un poco más alto, ¿verdad? Entonces ahora hemos podido consumir el precio que se mantiene en el componente app, ¿verdad? En el componente z, incluso sin tener que perforar a través de los componentes intermedios, amigos. El concurso es de hecho poderoso y un bajo. Bien, entonces lo siguiente en la fila es tomar en otro contexto, porque en tu aplicación, más probable es que vayas a tener múltiples valores para ser consumidos en un componente diferente. Entonces veamos cómo implementar múltiples contenidos. Dirígete al componente de la aplicación. Supongamos también que queremos mostrar el nombre del elemento. Bien, entonces primero mostramos el precio del artículo, y ahora tenemos que mostrar el nombre del artículo. Así que vamos a crear rápidamente un nuevo concurso. Exportar const, y voy a llamarlo concursos de ítem, equa, React dot, crear contenidos, que exporten editar. Podremos usarlo en diferentes archivos. Tan rápido. Aquí se va a anidar dentro de item contest dot provider. Hola, deja que el comando de etiqueta de cierre X corte y luego pégalo aquí. Formateemos rápidamente el código para tener una sangría adecuada. Hermoso. Puedes formatear el código con más bonito. Por supuesto, ya deberías saber cómo hacerlo. Bien, así que habiendo hecho esto, tenemos que darle un valor al concurso. El concurso de artículos va a tener un prop de valor , Supongamos Samsung. Entonces, habiendo hecho esto, tenemos que consumir este concurso retenido en compañía en z. Así que aquí mismo, también tenemos que importar el concurso de artículos. Habiendo hecho eso, ven aquí, resalta Comando X para cortar. Y luego vamos a devolver el contenido del artículo punto consumidor, abrir y cerrar los corchetes. Entonces vamos a tener la función por aquí. ¿Verdad? Dentro de esta función, vamos a devolver el div Comando V para pegar el div. Y por aquí también tenemos que exhibir el artículo. Entonces solo hay que hacer artículo como este. Entonces hagámoslo más legible. Aquí voy a hacer concursos de prensa, y aquí voy a hacer concurso de artículos. Bien, así que vamos a formatear rápidamente el código con más bonito. Perfecto, ahorra. Vamos a sacarlo en el navegador. ¿Ves que el concurso de precios es de $200? El artículo es Samsung friends. Esto es extremadamente impresionante y me encanta. Así que ahora somos capaces de obtener múltiples valor de concurso. Pero una cosa que quiero decir es que este enfoque es bastante voluminoso. Entonces para reducir la complejidad Revlon Mickey's del contexto estadounidense engancha. Y entonces vas a ver cómo podemos consumir concurso múltiple apenas en pocas líneas de códigos. Esto es todo por ahora. En la siguiente conferencia, vamos a practicar el concurso de uso. ¿Quién te ve en la próxima conferencia? Mantente enfocado en el cuidado holístico. 42. 40 useContext para múltiples contextos: En la conferencia anterior, aprendimos a consumir concurso múltiple con el patrón de render props. Y en esta conferencia, vamos a consumir ese mismo concurso múltiple utilizando el concurso de uso ¿quién se ve menos práctico? ¿Es rápido? Bien, así que no hay necesidad de crear un nuevo componente. Entonces vamos a usar el componente y para consumir el valor del concurso, bien, en esta conferencia. Componente y, una cosa que hay que tener en cuenta es que los pasos para implementar concurso siguen siendo exactamente los mismos. Lo único que va a cambiar es el patrón de consumo. Así que usar contextos es muy fácil de consumir valor de los contenidos con unas pocas líneas de código. Para proceder con el gancho de contexto estadounidense. Primero, tenemos que importarlo en un lugar, una coma aquí mismo, y luego usar concurso. El siguiente en línea es importar el concurso necesario para ser utilizado. Concurso de precios de importaciones desde nuestro componente app. Y luego también tenemos que importar el concurso de artículos. Ambos vienen del componente de la aplicación. Una vez hecho esto, la siguiente línea es invocar el gancho del concurso estadounidense. Bien, entonces el contexto estadounidense es una función. Entonces tenemos que invocarlo, ¿verdad? Dentro de la función de contexto de Estados Unidos, vamos a pasar el precio y el concurso de artículos como parámetro. Entonces usamos concurso y luego vamos a pasar en el concurso de precios, destacados, duplicado. Y aquí vamos a pasar en el concurso de artículos. El contexto estadounidense devolverá el valor del concurso. Así que vamos a asignarlo a una variable constante. Oye, voy a hacer, voy a llamar al precio variable. Y aquí vamos a llamar al ítem variable. Así como esto. Es tan sencillo como eso. Vamos a borrar esto. Y por último, tenemos que consumir el contenido y los amigos. Echa un vistazo. Es sumamente fácil consumir el concurso. Sólo tenemos que hacer referencia a estas variables. Déjame mostrarte rápidamente. Aquí. Voy a hacer precio y voy a hacer aquí artículo, guardar en el navegador. Y ellos son estos. ¿Puedes ver eso? ¿Hermoso? No podemos consumir concurso múltiple solo en una línea. Esto es fantástico y me encanta se pone todo para ser honesto contigo, la introducción de quién puede reaccionar, hacer las cosas muy fáciles. Tantos comparan la implementación anterior. Definitivamente apreciarás la introducción de ganchos en React. Y ahora la pregunta es, cuándo debemos usar el concurso React? El concurso React es genial cuando estás pasando datos que se pueden usar en diferentes componentes de tu aplicación. Y este tipo de datos incluye datos de equipo como oscuro o claro, estado de ánimo. Utilizar nuestros datos, que es el usuario actualmente autenticado. Y por último, los datos específicos de la ubicación como usamos nuestro idioma se encuentran en. Otra pregunta que me viene a la mente es, ¿cuál es exactamente el problema que reaccionan, impugnan, resuelven? Concurso React. Ayúdanos a evitar el problema de la perforación de puntales. Esto ya está apagado y nos vemos en la próxima conferencia. Steph, analista de costos, Cuídate. 43. 41 Ganchos reductores: En la conferencia anterior, tuvimos una introducción detallada sobre el uso de ganchos reductores. Entonces en esta conferencia, vamos a proceder con el ejemplo práctico. Vamos a demostrar este ejemplo implementando una sencilla aplicación de contador. Así que no podríamos incrementar el valor del contador, decrementar e incluso restablecer el valor del contador a cero. Aunque la aplicación puede parecer simple. Pero nuevamente, es Exhibe el patrón que verás en tu codificación cotidiana. Rápidamente dentro del directorio del componente. Vamos a crear un nuevo paquete llamado use reduce nuestra práctica. Dentro de este bolsillo. Vamos a crear un nuevo componente llamado mi contador uno. Generar el componente funcional justo dentro de los GSA. Adelante para crear tres proteínas diferentes. Justo dentro del div. Vamos a tener un cerrojo en los incrementos. Y voy a duplicarlo dos veces. Esto va a ser decrementos y esto va a ser reseteo de votación. Por lo que la línea Western es para crear el contador que se mostrará en los GSA. Entonces para eso, necesitamos el uso de crestas o gancho. Para implementar el uso de crestas o gancho. Primero, tenemos que importarlo a un nivel superior. Entonces aquí voy a hacer uso reductor. No lo he hecho. Al igual que otros ganchos que estudiamos en la conferencia anterior. El usuario, que es nuestro gancho, también es una función. Tenemos que invocarlo. Así que los derechos dentro del componente, vamos a invocar el uso es nuestro gancho. Rápidamente tengamos un resurgimiento de las mismas etiquetas. Anteriormente, nos enteramos de que las crestas o gancho de EU acepta dos argumentos. El primer argumento es un método reductor, y el segundo argumento es el estado inicial. Entonces bien, dentro del parámetro, vamos a tener el método reductor coma y luego el estado inicial. Una vez hecho esto, lo siguiente en línea es declarar el estado inicial y definir la función reductora. Así que ve fuera del componente. Justo en la parte superior. Vamos a tener estado inicial constante igual a cero. Definamos rápidamente la función reductora. Reductor de costos, ajústelo a nuestra función. Por lo que la función reductora acepta dos parámetros. Primero es el estado actual, y el segundo parámetro es la acción. Entonces vamos a tener el estado actual más calmado la acción. Y así reducen nuestra función también devuelve un valor, que es el nuevo estado. Aquí para la enseñanza de ponencias. Voy a hacer regreso. Nuevo estado así. No te preocupes. Vamos a ver cómo va en el futuro. Para que tenga lugar la transición, tenemos que activar el segundo parámetro en la función reductora, que es la acción. Entonces puedes pensar en la acción como una instrucción que se le da a la función reductora. Y con base en la especificación de la acción, el reductor realizará la transición de estados necesaria. Entonces para este ejemplo, vamos a tener tres acciones distintas. El incremento, decremento y la acción de reinicio. Así que vamos a borrar esto rápidamente. En el caso de Reducer, la práctica común de implementar código basado en su acción es usar la caja del switch. Entonces aquí vamos a hacer switch. La expresión switch va a ser acción siguiendo los requisitos de nuestra aplicación. Lo real aquí va a ser incremento, decremento n, la acción de reinicio. Entonces aquí vamos a tener el primer caso para ser columna de incremento. Y vamos a devolver el estado actual más uno, el punto más simple. Y aquí sólo tengo que duplicar estos, duplicados dos veces. Y aquí vamos a tener el decremento. La nueva etapa va a restar una del estado inicial. Aquí vamos a tener caso roseta, que es restablecer el estado a valor cero. Y ese es el estado inicial. Entonces esto va a devolver el estado inicial. Y por último, tenemos que especificar el caso por defecto. Este caso, vamos a devolver el propio estado. Es tan sencillo como eso. Ahora, lo siguiente en la fila es despachar la acción. De manera similar a los Estados Unidos que usan los ganchos reducen nuestros retornos un par de valores que podemos agarrar usando la estructura 3D y la sintaxis. Aquí voy a hacer const justo dentro. Y aquí vamos a tener el método de despacho. Entonces asígnalo así. El reductor de uso devuelve el estado actual, que en este caso lo llamamos conteo, junto con el método de despacho. Y el método de despacho se utiliza para ejecutar un código correspondiente a una acción en particular. Entonces el conteo de aquí es una variable que se usa para almacenar el estado inicial tan rápido, ¿verdad? Dentro de los GSA, usaremos la etiqueta head one para mostrar el conteo. Ahora vamos a hacer él había ganado, justo dentro. Tenemos que mostrar el conteo, que es este tipo de aquí mismo que se usa para sostener el estado inicial y también el estado que se actualizará. Esto solo se usa para retener al estado, ¿de acuerdo? Y este tipo de aquí es usado para despachar el código basado en su acción. Eso lo vas a ver en un tema G. Entonces bien, dentro de lo de la pelota, tenemos que especificar su propia camarilla. Dentro del OnClick. Vamos a tomar en una función de error que se utilizará para invocar el método de despacho. Y el método de despacho va a ser utilizado para ejecutar un código basado en su acción. Tenemos incrementos de acción. Es tan sencillo como eso. Entonces ahora voy a copiar estos. Sidway. Lo copié directamente desde los corchetes de apertura hasta el clic Copiar. Ven aquí y pega. Entonces solo tenemos que cambiarlos a decremento porque queremos despachar la acción decrementaria. Así que ven aquí así y pegarlo también. En este caso, queremos despachar la acción de reinicio. Cuando despachamos la acción de incremento, se va a sumar una al valor actual inicial. Cuando despachemos la acción de decremento, restará una del valor inicial de la lata. Y por último, cuando despachemos la acción de reinicio, restablecerá el conteo a cero, que es el estado inicial. Vamos a renderizarlo rápidamente en el componente de la aplicación. Ven a la cima y luego tenemos que importar, puedo decir uno de los componentes slash use, reducir nuestra practica, slash mi contador uno. Voy a desplazarme hacia abajo. Sólo tenemos que aleatomizar el contador uno. Ciérralo con la etiqueta de cierre automático. Guarde y asegúrese de ejecutar la aplicación en el terminal. Déjame mostrarte. ¿Puedes ver que mi aplicación se está ejecutando actualmente en el navegador La idea es, ¿lo ves? Vamos a darle una oportunidad dando clic en el tablero Haines, hago clic en el incremento, Botkin. Se incrementa. El que hago clic en decremento , decrementa a cero. Y de nuevo, golpeé en el incremento, incremento, incremento. Y luego déjame intentar reiniciar esta vez. Hermoso. Todo está funcionando perfectamente bien como se esperaba. Entonces, para recapitular, vuelve al código VS y déjame mostrarte rápidamente para hacer uso del reductor estadounidense. Primero, hay que importarlo en la parte superior. Y entonces el reductor es una función. Por lo tanto, hay que invocarlo también. Esta función toma en dos parámetros. Primero es el método reductor, y el segundo es el estado inicial. Y también el uso de crestas o hook devuelve una matriz de dos valores, que en este caso el estado inicial y un método de despacho. El método de despacho se utiliza para despachar la acción y el recuento de variables aquí se utiliza para almacenar el valor de esta tabla. Entonces cuando vas a la cima donde tenemos la función reductora, este tipo de aquí, que es el primer parámetro en EU, crestas o gancho aquí, la función reductora toma en dos parámetros. Primero está el estado y después la acción. Entonces, en el caso de un reductor, la convención para implementar código basado en su acción es usar las teclas dulces. Y por eso tenemos la suite de nuestro cabello. Y aquí mismo en el switch, implementamos las acciones. Bien, entonces tenemos incrementos. Esto devolverá un nuevo estado que sumará uno al estado inicial. Y claro, debes saber que el estado inicial es también el segundo parámetro. Derechos. ¿No usarías reducir nuestra función? Aquí, es. Bien, entonces cuando la acción es incremento, se va a sumar una al estado inicial. Y cuando la acción es decrementos, también estamos restando uno del estado inicial. Y luego cuando se restablece la acción, restablece el valor a cero. Y aquí tenemos el estado por defecto de la aplicación. Escribe, ¿no sería el de Jesse? Implementamos un onclick para llamar al método de despacho. Entonces bien, dentro del método de despacho, especificamos la acción. Esto suele ser ahora y en la próxima conferencia tomaremos un ejemplo más complejo. Nos vemos en la próxima conferencia. Mantente enfocado en lo holístico. 44. 42 Estado y objeto de acción: El segundo ejemplo del reductor de uso será examinado en esta conferencia. Y en esta conferencia, emplearemos el objeto estatal y los objetos de acción en lugar del estado directo y la acción que implementamos en la conferencia anterior. Tan rápido no usamos reducir nuestra práctica, crear un nuevo componente llamado mi contador para abrir rápidamente mi contenedor uno, aquí está resalta y copia todo el código guardado en mi cámara dos y pega. Hagamos rápidamente las correcciones necesarias. Aquí. Solo tenemos que cambiar mi contenido, quiero hacer contacto a cuando guardes hermosa. El siguiente en línea es transformar la variable de estado actual en un objeto. Desplázate hasta la parte superior. Entonces lo que voy a hacer ahora mismo es borrar esto. Ahora tenemos que fijarlo a un objeto, ¿verdad? Dentro del objeto. Voy a hacer Cantor. Ponlo a cero, igual que estos derechos estaban en la interfaz de usuario. Ahora vamos a hacer aquí contar puntos, contador a. los recuentos representan los objetos no probados. El siguiente en línea es convertir nuestra simple acción de cadena en un objeto. Y aquí está. Justo dentro del método de despacho, solo voy a resaltar y luego cortar la cuerda. Ahora, tenemos que convertirlo en un objeto. Dentro de este objeto, vamos a tomar en una propiedad llamada type type y el tipo de acción es incrementos. Entonces aquí también tenemos que cambiarlo a un objeto, resalta y corta la cadena, cambiarla a un objeto, y tomando el tipo, el tipo de acción es decremento. Lo mismo aquí. El más simple eso. Y con esto, vamos a despachar una acción basada en el tipo de acción. Entonces a la derecha, dentro de la función reductora, desplácese hacia arriba. La expresión switch va a ser action dot py. Entonces, para la acción de incremento y decremento, vamos a devolver el nuevo objeto de estado, resaltarlo y eliminarlo. Vamos a especificar un objeto. Cuando el objeto vamos a hacer, contra el aire, luego los puntos contrarrestan un más uno. Eso es lo más simple, esa misma cosa aquí. Especifique que el objeto contiene un contacto de punto de estado un menos uno. Yo espacio esto un poco. El estado del componente y la acción ahora se transforma en un objeto. Y eso es todo. Renderizado es complementar la aplicación Js. Y veamos qué tenemos en el navegador. Las importaciones de componente slash Use reducen nuestra práctica de cortar mitocondrias a, resaltemos esto y hagamos un comentario al respecto. Entonces vamos a darle mi contador a eso. G está más cerca con la etiqueta de cierre automático. Guarde la aplicación y asegúrese de que se esté ejecutando directamente dentro de la terminal. Y el navegador. Vamos a sacarlo. Incremento decremento se restablece como lo haríamos otra vez, incremento, decremento y recibimos. Todo está funcionando perfectamente bien como se esperaba. Hermoso. Ahora la pregunta es, ¿por qué querría preferir este enfoque en comparación con el enfoque anterior? Bien, entonces vamos a demostrar un ejemplo que dará una respuesta válida a esta pregunta. Entonces con eso, obtendrás el entendimiento lo suficientemente bien. Entonces, supongamos que queremos despachar diferentes valores y resorts. Digamos que tenemos dos cuerpos extras para incrementar y decrementar contar en cinco. Eso sería posible y muy fácil si la acción es un objeto. Y cuando revises el objeto de acción, te darás cuenta de que solo tiene una propiedad, que es el tipo de acción. Entonces vamos a agregar otra propiedad al objeto action. Y esa propiedad se llamaría valor, que representará el número que se utilizará para incrementar o disminuir el valor de conteo. Entonces, para reportar cosas que creamos antes, vamos a agregar una propiedad extra para comer, ven aquí, coma, y luego valoramos. Tenemos que establecerlo en uno simplemente porque queremos que este botón incremente el valor del estado inicial por una coma aquí mismo. En la propiedad de valor y fijarlo en uno. Por lo que esto decrementará en uno el estado inicial. Y ahora en este ejemplo, queremos extrapolar que se utilizará para incrementar y decrementar en cinco el valor de conteo. La fórmula de copia es 25, 26. Duplicarlo. Y aquí voy a hacer incremento cinco. Aquí voy a hacer incremento cinco, ¿verdad? Entonces aquí voy a hacer cinco, el valor cinco. Una vez hecho esto, también tenemos que volver a la función reductora. Y entonces no tenemos que codificarlo así. Lo que voy a hacer ahora mismo es el valor de punto de la subasta Plus. Y este valor es, esto. Aquí va a ser el valor de punto de subasta. Entonces este valor representa a cada uno de este tipo de aquí, a todo este tipo de aquí. Vamos a guardar rápidamente la obligación consultar los resultados en el navegador. Vamos a probarlo. Al golpear en el tablero significa incremento por un hermoso decremento por un incremento perfecto cinco. ¿Ves ese decremento por cinco? Todo está funcionando perfectamente bien como se esperaba. Voy a presionar el botón de reinicio. Échale un vistazo. Hermoso. Entonces, al hacer uso de la acción como un objeto, podemos usar múltiples datos en la función reductora. Entonces esta es una de las respuestas a la pregunta que planteamos anteriormente en esta conferencia. Ahora, vamos a demostrar el segundo ejemplo para dar una respuesta más válida a la pregunta que se planteó anteriormente. Y en este ejemplo, nos vamos a centrar en el escenario como un objeto. Entonces, supongamos que desea implementar múltiples contadores. La mejor manera y hacerlo es cuando el estado es un objeto, desplácese hacia la parte superior. Entonces ahora vamos a tener un nuevo contracto. Y esto se llamará contador B. Voy a fijarlo en 15. Para actualizar el valor del contador B. Tenemos que crear dos cajas de switch más. Ven aquí mismo. Lo que voy a hacer ahora mismo, porque ya hemos creado antes, solo voy a destacar de las líneas 11 a 13 duplicadas. Mírenme como voy a seleccionar el contador a. y después tenemos que resaltar todas las ocurrencias de contacto a dentro de la acción que lo duplicará. Toma tu causa o al borde derecho y luego límpiala aquí. Voy a hacer contador ser tan sencillo como eso. Y ahora tenemos dos propiedades diferentes como los objetos divididos. Para obtener los resultados esperados, tenemos que igualar la propiedad estatal. Déjame mostrarte cómo hacer eso. Punto punto, puntos, estados, presione una coma. Yo sólo voy a copiar y luego pegarlo así, así. Entonces, por último, tenemos que implementar la navegación para despachar la acción en onclick. Cuando me desplace hacia abajo, sólo voy a copiar el incremento cinco. Ven aquí. Hagamos un div anidado dentro de este div. Y entonces voy a llamar a estos incrementos contacto ser Resaltar, Copiar, ven aquí y pega. Entonces esto va a ser decremento contador B. Tenemos que exhibir contador ser. Aquí. Voy a usar la etiqueta H2 para mostrar conteo B de puntos en B. Entonces lo que voy a hacer ahora mismo es que solo tengo que especificar que esto es a. este es el contador B. Y ahorras en el navegador. Hermoso. Entonces el estado inicial de a es cero. Déjame mostrarte escribiendo este objeto de fecha. ¿Aquí está? Para kappa B es 15. Entonces, cuando hacemos clic en este botón, deberíamos poder administrar los estados de la junta. Entonces esa es la belleza de usar a los Estados como objeto. Ahora vamos a darle una prueba. ¿Ves que funciona perfectamente bien como se esperaba? Le pegué al reinicio y vamos a probarlo para que COUNTA sea. El contador B no funciona. ¿Sabes por qué? Déjame mostrarte rápidamente. Ven aquí. Justo dentro del mostrador b, estamos despachando la acción de incremento. Y esta acción es para que el contador a. El contador B funcione, hay que especificar la acción para el contador B y luego despachar esa opción. Déjame mostrarte aquí mismo. Esto es para el contador a y esto es lo que contrarresta a. ahora voy a hacer incremento B. Voy a hacer decremento B. Cuando vengamos aquí mismo, deshacer incremento, decremento B, Guardar y comprobarlo en el navegador. Recargar. Hagamos el juicio y el aire contrario. ¿Puedes ver reiniciaciones? Pruébalo en el mostrador B. Puede mirar. Todo está funcionando perfectamente bien como se esperaba. Bien, así que en resumen, al usar la acción como objeto, puedes pasar datos adicionales a la función reductora. Y al usar state como objeto, somos capaces de mantener y realizar seguimiento de múltiples variables de estado. Y en este caso, aquí están las variables de estado a y B. Y podemos hacer esto simplemente porque el estado es un objeto, que es este tipo que ves por aquí. Déjame mostrarte rápidamente. Sólo tengo que cortar esto. Y entonces aquí está el objeto. Simplemente porque el estado es un objeto, somos capaces de mantener a estos tipos por aquí. Esto es todo por ahora. Nos vemos en la próxima conferencia. 45. 43 Reductor de uso: En el ejemplo anterior, pudimos realizar un seguimiento de dos contextos diferentes usando state como objeto. Y para actualizar los contenidos, tenemos que crear maletas adicionales en el método reductor. Pero si tenemos que llegar a nosotros con la misma transición estatal, hay un enfoque más sencillo para hacerlo. Así que rápidamente crear un nuevo componente llamado mi cuenta o tres. ¿Correcto? Vamos a usar la práctica de reductores. Abre mi brazo de control. Vamos a resaltar y copiar todo el código y luego pegarlo aquí. Solo tenemos que cambiar el nombre de la compañía a mi contacto tres, guardar, abrir el componente app y dejémoslo renderizar. Destaca esto, lugar, un comentario al respecto. Y luego llegar a la cima. Tenemos que importar mi contacto tres de componentes slash use, nos redujo practica slash mi cuenta o tres. Vamos a renderizarlo por aquí. Seguro. En el navegador. Boom, la aplicación está bien. Ahora tenemos una sencilla aplicación de contador. De frente para venir el contador tres. Entonces lo siguiente en línea es agregar otro contacto estatal con exactamente la misma transacción, que es incrementar, disminuir nuestra funcionalidad de reinicio. Si ese es el caso, lo que vamos a hacer es crear reductor de uso adicional. Entonces aquí vamos a tener constante. Voy a llamar a este tipo, viene a coma. Voy a llamar a este tipo despachado a. Entonces invocamos el reductor de uso. Y seguro que usan reducir nuestros textos en el método reductor como su primer argumento y luego el estado inicial como su segundo argumento. Entonces justo dentro del div, tenemos que despachar a este tipo. Entonces hagámoslo rápido. Destaca de las líneas 23 a 26. Copia. Ven aquí. Vamos a hacer otro div y luego pegarlo dentro de este div. Entonces esto va a ser despachado para así, así. Y aquí tenemos dos registros muestran viene a cuál es este tipo por aquí que se utiliza para sostener al estado. Bien, hagamos que sea legible un poco. Voy a hacer justo así. Cuando guardas y te diriges al navegador. Puedes ver que tenemos el primer contacto y luego el segundo contador. Vamos a probarlo. Incremento, decremento, reset, incremento, roseta decremento. Puedes ver que todo está funcionando perfectamente bien como se esperaba. Bien, así que cuando se trabaja con una variable de estado diferente que tiene exactamente la misma transacción de puntada, le sugiero encarecidamente que use el enfoque de reductor múltiple. Y esto ayudará a evitar la complejidad de administrar el estado si fuera un objeto. Y también para evitar que dupliquemos código en la función reductora. Entiendo que esta conferencia es bastante complicada, pero le sugiero encarecidamente que reproduzca el video una y otra vez para obtener un palo en su memoria. Esto es todo por ahora. Y en la próxima conferencia, vamos a aprender a manejar el estado global. Si usas el exprimidor y usas concurso. Nos vemos conferencia internista. Mantente enfocado y cuídate. 46. 44 useState y useReducer: El nivel de componentes, específicamente, se ha visto un ejemplo de gestión estatal local con reductor de uso. Sin embargo, puede llegar un momento en el que desee comunicar el estado entre los componentes. Entonces, en consecuencia, es posible que desee operar con el escenario global. Y ahora la pregunta es, ¿cómo abordamos eso? Al combinar concursos de reductor de uso y uso, no podrás administrar el estado global. Por lo que en esta conferencia, aprenderemos a usar, usar concursos y usar reductor para gestionar y distribuir escenario global. Ese será un combo bastante genial. Tienen razón. Ahora, consideremos una aplicación de contador simple con seis componentes diferentes, compañía, ABC y XYZ. Por lo que el estado del contador se mantendrá en la app Js. Y la asignación aquí es compartir el estado del contador entre los componentes x y z. Y también vamos a compartir el método, actualizar el estado, sumergir el árbol de componentes sin tener que sondar, perforar a través de los componentes intermedios. Y la solución a este problema es utilizar la API del concurso. Entonces como estamos trabajando con ganchos, vamos a usar el gancho de concurso de uso para brindar la necesidad de valor que se necesita para gestionar el contraste en los componentes a, x y z. Empecemos. Justo aquí. He limpiado el componente de la aplicación. Es bastante sencillo y creo que puedes hacerlo a tu final. Entonces solo hay que borrar todos los componentes que importamos y luego eliminar todos los renders. Voy a explicar este ejemplo de una manera que lo entiendas suficientemente bien. Ahora, comencemos. Dentro del directorio del componente. Vamos a crear un nuevo paquete llamado concursos de uso con reductor. ¿Correcto? Dentro de este paquete, vamos a crear los componentes a, x y z. Generar rápidamente el componente funcional en otros archivos. No he hecho esto. El siguiente en la línea es crear un contador simple en el componente de la aplicación, el componente la aplicación y el peso. Esto ya lo hemos hecho antes. Entonces todo lo que vamos a hacer es copiarlo de mi mostrador. Uno de G es uno. Entonces sólo voy a copiar de los carriles 52, cisteína, volver al componente app y luego pestis territorio. Así que vamos a importar rápidamente usan reductor en el nivel superior. Entonces tenemos que poner una coma aquí mismo, entonces. Usar reductor. Así que justo dentro del componente app, que es este tipo de aquí mismo, vamos a invocar el uso reducir nuestro método. Y claro, esto toma en dos parámetros. Uno es el método reductor, y el segundo parámetro es la etapa inicial. Y todos estos devolverán una matriz de dos entradas. Voy a hacer const. primer elemento va a ser cuenta, que va a almacenar el valor de todo el estado. Y los elementos nido dentro de esta matriz va a ser el método de despacho. Tenemos que asignarlo así. Lo más sencillo es que esto se utilizará para mantener a todo el estado, que es almacenar el valor de todo el estado. Entonces estos serán utilizados para despachar la acción Bhanwari. Cuando procedemos con la implementación. Definitivamente lo entenderás lo suficientemente bien. Vamos a mostrar rápidamente el valor del estado, derecho, para poner en los GSA. Y claro, vamos a renderizar los componentes a, x y z. Ir a la parte superior. Tenemos que importar componente a de concurso de uso de barra competente con barra reductora competente a. Entonces vamos a importar componente x, componente z. Hagamos que lo corra por aquí. Entonces la intención aquí es despachar una acción, derecho, dentro de estos componentes. Entonces queremos manejar estos datos por aquí, ¿no? N-componente a, x y z. Eso es exactamente lo que la intención es. Esto de aquí se conoce como los estados globales. Y queremos gestionar periodos de anochecer dentro de los componentes anidados. Enseñar bueno, hermoso. Si tenemos que despachar la acción dentro de estos componentes, tenemos que hacer uso del concurso para proporcionar el valor de conteo y el método de envío a consumir dentro de estos componentes. Así que vamos a crear rápidamente el concurso mediante el uso de la API de concurso crítico. Justo en la parte superior. Vamos a tener const, no podemos disputar, equa, React dot, crear concursos. Entonces, habiendo creado el concurso, también tenemos que exportarlo. Entonces, habiendo hecho esto, tenemos que dotar a este concurso un valor y luego envolver el componente anterior en el proveedor del concurso y especificar los atributos de valor, que es el valor actual y el método de despacho. Déjame mostrarte rápidamente. Entonces aquí mismo, vamos a concluir toda la aplicación con el concurso que creamos. Y es el proveedor de puntos de los concursos de conteo porque tenemos que darle el valor, un destaque y luego corta, ven aquí, pégalo. Y ahora tenemos que aportar el valor, valor equa. Tenemos que tomar un objeto. Entonces vamos a tener los estados de conteo para ser conteo coma y el conteo Despacho va a ser despacho. Entonces habiendo hecho esto, cuando revises el navegador, verás este error. El estado inicial no está definido. Regresa y tenemos que definir el estado inicial derecho, en la parte superior. Los estados iniciales son iguales a cero. Entonces cuando haces esto y revisas el navegador, puedes ver que tenemos los conos iniciales para ser cero y este es el valor de los estados. Entonces tenemos competentes a, x y z. Así que lo siguiente en línea es consumir el estado y el método de despacho. Entonces para eso, vamos a usar el concurso que tenía de vuelta al código VS. Vamos a agregar rápidamente a la compañía en un g. por aquí en la parte superior. También tenemos que importar concurso de uso. Tenemos que importar el contexto que creamos en el componente app. Importar. El nombre del concurso es contar concursos de AP. Bien, entonces es momento de consumir el concurso. Entonces bien, dentro del componente, vamos a invocar el contexto estadunidense. Tomemos en cuenta el concurso como su parámetro. Entonces tenemos que asignarlo a una variable. Const puede disputar así. Entonces, habiendo hecho esto, podremos acceder al método de despacho guardado mi contador uno y copiar el botón y luego pegarlo en el componente a. bien, vamos a copiar todo desde aquí, incluyendo la etiqueta head y luego diríjase a la compañía a. y aquí solo tenemos que pegarlo entre la etiqueta div. Así como esto. Formateemos rápidamente para tener una sangría adecuada. Bueno. Entonces ahora va a ser el conteo, vamos a quitarnos la etiqueta de cabeza por ahora. No lo necesitamos. Entonces aquí ya no vamos a tener el despacho así. Entonces vamos a hacer Contar concurso despacho de punto com. Déjame mostrarte en la app Js. Estamos consiguiendo a este tipo por aquí para despachar cada una de estas acciones. El más simple eso. Así que vuelve al componente a. tenemos que hacerlo para todo el despacho. Entonces solo voy a seleccionar todas las ocurrencias de despacho y borrarlo. El concurso a pesar de aquí mismo, siete checkout al navegador. Se puede ver que el estado inicial es cero y luego el incremento, el decremento se restablece. Todo está funcionando perfectamente bien. Entonces solo tenemos que manejar exactamente el mismo estado en el resto de los componentes. Esa es al menos la intención de la conferencia. Yo estoy aquí. Yo solo voy a resaltar todo por aquí en componente una copia, aferrarme al componente X, resaltar y luego borrarlo, pegar. Ahora tenemos que cambiar las apariciones del Componente a a Componente x. Guardar. Compruébalo. Hermoso. No es totalmente bueno. De nuevo, a los resaltados del componente z, límpielo, pégalo, cámbielo a componente z. Así que vamos a comprobarlo para ver si somos capaces de administrar este estado por aquí, ¿verdad? Cuando la compañía a, X y Z se acoplan en el navegador. Bien, así que hagamos que el nombre del componente sea descriptivo. Ven a compañía y z y pégala aquí, perdón, competente x. y luego por último, compañía en z, segura y en el hueso del navegador. Así que vamos a comprobarlo. Si somos capaces de controlar el estado global desde el componente a, hagamos clic en el incremento de votación en el componente. Se puede ver que todo está harapiento, definitivamente bien como se esperaba. Cuando decrementas. Hermoso. Y luego cuando lo recibas, boom. Vamos a probarlo en incrementos de componente x, decrementos, recibidos. Componente z incremento, decremento retrocede, amigos. Esto es extremadamente impresionante. Entonces ahora somos capaces de gestionar y controlar los derechos de los estados globales con n-componente a, X y Z. Y esto es posible con concurso de uso y reductor de uso y visitas. Esto es todo por ahora. Nos vemos en la próxima conferencia. Mantente enfocado en el cuidado holístico. 47. 45 use: datos estatales: Usted dijo que los buques utilizan reductor para mostrar la comparación entre el reductor estadounidense y el estadounidense. Vamos a ejemplificarlo mediante obtención de datos de un punto final de API. Entonces en este ejemplo, vamos a ver cómo obtener datos usando el gancho de efecto con la ayuda de EU que engancha para mantener la transacción o transformación de estado. Y en la siguiente conferencia, vamos a ver cómo obtener los mismos datos con el efecto estadounidense Hooke usando el reductor de uso para mantener la transacción estatal. Y al hacerlo, podrás comparar la deuda de Estados Unidos. Y usan reductor para aprender cuándo y cómo usarlos. No hicimos el directorio de componentes. Vamos a crear rápidamente un nuevo paquete llamado ustedes y usar reductor. ¿Correcto? Así que estamos en este paquete, vamos a crear un nuevo componente llamado fago de datos de uso. Generar los componentes funcionales. Lo que vamos a hacer en esta conferencia es hacer una llamada API para ajustar los datos tan pronto como se monte el componente. Y mientras se han obtenido los datos, mostraremos el indicador de carga. Entonces, cuando los datos sean hechos con éxito, ocultaremos el indicador de carga y mostraremos los datos. Por último, cancelaremos el indicador de carga y mostraremos el mensaje de error si surge algún problema al cargar los datos. Definamos rápidamente las variables de estado y los métodos setter. Y antes de continuar con los papás, hay que importar los estados de la UE de React. Entonces tenemos que declarar las variables de estado necesarias para ser utilizadas. Y aquí vamos a tener está cargando, conjuntos más tranquilos, está cargando. El estado predeterminado se establecerá en true. Entonces cuando hagamos una llamada API, vas a ver la barra de carga justo en el navegador. Y por aquí, vamos a tener el error. Y luego vamos a poner la flecha por aquí. Esto debería ser claves de coma y el estado inicial aquí mismo va a ser una cadena vacía. Por último, vamos a tener el post, y esta debería ser tu alma y tus claves de coma. Y el estado inicial va a ser un objeto. Por lo que esto se utilizará para mantener el estado inicial de los datos. Y estos serán utilizados para actualizar el estado inicial de los datos. Entonces, en otras palabras, cuando obtengamos los datos, esto se utilizará para actualizar el estado inicial de la publicación. Cuando los datos se estén procesando bajo el capó, mostraremos el indicador de carga y esto es necesario cuando algo sale mal. Y por último, esto se utilizará para almacenar y actualizar el estado de los nuevos datos. Eso sería justo. El siguiente en línea es hacer la columna aplicada y actualizar. La necesidad se queda. Para hacer la llamada API. Definitivamente tenemos que invocar el efecto estadunidense. Primero, tenemos que importarlo en la parte superior derecha aquí. Tenemos que invocar los efectos. Y el efecto toma en dos parámetros. Primero está la función, que es en este caso una función de flecha. Y segundo es una matriz de dependencias, y voy a dejarla como un área de densidad vacía. Una vez hecho esto, lo siguiente en la fila es hacer una solicitud get. Y para ello, primero, tenemos que instalar actos de uso. Y claro, instalamos axiomas antes en la conferencia anterior. Pero si no lo tienes instalado, solo tienes que llegar al terminal y luego Control C para detener el servidor que se está ejecutando actualmente. Y entonces vamos a hacer node package manager install acts use. Ya lo tengo instalado. Entonces no hay necesidad de hacer esto la segunda vez. Pero si no lo tienes en tu máquina, solo tienes que presionar la tecla Enter para tenerla instalada. Déjame limpiarlo, Desplázate hacia arriba y luego no hemos instalado RTOs, tenemos que importarlo en el eje de entrada superior desde axiomas. Se llama a la función dentro del gancho de efecto estadounidense. Los efectos. Aquí tiene al menos tuvimos un efecto secundario se lleva a cabo. Entonces derechos dentro del efecto, vamos a hacer una solicitud get. Y así vamos a hacer axiomas. Hija obtiene lo más simple que vamos a usar el punto final de marcador de posición JSON. Así que rápidamente dirígete al marcador de posición de Jason y copia la URL de una publicación. Y queremos apuntar a la ruta que devolverá un puesto específico. Yo sólo voy a copiar. Ven aquí, ¿verdad? Estamos en la cadena. Yo sólo voy a pagar. Siempre que hacemos una solicitud GET , siempre devuelve una promesa. Por lo tanto, vamos a tener un Dan blow dot. Entonces cuando la solicitud sea exitosa, tenemos que hacer la transición de algunos estados. Aquí vamos a tener una respuesta. Cuando la solicitud es exitosa, tenemos que establecer la carga en false. Y también tenemos que actualizar el estado inicial con los nuevos datos que enfrentamos. Así que voy a hacer set posts respuesta dot data. Y por último, tenemos que establecer la flecha una cadena vacía simplemente porque el Fetch es exitoso. Error de configuración. Uno vacío fluyó. Esto sucede cuando el Fetch tiene éxito, pero no todas las veces tendrás un viaje suave. Sí, así que a veces puedes tener algún problema. La obtención de datos no será exitosa. Entonces si algo sale mal, tenemos que atrapar la flecha, manejarla en el blog de la tarjeta. Especificemos rápidamente el bloque de captura rápidamente, ¿verdad? Después de este tipo, que es la guarida, la promesa de que regresa, vamos a tener el sofá. Y lo que voy a atrapar, vamos a atrapar cualquier flecha existente que se encuentre. También tenemos que establecer es carga en vigor. Tenemos que fijar post a un objeto vacío, que es el estado inicial de lo planteado. Bien, déjame mostrarte en la parte superior. Y aquí está, ¿verdad? Perfecto. Entonces tenemos que establecer el error. Entonces algo como esto. Así que vamos a hacer algo que salió mal. Habiendo hecho esto en los efectos. El siguiente en línea es mostrar los datos en los GSA. Si el componente es Busey cargando los datos, vamos a mostrar el indicador de carga. Ahora también, cuando los datos son obtenidos con éxito, tenemos que mostrar los datos justo dentro del corchete de colon porque por aquí tenemos que tomar insulina expresión JavaScript. Voy a hacer si está cargando es igual a true. Bien, así que si la aplicación se está cargando, vamos a decir que los datos están cargando un else. Si se obtienen los datos, tenemos que obtener el título del punto post. Echemos un vistazo a la publicación. Podemos conseguir el título o el cuerpo. Vamos a por el cuerpo del poste. Y también queremos mostrar el error en la pantalla. Entonces si hay un error, tenemos que mostrar el error, que es esto escribible aquí. Y si no hay error, tenemos que configurarlo para saber cuándo guardas la mezcla de aplicaciones para renderizarla en el componente app. Ven aquí. Y lo hicimos todo en la conferencia anterior. Por lo que solo les coloco el comentario. Importar, usarlo, datar fago de componente slash, usarlo y usado reductor de aguanieve, usar la era digital. Hablé demasiado. Tienen razón, así que hagámoslo renderizado correctamente, dentro del componente app. Usted manifiesta su efecto. También tenemos que ejecutar la aplicación por aquí. Y voy a hacer npm start width para ello. Muestra el indicador de carga. Y cuando el proceso fue exitoso, aseguró los datos. Entonces, cuando vuelvas a cargar la aplicación, definitivamente verás el indicador de carga. ¿Ves, aunque aparece en un abrir y cerrar de ojos? Pero si tu internet es bastante lento, lo vas a ver en unos segundos. Échale un vistazo. Puedes ver que todo está funcionando perfectamente bien como se esperaba. Entonces déjame mostrarte algo porque también queremos asegurarnos que el indicador de flecha también esté funcionando perfectamente bien. Así que regresa a VS Code. Y aquí mismo, sólo voy a alterar la URL. Esta URL es incorrecta. Por lo tanto, el error se va a mostrar en la pantalla. Cuando guardas en el navegador. Recargar. Ups, algo salió mal. El propósito de este ejemplo es verificar la transacción de pasos cuando se usa el estado US como una variable de estado para obtener datos. Veamos cómo se ve cuando implementamos este mismo ejemplo con el uso Reductor ¿quién? Esto es todo por ahora, en la próxima conferencia, vamos a ver cómo implementar este ejemplo con el reductor de uso. Nos vemos en la próxima conferencia. 48. 46 useReducer DataFetch: En la conferencia anterior, vimos cómo obtener datos con el efecto Hooke usando el uso de ese gancho para administrar la transacción patrimonial. Entonces en este ejemplo, vamos a ver cómo obtener datos con el efecto estadounidense Hooke implementando el gancho reductor de uso para mantener y administrar esta transacción TID. Dentro de este paquete, vamos a crear un nuevo componente llamado user user data fago. Generar el componente funcional. Importemos rápidamente el reductor de uso y el efecto EU. Entonces justo en el nivel superior, usa reductor, coma. Usa también efecto. Tenemos que importar nuestros CEOs de axiomas. Declaremos el estado inicial como propiedad de un solo objeto. Déjame mostrarte cómo hacerlo rápidamente. Const estado inicial, establecerlo en un objeto vacío. Y justo, dentro del objeto, vamos a agrupar todo el estado que vamos a tener en la aplicación, justo dentro. Vamos a tener carga, ponerla en verdad, tal como hicimos en la conferencia anterior. El error lo configuró una cadena vacía y la publicación en un objeto vacío. Entonces estas son las transiciones que necesitamos en esta aplicación. Y con estos, hemos podido agrupar a todo el estado dentro de un objeto. Y vasta, extremadamente genial. Definamos rápidamente la función reductora. Entonces habiendo hecho esto, ven aquí, tenemos que invocar ellos usan reductor. Entonces dispuestos a usar reductor, vamos a tomar en el reductor y el estado inicial como parámetro. Entonces este es el estado inicial que tenemos en la cima por aquí. Para el reductor, también tenemos que definir el reductor. Voy a hacer const, reducir un núcleo, configurarlo en una función de flecha. Y la reducción que toma en dos parámetros. El primero son los Estados y luego el segundo es la acción. Ahora tenemos transición en dos etapas para ser implementadas. Primero es cuando la solicitud es exitosa, y la segunda es cuando la solicitud falla. Déjame mostrarte rápidamente. Volver al estado estacionario estadounidense de fago. Esta va a ser la primera transición de estados, y esta es la segunda transición estatal. Veamos cómo implementarlos rápidamente. Entonces bien, dentro de la función reductora, vamos a tener un switch. Y la expresión switch va a ser de tipo punto de acción. Entonces caso uno va a ser data fetch socks x. data underscore fetch underscore socks x. Así que si todo está bien, ahora vamos a volver cargando, tal como hicimos en la conferencia anterior. El puesto. Vamos a tener la coma de carga útil del punto de acción. Y entonces el error va a ser una cadena vacía también. El segundo caso es cuando los campos de solicitud. Entonces aquí vamos a tener los datos del caso subrayado, fetch, underscore error. Cuando se produce un error, vamos a devolver algo aquí así. ¿Verdad? Dentro de la devolución, vamos a establecer la carga para forzar el post se va a establecer en un objeto vacío, entonces el error, algo salió mal. Y por supuesto tenemos que especificar el caso por defecto, que devolverá el estado. Formateemos rápidamente el código para una sangría adecuada. No he hecho esto, ven aquí. Entonces para el uso reductor hook, devuelve un par de valor, que es el estado actual y el método de despacho const state comma dispatch y luego lo asigna así. Y ahora vamos a hacer la llamada API. Y claro, eso debería hacerse dentro del efecto quien permita invocar rápidamente el efecto estadunidense. Solo tenemos que copiar de la conferencia anterior de frente para usar datos, búsqueda de datos. Entonces voy a copiar desde las líneas 92, líneas 21. Copia. Ven aquí, ¿verdad? Estamos en la función. Tenemos que pagar. Hagamos los cambios necesarios. Entonces solo tenemos que reemplazar las ocurrencias usted justo dentro del bloque prometido. Vamos a destacar de los carriles 35 al 37. Límpielo. Entonces ahora cuando el engordado tiene éxito, tenemos que despachar la acción. Despacho. ¿Verdad? Estamos en el método de despacho. Vamos a tomar un objeto. Y luego tenemos que especificar el tipo de acción y el tipo de acción que se va a enviar cuando el Fetch es exitoso son datos sobre fago Dusko en calcetines Vasco x. déjame mostrarte en la parte superior. Aquí se destaca y luego Copiar. Ven aquí, pegarlo. Estamos en la cadena. Cuando despachamos los tóxicos de búsqueda de datos, tenemos que especificar la carga útil. Y la carga útil va a ser datos de punto de respuesta. Déjame explicarte qué es una carga útil en un GeV. La carga útil son los datos que su reductor utilizará para actualizar el estado. Entonces vamos a agarrar un nuevo dato. Y entonces eso se utilizará para actualizar el estado inicial. Y claro, el estado inicial es sólo un objeto vacío. Entonces justo dentro del bloque catch, tenemos que despachar la acción de flecha. Despacho, ¿verdad? Dispuesto a método de despacho. Tenemos que especificar el tipo de acción. El tipo de esta acción va a ser data underscore fetch, underscore error. Ven aquí y pega. Es tan sencillo como eso. Entonces no tenemos que especificar la carga útil por aquí simplemente porque ya hemos especificado el mensaje de error. Y aquí está el mensaje de error. Vamos a mostrar rápidamente los datos en el navegador. Sólo tenemos que copiar los antagonistas de los ejemplos anteriores. Un append afirma a todos los nombres de las variables simplemente porque todos son parte del objeto state, derecho, dentro del fago de datos de EU, solo tenemos que copiar el cuerpo así. Resaltar y copiar. Ven aquí. Pégala así. Formatemos rápidamente para una sangría adecuada. Perfecto. Lo que voy a hacer ahora es agregar estados a todas las variables. El punto de estado se está cargando. Y aquí vamos a hacer DOT estatal. Publica ese cuerpo. Rápidamente renderizar esto en el componente de la aplicación, y vamos a ver lo que tenemos en el navegador es reducir nuestra búsqueda de datos de barras competentes todos estos niveles de directorio que tiene que apuntar. Y ven aquí, por favor un comentario sobre estos enormes fagos de datos reductores. Guardar y pasar al navegador. Veamos el resultado esperado. Vaya, algo salió mal o bien, chicos. Podrías recordar que en la conferencia anterior, alteramos la URL. Entonces tenemos que volver con Jason. Por favor, sostenga para copiar la URL apropiada. Y aquí está. Copia, ven aquí y pega. Y creo que también es bueno hacer la corrección aquí también. Bien, para que no te metas en problemas en el futuro cuando quieras hacer referencia a mi código. Bien, por aquí, ahorre y veamos el resort expedito. Ellos son estos hermosos. Todo está funcionando perfectamente bien como se esperaba. Ahora bien, la diferencia entre este ejemplo y lo que hicimos en la conferencia anterior es que pudimos agrupar el estado relativo. Déjame mostrarte en la cima de aquí así. Y también las transacciones de paso también se agrupan juntas. Ahora el argumento es éste. Si usan reductor y deducir que Hooke se utilizan ambos para la gestión estatal. ¿Cuándo será preferible usar al usuario-usuario? EU sí enganchó tan rápido. Discutamos eso en la próxima conferencia. Esto es todo por ahora. Nos vemos en la próxima conferencia. Mantente enfocado en el cuidado holístico. 49. 47 useCallback Hook: En esta conferencia, vamos a estudiar otro gancho de impotencia, que es el callback estadounidense. Sin embargo, es muy importante entender la optimización del rendimiento antes continuar con el uso de devoluciones de llamada. Y de ahí, eso es claro para ti. Ahora podemos discutir qué es una devolución de llamada de uso, por qué y cuándo deberías usarla. Y aquí, ya he construido una simple contra-obligación. Tan rápido, déjame guiarte a través de él. Pasemos a los componentes de la aplicación. Y por aquí hemos renderizado un componente llamado componente principal. Y aquí está, correcto, deseando el componente principal, tenemos dos componentes diferentes, los cuales se reutilizan con diferentes propiedades para mostrar diferentes informaciones. Y el primero es el componente Contador. Este componente de contador de aquí es responsable de mostrar el número actual de profesores. El componente botón es responsable de incrementar al profesor. Y luego aquí reutilizaremos el componente Contador para mostrar el número de alumnos. Y luego también reutilizamos el componente botón para incrementar a los alumnos. Y toda esta función de aquí se define en la parte superior. Aquí tenemos los incrementos, la función chat, los incrementos estudiantes, y luego tenemos las variables de estado necesarias en la parte superior. Bien, estamos en esta función. Estamos incrementando, enséñanos por cinco. Aquí estamos incrementando a los estudiantes en diez. Bien, así que todo esto sucederá cuando se haga clic en el botón . Así que vuelve aquí. Cuando observes este componente, te darás cuenta de que estamos pasando prueba como sondas y también el estado actual del maestro. Y el componente inferior, estamos tomando el handle click como sondas, y luego pasamos en los incrementos función t-test como valor. Esta función se define en la parte superior. Por supuesto que ya te lo he mostrado. Y lo mismo aquí. Hemos tomado el conteo de intestino como utilería y luego pasamos en el valor de los alumnos actuales, ¿verdad? No sería este botón, nosotros pasando el mango haga clic como sondas y estamos tomando en los incrementos los estudiantes como valoran, que es el valor de prompts, rápidamente nos dirigimos al componente del botón. Entonces, justo dentro de los componentes inferiores se desestructuraría el mango, la camarilla y los niños. Aquí implementamos un botón onclick de este botón. Estamos tomando en estas indicaciones, que es el clic de control que tiene el valor del maestro de incremento en la función de alumno de incrementos. Y por aquí los estamos pasando a los niños como HTML interno. Entonces esto va a mostrar la prueba entre los Bolton. Déjame mostrarte rápidamente en el componente principal. Entonces el HTML interior por aquí, este tipo incrementa a los estudiantes y al maestro de incremento. Estos se mostrarán debido a los puntales dot children. Por supuesto, ya deberías saberlo. Rápidamente, pasemos al componente Contador. derechos dentro del componente Contador destruirían su prueba y recuento. Y por aquí estamos tomando exámenes y contando el conteo, lo que muestra el valor actual de los profesores y los alumnos. Para terminarlo, creamos un nuevo directorio llamado use callback practice. Aquí está. Entonces dentro de este directorio, creamos todos estos componentes, y luego renderizamos el componente principal en la aplicación Js. Y seguro, el componente button y el componente count se anidan dentro del componente domain. Y en la parte superior, los importamos, es tan sencillo como eso. No he entendido la aplicación. Procedamos rápidamente con el negocio del día. Ciérralo hacia abajo. Entonces, el propósito de este ejemplo es enfocarse en la optimización del desempeño y medir el desempeño. Tenemos alguna declaración de registro por aquí. Déjame mostrarte. Puedes ver esto ayudará a mostrar el componente que se está renderizando. Y por aquí también, tenemos algunas declaraciones log. Entonces derechos dentro de la terminal. Tenemos que ejecutar la aplicación. Perfecto. Esto es exactamente lo que esperamos. Entonces cuando haga clic en incrementos, cada uno de nosotros nos enseñe se incrementará en cinco. ¿Ves? Y cuando haga clic en incrementos, los estudiantes, los estudiantes se incrementarán tomando. Todo parece estar funcionando perfectamente bien. Vayamos rápidamente a la consola y veamos qué arpones más altos, ¿verdad? Entonces para unas estadísticas, solo tenemos que despejar la consola nuevamente para que aparezca limpia. Ahora, voy a golpear en el incremento t veces votando. Cuando haga clic en el incremento profesores, van a ver los profesores de renderizado renderizado, pero en incrementos los detalles están aquí. Vas a ver renderizados estudiantes y renderizar incrementos de navegación estudiantes. Cuando haga clic en los incrementos estudiantes, van a ver a una dama misma declaración de registro renderizando maestros renderizando, incremento de votación, maestros renderizando estudiantes, renderizando traídos en incrementos estudiante. Entonces aquí es tristemente, es donde radica el problema. Porque si hacemos clic en el incremento maestros, no hay necesidad de volver a renderizar el componente de incremento alumno. Pero en este caso, cuando incrementemos maestros, los componentes de los alumnos serán re-renderizados. Y también, cuando aumentemos a los alumnos, se volverán a renderizar los componentes docentes. Y estos causarán algunos problemas de rendimiento en tu aplicación. Así que imagina que tenemos más de 100 componentes por aquí. Y al actualizar un solo componente, se volverá a renderizar el resto del componente de los noventa. Amigos. Eso no va a ser nada agradable porque empezarás a experimentar algún problema de rendimiento. Y por lo tanto, para optimizar el rendimiento, tenemos que renderizar con precisión solo el componente que se necesita volver a renderizar cuando indica o solicita cambios. Y eso se hará con React dot memo. React dot memo es una herramienta fantástica para memorizar componentes funcionales. Y cuando se aplica correctamente, evita que un componente funcional no vuelva a renderizar si las indicaciones son de estado no cambiaron. Suena bien. Hermoso poder, ¿verdad? Entonces se puede pensar en la memorización como una forma de valor cardinal, tal manera que no necesita ser recalculada cuando el estado o sondas no cambiaron. Así que vamos a optimizar rápidamente esta aplicación con React dot mamífero VS Code. Y rápidamente pasemos al componente principal. Bien, así que para optimizar la aplicación, lo que vamos a hacer es tranquilo y sencillo. Entonces lo que voy a hacer ahora mismo es destacar a este tipo exporta los valores predeterminados y luego llamarlo. Ven aquí, pégalo, y luego vamos a hacer reaccionar punto mamífero. Y ahora tenemos que pasar. El componente es tan sencillo como eso. Entonces lo que voy a hacer ahora mismo es resaltar y copiar. Pasemos al componente de votación. Ven aquí, pega. Tenemos que cambiar el componente a componente votación. Por aquí. Eliminemos los valores predeterminados de exportación. Haga lo mismo en el componente Contador. Eliminar los valores predeterminados de exportación, ven aquí, pega. Entonces aquí tenemos que pasar en el componente de preocupación, que es el componente contador. Es tan sencillo como eso. Guarde y echemos un vistazo al navegador. Refrescar. En el primer render, verás todos los componentes aquí mismo en la consola. renderizado nos enseña comprado al azar en incrementos, maestros, renderizar estudiante, y luego renderizar incrementos de votación estudiante. Despejemos la consola. Ahora vamos a darle una oportunidad haciendo clic en el incremento maestro. ¿Puedes ver? Ahora tenemos maestros de renderizado, maestros comprados al azar en incrementos y luego renderizar incrementos de votación estudiantes. Por ahora, somos capaces optimizar la aplicación un poco. Porque aquí todavía tenemos el renderizado, pero en incrementos estudiante justo en la consola, lo cual no es muy bueno. Entonces, cuando golpeamos en incrementos, estudiante, vas a ver al azar traídos en incrementos, maestros renderizando estudiantes, y luego incrementos de embarque aleatorios estudiante. Por lo que la intención de esta conferencia es evitar render innecesario. Porque al hacer clic en la votación de los estudiantes, el componente relacionado con los maestros no debe volver a renderizarse también. Al hacer clic en los profesores, no se debe volver a renderizar el componente relacionado con los alumnos. Y ahora esto va a lanzar otro reto porque no estamos cambiando el estado del componente estudiantil. Pero aquí se está volviendo a renderizar. Déjame mostrarte rápidamente otra vez. Y hago clic en características incrementales. Se ve que la representación de la votación incrementa a los estudiantes. No estamos cambiando el estado del componente estudiantil, por lo que no queremos que se vuelva a renderizar. Pero aquí en la consola, se puede ver que se está volviendo a rendir el voto del componente de los estudiantes . Cuando borres la consola y haces lo mismo a incrementos alumno, verás que el componente relacionado con el profesor, que es el componente de botón del profesor. Siendo re-renderizadas también. Entonces esto se conoce como renders innecesarios. Déjame explicarte rápidamente qué pasa bajo el capó. Dirígete al componente principal. Entonces por aquí tenemos el componente Contador y acepta al maestro como sondas. El componente de botón acepta el maestro de incrementos ya que sondea el valor, que es la función que se define en la parte superior. ¿Aquí está? Entonces esto simplemente significa que cuando se actualice el estado del maestro, se el componente Contador del maestro y volverán a renderizar el componente Contador del maestro y el componente de botón del maestro. Pero el problema ahora es que incluso el voto estudiantil se está volviendo a rendir. Aunque el componente de contacto para un estudiante no se vuelve a renderizar. Esto arpones simplemente porque cuando los nuevos llaman a los incrementos cada una de nuestras funciones, se crea una nueva función de estudiante de incrementos cada vez que el componente padre se vuelve a renderizar. Y seguro, al trabajar con función, debemos poner en consideración una igualdad de referencia. Entonces, aunque estas dos funciones se comporten exactamente igual, eso no significa que sean iguales entre sí. Por lo tanto, la función antes del re-render es diferente de la función después de re-render. Entonces simplemente porque pasamos la fortuna como apoyos, React, dot memo se dará cuenta rápidamente de que las sondas han cambiado y luego no va a poder evitar el re-render. Algunos rayados, ¿verdad? Déjame descomponerlo. Cuando se incremente a los maestros en nuevos incrementos, se creará la función de estudiante, lo que provocará que los incrementos de votación de los estudiantes vuelvan a renderizar. Y cuando estés incrementando alumnos en nuevos incrementos cada una de nuestras funciones será creada, lo que también provocará la función increment teacher se vuelva a renderizar. Y ahora la pregunta es, cómo informamos, reaccionamos para no crear nuevos incrementos a esa función cuando actualizamos, los profesores tienen razón. Entonces aquí está que Lee es donde te anotas dólar entra. Entonces, ¿cuál es el uso de los ganchos de devolución de llamada? Utilizan devolución de llamada devuelve versión MMO de la función de devolución de llamada que sólo se tiñe si una de las dependencias ha cambiado. Entonces en simplicidad, usan callback hook se usa cuando se tiene un competente en el que un niño está renderizando repetidamente sin la necesidad de ello. Bien, por lo que para implementar la devolución de llamada de uso, se deben cumplir varias condiciones. Condicional es que debemos tener una función de devolución de llamada. La segunda condición es que debemos optimizar los componentes del gráfico con React dot memo. Déjame mostrarte. Aquí. Optimizamos el componente hijo, y aquí también optimizamos el componente hijo. La tercera condición es que debemos verificar la igualdad de referencia. Para la igualdad de referencia, tenemos que verificar si las funciones son iguales. Entonces, si se cumple la condición anterior, podemos proceder a optimizar aún más nuestra aplicación con el gancho de devolución de llamada de Estados Unidos. ¿Correcto? Entonces, para implementar el uso de callback hook, se involucran varios pasos. No te preocupes, los pasos son realmente muy sencillos. Desplázate hasta la parte superior. Primero, tenemos que importar el uso Kohlberg. Y después de eso, el paso número dos es invocar el uso Kohlberg. Y usan callback es una función que toma en una función de devolución de llamada como su primer argumento. Entonces lo que voy a hacer ahora mismo es copiar esta función, así, resaltar color. Ven aquí y pega. Y después de eso, tenemos que asignarlo a una variable como esta. ¿Correcto? Hermoso. Entonces el segundo argumento de la devolución de llamada estadounidense es una arteria de dependencia. Entonces lo que voy a hacer ahora es especificar coma y luego tomar el área de dependencia. Y esta devolución de llamada por aquí depende de la variable del profesor para que se encienda. Ven aquí, resalta y copia, pégala justo dentro de la dependencia. Esta función se activará sólo cuando el estado de los maestros cambie sea tan sencillo como eso. Entonces vamos a replicar lo mismo para el estudiante. Utilice la devolución de llamada. Aceptar una función de devolución de llamada como su primer argumento. Copia esto. Resalte y abrigos, ven aquí, pégalo. Entonces por aquí tenemos que asignarlo a una variable como esta. El segundo argumento es una matriz de dependencias. Esto se encenderá cuando cambie el estado del estudiante. Entonces solo tenemos que especificar a los estudiantes como su matriz de dependencias. Entonces simplemente significa que depende del estado del estudiante para que se encienda. Si los alumnos no cambiaran, la función, no quedaría atrapada. Es tan sencillo como eso. Entonces tenemos que asignarlo así. Habiendo hecho esto, vamos a comprobarlo rápidamente en el navegador. Refrescar. Hermoso para el tiempo de la fuerza laboral cuando la aplicación se carga, se renderizarán todos los componentes. Actualicemos rápidamente la consola. Tantos hacen clic en los incrementos maestros en la consola, te darás cuenta de que solo el componente relacionado con la prueba t es lo que se está volviendo a renderizar. ¿Bien? Así que ya no vas a obtener repeticiones innecesarias como el componente de estudiantes. Y también, cuando se incremente a los alumnos, limpiemos la consola y luego se incremente hasta el final. Te darás cuenta de que solo el componente posterior de los alumnos es lo que se está volviendo a renderizar en la pantalla. Y la prueba está justo en la consola. Entonces con esto, podemos decir que la aplicación está totalmente optimizada. ¿Ves que ya no tenemos algunas re-renderizaciones inútiles? Esto es extremadamente impresionante y me encanta. Amigos. Esto es todo por ahora. Nos vemos en la próxima conferencia. Mantente enfocado y cuídate siempre. 50. 48 useMemo Hook: En la conferencia anterior, discutimos el uso de callback hook, que se centran en la optimización del rendimiento. Entonces en esta conferencia, vamos a discutir el uso de los ganchos de memo, que también se centran en la optimización del rendimiento. El gancho de memo de uso de React devuelve un valor húmedo. Y quiero que pienses en la memorización como valores cagianos para que no sea necesario recalcularla. Técnicas, utilizan mama hook solo corre cuando una de sus dependencias de escrituras. Y eso mejora el rendimiento. Entonces, para entender las obras de altura, vamos a ejemplificarlo. Vamos a crear rápidamente un nuevo paquete llamado use memo practice, ¿verdad? Estamos en la Carpeta Nueva de Componentes. Dispuesto a usar mi práctica más. Vamos a crear una nueva empresa en mi memo, counter dot js. Genere rápidamente el componente funcional. Y luego vamos a declarar las variables de estado necesarias y se establece nuestra función para ser utilizada. Y seguro hay que importar la estadidad de Estados Unidos. No voy a hacer una Lo que solo tengo que hacer aquí es usar las teclas de coma, que es lo que la función de configuración. Y el estado inicial va a ser. Cero. Destaca, duplicarlo. Y luego voy a resaltar la letra grande, un Comando D para seleccionar las ocurrencias, borrarlo, cambiarlo para que sea. Entonces tenemos las variables de estado del contador a y país B. El más simple eso. Y aquí vamos a definir una función para incrementar a uno y luego también incrementar el contador b en dos. Constante. Incremento a. equa, ponlo a nuestra función. Y entonces voy a hacer poner el contador a entre paréntesis. Vamos a tomar en las nuevas actualizaciones contactar a un plus one. Es tan sencillo como eso resalta, replicarlo. Sólo hay que seleccionar las ocurrencias de estos, cambiarlo para que sea. Y por aquí, solo tenemos que hacer COUNTA ser más uno. Por lo que queremos ejemplificar el memo de uso con una sencilla aplicación de contador. Rápidamente hagamos renderizar algo en la pantalla. Aquí vamos a tener una etiqueta p. Dentro de la etiqueta p, voy a hacer una e es, claro que ya deberías saber esto. Aquí queremos implementar un botón para incrementar el contador. Onclick de esta votación. Vamos a llamar al incremento de función una deuda más simple. Entonces lo que voy a hacer ahora mismo, vamos a tener otro div. Destaca este tipo de las líneas 18 a 19, muévalo a este nuevo div que creamos. Así que permítanme formatear rápidamente el código. Perfecto. Entonces voy a destacar de las líneas 15 a 18 duplicados. Aquí. Vamos a hacer b. B y b. Y B, Oh Dios mío, debería haber seleccionado las ocurrencias y hacerlo una vez. Cuando guarde la aplicación, diríjase a los objetos y hagámosla renderizarla. Este lugar es bastante desordenado, pero tenemos que manejarlo así. Importa mi memo cuenta hacia arriba de tu original , baja, destaques. Colocar un comentario al respecto. Compruébalo en el navegador. Hermoso. Todo está funcionando perfectamente bien. Entonces probémoslo. Un bien, ser bueno, todo funcionando perfectamente bien. Entonces aquí es exactamente donde comienza la diversión. Ahora, vamos a mejorar la aplicación. Entonces digamos que queremos mostrar par cuando el número es par o impar, cuando el número es impar. Vamos a mejorarlo rápidamente. Ven aquí. Vamos a tener otra función, constante, número par. Configúrelo a nuestra función. Este tipo va a tomar tus resultados. Y por aquí voy a hacer resultado equa contador un módulo dos es igual a cero. Así más simple eso. Entonces tenemos que devolver cualquiera que sea el resultado. Perfecto. Una vez hecho esto, vamos a mostrarnos rápidamente en la interfaz de usuario. Justo dentro de la etiqueta p del contador. Tenemos que poner alguna condición por aquí. Entonces a es cualquiera que sea el valor del estado, y luego si es par o impar. Entonces tenemos que especificar si el número es par o impar. Y, um, voy a hacerlo está aquí. Primero, tenemos que llamar a la función. Incluso. Después de eso, tenemos que ponerle un cheque. Si el número es par, entonces vamos a decir, par. Ahora. Vamos a decir raro. más simples que guardan la aplicación y la revisan en el navegador. Recargar. Bien, entonces vamos a incrementar a. ¿ Puedes decir que dice que el contador es uno y es extraño Incrementa otra vez, dice a es dos, n es parejo, así como así, ¿verdad? Una cosa más que queremos hacer y que es sumamente importante es que vamos a tratar de inducir la lentitud a la función de inviernos. Entonces, supongamos que queremos que esta función se ejecute en unos pocos segundos. Bien, entonces queremos un poco de retraso en como oclusión. Entonces para eso, tenemos que inducir cierta lentitud en la función. Hagámoslo rápidamente. Dirígete al código VS. Justo aquí. Voy a hacer dejar que sea igual a cero. Entonces mientras yo sea menor que, vamos a tener 09 veces como exactamente, entonces tenemos que incrementar yo en una. Una vez hecho esto, hemos inducido lentitud en esta función. Por lo que esto ralentizará el cálculo en siliconas. Dirígete al navegador. Vamos a recargar. Ahora cuando hago clic en Contacto aire, ¿ pueden ver que tarda unos segundos para que una se incremente Inténtalo de nuevo. ¿Ves aquí es que Lee es donde yace el tema? Entonces la lentitud se indujo en el campus a. pero ahora cuando hago clic en el contador b, ves que seguimos experimentando la misma lentitud. Déjame intentarlo de nuevo. Ves que tarda unos segundos para que el contador sea sea calculado y tenga los resultados mostrados en la pantalla. Pero mira, eso no es lo que queremos aquí. Todo lo que queremos es inducir lentitud en el contacto a y no en llegar a ser. Así que no queremos que esto afecte al contador b. Entonces, lo que sucede aquí es que cada vez que se actualiza el estado, el componente volverá a renderizar. Y cuando el componentry se renderiza, se invoca por segunda vez el número par de la función. Y seguro la función es muy lenta y por lo tanto ralentizará todo el proceso y la actualización de la interfaz de usuario. No queremos que eso le pase a la aplicación. Por lo que la solución a este problema es evitar que se recalcule el valor innecesario. Y en este caso, vamos a informar, reaccionar para no realizar este cómputo cuando estamos cambiando el valor de contador sea el más sencillo que no hay necesidad calcular y mostrar lo que un número es impar o par al tratar con el país B. Porque eso es exactamente lo parece estar haciendo la aplicación en este momento. Regresa. Al hacer clic en Contacto. Tarda algunos segundos en calcularse, inseguro si el número es par o impar. Al contacto B no le interesa ver si el número es par o impar. Pero aún así, cuando incrementas el contador B, tarda algunos segundos en calcularse. Simplemente porque esta lentitud que indujimos en este tipo de aquí está afectando a este tipo. Por lo tanto, tenemos que evitar cálculos innecesarios. Y para evitar este cálculo innecesario, tenemos que hacer uso del mamífero estadounidense. Regrese al código VS para implementar el gancho de memo de uso. Primero. Tiene que ser importada igual que todos los demás ganchos también. El gancho mama usado es una función que tenemos que invocar. Así que ven aquí mismo. Voy a hacer uso memo. El memorándum entrará en acción. La función return value necesita ser llamada como su primer argumento. En este caso, la función para calcular o bien el número es par o impar. Entonces aquí sólo voy a copiar de aquí así, destaca, corta, ven aquí y pégala como el primer argumento de uso memo. El segundo argumento es un coma de matriz de dependencias tomado en una matriz vacía. Para que esta función se encienda, tiene que depender de a. Y voy a hacer contador a. Justo así. Después de eso, destaca este tipo, corta. Ven aquí, asígnalo así. Entonces, habiendo hecho esto, el número malvado ya no es una llamada de función porque ahora almacena un valor. Así que vuelve a la interfaz de usuario o quita los paréntesis. Tenemos que sacar a este tipo. Guarde la aplicación, anticodones, el navegador, recargue. ¿Correcto? Vamos a probarlo haciendo clic en el incremento a. ¿Lo ves? Tarda algunos segundos para que un se incremente. Échale un vistazo. Entonces probémoslo en B. ¿Ves que el contador B se incrementa sin perder el tiempo? Ahora bien, la lentitud que indujimos en el mostrador está funcionando perfectamente bien solo en el contacto a. y en esta ocasión, no afecta a counter be simplemente porque hemos implementado el use memo hook para optimizar la aplicación. Y en este caso estamos teniendo la lentitud induciéndose en el contador apropiado. Así que cada vez que un contacto cambia, React, recalculará el valor y despreciará el valor de la tarjeta, lo que simplemente implica que ya no va a utilizar el valor de la tarjeta. Entonces como el valor nunca cambió para el contador a, no hay necesidad de volver a calcular el valor impar o par y luego reaccionar utilizará el valor del render anterior que ha llegado a ser, no se verá afectado por este clonus que indujimos. Y ahora la pregunta es, ¿cuál es la diferencia entre el uso callback y que usan mamífero? Use callback se usa para capturar una función, mientras que el memo de uso se usa para cortar el resultado de una función invocada. Tan simple como eso. O puede decir que la devolución de llamada de Estados Unidos se usa para capturar una función de devolución de llamada. Esto es todo por ahora y nos vemos en la próxima conferencia. 51. 49 useRef de ref: En esta conferencia, vamos a estudiar el uso del gancho ref. El gancho habitual se utiliza para acceder a un elemento DOM directamente dentro del componente funcional. Y también se puede utilizar para almacenar un valor mutable que no cause un re-render cuando se actualiza. Así que además, el uso de gancho áspero le permite persistir valor entre renders. Sigamos adelante para ejemplificar. La intención de este ejemplo es enfocar el derecho causal en el campo de entrada cuando se carga la página. Tome, por ejemplo está creando un formulario de registro. Queremos enfocar el cursor justo en el primer campo de entrada cuando se cargue la página. Cree rápidamente un nuevo paquete llamado usuario de práctica. Y espero que te haya encantado la forma en que estoy organizando las conferencias. Dentro del usuario de la práctica, vamos a crear un nuevo componente llamado impute de costo completo. Los derechos estaban en la UI. Vamos a crear una disputa olímpica. El tipo Prueba Igual. Ciérralo con la etiqueta de cierre automático. Renderiza rápidamente este componente en la aplicación. Js importaciones foco imputar de este tipo. Y aquí tenemos que hacer foco en periodos. Veamos qué pasa en el navegador. Aquí está el campo de entrada. Déjame acercarme un poco. Perfecto. Volver a VS Code. Enfoque imputar empresa. La siguiente línea es implementar componente hizo montar funcionalidad. Primero, tenemos que importar el efecto estadunidense. Vamos a invocarlo rápidamente aquí mismo. Toma en una función de flecha como su primer argumento. Y además, toma en una dependencia RA. Pero en este caso, la vamos a dejar vacía porque queremos que el efecto se encienda. Entonces no hay necesidad de especificar una variable de dependencia. Bien, así que procedamos con el enorme rave. Pero la parte superior, tenemos que importar el uso ref como college aquí mismo. No te preocupes, definitivamente obtendrás la esencia si lo sigue. Y claro, queremos que tome ahora. Ahora vamos a asignarlo a una variable llamada en penetrante. No he creado el href. El nido y la línea es para hacer uso de él. Y luego tenemos que hacer que todo esto encaje justo dentro la etiqueta de imput donde podemos usarlo es para especificar los atributos href. Tenemos que llamar a la variable en Petrov. Lo más sencillo que finalmente, tenemos que invocar la función focus en el elemento input, ¿verdad? En efecto desuso, aquí mismo. Vamos a invocar la función de enfoque. Y voy a hacer en Peter F punto dioses actuales para autos. Así como esto. Con esto, React está configurando la propiedad actual Raph el nodo DOM correspondiente. Veamos qué sucede en un navegador. ¿Puedes ver cuando el componente se monta, el mouse se enfocará en la entrada vista Esta implementación es muy útil cuando estás creando un formulario de registro. Y quieres que el primer campo de entrada en el formulario de registro esté enfocado en cuándo se carga la página. Se puede ver con claridad. Usa bien el curso, dentro del campo de entrada. Pero cuando nos quitemos el href, así que vamos a hacer un comentario sobre esto. ¿Puedes ver que no se encuentra nada en el campo de entrada? Por lo que el campo de entrada no tiene cuatro núcleos. Pero cuando implementas la ref en la recarga del navegador, ¿ves que el campo de entrada está enfocado? Entonces esto es exactamente lo que el usuario puede ayudarte a lograr. 52. 50 useRef de los ganchos: Para explicar más a fondo, usuario de hook, vamos a configurar rápidamente un ejemplo de una aplicación de temporizador de reloj. Entonces bien, ¿cuándo usas la práctica de ref? Vamos a crear rápidamente un nuevo componente llamado temporizador. Haga clic con el botón derecho en nuevo archivo. Temporizador punto. Generar el componente funcional. La intención de esta conferencia es implementar un temporizador de intervalos que tarda cada segundo en mostrar el valor en el navegador. Para ello, primero, tenemos que declarar la variable para mantener el valor del intervalo. Entonces justo en la parte superior de causado por ahora, deberías saber cómo hacer esto. Y aquí vamos a declarar una variable de estado. Y vamos a llamarlo temporizador. Así que sólo tenemos que convertirlo en un caso de coma por aquí. Y el estado inicial va a estar ahí. Mostremos rápidamente el valor del temporizador, justo dentro de los GSA. Voy a usar la etiqueta H2. Entonces aquí voy a hacer temporizador es el nuevo valor de la caja fuerte del temporizador. Vamos a renderizarlo rápidamente en el componente de la aplicación. Y aquí tenemos que importar temporizador de componentes slash usuarios slash timer justo debajo. Vamos a renderizarlo por aquí. Cuando guardas la aplicación, compra el navegador, ves que el temporizador es el estado inicial o el valor inicial del temporizador. Vuelve al código VS y vamos a implementar rápidamente el temporizador. Para configurar el temporizador, tenemos que implementarlo justo dentro del efecto OMS. Entonces en la parte superior, tenemos que importar el efecto Hooke. Ven aquí. El gancho es una función y luego tenemos que invocar. Esta función toma una función de error como su primer parámetro y también, el segundo parámetro es una matriz de dependencias. Y en este caso, vamos a tener una matriz de dependencias vacía. Entonces estamos en el efecto es donde se lleva a cabo la transformación. Vamos a tener intervalo constante, igual intervalo establecido. Y nuevamente, tenemos que tomar en una función de error. Entonces justo dentro de esta función, tenemos que actualizar el temporizador. Lo hacemos llamando a la función de configuración para un temporizador, justo dentro de regular tomado el temporizador anterior. Y anterior Timer Plus uno, el más simple que. Y queremos que estos se muestren en el navegador cada segundo. Entonces aquí mismo, vamos a colocar una coma aquí y luego inducirla por aquí. Una vez hecho esto, tenemos que implementar una función de retorno para borrar el intervalo. Regreso. Aquí voy a hacer intervalo de Claire. Tenemos que pasar en Java. Cuando guardas y revises el navegador. ¿Puedes ver? El mayor reto que tenemos en esta conferencia es hacer clic en el temporizador cuando se hace clic en el botón. Así que vamos a implementar rápidamente una navegación para llevar a cabo esa funcionalidad. Tenemos que especificar el onclick. Onclick de este botón. Queremos hacer clic fuera del temporizador. Muy bien, hagamos eso y veamos cómo va. Vamos a llamar al TVA limpio y luego pasar intervalo. Aquí. Dentro de la prueba interna, voy a hacer click timer. Cuando guardas y revises el navegador. Ves que dice intervalo no está definido. Ya sabes, ¿por qué? Vuelve al código VS y déjame mostrarte. Es simplemente porque el intervalo variable se encuentra localmente alcanzada solo al efecto OMS. Entonces, cuando haces esto, el intervalo solo se puede borrar, ¿verdad? En donde el efecto que? Queremos borrar el intervalo cuando se hace clic en el botón. E inmediatamente implementamos el botón. Mira lo que pasa. Dice que el intervalo variable del que pasamos por aquí no está definido. Pero mira, lo definimos aquí en la línea siete. Entonces esto simplemente significa que este intervalo solo se puede ver justo dentro del gancho de efecto. Para resolver este problema, tenemos que hacer facilidad de uso href, cuya técnica suele tener, también se pueda utilizar para almacenar un valor mutable que no cause un re-render cuando se actualiza. Nuevamente, el usuario f es una función, así que tenemos que invocarla como de costumbre. Pero primero, tiene que ser importada en un club. Aquí en la parte superior, vamos a invocar al usuario F. Ahora vamos a hacer const, ref en Dava, asignarlo así. Entonces el siguiente en línea es reemplazar todas las ocurrencias de intervalo con ref punto actual. Ven aquí, Tenemos que borrar esta variable. Entonces voy a hacer puntos de intervalo. Datos actuales, más simples. Recuerda que tenemos que reemplazar todas las ocurrencias de intervalo. Y aquí tenemos uno por aquí que se pasa al método del intervalo de arcilla. Reemplázalo así. Aquí tenemos otro. Cuando guardes la aplicación, saquemos el navegador. Vamos a probarlo haciendo clic en declarar tiempo de espera, votando. Échale un vistazo. Ahora, hemos logrado despejar el temporizador. Cuando hagamos clic en esta placa en, el intervalo se borrará y luego el temporizador se detendrá. Entonces este es otro problema que el usuario si resuelve. 53. 51 Creación de un sitio web de Yum (instalación de reactos): En esta conferencia, vamos a empezar a construir el sitio web. Y como de costumbre, vamos a empezar de cero instalando una nueva aplicación React dentro del escritorio. Vamos a crear rápidamente una nueva carpeta llamada Yom eats. El nido y la línea es arrastrar y soltar la carpeta hacia abajo en el código VS. Así que rápidamente abre el código VS. Adelante para arrastrar la carpeta al Código VS. Vamos a maximizar. Entonces voy a salir de la página de muestra. Abra el terminal integrado VS Code. Y voy a hacer té Control y ladrar. O lo puedes encontrar en la parte superior derecha aquí, que es terminal y luego nueva terminal. Así que vamos a usar el comando MUX para crear una nueva app React sin tener que instalarla en nuestro sistema MP x dash React app. Y luego queremos instalarlo en un directorio llamado Kine's. Pulse la tecla Enter para que se encienda. Oh, la instalación de React js está en curso. Y mientras la instalación está en curso, quiero presentarles un framework de utilidad CSS. Este marco es Tailwind. El marco Tailwind hace que sea muy fácil diseñar su aplicación. Entonces puedes presionar Comenzar para ver cómo instalar un viento de cola inicializado. Aquí el consejo para hacer eso instalado, vas a hacer npm instalar dash d, tailwind CSAs. Y luego si quieres inicializar, vas a hacer NP x tailwind CSS. Necesita. Por ahora, vamos a saltarnos el CSS Tailwind. Estoy enfocado en la instalación de React. React js instalado correctamente. Entonces, lo siguiente en la fila es poner en marcha el servidor dev front-end. Dirígete a la terminal. Primero, tenemos que ver las reclamaciones D. Entonces voy a hacer npm arranques. Y aquí está la página de muestra de React. Muy bien, ahora hemos terminado de instalar React js. En la siguiente conferencia, vamos a limpiar el boilerplate eliminando archivos innecesarios que no son necesarios en esta causa. Y después de eso, seguiremos adelante para crear el componente basado en la aplicación que vamos a ser vistos. Nos vemos en la próxima conferencia. 54. 52 Limpiar la placa de boiller: Bien, sigamos a limpiar las placas de la caldera. Entonces simplemente significa que queremos eliminar archivos innecesarios que no necesitamos para construir la aplicación. Así que rápidamente abre el cliente SRC. Aquí. No necesitamos la configuración test.js. Entonces voy a presionar la tecla de comando en mi teclado y luego presionar el mouse para seleccionar mientras mantengo presionada la tecla de comando, queremos multi-seleccionar el resto de los archivos innecesarios. Entonces voy a seleccionar el reporte, vetos web, logo dot SVG, up test dot js, y por último up dots CSAs. Haga clic con el botón derecho. Vamos a moverlo a la basura rápidamente. Y cuando esto suceda, verás este molesto error por aquí, ¿verdad? Dentro de los grupos terminales. Seleccionamos la aplicación CSS, pero parece que algo salió mal. Entonces tengo que borrarlo de nuevo porque no es necesario. Sip, la app dot css se ha ido. Y por favor no borres la app Js. Bien, así que el resto de estos archivos de aquí son extremadamente importantes en la construcción de nuestra aplicación. Entonces abre la app, judíos. Y aquí se queja de que no se encuentra el logo dot SVG. La fastidia. Aquí está el logo dot SVG, y luego aquí está la app dot css. Y claro que acabamos de borrarlo. Entonces lo que voy a hacer ahora mismo es resaltar 1-2 y luego borrarlo. Desplácese hacia abajo. Bien, creo que por ahora todo está bien. La siguiente línea de término es resaltar desde la etiqueta de cabeza de apertura hasta la etiqueta de encabezado de cierre, porque no necesitamos ninguno de estos elementos por aquí, límpielo. Comando S para guardar un todo indeterminado. Dice que el reporte lo vitales también falta. Y aquí es donde lo puedes encontrar. Índice punto js. Aquí. Primero, tenemos que eliminar las entradas en las líneas cinco. Una vez hecho eso, se le llamó aquí. También tenemos que eliminarlo. Ahora creo que ahora nuestra aplicación estaría bien. Echa un vistazo rápidamente al navegador y veamos el resultado final. Ahora tenemos una pantalla en blanco, así que este es exactamente el final esperado. En la próxima conferencia, crearemos nuestros componentes a partir de la observación desde el proyecto Yom. Nos vemos entonces. 55. 53 Crear componentes: Antes de proceder a la creación de los componentes, es sumamente importante observar el sitio web para entender cómo se vio. Vamos a crecer rápido. Echa un vistazo. Este diseño es fantástico, me creyó. Bien, así que comencemos. Ahora cuando observes la pantalla, te darás cuenta de que tenemos el componente de navegación, tina aquí mismo, que incluye el Young, su logo por aquí, el lote de entrega gratis. Y en el centro tenemos el cuadro de búsqueda. En el lado derecho de la pantalla. También tenemos las tarjetas, sí, l por aquí, tenemos el icono para alternar la navegación. Al hacer clic. ¿Puedes ver eso? ¿Hermoso? Y también tenemos el icono x a pistas. Justo debajo de los componentes de navegación superiores, vas a ver la compañía de héroes donde tenemos el hermoso tobogán por aquí. ¿Puedes ver? Y justo debajo del componente héroe, tenemos los componentes de entrega rápida. A continuación, también tenemos los componentes de pico superior. Con estos hermosos deslizadores para mostrar, te va a encantar. Y a continuación tenemos el componente molino. Y aquí está el componente de categorías de tendencias. Y aquí tenemos los componentes del boletín. Justo debajo se encuentra el componente alimenticio. Y ahora hemos logrado descomponer la aplicación en un segmento encapsulado más pequeño llamado componentes. Así que vamos a VS Code, crear estos componentes. Arrastremos esto por un momento. Cuando el SRC, así, crea una nueva carpeta llamada components. Entonces justo dentro de este directorio, vamos a crear las flores y forzadas, tenemos el componente Top Nav. Voy a hacer top nav dot g es. Y hasta la cima. Ahora tenemos el componente héroe, o también podemos llamarlo el componente de elemento futuro. Creo que eso suena mejor. Entonces voy a hacer Pocos puntos infantiles, burlas. Y después de eso, tenemos la entrega rápida. Tenemos el componente top picks, el componente meal, meal ab.js, trending categories, y voy a llamarlo categorías punto js. Tenemos el componente newsletter. Por último, los componentes alimentarios. Entonces este li es cómo construir una aplicación como un profesional. Cuando observas la aplicación, lo primero que harás es descomponer el sitio web en segmentos encapsulados más pequeños llamados componentes. Y por supuesto, a estas alturas, ya debes saber que componente es el componente básico de cada aplicación de React. Por lo que habiendo creado todos los componentes, en la próxima conferencia, seguiremos adelante para instalar viento PTI. 56. 54 Instalación de bobina cola: Sigamos adelante para instalar y configurar el viento de cola. Pulsa en el botón Comenzar. Aquí está el consejo. Entonces primero vamos a hacer npm instalar dash d, tailwind CSAs. Así que sólo voy a dar click aquí para copiar. Regrese a VS Code Terminal, y por favor asegúrese de estar en el directorio de clientes. Pégalo aquí mismo, y esto se utilizará para inicializar el viento de cola. Déjame mostrarte aquí, ¿verdad? Entonces, al hacer clic en este icono de Copiar, vamos a copiar la cabina del comando. Tan rápidamente cetona la tecla Enter para que se instale fuego o viento de cola, resta forma. Vamos a echarle un vistazo. Por aquí. Voy a exprimir los componentes. Vamos a abrir el archivo package.json. Y cuando te desplazas hacia abajo, aquí, está el Viento de Cola. Perfecto. Así que aquí mismo vas a ver el archivo de configuración de punto Tailwind. Regresa al consejo del nido para que copie estos por aquí y péguelos dentro de la matriz de contenidos. Entonces lo que voy a hacer ahora mismo es volver al escritorio abierto. Y aquí vas a encontrar los materiales o los materiales alimenticios. Abre el código **** poder. Ahora voy a copiar este módulo por aquí. Entonces voy a resaltar mi parábola y luego reemplazarla. Guardar. Entonces, la siguiente línea es seguir este consejo por aquí, destaca y luego copiar. O puedes presionar este ícono de aquí para copiarlo. Vuelve, abre los puntos destacados de los CSAs del punto índice, límpialo y luego pégalo por aquí. Entonces, habiendo hecho esto, hemos logrado configurar el Tailwind. Entonces ahora quiero crear un CSS base para la canotaje, bien, entonces va a ser más como el CSS global para que todas las proteínas en la abrogación sigan el mismo patrón. Y la forma en que lo hacemos es agregar capa base. Entonces vamos a tener aquí en la parte inferior, derecha, estamos en la parte inferior. Voy a aplicar. Por lo que vamos a aplicar el storyboard estilo arriba. Compré un bloque redondeado guión x L. Así que en realidad solo estamos aplicando el radio del borde a la canotaje. Bien, entonces esto va a hacer que nuestras proteínas sean un poco curvilíneas. Y luego ahora queremos aplicar un relleno desde el eje x. Entonces voy a hacer p x Esto en realidad implica el relleno de izquierda a derecha, ¿de acuerdo? Entonces, ¿cuál es el eje x? Y lo voy a hacer cinco pixeles. Entonces el PY representa el relleno en la parte superior y en la parte inferior. Entonces en la parte superior e inferior, vamos a tener con relleno uno. Entonces esto en realidad creará espacio en la parte superior de la parte inferior y en la parte inferior. Tan simple como eso. Y claro, si se preguntan por qué estoy teniendo todos estos detalles por aquí, es simplemente porque instalé una extensión muy inteligente llamada tailwind IntelliSense. Entonces déjame mostrarte cómo hacerlo ahora mismo. Abre la extensión, entonces vamos a configurar para nuestro viento IntelliSense aquí. ¿Está a mi fin? Ya lo tengo instalado. Entonces lo que vas a hacer al final es presionar el botón de instalar. Justo ahí. Vas a ver instalar en lugar de desinstalar. Adelante para presionar el botón de instalación al final para tener instalada esta potente extensión. De hecho es una tensión muy poderosa y seguro que va a ser de ayuda. Bien, ciérrala. Y entonces ahora cuando pase el cursor sobre la clase, ahora mismo , así, vas a ver el equivalente CSS. Entonces, básicamente, lo que hicimos aquí es aplicar el radio del borde para que sea 0.75 rem. Y aquí el patrón que queda es 1.25 rem. El patrón derecho es 1.25 rem. Al pasar el cursor sobre estos, nuevamente, la parte superior del patrón es 0.25 rem y la parte inferior del relleno es 0.25 rem. Entonces esto es simplemente porque he instalado una extensión muy poderosa llamada tailwind IntelliSense. Entonces eso realmente te dará el equivalente CSS del Tailwind. Y eso ocurre cuando pasas el cursor sobre las clases de utilidad. Por ejemplo, yo. Colócate sobre esta clase de aquí. Puedes ver lo que simplemente hicimos por aquí es implementar el color del borde y en este caso es el negro? Esto ya está apagado. Y en la próxima conferencia, comenzaremos a trabajar en el alumno de Top Nav. 57. 55 Componente de TopNav: En esta conferencia, procederemos con el componente Top Nav. Y aquí es donde comienza la diversión. Tan correcto ordenando el paquete de componentes. Vamos a abrir el Tata J's de arriba a la izquierda. Por ahora. Bajemos la terminal y luego Comando B para cerrar el Explorer. Nuestro AFC para generar los React js son componentes funcionales. Perfecto. Vamos a renderizar rápidamente este componente justo dentro la app jeers comando P para que aparezca este pequeño cuadro de búsqueda en la parte superior. Y voy a configurar que G está abierto. Entonces justo dentro del div con el nombre de clase de AB, vamos a renderizar la parte superior ahora, cerrarla con la etiqueta de cierre automático y la carga tecnológica. La parte superior ahora se importa automáticamente en una tina. Entonces, si te estás preguntando cómo hacer esto, bien, comencemos de cero, límpialo. Y voy a hacer Top Nav desde dot slash components slash top nav. Es tan sencillo como eso. Volvamos al componente Top Nav. Bien, así que vamos a darle a este div un nombre de clase. Entonces vamos a especificar el ancho máximo. Hagámoslo 15, 20 de margen de izquierda y derecha. Hagámoslo auto. Y vamos a tenerlo display, flex, justificar contenido, espacio entre. Y luego vamos a alinear elementos para centrar el relleno. Vamos a hacerlo para lo más sencillo que sea correcto. Sé que alguien siente curiosidad por todos estos términos porque algunos de ustedes, esto va a aparecer mediodía, pero incautos. Después de mi increíble explicación, definitivamente la entenderías lo suficientemente bien. Entonces lo que está pasando aquí es que se nos da este div, un ancho máximo de 15, 20. Y toma notas, así es como especificar un valor personalizado. Así que puedo borrar esto así, y luego puedes especificar el valor real de la clase. Pero si quieres especificar un valor personalizado, vas a abrir el bloque así y luego hacer 15, 20. Entonces, cuando pase el cursor sobre la clase en este momento, va a mostrar el equivalente real de CSS que está funcionando detrás de escena. Déjame mostrarte, espero en el ancho máximo, entonces aquí tenemos el max-width para ser 15, 20. Cuando vuelo el cursor sobre el auto MX. Puedes ver aquí tenemos el margen izquierdo para ser auto y el margen derecho para ser auto. Entonces el MX simplemente implica margen en el eje x, que es una actriz dice margen de izquierda a derecha. Y aquí lo tenemos display flex. Y sé que no te estarás preguntando que no mencionamos la exhibición por aquí. Pero cuando pasas el cursor sobre el flujo de clase, vas a ver display flex. Y aquí justifican el espacio de contenido entre. Déjame mostrarte. Se puede ver que justifican el espacio de contenido entre y alinear los elementos al centro y el relleno es una rienda. Con la sencillez de esta explicación, sé que ahora mismo la entenderás lo suficientemente mejor. Así que comencemos. El nervio superior se divide en tres lugares. Tenemos el lado izquierdo, el centro y el lado derecho. Entonces el lado izquierdo, déjame mostrarte rápidamente. Aquí. En el lado izquierdo tenemos la hamburguesa, los jóvenes, su logo y la entrega gratuita. Y en el centro tenemos el cuadro de búsqueda. En la esquina superior derecha, tenemos las tarjetas. Así que vamos a trabajar en el lado izquierdo. Vamos a tener un div por aquí con el nombre de la clase y escribir usando el nombre de la clase, vamos a tener un display flex, align items, center. Chicos. Algo que realmente quiero traer a su conocimiento es que viento de cola mezclado Eileen, muy fácil. Honestamente hablando, al final de este curso, siempre querrás usar Tailwind, créeme. Ahora vamos a tener otro div con el nombre de clase de puntero de conocimiento causal. Así que bien, dentro de este div, vamos a renderizar el icono. Y luego para eso, tenemos que instalar el icono de React. Y ahora voy a hacer. Npm instalar iconos de tablero React. Así como esto. Cetona, la clave Enter. Bien, Así que los íconos React instalados, restan, caen. Quiero decir, seguro que abres el archivo package.json y aquí está. Ciérralo hacia abajo. Así que justo dentro de este div, vamos a renderizar un icono llamado menú delineado. Pero antes de hacer eso, primero, tenemos que importarlo desde los íconos de React. Entonces voy a hacer importaciones. Delineé el menú de React icons slash. Tenemos dos sufijos con IA. Porque por aquí lo prefijamos con IA y luego también tenemos que sacarlo a la superficie aquí con un tinte. Por lo que todos los iconos relacionados con la IA se importarán aquí. Fresco. Entonces supongo que deberíamos hacerlo ahora mismo para que no tengamos que perder el tiempo haciéndolo en el futuro. Aquí voy a hacer. Delineé pistas de esquema tan tranquilas. El icono de cerrar para el menú. Déjame mostrarte rápidamente a este tipo de aquí. Entonces este es el tipo que acabamos de importar, que es el menú de IA offline. Y este es el esquema sabio, este tipo, sé que entiendes todas estas pestañas. Y por último, etiqueta de campo. Entonces, todos estos tops tienen el prefijo de IA. Y es decir, por eso lo sacamos a la superficie con un bonito. Ahora vamos a ejecutar ese menú esbozado. Vamos a darle una talla. Digo 25. Seguro. A partir de aquí, vamos a hacer npm comienza para poner en marcha el proyecto y asegurarnos renderizar este componente justo dentro de la aplicación. Vaya, perdón chicos, hay un error en el comando. Entonces creo que esto va a funcionar esta vez. En la esquina superior izquierda de la pantalla, vas a ver el menú de esquema. Y este icono de aquí se utilizará para alternar el sorteo lateral. Justo después del cierre div. Vamos a tener una etiqueta en la cabeza y voy a llamar a estos derechos estaban en el Hipódromo. Vamos a tener un spam. Spam. Voy a hacer comidas. Así que vamos a darle un estilo className, test, dash to Excel. Así que básicamente estamos especificando el estilo de formulario. Y cuando pasas el cursor sobre la clase, te va a mostrar el equivalente CSS que se está ejecutando detrás de escena. Y por favor, al aplicar estilos con Tailwind, no es necesario salir de la cotización. Entonces todo lo que vas a hacer va a estar justo dentro de los códigos. Suena bien, ¿verdad? Hermoso. En un dispositivo más pequeño como m, queremos que la prueba aparezca Excel. Entonces básicamente estamos implementando el punto de interrupción por aquí. Entonces en una pantalla más grande, la prueba va a aparecer para Excel, tan simple como eso. Entonces aquí, el relleno izquierda y derecha van a ser dos. Entonces, cuando ahorres, vuelve al Brazile. Déjame mostrarte. Ahora. Cuando aprieto, ves que la prueba se hace más pequeña. Entonces, cuando aumentas en un punto determinado, esa prueba se hace cada vez más grande. Entonces esto va a ser grande, mediano, y este es un dispositivo más pequeño. Obsérvelo otra vez una vez más. Entonces, en un dispositivo más pequeño, la prueba se ve así. En medio, el tamaño de la fuente va a aumentar. Se puede ver en un dispositivo más grande, va a aumentar. Otra vez. Echa un vistazo. Chicos de Beneficio. Así que creo que el viento de cola es extremadamente impresionante y en realidad facilita el trabajo. Bueno. Entonces justo después de la etiqueta de cierre de cabeza, vamos a tener un div. Vamos a darle un nombre de clase. Y justo, dentro de la clase vamos a estilizarla llamando realmente a las clases de utilidad en viento de cola. Ahora así es como funciona Tailwind. Entonces aquí vamos a hacer que se caliente en un dispositivo más pequeño. Bien, Entonces en una pantalla grande, flex de pantalla regular, alinee los elementos al centro. El color de fondo va a ser gris. Entonces, vamos a especificarle un número para que en realidad se agregue a. ¿Debería ver el grosor del color o algo así? Entonces queremos que sea redondeado. Corre que va a estar lleno. Así que el relleno va a ser uno. Las pruebas. Hagámoslo 14 pixeles. Y por favor, aquí, también tenemos que añadir unos pixeles como este. Oye, pasa el cursor sobre él y échale un vistazo. Ahora tenemos el ancho máximo para ser de 15, 20 píxeles, cerrar el diff. Entonces ahora mismo, déjame explicarte lo que está pasando. Entonces aquí vamos a tener una etiqueta P, y yo voy a hacer tres. Otra etiqueta P por aquí, duplicada. Y vamos a tener entrega así. Entonces bajo un dispositivo más pequeño, no queremos que este tipo esté bien, pero en una pantalla más grande, queremos verlos aquí arriba. Bien, déjame mostrarte rápidamente cuando guardes en el navegador. ¿Aquí está? Entonces cuando encojo la pantalla, vamos a ver, se puede ver que en un dispositivo más pequeño, desaparece. Pero cuando aumentas en una pantalla más grande, deberíamos poder ver que estos en realidad estaban haciendo que todo se vea receptivo. Y claro, te agradecería profundamente que también pudieras calificar y revisar estas convocatorias. Comparte este costo a tus amigos porque va a ser útil. Así que dialicemos la etiqueta p gratis, voy a hacer className. El color de fondo sea G dash, naranja, dash 700 porque las mujeres, el grosor del color naranja para ser realmente muy bueno. El color de prueba va a ser blanco. Prueba el guión blanco. El fondo va a ser tonto redondeado. El relleno está a prueba. Queríamos abordar. Y preocúpate, voy a explicar todas estas cosas en un GPA. Y aquí otra vez, vamos a darle un nombre de clase. El relleno va a ser a esa prueba, va a ser inclinado. Guardar. Y veamos qué tenemos en el navegador. Echa un vistazo. ¿Puedes ver eso? Ahora tenemos el logo y la entrega gratuita en un estado muy perfecto. A mí me encantaron estos. Ahora déjame explicarte qué pasa bajo el capó. Por aquí tenemos un className y en un dispositivo más pequeño, vamos a ocultar todas estas etiquetas p. Pero en una pantalla más grande, queremos que muestre elementos flex align al centro. El trasfondo de las formas va a ser genial. Entonces el foo redondeado va a hacer que la estufa sea una especie de secular. Déjame mostrarte estas cosas por aquí. Y cuando pasas el cursor sobre él, el radio fronterizo es de 999 píxeles, que en realidad podría ser del 100 por ciento. Y el relleno es 0.2. Rem prueba es 14 píxeles están a la derecha. Ahora ya terminamos con el lado izquierdo. Procedamos con la barra de búsqueda en el centro. Justo después del cierre div. Vamos a tener otro div con el nombre de la clase. Le vamos a dar un color de fondo de gris discontinua 200. Entonces esto en realidad le diría el valor del gris, bien, qué tan grisáceo aparecerá. Las cosas así. Alimento redondeado. Entonces ya deberías entender todas estas cosas. Mostrar flex, alinear elementos, centro, patrón desde el eje x, lo que implica izquierda y derecha. Vamos a hacer dos. Y luego el ancho, vamos a tener nuestro propio ancho personalizado. Entonces, cada vez que haces algo como esto, significa que quieres implementar tu propio tipo de cosas personalizadas, por ejemplo , el relleno izquierdo y derecho, puedo decidir hacerlo así de una manera personalizada que pueda hacer para tener imágenes. Cuando pasas el cursor sobre él así, ya ves, pero en izquierda. Entonces si píxeles relleno derecho a tener píxeles, pero yo decido no hacer eso. Voy a guardarlo así. Así que siempre que quieras tener tu propio estilo personalizado, puedes usar el corchete. Ahora, relleno a la izquierda es 0.5 rem botón, derecha es 0.5 rem. Entonces el ancho 200 pixeles. En un dispositivo más pequeño, el ancho va a ser de 100 píxeles. En un dispositivo grande, el ancho va a ser de 500 píxeles. Vaya, échale un vistazo. Bonito. Vamos a cerrar el div. Justo aquí. Vamos a tener el esquema sabio, recuerda que lo importamos de Riad. Iconos. Solo resalta y copia. Y aquí lo voy a hacer más cerca tanto la etiqueta de cierre automático, darle una talla de 25. Guardar, echa un vistazo al navegador. Ahora, puedes ver, déjame mostrarte. Aquí, ¿es así? Pero el problema ahora es que se ha alineado a la esquina superior derecha de la pantalla. Entonces encontraremos la manera de alinearlo al centro. Nuevamente, justo dentro del div. Vamos a tener una etiqueta de entrada con un nombre de clase y luego el color de fondo va a ser. Transparente, tablero P T2. Por supuesto que ya sabes lo que es. El ancho va a ser tonto. Esto en realidad especificará el 100 por ciento al ancho. Vamos a sacarlo. Echa un vistazo. ¿Puedes ver cuando pasas el cursor sobre la clase, vas a ver el CSS real que se está ejecutando detrás de escena Y dice que el ancho es del 100%. Y por favor, si toda esta barra no está funcionando para ti, es simplemente porque no instalaste el Tailwind IntelliSense. Así que asegúrate de pasar a las extensiones. Luego instala inteligencia de viento de cola. Lo tiene. Bien, bien. Y por cierto, te enseñé a hacerlo en la conferencia anterior. Vamos a continuar. Entonces el esquema de enfoque, déjame mostrarte algo antes de que hagamos eso. Guardar. Bien, vamos a cerrarlo así en el navegador. ¿Aquí está? Puedes ver cuando coloco mi mouse justo dentro de la etiqueta de entrada, vas a ver este contorno. Entonces esto es lo que no queremos. Cuando hago click out, ya ves que se ha ido. Y luego cuando haga clic en, verá el contorno. Vamos a quitársela rápidamente. Entonces voy a hacer bosquejo de enfoque. Se va a conocer. Guardar Jakarta, el navegador. Cuando haces clic en él, ves que se ha ido. Perfecto. Bien, creo que deberíamos cerrarlo con la etiqueta de cierre automático. Hace que el código se vea un poco más limpio. Y bueno, vamos a hacer el tipo de entrada es un marcador de posición de prueba rápida. Tales comidas, cuando guardas en el navegador, ¿ puedes ver comidas establecidas? Y este es el icono que alquilamos por ahí, que es el icono de búsqueda de contorno. Tenemos que implementar los recortes. Entonces justo después del div de cierre aquí, vamos a tener un canotaje. Dale el nombre del racimo para estilizar sea G dash, orange, dash 700. Entonces esto en realidad ayudará a los ricos, para lo cual el color se verá más grueso o algo así. La prueba va a ser blanca. Queremos que se oculte bien, dentro de un dispositivo más pequeño, y luego un dispositivo mediano como el iPad. ¿Bien? Vamos a alinear los elementos al centro. El acolchado superior e inferior. También. Redondeado. Vamos a hacer que corra ese foo justo dentro del cuerpo. Y voy a hacer tarjetas cuando guardes y revises el navegador. Y ahora hemos logrado empujar un poco el cuadro de búsqueda al centro. Y luego el corte se está alineando a la esquina superior derecha de la pantalla. El nido y la lima es agregar el icono de corte justo dentro del cuerpo. ¿Cómo lo hacemos ahora mismo? Bien, voy a hacer aquí, vamos a usar el combustible de la tarjeta de combustible. Ir a lo más alto. También tenemos que ingresar este campo de entrada, campo de corte. Y por favor no me preguntes de dónde vienen todos estos nombres. Así que vamos a importarlo desde los íconos de tablero React. Entonces lo vamos a sacar a la superficie con BA. Así que vamos a importar rápidamente todos los iconos que están bajo BA. Y supongo que es una más. Oye, voy a hacer BS persona. Tan simple como eso. ¿Correcto? Estamos en el fondo. Vamos a renderizar combustible BS, cortar combustible más cerca con la etiqueta de cierre automático. Y luego vamos a especificar el tamaño. Así como esto. Guardar en el navegador. Estos pueden ver que todo aparece como se esperaba. Entonces déjame mostrarte. Ahora cuando minimice la pantalla, déjeme apretarla hacia abajo para calentar unos puntos de interrupción en particular. Ya ves, puedes ver en un dispositivo más pequeño, no queremos que aparezca. Ahora, el gato aparece Bueno. De hecho, golpeamos nuestros objetivos, y eso exactamente está bien. Por lo que la siguiente línea de término es implementar el sorteo lateral. Entonces cuando haga clic en este botón, el sorteo se deslizará hacia afuera. Y cuando hago clic en el icono, ellos también dibujan. Vamos a cerrar. Hagámoslo en la próxima conferencia. 58. 56 Nav lateral: Entonces la intención aquí es hacer clic en el menú de hamburguesas para abrir el lateral nav. Pero ahora mismo, cuando haces clic en él, no pasa nada. ¿Puedes ver más alto, verdad? Así que agreguemos rápidamente al código VS para implementar dicha funcionalidad. Para proceder, primero, tenemos que declarar la variable de estado necesaria para ser utilizada. Entonces voy a hacer const side lo suficiente, conjuntos más tranquilos lado ahora, adquirir estado estadunidense. Y esta va a ser una operación booleana. Entonces el estado inicial va a ser falso. Bien, habiendo hecho esto, vamos a implementar rápidamente en este icono de aquí. Entonces, ¿dónde lo tenemos? Aquí está, que es el menú delineado de IA. Y luego lo vamos a implementar en este div div wrapper para el menú de esquema. Vamos a especificar onclick. Onclick de este icono. Queremos abrir el lado ahora, bien, así que básicamente lo que hace es cambiar el estado de falso a verdadero o falso a verdadero y falso a verdadero. Déjame mostrarte rápidamente. Ahora, vamos a invocar la función de configuración para actualizar el estado inicial. Y se va a establecer side nav. No voy a citar lo suficiente. Bien, así que haz clic en el icono de aquí. Se va a cambiar el estado inicial para forzar cuando vuelvas a hacer clic en él, va a cambiarlo a través. Déjame mostrarte lo que quiero decir con ese lado console.log. Ahora, cuando le digas ventrículo al navegador y por favor asegúrate la aplicación ya se esté ejecutando. Justo aquí. Uy, dice lado ahora no está definido. Justo aquí es donde radica el problema. Aquí hay un error tipográfico. Esto se supone que es const, y sé que algunos de ustedes pueden detectar rápidamente este error, arreglarlo al final cuando guarden en el navegador o Comando I para abrir la consola. Ahora, cuando haga clic en el menú, va a cambiar el estado inicial, el verdadero. Ahora, el estado inicial se vuelve cierto cuando vuelvo a hacer clic en el menú, va a cambiar la fuerza. Así que básicamente estamos cambiando de falso a verdadero o falso a verdadero. Bueno. Sigamos. Bien, Así que el nido y aprender es crear una superposición de fondo porque queremos que todo aparezca de manera profesional. Entonces justo después de que él compró, vamos a tener otro div className. Entonces le voy a dar un color de fondo de negro y luego dividir el negro por 60 y preocuparse, definitivamente verá el resultado. Se va a fijar la posición, el ancho, hagamos que sea un 100%, que está lleno. La pantalla principal. El índice z porque queremos que aparezca en la parte superior. Bien, se va a guardar como una superposición. Entonces tenemos que especificar el índice Z. pluma desde arriba es cero y desde la izquierda es Flecha. Cierre el DV cuando guarde el navegador. Ahora, aquí está el resultado. No te preocupes, vamos a controlarlo. Entonces la forma en que lo controlaremos es colocando una condición. Entonces, cuando lo suficiente es cierto, queremos mostrar la superposición. Ahora. No queremos mostrar nada, lo que simplemente implica cuando hacemos clic en el menú de hamburguesas así, queremos mostrar el overlay. Entonces, cuando se haga clic en el menú de hamburguesas, vamos a mostrar el demasiado más. No lo vamos a mostrar. Déjame mostrarte rápidamente. Ahora para escribir JavaScript. En Jesús, tenemos que abrir el corchete. Entonces voy a hacer si el nervio repentino es cierto. Queremos mostrar en este dv de aquí, que son los resaltados de superposición. Córtalo, luego abre los paréntesis porque estamos esperando un diseño de interfaz de usuario, pegado otro como este. No vamos a mostrar nada. Guarde y veamos si está funcionando. Recargar. ¿Puedes ver? Entonces cuando hago clic, aparece esto exactamente como cómo colocar una condición en la preocupación excesiva todo está a punto de tomar forma respecto a la cima ahora. Bien, así que lo siguiente en la fila es crear el propio nav lateral. Entonces aquí mismo, vamos a tener un div con el nombre de la clase y escribir en donde el nombre del clúster tendrá que estilizarlo. Entonces aquí, los ingresos rondaron la posición fija desde la parte superior, cero, desde la izquierda, cero. El ancho va a ser, vamos a especificar un ancho personalizado, 300 píxeles. Pantalla. Entonces golpeamos la pantalla simplemente significa que la altura es de 100. Pocas alturas. Echa un vistazo. Bg va a ser blanco, que es el fondo. El índice z es diez. Por lo que queremos que se anime dentro y también se anime hacia fuera. Entonces para eso, especifique la duración. Y hagámoslo 300. Podemos hacerla 200 cuando guardes en el navegador. Aquí está. Se puede ver que ya está tomando forma, pero ahora mismo parece que está fijado a la pantalla. No es movible. ¿Ves? Bien, sigamos adelante. Déjame mostrarte. Entonces, um, hagamos algo muy bonito. Vamos a condicionar en el sorteo lateral. Entonces aquí mismo, vamos a tener corchete de apertura y cierre. Entonces, si el nav lateral es cierto, queremos mostrar este azulejo de aquí, resaltarlo y cortarlo. Ven aquí. ¿Bien? Si el lado nav es cierto, queremos mostrar esta tau. ¿Bien? También resalta y copia, pero ahora vamos a cambiar el estilo. Rosa. Hagámoslo así. Formato, el código. Bueno. Ahora, déjenme explicarles cuidadosamente lo que sucede aquí. Entonces, si el lateral nav es cierto, déjame mostrarte el estado inicial por aquí. Si es cierto, queremos que aparezca desde los cero píxeles izquierdos. Y luego vamos a especificar el ancho de 300 píxeles. lo contrario, si es falso, queremos que vaya en una dirección negativa. Déjame mostrarte. Entonces aquí vamos a especificar guión izquierdo. Vamos a tener un valor personalizado. Y voy a hacerla 100 por ciento, desplazará la barra lateral en una dirección negativa hacia el eje x, ocultándola de la pantalla. Seguro en el navegador. Bien, déjame ver algo aquí. Bien, cambiémoslo a verdad. No pasa nada. Aquí todo es correcto. Bien chicos, cambiemos los 200, que es la duración. Vamos a cambiarlo a 300. Bien, chicos, esto va a funcionar. Cuando lo cambias a falso. Guardar. ¿Ves que desaparece? ¿Cuándo lo cambias a verdad? Aparece. Se puede ver desde la izquierda cuando el estado inicial de la navegación lateral se establece en true, el cajón de navegación aparecerá desde la izquierda cero píxeles, y entonces el ancho va a ser de 200 píxeles. Pero si el estado inicial del lado ahora nos fijamos en falso, desde la izquierda, va a ir negativo al 100%. ¿Bien? Y aquí ocultando este lado, dibuja lo más simple que. Entonces ahora comencemos a implementar los íconos del menú, derecho, vistiendo el costado ahora. Entonces hagámoslo en la próxima conferencia. 59. 57: Bienvenidos de nuevo a todos. Entonces en esta conferencia, vamos a implementar los menús justo dentro del sorteo. Bien, así que lo primero que vamos a hacer es implementar un icono que se utilizará para cerrar el sorteo lateral. Hagámoslo rápido. Así que bien, estamos en el DV. Déjame mostrarte esto, el DV de aquí, así, justo dentro. Vamos a renderizar el icono de cierre del contorno. Déjame ver. Aquí está. Lo importamos en la conferencia anterior. Copia. Bajen. Vamos a darle la vuelta al diodo por aquí. Más cerca con la etiqueta de cierre automático. El tamaño, por supuesto, va a ser 25. Guardar en el navegador. ¿Aquí está? Pero no lo queremos en la esquina superior izquierda. Así que las mujeres necesitan estar alineadas en la esquina superior derecha de aquí, justo dentro del cajón de navegación. Por ahora, no creo que el estilo sea algo difícil, así que hagámoslo clicable. Por ahora. Aquí voy a especificar el icono onclick onclick. También queremos cambiar el estado inicial de falso a verdadero, tal como hicimos en la conferencia anterior. Aquí, déjame mostrarte exactamente lo que hicimos por aquí. Entonces creo que solo tengo que copiar el onclick así. Pégalo aquí. Formateemos el código. Hermoso. Guardar en el navegador. Haga clic en ¿puede ver y luego haga clic en esto para abrir Estos dos cierran. Bien, así que vamos a estilizar rápidamente el icono de cerrar y tenerlo alineado correctamente. Vamos a tenerlo para posicionarlo absoluto. Déjame mostrarte. Ya ves. Bueno. Entonces desde la derecha, hagámoslo cuatro. Desde arriba. Hagámoslo cuatro. Y entonces el costo va a ser puntero. Guardar. Y ahora aquí está. Cerrar, abrir, cerrar, abrir. Y ahora espero que entiendas lo suficientemente bien cómo logramos estos resultados. Si no lo entiendes por primera vez, aconsejo que vuelvas a pasar por las conferencias para tener una idea clara de lo que estamos hablando. Veamos las noticias de respuesta móvil. Verás en el iPhone. Vamos a tomarlo en el iPhone 12. Echa un vistazo. Todo genial. Así que vamos a implementar los menús por aquí, y eso es extremadamente fácil. Es tan simple como ABC. Entonces después del icono, vamos a tener aquí, un seto para etiquetar. El relleno es para leer la etiqueta H2. Lo vamos a hacer tal como lo hicimos en la conferencia anterior. Y entonces vamos a tener un lapso. Un lapso. Voy a hacer comidas. Dialicemos el lapso. Naranja 700. Y aquí está. Una cosa que me encanta hacer es la fuente. ¿Puedes ver ahora que la etiqueta span se vuelve extremadamente curva? Bien. Entonces justo después de la etiqueta H2, vamos a tener un nub justo dentro del nav. Vamos a tener una lista desordenada, UL. Vamos a darle un estilo. Hagamos que muestre flex y la columna flex direction. El relleno es para la prueba. Gris 900. Fresco. No sería la UL, vamos a tener las etiquetas LI, que es lo menos. Entonces aquí, dale un nombre de clase, estilízalo dentro de la clase por realmente importantes las clases de utilidad que están presentes ahí mismo y Tailwind. Y yo soy uno de la clase es test dash Excel, PUI, que es la parte superior y la parte inferior. Y entonces vamos a tener un flex de display. Así de simple como eso. Entonces justo dentro de la etiqueta LI, vamos a renderizar el BS Pearson, que es este ícono de aquí. El tamaño 25, darle un nombre de clase para estilizarlo. Entonces, ¿el margen derecho? Quien solo MR va a haber para lo que un sentido de actriz va a ser una RAM. Déjame mostrarte mi generar una RAM. Y luego la prueba. Blancos. El color de fondo es negro. Redondeado, tonto. Esto en realidad ayudará a que la frontera reduzca, ahorre. Y vamos a ver. Bueno. ¿Puedes ver eso? Ahora tenemos a este tipo por aquí y lo que deberías hacer son mis cuentas. Entonces justo dentro de la etiqueta LI, cuando guardas, aparece como estos. Impresionante. Todo está funcionando como se esperaba. Ves más alto, ¿verdad? Entonces lo que voy a hacer ahora mismo es resaltar así la etiqueta LI. Y luego duplicarlo cuatro veces, 1234. O puedes copiar y pegar cuatro veces. Entonces, lo que debemos hacer ahora mismo es cambiar los íconos y la etiqueta es bastante simple para hacerlo. Justo aquí. Este icono va a ser la devolución de camiones CB. Y claro que debemos importar estos desde el icono de Riad. Creo que deberíamos hacerlo de la manera que lo hicimos antes. Vamos a importar todos los íconos necesarios para que no tengamos que volver aquí para volver a hacerlo . Aquí. Vamos a importar, vamos a importar FA, amigos usuarios, FE, Google Wallet. Puedes decidir usar un ícono diferente. Sólo tu elección. Bien. Creo que tenemos que duplicar esto porque ya no tengo que escribir desde cero. Entonces chicos, noten que aquí prefijamos la totalidad de los íconos con FE. Entonces vamos a arreglar su ancho. Lo mismo aquí. Lo prefijamos con TB, así que tenemos que arreglarlo con TB. Esa es la única forma en que funciona. Entonces me preguntó cómo funciona porque no sé. Entonces aquí vamos a importar ayuda vacía, más tranquila. Md, fiebre perfilada, ¿verdad? Vaya, el contorno debería estar aquí, letra mayúscula 0. Atraviesa tu estufa y asegúrate de que toda la entrada sea correcta. Bien. Ahora comencemos a hacer uso de ella. Aquí tenemos devolución de camión TB. Y esto va a ser entrega. Tantos ahorran y pagan. El sorteo lateral. Puedes ver aquí tenemos entrega. Y cuando acerques el zoom, vas a ver las pelotas por aquí. Bien, entonces tenemos que cambiar. El resto de este tipo es el nist está vacío esbozado favoritos. Aquí. F8, google Carteras. Vaya, se supone que esto es billetera. Entonces, por último, vamos a tener ayuda. Puedes seguir adelante para agregar más íconos y más cosas que quieras. Bien, no creo que estemos usando la etiqueta de campo AI, límpiala. Las preguntas frecuentes, nuestros amigos, no hicimos uso de ella. Quítelo. Puedes decidir hacer uso de ella si quieres. ¡Uy! El favorito de contorno vacío no se encontró en Riyadh diagonales. Md en línea favorito. Este tipo de aquí. Vaya, chicos, tenemos dos sufijos con MD. Te dije que esto no va a funcionar si no lo sacas a la superficie también. Si no lo prefijas. No sé por qué construyeron esas cosas así. Así que ups. Cierto chicos. Bien. Bien. Bien. Lo siento. Creo que esto va a funcionar esta vez. Sí, esto va a caminar. Favoritos está trayendo tema. No sé por qué. En fin, el viento de cola es mi favorito. Ahora, ¿todo es qué juego? Y está funcionando perfectamente bien como se esperaba. Todo se ve bien. Ves que un dispositivo móvil aparece muy bien. De mi parte. Echa un vistazo. Esto es clásico. Esto es clásico. Bien chicos, ya terminamos con el top. Por lo que la siguiente línea de término es implementar el futuro tercer componente. Hagámoslo en la próxima conferencia. Nos vemos entonces. 60. 58 SiseNav: Bien, entonces antes de continuar con el futuro componente, tenemos que hacer las correcciones necesarias. Cuando abras el navegador, te vas a dar cuenta de que por defecto, se abre el sorteo lateral. ¿Puedes ver? Entonces, cuando el usuario visita tu sitio web, así es exactamente como va a agregar aquí. Y eso no es nada agradable. Entonces ahora puedes ver, cuando hago clic en esto, se cierra. ¿Puedes ver por defecto que aparece así? ¿Sabes por qué? Es simplemente porque establecemos que el estado inicial sea cierto. Volver al código VS, justo en las líneas 14, donde tenemos los estados. Vamos a ponerlo en falso. Entonces el estado inicial es falso. Cuando vuelvas al navegador, puedes ver ahora que aparece como se esperaba, y luego el usuario tiene que hacer clic en el icono de hamburguesa para abrir el cajón de navegación hacia fuera. Una cosa que también me encantaría hacer es implementar los derechos onclick no sería demasiado. Entonces, cuando haga clic en la superposición, debería poder cerrar el cajón de navegación. Déjame mostrarte copia. Y aquí está la superposición. Lo que voy a hacer ahora. A ver si va a funcionar. Algo así. Seguro. Aquí. Al hacer clic en la hamburguesa, ésta abre el costado. Empate. Al hacer clic en la superposición, el cajón de navegación del sitio se cerrará. Bien, así que ya no dependemos solo del icono de cerrar. También puede hacer clic en el icono más. ¿Estás haciendo clic en la superposición? Hermoso. La siguiente corrección va a ser el logo de aquí. Entonces queremos que los Aedes aparezcan corporales. Entonces lo que voy a hacer ahora mismo, desplazarme hasta la parte superior es dar el nombre de la clase en español y luego tablero de fuente. Y estos harán que parezca más seguro corporal en el navegador. ¿Ves lo hermoso que es esto? Echa un vistazo. Impresionante. A mí me encanta. 61. 59 Componente destacado: Bienvenidos de nuevo a todos. En esta conferencia, procederemos con el futuro componente. Dirígete a VS Code, abre el Explorer, y luego escribe donde el paquete de componentes, vas a ver el futuro. Jazz. Haga clic para abrir un FCE para generar los componentes funcionales de la flecha React. Vamos a renderizar rápidamente este componente, ¿verdad? Estamos en la app Js. Y por favor asegúrate de importarlo en la parte superior. Ahora, lo primero que vamos a hacer es declarar una matriz de objetos. Y justo, dentro del objeto, vamos a tener la URL de las imágenes que queremos deslizar. Aquí. Voy a hacer controles deslizantes const, equa, configurarlo una matriz vacía y derechos dentro de la matriz, vamos a tener el objeto. Así que no te preocupes, ya tengo el objeto preparado. Lo que vamos a hacer es copiar y pegar. Es tan sencillo como eso. Así que volvamos a los materiales alimenticios. Podría ayudarla y luego copiar los objetos héroes. Ven aquí, resalta nuevamente de las líneas cinco a siete. Límpielo ya que hemos copiado los objetos ya hechos. Entonces sólo tenemos que pegar. Bien, entonces todas estas imágenes, las despliegué a Cloudinary. Bien, tengo cuentas Cloudinary donde puedo subir imágenes. Bueno. Una vez hecho esto, el siguiente en línea es declarar la variable de estado necesaria para ser utilizada. Entonces en la parte superior, queremos hacer uso de EU did hook. Así que justo debajo de la matriz, vamos a generar los Estados Unidos hizo fragmentos de gancho como este. Entonces aquí vamos a tener conjuntos de índices actuales. Que estos dos capiteles vean. El estado inicial va a ser cero. ¿Bien? Implementemos la interfaz de usuario. Destaca el futuro. Deslímpielo. Vamos a darle un nombre de clase y escribible en la clase, tenemos que hacer uso de las clases de utilidad para estilizar el div. Dale un ancho máximo de 15, 20 píxeles, la altura de 500 píxeles. El ancho. Hagámoslo cuatro años. Acolchado superior e inferior. Va a ser para relleno izquierdo y derecho va a ser cuatro. Y vamos a tener que posicionar derechos relativos dentro del div. Vamos a tener otro div, darle un nombre de clase, y luego vamos a especificar el ancho de nuevo va a ser ancho completo. Entonces solo tengo que copiar de aquí. La altura es de altura completa. Esto hará que la altura sea 100 por ciento y la anchura 100%. Ya deberías saber eso. Ejecutar deuda para sobresalir, BOLSA. La duración es de 500. La posición de fondo es el centro. El tamaño de fondo es cava. Entonces esto tendrá que cambiar el tamaño de las imágenes para que quepan en el contenedor. Entonces esta va a ser la duración de la transición, tan simple como eso. Entonces déjame mostrarte rápidamente. Ahora. Puedo optar por aplicarle estilos. Imagen de fondo. Ahora tenemos que usar los deslizadores de URL literales de plantillas dentro de la matriz. URL del punto de índice actual. Entonces veamos qué pasa en el navegador. El navegador. Puedes ver ahora esta es la primera imagen. Entonces déjame explicarte qué pasa bajo el capó. Aquí mismo, tenemos una matriz de objetos. Para acceder al elemento en una matriz, tenemos que hacer uso del índice de matriz. Entonces aquí decimos que el estado inicial del índice es cero, lo que significa que va a devolver esta imagen por aquí. Entonces cuando revisas el navegador, aquí, ¿es así? Esta es la primera imagen derecha, dentro de la matriz. Entonces cuando haga el índice uno, va a recuperar la segunda imagen en la matriz. ¿Puedes ver el índice dos que recuperará los elementos tet o imagen en la matriz Perfecto. ¿Verdad? Ahora hemos exhibido con éxito nuestras imágenes, pero ahora no se desliza, sino preocúpate, lo haríamos en un GeV. Entonces antes de continuar con las diapositivas, también tenemos que implementar la flecha izquierda y la derecha. Desplazemos rápidamente a la parte superior, donde vamos a importar los iconos de los iconos de reacciona, BS como diferentes compactos. Izquierda. Nido es el Chevron cervezas derechos de combate. Entonces solo tenemos que destacar estos y copiarlos aquí. Y luego cambiémoslo a escribir. Tan simple como eso. Desplácese hacia abajo. Justo después de este div. Vamos a tener otro div. ¿Verdad? Dentro del div, vamos a renderizar ser como quedan varios compuestos. Vamos a aplicar estilo para comer la posición absoluta. Entonces esto realmente colocará el icono encima de la imagen. Top es del 50 por ciento. Entonces vamos a tener una traducción negativa x por aquí. Luego traduzca y. Vamos a especificar un valor personalizado. El 50%, bien, es cinco. Pruebas a Excel. Por lo que esto indica el tamaño de fuente n, la altura de la línea, redondeada es completa. Acolchado. Al fondo va a ser guión naranja 700. La prueba es blanca. Vamos a establecer el cursor para que sea un puntero. Tan simple como eso. Guardar en el navegador. Aquí está, se supone que este tipo de aquí viene a la izquierda. Veamos qué es lo que está mal. El top es del 50 por ciento. Traducir x menos cero, Traducir Y. Esto va a ser -50 por ciento. Aquí. Se supone que esto comienza desde la izquierda y el modo desde la derecha. Creo que eso solucionará el problema. Echa un vistazo. ¿Puedes ver? Perfecto. Entonces lo siguiente en la línea es duplicar este icono de aquí y luego alinearlo para derivar al cuadrado. Fácil de hacer eso. A partir de las líneas 2042, líneas 26, resalte y duplique. Entonces aquí, cambiemos esto para escribir seguro. Ahora, ¿ves? Bueno. Entonces cambiemos el icono para indicar el lado derecho. Aquí va a haber varios pactos. Bueno. Muy bien, así chicos, Todo está tomando forma y no se olviden de revisar, enriquecer este curso es sumamente importante porque tengo que saber exactamente lo que están sintiendo por ahí. Enseñar bien. Hermoso. ¿Bien? Entonces básicamente lo que quiero hacer ahora mismo es esconder las flechas. Y luego queremos que el error sea visible cuando coloquemos el cursor sobre el deslizador. Para eso, voy a hacer algo como esto. Aquí. Vamos a agrupar así al div padre. Entonces ven aquí y voy a hacer calefacción. Entonces esto va a ocultar la flecha a la izquierda. Ahora queremos que la flecha izquierda aparezca en Hoover. Lo que voy a hacer es grupo dash, Hoover, regular tener un bloque de visualización. Guardar. ¿Ves cuando me pongo el cursor sobre él, aparece? Ahora, échale un vistazo. Ya ves, vamos a aplicarlo rápidamente en la flecha derecha. Sólo hay que copiar todo desde aquí. Después pega. Guardar en el navegador. Ya ves cuando floto sobre él, muestra la flecha izquierda y la derecha, derecha. Ahora, cuando haces clic en las flechas, no pasa nada. Así que definamos rápidamente la función para implementar la flecha. Desplázate hasta la parte superior. Perdón, hagamos que el estado inicial sea cero para que aparezca amablemente. Entonces aquí vamos a definir una función para manejar el clic de flecha. Const. Deslizador anterior, un núcleo, lo configuró a nuestra función. Y aquí vamos a tener una variable llamada first slide. Establecerlo en el índice actual es igual a cero. Otro. Y esto se llamará nuevo índice. Igual es la primera diapositiva. Entonces, si la primera diapositiva es bastante cierta, vamos a hacer deslizadores. Punto slido longitud de punto menos uno, flechas. El índice actual va a ser menos uno. Entonces lo siguiente en la fila es actualizar el estado. Entonces vamos a establecer el índice actual al nuevo índice, tan simple como eso implementa los derechos onclick dentro de los compactos Chevron izquierda, que es la flecha izquierda. Y haga clic. Tenemos que llamar a la función deslizador anterior. Cuando guardas checkout el navegador. Vamos a probarlo haciendo clic en el deslizador izquierdo. Chicos, ¿pueden ver? Funciona hermoso. Ahora hemos logrado crear nuestro propio control deslizante desde cero. Qué hermoso en estos días. ¿Verdad? Entonces ahora vamos a implementarlo para la flecha derecha. Vamos a tener otra función, slider nido constante, configurarlo a nuestra función. Y entonces vamos a tener una variable llamada es primer índice de corriente de diapositiva. Vamos a hacer deslizadores de longitud de punto. ¿Bien? Así que realmente accedemos a toda la diapositiva nuestros derechos dentro de la matriz para obtener el valor total del control deslizante. Entonces es decir, esa es la longitud del punto deslizador. Y entonces aquí vamos a hacer menos uno. Nuevo índice. Igual es la última diapositiva. Entonces, si es la última diapositiva es verdad, vamos a ponerla a cero ahora. Entonces vamos a fijarlo al índice actual más uno, así de simple como eso. Ahora tenemos que actualizar el estado inicial haciendo conjuntos índice actual al nuevo índice. Y en realidad aquí. Antes de continuar, esto en Atrazine's debería ser la última diapositiva. Entonces aquí mismo, click, tenemos que llamar a esta función. Pégala aquí. Guardar en el navegador. Vamos a comprobarlo. ¿Ves que todo está funcionando perfectamente bien? Echa un vistazo. Una cosa más. Ven aquí. Otra vez. Estos en realidad serán para las balas justo debajo de los deslizadores. Va a tener constante. Mover a la diapositiva equa, índice de deslizamiento. Vamos a establecer el índice actual al índice de diapositiva del parámetro. Chicos geniales. Así que ve a la cima y vamos a importar. Un icono. Este icono se va a guardar como una viñeta justo debajo del control deslizante. Al hacer clic en las balas, podrás mover los deslizadores. No te preocupes, definitivamente lo entenderás cuando hayamos terminado con la implementación. Nuestro combustible x dot, como estos de los iconos React. Justo después de este div. Vamos a tener otro div. Squiggly estilizarlo. Vamos a tener un flex de display desde arriba. Vamos a tenerlo para justificar la parte del centro de contenidos en la parte superior e inferior. Vamos a tener que hacerlo. Entonces lo que vamos a hacer es mapear a través de las diapositivas. ¿Bien? Así que voy a hacer deslizadores, puntos. Mapa. El mapa es un método, ¿verdad? Y a la derecha. Dentro de este método, vamos a tomar en un parámetro slider items, que este tipo de aquí representa cada elemento, derecho, dentro de esta matriz. Y en este caso, la URL de la imagen, más tranquila, leve índice. Vamos a renderizar la interfaz de usuario. Un div con el nombre de la clase va a ser a x L. Cos es puntero. Ciérralo hacia abajo. ¿Verdad? Cuando el div, vamos a renderizar el RX punteado visto. Ciérralo hacia abajo. Entonces deja, déjame mostrarte rápidamente. Dice, Eric, punteado alimentado no fue divertido. ¿Sabes por qué? Es simplemente porque de nuevo, nos olvidamos de prefijarlo con RAX. Chicos. Así es como reacciono. Los iconos funcionan. Guardar. ¿Puedes ver estos íconos? Pero ahora cuando haces clic en él, no pasa nada. Implementemos rápidamente la propia camarilla. Primero. Vamos a darle una llave. Porque la aplicación se va a quejar si no se especifica la clave. Déjame mostrarte. ¿Puedes ver que dice que uno en cada niño en una lista debe tener un accesorio clave único Sé que sabes que esto es sólo un recordatorio. Voy a tener aquí c0 igual índice ligero. Este tipo de aquí, ¿verdad? Guardar de nuevo en el navegador. Echa un vistazo a la consola. Vamos a refrescarnos. Ahora. El error se ha ido. Hermoso. Bien, vamos a implementar el onclick. Onclick, vamos a llamar a la función pasar a la siguiente diapositiva. Entonces hagámoslo legible. Pasar a la siguiente diapositiva. Copia. Ven aquí. Pégala. Bien, bien. Entonces vamos a tomar en el parámetro. El índice ligero es tan sencillo como eso. Cuando guardas en el navegador, hago clic. ¿Ves que esto es extremadamente fantástico amigos? Bien, así que esto es todo por ahora para el slider. Y en la próxima conferencia, procederemos con los componentes de la aplicación de entrega. Nos vemos en la próxima conferencia. Mantente enfocado en el cuidado holístico. 62. 60 componente de entrega rápida: Bien, bienvenidos de nuevo a todos. Por lo que en esta conferencia, procederemos con el componente de aplicación de entrega rápida. Garza a Código VS. Cierra esto, abre el punto js de entrega, cierra el explorador o un FCE para generar componente funcional de flecha de reacción. Vamos a correr rápidamente muerto dentro del componente de la aplicación. Y por favor asegúrate de importarlo en la parte superior. Entonces vamos a especificar el ancho para que sea foo, lo que lo hará con el 100 por ciento. El fondo es blanco. El acolchado superior, el relleno, la parte inferior es 16, y luego el acolchado izquierdo y derecho es para siempre. Entonces ahora esto servirá como el div padre. Aquí vamos a tener una etiqueta de historia. Vamos a estilizarlo rápidamente. La prueba es naranja, naranja guión 500. Hagámoslo audaz. Fuente, tablero de tablero. Una prueba es sobresalir y luego las pruebas alinean al centro. Ahora, voy a hacer entregas rápidas son seguras en el navegador. Aquí, ¿es así? Ahora, justo después de la etiqueta del historial de cierre, vamos a tener un div. Vamos a estilizar rápidamente la diferencia. El ancho va a ser de 15, 20 píxeles. Margin-izquierda y margen-derecha van a ser auto. Vamos a tener una grilla de visualización. Entonces en dispositivo medio, queremos que la cuadrícula muestre dos puntos. Entonces las columnas de la plantilla de cuadrícula es para cerrar el div. Ahora vamos a tener una imagen, IMG. Vamos a darle un nombre de clase y luego estilizar la imagen. El ancho es de 550 píxeles. Va a ser un valor constante. A estas alturas ya sabes lo que es esto? Cima de montaña y margin-fondo. Para SRC. Volvamos a la podría ayudarla para poder copiar la URL. Y aquí está. Resaltar y copiar. Ven aquí, pega. Después ciérrala con la etiqueta de cierre automático. Vamos a ahorrar. Vea lo que tenemos en el navegador. Puedes ver que aparece aquí. Esos buenos. Entonces justo después de la etiqueta IMG, vamos a tener otro div. Vamos a darle un estilo. Vamos a tener una pantalla, flex, flex dirección, columna, justificar contenidos, centro. ¿Correcto? Llevando este div, vamos a tener una etiqueta p. Rápidamente le demos un estilo. Nuevamente, este va a ser un estilo personalizado. Esos son a, D, F. Ahora bien, los teléfonos van a ser audaces. Otra vez aquí vamos a tener una etiqueta en la cabeza y yo voy a hacer Vamos a comprobarlo. Bien, parece bien. También tenemos que estilizarlo ¿verdad? Dispositivo en mediana. La prueba va a tener nuestro dispositivo de cuatro x l y más pequeño, va a tener tres exhalar la fuente. Hagámoslo audaz. Acolchado superior, acolchado inferior. Hagámoslo también. Creo que esto va a poner todo bien. Ya se ve bien. Bien, no te preocupes. Definitivamente va a llegar a la cima. Bien. Entonces ahora vamos a tener una etiqueta p justo debajo de la etiqueta de la cabeza. Así que aquí sólo voy a copiar una prueba ficticio y luego sólo voy a pegarla aquí mismo. Entonces esto es solo una prueba ficticio. Y si quieres, puedes volver a la que podría ayudarla. Sé que a la mayoría de ustedes les gustaría hacer exactamente lo que yo estoy haciendo. Así que ven aquí y copia esta prueba. Pero puedes ir a Internet y simplemente configurarlo para prueba ficticio y luego puedes copiarlo por ahí. Cuando guardas checkout el navegador. Boom, se ve bien pero no me gusta la forma en que aparece. Formato. No te preocupes. Vamos a proceder. Vamos a tener un atornillado, darle un nombre de clase, y luego vamos a dializar. El tablero en el fondo va a ser bloqueado. La prueba, ¿verdad? Estamos en la navegación, va a ser este tipo de aquí. Sólo hay que copiar. No hay necesidad de repetición. El ancho, 200 píxeles, redondeado, la fuente. Hagámoslo un medio. Margen, arriba e abajo. Hagámoslo seis márgenes, izquierda y derecha. Hagámoslo auto. Dispositivo en mediana. Vamos a tener el margen izquierdo y derecho para ser cero. Y la parte superior acolchada, parte inferior acolchada van a ser tres. Entonces justo dentro de la navegación, voy a escribir, empezar. Seguro. Bien, así que todo parece estar bien, pero realmente no me gusta el resultado. Entonces solo tengo que volver a VS Code. Vamos a resolver las cosas por aquí. Este es el div que contiene toda esta información de aquí. Entonces lo que voy a hacer, tenemos 15, 20, cambiémoslo a 12, 40. Seguro. Vamos a echarle un vistazo o escribir. Todo se ve extremadamente impresionante. Y aparece como se esperaba. Una cosa que queda es que no hay espacio entre la etiqueta p en la parte inferior. Entonces creo que tenemos que arreglarlo rápidamente. Ahora vamos a agregar har derecha chicos, ¿ves que agregamos seis como el margen superior y margen inferior Pero mira, no está funcionando. Y ya ves que tenemos que hacer dash six. Y ahí tienes. Chicos perfectos. Esto es todo por ahora. Y en la próxima conferencia, procederemos con los componentes de pico superior. Y ahí también te enseñaré a hacer un deslizador React usando la diapositiva suministrada. Nos vemos en la próxima conferencia. Mantente enfocado en cuidar siempre. 63. 61 componente de selección superior: Bienvenidos de nuevo a todos. En esta conferencia, seguiremos adelante para implementar el deslizador, que son los componentes de pico superior. Entonces, sin más preámbulos, comencemos. Abre el Explorador. Y luego tenemos que abrir el punto pico superior js, cerrar el Explorer. Y luego voy a hacer un FCE para generar el componente funcional flecha. Ahora mismo, quiero cambiar este div, ¿no? Queremos tener un fragmento de reacción que se guardó como el nodo padre. Así que bien, dentro de estos fragmentos, voy a hacer la página uno. Entonces voy a decir aquí temas. Vamos a darle una clase para que podamos estilizarlo. El test orange dash 500, las fuentes, queremos que abuchee. Prueba de placa a Excel. Alineemos el texto al centro. Acolchado superior e inferior, inferior. Hagámoslo a un simple que tenga razón. Bien, digamos por ahora, derechos dentro del componente app, ejecutemos eso en el componente de pico superior y hagamos bien en importarlo en una tina. Seguro. Asegúrese de que la aplicación se esté ejecutando. Bien, entonces en el navegador, aquí está. Por lo que esto se guardará como encabezado. Hermoso. Ahora, la siguiente línea es implementar este planeador. Bien, tan rápido dirígete a empalmar gs.com. Entonces vas a ver el botón Comenzar, haz clic en él. Y luego aquí se puede leer la documentación para entender lo bien conocido de las obras de altura. Pero por ahora, sólo voy a proceder al MPM aquí. Bien. Déjame mostrarte rápidamente. Puedes ver el enlace a esta página, derecha, indicaría ayuda a nuestro nebuloso. Aquí, así es como instalar la diapositiva de React por aquí. Voy a copiar, volver a VS Code Control C para detener el comando V del servidor que se está ejecutando actualmente, para pegar el comando y luego pulsa la tecla Enter para que se enciendo. Bueno, instalado, exitoso. Ahora lo siguiente en la fila es importarlo en un sombrero de copa sobre el tema. Y luego otra vez, vuelve a reaccionar deslizarse. Tenemos que copiar esta entrada aquí mismo . Pégala en la parte superior. Seguro. Bueno. Bien, tan rápido, también tenemos que importar los datos que vamos a usar para el deslizador de pico superior. Asesorarte para minimizar tu Código VS. Comando B para abrir el explorador, cerrar los componentes y también cerrar el SRC. Así que abre los materiales alimenticios en. Entonces vas a encontrar el paquete por aquí llamado data. ¿Verdad? Dentro de estos datos, tenemos el módulo data js, que comprende las categorías, los datos de pico medio y superior son incautos. Cuando terminemos de importar, te lo voy a revelar. Así que arrástralo y luego suéltalo justo dentro del SRC. Se puede ver ahora que está dentro del SRC. Cuando cierre el SRC, ya no verás los datos. ¿Ves bien? Maximice nuestro derecho. Así que vamos a abrirla. Ahora aquí verás una matriz de objetos y derechos dentro del objeto. Vas a ver algunos elementos en forma de par clave-valor, que es el id Y aquí está uno, el título, y aquí está lo que es. El precio al 50 y la imagen. Entonces estos son los datos para los picos superiores. Voy a desplazarme de nuevo hacia abajo. Vas a ver los datos de la comida. Por supuesto, hay una matriz de objetos que comprende el ID, el nombre de la comida, la categoría en la que cae, la imagen y el premio. Desplázate de nuevo hacia abajo. Vas a ver los datos de categorías. Y claro que es exactamente lo mismo, pero ahora tenemos diferentes datos. Sí, así que eso es exactamente lo que es. Y los beneficios de hacer esto es equiparte cómo trabajar con API, bien, Entonces si podemos obtener datos de aquí. Entonces, obtener datos de los dinosaurios S ya no va a ser un problema seguro en el futuro. Cuando comenzamos a construir el sitio web de la película, definitivamente tendríamos que encajar desde un punto final API. Así que justo en la parte superior, vamos a importar los datos justo dentro del módulo de datos se llaman exportación. Déjame mostrarte. Se puede ver un punto const top peak. Entonces esta es una exportación con nombre. Y tenemos que importarlo así a partir de datos punto-punto slash data slash data. Tan simple como eso. Bueno. Ahora, aquí es donde comienza la diversión. Vamos a tener un div por aquí, darle un nombre de clase para estilizarlo. Queremos que se oculte en un dispositivo más pequeño. Entonces en un dispositivo más grande, queremos tenerlo display flex, el max-width. Queríamos 15, 20. Entonces, en simplicidad, no queremos mostrar la categoría slider en los teléfonos móviles. ¿Bien? Queremos que se muestre en una pantalla más grande, como su computadora portátil, computadora escritorio y el resto de ellos. Seguro esto será en píxeles. Y entonces el margen es auto. Pero en la parte superior e inferior acolchado patrón de la mano izquierda derecha es dos también. Entonces, habiendo hecho esto, tenemos que mapear a través de los datos, que son los datos del tema bien, así que tenemos que mapear a través de todos estos tops por aquí. Así. Los queremos arriba a través de él y luego tenerlo visualizado en la pantalla. En realidad es muy sencillo hacer eso. Primero, las llaves de apertura y cierre. Y luego voy a hacer temas mapa de puntos. Entonces aquí voy a hacer ítem. Entonces este ítem de aquí representa cada objeto, derecho, dentro del área temática. Sí, así que ahora vamos a devolver la interfaz de usuario. Y justo dentro de la interfaz de usuario, comenzaremos a mostrar los artículos como el título, el precio, N, la imagen. Entonces aquí voy a tener un div con el nombre de la clase y luego tendremos que estilizarlo. Entonces vamos a estilizar el radio del borde, que va a ser tres x L posición relativa. Así que bien, dentro de este div, vamos a tener otro div, darle un nombre de clase y luego estilizar el div. Entonces como este tipo se posiciona relativo, queremos posicionar a este tipo absoluto para que pueda estar encima del div padre así. ¿Bien? Entonces este div de aquí se va a posicionar encima de este tipo. Más simple esa posición, absoluta. El ancho es completo, lo que lo convierte en el 100 por ciento. La altura está llena, lo que también hace la altura sea 100 por ciento la BG, voy a hacer el tablero B G. Pero en este caso, queremos que sea un poco transparente. Entonces voy a dividirlo por 50, luego redondeado, lo que hará que los bordes sean un poco curvilíneos. Entonces voy a tener Excel, la prueba. Sólo hazlo blanco. Cierra el div. Bien. Vamos a cerrar esto. Creo que estoy bien. Genial, así. Entonces queremos usar la etiqueta p para mostrar el título. Entonces aquí voy a hacer p, luego item dot title. Puede recordar que este elemento de aquí representa cada objeto de la matriz. Entonces este ítem punto título, este es el título de aquí que estamos tratando de mostrar. Y luego se mostrarán todos estos títulos así, todos ellos así . Porque hemos utilizado el ítem que representa cada objeto para mostrar, este título. Definitivamente lo entendería bastante bien. Guarda, y vamos a echarle un vistazo en el navegador, ¿verdad? Entonces antes de comprobarlo en el navegador, recordemos que paramos el servidor, así que tenemos que reiniciar el servidor nuevamente. Bien, desplácese hacia abajo. ¿Dónde están los datos? ¿No se encuentra en ninguna parte? Cuando observas la pantalla, es posible que no veas los datos, ¿verdad? Pero se lo puedo asegurar. Los datos se ocultan justo en la esquina inferior izquierda de la pantalla. Déjame acercarme un poco. Y ahora quiero mostrar se puede ver simplemente porque no hemos estilizado, hizo eso exactamente es la razón por la que aparece así. Entonces ven aquí. Ahora, vamos a dializarlo, darle un nombre de clase y escribir bien en el nombre de la clase. Pero en izquierda y derecha hay dos fotos. Cuando guardas y salgas al navegador, posible que no lo veas con claridad. Entonces hagamos algo ahora mismo. Este es el div padre de este tipo, ¿de acuerdo? Entonces posicionamos a este tipo relativo, y luego posicionamos este div para que sea absoluto. En sentido natural, significa que este div va a estar justo frente a este d. ¿Bien? Entonces déjame mostrarte rápidamente. Ahora, ve afuera de la def, afuera de esta D, Bien. Vamos a tener una etiqueta IMG porque quiero mostrar la imagen ahora mismo para que todo aparezca como esperamos que sea. Aquí. Vamos a darle un nombre de clase. Bien, primero, mostremos la imagen antes del nombre de la clase. Así que solo voy a deshacer la etiqueta de cierre automático y voy a hacer SRC igual ítem punto IMG. Déjame mostrarte aquí. Entonces esto es todo por aquí. Cuando guardas en el navegador. La idea es, puedes ver, ahora parece bien, pero aunque no se ve bien porque tampoco hemos estilizado la imagen. Pero al menos se puede ver que es comida por aquí con su título correspondiente. Aquí tenemos la Sharma, tenemos el jugo de frutas, tenemos los yogures, tenemos los naranjos, el huevo que estoy plantando. Wu vata tendrá un sabor agradable. Pescado tilapia ese julio de arroz. Oh, Dios mío, chicos. Vamos a estilizar estas cosas. Vamos a dializarlo rápidamente. Ahora. Vamos a darle un nombre de clase a este IMG. La altura va a ser una altura personalizada. Entonces hagámoslo 200 pixeles. El ancho. Hagámoslo 2100 píxeles, que está lleno. Entonces, ahora mismo Vamos a ahorrar y a ver qué tenemos. Aparece así. No te preocupes. Cuando comencemos a implementar el control deslizante, vamos a tener espacios entre los elementos. Ahora, terminemos. Se va a llamar al objeto de estilo. Entonces este será el objeto encaja. Y en realidad lo que esto hace es cambiar el tamaño de la imagen para que se ajuste a su contenedor real. Queremos que los bordes de la imagen sean un poco curvilíneos, exhala el más grueso. Hagámoslo un puntero. Entonces, sin embargo, cuando pasas el cursor sobre la imagen, queremos escalarla. 105. Bueno. Y queremos que baje la duración. Hagámoslo 300. Te ahorras en el navegador son correctos, así que cuando colocamos el cursor sobre la imagen, no pasa nada. Bien chicos, creo que tenemos que configurar un slider antes de que comencemos a ver algunos de los cambios. Pero por ahora, vamos a redondear con el control deslizante. ¿Bien? Bien, vamos a implementar la parte inferior derecha debajo de la etiqueta p, que está justo dentro de este div de aquí. Vamos a mostrar el fondo. Voy a hacer para cortar. Dialicemos la frontera. La frontera. Vamos a hacerlo punteado. Este es mi propio estilo, así que en realidad puedes hacer otra cosa a tu final. El color del borde va a ser blanco. La prueba. Hagámoslo blanco también. Margen izquierdo y derecho va a ser para tener su posición absoluta. Por último, la parte inferior. Hagámoslo cuatro, que es el margen inferior. ¿Bien? Cuando guardes, veamos los resultados. Bueno. ¿Puedes ver la línea punteada? ¿Ves? Pero el tema ahora es que no apareció en blanco. Déjame ver algo. Uy, chicos. Aquí es donde radica el problema. Se supone que la frontera es blanca. Por lo que ahora se puede ver en la pantalla. Verás, bien, vamos a implementar el control deslizante para que todo quede bien para implementar el deslizador. Primero, tenemos que instalar React slide que hemos hecho en la etapa inicial. Extraer el archivo package.json. Y aquí está. Y luego cuando vas al pico superior, tenemos que importar esta tizón en la diapositiva, diapositiva, incluyendo el paquete CSS. Ahora lo que vamos a hacer es envolverlo con lo suministrado. Entonces justo después de este div, voy a hacer suministrado. Ciérrala, asegúrate de resaltar, copiar y luego ven a pegarlo aquí mismo. Así. Bien, bien. Ahora dentro de esta diapositiva, voy a hacer opciones abrir y cerrar el corchete, y luego queremos que aparezca cuatro por página. Si observas la pantalla ahora mismo, te darás cuenta de que tenemos casi diez artículos que aparecen en par página 1, 234-567-8910. Entonces esa es la razón por la que la imagen no tomó su forma. Bien, entonces ahora queremos cuatro elementos por página. Entonces, cómo hacerlo es poco a poco. Lo queremos para. Y nuevamente, antes de continuar, vamos a envolverlo con la diapositiva suministrada. Justo debajo de la devolución. Vamos a hacer split slide, highlight, cutoff, la etiqueta de cierre, y luego colocarla después del div de cierre. Aquí así. Cuando guardes una pantalla observada, te darás cuenta de que este pueblo será aplicado. Ya ves que tenemos 1234 y ahora puedes deslizar las imágenes. ¿Ves lo increíble que es esto? Tenemos las flechas para deslizarse. Echa un vistazo. Hermoso. Ahora bien, si observas los artículos, te darás cuenta de que hay más espacio en el medio. Sí, así que hagámoslo rápidamente. Ven aquí para crear espacios entre los artículos. Todo lo que vamos a hacer es gap va a ser igual a 0.5 rem VC como mi propia especificación, puedes hacerlo por m cinco o lo que quieras al final. Guarda y echa un vistazo al navegador. Ahora, ya ves, ¿puedes ver eso? Esto es genial. Me encanta. Bien, entonces una cosa que quiero hacer es hacer que la droga sea un poco más suave. Entonces hagámoslo rápido. Asegúrate de poner una coma aquí mismo y luego voy a hacerlo sin drogas. Cuando observes la pantalla, que está en el lado izquierdo de la pantalla, vas a ver esta flecha deslizante aquí mismo. Esto no me gusta. Bien, entonces voy a cortarme el pelo y luego voy a hacer flechas. Vamos a establecerlo en falso. Y creo que ese es el final de la misma. ¿Ves? Ahora la flecha se ha ido. Se forman campos. ¿Qué tenemos que hacer otra vez? Bien, abramos la consola y déjame mostrarte. Aquí dice querer cada hijo y al menos debería tener un accesorio clave único , claro, ya debes saberlo. Entonces lo que voy a hacer ahora mismo es clave igual ítem punto. Entonces tenemos que buscar algo que se utilice para identificar de manera única los artículos. Y por aquí, te puedo decir que la identificación es lo único que se puede usar para identificar de manera única todas estas cosas aquí mismo, porque también puedes tener dos artículos con el mismo precio. Es posible que tengas dos artículos con el mismo título. Entonces creo que usar el id es la mejor idea. Sí, así que ahora voy a hacer item dot ID. Cuando guardas en el navegador. Volvamos a sacar la consola. Refrescar. Hermoso. Ahora ya no se ve el error del índice de claves. Por favor tome cargas al aplicar la llave, debe hacerse en el nivel superior. Entonces cuando haga algo como esto, copia esta llave aquí mismo, atrapada. Supongamos que quiero aplicarlo a este div. Cuando guardes en el navegador, abre la consola, y luego verás que el gráfico en las hojas debe tener un prop clave único, simplemente porque hemos aplicado el prop key a este dv por aquí. Por lo que se debe hacer en el nivel superior. Entonces hagámoslo así. Checkout seguro, el navegador, actualizar la consola, recargar. Todo está funcionando perfectamente bien como se esperaba. Hasta el momento, tan bien. Todo está bien. Me encanta. Entonces el nido en línea es mostrar el premio. Y seguro, vamos a darle una alternativa aquí para que si la imagen no aparece, algo es bueno en realidad aparezca. Si la imagen no aparece, vamos a mostrar el nombre del artículo. Entonces ahora voy a hacer item dot title. Entonces, si tenemos un descanso en la imagen, queremos mostrar estas cosas aquí mismo, que es el título. Bien, formateemos el código y se ve limpio. Por último, vamos a implementar el precio. Otra vez. Queremos usar la etiqueta p para hacer eso. Sí, vamos a tener una etiqueta p. Y luego voy a hacer artículo punto precio. Cuando guardas y revises el navegador. Ya ves que el precio es así. Vamos a dializarlo rápidamente con un className, que sí tiene que darle una parte en B X guión dos, pero en izquierda y derecha es dos. Y aquí para el título, también tenemos que hacer que las fuentes sean audaces. Fuente, tablero, tablero. La prueba para sobresalir, relleno superior. Bien, vamos a hacerlo uniforme. Parte en la parte superior. Hagámoslo cuatro. ¿Ves que todo aparece bien? Me encantan estos resultados. Amigos. Pueden ver chicos, todo parece muy bien. Pero si observas el borde izquierdo de la pantalla, te darás cuenta de que no hay espacio intermedio. Y no me gusta así. Bien. Por lo que debería comenzar de aquí así. Así que sigamos adelante y revisemos el patrón que dejó. El nombre de la clase div está golpeando. El cribado grande debe aparecer flexionar la posición. El ancho máximo es de 15, 20 píxeles, el margen es Otto, la onda P y la P X es dos. Pero chicos, echen un vistazo. Aquí es donde entra el error. C P x. Aquí tenemos que despegar el signo igual. ¿Puedes ver el cuidado de la caja fuerte? Echa un vistazo ahora, aparece muy bien. Chicos, en realidad, nosotros los seres humanos, somos propensos a errores a la hora de escribir y ustedes están enseñando, hablando, definitivamente se equivocarían. Sí, entonces, pero no necesariamente importa porque todos cometen errores. Esto es todo por ahora para el slider y está funcionando perfectamente bien. Me encanta el resultado final una vez más. Sí, así que échale un vistazo. Hermoso. Esto es todo por ahora. Y en la próxima conferencia, procederemos con el molino. Por lo que tendremos que mostrar los alimentos que escribe en la pantalla. Nos vemos entonces. 64. 62 Componente de la comida: Bienvenidos de nuevo a todos. Anteriormente implementamos el deslizador de pico superior. Y papi. Bien, entonces en esta conferencia, seguiremos adelante para implementar el componente de comida. ¿Bien? Así que vamos a mapear a través los datos de las comidas y que se muestren en la pantalla con un diseño muy bonito. Y créeme, el diseño va a ser receptivo igual que de costumbre. Heroína a componentes de código VS y luego comida. Pero g es cerrar el Explorer, un FCE para generar componente de función de flecha de reacción. Bien, me voy a quitar esto por ahora. Regresa al app.js y hagámoslo renderizarlo aquí. Empecemos por estilizar este div. Primero, dale un nombre de clase. Y luego el max-width, 15, 20 pixeles. Margen auto. Pero no a la izquierda los derechos de patrón para acolchado superior e inferior. Hagámoslo 12. Sí, así que bien, dentro de este div, vamos a tener la etiqueta hedge one que guardará como titular. Ahora voy a hacer tema. Quiero copiarlo desde aquí, resaltar la etiqueta de la cabeza, venir aquí y pegar. Sólo tenemos que cambiar el artículo. Nuestra comida Ahorra. Y aquí está. Puedes ver justo debajo de la etiqueta H1, vamos a tener un div, darle un nombre de clase. Y luego menos estilizar el div. Queremos que este div aparezca en una columna de cuadrícula tipo de cosas. Bien, entonces vamos a decir display grid. Entonces. En dispositivos medianos como iPads, queremos que la cuadrícula aparezca en dos columnas. Entonces voy a hacer columnas de cuadrícula guión dos, así de simple como eso. Entonces en un dispositivo más pequeño, que es SM, cambia este tipo a S M. En un dispositivo más pequeño, queremos una columna. Y en un dispositivo más grande queremos Son cuatro columnas. Aquí. Voy a cambiarlo a nuestro GI. Y no el LG en forma de tu gadget. Bien, esto es grande. Susan, tienes razón, ¿qué nido? El hueco debería ser seis, pero creo que deberíamos implementar el resto de los estilos cuando hayamos terminado con el diseño. Aquí dentro del div, tenemos que mapear a través de los datos. Y claro, en la conferencia anterior, importamos estos datos por aquí. Y es, bien, estamos en los datos SRC, SRC, y luego vas a ver el archivo JS de datos. Entonces, hacia la derecha en este módulo, tenemos los datos de Mu. Y por supuesto, esto es solo una matriz de objetos. Y escribir objeto render, tenemos los artículos en forma de par clave-valor, el ID, el nombre, categoría, imagen y precio. Y entonces tenemos ¿ cuántos de ellos aquí? Tenemos hasta 15. Bueno. Comando B para cerrar el explorador. Entonces vamos a abrir el corchete aquí para tomar expresiones JavaScript. Pero antes de continuar, tenemos que importar los datos en la parte superior, voy a hacer importaciones. Va a ser un nombre exportar datos de comida a partir de datos de barra de datos GIS. Aquí mismo, voy a hacer el mapa de puntos de datos de comida, el método del mapa, la vacuna, un parámetro llamado ítem. Y seguro puedes nombrar este parámetro cualquier otra cosa que quieras nombrarlo, pero te recomiendo encarecidamente que te apegues al artículo de la convención, ¿de acuerdo? Pero puedes darle cualquier otro nombre descriptivo al final. Entonces este ítem de aquí representa los derechos de cada elemento dentro del objeto. Así que ponlo a nuestra función. Y luego queremos devolver una interfaz de usuario. Bien, dentro de la interfaz de usuario, vamos a tener un div. Vamos a darle un estilo. Entonces. El borde de este div va a ser ninguno porque esto servirá como tarjeta. Sí. Entonces este es el div donde descansará toda esta parte superior. Entonces vamos a tener la frontera para que se conozca en Hoover. Cuando se coloca el cursor sobre este div o sobre esta tarjeta. Por decirlo así, queremos escalarlo 105. Y la duración es de 300. Ciérralo hacia abajo. Sí, ¿y qué nido? Ahora, vamos a tener una etiqueta IMG. Img. Vamos a hacer SRC, que es la fuente y la fuente de esta imagen. Viene de la imagen del punto del artículo. Ciérralo con la etiqueta de cierre automático. Entonces la salsa de aquí viene de, por supuesto, los datos que importamos en la parte superior. Entonces cuando guardas y revisas al navegador, los IDs, ¿ Puedes ver hermosa ahora en una pantalla grande?, aparece en cuatro columnas, columna uno, columna 23.4 también. Si observa con atención, cuando pongo el cursor sobre la imagen, se acerca un poco, y eso la hace extremadamente agradable. Échale un vistazo. Puedes ver que verás, aunque, entiendo que no hay espacio entre los artículos, pero también podemos arreglarlo rápidamente. Ahora, vuelve a la tarjeta, que es este tipo de aquí. Voy a hacer gap, la brecha de seis. Guardar en el navegador. ¿Puedes ver ahora que tenemos espacio entre las imágenes? Pero nuevamente, te darás cuenta de que las imágenes no están bien, Stout, No te preocupes, lo haremos en una G V. Así que ahora hemos logrado mostrar todas las imágenes bien, dentro de los datos de comida. Estos tipos de aquí mismo. Todo esto es genial. Ahora ya sabes caminar dinámicamente con React js usando el método map. Docencia, bueno. Hermoso. Bien, continuemos. Ahora. Vamos a estilizar la imagen. Entonces aquí voy a hacer className, justo dentro de la clase, voy a hacer el ancho. Hagámoslo al 100 por ciento, la altura. Hagámoslo 100% seguro en el navegador, los ID. Ahora, todo está bien, pero cuando lo observes de nuevo con cuidado, te darás cuenta de que las imágenes se están rompiendo como esta imagen de aquí. Entonces tenemos que cambiar el tamaño de la imagen de una manera que se ajuste a su contenedor. Y la forma de hacerlo es especificando los feeds de objetos. Ven aquí. Y voy a hacer Object dash cava. Entonces el objeto se alimenta es cava, guarda en el navegador. Ya ves que todos ellos aparecen amablemente, me gusta. Hagamos que el fondo de la imagen sea un poco curvilíneo. Ven aquí y voy a hacer dash redondeado, LG, guardar en el navegador. Papi. Ahora tienes los bordes redondeados. Espero que lo veas con claridad. Bien. Vamos a continuar. Bien, entonces chicos, hay algo que acabo de observar ahora mismo. Si lo miras de cerca, te darás cuenta de que la altura de las imágenes no son iguales. Como esta ducha más por aquí. La altura no es igual con esta pizza. Y además, estos muy sabrosos pescados de tilapia que se pueden ver por allá. Entonces tenemos que buscar la manera hacer que las alturas sean iguales. Y claro, va a ser muy fácil. Entonces cambiemos la altura para que sea de 200 píxeles. Cuando guardas en el navegador. Todos son iguales. Ahora, enseñando bien, hermoso. Entonces, si hay una ruptura en la imagen, tenemos que mostrar el tipo de opción alternativa. Entonces aquí voy a hacer suplente. Queremos mostrarlo dinámicamente. Voy a hacer item dot el nombre del ítem. Bueno. Habiendo hecho eso, trabajemos en el nombre. Justo después de la etiqueta de cierre del IMG, vamos a tener un div, darle un nombre al clúster para estilizarlo. Y entonces vamos a tenerlo display flex. Justifica el espacio de contenido entre parte superior e inferior relleno para el relleno a la izquierda y el patrón a la derecha. Hagámoslo cuatro también. Bien, hagamos estos dos para que no se convierta en demasiado. Cierra el div. Guardar, justo dentro de este div, vamos a usar la etiqueta p para mostrar el precio. ¿Bien? Voy a hacer Hola Tim, perros, precio, guardar y ver en el navegador. Bien, ahora tienes el precio por aquí, pero no es así como lo queremos. Ahora, vamos a dializarlo. Vamos a darle un nombre de clase. Queremos que el fondo sea naranja. Pizarra naranja 700. La altura es, está en el ancho. Es 18. Redondeado queríamos engañar. Puedes ver esto hará que el radio del borde sea esférico, casi al 100%. Sí. Cuando guardas en el navegador, Daddy's. Bien, puedes ver ahora no está apareciendo muy bien. Entonces ahora queremos colocarlo encima de la imagen. Entonces voy a hacer margin top. Va a ser un diez negativo. Por eso uso este margen menos top para ser diez. Entonces esto realmente hará que este valor sea un valor negativo. Guardar y ver de lo que estoy hablando. Se va a empujar a la cima. Puedes ver ahora tenemos las cosas por aquí justo en la parte superior de la imagen. Así que recuerda antes estaba debajo de la imagen, ahora mismo está en la parte superior, derecha. Entonces la prueba, vamos a hacerla blanca. Blanco. Pui, que es el patrón superior e inferior, abajo para el relleno izquierda y derecha está al borde, es ocho porque queremos darle un borde muy grande. Cuando guardas y te siembras tú mismo, puedes ver ahora que poco a poco va tomando forma. A mí me encanta esto honestamente. Esto parece tan bien y tan hermoso. Sí, esto es genial, increíble, fantástico. Las fuentes, vamos a ponerla en negrita. Dashboard de firmas. Bien, así que no he mostrado el precio. El nido y la línea es, vamos a comprobarlo aquí mismo. El nombre de la comida. Sí, así que justo por encima del precio, vamos a tener otra etiqueta p. Entonces voy a hacer el nombre del punto del artículo. Es tan sencillo como eso. Guardar, compruébalo. Y ves que el nombre aparece aquí. Y ahora mismo empujó el precio a la derecha. Todo aquí arriba está muy bien y me encanta. Vamos a continuar. Vamos a darle un poco de estilo. Aquí. Voy a hacer dashboard de fuentes. Eso es lo único que vamos a hacer aquí mismo . Se lo puedo asegurar. Bien, Genial. El siguiente es el ver más votaciones. Sí, así que vamos a tener un botón Ver Más justo debajo del nombre del artículo. Entonces justo después de este div de cierre, vamos a tener otro div con el nombre de la clase. Bien, vamos a cerrarlo. Vamos a darle un relleno a la izquierda de dos y luego al relleno superior e inferior. Hagámoslo caer. Bien, ahora, puede que no veas nada. Así que vamos a trabajar en ello aquí. Vamos a tener una etiqueta P y voy a hacer vista así. Y lo que voy a hacer es mostrarlo con una flecha. Así que ve a la cima. Vamos a importar. Vamos a importar el icono de la flecha SM a la derecha de. Así que antes de continuar con la entrada, vamos a instalar rápidamente el paquete aquí mismo. Npm instalar, adherir, icono slash, reaccionar aquí, es que también puedes visitar tu página y copiarla desde aquí. Ves el visto bueno para instalar. La solución está en curso, así que sigamos importándola desde la barra de icono de héroe, reaccionemos y miremos. Se realiza la instalación. Hermoso. Bien, pongamos en marcha el servidor que no tengamos que volver a hacerlo. Entonces aquí queremos mostrar el icono. Y voy a hacer después de la vista más. Voy a hacer nuestro icono de la derecha de OSM. Ciérralo con una etiqueta de cierre automático. Vamos a darle rápidamente a este tau, el ancho. Hagámoslo cinco. Margen izquierdo. Hagámoslo también. Sí, así que cuando guardas y revisas el navegador, bien, chicos, el icono no está funcionando. En realidad no sé por qué. Entonces solo voy a hacer una pausa en el video y luego hacer una investigación detrás de escena para entender por qué el ícono no está funcionando. Porque en realidad hemos hecho lo correcto por aquí. También podemos hacer algo como slash outline. Veamos qué pasa. No funcionó. Bien, veamos la consola. Estás tratando de importar, bla, bla, bla, bla, bla, bla, bla. De la V1. Ambos han instalado tu propia visión de íconos a nuestros chicos adecuados, parece que en realidad han actualizado la biblioteca. Entonces ahora tengo que hacer un reset detrás de escena y luego ver qué funciona para nosotros. Bien. Nos vemos entonces. Bien chicos, embarquen. Después de la investigación que hice detrás de escena, me di cuenta de eso. Han actualizado la biblioteca, bien, así que la única solución que tengo por el momento es degradar la biblioteca profesional. Si miras aquí, te darás cuenta que instalamos la versión 2.0. Entonces la idea es degradarlo a la versión uno. Sí, así que solo voy a resaltar, limpiarlo, guardarlo justo dentro del archivo package.json. Y ven aquí, déjame mostrarte. Tenemos que copiar a este tipo de aquí, así, copia. Y luego justo dentro de la terminal, asegúrate de que estás en el directorio del cliente, comando V para pegar. Entonces voy a hacer simplemente porque tenemos que apuntar a una versión específica, 1.0, 0.6. Entonces esta es la versión que nos permitirá usar ese error en particular. Entonces, cuando instalo, veamos qué pasa. Bien, bien. Instalado, exitoso. ¿Y por qué lo es? Así que vuelve a la convolución medial. Y entonces si no tienes este esquema, solo tienes que hacer algo como esto. Contorno de Slash. Guardar. Empecemos con varios una vez más. Bien, así que cuando te desplazas hacia abajo, aquí está el error. Entonces ahora tenemos la flecha mostrada en la pantalla. Entonces la línea Nesta es tenerla alineada correctamente porque queremos que venga justo delante de la vista más. Sí. Así que vuelve al código VS. Entonces. Dialicemos la etiqueta p. Dale un nombre de clase. Aquí lo vamos a tener display flex. Entonces cuando exhibas flex, todo va a aparecer en la misma línea. Por aquí es que se puede ver? Impresionante. Vamos a alinear los elementos al centro. La prueba. Esquivar. El lote índigo ve 100. Vamos a echarle un vistazo. Oh, hermoso. Echó un vistazo. ¿Puedes ver? Funciona bien. Pensemos que hay espacios entre el modo de vista y el nombre del elemento en realidad es demasiado y no está bien alineado desde el eje izquierdo. Así que arreglemos eso rápidamente. Vamos a darle un margen superior. Va a ser un valor negativo, lo que lo empujará a la cima. Hagámoslo siete. Guarde el navegador. Ahora bien, funcionó, pero no está en la misma línea desde el lado izquierdo. Bien chicos, así que esto es todo por ahora. Y en la próxima conferencia, continuaremos con este componente. 65. 63 Llave de componente de comida: Bienvenidos de nuevo a todos. Bien, entonces antes de proceder, quiero llamar su atención sobre algo muy crucial desenlace y yo, para abrir la consola, ¿no? Estamos en la consola. Quieres ver que es niño en una lista debería tener un único utilería clave chicos, en realidad pensé que serás capaz de resolverlo a tu final. Pero no hay problema, voy a ayudarte a volver al código VS aquí mismo. Déjame ver. Justo dentro de este div, vamos a especificar la clave. Clave igual item.name id El id es lo que se puede usar para identificar de manera única los elementos en la matriz de los datos de comida. Por supuesto, ya lo sabes. Déjame mostrarte una vez más. Bien, aquí está. Entonces el ID es único. Entonces tenemos que usar el ID como sondas clave únicas para identificar cada elemento en la matriz o cada objeto, por así decirlo, Refresh. Y ahora cuando refrescas la consola, todo está funcionando bien. Ya no tienes el molesto error sobre lo bueno. Otra cosa importante de la que quiero que tomes nota es el nombre del ítem y el equipo de view mobile. Entonces queremos que esté en línea. Puedes ver que parece que se superpone. Lo que tenemos que hacer ahora es alinearlos correctamente. Ven aquí. Entonces justo dentro de este div, este div de aquí. Entonces dijimos que el patrón, patrón de la izquierda derecha, es cuatro por aquí como Micky dos por aquí, Save. Ahora todo está en línea. Otra cosa que queremos hacer aquí mismo es que ¿Puedes ver que muestra no hay espacio entre el titular y los artículos Así que sólo voy a fastidiar. Aquí. Tenemos el PI para ser 12. Eso aquí. Veamos qué pasa. Tengamos una PUI por aquí. Pero en arriba e abajo, abajo, hagámoslo cuatro. Guardar en el navegador o ¿verdad? Ahora, todo está funcionando perfectamente bien como se esperaba. En la próxima conferencia, comenzaremos a implementar la navegación con el fin de ordenar los artículos según categorías. Nos vemos en la próxima conferencia. 66. 64 Botones de registro: Bien, ahora tenemos un diseño muy bonito con los artículos mostrados en la pantalla. El siguiente en línea es implementar los empadronamientos para ordenar los artículos por categorías. Bien, así que al hacer clic en el botón, queremos ordenar los artículos por sus categorías correspondientes. Implementemos eso rápidamente. Vs código. Entonces justo después de la etiqueta de cierre de cabeza, vamos a tener un div. Vamos a darle un nombre de clase para que podamos estilizarlo. Vamos a tener este flex de pantalla div. La dirección de flexión es colon. En dispositivos grandes, la dirección flex va a ser Rho. Justificar el contenido al centro, cerrar el DFF. Así que bien, dentro de este div, vamos a tener otro div, darle un nombre de clase, y luego podemos estilizar el div. Ahora mismo. Vamos a tener un flex de display, así que solo voy a copiar de aquí pegar. También queremos que se justifique para centrar la pasta. Y lo que es, de nuevo, en un dispositivo mediano MD. También queremos justificar el contenido al centro. Es tan sencillo como eso. Bien, así que vamos a crear rápidamente los botones. Aquí voy a hacer, bien, estamos en este punto culminante de la navegación. Duplicarlo tres veces. Entonces aquí voy a hacer pizza, check-in, check-out la ortografía del pollo. Y por último, voy a hacer Salat, salvo. Y veamos qué tenemos en el navegador. Y hueso. ¿Puedes ver que aparece así? De hecho se ve muy impresionante, pero quiero darle un poco de antorcha profesional para que el botón aparezca medido Andes. Entonces, lo que hay que hacer ahora es darle la clase de botánica y luego estilizarla, destaca el Bertin. Y por favor solo hay que ser precisos por aquí, estoy resaltando solo los derechos de voto dentro de la etiqueta. Ahora estoy resaltando las lenguas. Entonces, cuando resaltes al primer Presidente de apoyo, el OT, y la tecla de comando en tu teclado. Luego toca la tecla de flecha hacia abajo para seleccionar múltiples todas las cosas, luego dale un nombre de clase. Ahora puedes ver Queremos estilizar la totalidad de los botones a la vez, y eso es fantástico. Facilita el trabajo. Chicos, les estoy enseñando algunas paradas profesionales por aquí. Y espero que les guste. Dale un margen de uno. El borde va a ser naranja, guión 700, pero la prueba va a ser blanca. Entonces en Hoover, queremos cambiar el color de fondo a blanco. Voy a hacer en Hoover. Cambia el fondo a blanco. Sí. Entonces también en hover. Queremos cambiar la prueba a naranja dash 700. De nuevo en Hoover. También queremos cambiar el color del borde a naranja dash 700. Creo que eso es todo por ahora. Bien, vamos a guardar rápidamente en el navegador. Ups, échale un vistazo. Entonces chicos, vamos a cambiar el fondo aquí. Tenemos que aplicar los antecedentes. Déjame mostrarte cómo lo hacemos ahora mismo. Aquí tenemos la frontera para ser naranja. La prueba es blanca, el margen es uno. Y luego vamos a especificar el fondo. Bg, dash, orange, dash, 700, guarda y ve el resultado en el navegador. Bueno. Todo funciona perfectamente bien. Pero ahora mismo, cuando haces clic en los botones, no pasa nada. Uy, chicos, echen un vistazo. Asegúrate de corregirlo. Debe ser sólido y no de otra manera. Así. Bien. Pizza, todo, todo está deletreado. Y luego guardar aquí. Bueno. Aparece muy bien con el efecto hover funcionando perfectamente bien. Hermoso. Me encanta lo que estoy viendo honestamente. Entonces cuando hacemos clic en los guisantes están votando, va a seleccionar todos los ítems relacionados con piazza. Pollo va a seleccionar los artículos relacionados con el pollo. Y luego sólido también va a filtrar los artículos con clasificación sólida. Entonces, ¿cómo hacer eso ahora mismo? Entonces primero tenemos que importar EU hizo gancho en la parte superior. Importante usar deuda. Y aquí vamos a hacer los fragmentos de ustedes. Y voy a llamarlo alimentos. Vamos a poner alimentos como este en Copa. Echó un vistazo. Y aquí el estado inicial va a ser datos de comida, que es el objeto de datos que tenemos en el paquete de datos. ¿Es importante mostrarte eso otra vez? Bien, déjame mostrarte aquí mismo. Esta es la comida Beta, ¿de acuerdo? Entonces, habiendo hecho esto, se supone que hemos asignado los datos de comida a una variable llamada alimentos. Entonces voy a copiar, ven aquí abajo. Así que vamos a hacer alimentos mapa de puntos cuando guardes y revises el navegador. Frase, todo genial. Sí. Derecha. Así que vamos a implementar la funcionalidad del filtro. Enroscar justo debajo de las variables de estado. Vamos a definir la función para filtrar los ítems por cada categoría. Ahora, voy a hacer const pocas categoría TA, ese es el nombre de la función. Entonces voy a tomar en categoría como su parámetro y luego configurarlo a nuestra función. Aquí mismo, tenemos que actualizar el estado inicial. Entonces voy a hacer el filtro de puntos de datos de comida porque vamos a filtrar a través los datos MUX para seleccionar con precisión cada categoría. ¿Bien? Entonces aquí voy a hacer ítem, sí. Nuevamente, ponlo a nuestra función. Listo dentro, vamos a devolver categoría de punto de artículo igual a la categoría real, derecho, dentro de los datos de comida. Entonces habiendo hecho esto, entonces menos de línea es implementar el onclick. Formateemos el código. Así. Deshacer clic igual. Tenemos que actualizar los alimentos alimentos a los datos mu. Bien, bien. Resalta esta copia, ven a la pieza arriba o lata, y luego vamos a pegarla aquí mismo. Pero ahora en este caso, queremos llamar a la función que aquí definimos. Llama así a esta función. Entonces tenemos que pasar en la categoría pizza. ¿Bien? Guarde, y veamos si funciona. Dice que las categorías no están definidas para. ¿Yo hice eso? Mientras que, oh Dios mío chicos, echen un vistazo a la línea diez. Ahora bien, debería funcionar. Es mu fecha no está definida. ¡Uy! Los ojos del tipo se están cerrando por aquí. Es tarde en la noche, lo siento mucho por eso. Ahora probémoslo en Piazza. Funciona, chicos, se ven guapos. Y cuando hago clic en Todos, devuelve todas las comidas. Creo que eso es bueno, pero ensalada de pollo no está funcionando por ahora. Vamos a implementarlo rápidamente. Sólo tengo que copiar a este tipo. Pégalo aquí mismo. Y esto va a ser pollo. A mí me encanta tanto el pollo. A continuación, copie de nuevo, superada dentro del cuerpo sólido, y luego cambie la categoría a sólido. Guardar. En el navegador. Refrescar. Cuando haces clic en pizza , muestra pizza, pollo, ensalada de pollo. Se muestra sólido. Esto es extremadamente fantástico chicos y me encanta. Me encanta cada pedacito de este curso. Esto es todo por ahora y todo está funcionando perfectamente bien como se esperaba. Comprobemos la capacidad de respuesta móvil. ¿Puedes ver eso? ¿Funciona bien? Échale un vistazo. Tomémoslo en un dispositivo iPhone. Ensalada de pollo. Oh, Dios mío. Bien, continuemos. En la próxima conferencia, comenzaremos a implementar la sección de categorías superiores. Esto es todo por ahora. Nos vemos en la próxima conferencia. 67. 65 categorías de tendencia: Hermoso. Bien, entonces en esta conferencia, vamos a trabajar en las categorías superiores. Entonces, básicamente, lo que vamos a hacer es mapear a través de las categorías y tenerlas visualizadas en la pantalla. Y por supuesto, vamos a darle un aspecto muy bonito en el diseño para que se vea atractivo a los ojos de los usuarios finales. De frente a VS Code comando B para abrir las categorías explorer jazz. Y entonces voy a hacer rudo ver, degenerados son componentes funcionales y luego sólo tenemos que pasar por los datos otra vez. Entonces aquí están los datos de categorías, esta flecha por aquí con objeto y luego los elementos por allá. Entonces básicamente vamos a mostrar el nombre y las imágenes. Ciérrela. Entonces primero lo que voy a hacer es importar categorías. Y por favor, esta es una letra minúscula de datos de barras de puntos y puntos. Por supuesto que ya deberías saber esto. Tenemos que renderizar el componente de categorías directamente dentro de la aplicación. Y también por favor asegúrate de importarlo en la parte superior. Entonces ahora voy a hacer categorías console.log. Algo definitivamente aparece justo en la consola. Y aquí están los detalles. ¿Puedes ver? Tenemos el índice para ser cero, el ID es uno, el nombre de la categoría y la ruta de la imagen. Sí, entonces chicos, eso es exactamente lo que tenemos por ahora. Entonces veamos cómo podemos mostrar todos estos duros en la pantalla. Vamos a darle al div un nombre de clase para estilizarlo. El ancho máximo va a ser de 15, 20 píxeles. Margen, auto. El acolchado izquierdo e inferior derecho es para la parte superior extranjera y el padding-bottom es de 12 K. Quiero ser exactos, así que no estoy seguro de esto. Déjame abrir el correo JS o cualquiera de las cosas y déjame ver. Bien. 15, 20, creo que ya está. Bien. Bien. Cuando guardes aquí vamos a tener una etiqueta de cabeza que guardará como titular, página uno, justo dentro voy a hacer categorías de tendencias también. Sólo tengo que copiar el estilo desde aquí. Todos son iguales. Copia. Ven aquí. Sólo hay que reemplazarlo así. Guarde el navegador. Aquí. Lo es. ¿Bueno? Entonces el PY es de 12 pixeles, creo que deberíamos hacerlo de cuatro pixeles. Sí, ahora esto es beta. Bien, así que continuemos. línea Vanessa en este momento es mapear a través los datos y luego tenerla visualizada en la pantalla. Y además de estilizar el artículo para que aparezca muy bien a los ojos de los usuarios finales. Aquí, vamos a tener un div, darle un nombre de clase, grid dash. Entonces vamos a tenerlo display grid. En dispositivo mediano. Queremos que la cuadrícula muestre las columnas seis. Después dale al hueco cinco, acolchado superior e inferior, cinco, acolchado-izquierda y patrón derecho. Hagámoslo también. Empecemos a mapear a través de las categorías. Categorías, puntos, mapa. Creo que todos ustedes pueden mapear a través de un ítem. Ya no hay gran cosa para todos ustedes porque hemos estado haciendo esto durante las últimas cuatro o cinco conferencias en este momento. Entonces, sí, pueden item que representan cada elemento derecho, dentro de la matriz. Y entonces aquí vamos a devolver una UI, darle un div con el nombre de la clase. Vamos a dializar el patrón div va a ser para, vamos a tenerlo display flex. Justificar el contenido al centro. Artículos, alinear. Centro. En Hoover. Queremos que escale de uno a cinco y la duración es de 300. Bien, bien. Cerrado bajo dv. Otra vez. Aquí voy a hacer IMG, SRC igual item dot image. Ciérrela. Cuando ahorras. Vamos a sacarlo en el navegador. Vaya, no hay nada aquí. Cierto chicos. Hagámoslo así. Echa un vistazo. ¿Puedes ver? Funciona. Esto se ve hermoso. Bien, vamos a correr la parte superior ahora mismo. Entonces la imagen, vamos a darle una alternativa. Si el enlace de la imagen se apaga, algo más podría aparecer en la pantalla. Ahora, la alternativa, bien, voy a hacer el nombre del punto del artículo. Entonces esto es en realidad cuando el enlace de la imagen está muerto, este tipo va a aparecer, que es el nombre del ítem. Déjame mostrarte por ejemplo a. Error en esto ahora mismo, cuando guardo en el navegador, ves que va a mostrar los nombres, ¿verdad? Entonces estas son las alternativas, ¿verdad? Bueno. Te dije al inicio de este curso que voy a intentar en lo posible explicar todo simplemente para que todos lo entiendan lo suficientemente bien. Y por cierto, varía la voz de Albert Einstein. Todo genial. Cuando revises la consola, vas a ver esta por aquí. Entonces para este en, ahora mismo, quiero que detengas el video e intentes más posible para implementarlo a tu final. Bienvenidos de nuevo a todos. Ahora, quiero ayudarte a resolver este problema. En realidad, no es un problema, ¿de acuerdo? Entonces esto es solo una cosa muy simple que todos pueden hacer. Entonces tenemos que especificar la clave ¿verdad? En el nivel superior. Voy a hacer ítem demasiado duro, ID porque ID es algo que podría usarse para identificar de manera única las categorías. Vamos a refrescarnos. Bueno. Se puede ver que es móvil, sensible. Duro, bien, así que todo está funcionando perfectamente bien como se esperaba. Esto es todo por ahora. Y en la próxima conferencia, comenzaremos a implementar los componentes del boletín informativo. Nos vemos entonces. 68. 66 Trending Cateogry: Tan rápido, procedamos con el componente boletín VS Code. Y luego tenemos que abrir los componentes del boletín. Bien, rápido, vamos a correr murió dentro del componente app. Ahora comencemos. Vamos a darle el nombre de esta clase de defecto. Así podemos estilizarlo. El ancho máximo va a ser, como de costumbre, de 15, 20 píxeles. El margen va a ser Otto. La prueba. Hagámoslo blanco. Acolchado izquierdo y derecho. Hagámoslo caer. Entonces. El BG, que es el color de fondo, vamos a especificar nuestro propio color personalizado. Entonces voy a hacer 24, 26 para ser otro div con el nombre de la clase. En esta ocasión, voy a hacer una cuadrícula de visualización automática de Max Dash y un dispositivo grande. Queremos que salude a la columna tres. Y luego el div con el nombre de la clase. Entonces dispositivo destrabado, vamos a hacerlo bueno. Margen, arriba y abajo. Hagámoslo cinco o cuatro. Bien. Vamos a tener una etiqueta de cabeza y voy a hacer buenos consejos sobre cómo mejorar tu piso. Vamos a tener una etiqueta p aquí. Logan lo hace. Bien, vamos a guardar la aplicación para ver qué tenemos en el navegador. Otro div, dale un nombre de clase, y luego voy a hacer MI guión cuatro, ¿verdad? Dentro de este div. Vamos a tener otro div con el nombre de la clase y luego vamos a tener un display flex. Entonces la dirección flex es colon. En un dispositivo más pequeño. La dirección del flex va a ser fila. Alineemos los elementos. Centro. Justificar el contenido. Espacio entre. El ancho va a ser ancho completo, lo que lo convierte en el 100 por ciento. ¿Bien? Bien, estamos en este div, vamos a tener una etiqueta de entrada aquí. La entrada más cerca con una etiqueta de cierre automático. Vamos a darle un nombre de clase. P guión tres. Vamos a tener un flex de pantalla con va a estar lleno. Después redondeado. Prueba de Mdi, Hagámoslo negro. Bueno. Y el tipo de entrada equa, correo electrónico. Vamos a darle un marcador de posición. Voy a hacer correo electrónico cuando guardes en el navegador. Y aquí está. Ok, entonces la siguiente línea de término es crear el canotaje. Entonces justo después de la etiqueta de cierre del campo de entrada, vamos a tener una botella. Dale un nombre de clase a este botón y luego estilízalo. El fondo va a ser un fondo personalizado. Entonces voy a hacer esas flechas D, F, a. la prueba es amplia. Queremos que la frontera sea un poco curvilínea. Las fuentes van a ser de ancho medio. Entonces el ancho del botón, hagámoslo 200 pixeles. Margen izquierdo. Hagamos el margen a la izquierda cuatro. Y luego margen arriba y margin-bottom. Hagámoslo seis. Margin-izquierda y margen-derecha. Además, hagámoslo seis. Entonces. Frontera. Ninguno. Entonces aquí voy a hacer avisarme a salvo. Puedes ver aquí es yo creo que el ancho del botón no lo es. Bien chicos Aquí se supone que son píxeles, ¿verdad? Bueno. Entonces justo después del div de cierre, vamos a tener una etiqueta P. Y yo voy a hacer. Entonces. En realidad, esto ayudará a crear espacio intermedio. Y yo voy a hacer aquí. Vamos a tener span, darle un nombre de clase. Tenemos que estilizarlo. Prueba, prueba dentro va a estar bien. Solo tenemos que usar el mismo color aquí, así que copia y pega. Bien, por último, lo que voy a hacer ahora mismo es resaltar la etiqueta p de cierre captada, luego cerrarla aquí. Entonces después de eso, justo debajo del div de cierre, vamos a tener una flecha de cobertura. Dale una clase. Entonces esto dibujará la línea intermedia. Entonces preocúpate, te voy a mostrar , bien, presionemos un comentario sobre estos. Guarde la aplicación. Y ahora tenemos algo así. Se ve bien. Eliminar los comentarios y luego el nombre de la clase. Yo voy a hacer. Mi guión ocho. Para estilizar el enganche están el g dash, gris dash 700 en el borde. Dash uno. Aquí están los resultados. Bien, entonces esta línea de aquí. Piensa en todo genial. Sí, así que lo que es otra vez, vamos a repasar estas cosas por aquí porque no me gusta la forma en que aparece el botón. Así que quédate. Mi E6. P x es tres, y luego P Y es tres. ¿Bien? Entonces creo que tenemos que agregarle un relleno. Entonces voy a hacer PY, que es padding, top, padding bottom. Hagámoslo tres. Salvar nuestros ojos. Aparece muy bien y me encanta. Entonces esto es todo por ahora para los componentes del boletín. Y en la próxima conferencia, procederemos con la FUTA. Nos vemos en la próxima conferencia. 69. 67 Componente de pie de página: Bienvenidos de nuevo a todos. Bien, así que en la conferencia anterior, implementamos el componente newsletter. Seguro que todo parece bien como se esperaba. Por lo que en esta conferencia, vamos a seguir adelante para implementar la FUTA. Vuelve a VS Code, abre el Explorer, y luego aquí están los años completos de Todd. Cada FCE genera nuestro componente funcional línea de tono venoso es importar los iconos de redes sociales necesarios que serán utilizados en el pie de página. Entonces aquí voy a hacer en macetas FA, driblar coma cuadrada. Y esto debería ser triple B, luego f, un Facebook Square, FAA, GitHub square, Instagram. Y por último FA, Twitter. Y todo esto viene de los íconos de tablero React. Y luego tenemos que resolver, arreglarlo con lo más sencillo que tenemos, FH reboot square, f. F es big square, GitOps square, Instagram y Twitter. Muy bien, sigamos. Ahora. Vamos a dializar el div. Entonces vamos a tener el ancho máximo para ser de 15, 20 píxeles. El margen va a ser auto. patrón X, que es de izquierda a derecha, es para relleno superior e inferior, inferior al color de fondo. Bien, así que copiemos algunas de las cosas del boletín. Bien, entonces este es el color de fondo que usamos. Así que sólo voy a hacer así. Muy bien. Vamos a tener otro div, darle un nombre de clase, y luego estamos en arriba e abajo, abajo es 16. Pero entonces el patrón de la izquierda a la derecha es cuatro. Vamos a tener una grilla de visualización. Y en un dispositivo grande, queremos que la cuadrícula muestre tres columnas. Entonces la brecha, la brecha es de ocho. Pruebas como darle un color de rejilla verde 300. Fresco. Otro div, derecho, dentro de este div, vamos a tener una etiqueta de cabeza. Entonces voy a hacerlo tan rápido estilizar al Adriano, darle un ancho completo. Prueba va a ser tres x L. La fuente va a ser negrita. El color va a ser naranja. Guión 500. Hermoso. Ahora vamos a tener una etiqueta p, ¿verdad? Cuando la etiqueta p, voy a copiar y pegar la prueba ficticio. Formateemos el código. Después de la etiqueta p de cierre, vamos a tener otro div, darle un nombre de clase, y luego vamos a tenerlo display flex. Justificar el contenido. Espacio entre dispositivos medianos. Vamos a tener el ancho para ser del 75 por ciento, margen superior y margin-inferior. Hagámoslo seis. Y aquí está eso. Lee es donde mostraremos el icono. Bien, entonces primero vamos a tener el tamaño cuadrado de Facebook. Hagámoslo 30. Después resalta, duplicarlo cuatro veces. Este lugar va a ser f Instagram, FE Twitter, GitHub square. Y por último, FE regate al cuadrado. Muy bien, vamos a ahorrar. Vamos a correr eso. El componente justo dentro de la aplicación G está aquí. Vamos a tener conferencia completa para importarla en la parte superior. Guardar en el navegador. Ellos son estos. ¿ Puedes ver? Echa un vistazo. Facebook, Instagram, Twitter, GitHub, n el regate. Mi puerta. No apareció como un espectáculo. No te preocupes. Le vamos a dar un coach profesional. Entonces hagámoslo rápido. Entonces justo después de este div de cierre, vamos a tener otro div con el nombre de la clase. Lo siento chicos, bien, dentro del div. En dispositivos más grandes, vamos a tener su guión de span de columna, cierto. Vamos a tener un flex de display, justificar el espacio de contenido entre el margen top seis. Otro div, ¿verdad? Dentro de este div, vamos a tener un enganche seis más oscuro. Y voy a hacer ubicación aquí mismo. Voy a hacer nombreClase igual. Hagamos que los teléfonos sean medianos. La prueba. Vamos a usar una prueba personalizada por aquí. Entonces voy a hacer 999. ¿Está bien? Te voy a dar un pequeño toque de verde ¿verdad? Ahora vamos a tener en todos por lo menos va a escribir no era una UL. Vamos a tener los elementos de la lista. Entonces aquí dale un nombre de clase. El relleno superior e inferior va a ser para probar ASM, lo que implica el tamaño de fuente y los resaltados de altura de línea, tenemos que duplicarlo tres veces. Entonces aquí voy a hacer la ciudad de Nueva York. Voy a hacer USA, India. Por último, tenemos a Canadá. Me encanta Canadá mucho más fuerte, ¿verdad? Y lo hace por cierto. Entonces qué S, Ahora, voy a destacar este div. Entonces lo vamos a duplicar tres veces. 123. Y esta es la d real que creamos. Guarda y veamos qué tenemos en el navegador. Todo parece muy bien, pero seguro, este no es el resultado esperado. Entonces no me gusta la forma en que estas cosas están dispersas por ahí. Así que vuelve al código VS a menos que lo arregle rápidamente. Básicamente, aquí es donde radica el tema. Aquí dijimos en dispositivos más grandes, queremos que sea la columna tres de cuadrícula. Pero el problema es que todo se apretó. Y creo que ese es uno de los inconvenientes del viento de cola. Tienes que estar haciendo guión de columna tres. Si no usas estos datos por aquí, no va a funcionar para ti. Entonces, cuando hagas Columbus dash tres, lo dividirá en tres columnas. Ahí es cuando todo va a estar bien. Y vas a tener algo como esto. Echa un vistazo. ¿Te gusta? Bien chicos, este es el final de la conferencia y creo que todo es como se esperaba. ¿Puedes ver? 70. 68 Pruebas y fijación: Bienvenidos de nuevo a todos. Bien, por lo que en la conferencia anterior, implementamos el componente newsletter. Seguro que todo parece bien como se esperaba. Por lo que en esta conferencia, vamos a seguir adelante para implementar la FUTA. Vuelve a VS Code, abre el Explorer, y luego aquí están los años completos de Todd. Cada FCE genera nuestro componente funcional línea de tono venoso es importar los iconos de redes sociales necesarios que serán utilizados en el pie de página. Entonces aquí voy a hacer en macetas FA, driblar coma cuadrada. Y esto debería ser triple B, luego f, un Facebook Square, FAA, GitHub square, Instagram. Y por último FA, Twitter. Y todo esto viene de los íconos de tablero React. Y luego tenemos que resolver, arreglarlo con lo más sencillo que tenemos, FH reboot square, f. F es big square, GitOps square, Instagram y Twitter. Muy bien, sigamos. Ahora. Vamos a dializar el div. Entonces vamos a tener el ancho para que sea de 15, 20 píxeles. El margen va a ser auto. patrón X, que es de izquierda a derecha, es para relleno superior e inferior, inferior al color de fondo. Bien, así que copiemos algunas de las cosas del boletín. Bien, entonces este es el color de fondo que usamos. Así que sólo voy a hacer así. Muy bien. Vamos a tener otro div, darle un nombre de clase, y luego estamos en arriba e abajo, abajo es 16. Pero entonces el patrón de la izquierda a la derecha es de cuatro. Vamos a tener una grilla de visualización. Y en un dispositivo grande, queremos que la cuadrícula muestre tres columnas. Entonces la brecha, la brecha es de ocho. Pruebas como darle un color de rejilla verde 300. Fresco. Otro div, derecho, dentro de este div, vamos a tener una etiqueta de cabeza. Entonces voy a hacerlo tan rápido estilizar al Adriano, darle un ancho completo. Prueba va a ser tres x L. La fuente va a ser negrita. El color va a ser naranja. Guión 500. Hermoso. Ahora vamos a tener una etiqueta p, ¿verdad? Cuando la etiqueta p, voy a copiar y pegar la prueba ficticio. Formateemos el código. Después de la etiqueta p de cierre, vamos a tener otro div, darle un nombre de clase, y luego vamos a tenerlo display flex. Justificar el contenido. Espacio entre dispositivos medianos. Vamos a tener el ancho para ser del 75 por ciento, margen superior y margin-inferior. Hagámoslo seis. Y aquí está eso. Lee es donde mostraremos el icono. Bien, entonces primero vamos a tener el tamaño cuadrado de Facebook. Hagámoslo 30. Después resalta, duplicarlo cuatro veces. Este lugar va a ser f Instagram, FE Twitter, GitHub square. Y por último, FE regate al cuadrado. Muy bien, vamos a ahorrar. Vamos a correr eso. El componente justo dentro de la aplicación G está aquí. Vamos a tener conferencia completa para importarla en la parte superior. Guardar en el navegador. Ellos son estos. ¿Puedes ver? Échale un vistazo. Facebook, Instagram, Twitter, GitHub, n el regate. Mi puerta. No apareció como un espectáculo. No te preocupes. Le vamos a dar un coach profesional. Entonces hagámoslo rápidamente. Entonces justo después de este div de cierre, vamos a tener otro div con el nombre de la clase. Lo siento chicos, bien, dentro del div. En dispositivos más grandes, vamos a tener su guión de span de columna, cierto. Vamos a tener un flex de display, justificar el espacio de contenido entre el margen top seis. Otro div, ¿verdad? Dentro de este div, vamos a tener un enganche seis más oscuro. Y voy a hacer locación aquí mismo. Voy a hacer nombreClase igual. Hagamos que los teléfonos sean medianos. La prueba. Vamos a usar una prueba personalizada por aquí. Entonces voy a hacer 999. ¿Está bien? Te voy a dar un pequeño toque de verde ¿verdad? Ahora vamos a tener en todos por lo menos va a escribir no era una UL. Vamos a tener los elementos de la lista. Entonces aquí dale un nombre de clase. El relleno superior e inferior va a ser para probar ASM, lo que implica el tamaño de fuente y los resaltados de altura de línea, tenemos que duplicarlo tres veces. Entonces aquí voy a hacer la ciudad de Nueva York. Voy a hacer USA, India. Por último, tenemos a Canadá. Me encanta Canadá mucho más fuerte, ¿verdad? Y lo hace por cierto. Entonces qué S, Ahora, voy a destacar este div. Entonces lo vamos a duplicar tres veces. 123. Y esta es la d real que creamos. Guarda y veamos qué tenemos en el navegador. Todo parece muy bien, pero seguro, este no es el resultado esperado. Entonces no me gusta la forma en que estas cosas están dispersas por ahí. Así que vuelve al código VS a menos que lo arregle rápidamente. Básicamente, aquí es donde radica el tema. Aquí dijimos en dispositivos más grandes, queremos que sea la columna tres de la cuadrícula. Pero el problema es que todo se apretó. Y creo que ese es uno de los inconvenientes del viento de cola. Tienes que estar haciendo guión de columna tres. Si no usas estos datos por aquí, no va a funcionar para ti. Entonces, cuando hagas Columbus dash tres, lo dividirá en tres columnas. Ahí es cuando todo va a estar bien. Y vas a tener algo como esto. Échale un vistazo. ¿Te gusta? Bien chicos, este es el final de la conferencia y creo que todo es como se esperaba. ¿Puedes ver? 71. 69 Netflix Clon (Crear una aplicación de reacción): Bienvenidos de nuevo a todos. En esta sección del curso, seguiremos adelante para comenzar a construir la colonia Netflix. Y como de costumbre, vamos a empezar de cero para instalar una nueva aplicación React. Entonces, justo en el escritorio, creemos rápidamente un nuevo directorio llamado clon de Netflix. No lo he hecho. Arrastre y suelte la carpeta, derecha, dentro del código VS. Sólo tenemos que cerrar la página de Comenzar. Bien, así que sólo voy a decir que sí. Entonces cierra esta página, maximiza la táctica de control de prensa VS Code para abrir el terminal integrado VS Code. O bien lo puedes encontrar en el menú superior, dominó nueva terminal. Déjame arrastrarlo o construir, ya habrá, así que aquí voy a hacer y ser x, crear dash, react, dash n. como normalmente lo hacemos, lo vamos a instalar en un directorio llamado clean. Y por supuesto ya sabes que React js se utiliza para construir una aplicación front-end. Esa es la razón por la que siempre lo instalamos en un reclaims directo. Presiona la tecla Enter para que se dispare. Y seguro, la instalación definitivamente te llevaría un tiempo. Entonces tengo que adelantar la conferencia. React js instalado correctamente. Aquí voy a hacer npm. start ups tienen razón, voy a hacer cd client y luego npm start. Todo está funcionando como se esperaba. Aquí está la página de muestra. Así que vamos a limpiar rápidamente el código de nuevo a VS. El código ha declinado. Abra el SRC. No necesitamos la prueba de configuración punto js. Seleccione, presione hacia abajo la tecla de comando en su teclado y luego toque el trackpad para seleccionar los informes fueron vitaes, logo dot SVG arriba test.js y todos estos no necesitamos. Bien, así que habiendo hecho esto, haz clic derecho, muévelo a la basura. Abre la app Js, el logo se ha ido. Tenemos que borrarlo. Y además, no necesitamos nada aquí mismo dentro de la app js. Entonces solo voy a resaltar todo, desde la etiqueta de cabeza de apertura hasta la etiqueta de encabezado de cierre. Límpielo. Asegúrate de guardar. Volvamos al index.js. Y seguro, no necesitamos el reporte web vitals y todas estas cosas por aquí. Límpielo. ¿Qué es otra vez? Guardemos la aplicación y todo está bien. El navegador, estos son los resultados esperados. Bien, entonces en esta conferencia, comenzaremos a crear las páginas y los componentes. Nos vemos entonces. 72. 70 Componentes y páginas: En esta conferencia, vamos a empezar a crear los componentes MPG. Así que usando los ingresos de SRC, crear una nueva carpeta llamada componentes. Otro, justo dentro del SRC. Y voy a llamar a estas páginas otra. Y esto se llamará tus T's. Y por último, esto se llamará puesto. Bueno. Derecha. No sería el directorio de páginas que vamos a tener páginas como la página de inicio de sesión, Pitch de película, registro, y muchas más. Entonces hagámoslo rápido. Login peach.genome ways, también puedes hacer GSS si lo deseas. Pero siempre me gusta quedarme con la extensión dot js. Nuevamente, justo dentro de las páginas. Nuevo archivo, peach.genes. Aquí está el jugador dot js. Entonces ese será el componente o página del reproductor de películas. Mira aquí vamos a tener programa de TV punto js. Película ph dot g is. Entonces vamos a tener netflix dot g is. Bien, entonces habiendo creado las páginas, vamos a crear rápidamente los componentes relacionados, justo cuando el paquete de componentes haga clic derecho y luego nuevo archivo, vamos a tener la imagen de fondo punto g está aquí. Otra vez. La mitad de ingresos tenía nuestros puntos. Entonces esto va a estar bien por ahora a medida que procedamos con las conferencias, crearíamos más componente. Bien, así que habiendo hecho esto, vamos a generar rápidamente los componentes funcionales, justo con él. Entonces solo tengo que cerrar todos ellos desde aquí, cerrar los componentes. Y luego dentro de la página de inicio de sesión, voy a hacer nuestro FCE. Boom, así como así. Netflix o un reproductor de FCE, un registro de FCE o un FCE. Y esto debería aplicarse a todas las páginas y componentes. Es tan sencillo como eso. Bien, vamos a trabajar en el componente. Bien, ahora hemos terminado de configurar las páginas y los componentes. En la próxima conferencia, vamos a configurar nuestras rutas. Nos vemos en la próxima conferencia. Mantente enfocado y cuidado holístico. 73. 71 Cómo configurar las rutas: Para comenzar con la ruta, primero, tenemos que instalar el router React haciendo aquí, está aquí mismo? Sólo tengo que copiar este comando. Y seguro puedes ir a NPM js.com slash packages slash router React, hacer, y luego copiar el comando de instalación por aquí. ¿Verdad? Estamos en la terminal. Voy a hacer Control C para detener el servidor que se está ejecutando actualmente y luego pegar el comando npm, install, React, router, dash, no golpees la tecla Enter para que se encienda. Instalado. Exitoso. Entonces lo siguiente en línea es implementar el comando de rutas P para que haga aparecer el cuadro de búsqueda en la parte superior. Y a estas alturas, ya deberías saber cómo hacerlo. Y entonces voy a configurar el G está justo aquí. Cerremos el Explorer. Primero. Vamos a importar rutas y rutas del router del navegador. Déjame mostrarte. Voy a hacer en macetas, browser outta, coma, rutas, rutas, así como esto. Todos estos paquetes Vendremos de React dash route. No sólo me gusta esto. Bien, así que habiendo hecho esto, vamos a configurar rápidamente las rondas. Entonces aquí voy a borrar todo porque queremos concluir toda la aplicación justo dentro del router del navegador. Entonces voy a hacer router de navegador. Y boom, estos servirán de nodo padre por ahora. Entonces justo dentro vamos a tener las rutas. Entonces esto incluye todas las rutas que vamos a tener derechos dentro de sus outs. Vamos a especificar rutas individuales. Sí, así que voy a hacer rutas como estas. Entonces esto representa cada ruta que vamos a tener. Y esto va a cerrar la totalidad de las rutas que vamos a tener en la aplicación NPR. Y luego justo dentro de las rutas, vamos a envolverlo con el router del navegador es tan sencillo como eso. Entonces derecho a poner en las rutas individuales, voy a hacer exactamente. Entonces vamos a apuntar al camino exacto. El camino va a ser igual de slash, vamos a suponer login, ¿de acuerdo? Entonces cada vez que golpeamos esta ruta, tenemos que abrir un elemento, en este caso, el componente de preocupación. Entonces voy a hacer elementos. Entonces los elementos que queremos abrir, va a ser una página de inicio de sesión de tarjeta competente. Asegúrate de cerrarlo. ¿Qué es la etiqueta de cierre automático? Y luego también asegúrate de importar la página de inicio de sesión en la parte superior. Entonces lo que voy a hacer ahora mismo es cerrar la ruta con una etiqueta de cierre automático. Ahora, voy a destacar y luego duplicarlo seis veces. Justo así. Aquí tenemos un on-target, el registro. Cuando lleguemos a esta ruta, vamos a abrir la página de registro. Por favor, asegúrese siempre de importarlos en la parte superior. Y estas son las páginas que creamos anteriormente en esta conferencia. Entonces nada es nuevo por aquí. Entonces cuando lleguemos a esta ruta, queremos abrirnos. Déjame mostrarte el pH de inicio de sesión también cuando choquemos. Bien, vamos a abrir los objetos. Otra vez. Estoy tratando lo más posible de que todos lo entiendan lo suficientemente bien. Cuando lleguemos a las rutas de registro, vamos a abrir la página de registro y así sucesivamente y así sucesivamente. Aquí. Voy a hacer jugador. Y también tenemos que abrir la página del jugador. Lo vamos a hacer aquí, tv. Y esto abrirá los programas de televisión. Esto por aquí va a abrir la página principal. Y en este caso la página principal es Netflix. Bien. Creo que con esto ya terminamos. Déjame comprobarlo ahora mismo. La página de registro, página de película. Bien. También tenemos que abrir la página de la película. Entonces voy a hacer aquí v. Así que tenemos que abrir la página de la película. ¿Qué vuelve a registrarse? Creo que hemos hecho todas las paradas por aquí. Bien, así que vamos a comprobarlo. Al guardar la aplicación. Aquí, voy a hacer npm start. Vamos a comprobarlo en el navegador. Y ahora estamos justo en la página principal, que es el punto js de Netflix. Entonces voy a hacer slash login. Y ahora estamos en la página de inicio de sesión. Nuevamente, quítate la baraja. Voy a hacer slash, regístrate. Ahora. Déjame acercarme un poco. Ahora estamos en la página de registro. Entonces así es exactamente como lo vamos a hacer. Para probar todas las rutas. Tenemos que probarlo. Qué lío otra vez, vamos a hacer TV. Y esto nos llevará al componente o página del programa de televisión. Así que todos sus artistas trabajan perfectamente bien. También puedes probar que tus fines. Esto es todo por ahora. En la próxima conferencia, comenzaremos a diseñar la página de registro e inicio de sesión. Nos vemos en la próxima conferencia. 74. 72 Componente de reutilización de BackgroundImage: En esta conferencia, vamos a crear los componentes reutilizables de la imagen de fondo. Así que rápidamente abre la imagen de fondo punto g es, oye, es. Entonces antes de continuar, tenemos que instalar componentes estilizados. Sí, pasemos a las burlas del MPM. Oye, ¿es para instalar el componente con estilo? Sólo hay que copiar el comando por aquí. O puede hacer npm instalar componentes de tablero estilo. Para instalar npm los componentes del tablero de estilo, tenemos que detener la neurona actual y hacer una encuesta nuevamente presionando Control C y luego pegar el comando aquí mismo, npm, que es componentes de tablero de estilo instalados. Entonces el componente de estilo es lo que usaremos para estilizar nuestra obligación. Básicamente, el componente start es una solución de teselas CSS y JS específica de React que crea una plataforma para que los desarrolladores usen su código CSS real en el estilo de sus componentes. Sí, entonces en realidad, la forma en que lo hacemos uso es especificando los literales templados. No te preocupes, verás cómo funciona en un G V. No hemos instalado el componente de estilo aquí en segundo plano, también hemos generado el componente funcional. Entonces primero, por aquí, tenemos que importar Stout de componentes stout. Y justo debajo, voy a hacer const background container equa, start dot div. Entonces así es como usar los componentes stout. Y habiendo hecho eso, todo nuestro CSS se escribirá entre los litros templados. Entonces, por lo tanto, tenemos que especificar los literales de plantilla. Y por cierto, esto es solo el Ártico. Y Arctic se encuentra en la esquina superior izquierda, justo debajo de la tecla de escape en tu teclado. Aquí es que Lee es donde vamos a escribir el CSS. Entonces ahora, habiendo hecho esto, voy a copiar esta clase así. Aquí. Voy a hacer así. Sí. Ahora tenemos que trabajar en la imagen de fondo. Voy a hacer IMG, SRC, equa, volver a los materiales de Netflix y luego abrir. Podrían ayudar y copiar el enlace a la imagen de fondo del clon de Netflix. Aquí está el enlace, sí, así que solo tienes que copiar el enlace de fondo de Netflix. Se encuentra justo dentro de los materiales de Netflix. Y luego abre el ayudante de código. Aquí. Yo sólo voy a pegar, cerrarla con la etiqueta de cierre automático también. Tenemos que especificar la alternativa. Yo voy a hacer aquí. Equa, conexión a Internet. Así como esto. Sí, cuando ahorras, bien, ahora tenemos que estilizar esta imagen. Así que vuelve a los componentes corpulentos a la derecha, entre los literales de plantilla. Así que el estilo de la aplicación se llevaría a cabo aquí. Es tan sencillo como eso. Entonces vamos a especificar la altura de la imagen de fondo. La altura. Hagámoslo 100 alturas de vista. Bien, entonces antes de ir más allá, quiero presentarte inteligencia de componentes de estilo que te ayudará a mostrar las opciones justo dentro del IntelliSense. Entonces, por ejemplo, si escribe seto, se va a mostrar la opción de altura. Entonces abre las extensiones. La extensión que vamos a establecer para la herramienta de resaltado de código VS para componente estándar. Entonces aquí voy a hacer código VS dash stout, componente grande. Aquí está. Por lo que esta es una herramienta de resaltado de sintaxis para la instalación de componentes con estilo. Solía tenerla antes. Lo borré simplemente porque quiero instalarlo desde cero para una comprensión adecuada. Ahora ya he terminado de instalar la herramienta de resaltado de sintaxis, que sí tiene que cerrarla. Seguro, algunos de ustedes me están preguntando el tema que estoy usando para mi código VS. Entonces justo dentro del set box otra vez, solo tienes que establecer para ti espejismo. Aquí está. Entonces este es el tema que estoy usando para mi Código VS. Y a tu final, vas a ver el botón Instalar. Así que adelante a instalarlo y luego empezarás a mecer exactamente lo mismo con tu instructor. Enseñar bien. Hermoso. Ciérralo hacia abajo. Sí, así que sólo voy a ahorrar y luego volvamos al Explorer. Ciérrala aquí abajo. Vamos a especificar el ancho. Ahora cuando hago con esto, ¿ pueden ver los derechos dentro del IntelliSense? Muestra las opciones. A mí me encanta esto. Facilita las cosas. Empresas instaladas con va a ser de 100 vistas de ancho. Y por favor siempre asegúrate de terminarlo con el punto y coma. Si no terminas con punto y coma, definitivamente nos topamos con problemas. Entonces, habiendo hecho esto, queremos estilizar la etiqueta IMG justo debajo. Voy a hacer IMG abrir y cerrar corchetes. Dale una altura de 100 vistas de alto, un ancho de 100 vistas de ancho. Bien, así que terminamos con esto. Sólo tendremos que salvar a los incautos. Definitivamente verás lo que has hecho en un GP. Entonces solo tenemos que poner en marcha la aplicación npm start. Si quieres ver lo que hemos hecho hasta ahora, Todo lo que tienes que hacer, Comando P, abre la app js, bien, por ahora, solo tengo que hacer un comentario sobre estos. Sí, y voy a hacer una imagen de fondo así. Cuando guardas y salgas al navegador. Aquí está. Puedes ver que este es el fondo de los componentes reutilizables que acabamos de hacer. Todo bien. ¿Puedes ver? Está bien. Perfecto. A mí me encanta. Sólo tengo que borrarlo y después quitar el comentario de aquí. Guardar. Regresar a la normalidad. Volvamos a la página principal. Retire la barra diagonal tv. Y tiene por lo menos la página principal, Netflix. Bien. Déjame formatear el código con más bonito. Bien, así que esto es horrible ahora para los componentes reutilizables de fondo. Y en la siguiente conferencia, vamos a crear también el componente reutilizable de cabecera . Nos vemos entonces. 75. 73 Componente de reutilización de cabezales: En la conferencia anterior, creamos los componentes reutilizables de imagen de fondo. Entonces, en esta conferencia, vamos a crear también vamos a crear el componente reutilizable de encabezado. Así Comando P y luego establecer para la cabeza ArcGIS. Y por supuesto que también creamos todos estos componentes en la conferencia anterior. Bueno. Entonces estamos en este componente primero, tenemos que importar el componente estándar, importar estilo de componentes stout. Y por aquí, sólo tengo que borrar esto. Ahora voy a hacer aquí contenedor de cabecera. Entonces tenemos que crear esto rápidamente. Estoy aquí y voy a hacer header container equa stout dot d. así es como crear tu componente start. Una vez hecho esto, tenemos que especificar el buck tq que no podamos escribir nuestros estilos en el medio. Aquí es por lo menos donde vamos a estilizar estas cosas. Déjame acercarme un poco. ¿Puedes ver la espalda con espalda aquí y el cierre espalda con espalda aquí Creo que es demasiado así. Tienes que alejar el zoom. Bien. Vamos a proceder. Aquí. Vamos a tener un div, darle un nombre de clase de logo. Justo dentro de la def, vamos a tener una etiqueta IMG, SRC equa, copiar y pegar el enlace del logotipo de Netflix directamente desde el código help out. Ya he copiado el enlace. Así que vuelve a la Catawba, deshace eso más cerca con la etiqueta de cierre automático. Y luego tenemos que especificar la alternativa que voy a hacer aquí afuera. Y voy a hacer conexión a internet. Echa un vistazo a internet aquí. ¿Bien? Entonces, habiendo hecho eso, vamos a crear los boardings justo afuera del div con el nombre de clase de Logo. Vamos a tener un canotaje onclick de este botón. Vamos a navegar hasta la página de inicio de sesión o la página de registro, dependiendo de la página en la que se encuentre actualmente. Sí. Entonces, si estás dispuesto a registrarte página, la parte inferior te va a mostrar iniciar sesión. Entonces, si estás dispuesto a iniciar sesión en la página, la parte inferior te va a mostrar regístrate. Entonces, primero hagamos esa limpieza rápida. Justo en la parte superior. Vamos a importar. El uso navega desde adivina donde reactor, después de haber hecho eso, voy a hacer navega. Vamos a tener una variable llamada navega. Adquirir, usar navega. Bien, así que aquí enclic en este botón, vamos a navegar a Ada, la página de inicio de sesión o de registro, dependiendo de la página en la que se encuentre actualmente. Entonces, ¿cómo hacemos eso? Voy a hacer aquí, configurarlo a nuestra función, y luego navegar a, voy a hacer props, puntos. Y claro, esta función tiene que llevarle apoyos también. Entonces vamos a usar utilería para cambiar la funcionalidad del barco y así como la prueba. Entonces voy a hacer si props dot login es igual true, vamos a navegar para cortar login. Por lo que en toda esta aplicación, cada vez que llegues a esta ruta, siempre navegarás a la página de inicio de sesión para mostrarte. Lo hicimos en la conferencia anterior. Aquí, ¿es así? Sí, así que cada vez que llegues a esta ruta, siempre navegarás a la página de inicio de sesión y al resto de la ruta así como al componente correspondiente como páginas también. Así que visita una otra aquí. Vamos a navegar hasta la página de registro, cerrar el botón inferior derecho, el botón. También tenemos que cambiar la prueba también. Déjame mostrarte. Voy a hacer aquí props punto login. Entonces, si prompts dot login es igual a true, lo que vamos a hacer es masticar la prueba de inicio de sesión así. Iniciar sesión. Sí. Entonces de lo contrario, vamos a cambiar la prueba y el barco en señal. Nada complicado por aquí. Sí, empecemos a estilizar este componente muy rápidamente. Pero aquí entre el Ártico, vamos a tener un flex de display. Justificar el contenido. Espacio entre alinear los elementos al centro. El acolchado va a ser Sarah de puntería lejana. Una vez hecho eso, tenemos que estilizar el logo. El logo, tenemos que estilizar el IMG, que es la etiqueta IMG que muestra el logo. Aquí voy a hacer IMG, darle una altura de tres rem. El más grueso es el puntero. Ahora vamos a estilizar rápidamente el abordaje. Sal del corsé, aquí mismo. Vamos a hacer las dos cosas en este botón de aquí. Dale un relleno, 0.5 rem. Y una llanta. El color de fondo, hagámoslo rojo. El borde va a ser conocido como el puntero de caso. Las fuentes dentro de la navegación van a ser blancas, que es este tipo de aquí, el inicio de sesión o inicio de sesión, border-radius. Hagámoslo 0.2. Chicos, esta es exactamente mi especificación. Por lo que puedes decidir cambiar el estilo último extremo para que se ajuste a tu propia especificación u opinión. El peso de la fuente va a ser, hagámoslo más audaz. Y por último, el tamaño firme, 1.05, rem, hermoso. Guardar. Veamos rápidamente lo que hemos hecho hasta ahora. Abre la app js. Justo afuera de la ruta. Vamos a renderizar el encabezado en la parte superior. Esto es solo por ejemplo sake. Guardar dice que los apoyos no están definidos. Lo que tenemos que hacer ahora mismo es volver a la cabecera. ¿Ves que esto se supone que son indicaciones? Bien, Save. Aquí tenemos el logo, y aquí tenemos el inicio de sesión. Entonces, cuando hagas clic en este registro por aquí, vas a ser redirigido a la página de inicio de sesión. Échale un vistazo de cerca. Estamos en lo cierto donde la página principal, que es la página de Netflix. Ahora, cuando haga clic en el inicio de sesión, eche un vistazo. Ahora nos han redirigido a la página de registro. Entonces la idea es simple. Si estamos en la página de registro, esta prueba de aquí se cambiará para iniciar sesión. Entonces, si estamos en la página de inicio de sesión, la prueba dentro del botón se cambiará para iniciar sesión. este momento, es posible que no experimente dicha funcionalidad simplemente porque no hemos implementado la página de registro y la página de inicio de sesión. Hagámoslo en la próxima conferencia para que podamos tener una página de inicio de sesión y registro completamente funcional. Nos vemos en la próxima conferencia. 76. 74 Página de registro: Bienvenidos de nuevo a todos. En esta conferencia, vamos a crear la página de registro. Así que justo dentro del Código VS, vamos a abrir rápidamente el Explorador y luego abrir el componente de página de registro de páginas. Por aquí, vamos a importar los archivos necesarios que se necesiten. Primero, tenemos que importar la empresa stout en Pottstown a partir de componentes stout. Y aquí vamos a importar el componente de cabecera reutilizable, importar encabezado desde, Ups, tenemos que apuntar a los componentes slash y luego head IgA es tan simple como eso. Y nuevamente, también tenemos que importar la fondo del componente de tierra reutilizable de la imagen de fondo de componentes slash. Bien, una cosa más. También tenemos que importar EU did hook porque vamos a hacer uso de él. Son, ahora estamos listos para irnos. Así que por aquí, voy a borrar esto. Entonces voy a renderizar la clase de contenedor. Ahora tenemos que hacer const contenedor equa stout punto d y luego especificar la garrapata posterior. Entonces vamos a tomar en el CSS por aquí. Amigos. Quiero que tomes nota de algo aquí. Ves a este tipo de aquí. Estos deberían estar en la convención de nomenclatura pascal. Entonces implica que pongas mayúscula la primera letra de cada palabra. Aquí está la letra mayúscula C. Bien, ¿verdad? Dentro del contenedor, vamos a rentar la clase de imagen de fondo reutilizable más cerca con la etiqueta de cierre automático. Entonces aquí vamos a tener un div. Vamos a darle un nombre de clase de contenidos, ¿verdad? Estamos en el contenido, vamos a tener el encabezado reutilizables. Y lo que voy a hacer ahora mismo es especificar la sonda de inicio de sesión por aquí. Déjame mostrarte, abre la cabecera. Puedes ver aquí estamos tomando props, así que estamos pasando el login hacia abajo a estos componentes. Entonces, si props dot login es verdadero, vamos a abrir la página de inicio de sesión. Una otra. Vamos a abrir la página de registro tan simple como eso también aquí, si props dot login es verdadero dentro de la votación, vamos a mostrar log in. Ahora también dentro de la navegación, vamos a mostrar señal. Apuntar es tan simple como eso. Así que ahora hemos pasado este login sondea directamente al componente header. Docente, bueno, Hermoso. Bien, aquí vamos a tener un div con el nombre de clase de body. Y justo donde en el cuerpo vamos a tener otro div, darle un nombre de clase de pruebas. Entonces vamos a tener una etiqueta Adriana. Y voy a hacer películas ilimitadas, programas de TV y más. De nuevo aquí vamos a tener un hit por etiqueta. ¿Y qué voy a hacer? En cualquier lugar, la coma cancela en cualquier momento. De nuevo aquí vamos a tener un hit six tag. Entonces estos son los escritos que puedes ver dentro de la página de cierre de Netflix. Sí. Así que en realidad solo estamos copiando de ahí. Entonces voy a hacer listo para ver. Ingresa tu correo electrónico para crear. Reiniciar derechos de membresía, el div de cierre con la prueba de nombre de clase. Vamos a tener otro div, darle un nombre de clase de espuma. Y justo desde la espuma, vamos a tener el campo de entrada, el tipo, la contraseña, marcador de posición igual. Lo que voy a hacer ahora es contraseña y el nombre equa, contraseña, así de simple. Y, um, otro, un campo de entrada. El tipo aquí igual correo electrónico, marcador de posición igual correo electrónico. O puedes decir ingresar dirección de correo electrónico o algo así. Entonces déjenme hacer dirección de correo electrónico, chicos de operaciones. Bueno. En el nombre, igual correo electrónico. También ciérralo con la etiqueta de cierre automático. Qué mol. Ahora, vamos a tener dos botones. Aquí. Vamos a haberle comprado. Esta va a ser la votación de Get Started. Resaltar y duplicar. Este será el botón de registro. Tan simple como eso. Bien, así que echemos un vistazo al navegador para ver qué hemos hecho hasta ahora. Ven aquí, y voy a especificar la ruta para darle al registro, page slash sign-up son correctos. Aquí está el componente de fondo de imagen que renderizamos. Aquí está el encabezado que también ejecutamos eso. Y abajo, aquí escriben ups n. los campos de entrada. Aquí está el botón Comenzar, el registro, el correo electrónico y el campo de contraseña, todo genial. Bien. Parece que no está bien alineado. Sí, es simplemente porque no lo hemos estilizado. Así que vamos a estilizar rápidamente este componente para que se vea bien. Regresa. La idea aquí es colocar todos estos duros encima de la imagen de fondo. Como puedes ver en el encabezado está justo debajo de la imagen de fondo. Entonces para ello, tenemos que especificar la posición para que sea relativa, y entonces la posición de estos chicos será absoluta. Entonces ven aquí y voy a hacer posición relativa. Habiendo hecho eso, el contenido, que es este tipo de aquí, ¿ puedes ver todo justo dentro? Vamos a hacerlo absoluto para que pueda ir justo encima del componente de imagen de fondo. Sé que entiendes de lo que estoy hablando. Y en efecto, tipo listo. Bien, así que voy a hacer el contenido de puntos. Entonces vamos a tener que posicionar absolutos. Entonces, habiendo hecho esto, lo que vamos a hacer a continuación es posicionarlo desde el cero superior y desde el cero izquierdo. Entonces cuando lo haga aquí, arriba, vamos a hacer que sea cero cuando guardes el check out en el navegador. Ahora tenemos todos estos términos por aquí así . ¿Puedes ver? Voy a hacer desde la izquierda, vamos a hacerlo cero. Entonces cuando observes la pantalla, te darás cuenta de que el brillo del fondo es bastante alto. Sí, así que vamos a hacer que sea un poco considerado. Entonces eso es lo que aparece en la parte superior, puede ser más visible, como este tops de aquí. Entonces lo que voy a hacer esto es especificar el color de fondo. Y yo voy a hacer RGBA. Cero coma cero coma cero coma cero puntos 79. Esta es mi propia especificación, ¿verdad? Para que puedas hacer otra cosa al final. Cuando guardas y revises el navegador. Puedes ver ahora tenemos un antecedente considerado. Déjame mostrarte. Vamos a quitarnos esto otra vez. Guardar. Cuando recargues, te darás cuenta que el fondo se vuelve tan brillante. Entonces cuando sueltas a este tipo, Save, ahora, se considera un poco, pero por ahora aparece en la parte superior. ¿Ves? No sé si puedes ver estos. Bien. Vamos a estilizarlo para que se ajuste a la pantalla. Vamos a darle una altura. 100 vh, el ancho 100 vh. Y se puede recordar que esta es la dimensión real de la imagen de fondo reutilizable. Entonces solo lo estamos llamando aquí para que se ajuste a la pantalla de la imagen de fondo cuando guardas en el navegador. Todavía tenemos algo como esto. Y no sé por qué. Vaya, se supone que esto es de 100 vistas de ancho así. Y puede recordar que esta es la dimensión real del componente de imagen de fondo reutilizable. Sí, así que lo estamos trayendo aquí para que se ajuste a la pantalla, guardar, echa un vistazo al navegador aquí. ¿Es una vez más? Déjame mostrarte lo que hace este tipo cuando comentó Guardar. Ahora puedes darte cuenta de que el fondo se vuelve verdadero brillante. Cuando ahorras. Se considera o constructor bit. Y eso es exactamente lo que estamos buscando. Entonces aquí voy a hacer columnas de plantilla de rejilla, enganche de 15 V y 85 v h. ahora vamos a dializar el cuerpo. El cuerpo. Déjame mostrarte aquí, está justo dentro del cuerpo? Vamos a tener un flex de display. Y la dirección flex es colon. Justificar el contenido al centro, alinear los elementos al centro. Al guardar, todo estará alineado al centro. Puedes ver ahora el logo ha sido alineado a la esquina superior izquierda de la pantalla. Aquí el botón de inicio de sesión se ha alineado a la esquina superior derecha de la pantalla. Y en la conferencia anterior, te dije que cuando estás en la página de registro, esta te mostrará el botón de inicio de sesión. Cuando estés en la página de inicio de sesión, esta parte inferior se cambiará para registrarte. Creo que lo hicimos en la conferencia anterior justo dentro del componente header por aquí. Entonces, cuando tomas este utilería por aquí, hace que todo funcione mejor. Este tipo de aquí. Entonces significa que hemos pasado las sondas de inicio de sesión al encabezado. Entonces aquí muestra que solicita inicio de sesión de punto es igual a true. Entonces ese botón ahí arriba derecho dentro de la votación aquí se cambiará para iniciar sesión un else, va a cambiar para inscribirse. Pero déjame mostrarte rápidamente. Ven aquí. Nos vamos a inscribir. Entonces cuando guardas la aplicación, checkout, el navegador, puedes ver ahora que hemos diseñado en votación. Es tan sencillo como eso. Así que dejémoslo como login por ahora. Sigamos con el estilo. Para la prueba. Vamos a tener un flex de display. La dirección de flexión es columna. Así que sólo voy a copiar de aquí así y luego pegarlo aquí. El tamaño de la fuente. Hagámoslo a través del borde. El color de los teléfonos va a ser blanco. Vamos a sacarlo en el navegador. Se ve todo muy bien alineado, el centro. Bien, hagamos algo aquí. Tenemos que quitar el contenido justificado al centro. Entonces voy a hacer alineación de texto. Centro formatea el código, guarda la aplicación. Y ahora están justo en el centro. Está bien. Bien. El nido es la etiqueta de la cabeza. Entonces si golpeo una etiqueta, el relleno va a ser 0.25 espacio para el enganche por etiqueta. Para. Entonces vamos a especificar el margen superior. Y lo voy a hacer -1.5 rem. Vamos a quitársela para que la veas con claridad. Presiona un comentario al respecto seguro. ¿Ves? No me gustan los espacios entre la prueba. ¿Ves que no se ve líneas? Entonces, cómo resolver eso es aplicar el margen superior. Y también quiero que el programa de televisión baje. Entonces para el relleno, voy a quitarme el 0.25 rem. Entonces voy a darle 025 rem. Bueno. H6. El hit F6 es exactamente el mismo margen de dividendo superior para que pueda acercarse. Todo bonito. Bien, así que comencemos a estilizar el campo de entrada, incluyendo la parte inferior. Entonces aquí mismo, voy a hacer el formulario Dodds. Vamos a tener una grilla de visualización. Vamos a especificar el ancho para que sea 60%. ¿Bien? También tenemos que especificar las columnas de la plantilla de cuadrícula. Pero dejemos eso por ahora. Entonces aquí vamos a estilizar la imput vista, el color. Hagámoslo negro. ¿Perdón? 1.5 rem. El tamaño de la fuente, 1.2 rem. Y un ancho de este campo de entrada va a ser 45 rem. Vamos a comprobarlo en el navegador. Guardar. A mí me encanta. Así que aquí están los dos campos de entrada. No te preocupes por el botón. En realidad no hemos llegado a eso por ahora. Algo importante que también tenemos que hacer es, déjame mostrarte un ojo enfocado en el campo de entrada. Verás el esquema. Se ve el contorno azul. No quiero eso. Entonces lo que voy a hacer ahora mismo es en los pronósticos. Vamos a quitar el contorno solo para que no sea tan sencillo como eso. Entonces no he hecho esto. Vamos a estilizar rápidamente los cuerpos. Dale un relleno de 0.5 rem, una conferencia rim para terminarlo con el punto y coma y luego el color de fondo. Vamos a hacerlo rojo. La frontera, va a estar entumecida, más tosca. Hagámoslo punto para ahorrar y ver qué tenemos. Bien, vamos a envolverlo ahora. El color, déjame mostrarte el color de los derechos de fuente. Pero en la navegación, por ejemplo, empiezan en el cartel. Hagámoslo blanco. El tamaño de la fuente. Vamos a aumentarlo un poco. 1.05 rem. Y el ancho de este borde oriental de navegación. Guardar. Compruébalo. Derecha. Pero estos no son los resultados esperados. Entonces ahora tenemos que obtener el resultado esperado. Lo que vamos a hacer es resaltar el campo de contraseña y mostrar el correo electrónico cuando el usuario clave en el correo electrónico y calentar en el Get Started aborting. Aparecerá el campo de contraseña y también aparecerá el botón de registro. Permítanme reiterar. La intención es ocultar el campo de contraseña y el botón de registro. Entonces, al principio, lo que vas a ver es el campo de correo electrónico n, el botón Comenzar. Entonces, cuando ingresas tu correo electrónico y calientas el botón Comenzar, desaparecerán el correo electrónico y el botón Comenzar. Entonces aparecerá el campo de registro y contraseña. Déjame mostrarte lo que quiero decir con eso. Así que desplázate hacia arriba. Ahora tenemos que implementarlo. Lo que los ustedes, recuerden que importamos Estados Unidos hizo antes. Tenemos que declarar las variables de estado necesarias para ser utilizadas. Vamos a llamarlo Show Password. Los conjuntos de karma muestran la contraseña para usar el escenario. Entonces el estado inicial va a ser falso, así. Ahora, vamos a acondicionar el campo de entrada. Abre los corchetes. Entonces, si tu contraseña es igual a, vamos a mostrar el campo de contraseña. Entonces lo que voy a hacer es copiar el campo de contraseña como estos aspectos destacados capturados y luego pegarlo en el medio. De lo contrario. Vamos a mostrar el campo de correo electrónico, cortarlo y pegarlo aquí. Es tan sencillo como eso. Cuando guardas checkout el navegador, ahora ya no ves el campo de contraseña. Sí, entonces tienes que escribir algo, bien, para poner en el campo de correo electrónico y presionar el botón Comenzar para que aparezca el campo de contraseña. Tan simple como eso. Entonces ahora vamos a presionar una condición en los botones para que todo empiece a funcionar perfectamente bien como se esperaba. Rápidamente, formatear el código. Aquí. Vamos a tener otro corchete. Yo voy a hacer. Si no existe la contraseña de mostrar. Vamos a mostrar el se pone en marcha votando caliente y pegarlo aquí. Ahora. Vamos a mostrar el botón de registro. Cuando guardas en el navegador. Ahora, todo aparece así, pero también queremos que aparezca en la esquina superior derecha del campo de entrada. Ahora, ven aquí. Déjame mostrarte lo que nos queda, derecha, dentro de la espuma. Tenemos que especificar las columnas de plantilla de cuadrícula, un corchete de columna, un paréntesis y un corchete derecho entre medias. Entonces voy a hacer mostrar contraseña. Si Mostrar contraseña es verdadera. Aquí vamos a tener una flecha F, y luego aquí vamos a tener una FOR, estamos tratando de particionar las columnas y errores. No tenemos que POR UNO PARA cuando guardas y revisas al navegador. Y son estos, puedes ver que todo aparece como se esperaba, perfectamente en buena forma. Así que permítanme tratar de introducir mi correo electrónico. Tecleé mi correo electrónico y luego presiono el botón Comenzar. Por ahora, no pasa nada. Bien, entonces volvamos e implementemos el OnClick para comenzar a votar. La pata, arriba, hasta donde tenemos el botón Comenzar. Así que voy a hacer clic en el botón Comenzar. Vamos a cambiar el estado inicial a verdadero, ¿verdad? Entonces es más como cierto o falso tipo de vibra en este momento. Entonces ahora voy a implementar el onclick en el botón Comenzar. Onclick de este tablero en. Vamos a llamar a la función de configuración para actualizar el conjunto de estados iniciales. Mostrar contraseña. Vamos a establecer el estado inicial, el verdadero. Entonces vamos a actualizar los estados iniciales a true. En este caso, este tipo de aquí. Entonces voy a hacer clic en esto, Comenzar a votar. Cambiamos el estado a true, y luego aparecerá el botón de registro. Es tan sencillo como eso. Entonces ahora tenemos que refrescarnos. Déjame limpiar mi correo electrónico y luego comenzar. ¿Ves cuando presionas el botón Comenzar?, el campo de contraseña aparece en el botón de registro también aparece. Aquí puedes introducir tu contraseña. Entonces amigos, esto es lo que esperamos en esta conferencia. Y además, quiero mostrarte algo que hice detrás de escena del que no eres consciente. ¿Cuándo observas esta página? ¿Puedes ver por dónde empieza de nuevo mi logo de Netflix por aquí? Yo también tengo un poco de espacio por aquí. Tengo algo de espacio por aquí en el medio. Es simplemente porque, derecho, para poner en la cabecera, especificé un relleno de un rem. Entonces, cuando te quites esta parte por aquí y guardes el proyecto, vuelve. Ahora, no tienes ningún espacio entre el logo de Netflix y la parte inferior. Entonces esto no se ve líneas así. Y esa fue la razón por la que coloqué un patrón por aquí para ser wireframe. Ahora puedes ver, se ve preciosa, todo genial. A mí me encanta. Entonces Francia. En la próxima conferencia, comenzaremos a crear la página de inicio de sesión. Esto es todo por ahora. Nos vemos en la próxima conferencia. Mantente enfocado en el cuidado holístico. 77. 75 Iniciar sesión: Bienvenidos de nuevo a todos. En la conferencia anterior, implementamos la página de registro. Y para el espectáculo, esto se ve extremadamente hermoso y me gusta. Por lo que en esta conferencia, seguiremos adelante para crear la página de inicio de sesión. Empecemos rápidamente. No había código VS. Voy a configurar para iniciar sesión peach.genome años, y luego abrir la página de registro. Tenemos que copiar casi todo desde aquí, así, que es el impulso copiar y pegar. Sí. Entonces qué vuelve a hacer, ahora vamos a tener un envoltorio por aquí. Y lo voy a hacer debería empezar desde aquí. Para legibilidad. Envoltura igual punto stout dV. A continuación, especifique la garrapata posterior. Él tiene por lo menos tuvimos un estilo CSS se llevará a cabo. Una vez hecho esto, voy a borrar esto y luego vamos a tener un nodo padre llamado wrapper, que es este tipo de aquí. La línea Nesta es para renderizar los componentes reutilizables de la imagen de fondo. Entonces ahora ¿ves lo útil que puede ser un componente reutilizable? Vamos a renderizarlo por aquí también. Vamos a renderizar el componente de cabecera reutilizable. Pero antes de continuar, vamos a tener un div aquí. Dale un nombre de clase de contenido de inicio de sesión, así. Justo sobre dv. Vamos a renderizar el componente header. Y todos estos duros. Los importamos antes. Simplemente copiamos la entrada de la página de registro cuando guardas. Bien, vamos a comprobarlo en el navegador. Ven aquí. Entonces, cuando golpeas este inicio de sesión, en la parte inferior derecha, estamos en la página de registro. Te va a redirigir a la página de inicio de sesión. Y déjame mostrarte dónde lo implementamos. Ven aquí, tenía un componente scroll a la parte superior e inferior. Entonces aquí especificamos el OnClick. Si el inicio de sesión de prop dot es bastante cierto, te va a llevar a la página de inicio de sesión. Y cuando observes la página de registro, te darás cuenta de que los apoyos aquí están registrados. Es tan sencillo como eso. Entonces ahora cuando pulsamos este botón, nos va a llevar a la página de inicio de sesión, y nos llevará a la página de registro, log n. Y aquí hemos renderizado el componente reutilizable de fondo. Y a continuación se encuentra el componente de encabezado. Que preocuparse, cuando comencemos a estilizar la obligación, todo aquí dentro del contenido se colocará en la parte superior del componente reutilizable de imagen de fondo. Continuemos rápido. Lo siento, justo, después del encabezado. Vamos a tener un div con el nombre de clase de firma. La firma, vamos a tener otro div con un nombre de clase de la herramienta y palabra correcta en el título. Vas a tener una enorme etiqueta por aquí. Y voy a hacer tala lo más simple que eso. Bien, así que justo después del div de cierre del título del nombre de la clase, vamos a tener otro div. Dale un nombre de clase de contenedor, ¿verdad? Para traer el div contenedor, vamos a tener los campos de entrada, tipo de entrada, requerido, textos más cerca tanto de la etiqueta de cierre automático. Aquí voy a hacer marcador de posición equa, correo electrónico. Entonces te darás cuenta de que he estado usando las comillas dobles y las comillas simples. No necesariamente importa. Sí, así que sigamos rápido. Pero lo voy a hacer ahora mismo es duplicar este campo de entrada, resaltarlo y duplicarlo. Entonces voy a cambiar esta de aquí a contraseña, porque esta será utilizada para el campo de contraseña. Aquí voy a hacer contraseña justo después del campo de entrada, vamos a tener una navegación es el botón de inicio de sesión en sí. Bien. Cuando guardas en el navegador, aquí, ¿es así? Entonces ahora mismo tenemos que estilizar los componentes para que se vea bien. Justo aquí, la posición del envoltorio va a ser relativa para que podamos realmente colocar este contenido de inicio de sesión justo encima de la clase de imagen de fondo para que todos estos contenidos de aquí, aparezcan justo encima de la imagen de fondo. Así que sigo explicando estas cosas una y otra vez simplemente porque quiero que se quede en tu memoria. Entonces aquí vamos a estilizar el login contenido. Solo hay que copiar el contenido de inicio de sesión de punto abrir y cerrar el corchete. Ahora la posición va a ser, ¿adivina qué? Absolutos. Entonces desde arriba, vamos a tenerlo cero. Desde la izquierda. Tengámoslo a cero. Entonces estos, en simplicidad, mantendremos todo dentro del contenido justo encima del componente de imagen de fondo. Y aquí está. Puedes ver ahora todo está justo encima del componente de imagen de fondo. Bien, así que vamos a darle una altura de 100 vistas de altura. Y, uh, también tenemos 100 vistas de ancho. Y seguro que los antecedentes van a ser los mismos. Entonces solo tengo que ir a la página de registro y luego desplazarme hasta la parte inferior. Voy a copiar todo aquí mismo. No tenemos que perder el tiempo haciendo estas lonas una y otra vez. Perdón por eso. Solo tengo que hacerlo al principio, pero no me vino a la mente. Guardar en el navegador. Bueno. Bien, habiendo hecho eso, tenemos que estilizar el contenedor firme. Entonces lo que voy a hacer ahora mismo es justo después del componente header, vamos a crear otro div, darle un nombre de clase de forma Dodge wrapper. Entonces todo aquí mismo, copia de los carriles 152, líneas 20. Mantenga presionada la tecla Opción en la Mac y luego presione la tecla de flecha hacia arriba para moverla. Si no te funciona, también puedes. Resalta y luego Control X para cortar, péguelo dentro del div con el nombre de clase de Form Wrapper. Al guardar, ahora tenemos que estilizar el Form Wrapper. Dodds, yo, te muestro a este tipo. Copia más suave. Vamos a tener un flex de display. La dirección de flexión es columna. Alinee los elementos al centro, justifique los contenidos para centrar la brecha. Va a ser para embestir las alturas. Hagámoslo 85, 85 v h. bien, vamos a sacarlo en el navegador. Puede que no lo veas con claridad, pero ahora mismo, este top va tomando forma poco a poco. Bien, así que dialicemos el punto firme. Déjame mostrarte el formulario. Este tipo de aquí. Acabo de copiar y pegar. Bien, vamos a tener un flex de display, flex direction, column, align items center, justify content center. Entonces lo que voy a hacer ahora mismo es copiar todo desde aquí. Voy a copiar de las líneas 44 a 48. Cópialo y pega aquí. Guardar. Vamos a revisar el formulario. Todo parece igual preocupación. Vamos a mejorarlo. Entonces el color de fondo de la forma. Ahora voy a hacer eso están en seis. Ser cero. Vamos a contar 123456 son. Así que déjame guardar y revisar el navegador. Puedes ver aquí es lo que acabamos de hacer ahora mismo. Este tipo de aquí, no sé si lo puedes ver con claridad. Volvamos. Bien. Voy a hacer algo para que aparezca claramente aquí. Yo sólo voy a hacer 0.1. ¿Bien? Verás, esto es exactamente de lo que estamos hablando. Pégala de nuevo a la etapa real. Vamos a dar el formaldehído a 70 v h. Ahora bien, va a aparecer con claridad. El relleno es para correr. El color va a ser blanco para que la prueba dentro de la firma aparezca blanca. Y, um, qué hace otra vez, vamos a darle un radio de borde. Queremos que el borde sea un poco curvilíneo. Entonces voy a hacer punto cero para las lluvias. Eche un vistazo cuando guarde en el navegador. Y aquí está. Ya ves que tenemos lista la firma. La siguiente línea de término es estilizar el campo de entrada y la navegación. Y espero que lo puedan ver claramente ahora mismo. El nido es para estilizar este contenedor. Así que eso es que podemos empacar el contenedor de puntos de campo de entrada. Y por favor siempre asegúrate de que la ortografía de tu nombre de clúster o sea correcta. Bien. Flexión de pantalla. Dirección de flexión, columna, un hueco. Hagámoslo a ellos. Creo que eso es todo por el contenedor. Entonces apuntemos al campo de entrada. Aquí tenemos a las imputas. Te voy a mostrar en un GP scroll a la parte superior. Aquí está el div con el nombre de clase de contenedor. Y justo dentro del contenedor, tenemos los campos de entrada. Entonces vamos a apuntar ahora mismo a los campos de entrada y luego estilizarlos. Dar el radio de borde de punto cero para em padding 0.5 rem. Aquí vamos a tener una habitación. El ancho es de 25 habitaciones. La altura va a ser 3.4. Así que vamos a guardar y sacamos al navegador. La idea es, puedes ver, se ve absolutamente bien. A mí me encantan estos. Absolutamente. Esto se ve bien. Bien. Así que de nuevo, tenemos que despegar el offline. ¿Ves cuando coloco mis necesidades de consola, vas a ver este contorno azul Entonces es bastante fácil hacerlo. Voy a hacer esquema. Hagámoslo nueve. Seguro. Aquí en el navegador. Cuando vuelves a colocar el ratón sobre él, aparece muy bien. Entonces dialicemos el cerrojo y la votación de inicio de sesión. Para el botón. La separación va a ser 0.5. Rem. Vaya, sigo haciendo esto. No entiendo. ¡Fuera! El color de fondo. Puede hacer que se lea así de simple. Frontera. Ninguno. El más grueso es el puntero, el radio del borde punto cero. Tenemos que darle un radio de borde que sea igual que con el campo de entrada. Así que sólo voy a copiar este tipo es de 0.4 m. Bien, vamos a ver. Bueno. Ahora vamos a darle una altura y un punto de ancho. Para él. El color va a ser blanco, que es la fuente, la prueba escrita dentro del cuerpo. Déjame mostrarte a este tipo de aquí. Y lo que vamos a hacer. Tweet divertido. Voy a hacer que sea más audaz el tamaño de fuente. Para que sea 1.05 rem. Creo que eso es todo por ahora. Vamos a guardar y sacamos al navegador. Todo aparece como se esperaba, y a mí me encantan estos. Ahora, cuando observes la esquina superior derecha de la pantalla, te darás cuenta de que en la parte inferior se muestra el inicio de sesión. Entonces, cuando hagas clic en este tipo de aquí, te redirigirá a la página de registro. Oye, ¿lo ves? Y aquí ahora vamos a ver iniciar sesión. Cuando haces clic en el Login, te redirige a la página de inicio de sesión. Y claro, aquí fue donde lo implementamos. Para que puedas repasar las conferencias para entenderla lo suficientemente bien y llevártela a tu memoria. Entonces veamos si hay algo que hacer aquí dentro de los componentes de inicio de sesión o página de inicio de sesión. Por lo que decir, creo que todo está bien, ¿verdad? Entonces esto es todo por ahora. Y en la próxima conferencia, comenzaremos a implementar la autenticación utilizando las abejas de fuego. Y te puedo asegurar que va a ser un placer verte en la próxima conferencia. 78. 76 Iniciar sesión: Bien, así que antes de continuar con el registro y la autenticación de inicio de sesión, hay algo que quiero traer a su aviso. Si observas la pantalla, te darás cuenta de que el formulario no es visible. No es muy visible como se esperaba. ¿Puedes ver? Va a ser muy difícil darse cuenta de que aquí hay algo. Entonces vamos a arreglar esa energía v. Otra observación importante que quiero llevar a su conocimiento es la entrada vista, la altura es demasiado. Sí. Entonces tenemos que encontrar la manera de reducir la altura y luego también hacer que la firma esté un poco más discapacitada que antes. Vuelve al código VS, desplázate hacia abajo. Entonces, para el campo de entrada, es extremadamente fácil hacerlo. Solo tenemos que reducir la altura a 2.4 ram. Puedes ver ahora aparece Beta. Así que vamos a trabajar en el fondo y la firma. Lo que voy a hacer, voy a destacar esto. Déjame mostrarte el contenido de inicio de sesión. Voy a destacar. Entonces antes de proceder, quiero cambiar estos a 0.4. Desplácese hacia abajo dentro del formulario. Sólo tengo que limpiar a este tipo y luego pegar. Entonces voy a cambiar esto a tres cuando guardes y revises el navegador. Y aquí está. Ya ves, ahora se ve un poco más visible que antes. Pero otro tema aquí es que el fondo se está volviendo tan brillante y no, no lo queremos así. Así que vamos a tratar los antecedentes aquí. Hagámoslo 0.6 y veamos cuál es el resultado. Bueno. Pasemos a la siguiente conferencia donde comenzaremos a implementar la autenticación de inicio de sesión. Nos vemos entonces. 79. 77 Instalación de Firebase: Bienvenidos de nuevo a todos. Muy bien, entonces en esta conferencia, vamos a vincular nuestro proyecto con Firebase. Entonces para proceder, primero, tenemos que instalar Firebase justo en nuestro proyecto. Así que navega hasta VS Code, derecho, vistiendo la terminal. Asegúrese de C, D clientes. Y luego NPM instala Firebase. Pulsa la tecla Enter para que se encienda. Instalado. Exitoso. Así que vamos a abrir el archivo package.json. Y aquí está. Aquí. Ahora hemos instalado Firebase con éxito. Así que rápidamente dirígete a Firebase console y vamos a crear una nueva aplicación. Firebase. Entonces puedes ir a firebase.google.com y luego hacer clic en el botón Comenzar. Agreguemos un nuevo proyecto. Entonces voy a llamarlo proyectos netflix y luego continuar. Otra vez. Continuando. Aquí, la vamos a dejar como cuenta predeterminada para Firebase. Déjame mostrarte clic aquí, vas a ver crear una nueva cuenta y luego seleccionar la cuenta predeterminada para Firebase. Después crear un nuevo proyecto hecho. Y ahora hemos creado un nuevo proyecto. Tenemos que continuar. Y por aquí, vamos a seleccionar el componente basado en web. Sí, así que vamos a seleccionar a este tipo de aquí. Vamos a crear un componente basado en la web. Y ahora aquí vamos a darle un nombre a la aplicación. Aplicación Netflix. Puedes decidir configurar Firebase Hosting para este proyecto. Pero no te preocupes, a lo mejor vamos a hacer eso más tarde. Ahora, haga clic en Registrar. Una vez hecho eso, se generará este código de aquí. Ahora, vuelve al código VS, correcto, para traer el SRC, solo tienes que abrirlo. Y luego labra, haga clic derecho en utils, cree un nuevo archivo. Y lo voy a llamar Firebase dash. Config dot g es venir aquí. Sólo tenemos que seleccionar así. Por favor. Puedes ver lo que he seleccionado aquí. Entonces. Haga clic con el botón derecho. Copia. Pégalo aquí así. Sí, así que habiendo hecho esto, vamos a limpiar el código. Seleccione entre líneas para dos líneas para borrarlo. Y además, no necesitamos el Firebase Analytics por ahora. Sólo tenemos que borrarlo. Limpie esto también, límpielo. Entonces, habiendo hecho esto, siguiente en la fila es importar se baja de cuentas de fuego. Así que desplázate hasta la parte superior. Y voy a hacer importaciones. Baje de la barra de firebase de estadísticas más simples. Y por último, justo abajo, tenemos que exportar este módulo. Voy a hacer un spot const, Firebase de equa. Baje. Entonces vamos a pasar en la app aquí mismo. Es tan sencillo como eso. Entonces con esto, hemos vinculado exitosamente el proyecto con Firebase. Tan rápido, déjame guiarte por la consola de Firebase para familiarizarte con ella. Así que fíjate que copiamos este resumen por aquí. Sí. Entonces lo siguiente en la fila es seguir consolando. En la esquina inferior izquierda de la pantalla, van a ver este botón por aquí continuando a la consola, derecha, estamos en la consola. Hay que abrir el Butte y luego la autenticación. Haz clic en Comenzar. Así que haga clic en la contraseña de barra diagonal de correo electrónico. Entonces tenemos que habilitar aquí y luego Guardar. Bien, entonces vas a ver este verde por aquí. Y luego lo que es otra vez, proceda a Usarnos. Aquí exactamente es donde se almacenará todo el usuario, ¿bien? Cuando un usuario inicia sesión en nuestra obligación, sus credenciales se almacenarán aquí, lo que implica la contraseña y el correo electrónico. Eso es lo más simple. Bien, así que esto es todo por ahora. Y en la próxima conferencia, comenzaremos a implementar la página de inscripción. Y entonces el usuario podrá inscribirse en nuestro proyecto y comenzar a iniciar sesión. Es tan sencillo como eso. 80. 78 CreateUsers: Bienvenidos de nuevo a todos. Bien, así que procedamos con la página de registro. Vs Código. Página de inicio de sesión punto j es nuestro derecho es final. Así que justo en la parte superior. Lo primero que vamos a hacer es importar la configuración del tablero de Firebase, que es el módulo que creamos en la conferencia anterior. Déjame mostrarte rápidamente a este tipo de aquí. Bien, así que ven aquí y hagámoslo aquí. Vamos a importar Firebase fuera de los pies de Firebase DashCon slash de UT. Así que este tipo de aquí, déjame mostrarte a este tipo. Son, entiendes todas estas cosas. No he hecho esto. Vamos a importar algunas de las cosas que vamos a usar. Entonces manera de hacerlo, tenemos que seguir las mejores prácticas. Déjame hacer algo. Voy a destacar de las líneas dos a tres. Se lo quitó, ven aquí y pega. Entonces estas van a ser las entradas que creamos, pero estas son las de arriba serán las entradas de las bibliotecas externas. Así que aquí voy a hacer importaciones, crear usuarios con correo electrónico y contraseña desde Firebase, salir a correr también. Tenemos que importar cambio on-off. Exactamente así. Vamos a crear rápidamente el manejador para el registro. Oye, voy a hacer const, manejar, iniciar sesión, equa, configurarlo a nuestra función. Entonces aquí vamos a tener un asincrónico. Bueno. Así que justo dentro, vamos a envolverlo en un bloque try catch. Aquí. Voy a hacer const email, password. Y voy a fijarlo a partir de valores. Entonces, antes de continuar, creemos rápidamente las variables de estado necesarias para ser utilizadas. Entonces voy a hacer la narrativa. Utilizan un fragmento de datos a partir del valor, establecen los valores del teléfono. Bien, aquí va a estar en el set de Copa a partir de los valores. El estado inicial va a ser un objeto. Y justo dentro de los objetos, voy a hacer correo electrónico. El correo electrónico. Vamos a ponerla en una cadena vacía. Sí, entonces el estado inicial del campo de correo electrónico estará vacío. Sí, entonces el campo de contraseña, el estado inicial también, va a ser una cadena vacía, lo que la hace vacía. ¿Bien? Entonces, habiendo hecho esto, continuemos con los valores de forma por aquí. Aquí vamos a nuestro ancho ya que este es un asincrónico, así que va a devolver una promesa. Entonces tenemos que esperar aquí. Vamos a llamar al usuario create con el método de correo electrónico y contraseña. Nosotros lo importamos. Déjame mostrarte en la parte superior desde firebase off. Entonces justo dentro de este método, vamos a tomar en la Firebase de correo electrónico coma, contraseña más tranquila, tan simple como eso. Y aquí vamos a coger el error necesario. Entonces cuando captamos el error, tenemos que registrarlo en consola. Voy a hacer console.log. Este tipo de aquí, que es el error. Si hay algún error o cos, vamos a registrarlo en la consola. Sí, entonces lo que es ahora que tenemos que implementar todos estos duros, bien, dentro del campo de la imput. Entonces este es el campo de contraseña. El valor de los valores puntos, contraseña. Entonces esto va a agarrar cualquier contraseña que el usuario impuso, los derechos estaban en el campo. Así que sin cambios. Entonces esto significa cuando el usuario comienza a escribir en el campo de entrada. Entonces esto nos dará acceso al evento y luego lo configurará en nuestra función. Cuando el usuario comience a escribir en el campo de entrada, tenemos que actualizar la firma. Ahora voy a hacer set a partir de valores. Entonces tenemos que difundir diferentes valores. Una vez hecho eso, vamos a hacer E punto, objetivo, nombre de punto. Entonces, por último, vamos a hacer un punto para apuntar a ese valor. Tenemos que copiar todo desde el valor así. Copia de las líneas 42, 43 entran dentro del correo electrónico. Entonces dentro del campo de correo electrónico, vamos a pegar. Pero ahora tenemos que cambiar el valor firme a correo electrónico. Lo más sencillo que habiendo hecho esto. Tenemos que llamar a la función de inicio de sesión humilde cuando se hace clic en el botón de registro. Entonces aquí vamos a especificar el onclick, onclick de este empernado. Voy a hacer firmar con las manos. Ahora puedes ver que la función está registrada. El color de la fuente se vuelve tan nítido, antiguo. Pero cuando vengas aquí, por ejemplo, eliminemos. La fastidia. ¿Ves? Bien, todo genial. Guarde la aplicación y vamos a probarla. Vamos a hacer npm empieza a parar el proyecto. Entonces preferiré arrastrar la Firebase aquí abajo para que la aplicación esté aquí. Bien, así que naveguemos hasta la página de inicio de sesión. Mi correo va a ser un enorme mistake@gmail.com. Haga clic en Comenzar. La contraseña. Voy a hacer 123, ABC. Vamos a inscribirnos. Vamos a sacarlo. Si realmente tenemos registrarnos. Tenemos que refrescar la consola aquí para ver. Chicos, todo funciona como se esperaba. ¿Puedes ver ahora es este tech@gmail.com? Todo genial. Bien, entonces la siguiente línea es redirigir al usuario a la página de inicio cuando el usuario inicia sesión y sale. Entonces después de iniciar sesión, cuando las credenciales son correctas, cuando presionas el botón de registro, la aplicación debería poder redirigirte a la página principal, que es la página de Netflix. Regresa a VS Code y por aquí, la caga. Entonces, justo en la parte superior, vamos a importar ¿qué es esto? A deslízalo. Guardar. Ahora volvamos a comprobarlo otra vez. Quiero que seamos exactos aquí. Supongamos que Mike agrega agrega gmail.com, empieza. Contraseña, uno-dos-tres, ABC. No te inscribes. Vuelve a la consola, actualiza. Bueno. Sigue funcionando como se esperaba. Entonces esa entrada de aquí es innecesaria. Sí, así que ahora tenemos que importar, usar, navegar desde React, enrutador doom. Y después de eso, vamos a hacer navegaciones const. El CWA, usa navega. Por supuesto, es una función. Sí. Y habiendo hecho esto, ahora, baja aquí y vamos a configurar la autenticación. Voy a hacer cambio de estado fuera. Déjame mostrarte a este tipo que importamos de firebase off. De hecho, estamos realizando la autenticación por aquí. On off estado cambiado. Vamos a hacer coma Firebase, y luego vamos a pasar en usuario actual. Por lo que esto ayudará a verificar el usuario actual que ha iniciado sesión. Entonces, cuando el usuario actual inicie sesión, redirigirá al usuario a la página principal, que es la página de Netflix. ¿Cuál es exactamente la intención? ¿Aquí? Vamos a ponerle un cheque a eso. Entonces voy a hacer si usuario actual, así que si hay un nuevo registro, sí. Vamos a navegar a la página principal. No te preocupes, voy a explicar eso en un GeV. Utilice Navegar. Navegar. Chicos, cambiemos estos para navegar. Estos suenan mejor. Navegar. Entonces aquí vamos a hacer navega tras clave en tu correo electrónico y contraseña. Entonces aquí vamos a comprobar si el usuario actual, si eres el usuario actual que te registras directamente desde esta página, serás redirigido a la página principal. Y preocúpate, vamos a hacer eso en el Jiffy para que lo veas. Entonces, cuando especificamos este choque por aquí, significa que serás redirigido a la página principal. ¿Puedes ver slash? Significa que vas a ser la página de Netflix. Por aquí dice, identificar a nuestro usuario navega ya ha sido declarado. Veamos qué pasa por aquí. Navega igual, usa, navega, chicos, miren, hemos estropeado algo aquí arriba. Tenemos que borrar esto. Y lo siento por eso. Se usa escritura de puerto seguro. Se define pero no se utiliza. ¿Por qué se utiliza? Probablemente no en esta página que se encuentra en la página de inicio de sesión. Sí, no te preocupes por eso por ahora. Guardar en el navegador. Puedes ver ahora que hemos sido redirigidos a la página de Netflix. Bien, déjame mostrarte rápidamente para que puedas entenderlo lo suficientemente bien. Vuelve a la consola. Voy a eliminar todos estos usuarios borrar cuentas. Y aquí tenemos que eliminar también la conferencia de cuenta para refrescar. Y ves que aquí no hay nada. Por ahora. Vuelve a la app. Refrescar. Ahora tenemos que navegar a la página de registro. Ahora echa un vistazo. Cuando me inscribí con un nuevo correo electrónico, me va a redirigir a la página de Netflix. Voy a hacer aquí. John@gmail.com. Empezar. Voy a hacer 123ab C y luego me inscribiré. Ahora nos han redirigido a la página de Netflix. Y esa es exactamente la intención. Sí. ¿Puedes ver bien, así que terminamos con la página de registro En la siguiente conferencia, vamos a realizar la autenticación con la página de inicio de sesión. 81. 79 Autenticación de inicio de sesión: Bienvenidos de nuevo a todos. Entonces, en la conferencia anterior, implementamos la página de registro. Por lo que los usuarios son capaces de crear una cuenta y serán redirigidos a la página de Netflix, que es el estándar. Ahora vamos a proceder con la autenticación de inicio de sesión. Entonces, supongamos que use nuestro registro la aplicación y luego cierre la sesión. Entonces, cuando cierras la sesión, no tienes que registrarte desde cero. Todo lo que tienes que hacer es iniciar sesión en la aplicación usando tus credenciales, que en realidad has creado previamente. Ahora, antes de continuar con la página de inicio de sesión, vamos a hacer algunas cosas de configuración que no tomarán tiempo. Vuelve al navegador y luego vuelve a la consola de Firebase. Queremos eliminar al usuario así. Eliminemos esta cuenta. Entonces cualquier cuenta que tenga aquí mismo, elimine toda la cuenta. Vamos a crearlo desde cero. Vuelve al código, ve a la página de registro, y luego vamos a hacer un comentario sobre esto. Por lo que no queremos que redirija a la página de Netflix cuando usen nuestro registro por ahora. Bien, sólo por ahora. Esto es solo por ejemplo sake. Un comentario sobre el uso navegar. También puedes presionar un comentario aquí si lo deseas. Bueno. No he hecho esto. Vamos a continuar con la página de inicio de sesión, ¿verdad? Estamos en la página de inicio de sesión. Vamos a importar vamos a copiar la entrada de la página de registro. No quiero que perdamos el tiempo aquí. Resaltar y copiar. Página de inicio de sesión y pegar. Ahora, no necesitamos usuario decretado con correo electrónico y contraseña. Anteriormente, creamos los usuarios y ya no los necesitamos aquí. Entonces, lo que necesitamos en este momento es iniciar sesión con correo electrónico y contraseña y confuso y todas estas cosas más una coma aquí mismo. Y se importará de la auth de Firebase. Y por supuesto, creamos este módulo previamente. Habiendo hecho esto, también, tenemos que importar el usuario navega copia de aquí y pegarlo aquí del comentario. Bien, así que también tenemos que importar el jugo que engancha en la parte superior. Entonces, para hacerlo de una manera más profesional, lo que voy a hacer ahora mismo es separar el insumo, resaltar esto, cortarlo, venir aquí y pegar. Entonces esta es la entrada que hicimos a las bibliotecas externas, y estas son las entradas que hicimos a nuestros propios archivos que creamos. Esto tiene al menos cómo construir una aplicación como un profesional. Y por favor toma nota de esto definitivamente te ayudará en el futuro cuando te contraten. Entonces ahora lo que hay que hacer a continuación es crear las variables de estado necesarias para ser utilizadas. Aquí voy a generar el uso que snippets en su lugar. Entonces voy a hacer email set email. Esto debería ser en la carpa. Entonces el estado inicial de estos va a ser una cadena vacía aquí también. Vamos a hacer el fragmento de uso. Y esta será contraseña, lo siento, como esta contraseña establecida, esto va a estar en CUP. Y además, el estado inicial va a ser una cadena vacía, que es el campo de inicio de sesión, ¿ verdad? Déjame mostrarte. Ven aquí, barra de inicio de sesión. Bien, así que aquí está el campo de correo electrónico y aquí está el campo de contraseña. Entonces el estado inicial será un campo vacío como este hasta que el usuario comience a imputar sus propias credenciales. Vuelve al código, y comencemos. ¿Verdad? No sería el campo de entrada dar una conferencia para formatear el código. Ahora bien, así que ahora el código aparece muy bien. Vamos a implementar el onchange. Entonces, cuando el usuario empiece a escribir en el campo de entrada, vamos a tener acceso a los eventos. ¿Bien? Y luego primero, llamemos a la función de configuración para actualizar el correo electrónico. Establecer correo electrónico. Entonces vamos a establecerlo en e punto, lo que sea que el usuario esté escribiendo, que es e punto, apunta a ese valor. Y te enseñé todas estas cosas. Entonces, cuando en realidad estábamos practicando básico de reacciona uno a uno. Entonces aquí voy a hacer el valor va a ser correo electrónico, copiar, no me gusta esta copia, resaltar y copiar. Ven al campo de contraseña y pega aquí. Formatea el código con más bonito. Solo tienes que mantener presionadas las teclas Mayús y Opción en tu teclado y luego tocar F en tu teclado para formatear con más bonito. O también puedes hacer algo como esto, haz clic con el botón derecho en Formatear documento con un código más bonito para el lema. Bien, entonces aquí lo vamos a cambiar para establecer contraseña. Aquí sin cambios. El valor va a ser el valor de contraseña es tan sencillo como eso. Bien, así que habiendo hecho esto, hagamos rápidamente la autenticación. Desplázate hasta la parte superior. Bien, hey, vamos a hacer const, manejar, bloquear, equa, ponerla en nuestra función. Vamos a tener un fregadero y seguro que va a devolver una promesa. Entonces tenemos que esperar. El problema está aquí así. Y voy a hacer inicio de sesión con correo electrónico y contraseña. Justo encima en esta función, vamos a pasar en Firebase de karma, correo electrónico y contraseña. Y todos estos estarían envueltos en un bloque try catch. Así que resalta y córtala. Entonces vamos a generar un bloque try catch. Así que justo dentro del bloque try, vamos a pegar y justo aquí en la captura. Entonces, si hay algún error o costo, tenemos que coger el error y luego registrarlo en la consola. Más sencillo que habiendo hecho esto, por último, tenemos que realizar la autenticación para verificar el usuario actual. Y luego si las credenciales son correctas, tenemos que redirigirlas a la página de Netflix. Y claro que lo hicimos en la conferencia anterior. Ir a la página de registro. Ven aquí. Copia a este tipo, resalta y copia. Fuera de esta función. Por favor, no haga esto dentro de esta función. Salir de la función y pegar. Ahora tenemos que eliminar el comentario, el formato, el código, la opción Shift F para formatear el código. Y entonces ahora tenemos que llamar a esta función justo dentro de la proteína. Cuando se hace clic en el botón Iniciar sesión, tenemos que llamar a la función de inicio de sesión handle save. Dice Navegar no está definido. ¿Bien? Es simplemente porque no lo inicializamos. Recordemos que lo importamos aquí en la parte superior. Ahora aquí tenemos que inicializarlo. Y claro que lo hicimos en la conferencia anterior. Y tengo que copiar. Pega, resalta, quita el comentario, guarda la aplicación, y ahora todo está funcionando perfectamente bien. El código está libre de errores. Pero una cosa más que dijiste es la entrada por aquí. Es una importación innecesaria. Puede que no tengas esa importación al final. Tan desatendido. Guardar, volver al navegador. Y ahora vamos a iniciar sesión porque primero tienes que crear una cuenta antes de iniciar sesión. Sí. Entonces aquí voy a hacer slash sign up. Derecha. Para traer la página de registro. Voy a hacer angela@gmail.com. Empezar. Y luego aparece el campo de contraseña y vamos a hacer 123ab c. ahora regístrate. Al hacer clic en el botón Regístrate, por ahora, no serás redirigido a la página de Netflix simplemente porque hemos eliminado esa funcionalidad. Ahora, veamos si tenemos registro con éxito actualizar. Ahora hemos creado la cuenta para Angela y no hemos creado esta cuenta. Tenemos que volver a la página de inicio de sesión barra de la página de inicio de sesión. Puedes ver cuando vuelvas a la página de inicio de sesión, te va a redirigir a la página de Netflix. ¿Sabes por qué? Déjame explicarte rápidamente qué pasa bajo el capó. Volver al código VS. Entonces cuando entre en la página de inicio de sesión por aquí, va a decir, Oye, he encontrado un usuario actualmente registrado. Tan rápido, redirige al usuario registrado a la página de Netflix. Sí, así que eso es exactamente lo que hace este tipo de aquí. Y esa es la razón por la que ves que abre la página de inicio de sesión y luego redirige rápidamente. Haz la página de Netflix. Déjame mostrarte rápidamente cómo obtener los resultados que estamos esperando. Vuelve al navegador y luego abre la consola. Entonces bien, cuando la consola haga clic en este icono de carpeta por aquí, vaya a la aplicación, ¿no? Entonces tenemos que ir a Almacenamiento, clic en almacenamiento, y luego abrir el índice DB. Oye, ¿es así? Entonces tenemos que hacer clic en esto, eliminar, seleccionar de nuevo y eliminar. Entonces ahora cuando intentemos de nuevo ir a la página de inicio de sesión y hueso, ¿ puedes ver ahora? Entonces ahora intentemos ver si podemos usar esta cuenta para iniciar sesión en la página de Netflix. Recuerda, aquí tenemos a Ángela. Puedes crear cualquier cuenta de tu elección. Así que límpiala, pega a Angela. Y aquí la contraseña es 123ab C. Haz clic en Entrar para ver qué pasa. Puedes ver ahora todo está funcionando perfectamente bien como se esperaba. ¿No es esto hermoso? Es extremadamente hermoso y me gusta. En la próxima conferencia, vamos a intentar en la medida de lo posible implementar la funcionalidad de cierre de sesión. Volver al código, id de registro punto js. Estos, tenemos que eliminar los comentarios para que todo empiece a funcionar perfectamente bien como se esperaba. ¿Todo está bien? ¿Seguro? Página de inicio de sesión. Kay. Bueno. Esto es todo por ahora. Nos vemos en la próxima conferencia. Nos enfocaremos en el cuidado holístico. 82. 80 OnScrollEvent: Bienvenidos de nuevo a todos. Bien, entonces en la conferencia anterior, implementamos la autenticación y creo que está funcionando perfectamente bien a tu final. Sí, entonces en esta conferencia, vamos a implementar el top nav. Entonces es cuando un usuario hace clic en el enlace, el usuario será redirigido al componente correspondiente. Bien, entonces no tenemos que hacer algo manualmente como disgusto, regístrate. Puedes ver para que ya no tengamos que hacer algo como esto. Sí, vamos a implementar rápidamente el comando top now VS Code B para abrir el Explorer y escribible en el Explorer, tenemos que abrir el siguiente punto de flujo js, cerrar el Explorer nuevamente. Y luego voy a borrar este Netflix por aquí y darle este div un nombre de clase de aquí, ¿verdad? Cuando el héroe, vamos a mostrar la imagen del héroe, IMG SRC igual, copiar y pegar el enlace héroe, que es para que los derechos de imagen estaban en los materiales. No te preocupes, te voy a mostrar en un GeV aquí, ¿verdad? Sí, está justo dentro de los materiales de Netflix. Y luego puedes abrir el ayudante de código y copiarlo desde aquí. Lo vamos a hacer aquí, la imagen está bien, no es problema. Entonces, haber hecho esto aquí es el resultado. Bueno. Entonces ahora lo siguiente en línea es implementar los eventos on scroll. Déjame mostrarte por ejemplo voy a resaltar esta imagen, duplicarla tanto como puedas, guardar el navegador. Entonces ven ahora puedo desplazarme de arriba a abajo. Pero lo real que queremos hacer es obtener el resultado, en scroll, por ejemplo, supongamos la aplicación en el eje y. Entonces, en el eje y, el evento scroll es igual a cero, pero cuando te desplazas hacia la parte superior, los eventos de desplazamiento automático serán mayores que cero. Así que vamos a condicionarlo de una manera que si poseen eventos scroll de desplazamiento de página sea cero. Queremos que el estado inicial sea falso. De lo contrario queremos que el estado inicial sea cierto. Entonces, cuando la aplicación está así en la página Y offset, pitch-wise, offset va a ser igual a cero. Y entonces si es igual a cero, lo vamos a poner en falso. Pero cuando te desplazas a la página superior, desplazamiento Y va a ser mayor que cero. Y si es mayor que cero, vamos a establecer el estado inicial en true. Vamos a implementarlo para que lo entiendas lo suficientemente bien. Vuelve aquí. ¿Vamos a hacerlo bien? Estamos en el componente. Entonces ahora tenemos que implementar el evento on scroll y voy a hacer puntos de ventana en scroll. Una vez hecho esto, también tenemos que declarar las variables de estado necesarias para ser utilizadas. Tan rápido, vamos a generar los fragmentos de usted. Entonces voy a hacer es atornillado. Se va a establecer, se atornilló en mayúscula I. Entonces el estado inicial va a ser falso porque esto será igual a cero. Entonces, cuando el usuario abra la aplicación, el estado inicial del scroll va a ser falso porque no hemos atornillado a la parte superior ni a la inferior. Pero cuando comencemos a desplazarnos, va a ser mayor que cero. Y eso es lo que lo pondremos en verdad. Entonces, qué vamos a hacer ahora, bien, bien. Aquí tenemos que actualizar el conjunto estatal inicial es multitud. Vamos a establecer atornillado a Ventana punto Y compensaciones. Entonces, si los desplazamientos p-y de punto de ventana son iguales a cero, el estado inicial va a ser falso. Y flechas, el estado inicial va a ser cierto. Y lo que es ahora vamos a regresar cuando los puntos y el desplazamiento. Ahora, lo que voy a hacer ahora mismo es que el registro de la consola se desplace para poder mostrarte lo que es. Console.log es crudo. Guardar dicho usado, no está definido. Tenemos que importarlo en la parte superior. Use volvió a guardar, todo funciona perfectamente bien y en el navegador, bien, extraño Comando I para abrir la consola. Aquí en la consola. Y asegúrate de que puedas. Ahora ve que la aplicación en el desplazamiento de tono es igual a cero. Entonces en el navegador, vas a ver false. Entonces, cuando me desplace hacia arriba, la aplicación en compensaciones de tono va a ser mayor que cero. Entonces, por lo tanto, el estado inicial en los desplazamientos de tono se establecerá en true. A ver. ¿Puedes ver cuando te desplazas hacia arriba, vuelve true Arriba, de nuevo, la aplicación es verdadera, pero muchos anotan tres puntos donde la aplicación en offset pitch-wise se convierte en cero, va a devolver false. ¿Ves ahora que es falso? Desplázate de nuevo hacia abajo, se vuelve verdad. El top, llega a cero y se vuelve falso. Entonces básicamente lo que estamos haciendo es verdad, falso, verdadero, falso. ¿Verdad? Hermoso. Entonces esta es exactamente la intención en esta conferencia. En la próxima conferencia, implementaremos el top nav. 83. 81 Componente de TopNav: Bien, entonces en la conferencia anterior, implementamos los eventos on scroll. Pudimos actualizar el estado inicial de falso a verdadero, falso a verdadero. Y sé que algunos de ustedes son curiosos. Quieres saber por qué hicimos eso. No te preocupes. Al final de esta conferencia, definitivamente la entenderás lo suficientemente bien. De frente a VS Code y menos rápidamente implementar los derechos Top Nav estaban en los Componentes. Crea un nuevo archivo llamado boca superior. Los puntos son un FCE para generar el componente funcional. Así que vamos a importar rápidamente las cosas necesarias para ser usadas. Primero, vamos a usar el icono de React. Entonces voy a hacer npm instalar iconos de tablero React. Mientras la instalación está en curso. Vamos a importar de aquí, importaciones esquema cerrar sesión de React dash icons, slash. Tenemos la superficie con IA. Y por cierto, el icono de React se instaló con éxito. Si no lo tienes instalado a tu final, solo tienes que hacerlo ahora mismo. Lo siguiente es que tenemos que importar el stout del componente stout. Como las entradas enlazan varias letras mayúsculas L de la ruta del tablero del reactor están haciendo. Bien. Ahora estamos bien para ir justo por aquí. Vamos a almacenar los derechos de navegación están dentro de una matriz. Entonces voy a hacer const, nav link, igual, configurarlo en una matriz vacía. Y justo durante la matriz, vamos a tomar en un objeto. Bien, estamos en el objeto. Vamos a darle un nombre para que sea homepage más tranquilo. Vamos a vincularlo para cortar así. Déjame mostrarte. Recuerda que implementamos las rutas en la conferencia anterior. Toda esta ruta aquí mismo. Así que vamos a hacer esto para la página principal, registro del reproductor de TV y tan duro, ¿verdad? Hablé demasiado. Perdón por eso. Los resaltados lo duplican tres veces y por favor asegúrese de colocar una coma aquí mismo para separarlo. Una vez hecho eso, cambiemos estos a programa de televisión y tenemos que ir a la ruta. Dash TV. Él va a ser mi lista. Tenemos que golpear la ruta, mi lista, hemos creado todas estas rutas. Por último, vamos a hacer películas de corte de películas. Tan simple como eso. Una vez hecho esto, vamos a mapear a través de esta matriz y tener todas estas pestañas mostradas en la parte superior derecha de la pantalla. Entonces para hacer eso, y vamos a trabajar en la UE. Ahora vamos a tener suficientes buques portacontenedores. Bien. Aquí. Voy a hacer const, love container, un stout dot div. Entonces ellos pueden los backticks para que podamos estilizarlo dentro. Este tipo. Aquí. Es esto. Bien, bien. Ahora vamos a tener un div con el nombre de clase del lado izquierdo. Porque vamos a tener el lado izquierdo del Top Nav y el lado derecho. Entonces fuera de este div, vamos a tener otro div. Dale un nombre de clase del lado derecho. Bien, vamos a trabajar en el lado izquierdo. ¿Correcto? Dentro del lado izquierdo, vamos a tener el logo. Entonces vamos a tener un div con el nombre de la clase de logo. Después el logo, tenemos que mostrarlo con la etiqueta IMG, SRC igual. Voy a pegar el enlace del logo por aquí, además de arriba con la etiqueta de cierre automático. Y este enlace, puedes copiar y pegar desde el directorio de materiales. ¿Aquí está? Sí, las probabilidades equivalen a logo más simple eso. ¿Qué hace otra vez? Bien, ahora tenemos que mapear a través de estos artículos, ¿verdad? Entonces este es el div con el nombre de clase de logo, justo afuera del div con el nombre de clase de Logo. Vamos a tener una lista ordenada. Entonces vamos a tener la UL como nombre de clase de enlaces, justo dentro. Vamos a mapear las cosas aquí mismo. Voy a hacer enlace de navegación. Bien, creo que deberíamos convertirla en una palabra plural porque es buena. Nombra su matriz con una carretera plural porque es una colección de detalles con un tipo de datos similar. Entonces tenemos datos no solo datos. Entiendo que no estamos en clase de inglés aquí mismo, pero es bueno ser gramaticalmente salir cuando estás haciendo cosas. Bien, enlaces de navegación, mapa de puntos, otro paréntesis, y luego vamos a tomar entre corchetes, justo dentro de las llaves, vamos a desbaratar tu nombre. Coma n ln, o mostrando un Jiffy. Desplázate hasta la parte superior, este nombre por aquí. Y enlace. Después habiendo hecho estos, configurarlo a función de error, abrir y cerrar el corchete y derecho a poner entre llaves, vamos a devolver la UI. Entonces aquí vamos a tener una etiqueta LI. Y le puse una llave. La clave va a ser nombrada. Entonces justo dentro de la etiqueta LI, o vamos a tener los enlaces, ¿verdad? Entonces aquí tenemos que mostrar el nombre de los enlaces. Cuando guardes, déjame mostrarte conferencia de estadísticas MPM en el directorio del cliente. Y antes de que lo empecemos, ve a Netflix. La jode aquí. Veamos si podemos renderizar la perilla superior por aquí. Y por favor asegúrate de importarlo en la parte superior. Salvemos el proyecto. Ven aquí, cetona, la tecla Enter para conseguir que encienda demasiado nuestra plática realmente. No se muestra nada en la pantalla. ¿Por qué? ¿Correcto? Veamos qué pasa. Top nav. Este es link. Entonces desestructuramos nombre y enlace. Entonces, ¿por qué no funciona? Bien, hagamos algo enlace igual. Entonces tenemos que vincularlo para especificar el enlace así, seguro en el navegador. Vamos a refrescar lo que es otra vez, déjame ver qué pasa aquí. Bien, así que vamos a ver el tema aquí. Dice error de tipo, componentes de subrayado de estilo, guión bajo, guión bajo estaban estacionando para ese módulo. Predeterminado. Div no es una función. Chicos. Echa un vistazo. En efecto, se trata de un error tipográfico. Esto debería ser dots div, cuando guardas y revisas al navegador, los IDs, todo está funcionando perfectamente bien. Ahora, puedes ver aquí están los enlaces. Cuando haces clic en el programa de televisión, te lleva a la página del programa de televisión. Regresa. Mi lista. Películas. Todo está funcionando perfectamente bien como aspartato. Entonces ahora tenemos que estilizar el componente tan rápido. Trabajemos en el lado derecho, def. Y nuevamente, aquí hay otro tipo de error gráfico. No lo sé. Entonces aquí está, tarde en la noche. Así que por favor sólo tiene que perdonarme, sólo para esta conferencia. Voy a hacer bandera D. Esto está bien. Todos cometemos errores. Y tal vez es sólo un error tipográfico y no algo para ser. Derecha. Ahora. ¿Vamos a tener derecho a votar? Estamos en este div con el nombre de clase de abordaje del lado derecho. Y luego a la derecha, estamos en este barco en vamos a renderizar el cierre de sesión fuera de línea. Ciérrela con la etiqueta de cierre automático. Guardar en el navegador. Aquí está, puedes ver aquí está el cierre de sesión. Entonces, en la próxima conferencia, vamos a implementar esta proteína. Pero por ahora, tenemos que mantener la UI reclamada estilizando la empresa. Bien, dialicemos el componente en la próxima conferencia. 84. 82 Global css: Bien, entonces antes de proceder a estilizar este componente, hagamos rápidamente algunos ajustes necesarios, ¿verdad? Estamos en el índice punto CSS. Así que solo puedes hacer Comando V o Control P para hacer aparecer el cuadro de búsqueda en la parte superior y luego buscar CSS de punto índice, así como esto. Y por aquí vamos a aplicar algunos CSS globales. Primero, vamos a cambiar el fondo. Voy a hacer aquí color de fondo. Hagámoslo negro, así como esto. Habiendo hecho esto aquí, vamos a hacer margen cero, error de paddings. El tamaño de la caja va a ser border-box. Entonces aquí vamos a hacer desbordamiento. Desbordamiento en eje x. Vamos a ocultarlo. Y lo estoy haciendo, déjame ver. Bueno. Ahora el fondo es negro y no puedes desplazarte hacia la derecha. Puede que no lo note, pero puedo asegurarle que se desbordan obras ocultas perfectamente bien. Esta es la configuración necesaria que tenemos que hacer a nivel global. 85. 83 Componente de TopNav: Bienvenidos de nuevo a todos. Así que vamos a estilizar rápidamente los componentes de la parte superior izquierda. Volver al código VS. Ahora, antes de continuar, tenemos que volver a la página de Netflix. Y por aquí implementamos el punto de ventana en el oyente scroll. Sí, así que lo que vamos a hacer ahora mismo es pasarlo como sondas hacia el navegador superior. Por lo que es bastante fácil hacer eso. Entonces aquí voy a hacer es crecer. Equa, está atornillado. Ahora se está pasando como apoyos hacia abajo en la parte superior. Ahora lo siguiente en la fila es recibirlo, ¿no? Estamos en el componente de navegación superior. Y para ello, sólo tenemos que desestructurarlo por aquí. Se desplazó. Eso es lo más simple. Sí. Entonces, habiendo hecho eso ahora mismo, se podría obtener la información de aquí, ¿verdad? Ahora estamos en la cima. Vamos a conseguir si el estado es verdadero, falso, verdadero o falso. Bien, anida aquí. Voy a hacer nav, darle a esto otro nombre de clase, y esto va a ser dinámicamente no. Entonces vamos a tener los dientes de dólar. Y sabes que viene de aquí, ¿verdad? Bueno. Entonces si me jodo esta cita verdadera, vamos a tener dinámicamente una clase llamada atornillado. Ahora, vamos a tener que no atornillar, así como esto. En realidad la idea es que podamos estilizar la parte superior. Ahora, no te preocupes, vas a entenderlo lo suficientemente bien cuando termine con ello. Sí. Entonces, a continuación, voy a copiar todo así. ¿Se puede ver de las líneas 20 a 43? Muévelo dentro del nav. Este tipo de aquí. ¿Puedes ver? Bien, bien, así que ahora sin más preámbulos, comencemos a estilizar la aplicación. Ahora. Vamos a estilizar no tornillo, puntos, no pergaminos. Vamos a tenerlo display flex. Puntos, pergamino. Otra vez. Vamos a tener un flex de pantalla y luego el color de fondo es negro. Entonces es por eso que escuchamos el evento de pergamino. Cuando le dices ventrículo al navegador y boom. Ahora bien, puede que no lo veas con claridad porque tenemos que estilizar el nav, que es este tipo de aquí. Sólo hay que copiar nav. Vamos a tenerla posición. Hagámoslo pegajoso. Desde arriba, vamos a ser cero. Entonces esto lo empujará a la cima. Y la altura de estos top nav va a ser de seis RAM. El ancho es del 100 por ciento. Justificar el contenido. Se va a arreglar el espacio entre posiciones porque queríamos fijar el índice z superior. Hagámoslo dos, relleno 0.4. Alineemos los elementos al centro. Entonces, cuando guardes y revises el navegador, ahora, cuando te metes la pata, te darás cuenta de que el color de fondo del top nav cambiará a negro. Seguro que puedes. Ves que es simplemente porque cuando desplazas la aplicación en el eje y, va a establecer esto en true. Entonces cuando el desplazamiento se establece en true, vamos a llamar a esta clase, que es el tornillo, y luego aplicar el fondo para que sea negro. Así de simple como eso, ahora vamos a darle una transacción para que tengas alguna animación dulce cuando estés desplazándote por punto cero. Es decir, el de Satanás es en horas. Bien, vamos a estilizar rápidamente el logo para que tengas una idea clara de lo que hemos hecho hasta ahora, creo. Sí. Puntos. Hagamos el lado izquierdo. Siempre aconsejo copiar exactamente lo que tienes aquí para que no te metas en problemas innecesariamente. Lado izquierdo. Vamos a tener que mostrar flex y luego alinear los artículos al centro. Vamos a darle un espacio intermedio. Voy a hacer gap to ram. Una vez hecho esto, estilizemos rápidamente el logo. El logo, entonces vamos a hacer que vuelva a exhibir flex. El flujo dividido. Justificar los contenidos al centro, alinear los elementos al centro, guardar la obligación. Ahora manejemos la imagen con precisión. Img el ancho. Hagámoslo diez RAM a la altura dos, rem, guarda la aplicación. Y esto es lo que tenemos. Todo está bien alineado. Ahora tienes el logo por aquí, y ahora también tienes el botón de cierre de sesión por aquí. Lado común aquí. Y vamos a hacer los enlaces de probabilidades. Queremos estilizar estos enlaces de aquí que solían ver con el aparecer en este momento. Entonces vamos a tener que exhiban flex, guarden y lo revisen. Puedes ver ahora tenemos programa de TV casero y el resto de ellos como embellecidos. Muy bien, Cuando voy a hacer aquí, LI, LI, vamos a apuntar a un target solve, darle un color de blanco. Guardar en el navegador. Ahora, ya lo tienes. Bien, está bien, todo genial. Pero otra cosa que quiero que observen, puede que no la veas con claridad, pero se está mostrando en la pantalla. Ahora lo que quiero hacer, porque quiero que entiendas cada pedacito de este código, resalte todas estas imágenes. Se puede hacer un comentario al respecto. No hagas esto al final. Sólo fíjame porque es para enseñar ponencias. Puede que no lo veas también. Voy a ir al índice punto css y no hacer nada, resalta y colocar un comentario sobre el color de fondo. Regresa. Bueno. Entonces estos son los puntos que no queremos. Todo se ve, déjame, déjame, déjame hacerlo lo suficientemente bien. Entonces aquí más un comentario sobre esto nuevamente. Bien, bien. ¿Ves este punto por aquí? Punto, punto, puntos. No queremos que quite esos puntos. Lo que voy a hacer es volver al link y luego voy a hacer list style, type, safe on the browser. Ahora, el punto se ha ido. ¿No puedes ver más esquivar secular? No se puede ver ninguna. Estamos aquí. Ahora, eliminemos el subrayado. No me gusta el subyacente, Oye, sólo voy a hacer decoración. Ninguno, guarda el proyecto. Y ahora tenemos un enlace adecuado por aquí. Es lindo, me encanta. Cuando observes cuidadosamente, te darás cuenta de que todos estos enlaces están todos apretados juntos. Tengamos un espacio intermedio. Entonces para hacer eso, bien, dentro del link otra vez, voy a hacer gap como Mickey tres rem, guardar en el navegador. Vaya, bien, está bien. Fresco. Deshagamos algunas de las cosas que acabamos de hacer para enseñar pimientos. Guardar aquí. Y ahora tenemos la aplicación así. Vuelve a Top Glove, cambia el color a blanco y bueno. ¿Ves que todo está funcionando perfectamente bien? Bien, Ahora es el momento de estilizar el lado derecho, que es donde se encuentra el botón de cierre de sesión. Bien. Ya ves que es momento de estilizar a este tipo. Ahora, lo que voy a hacer, vamos a cerrar el lado izquierdo. Destaca a este tipo de aquí, se asegura de que esté cerrando así por aquí. Con estos, hemos cerrado por el lado izquierdo y ahora comencemos el lado derecho. Puntos. Desplazarse hacia arriba. Lado derecho. Vamos a tenerlo display flex. Alinea los artículos al centro. La brecha debe ser una habitación. Apuntemos el botón. Déjame mostrarte este botón de aquí. ¿Bien? Porque darle el color de fondo del rojo, el rojo estará bien. Después la frontera. Vamos a darlo a conocer. Puntero causal. A ver lo que tenemos. Ahora. ¿Ves? Bueno. Piensa que tenemos que aumentar el tamaño. Entonces antes de proceder a aumentar el tamaño, voy a hacer aquí y enfocarme. El esquema va a ser no apuntando al propio SVG, que es este tipo. Déjame mostrarte. Estos tipos. Bien chicos es tarde en la noche por aquí, así que bien, vamos a proceder. Voy a hacer como VG. El color del SVG es rojo. El tamaño de fuente, que una actriz percibe el tamaño del SVG va a ser, hagamos que llueva. Tal vez sea demasiado grande. Así que vamos a sacarlo, guardar el navegador y ya ves que es extremadamente grande. Y cambiemos esto a blanco y veamos qué pasa. Si la aplicación. Y aquí y recargas, puedes ver que todo está bien. Pero una cosa que no queremos es estas cosas de aquí. Queremos que sea un poco circular aquí. Lo que voy a hacer, radio fronterizo, vamos a hacerlo 50 por ciento. Entonces cuando haces estas aplicaciones de seguridad en el navegador, ahora tenemos se veía así. Puedes ver que todo está funcionando perfectamente bien como se esperaba. Antes de dejar esta conferencia, quiero explicar todo lo suficientemente bien. Una vez más. Vuelve a Netflix. Entonces aquí escuchamos los propios eventos de pergamino. No he escuchado los eventos en pantalla. Creamos una variable de estado. Y dijimos que si window.py offset es igual a cero, significa que si el usuario no la jodió, la aplicación va a ser así. Y el fondo top nav no va a tener ningún color. Entonces, si sabemos que las compensaciones de tono son iguales a cero, estableceremos el estado inicial en false, así que vamos a mantener el estado y las L's. Estamos fijando el estado inicial en verdadero. ejemplo aquí en la aplicación, no hemos atornillado a la parte superior. Ahora el desplazamiento de Pedra es igual a cero. Por lo tanto, devuelve falso. Entonces cuando me desplace hacia arriba, va a volver verdadero. La idea es asignar un nombre de clase al Top Nav dinámicamente en función del estado. No tuvimos que aplicar un color de fondo al nombre de la clase. Entonces aquí pasamos los atornillados como apoyos. En la parte superior de navegación. La recibimos por aquí por esta estructura en ella. Déjame mostrarte aquí mismo, habiendo hecho eso. Entonces aquí tenemos un nombre de clase, justo aquí tenemos el nav. Y aquí lo hicimos. Si un tornillo es igual a true, vamos a tener un className llamado atornillado. Sí, flechas. Si es falso, vamos a tener un código className no scroll. Así que si se desplaza se establece en true, permitirá estilizar este nombre de clúster y establecer el fondo en negro. Déjame mostrarte. Eso es exactamente lo que pasa aquí. Ahora, el fondo es negro. Entonces con esto, cuando los usuarios hagan crecer la aplicación hasta la cima, vamos a aplicar el fondo negro ahora vamos a aplicar el fondo negro a la parte superior. Así. Entendido, hermoso. Entonces esto es todo por ahora. Y en la próxima conferencia, comenzaremos a implementar la sección de héroes. 86. 84 LogOut: Bien, entonces en esta conferencia, vamos a proceder a implementar la funcionalidad de cierre de sesión. Entonces, cuando observes la esquina superior derecha de la pantalla, verás el botón de cerrar sesión. Por lo que cuando el usuario haga clic en este botón se mostrará para poder cerrar la sesión de la aplicación. Implementemos eso rápidamente. Vuelve al código VS. Vamos a importar o no cambiar estados, cerrar sesión de firebase off. Entonces creo que lo tenemos en la página de inicio de sesión. Rápidamente abre la página de inicio de sesión, y luego bien, vamos a importar a este tipo. Resaltar y copiar. Ir al top nav. Pégalo aquí. Lo que queremos es un cambio automatizado y también , cerrar sesión en Karma. De nuevo a la página de inicio de sesión. Vamos a copiar la Firebase que creamos. Vamos a pegarlo aquí. Y por último, vamos a importar el uso Navigate. Es tan sencillo como eso. Entonces, en realidad, lo que vamos a hacer aquí es bastante sencillo. Nuevamente, regrese a la página de inicio de sesión, desplácese hacia abajo. Ahora primero, voy a copiar a este tipo de aquí. Después pégalo aquí nuevamente a la página de inicio de sesión. Copia a este tipo, y pégalo aquí. Entonces esto va a ser si no hay ningún usuario actual, así, si no es usuario actual, tenemos que navegar hasta la página de inicio de sesión. Cuando presionas el botón de cierre de sesión, vas a ser redirigido a la página de inicio de sesión. Guardar. Desplázate hacia abajo y vamos a implementarlo aquí mismo. Entonces OnClick, vamos a llamar al cierre de sesión aquí tomando Firebase. Al igual que estos. Guarda el proyecto en el navegador, ¿verdad? ¿Puedes ver eso? Ahora estamos bloqueados. Entonces cuando le pego al iniciar sesión, veamos qué pasa. Bien, así que ahora cuando presione el botón de cierre de sesión, nos cerraremos la sesión y la aplicación nos redirigirá a la página de inicio de sesión. Vamos a probarlo. ¿Puedes ver eso? Ahora estamos en la página de inicio de sesión. Todo está funcionando perfectamente bien como se esperaba también si quiero iniciar sesión en la aplicación. Entonces voy a usar mis cuentas. Angela gmail.com 123ab c, inicia sesión y boom. Ahora estamos aquí. Hemos logrado establecer a los auténticos asiáticos y todo está funcionando perfectamente bien como se esperaba. Entonces en la próxima conferencia, continuaremos con la página de héroe. Nos vemos en la próxima conferencia. 87. 85 Componente de héroe: Bienvenidos de nuevo a todos. En esta conferencia, vamos a diseñar aquí el componente héroe. Por lo que al final de esta conferencia, vamos a tener un aspecto muy bonito en el diseño. Procede al código VS. Y sigamos abriendo rápidamente netflix dot js. Entonces aquí mismo, lo que voy a hacer es eliminar algunas de estas imágenes porque en realidad lo hicimos para permitir que su sitio web se desplazara. ¿Puedes ver eso? Exactamente fue la razón por la que corrimos que las imágenes varias veces. Ahora mismo, límpielo en el navegador. Oye, es que puedes ver que ahora mismo, posible que no podamos desplazarnos de nuevo. No te preocupes, no hay problemas en absoluto. Entonces lo primero que voy a hacer aquí es importar desde componentes estándar. Justo abajo. Voy a hacer const hero container equa styled dot d y luego la interpolación de cadena, abrir la corteza 80k. Bien, ya terminamos. Lo que voy a hacer es resaltar y copiar el contenedor héroe. Ir a la cima. Queremos concluir toda la aplicación dentro del contenedor hero. Resalta el Comando X para cortar, muévelo aquí mismo, mezcla para formatear el código, y se ve limpio. Vamos a continuar. Ahora tenemos un div con el nombre de clase de héroe. Dentro del div, renderizamos el Top Nav y luego pasamos como crudo como apoyos hacia abajo al Top Nav. Y por aquí tenemos la imagen de héroe. Ahora lo que voy a hacer justo después de la etiqueta de cierre del IMG, vamos a tener otro div, darle un nombre de clase de contenedor. El contenedor div. Vamos a tener otro div, darle un nombre de clase de Dido y palabra correcta en el título. Vamos a tener una etiqueta Adriana, y yo voy a hacer Superman. Por lo que estos servirán como título. Entonces vamos a tener una etiqueta p que servirá como descripción. Lo que voy a hacer ahora mismo es copiar una prueba ficticio aleatoria de Internet y pegarla entre ellas. Ahora. Yo sólo voy a pegar así. Sí, así que si tienes una descripción adecuada de Superman, también puedes escribirla por aquí, pero para mí, no quiero perder el tiempo, Entonces sí. Entonces justo después del div de cierre del título del nombre de la clase, aquí está. Vamos a tener otro div. Y este div nos va a salvar el botón contenedor div, div, el nombre de clase de los embarques. Entonces vamos a tener dos botones diferentes, bien, dentro de la sección de héroes. Uno de los inferiores va a ser el botón Reproducir y el otro va a ser el info, que es el botón Más. Aquí voy a hacer. Comprado en súplica, dale un nombre de clase de juego entre, solo va a resaltar esta mezcla para duplicarla así. Y lo que hace de nuevo aquí voy a hacer más. El m debe estar en Copa. Y entonces aquí voy a hacer más. Entonces, si piensas el nombre de mi clase por aquí, la convención no es lo suficientemente descriptiva. Se puede hacer que sea descriptivo. A tu final. Se puede escribir en su totalidad. Podemos hacer botón de reproducción, botón Más. Podemos hacer con eso al final. Pero para mí, sólo voy a mantenerlo sencillo así. Otra cosa que vamos a hacer, desplazarnos hasta arriba y luego vamos a importar algunos de los íconos que vamos a usar dentro del abordaje. Voy a hacer importar línea AIR en círculo completo. Lo sufijarás con otro. En la Parte. F, una obra de React dash, icon slash. Tan simple como eso, cuando guardas en llamada al navegador. Estos. Entonces vamos a tenerlo por aquí, el Superman, que sirve como título de la película, la descripción de aquí. Y aquí tenemos el botón de jugar en el equipo móvil. Ahora, cuando acerque un poco la pantalla, van a ver que esta imagen se está rompiendo. Mira así. Entonces lo que voy a hacer ahora es estilizar esta compañía. ¿Verdad? Estamos en el asiento trasero. Vamos a hacer punto aquí, fila. Vas a tener con posición relativa. La idea es realmente colocar la totalidad de las paradas justo en la parte superior de la imagen del héroe aquí. Entonces todo es Superman, la descripción de la jugada y el equipo móvil va a estar justo enfrente de ella. Bien, espero que tengamos que estilizar las imágenes de allanamiento porque la imagen del héroe se está rompiendo y no me gusta. Ahora lo que voy a hacer, IMG, vamos a apuntar la imagen, darle una altura. Hagamos el seto de 70 V de altura y luego el ancho. Hagámoslo al 100%. Creo que eso va a estar bien. Guarda una salida escalonada en el navegador y vuelvo a hacer zoom, alejar, acercar todo está funcionando ahora, bien. Bien, entonces nido en línea es colocar a esos tipos en la parte superior. ¿Cómo lo hacemos? Me puedes decir, no te preocupes, te ayudaré. Contenedor de puntos. Déjame mostrarte todo aquí. Como esto está justo dentro de la D para el nombre de clase del contenedor. Entonces quiero decir, todas estas cosas, el título, la descripción de la navegación. Vamos a tenerla posición. ¿Adivina qué? Va a ser absoluto para que lo coloque encima de la imagen del héroe. Porque aquí lo establecemos en relativo. Y aquí, cuando hagas absoluto, este tipo va a llegar justo en la cima. ¿No solo en la parte superior, justo frente al cuerpo? Sí. Bien. No te preocupes, hagámoslo para que puedas entenderlo lo suficientemente bien. Lo que voy a hacer ahora mismo es hacer que el fondo sea un aro. Cuando ahorras. Regrese al navegador. Todavía lo tenemos aquí abajo. Vamos a comprobarlo. He escrito está bien. Cuando haces absolutos y fondo un rem, este contenedor debería estar encima del héroe, pero ahora mismo parece que no está funcionando. Oh Dios mío, me he dado cuenta de la mina equivocada. Lo siento por eso. Esta es la ortografía correcta de contenedor. Sé que la mayoría de ustedes podrían haberlo visto en la conferencia. Asegúrate de corregirlo. Se trata de un error tipográfico. Limpia a este tipo y pega aquí. Ahora tenemos la ortografía adecuada de contenedor. Guardar en el navegador. Ahora tenemos las estufas por aquí. Bien, está bien, pero vamos a hacerla más sopa. Ven aquí. Bien, dentro del contenedor, tenemos el título. Y claro, quiero volver a verificar el nombre de la clase porque no quiero que entremos en otro laberinto. El título aquí para copiar. Chicos, miren, tenemos que hacerlo así que no estemos bien, todo está bien, ¿verdad? Llevando el título, tenemos la etiqueta H1. Aquí. Voy a tener su margen a la izquierda, cinco rem transform, mayúsculas. Vamos a guardar y ver. Bien, aquí se ve bien, ¿verdad? Vamos a darle un tamaño de fuente de 73 píxeles. Bien, así que para el fondo de la fuente, solo voy a copiar y pegar desde el ayudante de código. Ve a comprobarlo. Vas a ver los antecedentes del héroe. Copia y pega este mosaico por aquí. Guardar. Y luego veamos el resultado en el navegador. Echa un vistazo. Ya ves que tenemos a este Superman por aquí luciendo bien. A mí me encanta. Bien, vamos a estilizar rápidamente la etiqueta p. Margen, fondo -50 píxeles. El ancho es de 40 píxeles. Margen dejado como mantener. El margen que queda con es cinco rem. El font-family no es problema. Dale una familia de fuentes de Lexend, Deca, coma, sans, serif. Entonces solo especifica el color para que sea blanco. Todo va a aparecer muy bien. Se ve bien de hecho. El margen inferior debe ser de 50 píxeles y no de -50 píxeles. Se puede ver ahora que está en la parte superior. También tenemos los botones por aquí, no te preocupes, lo vamos a llevar a la cima ahora mismo. Entonces justo afuera del título, tenemos otro div. Déjame mostrarte el div aquí con el nombre de clase de los abordajes. Sólo voy a copiar esta clase nombre punto botones. Y entonces lo voy a hacer es tenerlo display flex. Vamos a darle un margen de cinco rem. Brecha desviada a rem. Bien. Está bien. Bien. ¿Qué hace otra vez, tenemos que hacer? Tenemos que estilizar el botón y hacer que se vea más hermoso. También tenemos la clase btn. Tenemos puntos, más clase BTN. Y todos estos, ya sabes que es un top aquí la mezcla de ortografía de tus nombres de clase son correctos. Justificemos el contenido. Para centrar, las fuentes dentro del botón van a ser rojas. Vamos a darle un radio fronterizo. Bien, vamos a convertirlo en un wireframe. Esto en realidad hará que sea un poco curvilíneo. Vamos a guardar y ver. Bien, de hecho va bien. Vamos a avanzar más. El tamaño de la fuente. Un punto para él. El hueco es un acolchado de llanta, 0.9 corrió acolchado de izquierda a patrón REM derecha. Punta de zapato para AIM. Ups chicos, echen un vistazo. No sé por qué sigue pasando esto. Bien. Se arregló el borde. No queremos la frontera, así que voy a hacerla non Veamos qué tenemos por ahora. Y se ve bien. Alejar. Me encantan los resultados. Continuemos con el caso. Hagámoslo un puntero. Entonces va a ser exactamente lo mismo que cuanto más entre n. Así que copia el estilo de un aquí y pégalo aquí cuando guardes un, pégalo afuera. ¿Verdad? Ahora, tenemos que cambiar el color de fondo de los más btn. Y el color aquí, que es el color de fuente en sí, va a ser el blanco, el color de fondo. Hagámoslo negro y el borde. Cuidados. Entonces este tipo de aquí, el cuerpo va a ser 0.1 RAM blanco sólido. Vamos a comprobarlo. Perfecto. Todo está en buena forma. Pero una cosa que quiero hacer ahora es el espacio vacío entre la descripción en la parte inferior es bastante coincidente. Entonces creo que tenemos que bajarlo un poco. Déjame ver la descripción, que es el título. La descripción de aquí, el margen inferior. Hagámoslo diez. A ver qué, qué pulido no funcionó así. Bien, encontraremos la manera de derribarlo. Entonces voy a hacer que se vean -50 chicos, parece que el -50 va a funcionar esta vez y funciona. Todo genial. Pero una cosa que quiero que implementemos es hacer que el fondo esté un poco oscuro para que la imagen que es la imagen del héroe lo haga, bueno, chicos, vamos a implementarlo para que entiendas lo que estoy a punto de decir. Ven aquí, desplázate hasta la parte superior. Y aquí vamos a hacer color de fondo. Hagámoslo negro. Habiendo hecho eso, bien, no lo haría el héroe, voy a hacer punto, fondo, guión, imagen. No te preocupes, vamos a crear esta clase ahora mismo. Copia, dale al IMG un nombre de clase de imagen de fondo, el punto más simple y luego vuelve y menos Tailandia ¿está Aquí? Veamos qué pasa por aquí. Futa, voy a hacer el brillo. Hagamos que el brillo sea 40 por ciento como espero que esto funcione. Funcionó perfectamente bien. Exactamente a lo que me refiero. A veces el resultado de tu trabajo da la mejor explicación. Esto era lo que mi intención es. Ven aquí. Puede que ni siquiera tengas que hacer esto. ¿Bien? Ahora hemos logrado tener un fondo transparente. Esto es clásico. Esto es todo por ahora. Y en la próxima conferencia, implementaremos la votación de reproducción para que cuando el usuario haga clic en el botón Reproducir, le vaya a redirigir al componente de reproducción donde comenzará a reproducirse la película. Va a ser interesante. Te pondré al día en la próxima conferencia. 88. 86 Margen constante: Bien, así que si observas con atención, te darás cuenta de que no tenemos un margen consistente. Déjame mostrarte el contenido de aquí, que es la descripción, el título y los botones. El margen izquierdo es de cinco RAM. Pero cuando observes la parte superior, te darás cuenta de que el logo de Netflix de aquí ni siquiera tiene margen alguno aquí a la izquierda. Entonces lo que vamos a hacer es especificar también el margen que queda para ser phi de RAM para que empiece desde la misma línea. Por decirlo así. Ahora vuelve al código VS y luego abre arriba. Ahora, como estos, tenemos que desplazarnos hacia abajo hasta donde tenemos el lado izquierdo. Lado izquierdo, estamos aquí. Bien aquí, ¿ es la brecha para carnero? ¿Margen izquierdo? Hagámoslo cinco rem. ¿Ya ves que todo está en línea? Si observas la esquina superior derecha de la pantalla, te darás cuenta de que el botón de cierre de sesión está casi saliendo de la pantalla. No me gusta. Entonces ven aquí, vamos a buscar el lado derecho. Lado derecho donde tu, Aquí tienes margen, ¿verdad? Hagamos que sea un rango más amplio. Veo Guardar. Hermoso. Ahora tenemos un diseño muy bonito y maduro. Es bonito así. Pasemos a la siguiente conferencia donde diseñaríamos la compañía de reproductores de cine. 89. 87 Componente de VideoPlayer: Bien, entonces en esta conferencia, vamos a crear el componente reproductor de películas. Pero antes de continuar, tenemos que implementar el OnClick para este fondo, que es el botón Reproducir. Entonces, cuando el usuario haga clic en el botón Reproducir, será redirigido al reproductor de películas. Vuelve al código VS, Netflix. Tenemos que importar, usar navegar. ¿Dónde hacemos eso ahora? Bien, mira esto, el top NEF. Voy a cortarlo, ven aquí y pegarlo. Entonces este sería el insumo que tenemos de la biblioteca, y estos serán los insumos de nuestras propias empresas. Entonces aquí voy a hacer en macetas, usar navegar desde React, router domo. Aquí tenemos que inicializarlo. Voy a hacer const, navegar. Un usuario navega. Por supuesto que es una función. Entonces tenemos que hacer algo como esto y volver a la obra comprada aquí. Voy a hacer onclick, onclick del cuerpo. Vamos a navegar a jugador. Bien, déjame mostrarte de nuevo el componente de la aplicación. Sigo mostrándote esto. Se puede ver aquí es la ruta y vamos a navegar a este componente se llama jugador Comando B. Y páginas, páginas, jugador, la página del jugador, guardar, guardar en el navegador. Vamos a hacer clic en este botón y boom, estamos aquí justo dentro de la página de play a. ¿Puedes ver la obra en la cima? Bueno. Cierra esto, cierra esto hacia abajo, luego cierra en la parte superior. Ahora nos quedaremos con el jugador punto g es. Entonces, lo que vamos a hacer aquí dentro del componente player, vamos a tener split container. De nuevo, asegúrate de que el bazo del continente sea correcto en esta ocasión. Bien, vamos, vamos a importar Stout desde componentes de inicio. Y este reproductor contenedor, const, jugador contenedor igual stout.df y luego el asiento trasero. Bien, vamos a estar bien. Definitivamente. Tener un DVI, dar el nombre de clase de claro, justo cuando el jugador div, otro div con el nombre de clase de flecha hacia atrás, derecha. Para traer la flecha hacia atrás, vamos a renderizar el BSR a la izquierda. Y este icono BSR izquierda viene del icono de React en macetas ser S, flecha izquierda de los iconos de tablero React. Y claro que vamos a resolver arreglarlo con BS. Las B se dejan así de correctas. Bien, está bien. Ahora voy a hacer VS flecha izquierda renderizar el icono por aquí. Y luego vamos a especificar el onclick. Cuando el usuario da clic en este icono, ¿qué sucede? Queremos volver a navegar a la página de Netflix. Entonces onclick, voy a hacer. Ahora tenemos menos uno por aquí y vamos a cerrarlo abajo lo que es la etiqueta de cierre automático. Entonces ahora tenemos dos entradas utilizadas, navegar e inicializarlo. Volvamos a la página de Netflix y copiémosla. Voy a copiarnos navegar desde aquí. Ven aquí, vuelve a pegarlo, aquí, copia la inicialización, y pega aquí. Todo genial. Así que justo después del cierre div del nombre de clase flecha atrás, vamos a tener aquí dentro de este div de un nombre de clase del jugador. Vaya, esto debería ser jugador por favor. Vamos a tener la etiqueta de video, video sRC. Entonces copiemos el tráiler de la barra de halo de código y luego peguémoslo aquí. Este es el enlace al video más cerca con una etiqueta de cierre automático, a menos que se cumplan los ajustes de necesidad. Antes de continuar con la configuración, vamos a guardar, a ver lo que tenemos. Vamos a refrescarnos. ¿Ves que tenemos el video por aquí? Por ahora. No se puede reproducir el video. Y sí, así que hagamos los ajustes de necesidad. Vamos a habilitar la reproducción automática. Entonces vamos a tener un bucle. Y los controles. Hagámoslo mutar para que no haga ruido. Cuando refrescas. Puedes ver bien, vamos a quitar menos de mover el mutado. Ahora tenemos los controles sobre todo funcionando. Ah, sí. ¿Ves eso? Está bien. Entonces lo que voy a hacer ahora es estilizar los videos y todo va a funcionar perfectamente bien. Bien, Brenda Starr, jugador de puntos componente. El ancho. Hagamos el ancho 100 vista ancho, el alto, 100 vista alto, puntos. Flecha hacia atrás. Déjame mostrarte. Este es el alquilador de dólares. Se asegura de que la ortografía sea correcta. Tener con posición absoluta. El relleno es de dos o M, Z, índice de guión. Hagámoslo uno. Como V G, que es para que el icono sea precisado. El tamaño de la fuente va a ser, que es el tamaño del icono. Hagámoslo tres rem, puntero causal. Voy a hacer aquí el color del SVG, color, blanco. Veamos qué pasa. Aquí vamos. Ahora, es el momento de estilizar el video. El video, lo que voy a hacer, voy a hacer altura 100 por ciento. Tenemos el 100 por ciento. Habiendo hecho esto, guarda el proyecto y en el navegador. Vamos a hacer clic en el tablero. Todo está funcionando perfectamente bien. Bien, entretengámonos. Bien, está bien. Muchas gracias. Y esto es todo por ahora. En la próxima conferencia, comenzaremos a diseñar las tarjetas para que tengas la exhibición de la película por aquí va a ser tan interesante. Nos vemos en la próxima conferencia. 90. 88 MovieCard: Bienvenidos de nuevo a todos. En esta conferencia, vamos a diseñar los componentes de la tarjeta para que cuando el usuario se cierne sobre el corte, aparezca el tráiler de la película y también el resto de la información, como los botes salvavidas en el botón de aversión en el agregar dos abordaje favorito. Entonces, sin más preámbulos, comencemos. Vuelve al código VS Comando B para abrir el Explorer. Así que justo dentro del componente, vamos a crear un nuevo archivo llamado card dot js son EFC, que es mar agitado, para generar el componente funcional flecha, cerrar el Explorer. Y nuevamente, Comando P. Vamos a buscar Netflix para que rendericemos este componente, que es los derechos de los componentes de la tarjeta estaban en la página de Netflix. Estoy aquí. Entonces vamos a renderizar los componentes de la tarjeta por aquí. Cuando haga esto, el componente de la tarjeta se importará en la parte superior para mí, automáticamente se desplazará hacia arriba. Entonces ve esto aquí. Bien. Así que asegúrate de importar la compañía de tarjetas a la tina. Estoy aquí, salvo. Entonces vamos a hacer los insumos necesarios como por ejemplo en la parte superior, vamos a importar los EU did hook. Y claro espero que sepas que usan TikTok es una función. Entonces definitivamente tenemos que invocarlo cuando queremos hacer uso de ella. También tenemos que importar navega de uso desde el domo del router React. Nuevamente, tenemos que importar Stout de componentes stout. Una vez hecho esto, vamos a importar los iconos necesarios para ser usados, como el icono de luz, dislike, y muchos más. No te preocupes, ya he preparado los Íconos. Entonces lo que vamos a hacer es copiar y pegar, ¿verdad? Estamos en el código **** poder. Y ellos son estos. Así que resaltar y copiar los iconos aquí no se llamaría ayudante. Ven a la cima y pega. Es tan sencillo como eso. Entonces el círculo agudo viene de los íconos de Riad y lo sacamos a la superficie con estos. Entonces, todos los íconos en realidad vienen de íconos de Riad. Nada de qué preocuparse. Habiendo hecho esto. Declaremos las variables de estado necesarias para ser utilizadas. Primero, vamos a hacer const En todo el mal karma, puesto en flotaba. Entonces vamos a hacer equa, usar Estados. Por supuesto, es una función y esta va a ser una operación booleana, por lo que el estado inicial va a ser falso. Sí, habiendo hecho esto, lo que es otra vez, también tenemos que inicializar a EU navega aquí. Ven aquí. Voy a hacer const, navega, acuática, usar Navigate. Es tan sencillo como eso. Una vez hecho esto, procedamos con el diseño. Ven aquí. Vamos a tener const, contenedor cortado. Comienza dot div, entonces, justo cuando la bacteria, es decir, ahí es donde se llevaría a cabo el estilo. Copia el contenedor de la tarjeta. Y luego vamos a concluir toda la aplicación con el contenedor de tarjetas. Abra la etiqueta, y luego péguela, cierre la etiqueta. Estos aspectos destacados, este tipo, lo mudan. Es tan sencillo como eso. Lo que tenemos que hacer ahora como borrar esto justo dentro, vamos a exhibir el cartel. Bien, entonces lo que voy a hacer es IMG, SRC, equa. Déjame mostrarte el enlace a la imagen del póster. Aquí lo resalta y copia. Ven aquí, pega más cerca con una etiqueta de cierre automático. Y dentro de la etiqueta, Hagamos los ajustes de necesidad como las probabilidades, estimación, las probabilidades para ser póster de película. Entonces, si la imagen no se mostró, esta será la alternativa. Entonces por aquí vamos a especificar el onclick. Onclick en el cartel. Queremos ser redirigidos al componente play movie donde comenzaremos a reproducir la película corresponsal. Entonces lo que voy a hacer ahora es así y luego voy a hacer navegar jugador slash. Vamos a probarlo. Guardar en el navegador. Haga clic. Hermoso. Todo funcionando perfectamente bien. Bien, bien. Entonces antes de continuar, quiero que hagamos algo muy, muy rápido aquí. Porque hay que entender estas cosas lo suficientemente bien. Ven aquí, apliquemos el estilo al contenedor cortado, dale un ancho máximo de 30 pixeles. Entonces quiero mostrarte algo. Vamos a darle un color de fondo. Vamos a hacerlo rojo. Si empiezo, entonces solo quiero despegar. La caja fuerte de ancho máximo en el navegador, ¿ puedes ver que el contenedor cortado está realmente cubriendo por todas partes aquí? Ves eso es exactamente lo que quería mostrarte. Ahora, habiendo hecho esto, continuemos. Vamos a configurar en Hoover para este contenedor de tarjetas. Entonces, cuando el usuario se cierne sobre el contenedor de tarjetas o el póster de la película para ser precisos, queremos que muestre el tráiler y algunas de las informaciones. Entonces déjame mostrarte aquí. Lo que vamos a hacer ahora es así. Vamos a hacer que nuestro ratón entre. Lo que vamos a hacer es actualizar el estado inicial. El estado inicial de aquí es falso. Entonces tenemos que llamar a la función de configuración para actualizar el estado inicial. Y claro, así es exactamente como hacer eso, luego establecerlo en falso. Ahora, lo que voy a hacer, tenemos que implementarlo justo después de la etiqueta IMG de cierre. Vamos a hacer si en Hoover es un cuadrúpedo y queremos mostrar toda la información de la tina de lo contrario no hacer nada. Entonces aquí, si ANOVA es un todo cierto, solo tenemos que copiar de nuevo esta etiqueta IMG, resaltarla, copiarla y pegarla aquí. Asegúrate de formatear el código para que se vea un poco limpio. Entonces por ejemplo sake, solo tengo que guardar, volver al navegador, necesita. No pasa nada. Es simplemente porque en mouse enter, necesitamos actualizar los estados iniciales para que sean verdaderos y no falsos. Tan genial, así. Bien, entonces cuando el usuario coloca un ratón en el póster de la película, tenemos que actualizar el estado inicial a true. Y entonces aquí estamos llamando a la función de configuración, estamos listos para actualizar el estado inicial, que es falso. Lo actualizaremos a true. Y luego aparecerá el efecto hover, que es esta imagen. Otra vez. Habiendo hecho esto, vamos a hacer la mayor parte de la hoja para que cuando usen me quite el ratón, el ratón deje adquirir. También tenemos que actualizar el estado inicial para obligar a casi irse. Así que copia todo aquí mismo y pégalo como actualizado a false. Entonces habiendo hecho esto, vamos a comprobarlo. Cuando pasas el cursor, ves a este tipo por aquí, y cuando le quitas el mouse, desaparece, casi Enter, ves que el efecto hover casi se va, vuelve a la normalidad. También, onmouseover, queremos asegurar el tráiler de película correspondiente de la pasta. Entonces aquí vamos a tener un video y luego ir a tocar un GS. Destaca la copia de video ven aquí después de la etiqueta de cierre del IMG. Pegado aquí muestra error y no sé por qué. Bien, no te preocupes, esto es simplemente porque tenemos que envolverlo en un contenedor padre. Entonces lo que voy a hacer ahora mismo, cierto, ¿no sería que se cierna aquí Vamos a hacer div, darle un nombre de clase de Hoover, ¿verdad? Dentro de este div, vamos a tener otro div con el nombre de clase de image, dash, video, dash, Wrapper. Copia todo aquí desde las líneas 2092, líneas 36, cortes. Lo mejor no sería el div con el nombre de clase de imagen, video o APA formatear el código, guardar la aplicación, volver al navegador. Hoover otra vez. Ahora, todo está funcionando como se esperaba, pero no hemos estilizado este componente, así que no esperes que se vea limpio y hermoso. Por ahora. Aunque no se vea feo. Las cámaras apagadas y todo funciona perfectamente bien. Volví a hablar demasiado. Así que justo después del cierre div de cluster name image video wrapper, vamos a tener otro div con el nombre de clase del contenedor info. En contenedor Dodge completo, ¿verdad? No sería el contenedor de información, vamos a tener varios íconos que se mostrarán cuando la tarjeta sea Harvard. Entonces aquí vamos a tener una etiqueta de historia y esta historia justo dentro voy a hacer aviso rojo porque también queremos mostrar el título de la película, darle un nombre de clase. También le vamos a llamar el nombre de la película. Onclick del nombre de la película, queremos navegar hasta la obra de nuestro componente donde se reproducirá la película correspondiente. Aquí, especifique el OnClick. Entonces justo después de la etiqueta de cierre de la historia, vamos a tener otro div. Y este div va a contener todos los iconos que se van a utilizar. Entonces voy a llamar a este div icons rights dentro del div del cluster de íconos. Vamos a tener otro div, darle un nombre de clase de controles. Porque ahí vamos a tener varios iconos de controles. Ahora vamos a renderizar el primer icono. Voy a colocar un kosher. Ciérralo con la etiqueta de cierre automático justo dentro. Dale un título de juego así onclick de este icono, queremos ser redirigidos a la compañía de reproductores de películas. Justo después del cierre de la tienda de fútbol de reproducción de audio, vamos a tener otra. Roi choca, tiene ganas de atornillado. Y le voy a dar un título de luz, destaca, duplicarlo. Y entonces aquí van a estar nuestros artículos en el campo abajo. Y esto va a ser disgusto. El usuario puede editar como la película o no me gusta. Otro. Aquí vamos a tener BS check para volver a titular, eliminar de la lista. Delineé parcelas, darle un título de agregar a mi lista. Entonces habiendo hecho eso justo después del cierre div de los controles de nombre de clase, vamos a tener otro div con el nombre de clase de cerrarlo. Vamos a darle un nombre de clase. Info. Bh han despreciado. Dale un título de más información. Más cerca con la etiqueta de cierre automático justo después del div de cierre de iconos de nombre de clase como este, este div aquí que termina en las líneas 54. Vamos a tener otro div con el nombre de clase de enero. Entonces vamos a tener la película generosa. Aquí. Queremos mostrarlos con una lista desordenada. Dentro. Vas a tener una etiqueta LI. Entonces aquí voy a hacer acción. Entonces puedes, solo, porque esto va a venir dinámicamente. Así que solo podemos tener estas cosas por aquí así. Al guardar la aplicación. Echemos un vistazo a lo que tenemos en el navegador. Bien, vamos a aspirar. ¿Puedes ver todas las paradas aquí mismo? Tequila, jugar, el rezago, no me gusta, agrega y quita. Tenemos un montón de paradas por aquí. Bien, así que esto es lo que tenemos por ahora. Entiendo profundamente que no se ve hermosa, pero puedo asegurarles que tampoco se ve fea. Así que no te preocupes. En la próxima conferencia, comenzaremos a estilizar esta compañía. 91. 89 Tarjeta css: Bien chicos, así que vamos a estilizar rápidamente el componente de la tarjeta. Vuelve al código VS, desplázate hacia abajo. Y aquí vamos a eliminar este comentario. Así que vamos a darle un ancho máximo de 230 píxeles. Cuando guardas y check out en el navegador y los ID. Ahora puedes ver que la imagen es tranquila más grande, pero no te preocupes, vamos a arreglarlo. Y luego el ancho mismo, que las imágenes como le dan una altura del 100 por ciento. El cursor va a ser puntero. Vamos a tenerlo posición relativa. Ahora queremos apuntar al IMG justo dentro. Entonces voy a hacer IMG. Vamos a darle un radio de borde, 0.2 ram. Oh Dios mío este tipo se queda, no sé por qué. El ancho al 100%, la altura, 100 por ciento. Índice Z. Hagámoslo diez. Al guardar, echa un vistazo al navegador, ves que se ve bien así. El cartel en realidad es muy pequeño, pero está bien. No hay problema. Vamos a continuar. Ahora. Empecemos a trabajar en el hover. Así que en Hoover, DOD, Hoover. Y el usuario juega con ratón en el póster de la película así. Puedes ver que todas estas palomas no están en fila, así que tenemos que poner todo en su lugar para que aparezca amablemente. Primero, vamos a tener el índice z. Nueve benignos. Vamos a darle una altura de contenido Max. El ancho va a ser de 20 llantas. La posición es absoluta. Pero ahora no queremos colocarlo directamente encima. Déjame mostrarte, guarda la aplicación. Volver al navegador. Cuando cierras el cursor, ¿lo ves? ¿Ves? Por lo que no queremos colocarlo directamente encima de él. Así que queríamos arrancarnos un poco. Entonces voy a hacer desde arriba -18 V H desde la izquierda va a ser Zara. Dar el radio de borde 0.2. Rem. Otra vez, miren a estos chicos, lo siento por eso. Dale el borde que vamos a hacer Joe punto 1RM, gris sólido. Y por supuesto la RAM debería ser lo que el valor, el color de fondo, voy a hacer 181818, Transición, 0.3 s está fuera. Entonces, cuando revisas, el navegador pasa el cursor sobre él. Déjame mostrarte, puedes ver que poco a poco va tomando forma. Puede que no te des cuenta por ahora porque todo está oscuro. Pero se lo puedo asegurar. Bien, procedamos. Para los puntos envoltorios de video de imagen. Déjame mostrarte aquí. Imaginería dura. ¿Dónde estás aquí? Es resaltar, copiar, puntos, emitir envoltorio de video, y luego vamos a tenerlo posición relativa. La altura es de 140 píxeles. Y para los derechos de etiqueta IMG dentro del contenedor de video de imagen, vamos a darle un ancho del 100 por ciento. Las alturas de 150 píxeles. La cubierta de ajuste del objeto. Radio de borde 0.3 rango. Desde arriba Zara. El índice z del mismo va a ser cuatro aquí. Entonces vamos a tener que posicionar absolutos. Bien, Para el video, bien, dentro de la Hoover. Nuevamente, para el video, va a tener exactamente las mismas dimensiones, así que solo tengo que copiarlo y pegarlo aquí. Guardar. Ahora vamos a despegar el navegador. Echa un vistazo. Puedes ver que poco a poco va tomando forma. Otra vez. Vamos a finalizarlo. Para el contenedor de información en contenedor de cuatro tablero. Déjame ver desde aquí arriba lo que tenemos en contenedor de alimentos chico se queda, necesita ser gramaticalmente ejercer aquí. Porque si escribes mal los nombres de las clases, vas a estropearte las cosas por ti mismo. Entonces vamos a tenerlo display flex, flex direction column. Tan bueno un acolchado de un rem. Vamos a darle un hueco de 0.5 rem. Guardar en el navegador, Hoover en él. Ahora ya ves como todo va subiendo poco a poco. Para los íconos, puntos, veamos qué es el clustering para los íconos. También es iconos aquí. No te rías de mí. Solo estoy tratando de ser exacto aquí para que no me meta en problemas. Ahora vamos a tenerlo display flex, justificar el espacio de contenido entre ellos. Vamos a estilizar el SVG para que el color aparezca muy bien. Svg. Primero, quiero darle un color. Entonces el color del SVG va a ser, hagámoslo sería sería así. Siete. Compruébalo. Oh, sí. ¿Ya ves? Vamos a terminarlo. Démosle un borde de 0.100 REM, radio de borde blanco sólido. Queremos su subclase, así que voy a hacer 50 por ciento de tamaño de fuente. Caso es transición de puntero. Lo va a tener 0.3 s está fuera o facilidad de entrada y salida. Por lo que decir, ya tienes esto, guarda y mira lo que tenemos. Kim, ¿lo ves? Bien, así que en realidad podemos cambiar el color del SVG a blanco. Creo que eso va a ser más mejor. Sí, está mejor así. Entonces hagamos el ANOVA. Cuando pasas el cursor sobre el SVG, el color va a ser este. Vamos a probarlo. Llévalo. ¿Puedes ver? Está bien, así está bien. Entonces, si observas con atención, te darás cuenta de que no hay espacio entre los iconos SVG. Entonces lo que voy a hacer es escribir traer los íconos aquí. Tenemos otro estilizar, el control, punto, controles. Tengámoslo display flex. Entonces vamos a darle un hueco de un rem. Guarde la aplicación. Ahora. Verás, creo que la brecha de un rem en realidad es demasiado para eso. Hagámoslo 0.5 rem. Fresco. Esto está bien. Beta-nada. Bien, entonces antes de continuar, quiero mostrarte algo aquí. Ves este icono. Déjame compartir aquí div con el nombre de clase de los iconos. Este es el div aquí mismo. Aquí termina. Entonces envuelve los controles y todo el SVG. Entonces aquí lo que voy a hacer, estos son los íconos. Envuelve todo el SVG. Entonces voy a cortarlo de aquí, pegar aquí para que lo cierre y cuente. Entonces justo después de esto, vamos a tener puntos generados. Vamos a hacer que muestre flex la lista desordenada. También tenerlo display flex. La brecha. Hagámoslo un vino corrió. El patrón aliado, cierto, va a ser 0.7 rem. Así que voy a hacer aquí en el Fest de tipo. Vamos a hacer menos inicio tipo igual nulo. Entonces queremos quitar los puntos y todas las paradas. Así que el estilo de lista, el tipo se va a conocer cuando guardes el navegador. Bien chicos, parece que todos estos pueblos no está afectando a los generosos. Entonces veamos algo en la parte superior. Esto es enero. ¿Ves? Por eso es exactamente por lo que la sigo revisando porque a veces podría estar mal. Entonces hagamos esto generoso así. Sí, Save. Ahora todo va a funcionar bien. Vamos a darle un color aquí. El color va a ser amplio. Guardar. Otra vez. Ahora ya ves que nos quedamos con el título. Entonces déjame mostrarte dónde tenemos ese título. La parte superior derecha de aquí es. ¿Ahora? El nombre de la clase se está moviendo. Entonces voy a copiar justo dentro del contenedor de información. Veamos contenedor de información, donde tu, aquí está el contenedor de información. Y luego vamos a hacer el nombre de la película Dada. Vamos a darle un color de blanco para que decidas estilizarlo si lo deseas, y cómo lo quieres cuando vuelas el cursor. ¿Puedes ver? Ahora todo funciona perfectamente bien como se esperaba. Echa un vistazo. Cuando haces clic en el título, te lleva aquí abajo. Bien. Entonces chicos, una cosa que no me gusta es que no hay espacio entre la tarjeta y este otro componente. Entonces lo que voy a hacer ahora mismo es especificar un margen superior por aquí. Y hagamos que sea una habitación. ¿Puedes ver ahora que tenemos un espacio entre los incautos? Cuando comencemos a implementar las películas, todo quedará bien. Pero por ahora, volvamos a echar un vistazo a la tarjeta. Bien, otra cosa que noté por aquí es que cuando pasas el cursor sobre ella, puedes ver que baja. Este no es el resultado esperado. Sí, debería ir a la cima. Y creo que esto arreglará ese top se supone que es -18 VH. Sé que la mayoría de ustedes puede que en realidad no se encuentren en problemas por aquí porque yo lo pronuncié para ser 18 v aquí, pero tipográficamente, me salté el seto. Así que guarda en el navegador. Todo está funcionando bien como se esperaba. Es increíble, me encanta. Entonces esto es todo por ahora. Nos vemos en la próxima conferencia. 92. 90 Api Key: Bienvenidos de nuevo a todos. En esta conferencia, vamos a empezar a trabajar con la API. Y la API que vamos a utilizar en este curso es la API de base de datos de películas. Así que rápidamente dirígete a desarrollar como puntos, las películas db.org. Y luego justo aquí dentro de la introducción, haz zoom hacia arriba y déjame mostrarte. Tienes que hacer clic en el enlace de la API. Haga clic. Y luego cuando hagas eso, se abrirá una nueva pestaña. En la esquina superior derecha de la pantalla, verá la CMDB conjunta. Bien, así que haz clic para unirte aquí mismo. Lo que vas a hacer es clavar tus credenciales. Entonces mi nombre de usuario va a ser una barra de herramientas. Mi contraseña, claro, no voy a decirte qué es, que puedas hacer lo tuyo a tu lado. Asegúrate de que tu contraseña sea correcta. Mi correo, voy a hacer. Bien, hagamos ahaystack@gmail.com. Entonces me voy a inscribir. Ahora mismo. Me han enviado un correo electrónico de confirmación. Entonces lo que voy a hacer es abrir mi cuenta de Gmail. Y entonces aquí está. Tengo que hacer clic en este botón de aquí para activar mi cuenta. Y boom, habiendo hecho eso, entonces puedes introducir tu nombre de usuario y tu contraseña. Puedes volver aquí, déjame mostrarte y luego ingresar tu contraseña. Todos son lo mismo. Voy a guardar la cuenta y todo. Cierra esto, cierra esto abajo. Y ahora serás redirigido a tu página de perfil. Lo que vas a hacer a continuación es venir aquí dentro de este ícono de cerrar sesión en la esquina superior derecha de la pantalla. Haga clic para alternar la navegación y luego haga clic en configuración. Estamos en la configuración, solo tienes que acertar a API. Y luego aquí en la parte superior da clic en Crear. Y dice, qué tipo de API deseas registrar , desarrollador o profesional. Sólo tengo que hacer desarrollarme por aquí. Y después de eso, hay que leer todos estos términos y condiciones. Hazlo si así lo deseas. Independientemente de que no pasé por los términos y condiciones, todavía tengo que aceptar. Bien. Bien. El nombre de la aplicación va a ser proyecto Netflix. La URL. Lo que vamos a hacer ahora mismo es copiar y pegar mi URL de YouTube por aquí. Porque por ahora, suponga que no tienes un sitio web. Sólo tengo que ir a YouTube. Y entonces aquí está mi página de YouTube así. Copia la URL. Puedes copiar cualquier URL de tu elección. No creo que eso importe. Pégalo aquí mismo. El resumen de la aplicación voy a hacer. Este es un sitio web de muestra de películas que puedes decidir escribir. La prueba está sobre el negocio. I FirstName y LastName. Su X, k. Mi correo electrónico ya está aquí. Mi número de teléfono. Sólo tengo que hacer algo como esta cláusula, 23581400, es 3755. Y por cierto, ese es mi número de teléfono real. Eso lo veo para nada. Para la dirección, solo vamos a hacer dirección temporal, temporal, resaltar, copiar, venir aquí, pegar, todas estas cosas. ¿ Realmente importa? ¿Bien? La ciudad, voy a hacer delta state, bien, Lo siento, La ciudad va a ser, hagámoslo, hagamos esto aquí. Aquí voy a hacer cintas deltas y el código postal. ¿Cuál es otra vez el código postal? Creo que son 32 ceros. ¿Hay? ¿Estoy en lo correcto? Así que solo tienes que rellenar tu dirección en tus datos por aquí y luego presionar el botón Enviar. Maravilloso. Entonces aquí tenemos la clave API. Déjame mostrarte que esta es la clave API, y déjame mostrarte otra cosa aquí de la que tienes que tomar nota. Quiero acercarme un poco. Al igual que esta es la URL base. Entonces cuando golpeas esta URL base, tienes que apuntar al contenido real que quieres fagear, en este caso la película, slash, lo que sea, lo que sea. Y luego colocan la clave API y lo hace. Entonces así es exactamente como vas a hacer uso de tu clave API. Especificas nuestra URL base, target, lo que quieras encajar, en este caso película, y haces algo como esto. Entonces aquí escribes esta consulta para especificar la clave API, y la clave API es igual d Entonces, en este caso, mi clave API es esta. Sí, a tu final, tu clave API va a ser diferente. Así que por favor no copie mi clave API porque no va a funcionar para usted. Sí, así que lo que sea que tengas como tu clave API es lo que deberías usar al final. Así que agreguemos rápidamente al código VS y hagamos que se configure correctamente. Vs código. Entonces aquí mismo tienes que abrir las utils, hacer clic con el botón derecho en New File. Y vamos a crear el archivo llamado constantes, puntos, Jays estaban en la constante G es, vamos a configurar la URL base y la clave API. Entonces lo que voy a hacer es un spot const. Mi API de subrayado, clave de subrayado va a ser igual a, déjame mostrarte, abre las comillas dobles y los derechos dentro de las comillas dobles. Regresa. Asegúrate de destacar a este tipo de aquí, ¿verdad? Haga clic en Copiar. Entonces esta es mi clave API. Por favor, de nuevo, asegúrate copiar y pegar tu propia clave API o de venir aquí y pegarla dentro de las cotizaciones, así. Bien, entonces cada vez que queramos hacer uso de mi clave API, no tenemos que llamarla así, ¿de acuerdo? Así que solo tenemos que llamar a mi clave API y va a recuperar lo que sea que la clave API esté por aquí. Voy a hacer un spot const, CMDB underscore, underscore URL. Entonces esta va a ser la URL base T MDB. También. Vamos a copiarlo y pegarlo justo dentro de las comillas dobles. Regresa. Te mostré esto antes desde el HTTPS, lo que sea, lo que sea aquí. Dos slash tres. Por favor, eche un vistazo a lo que resalté por favor. Chris lo hizo aquí así. Nuevamente, ya terminamos de configurar la API. En la próxima conferencia, vamos a instalar kits de herramientas para escritores así como configuración. Hay kit de herramientas de dosis para poder obtener datos. Nos vemos en la próxima conferencia. 93. 91 Kit de herramientas de Redux: En esta conferencia, seguiremos adelante para configurar el redox para abrir el Código VS, Control C para detener el servidor que se está ejecutando actualmente. Entonces lo primero que vamos a hacer es instalar la llave redox two. Aquí está el comando de instalación. Destacados copia, ven aquí y pega. Este comando está justo dentro del código hidroeléctrico. Presiona la tecla Enter para que se encienda. Don instalado. Exitoso. Vamos a echarle un vistazo. Abra el archivo package.json. Y aquí está. Ciérralo hacia abajo. Ahora, estamos en la tienda. Haga clic con el botón derecho en Nuevo archivo. Vamos a crear índice punto g es. Y aquí es que Lee está listo para configurar jugadas voltaicas. Así que primero tenemos que importar configurar star coma crea una sincronización de fuentes. Comma crea mentiras en todos estos serán importados de a los lectores para clavarlo. Entonces, habiendo hecho eso, declaremos el estado inicial. El estado inicial equa, lo establece en un objeto vacío. Cuando el objeto, vamos a tener el intrconfiado de las películas para ser una coma matriz vacía, el estado inicial de la más cercana cargada. Va a ser una coma falsa. Entonces los generosos. Va a ser una matriz vacía. Entonces en este caso, generoso es simplemente las categorías de la película. Y claro, ya sabes que una película puede pertenecer a tres o cuatro categorías distintas. Entonces eso es al menos lo que estamos tratando de hacer. Queremos afectar a las películas por, vía categorías. No te preocupes. cuando empezemos a afectar a las películas, definitivamente entenderías todo lo que estamos haciendo por definitivamente entenderías aquí, pero solo debes saber que el estado inicial de las películas es matriz vacía, el estado inicial de la generosa cargada es falso y el estado inicial de los generales es un área vacía también. En simplicidad, si el generador no está cargado, no queremos que la película vaya a buscar es tan simple como eso. Y es decir, por eso en realidad levantamos esta bandera por aquí. Entonces, si lo generoso es falso, no se buscará ninguna película. La única vez que vamos a buscar película es cuando traemos a los generosos. Y al ir a buscar las cenas, podremos localizar las películas que pertenecen a estos generales en particular. Creo que definitivamente lo entenderás lo suficientemente bien a medida que avancemos. Aquí, voy a hacer const, rebanada de Netflix. Entonces estamos creando las diapositivas por aquí. Netflix rebanar equa, crear diapositivas, abrir y cerrar paréntesis, abrir y cerrar corchetes. Y dentro de los corchetes, vamos a tener el nombre para ser Netflix, karma, el estado inicial. Y luego tenemos que tomar en los reductores extra. Y luego pasar el Buda, el Buda a un objeto vacío. Volveremos a eso en una G Si no has hecho esto. Por último, tenemos que exportar, const, store, el CWA, configurar store. Todos estos datos se almacenarán aquí. Y aquí vamos a tener un reductor, reductor rebanadas de Netflix. Bueno. Una vez hecho esto, lo siguiente en la fila es cerrar toda la aplicación con el proveedor. Entonces lo que estamos tratando de hacer es dotar a toda la aplicación de lo que tengamos dentro de la tienda. ¿Correcto? Estamos en el SRC. Déjame mostrarte como RC. Hay un index.js por aquí. Esto se conoce como el index.js de nivel superior. Entonces aquí es donde se va a ver toda nuestra aplicación. Sí, así que lo que vamos a hacer es dotar a nuestra aplicación de la tienda para que cualquier cosa que hagamos aquí mismo, podamos pasarla a cada otra caída dentro este proyecto sea tan simple como eso. Docente, bueno, hermoso. Ciérralo hacia abajo. Volver a los derechos index.js dentro del SRC. Entonces aquí vamos a importar, vamos a importar el proveedor de React redox. Y nuevamente, vamos a importar la estrella. Es en el deporte, así que tenemos que envolverlo entre llaves de punto slash store. Una vez hecho esto, concluyamos toda la obligación en el proveedor. Entonces aquí vamos a tomar en el puesto, puesto equa, la tienda justo aquí. Y luego destaca cortar y pegar dentro de la conferencia de aplicación para formatear el código. Guarde el proyecto. Ven aquí, ahorra. Bien, estamos en la terminal. Tenemos que poner en marcha la aplicación. Entonces veamos si hay algún problema aquí. Tenemos que esperar un rato. Bien, absolutamente, no hay problema. Odds Comando I para abrir la consola. Y aquí verás que no hay problema ¿verdad? Dentro de la consola. ¿Ves que todo está funcionando? Eso es bueno. Bien, así que terminamos con la configuración e instalación del kit de herramientas redox. Y en la próxima conferencia, comenzaremos a buscar datos desde el punto final de la API CMDB. Esto es todo por ahora. Asegúrate de hacer preguntas si estás confundido. Nos vemos en la próxima conferencia. 94. 92 Géneros de los pies: En esta conferencia, vamos a afectar a los generales de película desde la API CMDB. Así que asegúrate de ponerte el cinturón de seguridad, conseguir tu café a tu lado y comencemos. Justo cuando en el index.js, déjame asegurarte que es bueno. Cerramos o no. Este tipo, hemos terminado con esto justo dentro del stop index dot js. Déjame alejarme un poco. Entonces lo primero que vamos a hacer aquí mismo es instalar ox, usar Control C para detener el servidor que se está ejecutando actualmente. Y voy a hacer node package manager install ox use. La instalación está en curso. Ven a la cima. También tenemos que importar mi clave API de subrayado de las constantes de barra de UT también. Necesitamos hacer uso de la URL base. Esta URL, todas estas que expliqué en la conferencia anterior cuando creamos nuestra cuenta para el éxito instalado axial TM dB para el siguiente en línea es buscar lo generoso. Entonces justo debajo de los estados iniciales, voy a hacer aquí. Voy a hacer exportación, const, ponerme general, ser generoso, equa, crear un think tank. Abrir y cerrar paréntesis. Justo aquí. Voy a hacer Netflix slash generosa coma. Entonces tenemos que tomar en la función asíncrona un sumidero. Y claro, esto va a devolver una promesa. Entonces aquí vamos a esperar. Vamos a hacer nuestro peso punto axial get. Entonces, ¿qué vamos a conseguir? Vamos a conseguir que la película sea generosa. Y para ello, primero, tenemos que golpear la URL base y luego slash slash, movie slash list, y luego tenemos que especificar la clave API. Déjame mostrarte tomando rápidamente el bicho D, signo de dólar, abrir y cerrar llaves. Y voy a hacer CMDB baseURL fuera de la barra de llaves, barra general, lista de barra diagonal de películas. Y luego tendremos aquí una consulta cual será utilizada para asignar la API. Así que voy a hacer API underscore key, equa, sea cual sea la clave API. Y voy a hacer mi clave API es tan simple como eso. Y todos estos, vamos a asignarlo a una variable. Voy a hacer const, const data, configurarlo demasiado generoso, y luego asignarlo así. Es tan sencillo como eso. ¿Puedes ver? Bueno. Bien, entonces ahora vamos a regresar generosos. Es tan sencillo como eso. Vamos a agregarlo a los reductores adicionales. Entonces habiendo hecho esto, ve al extra reducirnos para agregar las claves. Desplácese hacia abajo. Aquí, ¿está bien? Estamos en el Constructor. Vamos a hacer puntos de Buda, agregar claves. Vamos a agregar cenas get. Dot cumplido, más tranquilo, el estado y la acción. Abrir y cerrar llaves, derecha, para poner, vamos a hacer puntos estatales generales, que es igual a la carga útil de punto de subasta. La carga útil va a ser los datos reales. Y aquí voy a hacer la degeneración estatal está cargada. Tenemos que ponerlo en verdad porque ahora mismo estamos ajustando la cena. Así que estoy haciendo esto, vamos a tratar de consola de registro. El generoso registro de puntos de la consola. Generoso, así. Con esto, abre la página de Netflix. Y en la parte superior, tenemos que importar insumos. Usas despacho para que algo suceda. Tenemos que despachar una acción. No te preocupes, hagámoslo para poder mostrarte a lo que me refiero con eso. Las importaciones utilizan este pasaje de React redox. Entonces aquí mismo voy a hacer const, despachar equa, usar este parche, ¿verdad? No usaría efectos. Tenemos que despachar la acción, desplazarnos hacia arriba y menos entradas. Utilizan efectos en una tina. Efecto de gancho React. Y tenemos que invocarlo. Y claro sabes que usan efecto toma en parámetro. Una es la función y la otra es la dependencia r0 coma la dependencia aquí, justo dentro, vamos a despachar. ¿Qué acción tenemos que despachar aquí? Queremos despachar a este tipo por aquí, que es lo que se genera. Entonces eso es lo que sería capaz de obtener los datos. Así que ve a Netflix dot js y vamos a despachar. Obtener generosa. Por supuesto que conseguir la cena es una función. Y por favor asegúrate de importarlo en la parte superior, así. Entonces, habiendo hecho esto, vuelve a la terminal. Comencemos la aplicación una vez más. Mira lo que tenemos en la consola. Esperemos que todo vaya bien. Dice que los axiomas no están definidos. Nuestros chicos adecuados vuelven a index.js. En la parte superior, tenemos dos entradas. Actúa uso desde el eje, así, vuelve a guardar la aplicación, y en esta ocasión, vamos a tener funcionando. Pero Comando I para abrir la consola. Y justo dentro de la consola, ya ves un área por ahí. Abre el área. Y tenemos la película generosa. Aquí tienes la acción, aventura, animación, comedia, drama documental, familia, fantasía, y mucho más. Entonces chicos, esto es sumamente fantástico y me encanta. Ahora, hemos logrado conseguir la película generosa. ¿No es esto hermoso? Hola. Por lo que en la próxima conferencia, procederemos a encajar las películas sí basadas en los generales de la película. Entonces tenemos que encajar películas en función de cada categoría es tan simple como eso. Nos vemos en la próxima conferencia. 95. 93 Fetches Películas: Bienvenidos de nuevo a todos. En la conferencia anterior, pudimos buscar las cenas de cine desde el punto final de la API TM DB. Y los son estos de aquí. Entonces en esta conferencia, seguiremos adelante para buscar las películas desde el punto final de la API. Rápidamente dirígete a VS Code y menos proceder. Antes de seguir adelante a buscar las películas. Hay algunas condiciones de configuración que tenemos que tener en cuenta. Y de hecho, tenemos que exponer estas condiciones. Por lo que no sólo queremos encajar todo tipo de películas. El único tipo de película que queremos traer las películas con el camino de telón de fondo, lo que implica las películas con la imagen del póster. Entonces, si la película no tiene una imagen de póster, no queremos que se ajuste a esa película también. Antes de que podamos encajar cualquier película, tenemos que asegurarnos de que los géneros de películas estén disponibles. Entonces, si los géneros de películas no están cargados, no queremos que quepa esa película. Sí, así que vamos a implementarlo rápidamente con código. Antes de continuar, creo que tenemos que hacer un comentario en este registro de consola para que no moleste. Oh, hermoso. Ahora la consola está vacía. Ven aquí. Así que vamos a tener const array de datos de películas iguales. Ahora aquí vamos a tomar en algunos parámetros array comma movies, array coma. Generoso. Configura en una función de flecha. Bien, bien. Entonces vamos a, para cada uno, la película de aquí, RA dot para cada uno. Ahora vamos a tener un área de película aquí. Matriz de películas Const. Colóquelo en una matriz vacía como esta. Ahora, punto de película, ID de subrayado general, puntos para cada uno. Entonces aquí vamos a tomar en general, nuevo, configurarlo en una función de flecha. Abrir, cerrar corchete, constante, nombre es igual a puntos generosos encontrar. Entonces lo que estamos haciendo aquí es buscar a los generosos con su identificación. Entonces si los generosos existen, tenemos que extraer el nombre del general y luego meterlo en nuestro array es tan simple como eso. Abrir y cerrar paréntesis y justo dentro de los paréntesis, abrir y cerrar llaves, tomando el ID y luego fuera del id de paréntesis, vamos a hacer id igual. Y entonces aquí tenemos que escribir la condición. Si. Entonces, cuando encontremos lo generoso por ID, todo lo que tenemos que hacer es extraer el nombre y empujar el nombre en estas matrices de películas. Así que quiero cambiar el nombre de estas películas array a algo más legible. Y voy a hacer películas generales. Creo que eso va a ser más legible. Películas enero, algo así. Entonces si encontramos la cena también, tenemos que hacer es mover a sus generales, puntear push. Tenemos que empujarlos a la matriz. Y voy a hacer nombre, puntos, nombre. Es tan sencillo como eso. Entonces, habiendo hecho esto, siguiente en la fila es comprobar si la película tiene un camino de telón de fondo, que es si la película tiene un póster de película o una imagen de película. Entonces vamos a tener la condición por aquí. Si las trayectorias de telón de fondo de puntos de película, subrayan la ruta. Si existe la película con trayectoria de telón de fondo, entonces tenemos que introducirla en la matriz de películas que pasamos por aquí. Todas estas estufas se explican por sí mismas. Mi explicación es bastante sencilla, así que definitivamente conseguimos las Gs. Entonces voy a hacer película array dot bush. Entonces, ¿qué estamos empujando exactamente? Necesitamos la identificación. Voy a hacer película dot ID separado con una coma. Oh Dios mío, esta inteligencia de aquí en realidad está bloqueando estas cosas. Ahora se ha ido. Tenemos el nombre, así que tenemos que extraer el nombre de la película. Y vamos a hacer película.donde nombre original, película punto nombre subrayado original. Y luego lo voy a hacer. Si el nombre de la película existe, entonces tenemos que obtener el nombre de la película y L's, vamos a obtener el título original del punto de la película. Entonces tenemos que conseguir el título de la película si el nombre de la película no existe, porque el título de la película es lo mismo que el nombre de la película. Entonces a veces tal vez el administrador podría usar el título para guardar la película, o puede usar el nombre, algo así. Y por eso estamos teniendo esta condición por aquí. Entonces la siguiente línea de término es obtener la imagen. La imagen que voy a hacer, puntos de película, trayectoria de telón de fondo. Y por último, para los generales, vamos a hacer películas, general. Diapositivas de puntos. Entonces, lo que queremos hacer ahora es cortar realmente a los generales. Déjame explicarte a qué me refiero con eso. Por ejemplo, todos ustedes saben que una película puede tener varias generosas, sí. Entonces en una película puede pertenecer a, digamos acción de aventura, ya sabes, cosas así. Entonces si la película tiene menos, supongamos diez cenas, queremos ir a buscar sólo tres cenas. Entonces, si una película pertenece a cinco a seis generosos, solo necesitamos tres de los generosos. Entonces voy a hacer cero slash tres. Eso es simple como a, B, C. Entonces aquí tenemos que verificar si he hecho algo bueno, bien, bien. Cuando ejecutamos la aplicación, queremos darnos cuenta si hay algún error de valor. Ahora ya terminamos de configurar la primera condición. La segunda condición es simple en la base de datos Team DB, te puedo asegurar que tenemos miles de películas por ahí. Pero ahora queremos ir a buscar sólo las películas. Sí, así que no queremos 90 películas son 100 y superiores, solo necesitamos 80 películas. Entonces también tenemos que establecer la condición para eso. Aquí voy a hacer const, obtener datos de películas, configurarlo en una función sinc. Y luego dentro de la función, vamos a tomar una API coma generales coma, paginación. Y luego vamos a establecer la paginación falsa. No te preocupes, obtendrás la G es claramente suficiente. La última vez que el código aquí voy a hacer const movie array, equa, configurarlo en una matriz vacía como esta. Entonces esta área de película por aquí que pasamos como derechos de parámetro dentro de la matriz de datos de películas. Ahora lo estás consiguiendo. Así que vamos a recorrer las películas para buscar sólo 80 películas que voy a hacer. Por que me iguale a uno. El punto y coma termina. Después película array longitud de punto. Entonces, si la longitud de punto de matriz de películas es menor que 80, y si yo es menor que diez punto y coma y vamos a incrementar i, i plus, más. La función sinc va a devolver una promesa, entonces tenemos que esperarla. Entonces voy a hacer un peso actúa usado puerta extraña. Entonces, ¿qué vamos a conseguir que en la parte de atrás tick, API y signo de dólar aquí vamos a hacer página y por favor tenga cuidado por aquí para que no se meta en problemas. Y entonces si existen, vamos a mostrar lo pagado y no vamos a mostrar nada. Entonces lo que voy a hacer página así que si page equa sale afuera, las horas no mostraron nada preocuparse. Voy a explicar cada línea de código. Vamos a escribir el código y ROE de película. Entonces vamos a tener sus resultados. Karma, zona de cine. Más tranquilo, generoso. Entonces habiendo hecho esto, vamos a devolver la matriz de películas. Entonces, por último, tenemos que encajar la película. Ahora se ha establecido la condición. Vamos a ver la película rápidamente. Vamos a exportar esta función porque tenemos que despacharla como derechos de acción dentro de la página de Netflix. Entonces voy a hacer const, películas gordas, equa, crear un funk de sincronización. ¿Correcto? Dentro de esta función, vamos a tomar Netflix. Y aquí mismo vamos a golpear la tendencia de slash de Netflix porque también queremos ir a buscar la película por trenes. Así que de nuevo, vamos a tomar en la función asincrónica, asincrónica y esperar. Ya lo sabes. Aquí vamos a tomar en este tipo. También queremos ir a buscar las películas por su tipo. Podría ser serie, película de temporada. Ves una película o para terminar. Entonces, ya sabes, tipos de película que asiste al coma. Y aquí vamos a tomar en la API troncal como segundo parámetro dentro de esta función. Entonces esto nos dará acceso a los estados. Entonces debido a nuestra función, voy a hacer aquí const Netflix slice. Así que vamos a tener acceso a la rebanada de Netflix. Y a partir de ahí obtendremos los generales, lo pondremos en myfunc, api dot gets, getState. Te dije que esto nos va a dar acceso al estado. De los estados. Podremos agarrar las películas. Es tan sencillo como eso. No te preocupes, todavía tengo que pasar por la explicación para que obtengas los datos esenciales lo suficientemente bien. Ecua obtiene datos de películas, ¿verdad? Estamos en esta función rompiendo el dólar a lo grande, abrir y cerrar el corchete rizado. Ahora tenemos que golpear el tempDB base URL slash trending porque queremos encajar la película por trenes. Ya te lo dije antes. Slash trending también. Si está de moda y tenemos que conseguir la pipa de la película. Si es serie, si es película de temporada. Y también queremos conseguirlo por la semana slash week. Bien, aquí tenemos que asignar nuestra API, API en clave Bosco, equa, mi clave API más una coma aquí mismo. Generoso. Y luego establecer esto en verdad. Entonces, si el general es bajo, eso es cierto. Entonces sólo queremos ir a buscar la película. No sé qué es lo que está mal por aquí más. Bien, veamos algo. Aquí tenemos que cerrarlo con los paréntesis. Creo que eso es sólo el aire. Bien, entonces habiendo hecho esto, échale un vistazo. Este es un ancho a. Entonces tenemos que asignarlo a una variable. Y voy a hacer const data. Y luego vamos a obtener nuestro resultado de los datos es lo que S otra vez, asignarlo así. Guarde la aplicación. Y vamos a ver. Dice generoso no está definido y, bueno, chicos, echen un vistazo. Se supone que este tipo es generoso y vuelves a ahorrar, veamos qué dice. Está funcionando perfectamente bien, pero aún no tenemos nada en la consola. Regresa y vayamos a la página de Netflix Dentro. Bien, vamos a formatear el código. Consigamos la sangría adecuada. ¿Correcto? Después de esto, vamos a tener const, equa cargado generoso, usar Selector. Asegúrate de importar el uso seleccionar todo de React, redox on hazy. Utilizan selector es una función y escriben para ejecutar esta función. Vamos a tomar en los Estados. Y voy a hacer punto estatal, netflix, punto, generoso cargado. Entonces lo vamos a tener en los efectos de EU. Tenemos que despachar el derecho de acción dentro de los efectos de Estados Unidos. Acabo de duplicar a este tipo de aquí. No tengas miedo, ¿verdad? Dentro. Lo que voy a hacer son verdaderos reflejos y cortar esto. Ahora. Entonces ellos solo palo de ir a buscar películas es cuando se carga la degeneración. Así que vamos a condicionarlo por aquí. Si las cenas están cargadas, entonces queremos despachar el método fetch movie así y asegurarnos de importarlo en la parte superior. Aquí va a buscar películas de la tienda, ¿verdad? No sería el método fetch movies, vamos a interrumpir todo el tipo en el tipo de película que queremos buscar todo tipo de película. Uh-eh. Bien, así que habiendo hecho esto, así que queremos que estos se enciendan cuando el componente se renderice. Entonces lo que voy a hacer es tomar la matriz de dependencias porque no depende de nada por ahora para que se encienda , guarde la aplicación. Y luego tenemos que volver al índice de las bufas. Desplázate hacia abajo hasta donde tenemos el método fetch movies. Y aquí tenemos que poner slash así. Una vez hecho esto, tenemos que terminarlo también con punto y coma por aquí. Y entonces aquí voy a hacer console.log. ¿Qué queremos buscar? Queremos registrar los datos aquí. Entonces voy a hacer datos, guardar la abrogación. A ver si hay algo malo otra vez, está bien. Vuelve al navegador y aquí tenemos la promesa que es gastar. Ahora abre esta promesa y luego ve el resultado por aquí. Ya ves que tenemos 80 películas, ¿verdad? Llevar este IRI está en esta hermosa. A mí me gusta. Entonces aquí hemos hecho algo grandioso vi. Ahora déjenme exponer los detalles. Bien, aquí tenemos los generadores de películas, que es Drama, sí, el ID de la película. Esto es por aquí con el ancho de la imagen, en este caso, el camino del telón de fondo. Aquí está el camino de telón de fondo. Y este es el nombre de la película, The Last of Us. Entonces eso es lo que es. Vamos a abrir lo generoso te darás cuenta de que la cena de aquí es una. Sí. Entonces tendrás algunas películas con más de una generosa veamos, este tipo de aquí. Tiene tres generosos. Pertenece a la ciencia ficción, aventura y acción. Entonces eso fue lo que hicimos cuando condicionamos el número de cenas a buscar. Este tipo se ha vuelto muy generoso y así sucesivamente y así sucesivamente. Nuevamente, repasemos el código para que lo entiendas lo suficientemente bien. Entonces aquí estamos para comer a través de los generales. Y en esta línea, estamos tratando de establecer para cada generoso con su identificación. Siempre que consigamos una cena que tenga una identificación, entonces tendremos que extraer el nombre e introducirlo en las películas generosa matriz. Eso es que Lee era lo que hacíamos aquí. Y por aquí en la segunda condición, lo que hicimos fue comprobar si la película tiene un camino de telón de fondo. En este caso, déjame mostrarte. Este es el camino de telón de fondo. Si la película tiene un camino de telón de fondo y entonces nos interesa esa película. Eso solo es el tipo de películas que una mujer de fago. Así que vamos a conseguir la identificación de la película, que está por aquí. El nombre de la película o título de la película, que es este tipo de aquí. Y también la imagen que es el camino de telón de fondo Aquí. Lo es. Habiendo hecho todo esto, entonces tenemos que rebanar a los generosos porque no queremos encajar a más de tres generales en una película. Entonces cuando guarde, bien, déjeme mostrarle, supongamos que no queremos encajar más de dos. Cuando guarde la aplicación, vuelva al navegador justo encima en la consola. Abramos lo generoso para que veas a lo que me refiero con eso. Ahora, esta película tiene sólo un género. Y aquí tenemos dos generales. Se puede ver ahora que tenemos limitados, el número de géneros tiene que ser dos. Por lo que puedes decidir buscar más de dos generosos en una película. Entonces eso fue lo que hicimos aquí. Y claro que empezamos tres variables. Tenemos la variable ID, nombre, imagen y general. Entonces la idea almacenará el ID, el nombre de la película se almacenará en el nombre. La trayectoria del telón de fondo de la película se almacenará en la imagen, y así sucesivamente y así sucesivamente. Entonces aquí mismo, lo que estamos haciendo es sencillo. Nosotros dijimos, mira, no queremos ir a buscar película que esté por encima de 80. Y como puedes ver en esta matriz, déjame mostrarte. En la parte inferior, verá que la longitud de esta matriz es de 80. A ver si podemos acercarnos un poco. Bien, ¿se puede ver así que no queremos ir a buscar películas que estén por encima de 80 Sí, así que eso fue lo que hicimos aquí. Y por último por aquí, lo que hicimos fue buscar la película según la tendencia, la semana de tendencia, y el tipo de película. Entonces es tan sencillo como eso. Entonces, habiendo hecho esto en la próxima conferencia, procederemos a exhibir las películas, ¿verdad? Estamos en la interfaz de usuario, y por supuesto, va a ser extremadamente impresionante. Espero que hayas disfrutado de esta conferencia y por favor hazlo bien en hacer preguntas si estás confundido. Entiendo que esta conferencia en particular es bastante complicada, pero si prestas suficiente atención, definitivamente obtendrás las G's. Nos vemos en la próxima conferencia. 96. 94 Estado mundial: Muy bien, así que en la conferencia anterior, logramos obtener los datos de la película. Y ahora lo que vamos a hacer es colocarlo en nuestro escenario global para que los componentes del imperio puedan comunicarse con estos datos. Volver al código VS. Y lo primero que vamos a hacer, bien, estamos en la función de buscar películas. Primero, tenemos que quitar el registro de la consola. Y entonces aquí voy a hacer retorno, obtiene datos de películas, así de sencillo. Entonces, habiendo hecho esto, tenemos que agregarlo a esta mancha. Ven aquí, resalta de longitud 66 a 69 duplicados. Entonces tenemos que deshacernos de los generosos cargados. Entonces aquí vamos a llamar a la función fetch movies. Si se cumple la función de películas de la Fed, entonces podemos tomarla del estado así. Entonces vamos a hacer puntos de estado desde el estado. Vamos a conseguir las películas, luego la acción central que carga útil. Entonces, habiendo hecho esto, podremos comunicarnos con los datos de la película en cualquier parte de la aplicación porque se ha agregado al estado. Volver a Netflix punto js. Y entonces aquí voy a hacer Películas equa tu selector. Por lo que utilizan seleccionar esos, nos dan acceso a los estados. Y claro, es una función, ¿no? Estamos en la función. Vamos a tomar los estados. Entonces aquí vamos a hacer películas state dot, netflix dot, tan simples como eso. Y ahora somos capaces de comunicar cuáles son los datos. Déjame mostrarte. Ven aquí. Vamos a borrar todos estos registros de la consola. Aquí. Voy a hacer console.log. Registremos películas para que las veas. Guarde la aplicación en el navegador. Papi. Se puede ver ahora tenemos bucle infinito de los datos. Ya ves, intentemos abrirla. Ves esto exactamente es lo que las puertas redox. Entonces, si se agrega algo a esta fecha por aquí, no podríamos conseguirlo en todas partes dentro de la aplicación. Así como puedes ver por aquí. Ahora hemos puesto los datos de la película disposición para su consumo. En la próxima conferencia, comenzaremos a consumir los datos. Nos vemos en la próxima conferencia. 97. 95 Stop el bucle infinito: Bien, así que antes de pasar a la siguiente conferencia, tenemos que hacer algunas cosas de configuración por aquí. Entonces cuando observes la consola, te darás cuenta de que tenemos un bucle infinito por aquí. ¿Bien? Entonces esto es a lo que tenemos que ponerle fin. Se pueden ver los datos, que es que las películas se están iniciando sesión en la consola Infinitamente. Sí. Entonces lo que vamos a hacer ahora, volver a la página de Netflix por aquí, justo en las líneas 36. Sólo voy a hacer un comentario al respecto. Seguro, en el navegador, Daddy's, y luego actualizar. Entonces el bucle infinito va a ralentizar tu laptop. Es decir, esa es la razón por la que coloqué los comentarios en el registro de la consola por aquí. Ahora, tu máquina puede ser un poco más rápida que antes porque el bucle infinito en realidad estaba ralentizando todo. Bien, pasemos a la siguiente conferencia donde comenzaremos a mostrar los datos justo en la pantalla. Nos vemos entonces. 98. 96 Renderizar la película en la pantalla: Bienvenidos de nuevo a todos. En la conferencia anterior, logramos recuperar las películas de la API CMDB, y luego bloqueamos las películas en la consola. Entonces en esta conferencia, vamos a mostrar las películas en la pantalla para que los usuarios finales puedan interactuar con las películas, ya sea haciendo clic en las películas para ver o agregando las películas que les gustan pagadas. Entonces, sin más preámbulos, comencemos. Cree rápidamente un nuevo componente llamado contenedor deslizante, ¿verdad? ¿Cuáles son los componentes? Haga clic con el botón derecho. Nuevo Archivo. Contenedor plano punto g es otro. También, correcto, para traer los componentes que vamos a crear. deslizador de película punto g es Comando B. Para cerrar el explorador. Entonces tengo que borrar el índice de constantes, cerrarlo hacia abajo, cerrarlo hacia abajo. Lo siento, no eliminar. Tenemos que cerrar algunas de las páginas. Ahora listo para traer el contenedor slider, cada FCE para generar nuestro componente funcional y también, lo mismo aquí. ¿Correcto? Bien, así que abre los Cheers de Netflix. Justo aquí. Vamos a renderizar el contenedor deslizante. Desplázate hacia abajo exactamente el mismo lugar donde corrimos que la tarjeta, la vamos a borrar. Entonces voy a hacer contenedor slider aquí es asegura de importarlo en la parte superior por aquí. Entonces habiendo hecho esto, entonces otra cosa que tenemos que hacer de nuevo es pasar las sondas de película al contenedor deslizador. Entonces voy a hacer aquí películas, películas. Entonces volvamos al contenedor deslizador y recibamos estas sondas. Contenedor Slater. Entonces aquí está para desestructurar las películas. Habiendo hecho estos vienen aquí, tenemos que importar componentes estilizados, comenzar desde componentes de inicio a continuación. También tenemos que importar el de película desde el deslizador de película. Entonces básicamente lo que vamos a hacer es seleccionar las películas que queremos mostrar en una fila. Bien, entonces en fila queremos exhibir diez películas. Así que recordemos que traemos más de 80 películas. Sí, entonces en cada fila queremos exhibir diez películas. La forma en que vamos a hacer eso es usar el método slides. Sí, así que eso sería capaz de seleccionar de principio a fin, por ejemplo vamos a venderlo 0-10, 10-20, 20-30, y así sucesivamente y así sucesivamente. Vamos a tener un método llamado conseguir películas entre. Así que vamos a conseguir que las películas estén entre un rango en particular. Déjame mostrarte. Entonces este método va a tomar en inicio y fin como parámetro y luego configurarlo en función de error. Por último, vamos a devolver películas, que es este tipo de aquí que pasamos como props, películas, puntos, diapositivas. ¿Bien? Entonces lo que pasa ahora mismo es que vamos a entrar en estas películas donde tenemos todas las películas, más de 80 películas. Sí. Así que vamos a entrar en estas películas y luego cortarlo de la manera que queramos. Déjame mostrarte. Por lo que queremos seleccionarlo de estadísticas, coma y están aquí también se puede hacer desde y remolcar barcos. Quiero dejarlo así o empezar y terminar. Entonces, habiendo hecho esto, vamos a implementarlo en la interfaz de usuario para que lo entiendas lo suficientemente bien. No necesitamos este dv por aquí. Todo lo que necesitamos aquí mismo es una barra deslizante. Tenemos que hacer una clase de ella convirtiéndola en componentes de inicio. Const slider wrapper, igual stout, dots, div, y luego tomar el asiento trasero. No sería el asiento trasero donde empezaremos a aplicar estas toallas. Bien. Así que bien, ¿no sería el envoltorio deslizante, vamos a renderizar el deslizador de la película. Mueve el control deslizante así y luego ciérralo con la etiqueta de cierre automático. Así que aquí mismo, vamos a pasar los datos como sondas hacia abajo en el deslizador de la película. Entonces voy a hacer equa de datos, abrir y cerrar corchetes. Vamos a llamar al método conseguir películas entre. Entonces queremos conseguir películas. 0-10. Sí. Y aquí afuera voy a hacer título solamente, solo en Netflix. Entonces lo que voy a hacer es destacar a este tipo y luego duplicarlo seis veces. Entonces ahora ya estamos cortando las películas. Ahora aquí cortamos la película y de 80 películas, estamos consiguiendo 0-10, derecho a imprimir la primera fila y la segunda fila, estamos consiguiendo 10-2020 a 30, 30-4040 a 50 por aquí. 50 a 60. 60 a 70. Lo principal. Eso es todo. Bien. Sí, conseguimos hasta 80 películas. Entonces aquí voy a hacer 70 a 80, todo genial. A continuación, tenemos que cambiar el título. Entonces estos aparecerán en la parte superior de cada fila para darle un nombre descriptivo a ese rol, por ejemplo aquí voy a hacer tendencia en películas de acción, películas románticas, y así sucesivamente y así sucesivamente. Entonces entiendes muy bien todos estos tops. Tienes que hacerlo a tu final. Aquí voy a hacer nuevos lanzamientos. Nuevos lanzamientos populares en Netflix. Creo que tenemos que arreglar las cosas de manera ordenada. Voy a llamar a este tipo justo dentro de la acción, voy a pegar destaca la acción, cortarla, y luego pegarla aquí mismo para los nuevos lanzamientos. Bien, dejémoslo así está bien. Una vez hecho esto, pasemos a los deslizadores de películas, donde mapearemos a través de las películas y las mostraremos en el deslizador de películas de pantalla. Entonces, lo que vamos a hacer ahora mismo, primero, vamos a desestructurar los datos y el título. Déjame mostrarte este título por aquí y estos datos. Así que los acabamos de desestructurar. Los pasamos hacia abajo al deslizador de película como, como sondas. Entonces ahora tenemos que volver a los deslizadores de películas y luego recibir esos apoyos sobre el deslizador de película. Y luego con los datos estructurados y el título, ¿verdad? No sería este div, vamos a darle a este div un nombre de clase de slider, ¿verdad? Dentro del div, vamos a mapear a través de las películas. Ahora voy a hacer datos, que es este tipo de aquí que viene del contenedor slider. Y ya sabes que a este tipo de aquí se le asignan las películas entre método y las películas consigue entre método está devolviendo las películas. Sí. Bien. Sé que entiendes todas estas pestañas. Deslizador de película, y luego voy a hacer mapa de puntos de datos. Vamos a tomar en el índice de coma de la película. Justo aquí. Voy a regresar, vamos a devolver la interfaz de usuario. Pero en este caso, tenemos que renderizar a la compañía de tarjetas porque queremos mapear a través de las tarjetas. Entonces lo que voy a hacer es cortar así. Y por favor, asegúrate de importarlo en una tina. Datos de película iguales, vamos a asignarle una película. El índice es igual al índice. Por supuesto que tenemos que especificar la clave va a ser el id de punto de película, más cerca con la etiqueta de cierre automático. Cuando guardas y revisas en el navegador, la idea es, ¿ puedes ver ahora mismo ? Puede que no lo tengas mostrado dinámicamente simplemente porque todavía estamos por hacer eso. Pero ahora mismo, ¿puede ver que hemos logrado mapear a través de las tarjetas Bien, vamos a mostrar los detalles correspondientes. Vuelve al código VS y luego abre la tarjeta. G es que estamos en el auto, j's, tenemos que desestructurar los datos de la película. Déjame mostrarte la película. El tau de aquí viene del control deslizante de la película. Y luego asignamos la película, los datos de la película. Sé que entiendes todas estas cosas. Así que vuelve a la tarjeta. Gs no han desestructurado los datos de la película. Tenemos que mostrarlos dinámicamente. Entonces aquí tenemos que borrar todo así. Entonces la fuente de esta imagen va a estar viniendo de la CMDB. Especificar el Ártico. Voy a hacer HTTPS colon forward slash image.cmdb.org slash d slash p slash w 500. Entonces aquí vamos a tener señal de $1 y luego abrir y cerrar el corchete. Y aquí vamos a hacer Movie Data dot image. Cuando tengas siete años, compra el navegador, los IDEs. Puedes ver ahora que hemos logrado exhibir en las películas dinámicamente. A mí me encanta esto. Esto es interesante. Ves nuestro derecho. Pero aunque, si pasas el cursor sobre las películas, vas a ver los datos estáticos . Puedes ver como el rojo, notar la acción y todas estas cosas. Así que vamos a llamarlos dinámicamente. Vuelva a los componentes de la tarjeta y por aquí al pasar el cursor, resalte y copie. Ven aquí. También queremos mostrar la imagen del póster correspondiente, limpiarla y pegarla aquí. Para el video, vamos a vivir el video porque no tenemos acceso al video CMDB, así que solo tenemos que dejar el video ahora mismo. ¿Qué es lo que tenemos que hacer otra vez? Tenemos que mostrar el título. Entonces, para mostrar el título, tenemos que borrar esto y luego tomar los corchetes para permitirnos escribir JavaScript entre GSA. Entonces lo que voy a hacer ahora es el nombre del punto de datos de la película. Volvamos a donde tenemos la película generosa. Por aquí. Vamos a mapear a través de este duro ahora mismo. Entonces, lo que voy a hacer es borrar la etiqueta LI por ahora y luego abrir y cerrar llaves, datos de película, dot mob. Entonces estamos mapeando a través de lo generoso ahora mismo. Entonces voy a tomar en general, ponerla en nuestra función, ¿no? Estamos en la función, vamos a volver a tener la etiqueta LI, ¿verdad? Estamos en la etiqueta LI. Tenemos que exhibir la película generosa, y voy a hacer general, tan simple como eso. Vamos a guardar y ver en el navegador. En cualquiera de la película. Puedes ver que esta película es Babilonia. Cuando cierras el cursor sobre esto, este es Avatar, el camino del agua. Todo bien. ¿Puedes ver la última semana? Algunas de las películas solo tienen un título y algunas de las películas también. Tiene más de un título. Entonces, sí. Entonces, cuando pasas el cursor sobre esta película, Pantera Negra, Wakanda para siempre. Entonces las cosas empiezan a tomar forma. Por encima de Andy tienen una rueda de remo de agua. El último deseo. Y todas estas cosas, todo está funcionando perfectamente bien como se esperaba. Y seguro que me está encantando su resort. Entonces, en la siguiente conferencia, vamos a estilizar el componente slider y tener todo alineado correctamente. Esto es todo por ahora. Nos vemos en la próxima conferencia. Mantente enfocado y cuídate siempre. 99. 97 Componente de película de estilo: Bienvenidos de nuevo a todos. En la conferencia anterior, mostramos las películas en la pantalla. ¿Puedes ver? Entonces entiendo que este componente no es hermoso, pero aunque tampoco se ve feo. Entonces en esta conferencia, seguiremos adelante para estilizar este componente y hacer que se vea extremadamente hermoso. Proceder al código VS. Y comencemos. Justo cuando el deslizador de la película. Primero, vamos a partir de empresas de inicio. Y luego a continuación, vamos a hacer const contenedor equa, iniciar punto d. Así que vamos a crear rápidamente este tipo en la línea superior es para resaltar de los carriles 122, líneas 18, atrapados. Dentro del formato contenedor, el código con más bonito. Habiendo hecho esto, vamos a tener otro div, ¿verdad? Para traer el div contenedor con un nombre de clase de envoltorio. Y nuevamente destaca de las líneas 112, líneas 15 cortes, pegadas aquí. Formatea el código con bonita también. Justo después del contenedor, vamos a tener una etiqueta en la cabeza. Y aquí vamos a tomar en el título, que es este tipo de aquí que se desestructuraría y viene del contenedor slider. Aquí, es. Ahora, cuando hagamos esto, tendremos el único en Netflix trending ahora, popular en Netflix y el resto de ellos. Entonces los vamos a mostrar en la parte superior de cada rol para darle un nombre descriptivo a ese rol, para describir a los veteranos, por así decirlo. Entonces, habiendo hecho esto aquí mismo, vamos a darle al contenedor un hueco de 0.7 rem. Bien, así está bien. Vamos a tenerla posición. Realmente Fiesta del Té. Habiendo hecho esto, estilizemos rápidamente la etiqueta oculta. Él había ganado. Démosle un margen a la izquierda. El margen izquierdo es de 50 píxeles. El tamaño de la fuente es de 25 píxeles. La familia de fuentes, voy a elegir esto por aquí. Puede decidir darle cualquier familia de fuentes de su elección. Y esa es su propia especificación o prescripción, por así decirlo, sigamos. Justo después de la etiqueta de la cabeza. Vamos a apuntar al envoltorio. Déjame ver. Aquí está el envoltorio. El envoltorio, vamos a apuntar al deslizador y luego estilizarlo. Deslizador oscuro. Entonces vamos a tenerlo display flex. Y esto alineará la totalidad de los elementos en cada fila en el navegador. ¿Puedes ver? Bien, entonces creo que el relleno es demasiado. Entonces tenemos que desplazarnos hasta aquí. Hagámoslo parte en un solo rem save. Bien, es bueno. Piensa también, es demasiado, pero bien, sigamos adelante. Definitivamente arreglaremos las cosas. Entonces aquí lo vamos a dar. Déjame mostrarte algo. Cuando observes la pantalla, te darás cuenta de que las tarjetas ya no están tomando el ancho apropiado que le asignamos. Sí. Entonces lo que vamos a hacer ahora mismo es que con él va a ser contenido máximo. Cuando guardas en el navegador, ves ahora todo está genial. Bien, así que si también observas la pantalla, verás el fondo rojo en la tarjeta. Esto es lo que no queremos en absoluto. Lo usé en la conferencia anterior con fines docentes. Es solo por ejemplo sake. Regresa, abre la tarjeta. Jazz. Bien, dentro de la tarjeta, solo tenemos que resaltar el color de fondo. Bien, límpialo. Seguro en el navegador. Papi. Bueno. Hola, bien. Poco a poco va tomando forma. Regresa. Ahora, vamos a abrir el control deslizante de la película. Vamos a darle un hueco para que haya espacio entre cada carta. La brecha va a ser 0.6 RAM. Transformar, traducir X cero píxeles. Entonces, cuando haces esto, aquí está el resultado. ¿Puedes ver? Así que vamos a hacer la transición de 1 s. facilidad de entrada y salida, margen a la izquierda. Hagámoslo 50 pixeles. Habiendo hecho esto, seguro, mira lo que tenemos ahora. Bueno. ¿Pueden ver chicos? De hecho se ve bien. Ahora bien, el margen en el eje izquierdo, no creo que haya necesidad el margen izquierdo sea de 50 píxeles. Así que en realidad podemos convertirlo en cinco píxeles. A ver. Muy bien, bien. Entonces habiendo hecho esto, déjame mostrarte justo en la parte superior, tenemos la etiqueta head one que se usa para mostrar el título. Pero en la pantalla, no lo verás simplemente porque la fuente es negra. ¿Puedes ver? Ahora cuando destaco todo, se vuelve factible. Entonces lo que voy a hacer ahora mismo es especificar el color de la fuente. Color. Hagámoslo blanco. Esto va a estar bien. Y ellos son estos. ¿Puedes ver? Bien, especifiquemos también el margen izquierdo de la fuente. Entonces hagámoslo cinco pixeles. Cuál es el margen izquierdo de la etiqueta Adriana que se utiliza para mostrar el título. Tienen razón chicos. Todo se ve extremadamente limpio. Esto es tan limpio y me encanta. ¿Puedes ver? Bien, así que lo siguiente en la línea es implementar el control deslizante. ¿Correcto? Creo que deberíamos hacerlo en la próxima conferencia. Esto es todo por ahora. Nos vemos en la próxima conferencia. Mantente enfocado. Los analistas se encargan. 100. 98 Optimización de rendimiento: Detrás de escena, me di cuenta de que el rendimiento de la aplicación se ve afectado un poco. Déjeme traerlo a su aviso. Cuando desplace la aplicación, te darás cuenta de que el top nav está tomando tiempo para cambiar su color de fondo a negro cuando la aplicación supera cero en los ejes y. Ahora echa un vistazo. También se toma tiempo. También te darás cuenta de que la aplicación se está desacelerando. Ya verás, no sé si puedes tomar nota de esto al final. Se puede ver que la aplicación es bastante lenta. Entonces antes de proceder a implementar este slider, tenemos que optimizar el rendimiento. Y eso se hará con React dot mamífero. Entonces tenemos que encontrar la manera de memorizar la aplicación. Entonces, un memo de punto de React es un alto de otros componentes que aceptan otro componente y funcionan como argumento procede al código VS a menos que se implemente rápidamente VS Code. Ahora volvamos al deslizador de películas. Primero. Lo que voy a hacer aquí es terminar el código dentro de React dot memo. Ahora voy a eliminar la función de error, eliminar el operador de asignación, y luego desplazarme hacia abajo. También tenemos que eliminar esta exportación. No hemos eliminado todas las paradas son así que tenemos que eliminar a este tipo. Y voy a hacer exportar valores predeterminados, Reaccionar punto, mamífero, abrir y cerrar paréntesis. Y vamos a tomar una función. Y justo dentro, también tenemos que tomar en el segundo argumento, que es el componente. Destaca todo por aquí, córtalo, ven aquí y pega. Bien, tenemos que acercarlo un poco más y más. Habiendo hecho esto, resalte, los paréntesis de cierre de React dot mamífero. Córtala. Entonces tenemos que cerrarlo por aquí, justo en la línea 18. ¿Ves que el error se ha ido? Ahora bien, este componente en particular está optimizado. También optimizemos los componentes de la tarjeta. Por supuesto que sabes qué hacer. Limpie la función de flecha, el operador de asignación. Aquí voy a hacer export default, React dot memo, tomando los paréntesis y luego vamos a tomar en la función resaltar así, cortarla, ven con él. Y pegar también resaltó los paréntesis de cierre de las memorias de punto de React. Córtala. Tenemos que cerrarlo aquí abajo. Déjame mostrarte aquí abajo así. Entonces, habiendo hecho esto, la aplicación sigue quejándose. Desplácese hacia abajo. Tenemos que eliminar estas exportaciones. ¿Puedes ver la aplicación? ¿Otra vez? Vamos a comprobarlo en el navegador. Así que vamos a desplazarnos hacia abajo. ¿Ya ves que todo está funcionando perfectamente bien? Echa un vistazo. Hola, chicos correctos. Entonces esto es todo para la optimización. En la próxima conferencia, procederemos con el control deslizante de la tarjeta. Nos vemos en la próxima conferencia. 101. 99 Control deslizante: Bienvenidos de nuevo a todos. En esta conferencia, vamos a implementar los iconos de control para el control deslizante para que los usuarios finales puedan deslizar las películas hacia la izquierda o hacia la derecha. Entonces, sin más preámbulos, comencemos el código VS. Lo primero que vamos a hacer aquí mismo es importar los iconos del icono de React scroll a la parte superior. Y por aquí voy a hacer las importaciones. Tenemos que importar el contorno del extremo izquierdo, el UTLA cabalga en macetas. Delineé el contorno de la coma izquierda, ¿verdad? Ahora todo esto viene de los íconos de React. Y así tenemos que resolver, arreglarlo con un tinte, igual que estos. Hermoso. Entonces habiendo hecho eso, la siguiente línea es renderizar los íconos, cierto, no serías tú. Así que justo después del div con el nombre de clase de wrapper, vamos a tener otro div. Vamos a darle un nombre de clase. Así que aquí vamos a abrir, abrir y cerrar las llaves también. Vamos a tomar el té de corteza. Entonces el nombre del clúster va a ser Slider dash. Y voy a llamar a estos a la izquierda para que indique para la izquierda. Sí. Eso es. Bien. Así que habiendo hecho eso, tenemos que cerrar la D. Bien, Derecha, ¿ No dejaría el div con el nombre de clase de acción deslizante Vamos a renderizar la capa de contorno más cerca con la etiqueta de cierre automático. Entonces la siguiente línea es para resaltar esta def, el div del nombre de clase de acción deslizante resalte de las líneas 152, líneas 17. Copia viene justo después del div con el nombre de clase de slider. Aquí está el div de cierre del control deslizante ClassName, y luego pégalo por aquí. Entonces aquí vamos a cambiarlo a un valor atípico aquí mismo. Voy a cambiarlo a la derecha. Bueno. Entonces, habiendo hecho esto, vamos a estilizarlo rápidamente dentro del componente de estilo. Bien, vamos a sacarlo. Por ahora. El control deslizante está justo dentro del envoltorio. Entonces, lo que voy a hacer ahora mismo, desplácese hacia abajo. Este es el envoltorio. Hay un deslizador, ¿verdad? Estamos en la goma. Déjame mostrarte esta diapositiva por aquí. Entonces entonces queremos estilizar la acción del deslizador. Entonces, después de los corchetes de cierre del control deslizante ClassName, vamos a estilizar el slider subasta holandesa. Vamos a tener un flex de display. Justificar el contenido al centro, alinear los elementos a la posición central. Vamos a posicionarlo absoluto porque queremos que los iconos estén en la parte superior del control deslizante. Entonces vamos a tenerlo absoluto. Y recordemos que estas de aquí, la posición se fijó relativa o se establece en relativa, por así decirlo, hola, ¿verdad? Y por cierto, no estamos en clase de inglés por aquí. Lo siento por eso. Entonces el índice Z, índice z dash, hagámoslo 99. La altura, al 100%. La parte superior. La parte superior va a estar a la parte inferior. Va a ser cero. El ancho. Hagámoslo 50 pixeles. La transacción, la vamos a tener un segundo está fuera. O puedes hacer facilidad de entrada y salida lo que quieras. Entonces tenemos que estilizar el SVG. Svg, vamos a hacer como VG, el tamaño de la fuente. Hagámoslo dos al azar. Causal. Hagámoslo puntero. Vamos a darle un color. Hagámoslo blanco. Está bien. Guarda, y veamos qué tenemos en el navegador. Entonces chicos, estos son los íconos de aquí. Bien chicos, entonces los íconos aparecen por aquí. Déjame mostrarte, puedes ver que tenemos dos izquierda y derecha, alinearla correctamente. Entonces ahora lo que voy a hacer, desplazarse hacia arriba. Déjame mostrarte a este tipo que también indica el derecho. Este tipo que indica la izquierda. Tenemos que estilizarlo con cuidado. Entonces ven aquí. Voy a hacer a la izquierda. De izquierda, queríamos cero, derecha. De derecha, lo queremos a cero. Veamos ahora mismo el resultado de esta implementación. Bien. Todo parece muy bien. Y ahora se puede ver la flecha o la izquierda. Y se puede ver la flecha a la derecha. Esto es lo que el fin esperado ys. Bien, así que habiendo hecho todo esto, quiero explicarte algo. Entonces la idea es esta, no queremos que las flechas aparezcan encima de las cartas como predeterminadas, como estas. Sí, así que queremos que las flechas aparezcan solo cuando colocamos el mouse sobre el control deslizante. Entonces, si el ratón no está en el deslizador, no vas a ver las flechas. Vamos a implementar rápidamente. Ven aquí, desplázate hasta la parte superior. Vamos a declarar las variables de estado necesarias para ser utilizadas. Y antes de hacer eso, tenemos que importar EU hizo gancho y un término. Y aquí voy a generar los fragmentos de uso. Entonces voy a hacer sus estados. Y aquí están los fragmentos. Entonces primero vamos a tener visibilidad de control. Entonces vamos a establecer la visibilidad de control en false. Entonces el estado inicial va a ser falso aquí mismo tienes que hacer que la C esté en carb, establecer controlar la visibilidad y el estado inicial va a ser falso. Entonces ahora cuando el usuario coloca el mouse sobre la tarjeta, queremos que se muestren las flechas. La forma en que lo hacemos es, vamos a la derecha. Estamos en el contenedor. Vamos a tener una constante por aquí. Voy a hacer Control de visibilidad, acuático. Controle la visibilidad. Y lo hace justo debajo, tenemos que implementar el on mouse enter n. nuestro mouse sale. Así que entre n, vamos a llamar a la función de configuración para actualizar el estado inicial. Establecer visibilidad de control. Y vamos a ponerla en verdad. La mayoría de las hojas. Vamos a establecer la visibilidad de control en false es autoexplicativo. Ahora, habiendo hecho eso, vamos a implementar la condición ahora, ¿no? ¿No quedaría el div con el nombre de clase de acción deslizante Tenemos que colocar una condición por aquí. Ahora voy a hacer si no controlar la visibilidad. Hagámoslo así. Y L's, también vamos a mostrar una cadena vacía. Lo mismo aplica por aquí. Si no controlar la visibilidad, lo que significa que si la visibilidad de control no existe, vamos a hacer Ninguna. Y ahora no vamos a hacer nada. Entonces, la idea detrás de todas estas cosas es estilizar esta neurona de aquí. ¿Bien? Entonces cuando bajamos por aquí, no puntea ninguno. Entonces vamos a tener con pantalla ninguno. Entonces esto ocultará los iconos de control. Y cuando usar coloca tu mouse en la tarjeta. Va a ser visible. Cuando guardas y compruebes que el navegador. ¿Puedes ver? Déjame mostrarte. Quito el ratón de la tarjeta. Ahora cuando coloque el ratón sobre la tarjeta, van a ver los íconos. ¿Puedes ver? ¿Coloca el ratón sobre la boca? Y todo está funcionando perfectamente bien como se esperaba. Ahora mismo, al hacer clic en el icono, no pasa nada. ¿Ves? Déjame mostrarte. Al hacer clic en el icono, no pasa nada. Por qué es simplemente porque no hemos implementado este deslizador. Así que pasemos a la siguiente conferencia donde implementaremos el control deslizante. Nos vemos en la próxima conferencia. Mantente enfocado en el cuidado holístico. 102. 100 Implementación de la barra deslizante: En esta conferencia, vamos a implementar el control deslizante. Por lo que al final de esta conferencia, no podremos mover las cartas hacia la izquierda ni hacia el borde derecho de la pantalla. Y definitivamente te van a encantar los resorts Angel. Empecemos rápidamente. Lo primero que vamos a hacer aquí es declarar una variable de estado innecesaria. Desplázate hasta la parte superior. Nosotros hemos importado EU sí gancho de la conferencia anterior. Y aquí mismo vamos a importar el usuario si gancho. Y vamos a inicializarlo rápidamente por aquí. Lista Ref, equa. Use costilla. Una vez hecho esto, vamos rápidamente a la variable de estado S3 de nubosidad. Y aquí vamos a generar los fragmentos de etapa de uso. Voy a llamarlo posición de deslizamiento hacia arriba. Vamos a establecer la posición del deslizador. Sí, va a estar en CUP. Y entonces el estado inicial del deslizador va a ser cero. Aquí vamos a tener constante. ¿Cómo se inició la dirección igual a nuestra función? Y entonces aquí vamos a tomar en dirección como parámetro. Así que vamos a hacer esta vez. Vamos a distanciar un punto de referencia de listas cuádruples, punto actual. Entonces, lo que vamos a hacer ahora mismo es obtener la posición real del carro en el eje x con respecto a la ventana gráfica. Y la forma en que podemos hacerlo es mediante el uso del método de vinculación de clientes del gueto. Obtener obtiene reclamaciones de vinculación por huevos. Por supuesto, es un método. Estamos consiguiendo la posición en el eje x y yo voy a hacer -17. Entonces si ahora vamos a tener una condición. Si la dirección es igual a la izquierda, si la dirección es un núcleo a la izquierda, la posición del deslizador es mayor que cero. Esa es la única vez que podremos mover la tarjeta. Simplemente significa que cuando haces clic en el icono de la izquierda, déjame mostrarte por aquí. Entonces este icono izquierdo por aquí, al hacer clic en él, también, si la dirección en el eje x es mayor que cero. Entonces lo que voy a hacer ahora mismo es listas ref punto. Tenemos que obtener la posición actual, esa corriente, y luego tenemos que estilizarla dot transform. Entonces queremos animarlo a la izquierda. Y entonces aquí le vamos a aplicar estilo. Vamos a hacer traducir x signo de dólar. Así que vamos a mover este deslizador 230 píxeles hacia la izquierda, la memoria. Cuando terminemos de escribir el código, lo explicaré simplemente para que todos lo entiendan lo suficientemente bien. Voy a hacer más distancia y luego aplicar los píxeles aquí. Una vez hecho esto, tenemos que establecer la posición para deslizarse hacia arriba posición más uno. Eso es lo más simple, los papás tienen razón. Entonces esto es para el lado izquierdo. También tenemos que implementarlo para el lado derecho. Sólo tengo que copiar de la declaración if. Destacar de las líneas cisteína a 19. Copia. Ven aquí, pega. Cambiarlos a la derecha. ¿Qué hace otra vez? Ahora vamos a hacer si la posición del deslizador es inferior a cuatro, entonces ¿solo podemos mover las cartas negativas 210 píxeles a la derecha? Es tan sencillo como eso. Y esto, esto debería ser menos uno, y esto debería ser más uno. Vamos a guardar la aplicación. Ahora veamos cómo podemos implementar esto en ambos lados. Bien, ¿cuáles son los div del nombre de clase de slider? Yo voy a hacer. Y esto va a ser listas ref. Entonces vamos a implementarlo en el icono. Aquí vamos a especificar el onclick, onclick del icono izquierdo. Tenemos que mover este deslizador hacia la izquierda. Entonces lo que voy a hacer ahora mismo es llamar a la función handle direction. Justo dentro, vamos a pasar por la izquierda. Voy a copiar el onclick. Voy a copiar el onclick. Vamos a pegarlo aquí. No sería un paseo en el Atlántico. Tenemos que cambiarlo para montar con estos. Creo que todo va a funcionar bien. Vaya al navegador. Asegúrate de refrescar. Vamos a moverlo a la derecha, vagabundo, vago, moverlo a la izquierda. Boom, boom, boom. ¿Puedes ver? Todo está rockin perfectamente bien como se esperaba. Esto me encanta, pero el deslizador es bastante lento. Regresa. Déjame mostrarte cuál es la acción deslizante. Hagamos que este 0.1 segundo esté fuera. Ahora vamos a darle una oportunidad de nuevo. ¿Ves que me encantan estos? Bien, todo está funcionando perfectamente bien. Es momento de explicarlo simplemente que todos lo entiendan lo suficientemente bien. Ahora, voy a recargar la página. 103. 101 Proyecto de panel (Crear una aplicación de reacción): En esta conferencia, vamos a empezar de cero para crear una nueva aplicación React. Así que bien, dentro de mi escritorio, voy a crear un nuevo directorio llamado dashboard. Haga clic con el botón derecho en nueva carpeta. Esto será captado tablero de instrumentos. El siguiente en la línea es arrastrar y soltar este directorio hacia abajo en el Código VS. Sólo voy a abrir mi código VS. Entonces ahora mismo, voy a arrastrarlo y soltarlo aquí. Cierre la página de muestra y luego maximice el código VS. Abra rápidamente el terminal integrado VSCode. ¿Correcto? No determinaría que no. Tenemos que generar una nueva aplicación React. Y para ello, tenemos que usar el comando MPS. Np x. Crear dash react, dash r. React se utiliza para construir una aplicación front-end. Por lo que tenemos que instalarlo en planos de registro directo. la placa de caldera necesaria que se necesita para desarrollar nuestra aplicación front-end instalará la placa de caldera necesaria que se necesita para desarrollar nuestra aplicación front-end, ¿verdad? Estamos en el directorio de clientes. Pulse la tecla Enter para que se encienda. La instalación de React está en curso. React js instaló un nido exitoso. Tenemos que entrar en el directorio de clientes donde instalamos React years CD, lo que simplemente significa cambiar directorio cliente. Justo aquí, vamos a hacer npm. Comienza, presiona la tecla Enter para que se encienda. Hermoso. Aquí está la página de Londres de una aplicación React. Esto es todo por ahora. En la próxima conferencia, limpiaremos las placas de caldera eliminando archivos innecesarios que no son necesarios para este proyecto. Nos vemos en la próxima conferencia. 104. 102 Limpieza de la placa de caldera: Bienvenido de nuevo a los retiros. En esta conferencia, vamos a eliminar flores innecesarias que no se necesitan en este proyecto. Y estas flores incluyen la prueba AP, logo dot SVG, reporte, web vitals y los datos de prueba de configuración. Entonces justo cuando el cliente abrió el SRC. Y aquí vamos a seleccionar logo punto SVG. Presiona la tecla de comando en tu teclado y luego haz clic para seleccionar reporte, web vitals, setup tests, logo dot SVG, arriba esa prueba. Haga clic con el botón derecho. Eliminar. Hermoso. Y ahora la aplicación se queja. Veamos de qué se trata el problema. Las teorías no pueden resolver a este tipo, ¿verdad? Entonces tenemos que dirigirnos al comando index.js P para que abra el cuadro de búsqueda en la parte superior. Y entonces vamos a buscar índice punto g es bajar esto un poco. Comando B para cerrar al Explorador. Entonces ya no necesitamos a este tipo. Denuncian, vetos web, resaltan y eliminan, guardan, y veamos de qué se trata el problema nuevo, están aquí mismo. ¿Se borra? ¿Cuándo ahorras? También tenemos que eliminar el logo punto SVG comando p, configurar cuatro arriba arriba. Destacemos y luego eliminemos logo punto SVG. Bien, así que también tenemos que borrar todo. A partir de la línea C hay dos líneas. 19. La etiqueta de encabezado de apertura a la etiqueta de encabezado de cierre. Límpielo. Guardarla bien, parece que todo está funcionando perfectamente bien. Ahora. Vamos a sacarlo en el navegador. Ahora mismo, vamos a usar un paquete Adriano para hacer algo como esto. Tablero. Guarda y echa un vistazo al navegador. Ahora, cuando observes la pantalla, te darás cuenta de que la cabeza una etiqueta está alineada con el centro. Vuelve al Comando P, y luego configura los CSAs. Aquí está. ¿Puedes ver Alinear Centro Entonces todo aquí mismo está alineado al centro. Destaca, límpialo, seguro en el navegador. Y ahora la cabeza un pavo se ha alineado a la izquierda. Este suele ser nuestro objetivo. En esta conferencia, vamos a desglosar la aplicación para entender la estructura y cómo se vio. Y después de eso, entonces configuraremos las estructuras de carpetas. Nos vemos en la próxima conferencia. 105. 103 Comprensión del flujo: Comprender el proyecto y configurar la estructura de carpetas siguiendo las mejores prácticas. En esta conferencia, vamos a entender el patrón de nuestra estructura de carpetas de proyectos. Vamos a desentrañar el proyecto y entender la gripe. Entonces en la pantalla está la aplicación de tablero React que vamos a construir en este curso. Vamos rápidamente a este proyecto. Justo aquí, ya tenemos la cima. Entonces, en la parte superior izquierda de la pantalla, tenemos el logo del panel de administración. Y en la esquina superior derecha, tenemos las notificaciones. En el borde izquierdo de la pantalla. Tenemos el lado. Ahora. Por aquí, tenemos los futuros componentes de información, el componente gráfico que muestra los componentes del hotel. Y justo debajo tenemos la tabla de transacciones n, la tabla de miembros recién unidos. Dicho esto, comprendamos rápidamente el flujo de la aplicación haciendo uso de la navegación lateral para navegar por los proyectos. Entonces por aquí tenemos a los usuarios. Cuando haga clic en el usuario, me va a llevar abajo para reutilizarlo como página de lista. Ves aquí es cuando haga clic en el botón Editar, me va a llevar al perfil del usuario. Usted ve aquí mismo, podremos editar un usuario y luego actualiza los datos. Y en la parte superior derecha de la pantalla tenemos el botón Crear. Por lo que esto nos llevará al componente crear usuarios. Y aquí está su hermosa. Procedamos con los productos. Ahora, hago clic en los productos. Me lleva hasta las hojas del producto. Así que aquí mismo podemos seleccionar productos individuales. Podemos ordenar el producto, filtrar, ocultar o mostrar cualquier columna que queramos mostrar. Y a partir de ahora eso no es necesario. Cuando haces clic en el botón Editar, te va a llevar a la página de productos individuales. Por lo que todo este componente en las páginas se creará en esta conferencia. Así que rápidamente heroína a código VS y vamos a crearlos. Comando B para abrir el Explorer, justo dentro del SRC. Haga clic con el botón derecho en nueva carpeta. Esto va a ser cogido componentes, ¿verdad? Estamos en el directorio competente. Vamos a crear las Carpetas competentes. Haga clic con el botón derecho en nueva carpeta. Seguro que vamos a tener los componentes de chat. Entonces esto se llamará gráficos. Entonces ahora mismo estamos en el directorio de chat. Vamos a crear los componentes del gráfico. Ahora. Haga clic en Componentes, Nueva carpeta. Y vamos a crear el total de visualización. Nuevamente, haga clic con el botón derecho en los componentes. Vamos a crear los widgets de orden de cierre de Top Nav , que se utilizarán para crear el componente de tablas de transacciones. Y por último, justo dentro de la empresa. Y nuevamente, vamos a crear el widget de miembros. Hermoso. Entonces las páginas incluyen, déjame mostrarte aquí también vamos a tener la página de lista de productos alrededor la página de lista de productos alrededor de la página de lista de productos individuales. Tendremos la página del producto cred. Cuando venga aquí. Usuarios, vamos a tener la página de lista del usuario, la página de perfil del usuario, la página del usuario. Bien, así que cuando vuelvas a casa, hemos creado el lado ahora la parte superior de los futuros productos. Pero chats que muestran total. Esta es la tabla de transacciones y el componente de miembros recién unidos. Entonces también tenemos que crear a este tipo en la parte superior de aquí. Para eso. Vuelve al código VS, haz clic derecho en componentes, nueva carpeta, y luego vamos a crear la comida futura. Entonces vamos a crear el componente filtrado, ¿verdad? Dentro del campo esa comida. En realidad, te estoy enseñando a escribir código como una perla. Esa es al menos la razón por la que quiero que todo sea sencillo. Así que ahora terminamos con esto, ¿verdad? Estamos en el SRC. Vamos a crear un nuevo directorio llamado pages. ¿Correcto? Cuando la página está haciendo clic con el botón derecho en nueva carpeta. Vamos a tener el hogar reajustando la página de nuevo. Vamos a tener la página del producto creativo. Vamos a tener la página del producto en sí, que son los productos individuales. Vamos a tener la lista de productos. Vamos a tener los usuarios. Bien, hagamos la lista de usuarios, perfil de usuario. Por último, vamos a tener el usuario create. Perfecto. Y ahora hemos estructurado con éxito nuestra carpeta. En la próxima conferencia, comenzaremos con el componente Top Nav. Para recapitular, ¿verdad? No lo haría el SRC, creamos un directorio llamado components rights. Dentro del directorio de este componente, tenemos los chats que muestran a los futuros miembros de la junta del hotel. Hicimos órdenes, hicimos lo suficiente y el Top Nav. Y derechos sobre en las páginas, tenemos la página de crear producto, el usuario crear, la página de inicio, los productos, que son los productos individuales, la lista de productos, usar como menos. El perfil del usuario es bastante sencillo. Entonces aquí está el componente Top Nav, los componentes suficientes laterales, el futuro componente info, los chats que el hotel split. Entonces este es el widget más antiguo, y este es el widget de miembros. Cuando hablas de las páginas, tenemos la página de lista del usuario, la página de perfil del usuario y también la página de creación de usuarios. Tenemos lo mismo para los productos. Esto es todo por ahora. Nos vemos en la próxima conferencia. 106. 104 TopNav: En esta conferencia, vamos a construir la compañía Top Nav. Pero antes de continuar, tenemos que instalar la interfaz de usuario del material, lo que por supuesto nos permitirá hacer uso de los iconos SVG. Mesas. Acaba de imputar Cualquier lote más rápidamente oculto al material ui.com. Y haz clic en Comenzar. En el borde izquierdo de la pantalla, vas a ver la bañera. Justo encima en la bañera. Tienes que dar click en la instalación. Aquí tenemos el asesoramiento sobre cómo instalar material. Tú. En este caso, sólo tenemos que copiar el comando npm. Copia, vuelve a VS Code, abre el terminal integrado VSCode, terminal, terminal nuevo. Pero mira, ya lo tengo abierto. Entonces lo que voy a hacer es a reclamos de CD y luego Comando V para pegar el comando npm para instalar material, haces clic en la tecla Enter en tu teclado para que se encienda. La instalación está en curso. Instalado, exitoso. El siguiente en línea es instalar Material Icon específicamente. Entonces aquí voy a hacer gestor de paquetes de nodo. Instalar agrega m UI slash, iconos, materiales de tablero, golpea la tecla enter para que se despida, todo listo, instalado, resta caída. La siguiente línea es crear el componente Top Nav. Y este componente se creará ¿verdad? Estamos en el directorio top nav. Así que haga clic derecho en la parte superior nav, nuevo archivo, y voy a llamarlo top Nav punto j es, quiero que note lo convencionalmente utilizado en nombrar este componente. Se llama la convención de nomenclatura Pascal, lo que implica que pongas en mayúscula la primera letra de cada palabra. Enseñar bueno, hermoso. Al pulsar la tecla enter, RFC, se generan los componentes funcionales. Y si este atajo no te funciona, todo lo que tienes que hacer es dirigirte a las extensiones y luego buscar a React. Native reacciona fácilmente snippets. Aquí está. Tiene que hacer clic y luego instalarlo al final. Regresa al Explorador. El siguiente en línea es crear el archivo CSS. Top Nav punto CSS. Cierra el Explorer. Entonces, procedamos con el componente Top Nav. Lo que voy a hacer ahora mismo es resaltar estos y luego limpiarlos. Ahora vamos a darle a este div un nombre de clase de contenedor Top Nav, ¿verdad? Estamos en el contenedor de navegación superior. Vamos a tener otro div con el nombre de clase de top nav wrapper. Por lo que el nav superior se dividirá en dos parciales diferentes, la porción del borde izquierdo y la porción del borde derecho. Por lo que se utilizará el borde izquierdo de la navegación superior para mostrar el logotipo. utilizará el borde derecho para mostrar la notificación y el perfil de administrador. Entonces aquí mismo vamos a tener un div. Dale un nombre de clase de arriba a la izquierda, justo dentro de este div, vamos a tener un span que muestre el logo. Y voy a hacer admin dash. Entonces queremos usar test como logo. Aquí. Voy a darle un nombre de clase. Logos. Bonito. Bien, vamos a renderizar rápidamente los componentes en la app Js common P set for ArcGIS. Y luego por aquí, solo tenemos que acercar el componente Top Nav con una etiqueta de cierre automático y asegurarnos de importarlo en la parte superior. Aquí en la terminal, voy a hacer npm arranques. Así que elementos para obtener la imagen real de las cosas que estamos haciendo. Aquí está el tablero de administración en la esquina superior izquierda de la pantalla. Derecha. Estamos en la casa de arriba. Bien, bien. Justo aquí fuera de este div con el nombre de clase de arriba a la izquierda, vamos a tener otro div con el nombre de clase de arriba a la derecha. Aquí es donde vamos a organizar la notificación y el perfil, justo cuando vamos a tener un div, darle un nombre de clase de top nav, icon container. Bien, dentro de este div, vamos a tener primero el icono de notificación. Y para obtener el icono SVG, tenemos que importarlo desde MIS íconos. Notificación de importación de en MUS slash icons dash materials. Entonces, aprovechemos esta oportunidad para importar todos los iconos necesarios que se necesiten. Más tranquilo. Aquí necesitamos el idioma, necesitamos el icono de configuración. Y por último, necesitamos el chat Babu, seguro o correcto. Entonces aquí vamos a acercar la notificación. Qué etiqueta de cierre automático. Y además, tenemos que darle un nombre de clase simplemente porque vamos a estilizarlo. Icono de navegación superior. Y aquí vamos a tener un lapso. Si el nombre de la clase de la insignia del icono superior, a la derecha, estamos en el HTML interno al que queremos mostrar como el recuento de notificaciones más alto, ¿verdad? Así que mira lo que voy a hacer ahora mismo. Voy a destacar de las líneas 11 a 14. Mantenga pulsada la tecla Mayús y toque la tecla de flecha hacia abajo para duplicarla tres veces. Solo tienes que seguir tocando la tecla de flecha hacia abajo tres veces. Entonces aquí tenemos que renderizar el lenguaje. Di por mi cabello o tres ajustes. Tenemos que renderizar gráfico Babu. Lo más sencillo es que esto tenga que ser notificaciones. Ahorra y veamos qué tenemos. Dice que la notificación no está definida. Sí, claro, tenemos que efectuar el cambio por aquí y volver a guardar. Perfecto. Así que aquí está el logotipo del panel de administración. Aquí la notificación y Laurie, las cosas no están dispuestas de la manera que esperas que sea. Es simplemente porque no tenemos estilizarlo. Entonces sigamos adelante para mostrar la foto de perfil del ejército. Justo después del div de cierre del nombre de la clase, top nav icon container, vamos a tener una etiqueta IMG, SRC equa. Sólo voy a copiar una foto aleatoria de un tipo en Internet y luego pegarla aquí. Emite equa. Así que vamos a acercarnos rápidamente con una etiqueta de cierre automático. Guardar en el navegador. Aquí está. Puedes ver, aquí está la foto del chico, sin embargo, no se ve hermosa como se esperaba. Y te dije la razón. En la próxima conferencia, cuando comencemos a estilizar esta compañía, definitivamente te encantaría. Bien, así que pasemos a la siguiente conferencia donde estilizaremos esta compañía. Nos vemos en la próxima conferencia. 107. 105 TopNav Css: En esta conferencia, vamos a estilizar la parte superior ahora de los componentes. Y al final, tendremos un Top Nav de aspecto muy bonito. Proceda rápidamente al Código VS. Abre la parte superior nav, CSS. Aquí está. Dividamos la pantalla. Ahora. Vamos a tener el CSS o el borde derecho de la pantalla. Y luego tendremos el componente superior izquierdo en el borde izquierdo de la pantalla. Procedamos con la imagen. Déjame mostrarte, ¿puedes ver que la imagen está ocupando toda la pantalla Y eso no me gusta. Vamos a estilizarlo rápidamente. Ahora tenemos que establecer para el nombre del clúster de la imagen. El nombre de la clase es admin, IMD. Copia. Ven aquí, puntos, luego pega el nombre del clúster de la imagen, abre y cierra llaves. ¿Verdad? Dentro de los corchetes, vamos a aplicar los estilos. El ancho de la imagen va a ser de 40 píxeles. La altura, va a ser de 40 pixeles. Y claro, queremos que la imagen sea circular. Para ello, hay que especificar el radio del borde sea del 50 por ciento, lo que tomaría la mitad de la altura de la imagen y la mitad del ancho de la imagen, el 50 por ciento. Entonces antes de proceder al navegador, tenemos que vincular los componentes con el archivo CSS. Estoy aquí justo en la parte superior. Voy a hacer input dot slash, Top Nav dot CSS. Es tan sencillo como eso. Cuando sirves y pagas el navegador. Oye, ¿es así? ¿Puedes ver eso? Ahora tenemos la imagen luciendo hermosa como se esperaba. El siguiente en la fila es estilizar el contenedor Top Nav. Entonces amigos, vamos a ordenar nuestro archivo CSS de acuerdo con los nombres de las clases para que nuestro código sea tan fácil de leer y entender. Entonces aquí, justo en la parte superior de la imagen, vamos a hacer puntos, resaltados, copiar. Ven aquí, pega, así. Entonces el contenedor Top Nav va a estar en la parte superior, seguido del envoltorio de navegación superior y así sucesivamente y así sucesivamente. Entonces aquí vamos a tener el ancho, 100 por ciento, la altura, 50 píxeles. El color de fondo. Voy a elegir Alice azul. La posición va a quedar pegajosa. Top va a ser cero. El índice z. Vamos a tener triple nueve. Impresionante. Ahora dialicemos el envoltorio de navegación superior, que es el div de gráfico al contenedor Top Nav. Destaco y copio. Vamos a darle una altura del 100 por ciento. Acolchado. Hagámoslo cero píxeles, 20 píxeles. Vamos a tener una pantalla, flex. Alinea los artículos al centro. Cuando sirves y pagas el navegador. Hermoso. Entonces, lo que vamos a hacer ahora mismo es crear espacio entre el logotipo y las notificaciones. Entonces tenemos que dividirlo en dos. Este tipo de aquí se moverá a la derecha y luego el logo se alineará a la izquierda. Quiero lograr Eso es todo lo que voy a hacer es crear un espacio intermedio. Entonces voy a hacer justificar el espacio de contenido entre guardar en el navegador. Aquí está. Puedes ver ahora tenemos la amina aquí mismo, y tenemos las notificaciones en la parte superior derecha de la pantalla. Vamos a continuar. La siguiente línea es para estilizar el logo. Destaco y luego Copia, ven aquí, pega. Así como así. El peso de la fuente va a ser negrita. El tamaño de la fuente va a ser. 30 píxeles, el color. Vamos a tenerlo Alice azul, más gruesa. Hagámoslo un puntero para que cuando se acaben, por favor el ratón sobre él. Muestra el tipo de suficiente. Bien, déjame mostrarte rápidamente. Creo que mostrarte es la mejor manera de explicar eso. Tienen razón. Ya lo puedes ver simplemente porque es Alice azul. Entonces vamos a darle un color de fondo. El color de fondo, hagámoslo rojo. Entonces el color de fondo hará que la prueba aparezca muy bien, porque ahora el color de la prueba es en forma de blanco, pero no del todo en realidad. Echa un vistazo. Puedes ver, así cuando coloco mi ratón o necesidades, puedes ver que se muestra así. Es simplemente porque establecemos el cursor para que sea un puntero, el radio del borde. Entonces queremos que los bordes del fondo sean un poco curvilíneos. Hagámoslo cinco pixeles. Fuente, familia, monoespacio, margen, top. Hagámoslo 30 pixeles. Guardar en el navegador. Estas superiores, ¿verdad? Bonito. Especificemos el indulto. Va a ser de cinco píxeles. Guardar. Hermoso. Ahora vamos a empujarlo a la cima. Es por aquí simplemente porque este tipo en realidad se superpone. Entonces vamos, hagamos que todo esté bien arreglado ahora mismo. Tenemos que estilizar la parte superior derecha. Este tipo esté aquí, puntos arriba a la derecha. Entonces tenemos que exhibir flex. Alinea los artículos al centro. Guardar. Echa un vistazo. ¿Ves que todo está bien alineado como se esperaba? El siguiente en la línea es el contenedor de iconos de arriba a la izquierda. Entonces este es el contenedor que está albergando los íconos. Cuando copies, ven aquí, punto arriba a la izquierda icono contenedor. Entonces justo dentro vamos a tener la posición relativa. Por supuesto, el Corso se pondrá a puntero y luego margen derecho? Diez píxeles. Seguro. Todavía tenemos los mismos resultados, pero esta vez, un mejor resultado. nos estamos enfocando en la esquina superior derecha Ahora mismo nos estamos enfocando en la esquina superior derecha de la pantalla. K. Entonces la siguiente en la fila es la barcaza lo suficientemente superior. Permítanme resaltar copia aquí. No ceder. Vamos a darle un ancho. 15 píxeles. La altura es de 50 píxeles. Posición. Recuerden, la posición anterior era relativa. Y ahora vamos a hacer estos absolutos, por favor. Este tipo de aquí va a estar aquí. Necesitamos ordenar el CSS de acuerdo a la clase para que no te confundas en el futuro. Cuando haces algo como esto, tu código se vuelve muy fácil de leer y entender. La parte superior menos 55 píxeles. El color de fondo va a ser rojo. El color que es el color de la fuente, va a ser blanco. Entonces, cuando revises el navegador por ahora, veamos qué tenemos. ¿Puedes ver? Vas a ver este fondo rojo con el número de notificaciones escritas en él. Entonces lo siguiente en la fila es hacerlo secular. ¿Puedes ver? Así que vamos a especificar el radio fronterizo. Hagámoslo 50 por ciento. Por supuesto que ya deberías entender lo que es. Tener un flex de pantalla. Alineemos los elementos al centro. Justificar el contenido al centro. El tamaño de la fuente. Hagámoslo diez pixeles. Cuando guardes el navegador, échale un vistazo. Todo está bien alineado como se esperaba. A mí me encanta. Ya ves, déjame acercarme un poco. Echa un vistazo. ¿Ves eso? Entonces ahora lo que voy a hacer a continuación es cambiar el color de los íconos. No me gusta así. Bien, hagámoslo rápido. Voy a venir aquí. Este es el nombre de clase de los iconos. Entonces voy a resaltar color guisante. Ven aquí, punto, punto nef icono. Entonces vamos a darle un color de la imagen W. Guardar en el navegador. Estos pueden ver que todo se ve extremadamente bonito. A mí me encanta. Entonces amigos. Esto es todo por ahora. En la próxima conferencia, comenzaremos a trabajar en el lado nav. Nos vemos en la próxima conferencia. Mantente enfocado y cuídate siempre. 108. Componente de 106 SideNav: En esta conferencia, vamos a construir el lateral nav. El final. Tendremos un navegador lateral muy bonito como este auto, ¿verdad? Entonces procedamos a VS Code. Abre el Explorer y B, y luego escribe el directorio side nav. Tenemos que crear los componentes de navegación lateral. Nuevamente, tenemos que crear el archivo CSS correspondiente. Justo aquí en los componentes de navegación lateral. Generemos los componentes funcionales. Y luego tenemos que renderizar este lado derechos de navegación dentro del componente app. Para eso, voy a tener un div aquí. Dale a este div un nombre de clase de contenedor. Uy, bien. Bien. Entonces aquí estamos en el div. Vamos a correr los nervios laterales. Y por favor, hazlo bien en importarlo en la parte superior. Bien. Entonces la idea aquí es dividir la pantalla en cinco unidades distintas. Entonces vamos a tener unidad 1,234.5. Entonces el lateral nav va a ocupar una unidad de la pantalla. Y así el resto de la parte de la pantalla va a ser cuatro veces más grande en el lado ahora es bastante sencillo. Entonces la forma de lograrlo, de implementarlo fue el flexbox. Entonces justo dentro de la app CSAs, vamos a hacer que el contenedor muestre escamas. Bien, volvamos a recitar suficiente componente. Y luego tenemos que especificar el nombre de clase de este div. Dale un nombre de clase de Sidón de contenedor. Voy a destacar y luego Copiar. Ven aquí, DOD lado suficiente contenedor, abrir y cerrar llaves. Entonces vamos a tenerlo flex one. Entonces esto hará que ocupe sólo una unidad de la pantalla, es tan simple como eso. Así que volvamos al lado nav y comencemos a construir el lado de la interfaz de usuario nav. Voy a borrar esto. Vamos a tener un div con el nombre de clase de slide ahora para nuestro par lado derecho ahora wrapper, vamos a tener otro div, darle un nombre de clase de menú de navegación lateral. Entonces justo dentro del menú, vamos a tener un hash tag es tres. Dale a la historia un nombre de clase de vista bastante apretado Hall. Sólo voy a hacer tablero, ¿verdad? Aún así. Bien, en donde el menú de navegación lateral, vamos a tener la etiqueta UL, el nombre de la clase de site nav menos, derecho, estamos en la UL, vamos a tener una etiqueta LI. El LI un nombre de clase de Sidón de elemento de lista. ¿Verdad? Dentro. Vamos a tener un ícono. Y claro ya sabes que vamos a importar nuestros íconos de Materia tú. Así que ya no hay necesidad de volver a través del sitio web porque ya lo tenemos instalado por aquí. Entonces lo que voy a hacer ahora mismo es importar abrir y cerrar llaves. Líneas tau de MEI slash, icon slash material. Entonces tenemos que renderizarlo por aquí. Ciérralo lo que la etiqueta de cierre automático también. Tenemos que darle un nombre de clase. Entonces, si una razón para un className es poder estilizarlo. Y oye, voy a hacer a casa es bastante sencillo. Bien, saquemos el navegador. ¿Puedes ver? Echa un vistazo. Ahora, tenemos que aparece así. No te preocupes. Cuando empecemos a estilizarlo, de nuevo, lo vas a tener un aspecto extremadamente hermoso. Sigamos con la interfaz de usuario. Entonces justo cuando la etiqueta de cierre de la etiqueta LI, vamos a tener otra etiqueta LI. Dale un nombre de clase. En esta ocasión. Va a ser elemento lateral de la lista de navegación, así como esto. Bien, Kirby. Entonces esta vez tenemos que importar el icono de la línea de tiempo. Hagamos que lloviera por aquí abajo. Ciérralo con la etiqueta de cierre automático. Y luego también tenemos que dar el nombre de la clase. Y en este caso, los nombres de los clústeres serán los mismos. Entonces sólo tengo que copiar a este tipo de aquí. Y luego pegar simple. Aquí. Voy a escribir analíticas. Otra vez. Sólo tengo que destacar esto y duplicarlo. Entonces no tenemos que teclearlo todo nuevo porque ¿quién lo ha hecho antes? Dedos para copiar y pegar. Bien chicos, hablo demasiado. Aquí. Vamos a tener tendencia al alza. Entonces tenemos que cambiar el icono. Ahora, vamos a importar tendencia en. Bien, aquí tenemos dos. La tendencia en el brazo derecho va a ser las ventas. Alt, Mayús F para formatear el código con más bonito. Y claro, si no tienes instalado en tu código VS, todo lo que tienes que hacer es ir a las extensiones y luego buscar más guapa. Definitivamente, lo tendrás por allá. Haga clic en el botón Instalar para tenerlo instalado. Cuando guardas y salgas al navegador. Tendrás algo como esto. Entonces lo que voy a hacer ahora mismo, déjame mostrarte el div con el nombre de la clase del menú de navegación lateral. Se ve de las líneas 92, líneas 25 destacados. Bien, solo tenemos que hacer espacio por aquí porque no quiero que nadie se confunda. Destacados. A ver. Entonces tenemos que duplicarlo tres veces. 123, sencillo y corto. Cuando guardas y marques en el navegador. ¿Verdad? Entonces tenemos que cambiar los íconos y el trabajo adecuado para que coincida con la especificación. Empecemos con este tipo de aquí. Sólo voy a darle un espacio para que no te confundas. Me gusta enseñar en una arcilla estable Marla. ¿Verdad? Puedes ver aquí vamos a importar icono de persona a partir del material. También cambias cambias estos usuarios de herramientas. Aquí tenemos que importar inventario. Miren chicos, en realidad pueden hacer esto al final sin ver más las conferencias. Uh-eh. Sí, puedes hacerlo. Voy a importar un icono llamado P. Otra vez, vamos a importar la totalidad de los iconos para esta sección en caballo, voy a importar otro icono llamado evaluación. Entonces justo abajo, vamos a tener pozo también. Tenemos que cambiar la escritura a, supongamos productos. Entonces aquí vamos a hacer valoración. Bien. ¿Podemos dejar esto como ventas? Sí, podemos, pero sólo voy a hacer transacción. Y por último, voy a duplicar esta etiqueta LI por aquí. Y luego tenemos que importar otro árbol de eventos de iconos. Entonces parece que he hecho algo no a nueve está por aquí para la evaluación. Se supone que esto es reportaje. Y aquí vamos a hacer aquí inventario. Y estos tendrán transacción. Entonces pasemos a la siguiente línea. Este tipo de aquí, déjame mostrarte. Entonces terminamos con esto. ¿Bien? Ahora vamos a pasar a la siguiente sección de la navegación lateral. Y esto se puede hacer al final, como dije antes. Para esta sección, vamos a importar. Así que vamos a importar el icono email karma. Vamos a importar la calificación de iconos. Y por último para esta sección, tenemos que importar icono chat bubble. Esta es la primera, segunda y tercera sección. Aquí. Tendió al correo electrónico. El escrito va a ser por correo electrónico. Aquí. Vamos a cambiarlo a tablero de chatbot. Aquí, ¿sería mensaje o mensajes? Entonces, ¿para decir? Por supuesto, el último aquí para esta sección va a ser la calificación. Se manejará la esperanza correcta. Entonces este es el último de todos. Veamos qué hemos hecho hasta ahora. Se ve que se ve bastante hermoso incluso sin estabilizarlo. Entonces, en la próxima conferencia, definitivamente la haríamos perfecta o correcta. Así que dirígete al código VS y continuemos. Importemos los iconos necesarios que necesitamos para la última sección. Coloque una coma aquí mismo. Necesitamos cuentas de gestión, más tranquilas, necesitamos analíticas, más calmadas. Y por último, necesitamos informes. Aquí. Tenemos que cambiar a este tipo para administrar cuentas. Y aquí la parte superior derecha va a ser gestionar la analítica. Va a ser analítica por aquí. Y por último, vamos a tener informes. Y aquí habrá informes. Guardar. ¿Puedes ver? Entonces todo está funcionando perfectamente bien como se esperaba en esta conferencia. Antes de pasar a la siguiente conferencia, tenemos que hacer algo. Por aquí verás un tablero. Dashboards y dashboards están en la sección. Se supone que esta sección es una sección diferente y no la sección del tablero. Entonces tenemos que volver al código, especificar las secciones. Digamos que este va a ser menú de administración. Puedes cambiarlo a lo que quieras de tu parte. Pero el naming debería ser relevante. Aquí. Veamos las notificaciones. Y por último, podemos ver aquí nuestro personal simplemente escribir algo que sea relevante para la aplicación que estamos construyendo a salvo. En el navegador. Ellos son estos. ¿Puedes ver? Todo está funcionando perfectamente bien como se esperaba en esta conferencia. Por lo que en la próxima conferencia, comenzaremos a estilizar esta compañía. Y al final, lo vas a tener un aspecto extremadamente hermoso. Esto es todo por ahora. Nos vemos en la próxima conferencia. Mantente enfocado y cuidado holístico. 109. 107 Css de Nav lateral: En esta conferencia, comenzaremos a estilizar el componente de navegación lateral. Al final. Tendrás un look extremadamente fino. Proceda al código VS, y continuemos. Abre el CSS de navegación lateral. Y por aquí, tenemos que dividir la pantalla en dos porciones. El borde izquierdo de la pantalla serán las empresas suficientemente alimentadas, y el borde derecho de la pantalla será el lado nav, CSS. Bien, entonces comencemos con el contenedor de navegación lateral. La conferencia anterior, tenemos el flex para ser uno, que pasará a ocupar unidades de toda la pantalla. ¿Bien? Ahora, vamos a darle una altura. Una V Roja, cuya posición de 50 pixeles va a quedar pegajosa. El color de fondo va a ser el azul Alice. Los 50 píxeles superiores. Una vez hecho esto, vinculemos el componente con el archivo CSS. Importaciones. Seguro en el navegador. ¿Estas puedes ver? Perfecto. La siguiente línea es el envoltorio de navegación lateral. Por supuesto aquí cometimos algún pequeño error por aquí. Tiene que ser p, por favor. Tienes que aguantar conmigo porque estoy grabando audio negado. Por supuesto, yo no soy los robots. Somos humanos y a veces podemos cometer algunos errores ortográficos. ¿Bien? Relleno, 20 pixeles. El color, vamos a tenerlo para que sea gris. Así que voy a hacer cinco por cinco así. El nido es el menú de navegación lateral. Este tipo de aquí, copia, ven aquí, puntos, menú lateral de navegación. El margen inferior va a ser de diez píxeles. La lista es el lado ahora del título. Copia, ven aquí. Dod, título suficiente al lado. Vamos a tener el tamaño de fuente para que sea eso en las imágenes. El color, que es el color de fuente, RGB. Cuando es siete, coma uno, coma uno es seis, un guardar y ver lo que tenemos en el navegador. Fresco. Ya ves, ahora esto se está volviendo agradable. Hagámoslo más hermoso. El siguiente en la fila es el nav lateral, menos. Por favor, tome nota de la forma en que estoy configurando el CSS de acuerdo con los nombres de las clases. Esta es una de las formas de escribir código como un profesional. Espero que estés aprendiendo algo hermoso. Para la lista de navegación lateral, lo que vamos a hacer es eliminar este punto de aquí. ¿Puedes ver? Así que vamos a sacarlo. Vamos a hacer liststyle. No lo vamos a tener ninguno. Guarda y echa un vistazo al navegador. Se ha ido. ¿Puedes ver eso? Vamos a continuar. Regresa. Entonces. Vamos a especificar el relleno para que sean cinco imágenes. Para el elemento de navegación lateral, que es el elemento de la lista de navegación lateral, elemento lista de registro de puntos, relleno, cinco píxeles. Hagamos que los costos sean para ser punteros. Entonces vamos a tenerlo display flex. Alinee los elementos al centro, al radio del borde. Hagámoslo cinco pixeles. Cuando guardas y vuelvas al navegador. Esto es lo que obtienes, tienes razón. Ahora ya hemos hecho el elemento de la lista de navegación lateral. La siguiente línea es resaltar los elementos cuando colocas el mouse sobre él. Así que sólo voy a copiar estos de aquí. Pega los corchetes. Y por aquí voy a hacer punto coma activa. Copia de nuevo a este tipo. Cuando pasas el cursor sobre el elemento de la lista, vamos a especificar el color de fondo para que sea RGB. En realidad puede hacer que Alice sea azul. Pero vamos con esto de aquí. Entonces. Cambiaremos el color de los teléfonos a negro. Cuando guardas al finalizar la compra en el navegador. Ahora cuando coloques el mouse sobre él, obtendrás este bonito bucle por aquí. Todo bien. Por último, tenemos que añadir color para decidir suficientes iconos. Entonces este ángulo por aquí, tenemos que darle el mismo color con el icono de navegación superior. Entonces lo que voy a hacer ahora mismo, resaltar el ícono de lado suficiente. Ven aquí. Dod, icono lo suficientemente lateral, abre los corchetes. Y justo, para poner entre corchetes, tenemos que aplicar los estilos. Mi derecho general. Hagámoslo cinco pixeles. Tamaño de fuente, 20 píxeles. Y el color, que es el color del icono, va a ser Dodger blues, seguro y checkout. El navegador. Puedes ver que todo está funcionando perfectamente bien como espectador. Y esto es sumamente hermoso. Así que vamos a comprobarlo. ¿Puedes ver? Se ve bien. A mí me encanta. Esto es todo por ahora. Nos vemos en la próxima conferencia. 110. 108 componentes destacados: En esta conferencia, nos vamos a centrar en los futuros artículos, componentes, donde tendremos los ingresos, rendimientos de ventas n, los profetas. Rápidamente dale al código VS y procedamos. Entonces lo primero que vamos a hacer es dividir las pantallas también en unidades. La forma en que lo hicimos en la conferencia anterior. Abre el Explorador. Y luego dentro del directorio home, vamos a crear un nuevo componente llamado Whom dot gears también. Tenemos que crear el archivo CSS correspondiente. ¿Verdad? Estamos en el hogar J es, tenemos que generar el componente funcional. Entonces vamos a darle a este div un nombre de clase de quien contenedor voy a resaltar y luego copiar. Importemos rápidamente el archivo CSS. Quién punteó CSS. Entonces, bien, estamos en el CSS casero. Tenemos que estilizar lo continuo. Entonces la idea es simple. Déjame mostrarte. Queremos que este espacio de aquí sea seis veces más grande a un lado ahora. Bien, así que hacerlo es sumamente sencillo. Todo lo que tenemos que hacer es flexionar seis. Entonces cuando hagas esto, este tipo de aquí será seis veces más grande que los nervios laterales, lo que simplemente implica que la navegación lateral va a entrar seis veces en este espacio de aquí. Es tan sencillo como eso también. Si querías entrar en cuatro tiempos, todo lo que tienes que hacer es cambiarlo para flexionarlo. Entonces, cuando hagas esto, este espacio de aquí será cuatro veces más grande en el lado ahora de Spades. Déjame mostrarte en Protocolo. Vuelva a nuestro componente de aplicación y luego vamos a ejecutar los componentes del hogar. Aquí tenemos que importar a quién de punto slash pages slash, home slash home. Guarda y vuelve al navegador. Quizá no puedas observarlo, ¿verdad? Entonces ahora mismo te voy a ayudar a venir aquí, volver al CSS de inicio y vamos a especificar el color de fondo. Vamos a hacerlo rojo. Bueno. Bien, así que quiero que observen el espacio por aquí. Bajo el espacio tenemos aquí. Entonces cuando hago aquí flexiona seis y ahorra. Reloj. ¿Puedes ver eso? Entonces este espacio se vuelve seis veces más grande que el espacio de la navegación lateral, lo que simplemente implica que el lado ahora de va a entrar en esta porción de aquí seis veces. Entonces voy a dejarte para que hagas tu propio juicio al final y elijas el espacio apropiado que sea bueno para tu proyecto. Pero para mí, lo voy a dejar así. Vamos a limpiar el fondo rojo. Ahora, aquí es que Lee es donde comienza la diversión. Cuando el componente abre los componentes, ¿verdad? Estamos en el directorio futuro. Vamos a crear un nuevo componente llamado featured dot. Crear el archivo CSS correspondiente. Estamos en el futuro gs. Generemos también el componente funcional. Tenemos que importar el archivo CSS para que no nos olvidemos de hacerlo. Destacados pero CSAs. Perfecto. Bien, comencemos. Vamos a darle a este div un nombre de clase de featured. Bien, vamos a limpiar a este tipo, lo descargaríamos. Justo dentro de este div. Vamos a tener otro div con el nombre de clase del ítem futuro, ¿verdad? Estamos en el ítem futuro, vamos a tener un span dado el nombre de la clase, título. Y el título va a ser ingresos. Por supuesto, podría ser lo que quieras que sea, pero deja que sea relevante para la aplicación que estamos construyendo. Vamos a tener otro div por aquí, darle un nombre de clase de contenedor de dinero destacado y destacado. Y modernizar el div. Vamos a tener una etiqueta span. El nombre del clúster será presentado dinero. Entonces voy a hacer justo aquí, vamos a tener otro lapso. Dale un nombre de clase. El dinero destacado lee. Así que también queremos mostrar un icono por aquí. Entonces, lo que vamos a hacer a continuación es importar el icono del icono de materiales. Aquí en la parte superior. Voy a hacer importaciones. Flecha hacia abajo desde el icono de materiales. Bien, necesitamos la flecha del teclado. Flecha del teclado hacia arriba, justo entre el lapso. Vamos a correr muerto. Teclado más cerca de la etiqueta de cierre automático y también, vamos a especificar el nombre de la clase. Destacados. Icono arriba. Bien, La razón de esto es que voy a estilizarlos de otra manera. Sí, así es exactamente por eso que va a tener diferentes nombres de clase. Entonces aquí vamos a tener otro span justo después del div de cierre con el nombre de clase del futuro contenedor demoníaco. Este tipo de aquí, aquí está el div de cierre. Vamos a tener otro lapso. Dale un nombre de clase de futuro serbio. Voy a hacer en comparación con las últimas ventas. Entonces, habiendo hecho esto, tenemos que renderizar este componente, ¿verdad? Estamos en el componente del hogar. Aquí. Sólo hay que eliminar a este tipo. Vamos a renderizar. Futuros componentes. Tienen razón. Ciérralo con la etiqueta de cierre automático y asegúrate de importarlo en absoluto. Cuando guardas y revises el navegador. Aquí está. ¿Puedes ver? Ahora tenemos algo de tiempo así. Entonces tenemos 1234. Entonces lo que voy a hacer ahora mismo es duplicarlo tres veces. Volver a Vue.js. Seleccione el div con el nombre de clase del elemento destacado, apertura y cierre div. Entonces lo que voy a hacer es duplicarlo tres veces, así como esto. Y entonces solo tienes que cambiar la información es dejarme hacerlo por ti. Este es el ingreso. Entonces esto va a ser ventas. Podemos decir que las ventas son 9,000, lo que sea. Y entonces podemos hacer que esto se vea así. Tenemos que cambiar el icono o puedes decidir usar cualquier ícono de tu elección. Es sólo una elección. Entonces para mí, voy a usar un icono llamado trending up friends. De hecho, puedes ver todos estos iconos en su sitio web, bien, material ui.com, puedes ver todos estos iconos por ahí. Entonces no quiero perder tu tiempo llevándote allá porque realmente no importa ya que podemos importarlo directamente de aquí. Oye, voy a hacer tendencia en todos. El Cs es bastante alto. Podemos hacer la flecha para subir con europeo son. Entonces aquí va a ser para devoluciones. Voy a hacer así. Voy a hacer así. Y luego tenemos que cambiar el icono. Están al alza. Ahora puedes usar cualquiera de los iconos. La flecha hacia abajo es fría. Eso no tiene problema. Porque nuestro retorno no es tan alto. Entonces para el último , van a ser los feeds pro. Entonces lo que voy a hacer ahora mismo son ganancias. Mira, a todos les encanta sacar provecho de algo. Te lo digo honestamente. Y las ganancias, vamos a hacerla extremadamente alta. A todo el mundo le encanta prosperar. Entonces tenemos que cambiar el icono a nuestro alza. Bien, bien. Una vez hecho esto, tenemos que especificar también el nombre de la clase respectivamente. Así que aquí voy a hacer algunos puntos, icono arriba. Hagamos esto negativo porque queremos estilizarlos individualmente. Podemos hacer que esto sea positivo. Justo como a ti te gusta. Permítame hacer esto positivo también. Justo como a ti te gusta. Podemos decir que el retorno debe ser negativo. Bien, estamos bien para irnos. Compruébalo en el navegador. Tenemos 1234. Perfecto. Aunque, no se ve bien como se esperaba. No te preocupes. Nuevamente, en la próxima conferencia, cuando hayamos terminado de estilizar este componente, definitivamente te va a encantar. Esto es todo por ahora. Nos vemos en la próxima conferencia. 111. 109 Artículo destacado: Bienvenido de nuevo a los retiros. En esta conferencia, seguiremos adelante para estilizar el componente de pocos puntos. Se aferró al código VS, y procedamos. Entonces hay que abrir el futuro CSS y luego el G destacado es dividir la pantalla como de costumbre. Pero antes de proceder por aquí, quiero hacer algo. Déjame mostrarte este div de aquí. Le vamos a dar nombre de clase diferente. Entonces aquí va a ser el ítem futuro B. Entonces en cualquier lugar que llegues al artículo futuro otra vez aquí vamos a hacer C. Y por último, vamos a hacer d. Así que estamos buscando una manera poder estilizarlos de manera diferente. En otras palabras, vamos a aplicar diferentes colores a cada una de estas tobas. Entonces otra cosa que tenemos que hacer aquí mismo antes de proceder a estilizar la obligación es mostrarte los íconos. Les damos className, y nosotros filtramos icono arriba. No creo que esto sea bueno. Entonces hay que seleccionar el ítem futuro op, comando D para deseleccionar todas las ocurrencias. Creo que eso es todo por ahora. Ahora, usa la tecla de flecha derecha para moverlo al frente, borrar el guardado, y luego procedamos con los CSAs. Primero, tenemos que estilizar el futuro. Entonces básicamente, queremos que este tipo aparezca en una firma horizontal. Entonces para hacer eso, Ven aquí, puntearlo futuro, entonces el ancho va a ser del 100 por ciento. Vamos a tener un flex de pantalla. Así que guarda y echa al efecto de este flex que usamos por aquí. Puedes ver ahora todo aparece así. Así que vamos a crear espacio entre cada elemento. ¿Bien? Para ello, es sumamente sencillo. Justificar contenido, espacio entre cuando guardas y echa un vistazo al navegador. Ya ves que tenemos espacio entre cada artículo. Bien, ya aparece como se esperaba. Mira, solo tenemos que hacerlo más bonito. El siguiente en la línea es el ítem futuro. Resalta y copia, ven aquí, punto filtrado artículo. Entonces vamos a tenerlo flex one. El margen cero píxeles, dos píxeles, luego margen diez píxeles superiores. Acolchado. Por demanda épica. El radio del borde es de diez píxeles. El causal. Así que un día el usuario pasa el ratón y las necesidades, va a mostrar un puntero de un espléndido antes, ¿verdad? Sí. Y el color de fondo. Voy a usar Ocultar anticlinal. Bien, cuando guardes y revises el navegador, verás que, vaya , esto debería ser de 30 píxeles. De nuevo, Guardar y volver. Entonces lo que vamos a tener más espacio por aquí como Lee, bonita línea delgada es especificar la sombra de caja. Y por supuesto puedes sacarlo en internet visitando el sitio web de box-shadow y luego podrás hacer tus propios juicios y usar la sombra de caja adecuada que será agradable para tu aplicación. Para mí. Una vez más. Sólo voy a copiar y pegar porque ya lo tengo en mente. Entonces esto es todo en caso de que quieras usar la mía propia sombra de caja. Así, solo los valores como este. K. Entonces lo que voy a hacer ahora mismo es resaltar y luego duplicar esto. Aquí lo voy a llamar elemento filtrado B. Nuevamente, resalte este tipo duplicado. Este será el ítem destacado C. Por último, este será el ítem filtrado D. Cuando guardes y revises el navegador, todo debería aparecer bien ahora, perfecto. Esto es lo que es el resultado esperado, pero ahora solo tenemos que cambiar los colores. Para el feto. Ítem B, el color de fondo va a ser filtrado aqua. Ítem C. El color de fondo va a ser violeta. Entonces el feudo en el ítem D va a ser el hiyab lieu. Por supuesto, sabías lo mucho que me encantan estos Da Jia Bu. Y espero que se pueda ver todo con claridad. Me dijo Si ves con claridad o no. Bien, se puede ver con claridad. Está bien. Echemos un vistazo al navegador. Hermoso. A mí me encanta. Bien, así que centrémonos en las fuentes. Ahora mismo. Vamos a estilizar el futuro al título. El tamaño de la fuente es de tan solo 20 píxeles. No es demasiado. Entonces el contenedor de dinero filtrado, este tipo de aquí. Imagina diez píxeles, cero píxeles. Vamos a tener un flex de display. Y luego alineemos los elementos al centro. El nido es el futuro del dinero. Y por favor, la forma en que estoy organizando este archivo CSS, deberías seguir mi ejemplo así. Definitivamente te ayudará en el futuro. El tamaño de la fuente, 30 píxeles. Font weeds es negrita. La futura Margaret, gritos, mira lo que hice por aquí. Chicos, miren, estoy grabando a las nueve, así que por favor tienen que ponerse conmigo. Entonces lo que voy a hacer ahora mismo es destacar todas las ocurrencias de la futura tasa de neumonía. Comando D para hacer tu multinúcleo. Así editando, que normalmente es seleccionar todas las ocurrencias. Sólo tengo que mover el ratón aquí y luego hacerlo así. Copia. Tengámoslo display flex. Alineemos los elementos al centro. El color, que es el color de la fuente. Hagámoslo verde. Entonces queremos hacer el futuro icono negativo va a tener color rojo. Y entonces el tamaño de fuente Futura tamaño de fuente es de 15 pixeles. El color. De acuerdo. Ahorre, y veamos qué tenemos ahora. Perfecto, tan sencillo y agradable. A mí me encantan estos. Así que puedes seguir adelante para cambiar algunos de los colores si lo deseas. Pero para mí, soy Qu y satisfecho con estos. ¿Bien? Esto es todo por ahora. Nos vemos en la próxima conferencia. 112. 110 Componente de gráficos: Bienvenido de nuevo a los retiros. En esta conferencia, vamos a implementar el chat Analytics. Y claro, va a ser tan interesante. No te preocupes. Es bastante sencillo hacer eso. Así que no se asuste en absoluto. Rápidamente golpea a VS Code y menos proceder Heron al código VS. Primero, tenemos que poner en marcha la estructura forestal y todo lo que implica. Entonces abre los componentes y escribe en el directorio de chats. Vamos a crear un nuevo archivo llamado charts dot js. Cree rápidamente el archivo CSS correspondiente. ¿Correcto? Dentro de los componentes del hogar. Vamos a renderizar el gráfico G es. Pero por ahora, tenemos que generar el componente funcional y dirigirnos a la casa G está justo por aquí. Vamos a tener un div, darle un nombre de clase de chats widget analítico. ¿Correcto? Estamos en el div, vamos a renderizar el componente gráfico más cerca con la etiqueta de cierre automático y nos aseguramos de importarlo en la parte superior. Apliquemos rápidamente estilos a la clase de widget de análisis de chat. Helen a casa sss punto chat analítico rechaza. Lo que vamos a hacer es display flex. Es tan sencillo como eso. ¿Correcto? Ahora ya terminamos con la configuración. Es momento de seguir adelante con el chat Analytics. Para un chat Analytics, vamos a utilizar una biblioteca externa llamada recargar. Y aquí está. Entonces heroína para llegar a out.org, podemos abrir la guía y luego así es exactamente como instalar retardos. Entonces lo que voy a hacer ahora mismo en el terminal es npm install retards to VS Code y luego Control C para detener el servidor actualmente en ejecución. Npm instalar, llegar a anuncios como estos. Pero aunque ya lo tengo instalado, solo estoy haciendo esto para mostrarte exactamente cómo instalarlo. Entonces, mientras se está instalando, vamos a ponernos en contacto de nuevo y luego hacer clic en ejemplos. Entonces primero, vamos a copiar estos datos por aquí de líneas para dos líneas, 47, copiar. Ven aquí, ve al chat GS Comando B para cerrar el Explorer. Y luego tenemos que pegar los datos están aquí. Entonces estos son los datos que vamos a utilizar. Regresa también aquí, tenemos que copiar estas importaciones. Pero hazlo, vamos a eliminar algunas entradas innecesarias. Ven aquí en la parte superior. Así. Richard instaló con éxito. Es hora de que el micrófono esté fuera de serie. Volver a las lecturas otra vez, alrededor de API. Y queremos usar los gráficos de área. Puedes seguir adelante para usar cualquiera de los chats que quieras. Pero en este curso y para el propósito de nuestra obligación, este es el gráfico que vamos a utilizar. Así que solo tenemos que copiar desde el área de apertura la etiqueta de chat, la etiqueta de cierre, resaltar y copiar. Vuelve al código VS, selecciona la def, límpiala y luego pégala. Entonces cuando guardes y ejecutas la aplicación, definitivamente se va a quejar por qué es simplemente porque tenemos que importar los chats de área en la parte superior. Entonces, vamos a borrar estas entradas innecesarias. Importa los gráficos de área y también tenemos que importar área así. Y la leyenda de aquí son entradas innecesarias. Por lo que el contenedor responsivo se utilizará en el futuro. Entonces no lo vamos a eliminar. El K. Nice. Nuestro derecho. Formateemos el código, desplazemos f, formateemos el código. Y ahora tenemos la sangría adecuada. Bien, volvamos a ejecutar rápidamente la aplicación. Estadísticas de mpm. Aquí está el análisis gráfico. No te preocupes. Vamos a mapearlo con nuestros propios datos. Entonces ahora tenemos la Y y X. Son éstas. Vuelve al código VS y hagamos las cosas de manera adecuada. Lo primero que vamos a hacer es cambiar los datos están aquí, el nombre, queremos que empiece a partir de enero. Aquí van a haber gastos. Esto va a ser devoluciones. Y aquí vamos a tener total más duro, ¿no? Así que en realidad puedes indicar donde quieras hacer aquí, pero así es como se supone que debe ser. Por el nombre otra vez, va a haber febrero. Esto va a ser caro. Chicos. Creo que puedes continuar con el final sutil. Esto va a ser devoluciones. Esto va a ser total. Y hay que poner columna aquí. Entonces solo hay que cambiar la totalidad de los datos. Pero para mí, tengo todos estos datos listos. Así que sólo voy a copiar y pegar. Entonces, si quieres copiar estos datos, solo tienes que acudir a los materiales holandeses. Y luego vas a encontrar todas estas pestañas por aquí. He arreglado los datos en consecuencia para que puedas absorber, pausar el video y escribir el mío si lo deseas. Así que déjame jugarlo despacio. Puedes ver que puedes pausar el video. Así que puedes simplemente escribir todas estas cosas por aquí es bastante simple. Ahora tenemos que volver aquí. El ancho de nuestras cartas va a ser de 30, la altura va a ser de 350. Y boom, borla desde los diez primeros, derecha es 30, la izquierda es cero y la parte inferior es cero. Estamos bien con esto. No hay ningún problema en absoluto. Pero una cosa más que vamos a hacer es agregar el gradiente de línea, que es este tipo de aquí. ¿Bien? De nuevo, aquí mismo, voy a pegar estos, todos estos en los materiales del tablero. Entonces aquí mismo es exactamente lo que mostrará algunas de las cosas. Copia esto, y luego duplicarlo solo una vez. La clave de datos por aquí van a ser los gastos. Y aquí la clave de datos va a ser devoluciones. Así que en realidad trazamos la gráfica con nuestros propios datos en este momento. Aquí la clave de datos va a ser total. Justo lo que tienes por aquí. Gastos, devoluciones a tau. ¿Bien? Todo es correcto. Devoluciones. Perfecto. Vamos a sacarlo en el navegador. Pueden ver chicos correctos, quiero que las devoluciones aparezcan de color rojo. Tenemos que regresar y hacer algo al respecto. Entonces, ¿ves que los rendimientos por aquí están usando PV de color, que es este gradiente lineal. Y este es el gradiente lineal que creamos por nuestra cuenta. Por lo que esto se aplicará a las devoluciones. Y el id se llama copia RV. Entonces alrededor de las devoluciones aquí, vamos a hacer RV de color. Cuando guardas y revises el navegador. ¿Ves que todo apareció bien como se esperaba? Pero aunque no está bien alineado que preocuparse. En la siguiente conferencia, vamos a usar CSS para terminar el trabajo. Pero por ahora, hagamos rápidamente un resumen de VS Code justo en la parte superior. Entonces, para hacer uso del gráfico, primero, tenemos que instalar una biblioteca externa llamada retardos. Y entonces todos estos se importan del módulo retail. El área, el gráfico de áreas, eje x, el eje y, y muchos más. Entonces estos son los datos que usaremos para trazar la gráfica. Entonces aquí tenemos el nombre y el nombre va a estar en el eje x. Déjame mostrarte rápidamente. Puedes ver aquí está el eje x. Entonces aquí tienes enero, febrero, marzo, abril, mayo, junio a julio. Por lo que el resto de estos datos se trazarán en los ejes x e y. Y por eso los puedes ver por aquí. Entonces eso es todo por los datos. Y aquí renderizamos a los retardos. Y luego le damos un ancho de su altura grasa de 350. Y entonces los datos de aquí son los datos que queremos usar, que es este tipo. Déjame mostrarte estos datos por aquí. Entonces si lo nombro datos sea también tengo que venir aquí y nombrarlo el TBI. Cuando le dices ventrículo al navegador, va a ser lo mismo. ¿Correcto? Entonces puedes dejarlo así o simplemente puedes ver entidad a los datos predeterminados. Ahora aquí en los colores degradados. Entonces esto en realidad depende de ti. Personalmente yo mismo creé este gradiente porque quería que los retornos aparecieran en un color rojo. Entonces tengo que crear estas columnas de gradiente rojo yo mismo. Pero este, el verde y este otro tipo pop por aquí, es una especie de color por defecto del de Rachel. Para que puedas crear más colores y agregar más detalles. Entonces este es el eje x. El eje x está tomando la clave de datos de nombre, que es el enero, febrero, marzo, abril, mayo a julio. Entonces trazamos el nombre en el eje x. Así que aquí está el eje y. Y luego tenemos los dos dientes, en realidad el tooltip. Déjame mostrarte rápidamente. Cuando coloco el ratón sobre él, los dos dientes ayudan a mostrar la información. Entonces cuando te lo quitas por ejemplo y ahorras, veamos que pasa. Ahora. Puedes ver cuando coloques tu mouse sobre él, ya no obtendrás los detalles. Derecha. Entonces es una especie de eso para TBS. Te da consejos de lo que es la gráfica en un punto. Puedes ver en este punto, los gastos son 1,200, luego el retorno es 23, 300, punto más simple. Y aquí tienes el tipo de ser monótono. Gastos clave de datos. Oye, que el trazo sea de este color. Y entonces la opacidad de relleno es una. Entonces la URL de combustible, que es en este caso, el color que se quiere usar es el ID de color degradado que creamos. Entonces es tan sencillo como a, B, C. Y por ahora, voy a decir, cuídate y te veo en la próxima conferencia. 113. 111 Gráfico Css: Ya, el chat Analytics se ve extremadamente bien. Pero veamos si hay algo que podamos hacer para que se alinee de una manera más perfecta. Porque como puede ver, no hay espacio entre el análisis de datos y la información de las funciones. Así que agreguemos rápidamente a VS Code. Y por favor asegúrese de importar el archivo CSS, derecho, para poner en el componente gráfico. Entonces esta es la forma de vincular tu archivo CSS con el componente. Justo dentro de la interfaz de usuario. Aquí vamos a tener un div. Dale a este div un nombre de clase de contenedor de gráficos. Entonces la aplicación se queja simplemente porque no se puede tener el elemento GSS fuera del nodo padre. Así que resaltemos un reactor para etiquetar la etiqueta de cierre, precedente, la tecla Alt en tu teclado, y luego toque la tecla de flecha hacia arriba para moverlo a este div con el nombre de clase del contenedor Chad. Y rápidamente tenemos que estilizar este div, abrir el chat CSS. Entonces aquí lo vamos a hacer flex para. Vamos a darle un relleno de diez píxeles. Y ahora vas a ver el espacio entre márgenes superiores. La parte superior del margen es de 30 píxeles. Guarda y vamos a echarle un vistazo. Derecha. Ahora bien, está bien alineado. Tenemos un espacio entre el gráfico n, el futuro info. La línea occidental es para especificar la sombra de caja. Entonces esta es mi propia sombra de caja. Puedes decidirlo, déjame mostrarte algo rápido. Enciende Internet. Entonces aquí mismo, solo tienes que configurar para generador de sombra de caja. ¿Aquí está? ver aquí mismo puedes hacer tu propia sombra de caja. Bien, entonces, sí, tantos guardan el código. Puedes ver que todo está funcionando perfectamente bien. Entonces cuando comencemos a trabajar en el lado derecho de la pantalla, verás en muy buena forma. Nos vemos en la próxima conferencia. 114. Configuración de estilo: Muy bien, así que antes de continuar con la sección total de visualización, tenemos que hacer algunas configuraciones de configuración. Y es sumamente sencillo. Así que rápidamente dirígete a los materiales del tablero justo dentro. Sólo hay que abrir el podría ayudar. Entonces vamos a copiar este resaltado de tau. Copia. Vuelve a recodificar, abre el índice de punto HTML. Entonces sólo tenemos que encontrar un lugar para pegar los ajustes. Muy bien, hagámoslo por aquí. Pegar y luego guardar. Ahora, esperemos a ver mejor el resultado. A mí me encanta así. Entonces en esta conferencia, procederemos con display to tau component. Nos vemos entonces. 115. 113 Mostrar el componente total: Procedamos con la pantalla al componente tau. Así que rápidamente dirígete a reaccionar barra de progreso circular. Y aquí está la dirección. También puedes buscar barra de progreso circular React. Aquí, ¿es así? ¿Por aquí? Vas a ver diferentes barras de progreso justo en esta página. Entonces el primer paso que vamos a dar es instalar la barra de progreso circular React. Entonces sigamos los consejos. Entonces, si estás usando yum, este es el consejo para ti. Y si estás usando MPM, aquí tienes los consejos para ti. Entonces lo que voy a hacer es copiar este consejo o este comando y luego volver a VS Code. Vamos a cerrar esto. Control C para detener la neurona actual en el servidor. Entonces sólo tengo que pegar este consejo por aquí o este comando. Calienta la tecla Enter para que se encienda. Instalado. Exitoso. Hermoso. Así que abre el explorador, cierra el chat Jess abajo Comando B para abrir el Explorer. Y luego abrimos el componente en el que se muestra la pantalla a nuestro directorio, vamos a crear un nuevo componente llamado los dossiers de hotel split. Crear el archivo CSS correspondiente. Pasemos al hotel dividido RFC para generar el componente funcional. Bueno. Hagámoslo rápidamente renderizado, bien, estamos en el hogar. Entonces vamos a entrar en este div con el nombre de clase del widget analítico de Charles. Va a ir justo debajo de la tabla. Entonces voy a hacer el split hotel. Y por favor asegúrate de importarlo en la parte superior. Guardar. Ahora, procedamos. Vamos a comenzar dando a este div un nombre de clase de contenedor de visualización. ¿Verdad? Estamos en el div. Vamos a tener otro div con el nombre de clase de top. Y luego justo dentro vamos a tener una etiqueta H1. Y estos, voy a hacer ingresos totales. Especifique también el nombre de la clase. Vamos a hacer título justo afuera de este div con el nombre de clase de top. Vamos a tener otro div. Dale un nombre de clase de Bután, ¿verdad? Para traer el div con el nombre de clase de bottom, vamos a tener otro div con el nombre de clase del gráfico destacado. Justo dentro, tenemos que mostrar la barra de progreso de React. Y para ello, primero, tenemos que importarlo de un dedo del pie. Voy a hacer importar progreso circular por el cual los niños de barra de progreso circular React también. Tenemos que importar otro llamado Build styles. Habiendo hecho eso, vamos a importar los estilos también. Entonces lo que voy a hacer es volver a la página web. Aquí están en realidad las entradas, pero estoy haciendo uso de la barra de progreso circular. Estoy haciendo uso de la barra circular de progreso con niños. Entonces solo tengo que copiar esta entrada para los estilos. Ven aquí, pega, ¿verdad? Así. Perfecto. Ahora comencemos a usar la barra de progreso secular. Entonces bien, dentro de este div con el nombre de clase del futuro, vamos a renderizar el progreso circular por con niños. Ciérrala. ¿Qué es la etiqueta de cierre automático? ¿Verdad? Dentro del valor va a ser 80. Todas estas cosas. Entonces también puedes copiarlo directamente de la página, pero solo quiero especificar mi propia información para que podamos seguir adelante y hacer lo que quieras. Pero es bueno. Sigues mi ejemplo. El adquirente de la prueba. Bien. Vamos a usar los dientes de dólar justo dentro de las llaves. Entonces. Vamos a tener AT y fuera del corchete, voy a especificar por ciento. Entonces esto va a mostrar el 80 por ciento, ¿verdad? Estamos en la barra del progreso secular. Preocúpate, te mostraré en un GeV, el ancho del trazo. Hagámoslo diez estilos. Ahora tenemos que hacer uso de los estilos de construcción. Acoplamiento, cerrar paréntesis, abrir y cerrar el corchete. Voy a hacer trazo, curva de línea. Esto va a ser PERO t, así como esto, puedes llamarlo pero, pero no sé cómo pronunciar esto de todos modos. Entonces cuando guardes y veamos si tenemos algo visualizado en el navegador. Y en el navegador. Bien, entonces este es el porcentaje que estaba tratando de explicar. Entonces aquí está la barra de progreso, aquí está el título a los ingresos de la ciudad. Entonces sigamos adelante para agregar los detalles necesarios y hacer que se vea extremadamente agradable. Vs código. Entonces justo después de este div con el nombre de clase de futuros chats, vamos a tener una etiqueta P. Vamos a darle un nombre de título de clase. Entonces todas estas cosas, creo que deberías entenderlas. No necesito explicar nada aquí. Ya sabes lo que es la etiqueta p. Tramitación de transacciones anteriores. Coma, el último pago podría no ser contabilizado. Entonces hay que cerrar la etiqueta p. Lo más sencillo que, correcto, veamos cómo aparece en el navegador. Bien, aquí está la preocupación. Empezaremos a estilizar este rudo y definitivamente te va a encantar. Vamos a formatear el código son ahora mismo tenemos sangría adecuada. Aquí. Vamos a tener un div con el nombre de clase de resumen, ¿verdad? Estamos en este div, vamos a tener otro div. Dale un nombre de clase. Off Item, ¿verdad? Estamos en el rubro. También tenemos un div. Dale un nombre de clase del título del elemento de visualización. Aquí vamos a tener otro div, el nombre de clase del ítem resuelto. Así que justo dentro de este div, vamos a mostrar algunos iconos para indicar realmente negativo. Así que ve a la cima. Por supuesto, ya sabes, estamos, estamos buscando nuestros íconos de, vamos a importar la flecha del teclado hacia abajo desde la interfaz de usuario material. Aquí. Justo aquí. Vamos a rentar es bueno. Lo cierras con la etiqueta de cierre automático. Ahora, vamos a especificar el tamaño de la firma. Vamos a tener otro div, darle un nombre de clase de resultado cantidad 15, 73. Bien, bien. Así que ahora vamos a copiar el div para el nombre de clase del ítem y luego duplicarlo dos veces. Lo que vamos a hacer ahora es cambiar los detalles. Aquí va a ser la semana pasada. Hagámoslo podemos hacer que estos también sean positivos. Porque es positivo, la flecha va a subir. Entonces tenemos que volver a los íconos y luego importar teclado. Bien, entonces aquí también, vamos a hacerlo positivo, así como ser positivo. Bien, voy a hacer el objetivo aquí así. Hagamos de esto lo que quieras para hacerlo, entonces, ya sabes que esto es sólo un detalle temporal. Entonces aquí voy a hacer teclado. Bien, creo que estamos bien para irnos. Por favor, asegúrese de formatear el código con. Ya ves que tenemos sangrías adecuadas. Al guardar y volver al navegador. Aquí, ¿ves que tenemos listo el total de display? Pero ahora no se ve hermosa como se esperaba. Y claro, ya sabes, en la próxima conferencia, definitivamente la haremos agradable. Nos vemos en la próxima conferencia. 116. 114 Visualización de estilo: Sigamos adelante para estilizar los componentes totales de la pantalla. Proceder al código VS. Rápidamente abre este split hotel dot css. Y por favor, antes de continuar, solo tenemos que vincularlo para que no nos olvidemos de hacerlo en el futuro. Importar punto slash dot CSS. Tan simple como eso. Como es habitual, vamos a demarcar la pantalla así. ¿Correcto? Comencemos con mostrar el contenedor total. Copia. Ven aquí. ¿Vamos a flexionarlo al margen derecho? 15 píxeles. Vamos a especificar la sombra de caja. Así que sólo voy a copiar el que voy a usar por aquí. Y te dije que en realidad puedes seguir adelante en Internet para buscar box-shadow y luego te llevará a un sitio web donde puedes, ya sabes, hacer paradas tú mismo. Para que no tengas que memorizar estos márgenes, 20 píxeles superiores, el radio del borde. Queremos que esté un poco en los bordes. Así que los píxeles de deriva harían eso. Al guardar y pagar el navegador. Hermoso. Ahora ha tomado la forma esperada. ¿Puedes ver qué tan bien? Entonces sigamos adelante para estilizar el resto de los artículos. La siguiente línea de término es la parte superior. Vamos a tener una pantalla, flex. Alinee los artículos, al centro. Justificar el contenido, el espacio de manera uniforme. Entonces queremos que toda la especie sea igual. Y es entonces cuando usas el espacio de manera uniforme. Creo que ya lo sabes, el color, claro, ya sabes lo que es un número par, ¿verdad? Hazlo gris. Siete boletos para el navegador. Echa un vistazo. ¿Puedes ver perfecto? línea occidental es el título, que es este tipo en absoluto. Entonces vamos a darle un tamaño de fuente de 15 píxeles. El trigo de la fuente. Hagámoslo audaz. Bien, vamos a sacarlo para ver si estamos obteniendo los resultados esperados. Son. Esto es demasiado pequeño. Hagámoslo 18 pixeles. Bien, ya está bien. Bien. El siguiente en la fila es el fondo. Déjame mostrarte a este tipo de aquí. El acolchado. Flexión de pantalla de 20 píxeles, dirección flexible. Entonces lo queremos de arriba a abajo. Y voy a hacer columna. Bien, espero que entiendas tu Flexbox. Alinee los elementos al centro, justifique el contenido. Centro. Después la brecha. Hagámoslo 14 fotos. K. Este componente va tomando forma paulatinamente. El siguiente es el gráfico futuro. Este tipo de aquí. Para cuando terminemos con esto, todo debería quedar bien. Vamos a especificar el ancho. 100 pixeles, la altura, 100 pixeles. Bueno. ¿Puedes ver? Bien, continuemos. El siguiente en la línea es el título. Vamos a hacer cantidad. Déjame mostrarte a este tipo de aquí. Entonces. Dale un tamaño de fuente de 30 píxeles. Ahora tenemos que estilizar la descripción. Las malas hierbas de fuente son 300. El tamaño de la fuente. Para tener fotos, el color es verde. Alinee el texto, centre, guarde y veamos cómo se ve la descripción ahora. Se ve bien. El nido es el resumen. El ancho. Hagámoslo al 100%. Vamos a tener un flex de display. Y luego alinee los elementos al centro. Justificar el contenido. Espacio entre el consumidor y el espacio entre las paradas. Entonces, cuando revises el hueso del navegador, puedes ver que todo va tomando forma poco a poco. Así que vamos a ejecutar rápidamente el up con la pantalla total. El siguiente es el ítem. Y por favor siga mi ejemplo sobre cómo estoy salando el CSS. Definitivamente te ayudará en el futuro para que no tengas que dispersar la clase CSS que está alrededor. Cuando hagas eso, te llevará tiempo buscar una clase en particular, tal vez cuando quieras volver a diseñar el proyecto en el futuro. Pero cuando lo haces así, puedes obtenerlo fácilmente cuando lo estés buscando. Vamos a probar una línea al centro. Creo que deberíamos simplemente ejecutarlo. Bien. A continuación se presentan los resultados del ítem. Tengámoslo display flex. Alinee los elementos. Centro, el margen superior, bien, desde arriba, vamos a tener diez pixeles serán suficientes para eso. Después el tamaño de la fuente. Hagámoslo theta1 pixeles. Tenemos que estilizar lo negativo y lo positivo va a copiar esto. Ahora, cuando es positivo, queremos mostrar el color verde. Y claro cuando es negativo, ¿verdad? Queremos mostrar color rojo. Cuando es negativo. Es tan sencillo como eso. Multitud. Echa un vistazo. Todo está bien alineado y se ve extremadamente hermoso. ¿No te gusta esto? A mí me encanta. Bien, así que ahora tenemos nuestra pantalla total en buena forma. Esto ya está apagado. Y en la próxima conferencia, seguiremos adelante para crear los widgets. Nos vemos en la próxima conferencia. 117. 115 Componente de Widget de orden: En esta conferencia, vamos a comenzar a construir el orden que hicimos componente, que es la última tabla de transacciones, rápidamente tuvo en VS Code y menos proceder. ¿Verdad? Estamos en el orden que hicimos directorio. Vamos a crear el pedido Widget Company. Oye, ¿es hacer clic con el botón derecho en Nuevo archivo? Ordenar widget punto g es RFC para generar el componente funcional, vamos a crear rápidamente el archivo CSS correspondiente. Lo que hago a continuación es vincular mi componente con el archivo CSS para que no nos olvidemos en un futuro, input dot slash dot css. Y por favor llévate ropa. Esto es en letra minúscula. Hermoso. Rápidamente abre el GAS de inicio y vamos a tenerlo renderizado sobre a. así que justo después del div de cierre de className, widget analítico de chat, vamos a tener otro div, darle un nombre de clase de orden, un widget de miembro. ¿Verdad? Dentro de este div, vamos a renderizar el OBJ más cerca de la etiqueta de cierre automático y por favor, hazlo bien en importarlo en la parte superior. No sé si el código está limpio, así que solo tengo que Zoom. Creo que es demasiado grande. Bien, mantengámoslo así. Guarde lo más rápido formatear el código con más bonito. Bueno. Así que antes de proceder a comprobarlo en el navegador, tenemos que estilizar este div con el nombre de clase de orden y widget miembro, home sss punto. Y entonces aquí vamos a exhibir flex. Dale un margen de 30 píxeles y hueso. Cuando guardes, echa un vistazo al navegador. Ahora, el orden que hicimos componente, Empecemos a trabajar en ello. terminamos con el home, así que ciérralo y luego procedemos a ordenar widget dot js. Vamos a darle rápidamente a este div un nombre de clase de ese contenedor, ¿verdad? En donde el contenedor de pedidos, vamos a tener una etiqueta hash para mostrar el título. Entonces primero, vamos a darle un nombre de clase de otro título. Entonces voy a hacer la última transacción. Cuando guardas y revises el navegador. Aquí, ¿es así? ¿Verdad? Estamos en este div. También vamos a tener una mesa. Dar a la tabla un nombre de clase de tabla de orden. Así que bien, estamos en la mesa. Vamos a tener el papel de mesa, que es el TR. Dale un nombre de clase de orden t son de cerebro derecho. Tr. Vamos a tener el encabezado de la mesa. Th dar el nombre de clase de orden t aquí a este otro encabezado de tabla. Entonces estamos en el HTML interior. Vamos a hacer cliente, bien, resaltarlo y duplicarlo cinco veces. Aquí lo cambiaremos a eso. Entonces básicamente solo estamos trabajando en el encabezado de la mesa. Curso de amor. Cuando terminemos, te voy a mostrar en el navegador. Cuando guardas en el navegador. Estas, ¿puedes ver datos de clientes, producto, cantidad, ubicación o estado? Uy. Chicos, necesitan ser caballeros de estado de salida gramaticalmente. Entonces lo siguiente en línea es crear los datos de la tabla. Bien, para que podamos sentir la mesa con algunos detalles. Así como aparecía así. Aquí está el encabezado de la tabla y estos son los datos de la tabla. Bien, estamos en la etiqueta TR de cierre. Vamos a tener otra T, R. Y esto va a ser para los detalles de la mesa. Dale un nombre de clase de orden t, r. y luego justo dentro, vamos a tener un Td, que es los datos de la tabla. Dar el nombre de clase de O al usuario IMD como RC porque queremos mostrar la imagen del producto. Entonces antes de proceder lo peor el código, tenemos que importar las imágenes Comando B para abrir el Explorer y luego abrir el público. Ahora tenemos que minimizar el código VS. Ejecute dos materiales de tablero. Tenemos las imágenes que vamos a utilizar en este curso. Arrástralo y suéltalo donde probablemente quieran maximizar. Abre las imágenes. Aquí tenemos la imagen de miembros, que es la imagen que vamos a usar para mostrar en la mesa de miembros. Y aquí tenemos el producto IMG, que son las imágenes del producto, por ejemplo tenemos el auricular. Sé que entiendes esta cama. Ciérrela. Y luego SRC equivale a cuatro. Tenemos que hacer referencia a las imágenes. Productos Slash, auricular IMG slash. auricular es una de las imágenes del producto que tenemos sobre el clóset arriba con una etiqueta de cierre automático, y luego la salida es la alternativa. Entonces, si esta imagen no se carga, vamos a hacer problemas de internet. Entonces, si esta imagen no aparece en el navegador, la alternativa, que es mostrará la alternativa, que es este tipo de aquí. Y vamos a darle un nombre de clase de IMG, tan simple como eso, guardar y vamos a echarle un vistazo. Aquí mismo están los chicos perfectos. Todo limpio, pero no tan limpio como se esperaba. No he trabajado en la imagen. Ahora, vamos a trabajar en los detalles del resto. Aquí vamos a tener otro td. Dale un nombre de clase de O'Donnell. Justo después de la etiqueta de cierre de la T D, vamos a tener otro td. Dale un nombre de clase de orden d. Así que aquí vamos a tener el 4 de enero de 2023. Esta es solo una fecha imaginaria, por lo que puedes decidir cambiar el título y duplicarlo cuatro veces. Nombre antiguo, monto o esa ubicación o hace estado. Entonces, supongamos que este tipo está ordenando a la USC y luego el estatus como, como estás gastando. Entonces ahora vamos a tener órdenes con diferente estatus. Entonces vamos a tener la estancia única al gasto declinada n aprobada. Entonces, para implementar dicha funcionalidad, déjame mostrarte. Bien, déjame hacerlo por aquí. Voy a borrar el gasto por ahora. Entonces voy a renderizar una función llamada navegación, darle un tipo aprobado más cerca con la etiqueta de cierre automático. Y luego cuando guardas y revisas al navegador, va a decir, la navegación no está definida. Aquí, ¿es así? Así que desplázate hacia la parte superior derecha, estamos en el componente, vamos a definir el equipo de agente de navegación. Ponlo a nuestra función. Justo dentro de la función, vamos a tomar en tipo. Y esta función va a devolver una pieza de UI. En este caso, vamos a tener un canotaje. Vamos a darle al botón un nombre de clase de. Esto será envuelto. Soporte Macaulay. Vamos a darle un nombre de clase para votar. ¿Verdad? Estamos en el HTML interior. Vamos a mostrar el tipo así como esto. Entonces con esto, podremos especificar diferentes estados a diferentes órdenes. Bien, así podremos tener un pedido que esté pendiente, aprobado nuestra consola Seguro. Van a aparecer en diferentes colores. ejemplo, si se aprueba la orden, vamos a comercializar con verde. Y si se declina o se cancela, vamos a comercializar con rojo. Y si está pendiente, vamos a comercializar con amarillo. Por lo que esto nos ayudará a manejar tal tema. Por supuesto, eso no es un tema. Guarda y echa un vistazo al navegador. Ids. Su derecho. Todo apareció como se esperaba. Y aquí está la votación aprobada. Entonces lo siguiente en la línea es duplicar el TRO de un nombre de clase de orden TRO. Vas a destacar de las líneas 22, líneas 30. Y luego quiero duplicarlo cinco veces. Pero a tu final, puedes decidir duplicarlo tantas veces como quieras. No he hecho esto. Ahora. Sólo voy a cambiar los datos, pero no creo que sea necesario. Entonces en lo que me voy a centrar es solo en el botón Aprobar para que podamos tener el mismo orden. El resto, pero sí. Bien. Déjame hacer algo por ti. No quiero que te confundas. Aquí. Vamos a hacer referencia a la chaqueta y es JPEG. Guarda y echa un vistazo al navegador. Puedes ver aquí sólo voy a hacer chamarra. Aquí. Voy a hacer Gucci. Entonces creo que esto debería haber sido el nombre de marca, pero es genial. Se pueden cambiar los datos. Supongamos que este tipo está ordenando desde el Reino Unido, entonces el estado va a ser cancelado. E.g. Y este otro tipo, vamos a cambiar su estado. Esto va a estar pendiente. Cambios a pendientes. Cambiemos esto para cancelar. Sólo quiero que veas cómo funciona. Entonces al final, en realidad puedes cambiar todos estos detalles, bien, puedes llenarlo con algo diferente. Y ya tenemos las imágenes del producto para que podamos alimentar las CRO con las imágenes de una elección sobre para mí, dejémoslo de esta manera para que la conferencia no sea más larga que esta cuando guardes el proyecto. Bueno. Entonces aquí está, eso es lo que hemos logrado en esta conferencia. Y te puedo asegurar en la próxima conferencia, cuando comencemos a estilizar este componente, claro, ya sabes cómo sería el final esperado. Esto es todo por ahora. Nos vemos en la próxima conferencia. 118. 116 Widget de pedidos de estilo: Derecha, Así que comencemos a estilizar este componente. Entonces solo tienes que volver a dividir tu pantalla. Trae el archivo CSS a la derecha, y luego el componente que dejó. Vamos a empezar con el contenedor de pedidos. Aquí lo resalta y copia. Ven aquí, punto o el contenedor. Y entonces el flujo va a ser al relleno de 20 pixeles. Entonces, si el flujo es de dos, significa que va a tomar dos unidades de la pantalla. La sombra de caja. Ya tengo la sombra de caja que estoy usando. Entonces solo tengo que venir aquí, resaltar y copiar. Y claro ya sabes cómo conseguir la sombra de caja. Guarde y veamos qué tenemos. Bien, bien. ¿Te das cuenta de algo? Échale un vistazo. Perfecto. El nido es el título de la orden. Realizado. El tamaño es de 20 píxeles. La fuente, margen de trigo, ¿verdad? 20 píxeles es bueno. Aquí está. Estiliza la tabla de pedidos. El ancho es del 100 por ciento. Espaciado entre bordes. 20 píxeles. Guarda y compra el navegador. Bueno. Poco a poco va tomando forma. El usuario del pedido. Vamos a tener un flex de pantalla, alinear elementos al centro. Entonces el nido es el orden T, H, que es el encabezado de la tabla de pedidos. Piensa que está en la cima aquí. Alineación de prueba. Alinea el texto a la izquierda. Ya ves que todo está en buena forma, pero no podrás notarlo simplemente porque la imagen está ocupando gran cantidad de espadas. Entonces cuando reducimos el tamaño de la imagen, va a aparecer perfectamente bien. El siguiente en línea es estilizar la imagen. ¿Cuál es el nombre de clase de la imagen? Aquí está el punto o el IMG? El ancho es de cinco píxeles. La altura va a tener la misma altura y anchura. ¿Seth? ¿Puedes ver? Ahora parece perfectamente bien como se esperaba. Queremos especificar el radio del borde. Para ser un poco curvilíneo. Cinco píxeles nos ayudarán a hacer eso. Cuando revisas el navegador, es posible que no puedas notarlo simplemente porque esta imagen en particular es PNG. La imagen te muestra, ¿ puedes ver esto? Los bordes son curvos. Entonces para que parezca bien, voy a especificar el color del borde. Vamos a tenerlo un pixel, rojo sólido. Puedes cambiar el Collado y solo ser creativo. ¿Puedes ver ahora el ajuste del objeto , centro, margen, derecho? Diez píxeles, guardar. Hermoso. ¿Puedes ver? Vamos a continuar. La línea es para estilizar los puntos de navegación de orden. Déjame mostrarte a este tipo de aquí. El relleno, cinco píxeles. No queremos ninguna frontera, frontera-radio. Hagámoslo cinco pixeles. Guardar el nido y la línea es aplicar colores de acuerdo con el estado. Entonces aquí tenemos consola aprobada pendiente. Entonces, si se aprueba, queremos que este botón se muestre verde. Los riesgos cancelan. No necesitamos mostrar rojo. Y si se trata de gastar, queremos que muestre una especie de color amarillo. Entonces hagámoslo rápido. Puntos. Este tipo de aquí mismo, vamos a copiar y pegar punto aprobado. Déjame mostrarte aquí. ¿Es el tipo de botón? Entonces vamos a tener el color de fondo E5, FA, F2. Y el color de la fuente va a ser algo verde. Sí, Guardar en el navegador, recargar. No se aplica el estado. ¿Qué pasó? Esto es correcto. Fondo const. Esto es realmente correcto. Bien chicos, miren, aquí va a estar espaciado así. Bien. Si lo tienes escrito así, no va a funcionar. Entonces solo tienes que espaciarlo y luego Guardar. Echemos un vistazo al navegador ahora. Hermoso, Trabajado. ¿Se ve bien? Vamos a aplicar estas toallas que el resto del estado. Así que sólo voy a copiar a este tipo así. Aquí, pega. Entonces vamos a hacer punto pendiente. Por favor, asegúrese siempre de verificar si la ortografía del nombre de su clúster es correcta. Eso fue exactamente por lo que dividí la pantalla. Entonces podemos estar comprobándolo. Pendiente. Bien. Entonces cuando está pendiente, el color de fondo va a ser en forma de amarillo, 12, 34ff f, f, y ve un color de fuente va a ser 32 por ciento. Por favor, asegúrese de envolverlo y luego paréntesis, guárdelo en el navegador tan seguro como se esperaba. Por último, implementemos los estilos para el consejo de navegación de consola, canotaje. O se puede ver declive al final. No hay nada malo en absoluto. Te dije que hay necesidad de ser creativo a tu final. ¿Bien? Bien, vamos a darle un color de fondo. También vamos a usar este formato por aquí. Esta vez, 35584. Esto nos dará como color atlético que queramos. El color de la fuente va a ser D9 57. Guardar en el navegador. Ellos son estos, puedes ver que todo aparece como se esperaba. Verás, se ve extremadamente bonito. Esto es profesional. La aplicación se ve extremadamente hermosa. Esto suele ser nuestro n. En esta conferencia, comenzaremos con el widget de miembros. Nos vemos entonces. 119. 117 componentes de Widget de miembros: En esta conferencia, comenzaremos a diseñar a los miembros que hicimos. ¿Aquí están las técnicas? El widget de órdenes es el doble del tamaño del widget de miembros. Y lo logramos haciendo flex dos, lo que significa que este tipo de aquí se lleva dos unidades. Entonces en actrices significa que es el doble del tamaño de este tipo de aquí. Entonces, en la conferencia anterior, hay un error que cometí. Esperaba que corrigieras ese error. Así que abre el CSS de casa. Se supone que esto es flex. Y luego lo tenemos para flexionar dos, lo que significa que está ocupando dos unidades de la pantalla. Habiendo hecho esto, vamos a cerrarlo. Comando B para abrir el Explorador. Y justo, dentro del directorio de miembros, vamos a crear un nuevo componente llamado miembros. We jet dot g es genérico, el componente funcional. Y por supuesto también tenemos que crear el correspondiente archivo CSS miembros widget punto CSS. Bien, tan rápidamente vamos a vincular el archivo CSS con el componente importa miembros de la raya diagonal de punto. Nosotros jet dot CSS. Aquí, complacido. Va a ser en letra pequeña, guardar como tener tres componentes casa y vamos a renderizar a los miembros. Nosotros lo hicimos. Entonces justo debajo de los widgets de orden, vamos a renderizar miembros. Nos acercamos tanto a la etiqueta de cierre automático y siempre nos aseguramos de importarla en la parte superior. Guarda y echa un vistazo al navegador. Ya ves que tenemos a los miembros que hicimos por aquí. Comencemos a diseñar el widget de miembros. Abre a los miembros del E-jet. Así que ahora mismo, sólo voy a borrar esto. Vamos a darle a este div un nombre de clase de miembros. Hicimos contenedor ¿verdad? Dentro del div. Vamos a tener un lapso, darle un nombre de clase de los miembros a los que acabamos de atar. Dentro del HTML interno. Voy a hacer miembros recién ingresados. Aquí vamos a tener una etiqueta UL, ¿verdad? Estamos en la URL con el nombre de clase de los miembros con al menos chicos. Quiero ser un poco más rápido por aquí en esta conferencia. Entonces solo tienes que seguir mi ritmo. Y rojo en donde la etiqueta UL, vamos a tener una etiqueta LI. Dale un nombre de clase de miembros, elemento de lista de widgets. Solo hay que copiar, pegar y hacer ítem en la lista. Vamos a tener una etiqueta IMG, SRC igual imágenes slash. Entonces déjame mostrarte algo dirigiéndose al público. Aquí están las imágenes y aquí está el directorio de miembros donde tenemos todos los miembros, image slash Miembros slash dc dot JPG. Ciérrela y luego equa problema de Internet. Por supuesto, debes saber lo que está al aire libre. Dale a este IMD el nombre del clúster de destino del cual en IMG, más cerca con la etiqueta de cierre automático. Veamos qué pasa en la pantalla. Hermoso. Ahora vamos a tener un div, darle un nombre de clase de widget de miembro Usuarios. Una cosa que quiero que emular de mi parte es cómo paso el tiempo escribiendo el nombre de mi clase. Siempre me aseguro de escribirlo en su totalidad para determinar la intención del DV. Entonces, cuando otro desarrollador recoge mi código, se vuelve muy fácil de leer y entender. Entonces en ese caso, no van a ser problemas para establecer paradas en mi código. Creo que entiendes el punto. Ahora. Retro y D, si vamos a tener un span, darle un nombre de clase de nombre de usuario widget de miembro. Vuelven a ver a Dominic span. Dale un nombre de clase del widget de miembro. Usa un título. Ella es reactiva en un nulo, pero tienen razón. Así que justo afuera de este div con el nombre de clase de los miembros que obtenemos, vamos a tener un paseo en bote. Dale un nombre de clase de los miembros, los derechos de voto del widget estaban en la navegación. Queremos mostrar un icono. Entonces, lo que voy a hacer aquí mismo es importar visibilidad desde la interfaz de usuario del material. Entonces aquí tenemos que renderizar clúster de visibilidad tanto de la etiqueta de cierre automático como justo dentro. También tenemos que darle un nombre de clase va a ser miembros. Hicimos icono. Y la prueba va a estar exhibiendo. Podría hermoso. Guardemos y marquemos en el navegador. Bien, así que aquí está el barco en lo que el icono. Y cuando comencemos a estilizar, vamos a hacer que se vea bien. Así que no hay necesidad de que el siguiente en la fila sea duplicarlo tantas veces como quieras. Entonces, habiendo hecho esto, también puedes cambiar la imagen del usuario, el título y el resto de ellos. Bien, entonces solo voy a hacer uno por ti y luego tú puedes hacer el resto. Entonces este es DC Dominic. Lo voy a hacer aquí. También ven a Víctor. Ella es una reactiva. Y déjame abrir las imágenes y ver si puedo conseguir una imagen muy bonita. Dama punto PNG. Entonces aquí voy a hacer lady dot PNG Portable Network Graphics. Espero que sepas que cuando ahorras un, mira qué pasa. Bien, ahora tenemos esta imagen por aquí. Bien, así que básicamente, esto es todo por ahora y por favor asegúrate de cambiar las imágenes y el título. Entonces no hace falta que haga eso en esta conferencia, porque cuando haga eso, la conferencia va a tardar demasiado. hay un error tipográfico Aquí hay un error tipográfico que no me gusta. Entonces esto debería escribirse. No me gusta tener errores en mi trabajo. A mí me gusta perfecto y ordenado. Todo bien. Entonces esto es todo por ahora. Y en la próxima conferencia, comenzaremos a estilizar este componente. Nos vemos entonces. 120. 118 Styling el Widget de los miembros: En esta conferencia, comenzaremos a estilizar el componente de miembros. Porque por ahora parece que todo está fuera de forma. Simplemente porque esta imagen está abajo a lo grande. Está ocupando una gran parte de la pantalla. Entonces comencemos con la imagen. Por supuesto, debes saber cómo hacer esto. Tome los miembros que hicimos a la derecha, y luego lleve a sus componentes miembros a la izquierda. Empecemos por la imagen. ¿Cuál es el nombre de clase de la imagen? Img. El nombre de la clase es widget IMG. Copia. Ven aquí. El ancho es de 40 píxeles, el alto 40 píxeles. Entonces especificaremos el radio del borde, 50 por ciento, que será la mitad del ancho y la mitad de la altura. Y entonces le va a dar un bucle circular. Cuando guardas y marques en el navegador. Y ya ves ahora las cosas van tomando forma poco a poco. Bien, hagamos que se alimente de objetos. Terminado. Ahora podemos empezar a estilizar el resto de la clase. Entonces aquí, primero tenemos a los integrantes que hicimos contenedor. Estoy, por favor, asegúrate de que viene en la parte superior. El flujo va a ser uno. Entonces esto va a tomar una unidad de la totalidad de esta porción. Y claro, ya sabes, esto está tomando dos unidades, así que esto es dos veces más grande que esto, y entonces esta será una unidad. Lo estoy explicando simplemente para que todos lo entiendan lo suficientemente bien. Cuando guardas y compruebes que el navegador puedes ver hermoso el relleno. El relleno va a ser de diez pixeles. Margen izquierdo. Hagámoslo 20 pixeles. Usted guarda y echa un vistazo al navegador. Bueno. Entonces la siguiente línea de término son los miembros, simplemente morimos en casa. Lo siento, vamos a hacerlo aquí. El tamaño de fuente, 20 píxeles, ancho de fuente, hagamos que vea 100. Y claro tenemos que especificar la sombra de caja de este contenedor. Te dije que tengo una sombra de caja de disfraces que uso para mi proyecto. Entonces aquí está. Bien, bien. El nido es los miembros con al menos margen es cero. Acolchado. El estilo de lista. Estoy seguro de que lo que es el estilo de lista. Ves este punto por aquí. No sé si se puede ver claramente estos puntos, estos puntos, todos estos puntos que indican que los elementos de la lista. Entonces queremos quitársela y vamos a hacer cuando guardes y revises al navegador. Acercar un poco. ¿Ves que se ha ido? Lo que Nido, creo que son los miembros con al menos artículo. Vamos a tener un flex de visualización, alinear elementos al centro, justificar contenido, espacio entre los elementos. Entonces vamos a hacer espacio entre guardar. Y así se puede ver la diferencia. ¿Puedes ver? Así que lo tuvimos flex y luego creamos ese espacio intermedio. Entonces, cuando retires los copos y guardes el proyecto, mira dónde vas a tener. Ahora creo que entiendes la utilidad del flujo también cuando quitas el espacio entre, déjame mostrarte lo que es bueno. Te muestro estos. Puedes ver ahora todo está agrupado. Echa un vistazo. que ahora cuando recuperas que justifican que el contenido sea espacio entre ellos, va a crear espacio en el medio. Todos estos duros. Creo que estoy haciendo mi mejor esfuerzo para que entiendas CSS independientemente de, si estamos haciendo reaccionar, margen de izquierda a derecha es un montón de píxeles. La parte inferior es de 20 píxeles. Hermoso. Bien, casi terminamos con el estilo. El nido es Miembros con ese usuario. Hagamos que muestre flex, flex direction. Lo queremos de arriba a abajo. Entonces voy a hacer colon. Ahora puedes ver que tenemos el nombre y luego tenemos el título del puesto. Entonces Antiguamente están todos escritos en la misma línea. Déjame mostrarte cuando me quito la dirección flex para ser columna. ¿Puedes ver ahora el yo en la misma línea? Y entonces cuando hago flex dirección para ser columna va a empezar de arriba a abajo. Echa un vistazo. El siguiente en la fila son los integrantes. Obtenemos nombre de usuario. Sólo tenemos que especificar la fuente de trigo. Hagamos que vea 100. Los miembros, nosotros sí usamos un título. El tweet de fuente es 300. Entonces el nido es el botón de widget de miembros. Este botón de aquí. Queremos que se vea bien loops donde un minuto, miren chicos, antes de continuar, tengo que cortar esta imagen, ven a x Tenemos que colocarla justo después de los miembros con al menos ítem aquí. Así. Estoy tratando de ordenarlo. Entonces eso es, claro que te lo he dicho varias veces. Entonces el nido es el widget de miembros votando. Miembros, hicimos paseos en bote. Tengámoslo display flex. Alineemos los elementos. Centro. La frontera. No queremos ningún borde alrededor del cuerpo en absoluto. Pero queremos especificar el radio del borde para que pueda ser un poco curvilíneo. D es diez píxeles, relleno, siete píxeles, diez píxeles aquí. Entonces el color de fondo y el color de fuente va a ser gris. El puntero del cursor. Por último, vamos a estilizar al miembro. Hicimos icono, que es este icono de aquí que aparece justo dentro del cuerpo. El tamaño de la fuente es de píxeles del sistema. Margin-derecha. Cinco píxeles. Cuando ahorras. Y veamos el resultado final. ¿Ves que todo parece perfectamente bien como se esperaba? Entonces terminamos con la página de inicio. Y seguro, esto es extremadamente hermoso. Esto es de primera categoría. A mí me encanta. Bien, así que esto es todo por ahora. En la próxima conferencia, comenzaremos a especificar nuestras rutas. Entonces, al hacer clic en el usuario, debería llevarte a EU como empresas. Al hacer clic en los productos, también lo llevará a la página del producto o al componente de tres productos. Bien. Entonces, si quieres cambiar el nombre y el título de estas cosas por aquí, puedes hacerlo al final. Por ahora. Decaimiento. 121. 119 implementación de las rutas: En un escenario del mundo real, una aplicación como esta debería poder redirigirte a otro componente cuando se escibe el enlace, ¿verdad? ¿Cuál es el lado de navegación cuando hacemos clic en los usos, la aplicación debería poder leer directores para reutilizar como página también. Cuando hacemos clic en productos, debería poder redirigirnos a la página del producto. Entonces, para implementar dicha funcionalidad, tenemos que hacer uso de una biblioteca externa llamada React Router. No te dirijas rápidamente a reaccionar router.com. Y por aquí tenemos la documentación. Y por supuesto, en su tiempo libre, puede decidir leer la documentación para tener un conocimiento profundo del enrutador React. Procedamos rápidamente. Dirígete a VS Code. Para proceder. Primero, tenemos que instalar el router React, ¿verdad? Estamos en la terminal. Voy a hacer Control C para detener la neurona actual en servidor y escribir en donde el directorio del cliente. Voy a hacer Node package manager, install, react, dash, router, dash dome. Lo más simple que presiona la tecla Enter para que se dispare. La instalación está en curso. Domo de router React instalado, exitoso. Déjame mostrarte rápidamente Comando P y luego buscar el archivo package.json. Y aquí está justo en línea, cisteína. Ciérrela. La siguiente línea de término es crear los componentes que queremos redirigir para aprender se hace clic en el enlace. Así que abre las páginas de componentes. Y luego justo cuando EU, al menos vamos a crear un nuevo componente llamado lista de usuarios punto j es generar los componentes funcionales. Vamos a crear rápidamente el archivo CSS correspondiente. Bueno. Cierra el Explorer. Abre la app. G es perfecto. Entonces lo siguiente en línea es importar router de navegador, rutas, rutas desde React, router, duna, arenas falsas, ¿verdad? Déjame mostrarte. Vamos a importar router de navegador. Rutas, rutas más tranquilas desde React, router, dash, no. Es tan sencillo como eso. No han importado todos estos duros del reactor de que en el nido es para envolver toda la aplicación con el router del navegador. Así que solo tenemos que borrar este div con el nombre de clase de app. No es necesario en absoluto. Bien, La aplicación se queja simplemente porque el elemento GSS tiene que estar envuelto en un nodo padre. Y ahora el nodo padre va a ser router del navegador. Destacados. Mantenga oprimido la tecla de opción en su teclado. Toca la tecla de flecha hacia arriba para moverla. Si esta opción no te funciona, solo tienes que resaltar el comando X para cortar y luego pegarlo en el router del navegador. Es tan sencillo como eso. Implementemos rápidamente las rutas. Ven aquí. Voy a hacer rutas que comprende de todas las rutas que vamos a tener en este curso. Entonces estamos en exhibiciones. Vamos a tener nuestras rutas individuales. Entonces voy a hacer rutas, especificar el camino y el camino. Sólo tenemos que indicar un slash delantero. Entonces esto es un puntero al componente del hogar. Entonces, habiendo hecho esto, en realidad tenemos que especificar el componente de preocupación. Y luego voy a hacer elementos adquirir, atrapar a este tipo de aquí y pegarlo aquí. Asegúrese de eliminar el espacio intermedio. Así como esto, todo genial. Y también queremos crear una ruta a la página de lista del usuario o componente, por así decirlo. Entonces vamos a tener ruta por aquí, ¿verdad? Estamos en la ruta. Especificemos lo anterior. Va a ser lista de usuarios de barra diagonal. Entonces vamos a especificar los elementos. Los elementos en este caso se refieren a los componentes de preocupación. Y ahora vamos a tener. Usuario menos, más cerca con la etiqueta de cierre automático. Y por favor asegúrate de importarlo en la parte superior. Justo como formato, el código con más bonito se ve limpio. Ahora vamos a probarlo. Destacados. Voy a copiar todo justo dentro de las cotizaciones y en el navegador. Entonces vamos a tener localhost 3,000 slash user, menos. Al pulsar la tecla Enter. Dice que no se puede llegar a este lado de alguna manera. Es simplemente porque tenemos que volver a poner marcha el servidor. Ven aquí. Bien, estamos en el terminal integrado VSCode. Asegúrate de estar en el directorio de clientes. Y luego voy a hacer Node Package Manager, iniciar el servidor así como esto. Y bajo navegador. Puedes ver ahora tenemos la página del usuario. Hermoso. Sin embargo estaban trabajando como se esperaba. Pero por ahora, cuando haces clic en Usuarios, no pasa nada. Vamos a implementarlo rápidamente. Volver a VS Code. Abre el lado Node.js, desplázate hacia abajo. Bien, entonces esta es la casa de aquí. Tenemos que concluir este ítem de la lista, ¿ verdad? Estamos en el enlace. Entonces vamos a especificar el enlace aquí. Y lo voy a hacer aquí, enlace a la página principal. Así equa, especifique la barra diagonal hacia adelante que sirve como puntero a la página de inicio. Por defecto, así es como especificamos la página de inicio. Después destaca. Muévelo a la derecha dentro del enlace nuevamente. Bien, aquí está el usuario. Especifique el enlace. Um, por favor, asegúrese de importar el enlace desde enrutador React haciendo esto, ¿está aquí? Bien, entonces aquí vamos a hacer enlace a. Por lo que tenemos que especificar la ruta que nos llevará a la página del usuario. Por supuesto, ya lo hemos hecho antes. Entonces solo tenemos que volver a app.js y luego copiarlo así. Por favor, asegúrate de que esto es exactamente mismo con lo que estás apuntando aquí. Pégalo así y luego resalta el elemento de la lista. Muévelo a la derecha dentro del enlace. Formateemos el código con más bonito. Se ve bien. Bien, guarda el proyecto en el navegador. Entonces cuando hago clic en home, agoté la página principal, cuando hago clic en Usuarios, nos lleva abajo para reutilizar o acelerar, o usas como componente, por así decirlo. Por lo que la aplicación está funcionando perfectamente bien como se esperaba. En la próxima conferencia, comenzaremos a implementar la página del usuario. Esto es todo por ahora. Nos vemos en la próxima conferencia. 122. Tabla de listas de usuarios: En esta conferencia, vamos a implementar el componente de lista de usuarios. Básicamente, vamos a tener una mesa donde muestran los datos del usuario y sus pagos. Por lo que esta funcionalidad se implementará con tabla de datos de interfaz de usuario de material. Rápidamente tuvo en MU i.com y búsqueda de mesa. Aquí, ¿es mei.com? ¿Correcto? Uno en el cuadro de búsqueda. Y aquí mismo vamos a ponernos a la mesa. Tenemos varias tablas que se pueden utilizar para construir varias aplicaciones. Tenemos aquí la tabla básica, los datos de la tabla. Tenemos la mesa densa, y muchas más. Entonces, ¿verdad? En este curso, haremos uso de los datos de la tabla. Entonces tienes la opción de verificar a un usuario individual, para seleccionar también a todos los usuarios. Puedes ordenar los artículos aquí mismo. Podemos decidir ordenar sin buscar por orden descendente. Puedes filtrar, ocultar o mostrar culombios. Entonces esta tabla es en realidad la mejor para la aplicación que estamos construyendo. Entonces, hagamos uso de esta tabla. Desplázate hacia abajo. Justo aquí. Vas a ver este icono de etiqueta. Haga clic para abrir el código. Para implementar esta tabla. Primero, tenemos que instalar esta biblioteca. Resalte todo justo dentro de las comillas simples, y luego copie. Vuelve a VS Code, abre el terminal integrado, ¿verdad? Ya lo tenemos abierto. Así que sólo voy a detener el servidor que se está ejecutando actualmente. Y luego voy a hacer npm install comando V para pegar lo que copiamos del sitio web MUL, pulsamos la tecla Enter para que se encienda. Entonces con esto, podremos hacer uso de la tabla de datos instalada exitosa. Entonces aquí mismo tenemos las columnas y las columnas se guardarán como cabecera de tabla, ¿verdad? Nos va a salvar una madura que puedas, ya ves como el FirstName, apellido, edad, nombre completo. Entonces la columna de aquí es la responsable de eso. Entonces aquí tenemos la fila y la fila se va a guardar como los datos que se utilizarán para llenar la tabla. Y cuando observes la mesa cuidadosamente, definitivamente te darás cuenta de que es verdad. Bien, entonces aquí tenemos LastName para ser nieve. El primer nombre es John, y luego los 35 años. Ven aquí. Recuerda que ordenamos esta alarma. Bien, entonces aquí tenemos a John Snow como apellido. El primer nombre es John, el apellido es nieve. La edad es de 35 años. Así que todas estas cosas de aquí, vamos a guardar como los datos para llenar la tabla. Justo aquí. Vamos a renderizar la cuadrícula de datos. Vamos a establecer reglas para ser filas, que es este tipo. Y luego vamos a establecer columnas para que sean columnas. Este tipo de aquí. Y entonces aquí tenemos filas por opción de pitch. Aquí se establece en cinco. Entonces por eso vas a tener 12345. Entonces van a aparecer cinco esa tabla. Pero puedes decidir aumentar la opción de marioneta ROS a cualquier número de tu elección. Y aquí tenemos la selección de checkbox. Es tan sencillo como eso. Así que vamos a tener esto implementado justo en nuestra aplicación. Volver al código VS. Voy a destacar estos, borrarlo. Vamos a darle a este div un nombre de clase. Y el nombre de la clase va a ser lista de usuarios. Así que justo cuando el div, vamos a renderizar la cuadrícula de datos. Pero por ahora, sólo tenemos que copiar la columna Resaltar Comando C para copiar, venir aquí y pegar, volver también. Tenemos que copiar este impulso. Así que resalta estos, límpialo también. No necesitamos líneas 21 a 22 reflejos y limpiarlo. Bueno. Regresa. Vamos a copiar las filas. Y por último, tenemos que copiar los datos, ¿de acuerdo? Lo mejor es pegarlo aquí. Correcto, rápidamente vamos a estilizar este nombre de clase. Copia. Ven aquí. Voy a hacer punto lista de usuarios, y vamos a flexionar. Hagámoslo cuatro y veamos qué tenemos a bordo. Abre la terminal y luego tendremos que iniciar el proyecto. Habiendo hecho esto, vinculemos rápidamente. Componente con el archivo CSS. Entonces aquí voy a hacer dot slash, user least dots, CSS, Save and checkout the browser. Las identificaciones. ¿Puedes ver eso? ¿Hermoso? Vamos a darle una oportunidad. Compruebo este artículo y se selecciona. Cuando busqué. Está funcionando perfectamente bien. ¿Ves eso? Miren, amigos, esto es fantástico. Podemos ordenar por orden ascendente. Ya ves, puedes filtrar. ¿Se puede ver por nombre, apellido, edad del nombre completo? Se puede hacer mucho por aquí. Qué bien, entonces lo siguiente en la fila es llenar la tabla con nuestros datos. Debido a que estos datos no son relevantes para la aplicación que estamos construyendo. Volver al código VS. Vamos a dejar el id, luego el feudo por el FirstName, vamos a cambiarlo a username. Aquí. Vamos a cambiarlo también para usar un nombre, darle un ancho de 200. Y esto se cambiará a correo electrónico, y aquí habrá correo electrónico. Bien, hagámoslo 200, que es el ancho. Y aquí tenemos el campo para la edad. Cambiemos el borde a estado. Estatus. Estatus. Vamos a borrar el número. El ancho es de 90. Y aquí tenemos el campo para el nombre completo. Vamos a cambiar estos dos. Pago. Eliminar la descripción. También se puede ordenar. Vamos a borrarlo. Después el ancho. Una vez esta T es suficiente. Bien. Todo genial, me encanta. Así anida otro campo extra. Sólo tengo que destacar, duplicarlo. Voy a hacer acción una vez que esta T sea suficiente. Bueno. Entonces habiendo hecho esto, cuando guardas y salgas al navegador, ves ahora tenemos el encabezado para ser nombre de usuario, correo electrónico, estado, pago y acción. Entonces vamos a implementar el uso como regla, que guardará Como los datos para llenar la tabla. Entonces sólo voy a destacar de las líneas 32 a 39. Deslímpielo. La idea es una. Vamos a eliminar el apellido, y este va a ser nombre de usuario. Por favor, asegúrate de que es exactamente lo mismo con el celom. Entonces el nombre de usuario que voy a hacer victor Dominic. Entonces aquí vamos a incluir avatar. Y el avatar va a estar aquí. Solo voy a copiar la URL de la imagen, pero quiero usar, y seguro, esta es solo una imagen aleatoria que obtuve de Internet. Bien, vamos a borrar esto. Aquí. Vamos a tener correo electrónico. Y el correo electrónico es estado va a estar hasta t más tranquilo. El pago. Eso es todo. Formateemos el código con más bonito. Y cuando formatees el código, va a quedar exactamente así. Entonces lo que voy a hacer ahora mismo es resaltarlo y luego duplicarlo tantas veces como quieras. Entonces por aquí, debes seguir adelante para cambiar el nombre de usuario, el id, y el resto de los detalles. Pero para mí, solo me interesa cambiar la identificación. ¿ Bien? Entonces el nombre de usuario aquí podría ser Dominic Daisy. El avatar podría ser cualquier imagen aleatoria en Internet. El correo electrónico, puede cambiar el correo electrónico a otra cosa. Puedes hacer que estos estén activos o no activos. Puede especificar una cantidad diferente aquí. Entonces cuando guardas y revisas el navegador, los ID, puedes ver que todo parece estar funcionando perfectamente bien. Pero cuando observes la pantalla, te darás cuenta de que la acción aquí está vacía, entonces te preocupes que se hará en el futuro. Entonces por aquí vamos a tener un botón para editar, botón para eliminar. Nos dirigimos hacia allí muy pronto. Bien, así que esto es todo por ahora. Y en la próxima conferencia, vamos a refacturar el código. Entonces, al refactorizar el código, simplemente quiero decir que vamos a tener los datos en un módulo separado. El código se ve un poco feo porque tenemos los detalles por aquí, y eso no es nada agradable. Entonces, en la próxima conferencia, vamos a separar los datos en un módulo diferente. Nos vemos en la próxima conferencia. 123. 121 Refactoring: En esta conferencia, vamos a refactorizar el código. Por refactorización, simplemente quiero decir que vamos a separar los datos de los componentes de la interfaz de usuario. Así que rápidamente dirígete al código VS. Y déjame mostrarte cómo hacer la apertura del Explorer. Y bien, ¿no sería el SRC? Vamos a crear un nuevo paquete llamado archivo de datos, ¿verdad? Estamos en el archivo de datos. Vamos a crear un nuevo archivo llamado user data dot j está aquí mismo. Vamos a tener los datos del usuario. Así que voy a hacer una const spot, usar como datos, configurarlo en un array vacío, y abrirlo. Así que bien, estamos en esta matriz, vamos a pegar las filas. Entonces Garza para usar como lista. Déjame mostrarte aquí las filas. Entonces voy a destacar de las líneas 208290, cortarlo. Sólo tenemos que borrar esto de la heroína para usar esos datos. Sólo voy a pegar esto tan simple como eso. Ahora, vamos a usar como mínimo atornillar. Vamos a importar usuarios del archivo de datos slash datos de usuario. Entonces aquí mismo, las filas van a ser iguales a los datos de los usuarios. Cuando guardas y salgas al navegador. Aquí, todo está funcionando perfectamente bien como se esperaba. Esto es todo por ahora. Y en la próxima conferencia, veremos cómo agregar un dato personalizado. Nos vemos entonces. 124. 122 Añadir datos personalizados: En esta conferencia, vamos a personalizar la mesa. Bien, entonces veremos cómo agregar nuestro propio artículo personalizado, ¿verdad? Estamos en la mesa. Tan rápido, déjame mostrarte cómo hacer eso al código VS. Entonces aquí mismo, voy a hacer más tranquilo. Vamos a agregar nuestros campos y datos personalizados. Y entonces podremos hacerlo con el método render cell. El método render le permite devolver un nodo React en lugar de una cadena. Así que aquí voy a hacer columna celular aleatoria abrir y cerrar paréntesis. Y vamos a tomar un parámetro. Params, establecer estos a nuestra función y derechos dentro, vamos a devolver un elemento react, que en este caso div, con el nombre de clase de usuario, ¿verdad? Estamos en este div, vamos a tener una imagen. Ahora. La imagen va a ser igual a params dot rho dot avatar image show you command P, y luego de frente para usar nuestros datos punto g es, así que aquí está el avatar. Bien, así que queremos recuperar esta imagen y mostrarla con la mesa, es tan simple como eso. Ven aquí. Alternativa aquí, vamos a hacer conexión a Internet. Más cerca con la etiqueta de cierre automático, justo dentro. Vamos a hacer params dot rho dot username seven, checkout. El navegador. La idea es, ¿ puedes ver que la imagen es extremadamente grande por lo que no puede aparecer correctamente Estilizemos rápidamente la imagen para que parezca limpia. ¿Correcto? Estamos en la lista de usuarios. Bien, déjame mostrarte. Entonces aquí solo tenemos que copiar el nombre de la clase AMD. Uy, creo que tenemos que dar el nombre de la clase. Sí, hagámoslo rápido. Dar el nombre de clase del usuario IMG, resaltar y copiar. Ven aquí. Usuario punto IMG. Démosle un ancho de 40 píxeles, alto de 40 píxeles, y luego un radio fronterizo. Va a ser del 50 por ciento. Margen, ¿verdad? Nueve pixeles. El objeto se ajusta. Hagámoslo seguro. Puedes ver ahora tenemos el perfil, el nido y la cal es para trabajar en la acción. Entonces justo debajo de esta acción, queremos tener un botón de edición y un botón de eliminar. Entonces, cuando hacemos clic en el botón Editar, nos va a llevar a usar página de perfil donde podremos editar y actualizar a los usuarios también. Cuando hacemos clic en el botón Eliminar, se va a eliminar un ítem específico, derecho, para poner en la tabla. Si eliges eliminar a este tipo, se va a eliminar. Bien. Vamos a eliminar el artículo por su identificación, heroína al código VS. Y vamos a implementar las acciones. Vamos a hacer exactamente lo mismo. Entonces aquí mismo, por supuesto, queremos devolver un nodo. Así que vamos a hacer uso del método render cell. Toma en un parámetro. Entonces aquí mismo, ahora podemos devolver un elemento react. Entonces aquí vamos a tener un div, este div un nombre de clase de contenedor de acción, ¿verdad? Estamos en este div, vamos a tener un canotaje, darle un nombre de clase de usuario. Así que justo dentro del HTML interno, vamos a hacer ediciones. Y por aquí vamos a tener el botón Eliminar. Pero en este caso, vamos a usar el icono de eliminar de los iconos en la parte superior. Y aquí vamos a importar delete, outline. De este tipo de aquí. Entonces aquí vamos a tener la línea Delete art más la gota de la etiqueta de cierre automático. Vamos a darle un nombre de clase de eliminar, menos, guardar a menos que se llamen el navegador. ¿Puedes ver ahora que tenemos el botón Editar y eliminar votación, aunque No se ve bien como se esperaba. Así que vamos a estilizarlo rápidamente y hacer que se vea mejor. Usa todo este CSS. usuario de edición de Dod necesita verificar si la ortografía es correcta. Bien. Para mí, puedes ver ahora aquí está escrito en caso de karma y aquí. Entonces es exactamente por eso que me gusta dividir la pantalla. Bonito. Tengamos la frontera para que se conozca. Realmente no nos molestamos. Entonces el radio fronterizo. Hagámoslo cinco pixeles. Acolchado. Cinco píxeles, diez píxeles. Color de fondo. Hagámoslo azul más oscuro. Y el color de la fuente, va a ser el blanco. ¿Derecho de margen? El margen derecho es de 20 píxeles. Cuando guardas en el navegador. Puedes ver ahora el botón se ve hermoso. Dialicemos el icono de eliminar. Aquí. Vamos a tener puntos. Déjame copiarlo directamente desde este lugar para que no nos equivoquemos. El color va a ser rojo y el causal. Hagamos que apunte a su caja fuerte. Ahora, todo se ve clásico. A mí me encantan estos. Bien, entonces hay algo de lo que quiero que tomes nota. Mi cuello. Haga clic en cualquiera de la porción de la tabla, se seleccionará. Ves que hay una necesidad de ser precisos. Entonces cuando vuelvo a cargar la página, queremos que esta difícil sea seleccionada solo cuando el usuario haga clic en ella, así. ¿Bien? Entonces no queremos que este tipo de cosas sucedan. No es nada bueno. Así que volvamos al código VS y luego utilicemos como lista. Desplácese hacia abajo. Justo aquí. Deshabilitaríamos la selección en onclick. Recargar. Bien. Ahora puedes ver cuando hago clic aquí, no afecta al chatbox. Entonces, la única forma en que podemos tener un artículo seleccionado es cuando lo revises directamente. ¿Ves esta necesidad para ser precisa? La línea Vanessa es implementar la funcionalidad de eliminación. Entonces creo que podemos hacer eso en la próxima conferencia. Nos vemos entonces. 125. 123 Eliminar el botón: En esta conferencia, vamos a implementar el botón Eliminar. Entonces, cuando el usuario haga clic en la parte inferior Eliminar, deberíamos poder eliminar un elemento específico de la tabla. Bien, vamos a implementarlo rápidamente. No tenía que VS Code. Justo en la parte superior. Vamos a declarar la variable de estado necesaria para ser utilizada. Aquí voy a hacer const, data, set data. Entonces el estado inicial van a ser los datos del usuario. Y por favor asegúrate de importarlo usado en la parte superior. Aquí. Es difícil, ¿verdad? Entonces ahora estamos configurando el estado inicial para ser usados como datos, que son los datos que es correcto para traer el archivo de datos. Nido es definir la función. Vamos a tener aquí. Const cien click, equa, configurarlo a nuestra función. Y luego justo dentro de la función, vamos a establecer datos a punto de datos pocas veces. Entonces tenemos que pasar por la tabla y eliminar un ítem específico en función de su ID. Sí, así que hagámoslo. Aquí. Vamos a tomar un artículo y voy a hacer ID de punto de artículo. Vamos a especificar el onclick, derecho, dentro del contorno de eliminar. Vamos a especificar el onclick. Ahora. Vamos a llamar al identificador haga clic aquí. En realidad, es bueno. Cambiamos esta función para manejar eliminaciones. Muy bien, entonces este nombre es bastante relevante para el propósito para el que se crea el botón. Aquí, 200 eliminar. Así como esto. Entonces aquí vamos a tomar en params punto rho dot id Entonces justo en la fila, tenemos que tomar en los datos, que es este tipo de aquí mismo. Este tipo de aquí mismo está sosteniendo el estado inicial y el estado inicial resulta ser utilizado como datos. Es tan sencillo como eso. Entonces aquí solo tenemos que ir a la mesa y eliminar un ítem específico en función de su ID. Y después de eso, también tenemos que actualizar la tabla, guardar en el navegador. Bien, dice que la identificación no está definida. Aquí. Bien, vamos a nuestro código. La fastidia, déjame mostrarte. Muy bien, entonces tenemos que tomar una identificación por aquí como parámetro seguro en el poema del navegador. Vamos a probarlo haciendo clic en el botón de eliminar. Entonces solo tienes que mantener los ojos en esto. Quiero eliminar este ítem con el ID de cinco. ¿Bien? Ya ves que el artículo fue la idea de cinco se ha ido. Ahora permítanme simplemente eliminar el ítem con el ID de dos. Ya ves que se ha ido. Cuando seguimos borrando. Puedes ver que todo está funcionando perfectamente bien como se esperaba. Pero cuando vuelvas a cargar la página, vamos a tener los artículos. Pero ¿sabes por qué? Es simplemente porque no lo estamos almacenando en alguna parte. Así que no te preocupes, eso no es gran cosa. Bien, así que ahora lo siguiente en la línea es implementar el botón Editar. Cuando hacemos clic en el botón Editar, queremos pasar el ID y los datos del usuario a una nueva página. Déjame mostrarte rápidamente. Déjame formatear el código. Este es el botón de edición. ¿Verdad? Ahora. Sólo tengo que especificar a la señora y resalta el canotaje y trasladarlo. Entonces tenemos que enlazar a slash, user slash, así como esto. Después params dot rho dot ID. Bien, así que ahora estamos pasando el ID a una nueva página. Vamos a guardar y ver qué tenemos en el navegador. El enlace no está definido, bien, Vamos a importarlo rápidamente en absoluto. Importa enlace desde el router React para guardar en el navegador. Vamos a probarlo. ¿Ves eso? Ahora cuando observes la tina, vas a ver un artículo con el ID de uno. Déjame mostrarte otra vez. Voy a dar click en este ítem con el ID de cinco. ¿Puedes ver aquí? Ahora tenemos un artículo con la identificación de cinco. Esto es todo por ahora. Y en la próxima conferencia, comenzaremos a construir el perfil del usuario, que es la velocidad del usuario. Nos vemos entonces. 126. 124 Perfil de usuario: En la conferencia anterior, implementamos lo menos del usuario. Bien, así que ahora cuando haga clic en el botón Editar, va a pasar la inflamación con la idea de uno a una nueva página. Puedes ver aquí mismo tenemos el DNI de uno. Y por aquí estamos en una nueva página. Regresa. Cuando haga clic en el botón Editar del usuario con el ID de cinco, va a pasar el ID a una nueva página así como el detalle del individuo. ¿Puedes ver eso? Entonces eso es lo vamos a implementar en esta conferencia. Por aquí. Puede que no veas nada justo en la pantalla. Entonces, sigamos adelante para comenzar a implementarlo rápidamente. Dirígete al código VS. Lo primero que vamos a hacer es implementar la ruta. Abre la app Js. Justo aquí. Vamos a tener la ruta, especificar la ruta. Entonces se va a quedar así. Barra diagonal, columna de barra diagonal de usuarios y luego ID de usuario. Ahora los elementos van a ser los componentes reales a los que queremos redirigir. En este caso va a ser perfil de usuario. Por favor, asegúrese de importarlo en la parte superior. Es tan sencillo como eso. Guardar. Y ahora sigamos usando nuestro perfil. Vamos a vincular rápidamente el archivo CSS con el componente. Limpie esto. Vamos a darle a este div un nombre de clase de contenedor superior de perfil. Así que justo dentro de este div vamos a tener otro div con el nombre de clase del contenedor de título de perfil, justo dentro. Vamos a tener una etiqueta head one, darle un nombre de clase de título de perfil. Ahora vamos a tener un canotaje. Dale un nombre de clase de perfil, agrega derechos de voto dentro del HTML interno voy a hacer crear usuario. ¿Bien? Así que justo después del div de cierre con el nombre de clase del contenedor de marea de perfil, vamos a tener otro div, darle un nombre de clase de contenedor de perfil. Y luego un div con el nombre de clase de profesional, ¿verdad? Dentro del div con el nombre de clase de perfil. Claro. Vamos a tener otro div con el nombre de clase de show profundo TO justo dentro, vamos a tener una etiqueta IMG, SRC igual. Sólo voy a copiar una imagen aleatoria en Internet y pegarla aquí. Todo este enlace es correcto, ¿no podría ayudar? Aquí, ¿es así? Bien, así que vamos a darle rápidamente un nombre de clase de show de perfil IMG. Vamos a cerrarlo con la etiqueta de cierre automático. Justo después de la imagen. Vamos a tener otro div. Dale un nombre de clase. Detalles del perfil, ¿verdad? Dentro de los detalles del perfil, vamos a tener spam. Muestra algunas configuraciones, cosas como el nombre del usuario, el título y el resto. Vamos a darle a esto un nombre de clase del título de mi perfil. Y el título sólo voy a hacer reaccionar, el desarrollador react. Entonces justo después del div de cierre de top de zapato de perfil, vamos a tener otro div. Dale un nombre de clase de perfil, fondo de zapato, así como esto. Entonces vamos a tener un span con el nombre de la clase, perfil, show title. Vamos a usar estos para mostrar los detalles de la cuenta así. Vamos a tener un div con el nombre de clase del perfil Mostrar Info. Y justo dentro, vamos a tener algunos íconos por aquí. Para eso. Vamos a la cima. Importa todos los iconos necesarios que sean necesarios para el perfil del usuario. Entonces justo en la parte superior, voy a hacer en parte, vamos a importar identidad PEM, calendario más tranquilo hoy. Ubicación más tranquila, buscando, más tranquila, masculina, contorno, coma, Android completo, y publicar. Todo ha sido importado de MY slash icons dash materials. Por supuesto que sabes que aquí mismo voy a tener su identidad, ciérrala de la etiqueta de cierre automático. Y justo dentro, le voy a dar una clase nombre de perfil mostrar icono que está en su lugar esto abajo aquí, vamos a tener un span ya que darle un nombre de clase de zapato de perfil en para el título. Bien, así que voy a guardar el proyecto y luego veamos qué tenemos en el navegador. Bien, entonces la imagen en realidad está ocupando toda la pantalla. Así que rápidamente vamos a estilizar la imagen. Ven aquí, ¿verdad? Y el perfil CSS. Bien, primero, dialicemos el contenedor superior de perfil. Este tipo de aquí mismo, Resaltar Copia, ven aquí, puntos perfil top contenedor. Y entonces vamos a tener flex para ser seis. Ocupa esta unidad de la pantalla. Y luego vamos a especificar el relleno para que sean píxeles de entrenamiento. Cuando también revises el navegador, es posible que no veas los cambios por aquí, pero observarás que la barra lateral es en realidad más pequeña. Bien, así que vamos a estilizar rápidamente la imagen para echar un vistazo más de cerca a lo que hemos hecho hasta ahora. Aquí el nombre del clúster de la imagen es profesional, IMG. Sólo tenemos que especificar el tamaño de la imagen. Voy a hacer altura para ser, vamos a hacerlo 40 pixeles. Ancho. Hagámoslo 40 pixeles. Eso es sencillo como eso. Al guardar en el navegador, los ID. Perfecto, así que esto es lo que tenemos por ahora. Vamos a continuar. Volver a VS Code. Terminemos el estilo para la imagen para que no tengamos que llegar a ella. Otra vez. Démosle un radio fronterizo. 50 por ciento. El objeto se ajusta. Hagámoslo cava, guardemos y echemos un vistazo al navegador. Bien, Perfecto. Es bonito así. Pero lo que voy a hacer ahora mismo es cambiar la altura y la anchura. Voy a cambiarlo a 100 fotos. Quiero que la imagen sea un poco más grande. Nuestros derechos, estoy bien con esto. Para que puedas mantener cualquier talla al final. Pero para mí, esto es exactamente lo que me gusta. Perfil GAS. Entonces aquí mismo, solo voy a destacar este div con el nombre de clase de profile show info de las líneas 25 a 27. Y luego lo voy a duplicar cuatro veces. Entonces tenemos que cambiar el icono y los detalles. Así que aquí va a haber el calendario de hoy. Y yo estoy aquí. Sólo tengo que precisar las escrituras. Supongamos que debería haber un número de teléfono. Así que voy a hacer y hacer lo que quieras. Ellos van a ser molturados contorno. Entonces sólo voy a do@gmail.com. Aquí vamos a tener ubicación y búsqueda. Para que pueda hacer la ciudad de Nueva York, salvo. Y veamos qué tenemos en el navegador. O escribir. Hermoso. Pasemos a la siguiente sección. Bien. Entonces justo después del cierre div de profesional, déjame mostrarte este es el zapato de perfil. Entonces justo después del div de cierre, que cierra en la línea 54, si en realidad estás siguiendo mi ejemplo. Vamos a tener otro div, darle un nombre de clase de actualización de perfil. Vamos a tener un lapso. un nombre de clase, título de actualización de perfil. Lo va a hacer en D. Ahora, vamos a tener un formulario. Bien, estamos en la forma. Bien, así que vamos a especificar el nombre de la clase. Perfil, firma de actualización. Vamos a tener un div aquí, darle un nombre de clase de actualización de perfil izquierda y derecha. Dentro de este div, vamos a tener otro div. Dale un nombre de clase de elementos de actualización de perfil. Entonces vamos a tener un nombre de perfil de etiqueta. Aquí vamos a tener una etiqueta de entrada. El tipo es una prueba cuádruple, el marcador de posición. Vamos a darle un nombre de clase de actualización de perfil. Imputa. Ciérrala. Lo que voy a hacer ahora mismo es resaltar el div con el nombre de clase del perfil, actualizar ítem, resaltar todo dentro, y luego duplicarlo cuatro veces. Bueno. Ahora vamos a cambiar estos dos nombres completos. Entonces. Estos serán correo electrónico. Aquí. Podemos hacer número de teléfono. Aquí, podemos hacer abordarlo tan simple como eso. Así que justo después del cierre div de actualización de perfil dejó este dv por aquí. Déjame mostrarte otra vez. Aquí está el div con el nombre de clase de actualización de perfil a la izquierda, justo después del div de cierre, que cierra aquí. Vamos a tener otro div con el nombre de clase actualización de perfil, ¿verdad? Derecha, dentro de este div. Vamos a darle un nombre de clase de perfil, actualizar o subir. Ahora vamos a tener una etiqueta IMG, SRC equa. De nuevo, voy a copiar esa misma foto y pegarla aquí. Esta imagen enlaza por aquí, copia y pega. Vamos a darle a la imagen un nombre de clase de actualización de perfil, IMG. Más cerca con la etiqueta de cierre automático. Justo debajo de la imagen, vamos a tener una etiqueta. Html caída archivo igual. Ciérrala. Y aquí mismo vamos a llamar al ícono Publicar. Ciérralo con la etiqueta de cierre automático. Vamos a darle un nombre de clase de icono de actualización de perfil. Aquí tendremos una etiqueta de entrada cerrando justo dentro del tipo de archivo core. El id, un calificador. Vamos a darle un poco de estilo. Se va a conocer la exhibición. Así que vamos a probarlo. Guarde el navegador. Dice, ninguno no está definido. Regresa. En realidad, esto tiene que estar envuelto en una cotización, Cortarlo y Pegar aquí. Guardar. Compruébalo de nuevo. Hermoso. Esta imagen se ve extremadamente grande. No te preocupes. Vamos a hacer eso en el futuro. Entonces, cuando te desplazas hacia abajo, vas a ver este ícono publicado por aquí. Al hacer clic en este icono, se va a abrir una carpeta de la que podemos escoger imagen. Haga clic en él. Puedes ver ahora puedes acceder a la imagen directamente en tu PC. Consola. Desplázate hasta la parte superior. Aquí están los formularios. Ahora vamos a continuar. En cada formulario, definitivamente debes tener un fondo en el que se haga clic para enviar el formulario. Eso es al menos lo que vamos a implementar en estos momentos. Entonces justo después de este div de cierre, Volvamos a dar formato rápidamente al código. Justo después de este cierre div. Vamos a tener un canotaje. Vamos a darle un nombre de clase del botón de actualización de perfil. Y aquí vamos a hacer actualizaciones. Entonces esta será la prueba que aparecerá en el botón. Es tan sencillo como eso. Vamos a guardar el código. Vuelve al navegador, desplázate hasta la parte inferior. Aquí está el fondo. Ya ves cuando haga clic en el botón, la aplicación aprenderá de nuevo. Bien, así que esto es todo por ahora. Y en la próxima conferencia, comenzaremos a estilizar el perfil de usuario. Y confía en mí, el resultado va a ser alucinante. Nos vemos en la próxima conferencia. 127. 125 Perfil Css: Bienvenidos de nuevo a todos. Tan rápido. Comencemos a estilizar el componente de perfil al código VS. Vamos a comenzar con la imagen de actualización de perfil. Déjame mostrarte rápidamente esta imagen por aquí porque va a escritorio, lo que vamos a hacer. Entonces para eso, vamos a dializarlo rápidamente. Puntos. Perfil, actualizar imagen. El ancho es de 80. La altura es de 80. Radio de borde. Cinco píxeles. Feeds de objetos, cava. Margen izquierdo. 19 fotos. Vamos a guardar y revisar el navegador. ¿Verdad? Todo parece muy bien. Me encanta así. Sigamos. Muévete a la parte superior. Entonces aquí vamos a comenzar con el perfil titulado container copy. Y por favor asegúrese de establecer el CSS en ocurrencia tres clases. Bien, vamos a tener un flex de pantalla. Alinee los elementos al centro, justifique los contenidos. Queremos que tenga un espacio intermedio. Entonces voy a hacer espacio entre. Vamos a especificar la sombra de caja. Tenemos que copiar la sombra de caja normal que hemos estado usando en este curso. Pégalo aquí. Vamos a darle un color de fondo. Esquivar oblicuo. Cuando le dices ventrículo al navegador. La idea es, ya ves, ahora tenemos estas cosas por aquí. Vamos a estilizar el título preferido. Dale un color. Alicia azul. Margen izquierdo, diez píxeles. La fuente nos 300. El nido es el perfil en la navegación. Entonces este botón de aquí decretó hinchazón. El ancho es de 100 píxeles. Relleno de borde, cinco píxeles. ¿Derecho de margen? Diez píxeles. El color de fondo, aguamarina. Vamos a darle un radio de borde de cinco píxeles. Y el costo va a estar apuntando a un ahorro y compruébalo. Escribo hermosa. Ahora para el contenedor de perfil, este tipo de aquí, vamos a tener un flex de display. La parte superior del margen es de 19 fotos. La sombra de caja es como de costumbre. Ahora para el show de perfil, flex, voy a ser una fiesta en 19 fotos. Ahora para el perfil show talk, display flex. Alinea los artículos al centro. Echemos un vistazo al navegador. Lo hizo es que todo va tomando forma poco a poco. Nest es la actualización del perfil. Déjame mostrarte esto aquí abajo. Resaltar copia. Flexible para alimentar en 19 píxeles. Margen izquierdo, 19 fotos. Puedes ver ahora que lo tenemos está alineado aquí. Bueno. A continuación se encuentra el perfil IMG. Y claro que lo hemos hecho está aquí mismo, que es el perfil mostrar IMG. Ahora tenemos que estilizar los detalles del perfil. Déjame buscarlo. Bien. ¿Es perfil los equipos split flux, flex dirección. Lo queremos de arriba a abajo, a la derecha. Entonces voy a hacer colon. Cuando guardas en el navegador. Puedes ver que estos son los detalles del perfil. Entonces cuando me quito la dirección flex, veamos qué pasa. Se ve el cerro de los detalles es fila no descendida. ¿Qué está pasando? Especifico la dirección de flexión para ser columna. Ahora vea el nuevo comportamiento. Bueno. Bien, vamos a especificar el margen izquierdo. 19 fotos. Nest es mi nombre de perfil. El peso de la fuente es 300. Entonces aquí tenemos mi título preferido. Lo mismo aquí. Copiar, pegar, perfil, zapato, fondo, margen superior es de diez imágenes. Ahora tenemos el perfil, mostrar título. El tamaño de la fuente es de diez píxeles. Tweet divertido. Hagamos que vea 100 colores. Voy a usar el RGB. Para rojo. Vamos a tener 17570 pieza de verde y 170 pieza de azul en el navegador. Aquí está. Pasemos a la siguiente en línea es perfiles mostrar info. Hagamos que muestre flex, alinee elementos, centro, margen, píxeles del artículo, píxeles. Y el color va a ser, va a ser gris. Guardar, compruébalo. ¿Puedes ver ahora que todo este lugar de aquí está tomando forma? Y me gusta. Bien, Todo está bien. Nest es un icono profesional. Así que queremos estilizar la totalidad de estos iconos de aquí. Vamos a darle un color. Dodge Apple, estás a salvo, ¿verdad? Bien. Bonito. Me encanta así. Vamos a estilizar el perfil del título de ShowInfo. Vamos a darle un tamaño de fuente de 22 píxeles. El ancho de fuente 600. ¿Puedes ver ahora la edición se ve más gruesa? El nido es el formulario de actualización del perfil. Como tener una pantalla flex y luego flex dirección columna. A continuación, los elementos de actualización de perfil bajo Etiqueta. El margen inferior va a ser de cinco píxeles. Tamaño de fuente. Va a ser de 17 pixeles. Ahora para la actualización de perfil en periodos, dod profile update imput, entonces vamos a tener el ancho para ser 250 pixeles, el alto 21 pixeles. Vamos a darle el relleno. El relleno es de cinco píxeles. Frontera. El borde es de un píxel. Un píxel gris sólido. Vamos a darle un radio de borde porque queremos que sea un poco curvilíneo. Hagámoslo cinco pixeles. Guarda el navegador. Los identificadores. Hermoso. Bien, entonces tenemos que alinear todo. Hagámoslo rápido. Ahora, el nido y la línea es el objeto de perfil aquí mismo. Es Copiar, ven aquí, pega. Entonces vamos a tener un display flex, la columna flex direction. Justificemos el contenido. Espacio entre la parte inferior, el botón de actualización. Pero realmente no sé por qué las imputas no están bien alineadas. Cuando hayamos terminado con el botón, definitivamente arreglaremos alguna cajita o errores, por así decirlo. Bien, continuemos. Para el perfil, actualiza, sube, resalta y copia. Vamos a tener un flex de display. Alineemos los elementos al centro. Ahora para los iconos de actualización de perfil, solo tenemos que especificar la causal para que sea puntero para el abordaje de actualización de perfil. Déjame ver aquí. Resaltar y copiar. Bien, entonces creo que tenemos que ordenarlo correctamente. Esto va a venir aquí mismo. Porque tenemos el botón de actualización de perfil y tenemos el icono de actualización de perfil, perfil, imagen de actualización. Entonces así es como se va a ordenar. Consultó de la manera que usted lo desea. Pero asegúrate de que puedas recordar eso en el futuro. La frontera no es ninguna. Frontera-radio, cinco píxeles. Relleno, cinco píxeles. El causal es puntero, ancho de fuente, balneado y lectura. El color de fondo. Entonces el color de la fuente va a ser blanco. Guardamos el navegador. Entonces cuando observes la espuma, te darás cuenta de que las imputas no están bien alineadas. Y como todos, no hay espacio entre la entrada y además el botón no se supone que esté aquí. Queremos que esté alineado a la edad adecuada, ¿de acuerdo? Quiero que detengas el video al final e intentes más posible para solucionar este problema. Y después de eso, puedes retomar el video para ver mi solución a estos. Déjame mostrarte mi ética. Volver al código VS. Desplázate hasta el formulario de actualización de perfil. Aquí está. Así que vamos a borrar la dirección flex. Y voy a hacer justificar espacio de contenido entre cuando guardes, echa un vistazo al navegador. Ahora tenemos esta alineación por aquí, y esta es la alineación adecuada. Ahora el único problema que tenemos aquí es que no hay espacio entre el formulario de entrada y las etiquetas, así entre los campos de entrada. Volver al código VS. Ahora voy a hacer aquí margin top. Hagámoslo de noche en píxeles. Entonces habiendo hecho esto, ahora, también tenemos que estilizar el elemento de actualización de perfil aquí es que Lee es donde radica el problema. Bien, entonces vamos a tener un flex de pantalla. Y entonces la dirección flex va a ser columna, que alineará los elementos de arriba a abajo. Entonces solo tienes que copiar el elemento de actualización de perfil así. Pegue los corchetes abiertos y cercanos. Tengámoslo display flex. La dirección de flexión es columna. Cuando guardas y revises el navegador. Aquí está. Y ahora todo está bien alineado como se esperaba. A mí me encantan estos. Hagamos una cosa más. Quiero que se escriba algo en la parte superior así. Regresa y este va a ser el título preferido. Supongo que nos olvidamos de hacer eso. Voy a hacer Editar perfil. Cuando guardas en el navegador. Aquí está. ¿Ves que todo aparece como se esperaba? Esto es todo por ahora n. En esta conferencia, vamos a implementar el componente create user. Sudán. 128. 131 Crear una ruta de usuario: En esta conferencia, vamos a implementar el componente create users. Entonces, cuando hacemos clic en la navegación de crear usuarios, nos va a redirigir para recrear componente de usuarios donde podremos crear nuevos usuarios rápidamente acurrucados al código VS a menos que continúe. comando B para abrir el Explorer, derecho, no descifraría el directorio del usuario. Vamos a crear un nuevo componente llamado create user the cheers. Generar el componente funcional. Vamos a crear rápidamente el archivo CSS correspondiente. Bonito. Cierre el comando Explorer P y luego busque la aplicación Js. Ahora lo primero que vamos a hacer es implementar la ruta. Justo aquí. Sólo tengo que destacar y luego duplicar esto por aquí, ¿no? Estamos en la cadena. La ruta va a ser slash create user. Y los elementos a renderizar es crear componentes de usuarios. Y por favor asegúrate de importarlo en la parte superior. Derecha. Entonces ahora veamos si lo que hemos hecho realmente está funcionando. Voy a copiar esta parte por aquí, frente a VS Code. Pasemos a casa. Ahora, voy a pegarlo aquí. Es la tecla Enter. ¿Tienen razón? Entonces ahora estamos en el componente de usuarios de la grilla. Hermoso. Pero debes saber que en una aplicación del mundo real, es posible que tus usuarios finales no puedan copiar la ruta así. Por lo que tenemos que implementar el botón de edición de los usuarios del enlace. Y luego cuando hacemos clic en los usuarios de crear, queremos ser redirigidos para reclutar componentes de usuarios. Así que sigamos adelante y terminemos este fondo con un enlace. Perfil de usuario. Aquí está la parte inferior derecha aquí voy a hacer enlace. Queremos enlazar a esta parte aquí mismo. ¿Bien? Después resalte el paseo en bote. Muévelo a la derecha dentro del enlace. Entonces esta es la parte que creamos justo en la app Js, así. Entonces cuando guardas y revisas la aplicación en el navegador, vaya, dice que el enlace no está definido. Volver justo dentro del perfil de usuario es importar el enlace desde el router React. Vamos a importar enlace desde React Router. No. Cuando vuelvas a guardar en el navegador los IDs. Vamos a probarlo haciendo clic en el usuario de crear comprado en. ¿Puedes ver eso? ¿Hermoso? Ahora comencemos a implementar las creatividades como página. 129. 126 Crear un componente de usuario: En esta conferencia, vamos a implementar el componente create users. Cuando hacemos clic en la navegación de crear usuarios, debemos ser redirigidos para recrear el componente de usuarios. Podremos crear nuevos usuarios aquí. Así que agreguemos rápidamente al código VS para implementarlo. Vs Código comando B para abrir el Explorador. Lo primero que vamos a hacer es crear los componentes. Así que bien, estamos en el directorio del usuario. Vamos a crear un nuevo componente llamado create users.js. Generar el componente funcional. Vamos a crear el archivo CSS correspondiente. Hermoso. Entonces tenemos que vincular el archivo CSS con los componentes. Input dot slash, create, user dot css. Y por favor tome notas. Esta es una letra minúscula. Ahora vamos a implementar rápidamente el comando de ruta P para abrir el set box en la parte superior. Y luego voy a configurar para nuestra app. Entonces aquí mismo, solo tengo que destacar a este tipo y luego duplicarlo. Entonces ahora tenemos que especificar la ruta. Destaca, límpialo. La ruta va a ser slash create user. Así. Después los componentes a renderizar, que es en este caso el elemento se va a crear usuario. Por favor, asegúrate de importarlo en la parte superior. Cierra el Explorer. Entonces ahora tenemos que copiar este camino y vamos a darle una oportunidad. Ven aquí, vuelve a casa. Justo aquí. Voy a pegarlo. Kit en la tecla Enter. Y boom, son píxeles para reclutar usuarios componente. Por aquí. Vamos a darle rápidamente a este div un nombre de clase de contenedor de crear usuarios. Destacar, copiar. Volver al archivo CSS punto crear usuarios contenedor. Entonces vamos a flexionarlo para bien, hagámoslo seis. Entonces el relleno es de 20 píxeles. Cuando guardas y revises el navegador. Vaya, échale un vistazo. El usuario también está en letra minúscula. En realidad lo que pasó antes fue que el componente no pudo ver el archivo CSS porque la UE estaba en mayúscula. Ahora todo está bien. Guardar en el navegador. Oye, es que el usuario de crear está tomando seis unidades de la pantalla. Pero una cosa que también quiero que entiendas es que en una aplicación del mundo real, posible que el cliente no pueda implementar realmente el camino así. Es posible que no puedan teclear todo este camino así. Entonces, lo que tenemos que hacer es concluir el usuario create canotaje con el enlace para que cuando el usuario haga clic en la navegación de jugos creativos, los lleve a la página de crear usuarios. Ahora, cuando hago clic en el botón, no pasa nada. Vs Code abre el perfil del usuario. Entonces aquí vamos a tener un enlace. Y queremos vincularnos a, déjame mostrarte esta parte de aquí que creamos antes. Slash, crea perfil de usuario, pégalo entre las cotizaciones. Entonces tenemos que destacar el canotaje, moverlo al enlace. Formateemos rápidamente el código con más bonito. Se ve bien. Habiendo hecho esto, vamos a probarlo. Seguro en el navegador. Vamos a probarlo haciendo clic en el equipo Crear grupo de usuarios. ¿Ves que todo está funcionando perfectamente bien como aspartato? Entonces comencemos a diseñar los creativos como compañía en. Ciérrelo y luego cierre el componente de la aplicación. Bien, resalta estos, límpialo. Entonces bien, dentro de este div, vamos a tener una etiqueta de cabeza. Vamos a darle un nombre de clase de nuevo título de usuario. Y el título va a ser nuevo usuario. Debajo de la etiqueta H1. Vamos a tener una firma porque tenemos que crear nuestro formulario para recabar los datos del nuevo usuario. Y la derecha, estamos en la forma, vamos a tener los campos de entrada. Pero por ahora, vamos a darle a este formulario un nombre de clúster de crear usuario. A partir de aquí vamos a tener un div. Dale un nombre de clase de nuevo elemento de usuario, justo dentro del div, vamos a tener una etiqueta. Así que bien, cuando esta etiqueta. Vamos a hacer nombre de usuario. Cuando guardas y revises el navegador. Aquí está. ¿ Puedes ver el nombre de usuario? Aquí está el título, aquí está la etiqueta. Llevando este nivel, queremos tener un campo de entrada por aquí. Entonces por debajo del nivel, vamos a hacer imputar tipo. El tipo de entrada es igual al texto. El marcador de posición, Issaquah. Ellos ven. Vamos a cerrarlo con la etiqueta de cierre automático. manera lateral, el marcador de posición se refiere al texto que aparece como predeterminado, justo dentro del campo de entrada. Compruébalo. Ahora puedes ver que estamos en el campo de entrada, tenemos una margarita de prueba. Y aquí está el campo de entrada. Bueno. Ahora, lo siguiente en línea es copiar este div con el nombre de clase del nuevo usuario. Copia todo lo que esté entre el div, y luego duplicarlo siete veces. Ahora comencemos a cambiar el nivel y el resto de las estufas aquí va a ser nombre completo. Entonces aquí vamos a tener correo electrónico. Aquí vamos a tener una contraseña. Entonces voy a hacer algo como esto. No te preocupes. No significa nada. Es solo un marcador de posición. Y aquí vamos a tener un número de teléfono. Esta será nuestra dirección. Y no te olvides de la ciudad de Nueva York. Ahora vamos a implementar la agenda. Entonces esto realmente va a tomar algunas cosas, así que tenemos que hacerlo juntos. La agenda tiene que ser masculina o femenina. Bien, ahora vamos a usar el botón de radio. Entonces aquí el tipo de entrada ya no va a ser prueba, va a ser radio. No hay necesidad de marcador de posición por ahora. El nombre equa agenda, el ID, igual masculino, valor, igual espejo. Ahora vamos a tener otra etiqueta por aquí. Para un molino de núcleo. Dentro del HTML de la etiqueta, vamos a hacer comida. Entonces ahora lo que voy a hacer es destacar a este tipo. Copia. Ven aquí, pega. Entonces el tipo de entrada es radio, el nombre es género. Pero esta vez la identificación va a ser femenina y el valor va a ser femenino. Además, sólo tengo que destacar a este tipo y copiar. Ven aquí, pega. Ahora aquí va a ser femenina, y aquí va a ser femenina, así como esto. Resaltar duplicado. Entonces aquí vamos a hacer orden. Bien, entonces tal vez tenemos otras agendas, que no sé. No puede llamarlo ejército si lo sabes. Ahora aquí voy a hacer eso. Bien, vamos a comprobarlo en el navegador. Hermoso. Puedes ver aquí tenemos agenda masculina, femenina, y otra. Bien, así que no lo sé, pero quizá sigamos. Vuelve al código VS a menos que corras la parte superior. Entonces, lo que voy a hacer ahora mismo es envolver todas estas cosas en un div. A partir de aquí, voy a hacer div, darle un nombre de clase de agenda de nuevos usos. Bien, estamos en el div. Voy a destacar de las líneas 42 a 46. Muévelo adentro. Aquí, ¿es así? Bien, así que cambiemos rápidamente la etiqueta a género. Bien, bien. Así que bien, estamos en este div de cierre, este div de cierre con el nombre de clase del nuevo elemento de usuario. Vamos a tener otro div con el nombre de clase del nuevo elemento de usuario. Bien, entonces nuevo elemento de usuario, derecho, poniendo el div, vamos a tener una etiqueta. Y voy a hacer aquí activo, que es el HTML interno que aparecerá en la pantalla. Aquí está. Ahora vamos a tener una opción selecta. Dale a este select el nombre de clase del nuevo usuario select. Vamos a especificar el nombre. Hagamos esto activo. El id. activo, ¿verdad? Vamos a seleccionar etiqueta. Vamos a tener dos opciones. Opción. El valor va a ser, vaya , esto debería ser una cadena y no un corchete de colega. Vamos a tenernos aquí, ¿verdad? Estamos en el HTML interior. Lo vamos a hacer es destacar, duplicar. Y seguro, debes saber qué será Esto. No y no. Así como esto. Vamos a guardar y CT Browser. Bien, tenemos la opción de seleccionar. Puedes ver cuando haces clic, tienes sí o no. Todo está funcionando perfectamente bien como se esperaba. Formatee de nuevo el código para que podamos tener una sangría adecuada. Y por último, justo después del div de cierre con el nombre de clase del nuevo elemento de usuario, vamos a especificar body. Vamos a darle a esta clase botánica el nombre del botón Nuevo usuario. Crea. Cuando guardas en el navegador. Y hueso. Aquí está la navegación de crear. Y la forma es realmente agradable, pero solo que no se ve extremadamente hermosa como se esperaba. Pero no te preocupes. En la próxima conferencia, vamos a tener todo arreglado y luego te va a encantar el art com. Esto es todo por ahora. Nos vemos en la próxima conferencia. Mantente enfocado y cuidado holístico. 130. 127 Crear un Css de usuario: Bien, bienvenidos de nuevo a todos. En esta conferencia, vamos a estilizar el componente create users. Entonces, sin más preámbulos, comencemos. Ahora procedamos con el nuevo título de usuario. Vamos a tener un flex de display. Alineemos los elementos al centro. Entonces. Justificar el contenido. Espacio entre. Bien, vamos a darle una sombra de caja. Copia. Por supuesto, a estas alturas, ya deberías saber dónde encontrar esta sombra de caja. El color de fondo, esquivar o azul. Después el color de la fuente. Voy a hacer que sea Alice azul. Relleno de cinco píxeles. Cuando ahorras. Echemos un vistazo al navegador. ¿Puedes ver? ¿Correcto? Entonces comencemos con este tipo de aquí, que es el teléfono. Ahora para el formulario de usuarios críticos. Vamos a tenerlo display flex, luego flex wrap. Vamos a hacer que caiga. Ahorremos y veamos qué tenemos. ¿Correcto? Bien, este es el resultado. Entonces, continuemos. El nido es el nuevo elemento de usuario. Destacar, copiar. Ven aquí. El ancho 400 píxeles. Vamos a tener que mostrar flex, flex dirección columna. Veamos ahora esto se va a arreglar de arriba a abajo. Ya ves que estamos llegando ahí. ¿Margen, diez píxeles superiores, margen derecho? 20 píxeles. Entonces ahora queremos estilizar esta etiqueta. Y si observas la pantalla, te darás cuenta de que esta etiqueta está justo dentro del nuevo nombre de clase de elemento de usuario. Entonces lo que voy a hacer ahora mismo es destacar a este tipo copia, ven aquí, pega. Tenemos que hacer referencia al margen de mano de obra más simple, diez píxeles inferiores. El tamaño de la fuente va a ser de 14 píxeles. El ancho ve 100. El color, que es el color de las formas. Bien, así que vamos a hacerlo gris. Al guardar checkout, el navegador. ¿Puedes ver? Hermoso. Vamos a proceder. Ahora para el nuevo elemento de usuario imputa, déjame mostrarte, que es para las etiquetas de entrada. Bien, aquí también. Cuando observe la pantalla, se dará cuenta de que la etiqueta de entrada está justo dentro del div con el nombre de clase de los nuevos elementos de usuario. Así que sólo voy a destacar de nuevo. Esta vez, solo hay que destacar todo así. Estoy aquí, pega y luego tenemos que hacer referencia a la imputa. Lo más sencillo es que la altura 20 píxeles, relleno de diez píxeles. El borde, un píxel gris sólido, el radio del borde, cinco píxeles. Bien, veamos qué tenemos a bordo. Beneficio. Se ve bien. Ahora tenemos que estilizar la nueva agenda de usuario. A ver. Aquí está copiar puntos? Usas agenda. Y luego tenemos que hacer referencia al imput porque queremos capturar los botones de radio y el resto de ellos. Así que margen superior. Hagámoslo 15 pixeles para la etiqueta, ¿verdad? ¿No sería la agenda de noticias? Nos estamos refiriendo a estas etiquetas. Bien. Y yo, voy a destacar estos. Ven aquí. Pegar. Voy a hacer Label. El margen que los píxeles. Tamaño de fuente 18 pixeles. El color va a ser genial, pero hagámoslo así. Cinco por cinco. Pero este gris es una especie de tika. Bien, vamos a echarle un vistazo en la pantalla. Bueno de ello en bonito. Entonces entonces el siguiente en la fila es el canotaje y este tipo de aquí, que es el botón Seleccionar y lo creable. Aquí, vamos a resaltar el nuevo usuario select, copy dot, new user select, and right within. Demos la altura de 40 píxeles. Eso redujo cinco píxeles. Guardar. Bueno. Todo bonito. Vamos a diseñar rápidamente como el usuario crear voto. Um, el, um, vamos a agarrar el nombre de la clase rápidamente. El nombre de la clase de aquí es nuevo uso abortando, resaltado y copia. Ven aquí. Los neutrones de puntos son ambos delgados. Y ahora tenemos que aplicar estas toallas. El ancho 200 píxeles. Se conoce la frontera. No queremos ninguna frontera. El color de fondo. Voy a hacer que se esquive aquí arriba. El color, que en este caso va a ser el color de la fuente, bien, vamos a hacerlo Alice azul. O también puedo hacerlo blanco. Relleno, izquierda, derecha, siete píxeles, arriba, abajo, diez píxeles. La fuente maleza 600 margen, top 30 pixeles. Implementemos rápidamente el radio fronterizo. Frontera-radio, y los píxeles estarán bien. Y por último, la causal, va a ser verter alquitrán. Cuando guardas y revises el navegador. Vamos a tener un hermoso experto que termine. Eche un vistazo. Puedes ver que todo se ve tan bien y me encantan estos. Entonces aquí están las imputas. Todo genial. Amigos. Aquí. Activo es no. Puedes lograrlo. Sí. Bien. Se puede elegir entre mayo o femenino o podría ser otra agenda que no conozco por ahora. Entonces tenemos aquí la agenda misma sube. Tenemos que cambiar algo. Esta es la agenda, la etiqueta aquí, tenemos que corregirla. Así que abre el usuario create. Aquí. Sólo podemos hacer la edad, digamos 28.7, Sácalo. Bueno. Todo funcionando como se esperaba. Amigos, este componente es sumamente hermoso y me gusta. Probemos todo el componente de usuarios para ver si todo está funcionando perfectamente bien. Golpeé en casa. Hermoso. Justo aquí. Golpeé en el usuario. Me lleva a los judíos como lista. Puedo seleccionar usuario individual. Yo también puedo desmarcar. Consulto. Entonces, si tenemos más artículos por aquí con diferentes fotos en diferentes nombres, lo verás clasificando. Entonces simplemente porque estoy usando la misma prueba en todas partes, puede que no lo notes, pero te puedo asegurar que la sal está funcionando perfectamente bien. ¿Correcto? Así que aquí puede hacer clic y luego sin buscar puede ordenar por orden ascendente. Se puede filtrar. Aquí puedes hacer un montón de cosas. Tú también puedes. Eliminar. Puedes ver que está funcionando perfectamente bien. Entonces puedes editar. Hermoso. Todo se ve bien. Entonces después de la edición, solo tienes que hacer clic en la parte inferior de Actualizar. Pero recuerda, esto es solo una interfaz de usuario. Por lo que la funcionalidad de actualización puede no estar funcionando por ahora. Así que cuando se procede a hacer clic en los jugos creativos canotaje y boom. ¿Puedes ver eso? ¿Hermoso? Todo está bien. Esto es todo por ahora. Y en la próxima conferencia, comenzaremos con las hojas del producto. Entonces, cuando hacemos clic en la lista de productos, debemos ser redirigidos al componente de la lista de productos. Nos vemos entonces. 131. 128 Componente de la lista de productos: En esta conferencia, procederemos con los componentes de la lista de productos. Entonces, el componente de lista de productos es en realidad el mismo paradigma con el componente de lista del usuario. Bien, así que vamos a tener cosas similares como esta, pero solo que los nombres de encabezado también cambiarán . Las imágenes. Pero la mesa es exactamente la misma. Vamos a usar la tabla de datos del MAOI. Tan rápidamente oculto al código VS. Y comencemos implementando la ruta VS Code comando B para abrir el Explorer. Entonces aquí están las páginas, y esta es la lista de productos. Haga clic derecho dentro de las listas de productos, creemos el componente de lista de productos. Genere el componente funcional, y cree rápidamente el archivo CSS correspondiente. Abre los engranajes de la aplicación. Aquí es que Lee es donde implementaremos el duplicado de ruta. Aquí voy a especificar una ruta de lista de productos. Y luego vamos a renderizar los componentes de la lista de productos. Siempre asegúrate de importarlo en la parte superior. Seguro. Vamos a darle una oportunidad para ver si el camino realmente está funcionando. Regresa a casa. Y aquí voy a pegarlo justo en la parte superior. Haga clic en la tecla Enter. Y boom, ahora estamos en el componente de lista de productos. Hermoso, pero parece que no se muestra nada en la pantalla, ¿verdad? Así que arreglemos eso rápidamente. Ahora dentro del CSS, primero, tenemos dos div, este div un nombre de clase de contenedor de lista de productos. Resalte y copie el nombre de la clase, contenedor de lista de productos de punto. Y luego vamos a tenerlo flex. Seis, seguro. Guarda aquí en el navegador. Oye, ¿es así? ¿Puedes ver ahora que tenemos la lista de productos escrita? Justo en el extremo extremo. Todo está funcionando perfectamente bien como se esperaba. Confía en mí. En la próxima conferencia, comenzaremos a diseñar los componentes. Nos vemos entonces. 132. 129 Diseño de lista de productos: Bienvenidos de nuevo a todos. En esta conferencia, procederemos con el diseño de la lista de productos. Y por supuesto, es simplemente la tabla de datos que implementamos en la conferencia anterior para la tabla de usuarios. Entonces ahora lo que voy a hacer ahora mismo es ir al ayudante de código. Vamos a copiar los datos del producto. Y todos estos son detalles editados. Si quieres hacerlo por tu cuenta, es bastante fácil hacerlo. Abra el archivo de datos. Aquí está utiliza datos. Ven aquí. Lo vamos a pegar aquí mismo. Entonces, lo que tenemos aquí es exactamente el mismo paradigma con lo que tenemos por aquí. Estos son los datos del usuario. Sí, entonces es exactamente la misma idea. Si tenemos el ID, el nombre de usuario, el avatar, que sirve como la imagen, el estado del correo electrónico y el pago. Entonces, cuando vas a los datos del producto, tenemos el ID, el nombre, la imagen, el stock, el estado y el precio. Así que acabamos de cambiar los campos. Bien, perfecto. Ahora volvamos a la lista de productos. Otra vez. P.sit común. Vamos a abrir lo menos del usuario. ¿Verdad? ¿No sería la lista del usuario? Tenemos el ejemplar de aquí a este punto. Bien. ¿Puedes ver 9-64? Ves asegúrate de copiar correctamente. Copia, ven a la lista de productos, pegarlo aquí. Nuevamente, vuelve a la lista de usuarios. También tenemos que copiar los datos. acuerdo? Esto lo hicimos en la conferencia anterior cuando estábamos implementando la lista de usuarios. Entonces ya debes saber eso. Pestis desgarra todo fresco, todo bonito también. Tenemos que copiar algunas entradas. Vamos a importar la cuadrícula de datos. Aquí. Queremos hacer uso de todas estas cosas aquí mismo. Eliminar. Vamos a copiar las líneas tres, líneas cinco, que es la cuadrícula de datos, el enlace y el contorno de eliminación. Pégala aquí también. Tenemos que copiar los ustedes porque vamos a hacer uso de EU did hook. Empezamos a implementar el botón de eliminar, guardar la aplicación. Ahora, tenemos que hacer coincidir los campos con exactamente los mismos datos que tenemos dentro de los detalles del producto cuando abres el archivo de datos. Entonces aquí tenemos identificación, nombre, IMG, stock, estado y precio, tenía en la lista de productos. Una vez hecho esto, vamos a importar los detalles del producto a partir de los datos del producto de caída de slash de SRC de datos de slash de punto slash de SRC de datos . Así como esto. ¿Bien? Entonces aquí vamos a hacer coincidir los campos con exactamente los mismos campos que tenemos en los datos. Entonces aquí el nombre del campo va a ser productos. La cabeza y el nombre. Va a ser producto. Aquí mismo, hace div, vamos a dar el nombre de la clase fuera del elemento de la lista de productos, darle al IMG un nombre de clase de la lista de productos, IMG, que es la lista de productos. Cada imagen. Tenemos que tener cuidado por aquí para no cometer algún error tonto, vamos a cambiar el campo de correo electrónico a stock tal como tenemos en los datos. Este será estatus. Este será estatus. El nido y la línea aquí va a ser precio. Déjame mostrarte. Tenemos el estatus y tenemos el premio. Aquí tenemos la acción. Entonces esto ayudará para el tablero de eliminar y editar cuando todo sea realmente igual, solo que tenemos que cambiar los nombres de las clases y el resto de ellos. Así que aquí tenemos un div con el nombre de clase de contenedor de acción. Y tenemos un botón con el nombre de clase de usuario de edición. Vamos a convertir el nombre de la clase inferior para que sea editor de listas productivo. Y aquí voy a cambiar esto a product delete. Fresco. Bien, así que por último, desplázate hasta arriba y déjame mostrarte. Entonces tenemos que tomar esto como el estado inicial. Borrarlo, resaltar, copiar, venir aquí, pegar los datos aquí mismo, está almacenando los datos del producto como estado inicial. Y los datos del producto están justo dentro de este módulo. Y se compone de la totalidad de estos artículos de aquí. Es tan simple como esa lista de productos. Desplazarse hacia abajo y luego filas es igual a los datos, que está en la parte superior. Guarda y echa un vistazo al navegador. Dice que los países del archivo de datos SRC recortan los datos del producto. Bien. Hagamos de nuevo la importación, importemos los datos del producto. Entonces ahora mismo parece que deberíamos crear un archivo separado para los datos del producto. Entonces lo que voy a hacer ahora mismo es copiar, ven aquí, justo dentro del archivo de datos. Vamos a crear un nuevo archivo, datos de producto, punto js. Entonces Heron para usar nuestros datos. Copiemos todo así. Destacar. Córtala de aquí. Ahora tenemos un módulo separado para la totalidad de los archivos que vamos a usar. Y creo que es una mejor idea. Datos del producto. Y guárdala aquí. Bueno. Agreguemos S a los detalles de cada producto. Ahora volvamos a la lista de productos. Entonces voy a comenzar la importación desde cero otra vez. Importar detalles de los productos de este tipo aquí mismo. Voy a agregar S para comer como detalles del producto. Creo que ya terminamos. Seguro. Checkout, el navegador. Hermoso. Vamos a hacer clic en los productos. Ahora mismo tenemos los artículos. ¿Puedes ver? ¿Algo muy rápido? Lo vamos a hacer ahora mismo es especificar los copos para que pueda asumir algunas unidades en la pantalla. Derecha, dentro de la lista de productos. Vaya, lo hemos hecho por aquí. Así que vinculemos rápidamente el archivo CSS con el componente. Vamos a importar rápidamente listas de productos de barra diagonal de puntos CSS. Cuando guardas el navegador, todo aparece como se esperaba, y me encanta. Ahora mismo, la imagen no está apareciendo. Entonces echemos un vistazo al botón de borrar. ¿Ves que el botón de borrar está funcionando perfectamente bien? ¿Ves? Echa un vistazo. Chicos geniales. Cuando vuelva a cargar, todos los artículos mostrarán nuestro comienzo. No hay problema al respecto porque esto es solo un sitio web estático. Bien, así que cuando empecemos a implementarlo con el back end, tendremos algunos datos almacenados en alguna parte. Y luego cuando eliminemos, eliminamos de la base de datos, entendido, hermoso. Intentemos hacer clic en el botón Editar. Bien, el botón Editar nos lleva al discurso del usuario del editor, y esto no se supone que sea. Así que vuelve. Ahora, intentemos arreglar la imagen. Cuando mires la esquina inferior derecha de la pantalla, verás la paginación. Entonces cuando haces clic, ¿ Puedes ver que seguimos moviéndonos de un pico de la tabla a la otra página? Bien. Bueno. En este momento la imagen no está apareciendo. No te preocupes. Tengo una solución sencilla para eso. Pausa rápidamente la conferencia para terminar e intenta darle una solución. Cuando termines, puedes retomar el video y ver mi propia solución a eso. Bien, la caga y déjame mostrarte. Bien, ¿no sería el método de render aquí decimos que el SRC va a ser params dot rho dot avatar, un sustantivo. Cuando abras los datos del producto, te darás cuenta de que aquí no tenemos Avatar. Todo lo que tenemos justo aquí es AMD. Entonces tenemos que hacer referencia al IMG y anotar Avatar. Ven aquí y pega los params IMG dot roll, dot IMG cuando guardes en el navegador. Y son estos, sin embargo, las imágenes no aparecen como se esperaba. Entonces es simplemente porque no lo hemos estilizado. Bien, entonces el tamaño de la imagen aquí mismo es extremadamente grande. Entonces no va a aparecer como se esperaba por ahora, sino incautos. En la próxima conferencia, le daremos una solución rápida. Esto suele ser nuestro n. Pasemos rápidamente a la siguiente conferencia para estilizar esta compañía. 133. 130 Lista de productos: Bien, así que sigamos adelante para estilizar el componente de la lista de productos, heroína a VS Code. Abra la lista de productos CSAs. Y ahora podemos dividir la pantalla. Luego abre la lista de productos, desplázate por la interfaz de usuario. Entonces primero, quiero que estilizemos la imagen. Entonces aquí vamos a tener la lista de productos, IMG punto lista de productos IMG. El ancho y el alto van a ser de 50 pixeles. El radio fronterizo. Cinco píxeles. El objeto se ajusta. Cubierta. Guardar. Puedes ver ahora que parece bien. Pero una cosa que también quiero que hagamos es aumentar el número de ítems que se mostrarán en esta tabla. Así que desplázate hacia abajo. Aquí, dice el tamaño de página, voy a hacer ocho. Cuando guardas en el navegador. Puedes ver que hay un problema con esta imagen de aquí con la identificación de cinco. Entonces el producto fue idea de cinco. Tenemos que echarle un vistazo. Datos del producto. Busquemos el producto con la idea de cinco aquí, ¿no? ¿Por qué no te presentas? Bien, lo que voy a hacer ahora mismo es copiar otros productos de aquí. Entonces vamos a reemplazarlo, límpielo, pegarlo aquí. Cuando nos salvas, mira lo que sucede a continuación está funcionando perfectamente bien. Ahora hemos aumentado el número de artículos que se mostrarán en nuestra mesa. Recuerda ordenar siempre tu CSS y la ocurrencia a cómo aparecen en la línea de componentes va a ser el elemento de la lista de productos, resaltar y copiar llegan a la cima. Entonces, el artículo de la lista de productos viene antes de la lista de productos IMG, o la imagen de lista de parámetros. Vamos a tener un flex de display. Alineemos los elementos al centro. El margen va a ser de diez fotos. Cuando guardas y revises el navegador. Bien, bien. Se ve más limpio. El nido es el editor de listas de productos. Y viene justo después de la lista de productos IMG. Déjame mostrarte la lista de productos una escritura, resaltarla y pegarla aquí debajo la imagen de la lista de productos, luego el borde. Ninguno. Lo que reduzco diez pixeles. Relleno, cinco píxeles, diez píxeles. El color de fondo. Dodge W. El color. Va a ser blanco. Consola. Va a ser puntero, ¿margen derecho? 20 píxeles. Guarda y echa un vistazo al navegador. Estos tipos la evidencia aparece amablemente. Y dialicemos la edición de navegación simple. Lo que vamos a hacer es cambiar el color. Así que copia el nombre de clase del producto delete. Ven aquí, dot product delete. Dale el color. El color va a ser rojo y el cursor va a estar vertiendo alquitrán. Usted guarda y compra el navegador. Y boom, todo aparece como se esperaba. Pero ahora mismo, rápidamente noté que la imagen del usuario aquí en la esquina superior derecha de la pantalla, que está justo aquí en el top nav simplemente desapareció. Ahí no hay nada. Podría ser un problema de conexión a internet conmigo aquí mismo. Así que no tengas miedo. Asegúrate de arreglarlo. Si hay un lograr n, eso es todo por ahora. Nos vemos en la siguiente sección de este curso. Cuídate.