Introducción a React: crea una galería

1. Introducción: Hola, me llamo Travis Arnold. He sido diseñadora, y desarrolladora desde hace más de 10 años. Me presentaron por primera vez a React hace un par de años, y de inmediato me enamoré de él. Me enamoré de React porque mapea tan bien las herramientas de diseño que llevo tantos años usando. Esta lección es genial para cualquiera que haya tenido interés en React, pero podría tener un poco de miedo al meterse en ella. Empezaremos por repasar lo que es React, por qué querríamos usarlo en primer lugar, y cómo nos puede ayudar en nuestro desarrollo. A continuación, nos adentraremos en un ejemplo del mundo real, y construiremos una pequeña aplicación de galería para ver cómo React se puede utilizar a todo su potencial. Al final de esta clase, tienes una comprensión básica de cómo funciona React, cómo podemos sacar bibliotecas de terceros y usar algunas características de JavaScript más recientes. Antes de tomar esta clase, debes tener una comprensión básica de HTML, CSS y JavaScript. No te preocupes, repasaremos todo línea por línea para asegurarnos de que puedas completar el proyecto por tu cuenta. Vemos Reaccionar siendo usado más, y más cada día. No puedo esperar a mostrarte lo básico, así que empecemos. Nos vemos en clase. 2. ¿Qué es React?: Bienvenido a una introducción a React. Gracias por tomar este curso. ¿ Qué es React? React es una biblioteca de JavaScript que nos ayuda a construir interfaces de usuario interactivas. Es creado por Jordan Walke, ingeniero de software en Facebook, y todavía es apoyado y mantenido por Facebook en la actualidad. En lugar de instrucciones paso a paso, describimos cómo debe ser nuestra aplicación y React se encargará de actualizar el DOM por nosotros. En primer lugar, vamos a empezar con algunos conceptos de alto nivel y luego saltaremos directo al código para que podamos aprender cómo funciona React. React utiliza un concepto llamado el DOM virtual. Es una representación de nuestro estado actual de UI. Como se puede ver aquí, tenemos dos estados diferentes. Te puedes imaginar si tuvieras un div con dos botones y una etiqueta span, y queríamos aumentar o poder disminuir un número. Bueno, esto es lo que podría parecer si tal vez tuviéramos que decir, dar click en el botón más y querer aumentar el número. Reaccionar verá el segundo estado al que necesitamos pasar, y podría div los cambios de manera eficiente y luego pasar a ese siguiente estado y actualizar nuestro DOM por nosotros. Esto también nos permite renderizar a múltiples objetivos como web, móvil, VR, y cualquier otra plataforma. ¿ Cómo nos comunicamos con el DOM virtual? React nos proporciona una función de crear elementos para crear estos elementos para comunicarnos con el DOM virtual. Es básicamente una descripción de lo que queremos ver en la pantalla. Podemos pasar un tipo que básicamente es solo una etiqueta HTML, o puede ser un componente del que aprenderemos en un poco. Entonces podemos pasar apoyos, que pueden incluir cosas como OnClick, OnKeyDown y muchos eventos más. Por último, podemos pasar niños. Esto puede incluir texto y otra llamada CreateElement o incluso una función. Hay algunos pequeños matices como usar ClassName en lugar de clase y estilo que necesitan pasarse como un objeto en lugar de una cadena porque estamos en un entorno JavaScript. Si alguna vez has visto reaccionar antes, probablemente hayas visto esta sintaxis como HTML. A esto se le llama JSX. Utilizamos una herramienta llamada babel que entiende este JSX y lo compila hasta algo que el navegador puede entender. Babel es un compilador de JavaScript que toma código, lo transforma, y devuelve el código JavaScript y un formato diferente. Como podemos ver aquí. Lo estamos transformando de una etiqueta h1 que parece HTML en una llamada de función usando create element. Si pasáramos algunos apoyos aquí como tal vez estilo, color naranja, podemos ver cómo esto se va a transformar en tiempo real. Podrás visitar babelcdmx io para jugar con este ejemplo en vivo y hacerte una sensación por ti mismo. Podemos utilizar cualquier expresión de JavaScript válida dentro de llaves en JSX. JSX en sí es una expresión de JavaScript, pero recuerda que es solo [inaudible] encima de crear elemento. En ocasiones si necesitamos interrumpir con JavaScript, podemos. Podemos ver aquí tenemos una variable de nombre que declaramos, y luego en nuestra variable de elemento realmente podemos usar esa variable de nombre. Esto resolvería saludar a Travis. Sin embargo, al mapear sobre colecciones sí necesitamos recordar proporcionar un soporte clave para React. Las claves ayudan a reaccionar para identificar qué elementos han cambiado, se han agregado o eliminado. Por último, podemos hablar de componentes. Los componentes son el bloque básico de React. Nos permite dividir nuestra interfaz de usuario en piezas independientes y reutilizables. Podemos componer múltiples componentes juntos para crear aún más componentes. Utilizamos funciones para componentes sin estado y clases ES2015 para componentes con estado. Los componentes con estado también nos ofrecen ganchos de ciclo de vida que nos permiten enganchar en ciertas partes del proceso de renderizado. Echemos un vistazo a cómo funciona esto. Como pueden ver, tenemos un componente apátrida y con estado. componentes apátridas son muy simples. Son sólo una función que devuelve un elemento reaccionar. Como puedes ver aquí, es lo mismo que antes. Sólo estamos diciendo hola, nombre. Qué nombre se declara como una variable anterior llamada Travis, por lo que esto resultaría en hola Travis. Las cosas se ponen interesantes cuando pasamos a un componente con estado. Empezamos con una clase ES2015 y luego nos extendemos desde React.Component, que viene de React. Al extendernos desde React.Component, heredamos algunos métodos y otras propiedades que podemos usar y React entenderá. En este ejemplo básico, acabamos de declarar una propiedad estatal que va a tener otra propiedad de nombre llamado Travis. Entonces tendremos un método de render que React llamará y devolverá Hola, this.state.name que sería Travis. También es útil tener en cuenta que se requiere un método de render para las clases. Ambos componentes resultarán en lo mismo, pero están escritos de dos maneras diferentes. Averigamos cómo el estado nos puede ayudar en nuestras aplicaciones. Estado nos da la capacidad de hacer que nuestras aplicaciones sean interactivas. Puede ser un objeto de cualquier cosa incluyendo cadenas, matrices, e incluso funciones. Podemos actualizar un componente cuando el nuevo estado mediante el uso del método set state que heredamos cuando extendimos de React.Componet. Es útil tener en cuenta que reaccionar nos ayuda adhiriéndonos a un flujo de datos unidireccional. Siempre se puede pensar en el estado viniendo de arriba y goteando hacia abajo a los niños componentes y proporcionándoles ese estado. Como puede ver aquí, hemos declarado un componente usando una clase llamada contador. Nos extendemos desde el componente React como antes, y estamos declarando algún estado inicial llamado recuento. El conteo comienza en cero y queremos aumentar o disminuir, el conteo basado en qué botón hemos hecho clic. Como ya hablamos antes, tenemos que llamar al método setState para cambiar el estado. SetState puede tomar un objeto con el nuevo estado, o puede tomar una función que recibe el estado actual y luego devuelve su nuevo estado. Eso es lo que estamos haciendo aquí. Si puedes ver estas funciones de incremento y decremento, recibieron el estado y o bien agregan una al estado actual o restan una al estado actual. Si hacemos clic en este botón un par de veces, podemos ver que realmente estamos incrementando el estado. De igual manera, si hacemos clic en el menos, disminuimos el estado y bajamos. Como vimos antes con el DOM virtual, cada vez que disminuyamos o incrementamos el estado, div los cambios y actualizará el componente apropiadamente. Ya que estamos usando este state.count, se actualizará dinámicamente, como podemos ver a continuación. Si quisiéramos reutilizar este componente de contador, ¿cómo podríamos hacer eso? Bueno, ¿simplemente mantenemos el estado y lo manejamos nosotros mismos? ¿ Y si tuviéramos estado de aplicación que necesitara venir de otro lugar y proporcionárselo a este mostrador. Echemos un vistazo a cómo podemos usar un término llamado apoyos para lograr esto. Los apoyos son esencialmente opciones que podemos proporcionar a nuestros componentes. Son similares a estado en que los apoyos pueden ser cualquier cosa. Utilizamos tipos de prop para proporcionar validación y nos aseguramos de que los apoyos se utilicen según lo previsto. También podemos proporcionar apoyos por defecto que se utilizarán para los apoyos que nunca se pasan. Echemos un vistazo a cómo podemos tomar el contador ejemplo antes y sacarlo a pieza reutilizable. Los componentes sin estado recibirán apoyos como argumento, y los componentes con estado recibirán props como una propiedad a la que se puede acceder bajo este puntales de punto. En este caso, no vamos a pasar ningún utilería a nuestra app, y así sólo vamos a preocuparnos el contador y los apoyos que están volviendo a eso. Si podemos ver que tenemos un componente de contador, estamos pasando apoyos a él llamado contar con decremento y en incremento. Nos mantenemos estado aunque en nuestra app ahora. No estamos sosteniendo eso en el propio componente de contador. Este componente de contador es ahora agnóstico de su estado y se puede utilizar de muchas maneras diferentes. No necesita saber de dónde viene su estado. Esta es una idea básica de cómo funcionan los apoyos. Aquí no entraremos en los detalles de los tipos de prop o los apoyos por defecto. Pero te recomiendo encarecidamente que vayas a ver la documentación de React y leas sobre más de ella. Por último, veamos cómo podemos renderizar las cosas a la pantalla. Al igual que el paquete React, hay paquetes separados para diferentes renderizadores de los que hablamos previamente. Recuerda, dijimos que podíamos renderizar ya sea a una plataforma nativa o a VR o a la web. hoy vamos a estar usando React DOM y su renderizador. Eso se proporciona como un paquete separado. Utilizamos el paquete React DOM, que nos proporciona un método de render, y es muy sencillo. Todo lo que hacemos es tomar nuestros componentes que hemos estado definiendo, vamos a pasar eso como el primer argumento a renderizar y en el segundo argumento simplemente pasamos un nodo DOM válido. En este caso vamos a obtener el nodo DOM usando getElementById. Esto no es lo mismo que nuestro método de render. Esto en realidad renderiza al DOM. En lugar de simplemente actualizar nuestros componentes cada vez con un render, en realidad estaban renderizando al DOM y actualizando el DOM cada vez que esto se actualiza. Esa fue una visión general de alto nivel de React. Aprendimos cómo funcionaba el DOM virtual, qué es, cómo podemos usar React.Create element para comunicarnos con el DOM virtual. Cómo usamos JSX que es una sintaxis como HTML que compila hasta React, create element. A continuación, aprendimos cómo construir componentes y cómo podemos usar el estado para hacer que las cosas sean dinámicas, y luego cómo podemos usar los apoyos para que las cosas fueran utilizables. Por último, aprendimos cómo podríamos usar React DOM para renderizar cosas a la pantalla en la web. Saltemos a un ejemplo del mundo real y veamos cómo funcionan todas estas cosas juntas. Nos vemos ahí. 3. Programa en el navegador: CodeSandBox es y editor de código en línea y es una de las formas más fáciles de empezar a usar React. Esto es lo que estaremos usando hoy para crear nuestra app de galería. Puedes visitar esta página web entrando en codesandbox.io. Crea una cuenta para que puedas guardar tu progreso a medida que avanzamos y luego volver a este video. Una vez que tengas una cuenta o hayas iniciado sesión, empecemos haciendo clic en el botón Open React. Esto creará un sandbox para nosotros con una sencilla aplicación React lista para ir. CodeSandBox utiliza una herramienta llamada Create React app desarrollada por Facebook. Nos da una ventaja a la hora de construir aplicaciones React cuidando la configuración y configuración. Tradicionalmente, necesitábamos configurar un servidor y herramientas como balbucear para transformar nuestro JSX para crear elemento como hablamos antes. Pero Create React app maneja todo esto por nosotros. Puedes leer más sobre crear React up visitando el repo si te interesa, solo ten en cuenta, esto es lo que CodeSandBox está usando bajo el capó para alimentar nuestro entorno de desarrollo. Podemos ver que comenzamos con un archivo básico index.js. Estamos importando React and React DOM así como algún archivo CSS para el estilo básico. Entonces tenemos un componente funcional simple para nuestra aplicación, que luego se renderiza al navegador usando React on Render, como vimos en el video anterior. Quizás te preguntes de dónde se está importando React. En realidad viene de nuestro archivo package.json. Esto describe qué bibliotecas quieres usar desde npm así como algunas otras opciones de configuración que utiliza la aplicación Create React. Si nunca has oído hablar de un npm antes, es un gestor de paquetes de JavaScript que nos ayuda a usar bibliotecas de terceros como React. Volveremos a este tema en un video posterior y aprenderemos cómo podemos tirar en otras bibliotecas que podemos usar a nuestro favor. Si volvemos a nuestro archivo index.js y guardamos comando S. Ya veremos que nos presentan algunas otras opciones aquí ahora. Podemos ir a la pestaña Info del proyecto y cambiemos el nombre de nuestra aplicación a la galería React. De esta forma podremos encontrarlo más fácil cuando volvamos a ello en nuestros proyectos. Una última cosa a tener en cuenta es que si realizamos algunos cambios en el código y guardamos nuestro archivo, notaremos que el código está reformateado. Si hago tabulador aquí, empuje comando como, veremos que vuelve a su lugar. CodeSandBox está utilizando otra herramienta llamada bonita. Prettier impone un estilo consistente a través de nuestra base de código y nos permite enfocarnos en escribir código realmente en lugar de cómo se formatea nuestro código. Estamos listos para empezar a codificar nuestra app de galería. Aprendamos cómo podemos obtener datos de una API y ver un ejemplo del mundo real de cómo se puede usar el estado en React. 4. Recupera datos de una API: Antes de poder empezar a traer datos a nuestra aplicación, necesitamos refactorizar nuestro componente sin estado en un componente con estado. Recuerda que esa es la única forma en que podemos mantener el estado y actualizar nuestras aplicaciones. Hagamos clase aquí, lo llamaremos app, extenderemos desde react.component, proveeremos un método de render y devolveremos un div simple por ahora. También podemos darle un nombre. Llamaremos entre H1. Podemos llamarlo pixel. Entonces incluso podemos agregar un poco de emoji aquí por diversión. Agrega esta camara, haz comando S. Ahora estamos bien para ir y tenemos acceso al estado. Veamos qué podemos hacer aquí, agregamos un estado agregamos propiedad de imagen. Estamos usando matriz vacía ahí por ahora. Vamos a averiguar cómo podemos usar una API y apuntar algunos datos a la aplicación ahora que estamos listos para mantener algún estado y actualizarlo. ¿ Cómo obtenemos datos de una API? hoy estará usando una API de píxeles, ya que está abierta al público, no tendremos que preocuparnos por la autenticación. Tenga en cuenta aunque a veces las API requieren autenticación y necesitan una clave de desarrollador para poder funcionar correctamente. También añadiré un enlace a una lista de otras API que quizá quieras usar a continuación. En nuestro caso, la API de píxeles es pública y en realidad podemos visitar la URL que estaremos utilizando hoy para obtener datos de. Nos desplazamos aquí abajo, podemos ver que nos dan un punto final que podemos usar. Visitemos esto y veamos qué recuperamos. Recibimos de vuelta una lista de imágenes. Enfriar. ¿Cómo metemos esto en nuestra app? Bueno, podemos usar algo llamado Fetch. Fetche es un método disponible para nosotros en ventana y nos permite llegar a un recurso y devolvernos una respuesta llena de algunos datos. Usan una promesa, que si no sabes lo que es una promesa, básicamente dice que prometimos hacer esto. Nosotros decimos que vamos a hacer algo y luego queremos hacer otra cosa. Es una asíncrona por naturaleza. En lugar de pensar cómo se ejecuta el código de forma sincrónica, así que llamas a algo, pasa algo más. Realmente no sabemos necesariamente que una promesa va a resolver, Similar a, en este caso, un HTTP solicita donde queremos ir a buscar algunos datos y recuperar algo. Bajamos aquí, podemos ver que obtenemos una promesa que resuelve a un objeto de respuesta. Echemos un vistazo a este objeto de respuesta muy rápido. El objeto de respuesta contiene algunas propiedades y métodos a los que podemos llamar y sólo estamos interesados en uno hoy en día. Richardson en este cuerpo.JSON. Queremos llamar a esto cuando tengamos una respuesta de vuelta, lo que le devolverá otra promesa. Entonces, por último, podemos obtener nuestros datos de esa respuesta. Vayamos a nuestra app y veamos cómo funciona. Ahora queremos aprovechar algunos métodos del ciclo de vida. Uno en particular es ComponentDidMount. Esto se llamará cuando el componente se monte primero en la pantalla, por lo que ahora podemos empezar a buscar algunos datos. Llamaremos a buscar. Le pasaremos la URL donde podrás obtener la lista de imágenes de. Recuerda, esto devuelve una promesa, por lo que podemos llamarla entonces, y recibimos una respuesta. esa respuesta podemos llamar a un método JSON, que devolverá otra promesa. Entonces podemos llamarlos de nuevo, y ahora en realidad tenemos datos con los que trabajar. Abre esto en una función. Solo estamos usando una función de flecha gorda aquí. Entonces iremos a este estado conjunto. Queremos cambiar nuestras imágenes ahora nuestra propiedad de imágenes y ahora le pasaremos de vuelta los nuevos datos que acabamos de obtener, no nos manden guardar. Ahora veamos si cerramos sesión en nuestro estado donde volvemos. Si abrimos nuestra consola, ahora podemos ver que tenemos dos objetos que nos encantaron. Recuerda, render se llama cuando se monta primero el componente y luego si lo actualizamos y llamamos a esto en estado o se actualizará de nuevo con lo que queramos. Este caso tenemos imágenes con una matriz vacía, que podemos ver aquí empezamos con una matriz vacía imágenes en nuestro estado. Pero ahí llamamos a este estado conjunto con los datos que obtuvimos de esta API que teníamos. Ahora si registramos, abrimos esta app, podemos ver que funcionó, recuperamos todas nuestras imágenes bastante cool. Ahora podemos abrir esta app. Es sólo una matriz de un montón de datos, como vimos cuando volvemos aquí y miramos todos estos datos que obtuvimos. Ahora tenemos acceso a eso, podemos hacer algo con él. Cerremos esto y veamos cómo podemos usar esto. Ahora que tenemos estos datos, ¿cómo podemos conseguirlo en pantalla? Recuerda, podemos usar la interpolación JavaScript. Abrámoslo aquí y accederemos a las imágenes. y luego usaremos mapa porque es una función de array. Podemos mapear sobre cada imagen y hacer algo con ella y devolver una nueva matriz. En este caso, haremos fuente de imagen. ¿ Qué podemos pasarlo a la fuente, donde pasamos la fuente? Vamos a ver que escogería algunos nos da de vuelta en nuestra llamada API. Recuerda que tenemos todos estos datos de vuelta, así que qué podemos pasarlo para construir una imagen. No parece que nos den la fuente de una imagen, pero sí obtenemos la identificación de cada imagen. Esto es raro. ¿Cómo funciona esto? ¿ Cómo obtendríamos una URL de imagen? Bueno, así es como funcionan las API. En ocasiones nos dan un poco de datos y luego podemos usar eso para acumular aún más datos. Entonces en este caso tenemos el ID de imagen y vamos a ver si nos dan una forma de obtener una identificación específica. Ah, aquí, perfecto. Podemos obtener una imagen específica yendo a esta URL y agarrando una imagen. Ya veremos cómo podría funcionar eso. Si volvemos a nuestra aplicación, pegamos esto en, renueva la interpolación JavaScript aquí. Enfriar, ahora estamos recuperando algunas imágenes, pero es justo la misma imagen. Eso no es tan guay. Usemos algo de interpolación. Podemos utilizar nuestra imagen que tenemos ahora que tenemos acceso y obtendremos su identificación. Enfriar, parece que ahora tenemos imágenes, así que ahora estamos renderizando imágenes en la pantalla es bastante genial. No se ve tan bonito, pero al menos tenemos nuestras imágenes entrando y renderizando a la pantalla. Averigamos cómo podemos hacer que esto sea un poco más agradable. Antes de hacerlo sin embargo, sí necesitamos agregar una clave a esto recuerda, reactor se quejará si no tenemos llave y por suerte tenemos una identificación aquí. Desde su único, tenemos que entender esto y ser felices, guardar eso, cool. Se ve bien. Una cosa que deberíamos hacer muy rápido es que si miramos nuestros datos aquí, necesitamos agregar un método de corte porque estamos agarrando demasiadas fotos en este momento. Estamos agarrando unas 1000 fotos, por lo que sólo debemos agarrar unas 30. Hagámoslo muy rápido. Entonces ahora podemos ver que no agarramos tantas fotos. Esto será un poco más fácil de cargar, fresco. Ahora estamos listos para iniciar esa app. 5. Dar estilo en React: ¿ Cómo iniciamos ahora nuestra solicitud? Podemos ver que estamos importando el archivo CSS aquí en la parte superior. Vamos a entrar ahí muy rápido. Se trata de algunos estilos que se configuraron antes. No queremos text-align center y ya no estamos usando app por lo que solo podemos apuntar a nuestro cuerpo. Eso se ve bien. Ahora nuestras fuentes están usando un san serif se ve un poco más bonito. Si nos acercamos a nuestro archivo de índice, ahora cómo lo hacemos, deberíamos simplemente usar una hoja de estilo como antes de social volvemos a styles.css. Podemos hacer eso, pero como reaccionar es solo JavaScript, tenemos muchas formas diferentes en las que podemos darle estilo a nuestras aplicaciones. Podríamos usar estilos en línea proporcionando un objeto, aunque esto podría salir del costo de rendimiento, podemos usar CSS tradicional mediante el uso de nombre de clase y una hoja de estilos o podemos usar un término llamado CSS y JS, que es lo que vamos a estar usando hoy. Hay una tonelada de bibliotecas que soportan CSS y JS que todas vienen con una característica diferente. Pero hoy vamos a estar usando una biblioteca llamada emoción. Apoyos de emoción para habilidades de estilo CSS en JavaScript. Personalmente me gusta usar objetos, pero también puedes usar un término llamado literales de plantilla de etiquetas con el fin de escribir CSS más familiar en una cadena. Veamos cómo funciona aquí. Importamos la función CSS de la emoción. Podemos construir nuestra cadena CSS y aplicar. Esto creará un nombre de clase, y podemos aplicar ese nombre de clase a nuestro dominio. Podemos ver aquí que tenemos que instalar una biblioteca adicional para usarla con reaccionar. Esto es lo que es genial de la emoción. Se puede trabajar con o sin reacciona. Funciona con muchas plataformas diferentes. Esta es la plantilla de etiquetas literales, cosas de las que estaba hablando. Podemos ver aquí que tenemos una app. Pasamos un nombre de clase igual que normal, como pasaríamos cualquier otro nombre de clase. Se resuelve adecuadamente. No tenemos que preocuparnos por administrar una hoja de estilo separada ni nada por el estilo. Podemos mantener todos nuestros estilos y co-ubicados juntos. Esto es realmente bonito y ya veremos cómo puede funcionar esto. Volvamos a nuestra app y empecemos a peinarla. En primer lugar necesitamos instalar nuestras nuevas dependencias. Recuerda dijimos que regresamos a nuestro paquete.json. ¿ Cómo hacemos esto en código sandbox? Nos dará una manera realmente fácil de hacerlo. Podemos simplemente agregar dependencias aquí con este botón, haremos click que buscará emoción y ahí está. Eso lo instalaremos. Vemos que se sumó a nuestras dependencias. Pero recuerda que estamos trabajando en reacciona, por lo que necesitamos sumar la dependencia de reacción de emoción. Motion reacciona, hay. Enfriar. Estamos listos para irnos. Tenemos de vuelta a nuestro index.js. Podemos importar estilizado desde reaccionar movimiento veremos eso. Ahora estamos listos para empezar a peinar nuestra aplicación dentro con CSS y JS, no tenemos que volver a una hoja de estilos. Normalmente me gusta mantener unas hojas de estilo quietas para poder manejar mis estilos globales. Se puede hacer esto con emoción, pero sólo depende de lo que se quiera hacer. Me gusta tener solo un archivo CSS regular para estilos globales y usar el CSS y JS para mantener mis otros componentes estilos específicos co-ubicados, lo cual es realmente agradable. El movimiento nos da esta función de estilo. Podemos empezar a usarlo de inmediato, hacer estilo, y luego podemos pasarle una cadena para cualquier etiqueta que queramos usar. En este caso queremos utilizar una etiqueta de encabezado. Después pasaremos otra función con un objeto, y esos serán los estilos que queremos darle. Haremos un poco de relleno para que se vea un poco más bonito. Dale 16 píxeles de relleno. Entonces podríamos hacer de vuelta alrededor del color, me gusta usar HSL, eso es saturación de matiz y embarque. Es solo una manera fácil de recordar tus colores sin realmente tener que mirarlos. Haremos cero por ciento por saturación y luego embarcar que queremos hacer lo haremos como un más oscuro o como un gris claro. Haremos 94 por ciento. Ya veremos cómo funciona esto. Ahora tenemos este componente que se ha creado para nosotros y el estilo, el nombre de la clase ya ha sido creado para nosotros también por lo que no tenemos que preocuparnos de ir a una hoja de estilo. Todo está justo aquí, lo cual es realmente bonito. Si bajamos aquí, envolveremos nuestro título en un encabezado y luego veamos si funciona. Ahí vamos, se puede ver que es un poco gris claro, pero tenemos algunos otros estilos que están chocando. Tenemos margen por defecto en nuestro cuerpo así que vamos a deshacernos de eso. Esto es solo de los estilos predeterminados del navegador. Parece que nuestro H1 está heredando algún estilo. Es por eso que me gusta simplemente tal vez limpiar las cosas. Podríamos incluso normalizar importante o algo aquí para restablecer todos los estilos. Pero en este caso lo haremos nosotros mismos y no haremos margen en nuestra cabecera. Bueno, ahora se ve un poco mejor. Ahora saquemos nuestras fotos y las pongamos en una cuadrícula y hagamos que se vean un poco más bonitas. Podemos hacer const, vamos a llamar a este TileView. Entonces podemos volver a usar nuestra función de estilo y esto solo será un div ahora. Después pasaremos otra función con un objeto y vamos a usar la cuadrícula de visualización. Entonces queremos poder pasar apoyos a este elemento de estilo. A lo mejor cambiarlo lo hacen variable para que podamos cambiarlo en base a diferentes opciones. Lo que es genial de la emoción es que nos permite pasar aquí los apoyos. Vamos a envolver este objeto en parens porque queremos devolverlo implícitamente. De lo contrario piensan que queremos una función que necesitamos hacer un retorno. Entonces les preguntaremos a menudo dirán relleno, espaciado de apoyos, y luego haremos brecha de rejilla. Los apoyos comienzan el espaciado también. Esto agregará espaciado alrededor de toda nuestra beca o ver si esto funciona. Podemos simplemente tomar nuestra vista de tiempo, bajar aquí. Envolveremos todas nuestras imágenes ahí dentro y veremos si parece que está funcionando, lo guardaremos. No parezca que esté funcionando. A ver qué está pasando. No estamos pasando espaciando a ella. A lo mejor aquí es donde podemos introducir los apoyos por defecto. No estamos pasando ningún accesorio para arriba, pero tal vez no estábamos espaciando para ser un prop por defecto. Podemos ir aquí y podemos hacer TileView. Tenemos este componente y podemos acceder a los apoyos por defecto de propiedad en él, y ahora podemos pasar el espaciado. Podemos decir, lejos 16 píxeles como un espaciado predeterminado. Enfriar, ahora está funcionando. Ahora si no pasas ningún espaciado, solo tendremos 16 píxeles por defecto. De lo contrario, podemos entrar aquí. Podemos decir espaciado, tal vez algo escandaloso como 60. Bueno fresco así que está funcionando. Eso es demasiado espaciado. Simplemente nos quedaremos con el espaciado predeterminado que configuramos. En realidad podemos inspeccionar esto y ver que está funcionando y cómo la emoción convierte todo en un nombre de clase. Es bastante guay. Vemos aquí, vemos este pequeño nombre de clase que obtenemos, y se resuelve aquí mismo. obtenemos visualizado relleno de cuadrícula 16 pixels, brecha de cuadrícula 16 pixels. Bastante cool. Añadamos algunas cosas más para limpiar esto. La grilla CSS es extremadamente potente, así que aprovechemos la misma. Podemos usar algo llamado columnas de plantilla de cuadrícula. Después pasaremos un literal de plantilla de cadena, y podemos decir repetir. Vamos a ir a autollenar. Entonces podemos usar una función minmax en CSS. Va a ir interpolación aquí y diremos apoyos. Podríamos ir min ancho de celda. Vamos a tener sólo una fracción. Básicamente lo que esto está diciendo es tratar de llenar la ventanilla con tantas celdas como puedas, pero manténgalas a este ancho mínimo de celda. De lo que realmente se ha causado obtenemos una función de respuesta por defecto. No tenemos que preocuparnos por configurar puntos de ruptura ni nada por el estilo. Pasaremos una celda mínima predeterminada con. Iremos 3-20 por ahora. También tenemos que recordar que necesitamos pasarle un valor de píxel. Entonces mientras que los píxeles aquí, vamos a ver si esto funciona. Para receso de ventana gráfica debe tener celdas en ella que tengan una pila. Enfriar. Ahí vamos. Parece que está funcionando. Todavía falta limpiar nuestras imágenes, lo haremos a continuación. Pero ahora tenemos algo de diseño autoresponsive en marcha, que se ve bastante genial. Limpiemos un poco nuestras fotos. No encajan muy bien en la ventana gráfica. Crearemos otro componente aquí. Lo llamaremos foto igual a estilizada. Quieren pasarlo a imagen. Ahora pasa otra vez una función con nuestros estilos. Nos vamos a ir con 100 por ciento. También queremos hacer bloque visualizado. Si no haces mostrar las imágenes de bloque tienen el inline por defecto y cómo este extraño margen en la parte inferior de ellas, display block ayuda con eso. Iremos a cubierta de ajuste de objeto, que esto asegurará que la imagen sea span como su propia pequeña ventanita en la que está así las celdas en nuestro caso. Tenemos ese componente, vayamos aquí abajo. Pero también debemos cambiar nuestra celda min. Bueno eso es un poco demasiado grande. Creo que nuestra ventana es de unos 300 en este momento, así que lo estableceremos 240 que podría ser un buen ancho. Vamos a bajar por aquí. Reemplazaremos esto y solo debería funcionar porque parece que está funcionando. Estas imágenes son un poco largas. Hagamos una imagen cuadrada en realidad así lo reemplaza con, vamos a hacer mil por lo que tenemos algo de buena calidad. Es bonito lo de la API de píxeles. Nos permite recortar imágenes realmente fácilmente. Ahora consiguió algunas imágenes cuadradas. Nos vemos bastante bien. Nuestras imágenes seguidas. Tienen algunos espaciados agradables a su alrededor. Averigüemos cómo podemos hacer que este pequeño sea interactivo y tal vez haga clic en él para ampliar la vista y mostrar alguna información adicional. 6. Agrega interacción: Antes de que pasemos por aquí, limpiemos un poco nuestros archivos. Están llegando hasta llegar a hincharse un poco. Podemos limpiar esto moviendo un intuitivo desde el archivo. En primer lugar, sólo copiaremos todo. Esto es lo que hago, siempre copio todo y luego creo un nuevo archivo. Llamaremos a componentes. Ahora, dependiendo de cuántos archivos tengas, tal vez quieras crear una carpeta con más archivos dentro de eso. Pero en nuestro caso, esto es bastante simple, así que lo mantendré bastante simple. Sólo necesitamos estilizados, y entonces podemos ver eso. También queremos exportar estos todos, así es como podemos agarrarlos. Después exploraremos costo TileView, y luego exportaremos foto. Ahora deberíamos poder importar estos para que, puedes deshacerte de todos estos y vamos a conseguir algunos errores, pero eso está bien. Ya vamos a importar los archivos. Ya no necesitamos estilo. Ahora podemos ir a importar, y podemos escoger estos componentes individuales que acabamos de exportar, por lo que diremos para los componentes, y luego iremos Header, TileView, y luego foto. ve bien. Volvamos a nuestro archivo de componentes. Ahora queremos hacer click en una foto y tenerla expanda, entonces, ¿cómo podríamos hacer eso? Nuestras galerías un poco grandes ahora también. Ya vemos si podemos encogerlo solo un poquito, así que iremos quizá 120. Ahí vamos. Ahora si abrimos esto y lo cerramos, sí, ahí vamos. Obtenemos un poco mejor vista. Cuando nos expandimos, en realidad tiene sentido. Ahora queremos tomar este componente fotográfico y le estamos pasando apoyos, pero en realidad ni siquiera estoy usando los apoyos en este momento. Cuando creamos nuestros estilos, me gusta tirar de mis estilos. mí me gusta tal vez no me gustaría una hoja de estilo y así dirá, podemos decir ThumbnailStyles, así que esto es cuando es pequeño. Entonces haremos FullScreenStyles como lo llamamos así. Ese será un objeto de estilos también, así que queremos que sean por defecto los que declaramos, así que thumbnail es éste. Entonces cuando sea pantalla completa, vamos a arreglar la posición. Cero superior, cero derecho, cero izquierdo, cero inferior. Esto lo hará, cuando lo expandimos todo se vertió a través de toda la ventanilla, queremos darle una altura mínima para que no sea demasiado grande. Le daremos un poco de espacio para respirar, así que haremos 80 de altura de ventanilla, y luego también podemos hacer margen auto para centrarlo en la pantalla. Ahora, podemos tomar estos estilos que acabamos de definir y nos desharemos de esto. Podemos decir, ya que recuperamos los apoyos, diremos props, llamaremos a este prop IsActive, y se puede decir que si es Active, queremos usar los ThumbnailStyles, pero usaremos FullScreenStyles cuando digamos activo, y luego de lo contrario, usaremos los ThumbnailStyles, para que podamos guardar eso. Creo que ya estamos bien para irnos. No pasará nada o lo absoluto se ve igual, así que eso está bien. Vamos a averiguar cómo podemos decirle a una foto que sea si está activa o no. Podemos introducir algún nuevo estado aquí ya que queremos cambiar nuestra app cuando hacemos clic en algo, y así diremos, vamos a sostener un CurrentPhotoID, que será nulo por defecto. Entonces para determinar si algo está activo, lo haremos, está activo en este estado CurrentPhotoID es igual a esta image.id ¿Cómo obtenemos CurrentPhotoID? Bueno, recuerda que hablamos de OnClick para que podamos pasar un evento. Podríamos decir onClick, y pasaremos una función, y luego veremos este setState, y obtendremos el CurrentPhotoID. Lo pondremos a esta image.id en la que hacemos click. Estamos buceando, estamos adjuntando estos eventos y estamos viendo, cuando hacemos click en esta foto, queremos establecer cualquier foto en la que acabamos de hacer clic en el CurrentPhotoID, y entonces ahora actualizaremos nuestro estado y volveremos a bajar, y así cada vez que pase por cada imagen, dirá ¿Esta activa? ¿ Este está activo? ¿Este está activo? Por último, llegará a donde sea uno en el que habíamos hecho clic, que se establece en el CurrentPhotoID. A ver si eso funcionó. Parece que está funcionando, así que ahora podemos dar click en algunas fotos y expandido y esto no se ve demasiado bien, pero vamos a arreglar esto aquí muy rápido. ¿ Cómo podríamos cerrar esto? Cuando hacemos clic en una foto, no pasa nada más solo va a seguir ajustándola al ID de imagen, ¿verdad? Entonces podríamos decir aquí, podríamos sacar esto de nuevo. Esto tal vez cuando quieras sacar esto a una función aquí arriba. En ocasiones hago eso en lugar de hacer un retorno implícito, haremos un retorno explícito, así que devolveremos esto. Ahora podemos almacenar variable aquí arriba llamada IsActive, y luego podemos decir, vamos a pasar IsActive aquí abajo ahora, así que sólo vamos a limpiar un poco las cosas. Ahora podemos decir, si somos IsActive, queremos que se establezca en no, en lugar de establecer en la imagen. Id, así que eso debería cerrar la imagen porque simplemente volverá a través de no y entonces ahora ya no se ajustará, así que vamos a guardar eso. Ahora deberíamos poder hacer clic en una foto y luego volver a hacer clic en ella, y eso ahora funciona, por lo que la pone de nuevo. Veamos cómo podemos limpiar un poco nuestros estilos y hacer que se vea un poco mejor. A continuación, queremos agregar un componente de marco para que podamos ver un poco mejor nuestra foto y no tengamos una destrucción detrás de nosotros, así que hagámoslo. ¿ Cuáles son los componentes? Hará exportación const Frame igual a estilo, y esto sólo será un div y pasará sus propios estilos cuando uses un estilos similares aquí para, como estilos de pantalla completa, sólo los pegaremos en. Vamos a hacer color de fondo. En este caso, vamos a hacer cada hsla, que es un canal Alpha. Esto es realmente raro. Esto es lo que no me gusta esto en la hsla y hsla, pero tenemos que usar comas ahora. Sólo recuerda siempre que si estamos usando hsla y cada hsla que tenemos que usar comas con la hsla y no comas con la hsla. Es un poco confuso, y entonces lo que el cero por ciento, queremos un 100 por ciento para el blanco. Entonces vamos a hacer un canal Alpha aquí, así que nos dará un poco de transparencia. Haremos 96, así que eso debería ser bueno para nuestros estilos de marco. Se guardará esa copia de marco y de vuelta al índice, se lo importará, y entonces sólo lo vamos a pegar aquí en la parte inferior. Dado que este arreglo de posición sólo debería aparecer. ¿ Cómo conseguimos que esto se muestre y se esconda? qué podemos hacer algunas cosas geniales aquí. Recuerda que somos justos, podemos interrumpir con JavaScript. Podemos decir esto.state.currentPhotoID y si ya que null es cierto, el IRF es un valor falsy dirá, si hay un currentPhotoID, mostrar este marco. De lo contrario simplemente no lo muestres. Esto evaluaría como verdadero, y luego simplemente ejecutará esto que sería crear elemento y renderizar nuestro marco, así que guarde eso. Ahora cuando hacemos clic, deberíamos tener un marco que salga. Ahí vamos. Esta es una buena razón. A pesar de que CurrentPhotoID son nulos es falsey, CurrentPhotoID no puede ser cero. Eso fue lo que vimos cuando hicimos clic en el primero. Vuelve aquí y diremos, no es igual a nulo. A veces puedes encontrarte con un problema como este. Tan solo ten cuidado si tienes algo donde lo estás comparando y es cero, entonces podría no ser cierto, así que hacemos click en esto. Eso debería ser bueno. Ya podemos ya no ver nuestra imagen. Hagamos que eso se presente. Ven aquí, por qué zIndex porque ahora mismo esto está sentado en la parte superior, básicamente porque está sentado el orden del DOM y conjuntos deseados, así que diremos que este es el zIndex de cinco. Aquí es donde empezamos a jugar con nuestras palabras de ZIndex, ¿verdad? Y entonces Cindex tiene 10, así que ahora le damos click. Ahora da click en él. Vemos que tenemos un marco detrás de nosotros. Podemos hacer click y cerrarlo, abrir, cerrar. Bastante dulce. Limpiemos un poco los estilos para esta foto. A lo mejor, la ventanilla de altura 80 no era buena. Vamos a hacer ancho aquí, vamos a hacer ancho y vamos a hacer 80 ancho de la ventanilla. Ahí vamos. Nos vemos bien. Agregamos una cosa más aquí. ver si vamos a props está activo, vamos a añadir un cursor aquí, así que cambiaremos nuestro cursor cuando estemos rondando y diremos, y es pantalla completa, queremos alejarnos, y luego cuando es una miniatura, en realidad queremos hacer zoom y ver cómo se ve eso. Bueno lo hace. 7. Conclusión: Aprenderemos a buscar datos de una API, cómo funciona el estilo y reacciona. Cómo podemos construir API de prop alrededor de cosas como la cuadrícula CSS. Cómo agregar algo de interactividad haciendo clic en una imagen y expandiéndola. Quería mantener esta lección corta, pero recuerda que hay mucho más que podríamos hacer con esto fuera.Si abrimos esta imagen, por ej., es un poco grande. puede medir la ventana de visión y asegurarse de que la imagen siempre se ajuste o a una accesibilidad adecuada conectando los controles del teclado o incluso agregando algunas animaciones agradables. Te animo mucho a ir por encima y más allá en tus proyectos si estás listo para el desafío.Esta fue una visión general bastante alto de lo que es capaz con React.Te animo a seguir leyendo a través de la documentación de React, aprendiendo vainilla JavaScript y tomando cursos de reaccionar, por favor publique sus proyectos y podemos trabajar a través de cualquier tema que tengan juntos. Muchas gracias por tomar esta clase. Ha sido un placer darte alguna visión cómo funciona React y cómo podemos usarlo.No puedo esperar a ver qué crees.