ReactJS y Redux: crea 4 aplicaciones web [2/4]

1. Introducción del curso: bienvenido a un excelente recurso sobre cómo aprender reacción. Sí y Redox. Enhorabuena. Aprender reaccionar te pondrá un paso por delante porque es una de las habilidades más demandadas y pagadas en la industria del software. Diseñé este curso con un objetivo primordial para que hayas reaccionado en un Redux en tu currículum y preparado para construir tus propios proyectos de reaccionar desde cero. En este curso, construirás cuatro aplicaciones. Uno te pondrá en marcha con los principios de reaccionar e introducir la sintaxis JavaScript es six. El siguiente va a usar un P I y mostrar que tenía un trato con solicitudes web En reaccionar. En tercer lugar, se aprende Redux. Construye una aplicación que también almacena información localmente en el navegador. Y por último, lo mejor de todo, tendremos una app Redox que tiene educación completa para inscribir también a los usuarios. A medida que llegó una base de datos, voy a explicar cada nuevo concepto comprobando y midiendo con precisión cada idea fresca. De esa manera se tiene una comprensión minuciosa del abrigo y la ingeniería. Además, te dejaré entrar en un secreto ahora mismo. Redux puede sentirse complicado al principio, pero se puede hervir hasta tres pasos básicos. Muy bien, si por fin quieres desbloquear la clave para reaccionar y redux y agregarlas a tu conjunto de habilidades o solo quieres pincharte en tus chuletas de desarrollo Web, entonces este curso es perfecto para ti. Entonces, ¿a qué esperas? Empecemos a codificar. 2. Wireframing de MusicMaster: Bienvenido Aquí tenemos música, Maestro. La segunda aplicación que construiremos para conseguirlo funciona así. Busca el nombre de un artista. Después encontrarás alguna información sobre ellas, junto con un bonito perfil y su aguinaldo. Consigue una vista previa de sus 10 mejores pistas y están jugables. Busquemos a los escarabajos. Por ejemplo. Juguemos Hey Jude o que sea. A lo mejor quieres un artista diferente sobre Frank Sinatra. Ahí vamos. ¿ Qué tal si me vuelas a la luna o te tengo bajo mi piel? Este aprovecha los ojos de Spotify Public AP I para permitir a EU acceder a datos como imágenes de perfil y por supuesto, soundbites involucra bien, ciertos ojos AP suelen demandar en una clave p I. Por suerte, en este punto del tiempo, Spotify mira AP. Yo permite el acceso libre a los datos que queremos. Además, esta aplicación tiene un diseño responsivo en preocupación. De esa manera, incluso un dispositivo o plataforma múltiple podrá ver este sitio web o aplicación Web luciendo bonito y carne. Está bien. Esta aplicación tiene tanta más interactividad que la anterior cuenta en. Entonces empecemos viniendo y construyendo música Maestro 3. Configuración de MusicMaster: Configuremos el Proyecto Maestro de Música. Asegúrate de ir a tu terminal ahora navega en el mismo directorio. ¿ Te creaste tu primer tipo de proyecto reacciona Ellis, deberías ver tu primer campeón de cuenta regresiva de proyecto ya ahí, junto con cualquier otro archivo o proyecto que puedas haber puesto dentro entre ahora y entonces, ahora usaremos el create react to una vez más con el fin de inicializar nuestro proyecto. Correcto, Crear, reaccionar hacia arriba. Recuerda, es el nombre de nuestra aplicación. Entonces, ministro de Música, esto puede tardar uno o dos minutos dependiendo de tu conexión. Entonces seguiré adelante y saltaré adelante en el video a cuando se complete. Siéntete libre de hacer una pausa hasta que el tuyo termine también. Con éxito, tu salida debería verse así. Ahora, antes de lanzar nuestro código y correr en inicio PM, podemos dar un paso extra para prepararnos antes de volver a codificar antes de tiempo. Y en el Celeriac. Bootstrap ya. Por lo que simplemente ejecuta el comando y estoy instalado. Reacciona Bootstrap en la doble bandera. Seguro y arriba. En realidad me olvidé de navegar primero al proyecto, así que no se olvide de hacer eso. Entonces voy a abrir mi carpeta y solo para liderar esos módulos conocidos que se instalaron yendo a seguir adelante y despejar mi terminal no se metió en música master y luego ejecutar ese mismo comando. Con todo este insulto, podríamos empezar a crear la aplicación maestra de música y nuestro primer componente, Hagámoslo. 4. Crear el componente de App: Ahora que tenemos todo instalado. Lanzemos nuestra aplicación inicial ejecutando NPM Start también, vamos a abrirla en nuestro editor de código. Voy a seguir adelante y redimensionar todo. Entonces de esa manera el dimensionamiento es más pertinente a lo que estamos haciendo. El primero que hay que hacer. Hagámoslo. Toda esta carpeta fuente. Sí, y la razón para eliminar todo es empezar desde cero para que entienda exactamente lo que está pasando mientras creamos nuestra aplicación. Lo primero que tenemos que hacer es importar reaccionar de reaccionar. Y luego, como muchos de ustedes podrían recordar, es reaccionar hacia abajo de lo reactivo. Ahora simplemente podemos renderizar desde el reactor, no renderizar función. Hice eso nos gustaría. Por ahora sólo lo llamaremos Music Master y queremos agarrarnos a la Div con la idea de ruta en el público. HTML. Seguiremos adelante y salvaremos, y ahí vamos. Tenemos maestros de música apareciendo en la esquina. Por pequeño que sea, sigamos estableciendo la aplicación superior. Lo primero que queremos es un componente APP. Se trata de un nuevo expediente en el punto J seis. Vamos a importar reaccionar y el componente componente de reaccionar. Eso es todo lo que necesitamos por ahora. A pesar de que vamos a añadir CSN Slip, vamos a crear alguna estructura básica. Por lo que la clase en extiende componente. No me gustaría exportar eso por defecto antes de que nos olvidemos. Entonces, claro, quieres rendirle sexo a Sanjay y regresar. Intentemos regresar, ¿verdad? Dice Maestro de Música de AP? No, Y entonces iremos adelante y lo reemplazaremos. Index dot Js lo hizo por aquí con nuestro. Por lo que es importar en desde el directorio actual y encontrar el at. Simplemente usarán un tad auto envolviendo para nuestro y nos sentimos compilar. No pueden encontrar app en el directorio actual ahora. En ocasiones hay que recargar todo el servidor antes de que reconozca un nuevo módulo. Y luego nos vamos. Vemos maestro de música desde at y ahora sigamos agregando la estructura real a la aplicación. En primer lugar, necesitamos un título antes de nuestra solicitud. Diré Maestro de Música como título. Seguiremos adelante y nos daremos un nombre de clase de en título por ahora y después necesitaremos un componente de barra de búsqueda . Recuerda, queremos un Marcador de posición de campo de entrada de Buscar a un artista por ahora y después un botón comportado que simplemente diría es Enviar. Tendremos una sección de perfil por lo que nombre de clase equivale a perfil Por aquí, simplemente podemos decir Artista nombrado por ahora y después por buena medida agregará imagen artista Div y finalmente necesitará un componente de galería. Sólo podemos decir galería por no, claro. Dar a nuestra clase nombre de galerías. Vamos a guardar y es que se actualiza. Tenemos una aplicación de aspecto muy básico que realmente no hace nada excepto que incluso haga clic en un botón para no así Vamos a seguir adelante con algún estilo básico. Su aplicación para realmente hacer esto visible e irritable en otras palabras, más grande y agregar algo de bootstrap a la aplicación. 5. Estilizar con Bootstrap: antes de hacer otra cosa, ya podemos limpiar el estilo de esta aplicación incluyendo a los hombres. Si archivo CSS de reaccionar. Bootstrap. Nunca vuelvas a reaccionar. Bootstraps empezar página y copiar el enlace de lo último compilado en diversión CSS unificada . Algunos van a copiarlo, Navega de nuevo al índice de faja pública dot html e incluido por encima del tipo. Y ya deberíamos verla al día con algún nuevo estilo, el cambio de fondo así como la entrada y el botón. Ahora agreguemos nuestro propio estilo al lío musical. Agregaremos un archivo CSS en el titular de la fuente. Ya veremos en punto CSS como antes y antes de seguir adelante. Añadamos un nombre de clase en preparación al DIV general de app. Ahora debilita el estilo que quiero que todo esté alineado al centro. No me gusta cómo es a la izquierda derecha ahora y después quiero un poco mezquino así que diremos 5% empanada Ahora. Por supuesto, necesitamos importar realmente son estilings, inundaciones, importar app dot CSS y ahí vamos. Nuestro estilo aplica. A continuación, cambiemos el componente de la barra de búsqueda. Se ve un poco feo ahora mismo. Ni siquiera dice que se someta como lo quisiéramos. todas formas, vamos a importar algunas cosas de un hábil dandy reaccionar. Biblioteca Bootstrap, reimportar el componente de grupo de formularios, deformar componente de control. Un grupo de entrada así como los iconos de acantilado de reaccionar. Bootstrap. Y ahora vamos a cambiar hasta ahora toda esta búsqueda. Entonces sigamos adelante y simplemente eliminarlo. Vamos a colocarlo con un componente de grupo de formularios y luego dentro del grupo de formularios, vamos a tener igual que un campo de entrada, un control de formulario alimentado y este control de formulario será auto en el cierre. Entonces en realidad no necesitamos tener que gravar. Su tipo será texto y el marcador de posición se buscará en artista. Ahora esto realmente necesita ser envuelto con un grupo de entrada en sí incluir grupo Tomemos este control de formulario. Colóquelo dentro del grupo de entrada. Y por último, la razón de este código reaccionar Duceppe es que queremos que este puntera de botón se vea un poco. Va a tener un ícono. Tengo una lupa que parece una barra de búsqueda. Entonces es en grupo de entrada y encendido, y dentro de este add on tendrá un icono de glitch. Y entonces este acantilado simplemente dirá, buscar y nunca ir. ¿ Eso no se ve bien? Ahora puedes mirar a través de todos los iconos de glitz dentro de la biblioteca React Bootstrap. Hay toda una tonelada de ellos. Además, es lupa para las más ventosas. Usuarios del perfil, etcétera. Sigamos peinando nuestra aplicación antes de seguir adelante. Siento que podría ser una buena idea transitar el tema general de nuestra aplicación. Para que así lo podamos diferenciar de los otros que reconstruyen. Adelante y apuntemos a todo el cuerpo y cambiemos el fondo Deflect, que es 000 inaccesible. Sólo necesitan asegurarse de que el color aún esté maquillado. Entonces hazlo f f f f o blanco. Y a medida que les guardamos el tema cambia desde la noche de hoy, lo último que queremos es un apetito más grande. Por lo que vamos a aumentar el tamaño del barco 2 26 pixels. Genial. Tenemos un diseño de aplicación bastante limpio yendo por nosotros, avanzando ahora para que podamos seguir construyendo fuera de eso. Sigamos adelante 6. Busca de artistas: enganchemos un método de búsqueda a esta aplicación. Nuestro método de búsqueda por ahora simplemente registrará al cónsul cualquier tipo de usuario de texto dentro del campo de entrada. Recordemos que los campos de entrada en reaccionar tienen una función de no cambio que nos permite agarrar el contenido de valor objetivo de sus datos. Por lo que necesitamos configurar algún estado primero donde el usuario pueda controlar su cantera para buscar. Definamos un constructor ahora para esta clase. Recuerda pasar el argumento de los apoyos, y luego en la primera línea, siempre quieres súper apoyos. A continuación, declaremos el objeto estatal fuera de esta clase. Por ahora, tendremos una consulta clave, y ésta será lo que sea que el usuario escriba con campo de entrada. Vamos a ponerlo en una cadena vacía por ahora. Genial. No cambiemos la propiedad de valor de este campo de entrada a este no ST dot kwehr. Entonces justo debajo del marcador de posición, la consulta es igual a este punto estado dot queer impresionante. Y ahora podemos usar eso en función de cambio. Recuerda, teníamos un mango sobre variable de evento. Entonces simplemente configuramos el estado fuera de la consulta al valor objetivo de punto de evento. Impresionante. Ahora necesitamos alguna manera de probar si esto realmente está funcionando. Por ahora, enganchemos un método de búsqueda. Y luego en ese método de búsqueda, registremos el estado. Entonces es cónsul dot log. Diremos esto no estado en este estado de punto, así que sabemos a qué se refiere en realidad. Perfecto. Por último, tendremos que añadir la llamada al método de búsqueda real desde el botón. Haga clic. Entonces aquí mismo en el punto de grupo de entrada Agregar en esa función sat on click dentro de la etiqueta, y necesitamos usar la función de flecha anónima aquí. Llamas a esta búsqueda DOT y accidentalmente borrado que Adam por lo que ojalá deberían funcionar. Inspeccionemos lo propio. Y esto en lugar de decir Query realmente debería decir valor. Y aquí vamos. Busquemos un artista. Frank Sinatra. A lo mejor ahí vamos. El consultorio es Frank Sinatra. Una cosa final En la última aplicación, Countdown Champ tuvo el reto de agregar funcionalidad permitiendo al usuario enviar sus solicitudes pulsando el botón enter. Podemos lograr esta característica mediante el uso de la función de pulsación de tecla en el campo de entrada. De igual manera, toe on change necesitamos manejar aquí la variable de evento. Tenemos que revisar la propiedad de la clave del evento. Entonces sigamos adelante y consola Registra eso por ahora. Por lo que diremos en la pulsación de teclas es igual a manejar la variable de evento. Eso es cónsul dot log que incluso patito para no, solo para ver cómo se ve. Como digo como estoy aquí, el venti es un d f. Pero cuando presiono volver o entrar, incluso Burro es entrar. Por lo que ahora simplemente podemos llamar a la función de búsqueda. Si el evento Daki alguna vez iguala entrar, agreguemos esa lógica ahora, en una simple declaración if, necesitamos envolver todo el asunto abraza. Revisaremos si, si el hockey de eventos es igual para entrar y si es así, llamaría a esto no buscar. Busquemos. Frank Sinatra. Tampoco presione enter. Ahí vamos. Consolamos. No registres con este estado de inicio y sé que se llamó búsqueda porque eso es un concierto largo que estamos usando. Genial. Ahora que tenemos un método de búsqueda de trabajo, sigamos construyendo música Maestro 7. Preparar una petición de web: Tenemos un método de búsqueda enganchado a una abogacía, pero en realidad queremos que los métodos saquen algunos datos para agarrar una información sobre artistas usará el impresionante público de Spotify a p Voy adelante y llego a un nuevo navegador o Tad y buscar Spotify BP ¿Viste uno de los primeros enlaces como desarrollador Web API I Spotify? Desea encontrar su referencia de punto final bajo Web API I A p I n referencia de punto. Después encuentra la función de búsqueda. Como puedes ver, la búsqueda de un elemento en punto nos permite simplemente obtener información del catálogo de Spotify sobre artistas, pistas del álbum o lista de reproducción. Esa consulta mágica que la investigación. Por suerte, para usar esto y punto, no necesitamos una clave A P I para que podamos seguir adelante y solo copiar este enlace por ahora. dedo del pie ya. Empieza a usarla. No necesitas sacarte parte. Ve en paz dentro de tu función de búsqueda. Genial. Ahora vamos a declarar esto tuyo como base, estás fuera. Ahora vamos a explorar el Spotify a p I por unos momentos. Como se puede ver, tienen parámetros de consulta. A B ice normalmente tendrá parámetros para cada uno de sus puntos finales que nos permitan especificar el tipo de información que queremos. Si alguna vez has notado enlaces que usas, a veces tienes claves o palabras antes de signo desigual que se asigna a un valor que es un especificar la información exacta que la aplicación Web debe mostrar en la página y los puntos funcionan de la misma manera para una función de búsqueda de Spotify. Especificamos nuestra consulta o la palabra que estamos buscando usando el cuchi para que podamos usar Q igual a Frank Sinatra, por ejemplo. Entonces, declaremos un nuevo fetch. Tu, yo diré es igual a la base que estás fuera más que que igual. Sea cual sea el estado de nuestra consulta, también querremos aprovechar algunos parámetros más, por ejemplo, el tipo y el límite. También quiero tener nuestro tipo limitado a solo artistas, así que agrega un segundo parámetro. Necesitamos esto y firmarlo dirá tipo artista de la gente y un parámetro más son límite será un artista por ahora. Antes de que hagamos otra cosa, eso es cónsul dot log este fetch eres l para ver cómo se ve. Ya voy a ver. Ve y vuelve a navegar a tu aplicación y en realidad no necesitas aparatos ortopédicos. Ustedes probablemente captaron eso en referencia a la variable se ahorrará y se recargará. Y ahí todo está funcionando bien. Entonces busquemos a Frank Sinatra Ahora como veo esto, u R l Noté que falta una cosa antes de la señal Q. En realidad queremos tener un trabajo de preguntas. El signo de interrogación inicializar son parámetros de consulta a venir después, por lo que es muy importante. Ahora nos voy a salvar. Y busquemos una vez más a Frank Sinatra. Aquí tenemos nuestro real traerte, Earl. Ir al nuevo ataque del navegador. Pasa el ritmo y ahí vas. Aquí te dejamos mucha información sobre Frank Sinatra. Tiene externos tus l's, su número de seguidores géneros que hace algunas imágenes sobre él para que podamos tener algunos perfiles. Es este enorme objeto Jason que Spotify nos permite utilizar dentro de nuestra aplicación. Por último, antes de seguir adelante, podemos hacer este fetch. Todos sois código más conciso al aprovechar las cadenas de plantilla en Essex JavaScript lugar de usar signos más o más signos iguales más, más. Podemos mantener todo esto muy bonito en una cuerda envolviéndolo en garrapatas traseras. Entonces digamos en su lugar que tenemos todo esto en garrapatas traseras, y este personaje está justo al lado de la tecla unica del teclado y todas nuestras variables se envolverán. Los abrazos procedieron por un signo de dólar y, como puedes ver son variable ahora se resalta en un color diferente, y ahora ya no necesitamos el plus o la cotización funciona. Entonces aquí tenemos otra variable y ahora podemos deshacernos de esos personajes innecesarios. Entonces como puedes ver, el Essex nos permite tener cuerdas más concisas con cuerdas de plantilla. De verdad depende de ti tu preferencia usar la que sea. Pero solo sabes más y más Temple Strings empezarán a aparecer en el código de guión de trabajo que veas en el futuro. Vamos a probarlo todo una vez más. Voy a guardar esto. Vuelve a la aplicación React y busquemos en los Beatles. Aquí nuestra trae tu L para los Beatles. Ahí vamos. Tenemos otro objeto Jason. Son conocidos por invasión británica, rock clásico, remolacha Mercy, proto punk, psicodélico y rock grande. Todavía funciona, así que pasemos a la siguiente sección, donde realmente implementamos algún código para agarrar los datos en reaccionar 8. Fetching datos con una url: ya que creamos un trabajo Busca tu ayuda. El agarra datos sobre artistas de Spotify Eyes a p I. Simplemente necesitamos implementar el código que agarra esos datos dentro de nuestra aplicación de reaccionar. Podemos aprovechar los scripts Java de Essex. Fetch función que maneja solicitudes en JavaScript Coat, simplemente necesitamos especificar son Fetch Terrell como primer parámetro y luego un objeto como segundo parámetro respecto a una clave de método y el método que usará y dónde. Solicito nos ocupamos principalmente de los métodos de post y obtenemos métodos. Los métodos de publicación enviarán datos a una base de datos de un servidor o empresa, dependiendo de lo que el usuario proporcione en una página Web. No obstante, obtener solicitudes recuperan datos a través de la web, y nuestro Fetcher L es un ejemplo de ese método get. Entonces leamos el método con la función fetch. Por lo que primero especificará el cero de la Fed. Entonces nuestro segundo parámetro será ese objeto. Tendremos una clave de método y diremos get now. Estos datos por sí solos no demostrarán lo suficiente para agarrar el método fetch en JavaScript devuelve hasta promesa y una promesa en JavaScript es simplemente código devuelto por una función que representa datos que pueden tener disponibilidad ahora en el futuro o nunca hasta. En este caso, comprobaremos la promesa en lo que se denomina función de devolución de llamada en JavaScript con una función de flecha anónima. Entonces aquí está nuestra llamada. De vuelta en un entonces comunicado, tendremos respuesta. Variable. Y aquí viene nuestra función de flecha anónima, y por ahora, eso es consejo dot log esta respuesta para ver cómo se ve. Me pregunto si esto será suficiente. ¿ Está diciendo que se recarga? Y busquemos a los Beatles. Ahora aquí tenemos respuesta. Tenemos un euro. Eso es cierto, un estado que está Ok, entonces ciertamente conseguimos información y aquí está nuestro cuerpo, pero no se parece a lo que buscamos antes con nuestro enorme objeto Jason cuando escribimos nuestro endpoint. Eso se debe a que aún necesitamos envolver otra promesa. Tenemos que devolver la respuesta. Función de Jason a partir de esta variable promesa. Entonces tendremos otra declaración de abolladura en este tiempo. Eso es Cónsul Log the Jason que se devuelve a medida que guardo. Estoy pensando que buscaremos a Whitney. Úsalo. Es tu aquí. Tenemos un objeto artista, y ahí vamos. ¿ No luce esto como el objeto Jason que vimos antes con los seguidores Externos, Tu l es su I d. algunas imágenes. Genial. Acabamos de implementar fetch en Essex. JavaScript. Entonces ahora que agarramos datos en nuestro código, pasemos a construir un perfil con esta información. 9. Construir el perfil de artistas: con los datos de fetch de este Jason, podemos agregar el estado de gira de artista resultante para la aplicación porque limitamos nuestra solicitud a siempre un artista el objeto artista dentro de la J Song siempre solo tendrá un ítem en sus ítems. Clave del objeto del artista. Entonces cambiemos sus llaves para poder empezar a manipular al Jason en más de una línea y luego declaramos al artista como Jason. El artista, el componente cero ítems en ese derecho artículos. Pero consejo no anoten al artista por ahora para ver cómo se ve. Como dicen, la aplicación se recargará. Veamos un Bruno Mars, y aquí tenemos artista. Por lo que ahora simplemente podemos establecer el estado de nuestro artista a artista o usar una taquigrafía musical cuando la clave en el valor sea la misma. Y luego, claro, necesitaremos inicializar artistas para saber muy importante que lo tengas como no en el estado inicial. Entonces vamos a salvar y a los artistas y actualizar. Ahora queremos construir un perfil para este artista. Adelante en un componente de perfil a la fuente. Perfil de archivo totalmente nuevo dot gsx. Seguiremos adelante en el default reaccionar cocinado, por lo que es importación reaccionar y el componente de reaccionar para prepararnos antes de tiempo. Importemos en eso, dice. Vamos a extender nuestro componente en la clase de perfil Extiende componente Antes de hacer otra cosa , vamos a exportar este perfil como predeterminado. Ahora sigamos adelante y Orender Return cosida JSX por ahora con un diff que solo dice perfil. Nombra otro que diga seguidores de perfil. Lo siguiente que tenemos que hacer es reemplazar el JSX predeterminado que teníamos previamente para el perfil por el componente de perfil real que acabamos de crear. Importemos la prueba de desde perfil y parece que la mía funcionó enseguida. Ahora algunos de ustedes podrían conseguir un modelo de aire que falta. Entonces si eso te pasa, ve y vuelve a tu terminal para recargar el servidor. No, no estoy recibiendo el aire, pero estoy recibiendo una advertencia de que no estoy usando el perfil. Adelante y usémoslo. Y ahora y lo siguiente lo voy a hacer. Simplemente argumentar al perfil tiene apoyos artista apoyos del estado del artista cool, así como eso guarda la advertencia desaparece, voy a perfil de seguidores de perfil, que es lo que especificamos aquí y en nuestro método de render. Vamos a seguir adelante y Orender este stop cosecha para que podamos ver si el artista real está ahí cuando nos sometemos antes. Está bien, así que aquí tenemos en nuestros apoyos, artista es no. Pero en cuanto miro completamente a Bruno Mars, vemos que el artista no se sabe que tenemos un objeto completo con nuestros artistas. Información. Genial. Entonces por ahora voy a declarar un objeto artista. Voy a decir que su nombre está en blanco y tiene un recuento de seguidores de un total que es Blake. Y luego, si alguna vez no se conoce este artista de utilería, vamos a seguir adelante y cambiar del artista a la bolsa de utilería artista. Entonces, esencialmente, ¿qué está pasando aquí? Artista suele ser no en apuntalado, pero tan pronto como Render vea que el nuestro no es no, en otras palabras, que tenga datos en utilería. Vamos a cambiar su artista inicial a ese artista de utilería y ahora podemos cambiar esto a los artistas por defecto No nombrar en este al artista por defecto up seguidores tomaron Let's save. Saquemos esta parte aquí mismo. No, buscaremos a Bruno Mars y luego en cuanto no se sepa, vemos a Bruno Mars aparecer como nombre y luego su número de seguidores parece que está alrededor 5,300,000. Entonces no es gran cosa. Probablemente tenga que hacerlo, pero dame un par de meses y llegar al mismo número. Tan genial, tenemos algo de información básica abajo, así que sigamos expandiendo sobre este perfil en la siguiente porción y que se vea bien. 10. Estilizar nuevos componentes con CSS: vamos a expandir sobre el componente de perfil. Queremos incluir una imagen de perfil. Por supuesto. Bloqueemos el nombre, como era una cuenta de seguimiento, y luego también añadiremos una lista de sus géneros. Antes de hacerlo, sin embargo, podemos acortar lo anterior. If declaración con expresión Turner. Simplemente comprobemos. El artista no lo ha sabido. Si no lo es, lo enviaremos a esto. Detener apoyos al artista. De lo contrario lo tendremos como serio en sí mismo. Podemos acortarlo aún más sacando todo este objeto reemplazándolo por el artista aquí. Pero siento que una línea sería demasiado larga, y en realidad se ve más simple con estas dos líneas por aquí. Ahora nos encargaremos de tener una imagen de perfil. Entonces, una vez más, busquemos usuario o artista. Bruno Mars. Podríamos ver una de sus imágenes de perfil yendo a imágenes en el primer objeto, y que tú eras. Queremos seguir siempre el patrón que te proveen en en el objeto Jason. Entonces de esa manera es más simple porque ese es un patrón que estamos usando. Entonces las imágenes no es array y luego sombreros, objetos, así que inicializamos aquí un objeto vacío y luego tenemos una Europa que ahora es anti. Por lo que ahora podemos aprovechar eso al tener una imagen por aquí con una imagen regular. HTML o simplemente extraer imágenes y JSX siempre tienen una alterna en caso de que sea, ninguna imagen proporcionada para alterna será perfil. Vamos a darle un nombre de clase para que podamos dar su propio estilo más adelante de imagen de perfil . Y entonces nuestra fuente serán las imágenes de punto de artista y el objeto cero y eres tú. Entonces es seguro. Volvamos a mirar hacia arriba a Bruno Mars y que hay una imagen gigante de Bruno Mars. Por lo que obviamente, todavía necesitamos agregar un poco de estilo a esto. No obstante, pasemos a crear el componente del género. Ahora el género actúa como bien. Es una lista, así que alguien tendrá que mapear sobre la matriz de Jonás a tan fácil elemento de género dentro de ella. Entonces, géneros, como pueden ver, está en un naufragio. Declaremos aquí una matriz vacía dentro de nuestro objeto inicial, y luego tendremos que mapear sobre el género dentro de esa función. Por suerte, los barcos JavaScript de la función mate para un aumento que nos permite mapear sobre él por ahora simplemente mapearán sobre cada género con una función de era anónima. Envolverán el género dentro de un lapso, solo extraerán para ver cómo se ve. No se define a los donantes. Eso es porque queremos artista salta géneros. Entonces es como alguien más. El trato. Ahí hay una imagen gigante de ellos otra vez, y la razón no está apareciendo en este momento es que nos olvidamos incluso devolver el sexo J. Es igual que el método render necesita para devolver el sexo J. La función de mapa también necesita devolver el JSX como lo indica este aire aquí mismo, se espera que devuelva un valor en esta función. Entonces mientras ahorras, probemos de nuevo a los Beatles. Impresionante. Aquí puedes ver todos sus géneros no necesitan mirar aún. Y aquí tenemos una advertencia. Cada niño, en un aireador de rareza, debe tener una propiedad clave única, por lo que están esperando que cada clave o cada etiqueta span tenga una determinada propiedad. obstante, no necesariamente podemos saber que todos los géneros se airen únicos por lo que no se puede tener el género como justo género, sin embargo pero afortunadamente, incluso esa función viene con la sección argumento opcional del índice y podríamos nombrar esto cualquier cosa que queramos que nos llamen Index Key o una lo llamaremos K para abreviar. Entonces tendremos la llave a su patada. Lo guardaremos recargas. Busquemos una vez más a los Beatles y ahí vamos. Esa advertencia desaparece ahora. Obviamente queremos algo de espaciado entre aquí, y probablemente queramos algunas comas para. obstante, no queremos que aparezca una coma al final de la lista, por lo que no podemos simplemente hacer un espacio en un común aquí. Para solucionarlo, vamos a necesitar usar la expresión de paternidad para comprobar si el género no es el último elemento dentro de la matriz. Porque si no lo es, vamos a añadir una coma. No obstante, si lo es, no vamos a sumar pareja. Simplemente añadiremos un espacio para que sea un género igual Vamos a comprobar si el género no es el último de la lista. Entonces encuentra el último valor de índice. Estamos encontrando el último valor del índice simplemente mirando la longitud menos uno, que siempre será el último valor del índice. Entonces no es el último siguiente valor bien, en un espacio con el género. Aquí viene nuestro encogimiento de plantilla lo tenía comin. De lo contrario, simplemente tendremos y declaración para nuestro último en el género mismo. Y veamos cómo se ve eso. Por lo que los géneros no están definidos. Una vez más, queremos artista dot géneros un artista. Aquí honra holandeses. Entonces busquemos a los Beatles y el aire del género en realidad luciendo bastante bonito. Entonces agreguemos un poco de estilo a todo esto. Vamos a seguir adelante y envolver toda esta información de texto dentro de una tive separada. Nombrará Miss Ttive Perfil info. Demos a cada uno de estos nombres de clase también, por lo que éste será nombre profundo. Este serán seguidores de perfil, y éste será perfil géneros pro file. Y ahora podemos empezar a abordar el CSS. Añadamos una nueva sección para perfil y presiono comando Slash para hacer eso. Automática comentando nuestra imagen de perfil. Lo primero que vamos a hacer es agregar una pantalla de flex para nuestra venta. Vamos a aprovechar el flex. Nos permite asignar porciones de la pantalla a ciertos elementos para que puedan expandirse en relación entre sí en función de sus números de flex y preocupación de diferentes tamaños y formas de dispositivos . También permite una alineación muy simple en cuanto a ejes controlados por el just by content , property y align items property respectivamente. Por lo que es realmente fácil centrar las cosas. Entonces veamos cómo funciona el flex cuando cambiamos tu perfil. Por lo que tenemos un flex de pantalla solo por contenido, todo al centro. Una imagen de perfil, por supuesto, es demasiado grande. Pero podemos arreglarlo asignando un dentro de la altura, y por ahora lo haremos 150 píxeles. También como darle una frontera a las cosas para que destaque. Esta es una preferencia personal mía, pero puedes seguir adelante y usar una diferente lo hará blanco o un texto. Un equivalente decimal, que es F f f y el radio del borde, ya que quiero ser un círculo será exactamente la mitad del dentro de la altura. Entonces enviando cinco píxeles y luego haremos que su objeto se ajuste a cubrir. Por lo que de esa manera se ve bien como imagen. Entonces yo, los Beatles y miren que ya está empezando a lucir realmente bien. Sólo tenemos que volar este texto por aquí. Cambiemos el nombre del perfil hará que su tamaño de fuente sea más grande y se incrementará a 26 píxeles . También, los seguidores del perfil. Yo quería tener un tamaño de teléfono decente no tan grande como el nombre, pero aún significativo. Digamos que 18 píxeles así como los géneros tendrán un tamaño de 18 píxeles para asegurarme de deletrear las cosas bien y perfilar los géneros. Ahí vamos. Eso son 40 luciendo mucho mejor. Lo último que quiero hacer es básicamente centro. Toda esta información de perfil un poco mejor, así que vamos a ir a la etiqueta de info del perfil. Entonces mientras estoy abriendo el perfil, Info simplemente le dará un margen a la izquierda de 10 píxeles porque vamos a enviar mensajes de texto, alinear todo a la izquierda y no queremos que toque el perfil, y eso se ve bien. Ahora. Lo siguiente que quieres hacer es que queremos asegurarnos de que esto tenga seguidores. Simplemente parece un número aleatorio por ahora. Así fue diciendo seguidores por aquí. Una vez más, busquemos a los Beatles y cool. Tenemos un perfil de muy buen aspecto por ahora. Sigamos adelante 11. Ampliar la necesidad de la fetch: Ya que tenemos un componente de perfil de trabajo, vamos a extender esta información de artista agarrando una lista de sus temas más populares y haciéndolos reproducibles. Antes de hacer eso, sin embargo, podemos cambiar un poco nuestro código por algunas correcciones de interfaz de usuario y solo para hacerlo más legible. En primer lugar, reformemos en algunos de nuestro código en perfil Sexo Dajae con el fin de que sea más limpio. Voy a inventar esto porque se ve bastante grande en línea, como siempre, mi expresión urinaria. Voy a poner este signo de interrogación alineado con el Check de igualdad, y eso ya se ve mejor. Vamos a su cara tras los seguidores ante los seguidores y enfriar ahora con una app dot jsx . No quiero ver esta plantilla ing antes de que ni siquiera buscara nada por lo que lo temporalmente se hará en el perfil y en la galería. Coloquemos eso dentro de aquí, y entonces no lo mostraremos hasta que el Estado del artista no lo esté. No, así que no se sabe vamos a mostrar el perfil. Si es No, demostraremos que sí. Eso no tiene nada con él. Vamos a ahorrar. Aquí está la cosa de las dibs posteriores que necesitamos envolvernos a Dave dentro de la otra o dentro de otra muerte. Entonces de esa manera no tenemos reaccionar quejándonos. Y a medida que ahorramos, todo está bien. Entonces ahora, mientras busco a un artista como Bruno Mars, el template ing no aparece hasta que el artista sea válido. Enfriar. Ahora podemos pasar a buscar a un artista. Top tracks. Volvamos al perfil y también dentro de otro navegador o pestaña. Navega de nuevo a la Spotify a p I. Esta vez vamos a querer la información del Spotify en la sección de artistas. Se quiere financiar en punto que dice, consiguiendo pistas top de artista. Entonces lo que un P I consiguiendo artista Top trekks. Como puedes ver, el punto final funciona de manera bastante simple, igual que antes. Necesitamos usar un http get requests con el fin de agarrar los datos formateados Jason para un artista . Top tracks dentro de nuestro l Simplemente especificamos el I D de artistas que nos gustaría obtener, así que va a copiar este endpoint por aquí. Acude a tu función de búsqueda. Patela como el disco que eras. Yo lo voy a llamar Alba Mural Constante. Fue. Saca el extremo por aquí, así que sólo sube a la sección de artistas ahora. Por suerte, cuando declaramos artistas por aquí, ya tiene una propiedad I. D por lo que podemos aprovechar eso para buscar sus mejores tracks. Entonces, no, podemos modificar esta apuesta fuiste l para buscar algunos álbumes. Tendremos otra vez una propina dando conferencias. Nuestro 1er 1 será álbum Euro slash luego el artista que yo d Entonces queremos terminar tu fuerza dirán pistas top. Y luego finalmente, la última parte necesaria es el código de país. Y por ahora, solo podemos usar la U. S. Y la razón por la que se requiere es porque Spotify y hace que se requiera. Entonces si estás fuera de nosotros o quieres recibir solicitudes de un país diferente, adelante y haz clic en este enlace de aquí. Vincula a un artículo de Wikipedia. ¿ Dónde tiene todos los códigos de país relevantes? ¿ Ahora? Simplemente necesitamos usar la función de búsqueda si todo el mismo patrón que antes, de Promise una promesa de devolver el Jason que necesitamos. Entonces vamos a buscar en el fetch cero. Nuestro método, por supuesto, es todavía y luego le devolveremos una respuesta, y básicamente estamos declarando la variable. Y luego regresaremos el Jason que queremos. Esperemos que estos sean los artistas, artistas, top tracks y Jason. Entonces vamos a comprobar si esto realmente funciona. Volvamos a reaccionar aplicación en nuestro quinto año. Yo recuerdo declaramos como una constante Bueno, ya que lo volvemos a declarar, debemos declarar un let. Entonces de esa manera es modificable. Es recarga. Busquemos a Bruno Mars. Y como podemos ver con esto fetch zero. Añadí una barra extra aquí, así que saquemos esta barra ustedes probablemente lo cogieron. Probemos una vez más. Bruno Marte y genial. Parece que tenemos algunas pistas de primera y aquí están todas. Tienen una vista previa y yo d La mejor parte es, tiene un objeto de álbum donde podemos encontrar algunos archivos reproducibles. Tan genial ahora que tenemos pistas de registro, preparémonos y dijimos esas pista a estado así que dejemos pistas Más bien, Const. Pistas es igual a Jason Tracks y separemos estado de las pistas. Dos pistas. Recuerda, podemos usar alguna taquigrafía teísta. Fue en la caja fuerte dos vías, claro. Él quiere que inicialices pistas a una anti violación y luego Finalmente, aquí hay otro truco de seis años cuando el nombre de la variable y la clave a la que queremos acceder dentro de una función u objeto es exactamente lo mismo. Podemos simplemente ver aquí que pistas es igual a Jason Now. Esto se vuelve especialmente útil cuando estás declarando múltiples variables a la vez cuando estás tratando de agarrar múltiples claves de un objeto. Entonces, por ejemplo, si tuviera canciones y álbumes artista aquí y Jason tuviera cada una de esas claves, declararíamos las tres de estas variables a la vez. Sólo estamos recibiendo uno, sin embargo, así que digamos que las pistas ahorran. Busca a los Beatles para variar. Entonces como todo está funcionando, podemos pasar a crear una galería para todos estos temas y,por supuesto, por supuesto, eventualmente haciéndolos jugables. 12. Crear una galería: tenemos pistas Interestatal para la aplicación. Por lo tanto, podemos pasarlos a un nuevo componente que maneja renderizarlos. Llamaremos a este componente nuestro componente de galería. Vamos a crear un nuevo archivo de galería dot JSX dentro de nuestra carpeta fuente galería dot jsx. Ahora vamos a tener el código de componente por defecto de reaccionar y seguir el mismo patrón que tenemos nuestros componentes antes de importar reaccionar y el componente de reaccionar, vamos a importar en punto CSS. Declararemos la clase de galería y extenderemos componente. Por supuesto, exportaremos la galería por defecto como su componente predeterminado. Ahora es renderizar en la pantalla y devolver lo que JSX necesitemos para No, vamos a hacer una galería hizo y luego también consejo dot log los apoyos de la galería. Enfriar. Vamos a incluir la galería ahora después del perfil Importar galería desde y asegurarnos de hacerlo en la cadena desde Gallery. Vamos a reemplazar eso no con nuestra galería real y digamos que queremos que las pistas se pasen como apoyos a través de este estado de aplicación. Aquí vamos. Busquemos a un artista. ¿ Qué tal Billie Joe? Por lo que apoyos de galería. Vemos algunas pistas y ahí vamos, y también me estoy dando cuenta de algún estilo. A veces te aprisionen, así que arreglemos eso ahora mismo. Una solución fácil es ir a la info del perfil. Darle un flex, explique. Por lo que de esa manera siempre tiene cierto dimensionamiento. Ahí vamos. Pero ahora esto lo hace en por un poco cuadrada. Tenemos que cambiar la dirección del flex ahora a Collender, porque es fila por defecto, que se alinea al revés. Por último, consideramos las cosas un poco mejor con el contenido justificado del centro. Agradable. Volvamos al componente de galera ahora, ya que tenemos apoyos anhelando por nosotros con el fin de renderizar todos estos apoyos en array, tuvimos que aprovechar de nuevo la función de mapa JavaScript. En primer lugar, pongamos una constante de pistas igual a esto arriba. Apoyos que rastrea Recuerda el truco de Essex que aprendimos de la última vez. Podemos acortar esto simplemente haciendo pistas dentro de algunos aparatos ortopédicos, lo configuró a este tope de apoyos. Esto será útil si tuviéramos otras claves y variables a las que queríamos acceder como apoyos y declarar en una línea. Ahora podemos mapear sobre las vías y lo podemos hacer una pista a la vez. Nos aseguraremos de tener nuestro índice como K o listo, usamos esa flecha anónima funciones en impuestos. Por ahora, volvamos en general, Dave con llave. OK, es clase. El nombre será Trek. Entonces tendremos una imagen en el interior. Ahora, con un auto en etiqueta de cierre, su fuente será imagen de pista. También le dará un nombre de clase de imagen track dash. Un alterno de pista. No obstante, necesitamos declarar esta imagen de pista. Ahora. Diré que la imagen franca costo es igual a track dot album Las imágenes Primer elemento no el tuyo. Ahora, antes de guardar esto, recuerda, necesitamos devolver todo este JSX dentro de la función de mapa, pesar de que ya lo estamos devolviendo aquí pero en la función render, porque esto declara un habilidad completamente nueva avanzando. También queremos el nombre de la propiedad. Declaremos una etiqueta P para párrafo. El nombre de la clase será texto Trek y luego accederemos al nombre de la pista. Muy bien, vamos a probarlo, tener un Bruno Mars de nuevo, y mirar todas estas pistas tan enormes que definitivamente podríamos darle estilo un poco mejor a estas. Por lo que es head toe app dot CSS para algunos cambios de estilo. Ahora estamos en los componentes de la galera Voy a hacer comando slash para comentar o rastrear. Va a tener un poco de estilo. En primer lugar fueron cambiar el con 2 220 píxeles así como una altura. ¿ Tenías menos de 20 píxeles? Le daremos un borde de tres píxeles, sólido y blanco, que es F F F y Hexi decimal. Le daremos un radio de frontera justo alrededor de las cosas. Un poco de tres píxeles. Le daremos algo de relleno de 10 pixeles. Alineemos todo su texto a la izquierda. Aquí te dejamos una característica ordenada más adelante una para que se pueda hacer clic. Entonces en un componente de cursor de Pointer ahora nuestra imagen de pista, todavía va a ser tan grande. Yo sólo quería ser tan grande como la pista. Por lo que heredará el mismo ancho y altura. Haz que ambos sean 220 píxeles de ancho y 2020 píxeles. Tono. Esta tendrá la misma frontera. Las tres púas sólidas. Espera, es radio de borde será de tres píxeles. Curso lo hará objeto. Recogido para cubrir, por lo que se ve bien y su posición será absoluta antes de seguir adelante. Hagamos que todas estas pistas sean relativas para que se alineen de lado a lado, así que se ve bien. Nuestro trek necesita tener una pantalla de bloque en línea que se vea bastante bien, y las cosas están un poco fuera del centro de gancho. Bueno, en lugar de tener una palmadita en el interior, realidad vamos a darle un margen en el exterior. Por lo que las cosas al aire se centraron y espaciaron. Además, no estoy seguro si necesitan un radio de frontera en el exterior para la pista, en realidad, realidad, mucho menos la frontera, y eso en realidad se ve perfecto. Enfriar. Creo que también responde, así que sigamos adelante y redimensionemos. Y ahí tienes. Se pueden ver todas sus huellas. Agradable. Encontremos a un artista con algunas portadas de álbumes más oscuras como Michael Jackson. Ahí, ese fondo blanco se ve realmente bien. Ahora vamos a cuidar el texto de la pista. Queremos ver el nombre de la misma. Por supuesto, texto de pista corta. Tendremos un color de fondo de negro el color del blanco, y lo que vamos a hacer es que vamos a mostrar el texto sobre la imagen con un rectángulo negro detrás de ella. Por lo que de esa manera se levanta que la fila trasera necesita un 75% de capacidad con de 220 píxeles y lo que lleva una línea al centro. Y así aparece sobre las pistas relativas hará que su posición sea absoluta. A ver si esto está lo suficientemente cerca Ahora se ve bastante bien. Es un poco demasiado Por qué, aunque no quiero que cubra toda la frontera. Entonces si lo haces 214 sin duda es más pequeño, pero necesitamos darle un margen a la izquierda. Entonces de esa manera en realidad está centrada de tres píxeles. Dulce y luego quiero que esto no sea en la parte superior en la parte inferior. Entonces cuando dije que es alineación de fondo a cero Genial, eso se ve mejor. De nuevo el señor Bruno Mars solo para ver cómo luce el suyo. Muy cool. Muy bien, eso fue mucho CSS. Una cosa más cuando sólo nos damos algo de relleno para que podamos ver eso dirigiendo un poco mejor. Está bien, eso se ve bastante bonito. Pasemos a hacer realmente estas pistas jugables 13. Reproducción de audio con JavaScript: Ahora que tenemos todas nuestras pistas renderizando en la pantalla, hagámoslas realmente jugables. En primer lugar, quitemos este registro de puntos del consejo para la galería. Desplumado en su lugar. Vamos a la consola iniciar sesión en cada pista. Consulta su contenido para consejo dot log track track. Guardemos la búsqueda de un nuevo artista o el mismo. Hemos estado buscando chicos brutales, y, como pueden ver aquí, cada pista tiene un adelanto fuera. Este es en realidad un archivo de sonido que podemos previsualizar recorriendo el enlace. Como puedes ver, cada pista viene con su propio Sur. Ahora podemos aprovechar JavaScript audio object toe, en realidad reproducir la mordida de sonido de nuestra aplicación. Todo lo que necesitamos hacer es declarar un nuevo objeto de audio, argumentó. El adelanto está fuera como primer argumento. Vamos a crear un nuevo método de ayuda dentro de nuestra clase de galería. Llamaremos a esta plaga audio, y tendremos un argumento, que es la vista previa tu más. Declaremos un nuevo objeto audio Audio Capital audio, argumentó. El adelanto u R L como el constructo. Entonces simplemente llamaremos audio dot play. Ah, vamos a adjuntar este método dos. Siempre que el usuario haga clic en una de las pistas. Recuerda, necesitamos usar una función de época anónima. Llamamos a esto no reproducir audio en las pistas. Vista previa. Tú estabas fuera. Veamos si esto funciona como una recarga de ahorro. Es como un Bruno una vez más. Vamos a revisar por Sochi en el piso. ¡ Impresionante! Tenemos sonido yendo, pero sólo se detuvo porque silencié mi sistema. Entonces pensemos en pausar y volver a reproducir en el siguiente video. 14. Despausar un pista: Ahora que tenemos pistas reproducibles, deberíamos poder pas um, en caso de que un usuario quisiera tocar una pista diferente o simplemente impedir que la pista actual admita sonido. En primer lugar, vamos a implementar el cambio de jugar lo tuyo para que siempre tengamos uno activo jugando tu L en estado como jugando tu salud. Entonces agreguemos un constructor aquí. Ya que ahora necesitamos estado dentro de nuestra galería, Vamos a despejar nuestro objeto estatal y diremos que están tocando tu L en este momento es una cuerda vacía . Genial. Ahora necesitamos reconocer realmente si estamos jugando a algo. Cuando presionamos en un camión se mantendrá un seguimiento así del objeto de audio actualmente en estado. Entonces es un audio ahora mismo es no. Además, tendremos que comprobar si algo realmente está jugando. Así que ten una mosca de juego. Y, por supuesto, al principio, nada está jugando, así que jugar es falso. En primer lugar, comprobaremos si actualmente no hay nada jugando, porque si no hay nada jugando, lo primero que queremos hacer es jugar el contigo. Quitemos esa primera reproducción de audio, después queremos actualizar algún estado. Diremos eso Bueno, ahora en realidad estamos haciendo algo para que la mosca del avión sea enviada a la verdad. Bueno, dijo la jugada actual Estás fuera al año anterior. L en argumento, y luego estableceremos el objeto de audio actual a este objeto de audio. Recuerda, estoy usando la taquigrafía de Essex. De lo contrario, podemos suponer que ya se está reproduciendo el audio. Hay dos escenarios a considerar. Queremos evitar que se reproduzca el mismo audio o queremos cambiar el audio. Entonces si la vista previa o L es igual al estado del avión, tu l, podemos suponer que debemos pausar el audio. El audio se almacena bajo este pensamiento. Explique ese audio. Entonces usemos una función pas en este inicio. Se quedó el audio y luego bien, dijo el estado tocando Es un falso De lo contrario, En este caso, simplemente estamos deteniendo el audio actual y luego tocando el siguiente. Entonces detendremos el audio actual pausándolo, reproducimos el siguiente, y luego actualizaremos el estado también. Por lo que estamos cambiando nuestra jugada Tu adelanto de Alatorre. Tu juego de l ahora es cierto, por supuesto, y luego de nuevo, estamos enviando nuestro objeto de audio. Cambiemos de orden esto para que coincida con lo anterior ahorraría. Agregamos alguna nueva lógica. Entonces vamos a probarlo. A ver si todavía juega y lo hace. ¿ Podemos detenerlo? Y ahí vamos. Es una pausa. Aquí hay otro. Entonces, ¿y si cambiamos de inmediato? Genial. Parece que todo está funcionando. Entonces ahora que tenemos funcionalidad completa de pausa y conmutación, solo agreguemos algunas animaciones a la aplicación y algún estilo para empatar todo el asunto . 15. Styling animado: nunca tuvimos pausa, reproducción y parada de audio. Se sentiría bien para el usuario tener más comentarios sobre la funcionalidad exacta de cada pista ya que está subiendo icono de proceso pasando sobre cada pista sin una característica realmente agradable , también, también, para que cada pista sea reproducible. ¿ Y por qué no arrojado en animación para que la aplicación sea aún más dinámica? Hagámoslo ahora. Tenemos que añadir un div extra dentro de la pista. Este Dave se llamará Plano de pista. Envolveremos otro DIV en el interior. Este se llamará cena track plate, y luego proporcionaremos un icono Unicode corto por ahora de un tiene 9654 que esencialmente se parece a un botón de reproducción de triángulo recto. Genial. no aparecerá nada porque aún necesitamos editar la app CSS. Vamos a seguir adelante y abordar la posición del track play será absoluta y tener un con de 220 píxeles y altura de dos de los 20 pixeles, igual que la imagen y la pista. Atractivamente interior también tuvo una posición absoluta, y esto está controlando el triángulo que vamos a ver más adelante. Vamos a alinear todo al centro. Entonces así está en el centro, son divertidos. El tamaño será un poco más grande. No queremos un ícono pequeño, y van a dar un BRAC de vuelta alrededor de color porque tenemos un círculo negro encerrado nuestro triángulo. El radio de borde de ese triángulo será de 30 píxeles porque el ancho y la altura serán ambos 60 encurtidos finalmente hacen su color blanco. Le daremos algo de relleno superior de 13 píxeles, y luego necesitamos darle algunos márgenes. Por lo que de esa manera sigue centrada de 80 píxeles en un margen superior de 80 píxeles. Por lo que eso debería ser suficiente por ahora para conseguir un botón de reproducción que se muestre en la pantalla. Por lo que alinear el texto. Tenemos que precisar que se centre. Ustedes probablemente lo pillaron mientras yo estaba codificando para ustedes. A ver a Bruno Mars Y ahí vamos. Tenemos un botón de juego ahora. No siempre queríamos aparecer. Probablemente solo queríamos aparecer cada vez que pasáramos sobre el L. Así que por ahora estableceremos la capacidad a cero. Así que sea alto el elemento. No obstante, cuando volemos sobre el Omen, haremos la opacidad. ¿ Hay señalando? A ver cómo se ve eso. Entonces si floto, ahí aparece. Pero podemos aprovechar una característica CSS de tres fotogramas clave de animación con el fin de agregar un poco de llamada civil desvanecida. A marcos clave se desvanecen en el futuro. Es muy sencillo. Todo lo que hicimos es declarar una clave de sintaxis de aspecto de objeto y tener un ir de cero opacidad a capacidad es tu señalador. Y ahora podemos precisar. El nombre de la animación para este componente de desplazamiento se desvanece como declaraste aquí. Pero entonces necesitamos darle a esta animación duración o cantidad de tiempo que envió aquí en la pantalla. Diremos medio segundo y lo revisaremos aquí. No nos hemos desvanecido en la pantalla. Hay una cosa más. Si toco pista, vale, no deberíamos poder ver más el botón de reproducción. Deberíamos ver un botón de pausa para poder agregar esa funcionalidad. Ahora. Bastante sencillamente, tendremos una expresión de Turner por aquí y simplemente comprueba si el estado del avión fuiste de ayuda. Es Eagle para rastrear el adelanto de Europa. Si lo es, entonces podemos suponer que necesitamos pausar el pero. Y un botón de pausa implícitamente parecía dos barras verticales, que es el personaje justo al lado de los corchetes. De lo contrario, tendremos nuestro playbook normal, que terminan el hash. 9654 Y una cosa más. Este texto por sí solo no funcionará. Tenemos que envolverlos dentro de las etiquetas span, así que gastamos negociamos olvidaremos que el tiempo extra de cierre ahorraría y comprobaría una vez más como se recarga un JSX. Así que echa un vistazo. Jugaremos ahora. Es posible que jueguemos encerrados fuera del cielo. Tenemos que posit y genial. Eso se ve realmente bonito. Entonces con eso, habíamos terminado de construir música Maestro. Excelente trabajo, y tenemos una aplicación bastante divertida en sus manos. Tengo que decir que aprendimos todo sobre buscar solicitudes en reaccionar y cómo manejar datos a través de la Web también. Algunos conceptos nuevos con codificación Essex y CS cuenta con tres animaciones en las siguientes secciones combinarán nuestros conocimientos de React con la Biblioteca Redux con el fin de mejorar el diseño de nuestras aplicaciones. También dentro de la siguiente porción se encontrará un resumen de esta aplicación y de los conceptos que aprendimos así como algunos retos. Si quieres seguir extendiéndote sobre él, trabajo impresionante. Mantengamos Cody