Muy buenas a todos y a todas, seguimos hoy con el curso de Svelte 10.
Si estás entrando ahora en este vídeo de repente, no te preocupes porque te dejo aquí un enlace con una lista de reproducción con todos los vídeos del curso.
Desde la introducción, cómo crear el proyecto, componentes, renderizado condicional, el estado inferido, un montón de cosas.
Y si ya lo has visto todo y estás al día, pues quédate que hoy vamos a ver cómo podemos renderizar listas de elementos con Svelte.
Bueno, vamos a retomar nuestro proyecto de buscador de películas.
Vamos a recordar, tengo ya el entorno de desarrollo en el puerto 5000 que ya está abierto.
En los anteriores vídeos vimos cómo lo podíamos hacer y este es el proyecto.
Ahora mismo podemos buscar una película, por ejemplo Death Note, y nos dice el número de películas que tenemos.
Pero con un número, esto no parece que sea muy interesante, así que lo que vamos a hacer es que nos muestre las películas en sí.
Vamos a volver aquí al input. Aquí es donde teníamos la lógica del renderizado condicional que vimos en la clase anterior, que si estaba cargando mostrábamos el loading, que si teníamos resultados poníamos, tenemos 10 películas, el número de películas.
Y si no hay resultados, pues decíamos que no teníamos resultados. A ver si ponemos esto, no hay resultados. Perfecto.
Ahora lo que quiero es listar las películas. Así que lo que vamos a hacer aquí es utilizar la sintaxis de Itch.
Igual que tenemos una sintaxis para el If, tenemos una que es Itch. Así que lo que vamos a hacer es abrir las llaves y utilizar la almohadilla Itch.
Para cada película que tenemos el response, se diría Itch, response, as, movie, y esto lo cerraríamos con un barra Itch. Así que dentro es donde vamos a poder iterar cada uno de los elementos que tenemos en la lista de response.
¿Qué vamos a hacer? Pues si no recuerdo mal, teníamos el title. Así que lo que podemos empezar ahora por ver algo sería poner un movie.title.
Y hay que evaluarlo, ¿vale? Hay que poner las llaves. Importante, que no se nos olvide.
Ahora, ya no quiero poner el número de películas aquí. Vamos a ponerlo encima.
Y además, todo esto vamos a ponerlo en un div para que tenga un espacio.
Así que ponemos aquí que tenemos tantas películas. Hacemos este Itch aquí.
Y vamos a ver... Igual mucho strong, estoy viendo aquí, ¿no? Mucho strong.
Vamos a dejar un H3, porque ya que es el título, es importante.
Guardamos los cambios y vamos a buscar ahora Death Note.
¿Vale? Pues ya tenemos ahí todos los títulos de la película.
Ya estamos listando correctamente las películas.
Ahora, este title no es que salga de la nada, sino que si miramos aquí y abro las herramientas de desarrollo
y ponemos aquí una película, vamos a poner Matrix.
Si miramos en el Nickwork y miramos la llamada que ha hecho y lo que nos ha devuelto esto,
podemos ver que dentro de Search teníamos el title, tenemos el año, el IMDB, ID, el tipo y un póster.
Eso es interesante, tener un póster. Así podemos poner una imagen.
De hecho, ya lo podemos poner aquí. Podemos poner la imagen, que esto sea movie.poster.
Y el alt, que sea, pues justamente el título de la película.
Y todo esto, pues vamos a envolverlo en un article para que quede un poquito mejor.
Esto lo vamos a intentar correctamente.
Guardamos los cambios. Voy a cerrar esto por aquí.
Y ahora a ver qué película podríamos buscar, pues, Guardians.
¿Vale? Bueno, bueno, Guardians de la Galaxia.
Perfecto, ya tenemos la imagen y además tenemos el título.
Podríamos empezar a sacar otra información que teníamos.
Creo que el año era otra. Voy a añadir el año rápidamente,
porque me parece que puede ser interesante.
Guardamos los cambios. Y aquí, pues nada, ponemos Guardians otra vez.
Ya tenemos aquí el año. Perfecto.
Ahora, hasta aquí bien, pero podemos ver que aquí,
cada vez que digo que por cada película que tenemos dentro en response,
pues lo que estoy haciendo es movie.title, movie.year, movie.poster.
Esto se puede simplificar y podemos hacer una desestructuración.
Podemos utilizar la sintaxis que tiene JavaScript para simplificar esto
y no tener que utilizar el objeto. Así que podremos utilizar cualquier tipo
de desestructuración, igual que haríamos en JavaScript.
Por ejemplo, si sabemos que tenemos el title, el poster y el year,
utilizaríamos las llaves para extraer estas propiedades directamente del objeto.
Así, de esta forma, ahora no sería movie.poster,
sino que podríamos eliminar el movie y ya nos referiríamos a cómo lo estamos
capturando en el mismo itch, en esta sintaxis que tenemos aquí.
Así que ahora, si ponemos Matrix, pues funcionaría exactamente igual.
Una cosa que es interesante, y de hecho esta app es un poco extraña,
porque nos devuelve las propiedades con una mayúscula al principio,
es que podríamos al vuelo cambiarle el nombre.
Por ejemplo, al title podríamos poner que sea movie title.
Lo que le estamos diciendo aquí es la propiedad title,
que tiene en el elemento del response, a esta propiedad le vamos a cambiar el nombre
y le vamos a referir a esa propiedad con movie title.
Y así, en lugar de title, si yo ahora guardo esto, pues no funcionaría,
porque ya no puedo utilizar...
Esto está reventando por algún lado, ¿vale?
Dice title is not defined. ¿Por qué?
Porque le hemos cambiado el nombre.
Entonces ahora, este title que tenemos aquí no es title,
es movie title, ya no es con una mayúscula.
Esto es interesante porque hay veces que hay nombres que pueden quedar un poco raros
y nos gustaría adaptarlo.
En este caso, a mí no me gusta trabajar con variables o propiedades de un objeto
que tengan una mayúscula como primera letra,
con Pascal case, prefiero camel case.
Esto sería un ejemplo.
Por ahora lo vamos a dejar como estaba,
porque tampoco es tan interesante,
pero creía que era interesante que sí que supieses que se puede hacer.
Hay una cosita también que se puede hacer con esta sintaxis
y es que se puede conseguir un segundo parámetro aquí,
que es el index, el index de la lista que se está recorriendo aquí, ¿vale?
Así que podríamos...
No es muy útil, pero podríamos poner aquí, por ejemplo...
Vamos a ponerlo justamente aquí.
Vamos a poner una P y le vamos a poner como el número de referencia,
como utilizando el index como número de referencia.
Ahora, vamos a guardar los cambios y vamos a ver aquí...
Ya se me ocurre un poco la película.
Vamos a poner Indiana Jones.
Esto que puedes ver aquí, este 0, es el índice de la lista.
Este sería el número 1, el número 2, el número 3...
Así que esto sería el índice de la lista.
Y lo estamos utilizando por haber añadido coma index.
Estamos como recuperando el segundo parámetro
para saber el índice de esa lista.
No es muy útil, es verdad.
No es muy útil en este ejemplo,
pero hay otros ejemplos que sí que puede ser interesante utilizarlo.
Es importante saber que se puede hacer así.
Ahora, ya vemos cómo podemos recorrer una lista de elementos
y renderizar algo.
Por supuesto, podríamos hacer un renderizado condicional dentro.
Por ejemplo, de la misma forma que aquí tenemos este if
para mirar la longitud de la respuesta,
podríamos decir aquí que si el año es...
Bueno, si 2020 menos el año es menor a 5,
podemos aquí, por ejemplo,
podríamos renderizar...
Vamos a renderizar un...
Uy, ha salido un 5 muy extraño.
Podemos renderizar un emoji.
Un emoji que diga que es una película que es nueva.
2020 menos el año en el que salió esta película,
pues sería una película que es nueva.
Así que si pongo Avengers...
Vamos a ver...
Avengers...
Pues vamos a ver...
Esta es nueva, de 2018.
Tiene sentido.
La de 2012 no es nueva.
Ya tendríamos aquí un renderizado condicional
dentro del listado de...
El renderizado de la lista de elementos.
Vale.
Ahora, esto tiene otra cosa que es bastante interesante,
porque este componente nos está quedando un poco complicado, ¿no?
Tenemos el if del loading,
luego un else que mirábamos si la respuesta tiene longitud y tal.
Esto empieza a ser un poco raro.
Hay una cosa, una funcionalidad que tiene esta sintaxis del each
para nuestra respuesta, el each,
que nos va a ayudar a simplificar un poco nuestro código.
Vamos a intentar a ver si esto funciona como deberíamos.
Y es que esto que habíamos hecho aquí,
habíamos hecho, pues, si tiene respuesta y todo esto,
vamos a quitar aquí el número de películas
que tampoco parece que nos esté añadiendo mucha cosa
o lo podríamos sacar fuera.
Bueno, por ahora lo vamos a quitar,
porque para el ejemplo nos va a ir mejor.
Lo que podemos hacer con este each
es que tenga una cláusula else.
Vamos a verlo.
En lugar de hacer un if,
si tiene una respuesta y todo esto,
lo que podríamos hacer directamente
es utilizar este each.
Y lo que le podemos decir es que,
vale, me recorres esta lista de response,
pero si no tienes,
si else, si no tienes nada que recorrer,
si la lista de response está vacía,
entonces me renderizas otra cosa.
Podríamos, pues, poner este.
Vamos a hacer este.
Y esto ahora ya lo podemos eliminar.
De esta forma, ahora,
si guardo los cambios
y aquí, pues, buscamos, pues, por ejemplo,
I back to the future.
Vale.
A ver, ahora sí.
Muy bien.
Entonces, ahora sale perfectamente, ¿no?
Porque tengo resultados.
Y ahora le pongo una S,
pues, no hay resultados.
De esta forma hemos conseguido simplificar bastante
gracias a utilizar esta condición else
de la sintaxis del each.
Del each.
Así que esto se leería así.
Por cada respuesta que tenemos en response,
me extraes el title, el poster, el year y el índice.
Y si response, pues, tiene elementos,
me renderizas para cada elemento esto de aquí.
Si no, pues, simplemente pon que no tiene resultados.
De esta forma, ya no te ves obligado
a tener que mirar el length
para ver si tiene resultados o no y cosas así.
Hay una cosita antes de que terminemos esto
que es interesante que sepas.
Y es que este each lo puedes utilizar
para cualquier lista que sea iterable.
Un array, por supuesto,
pero también lo podrías hacer con un string.
Un string es iterable porque tiene una propiedad .length
y, por lo tanto, podrías iterar un string.
No se me ocurre ahora mismo un caso de uso para eso,
pero podría ser.
Y cualquier lista que sea iterable de JavaScript
podrías utilizar este each.
Visto esto, y antes de que terminemos el vídeo,
pues, yo creo que puede ser interesante extraer esto
en un componente que le vamos a llamar movie.svelte.
Y esto que habíamos hecho aquí,
que, bueno, es un poco interesante,
pero que creo que no nos está ayudando mucho
a entender aquí,
tenemos a un componente input lleno de cosas,
lo vamos a extraer a este movie.
Vamos a ver todo lo que necesita para funcionar.
Pues, vemos que necesita,
vamos a poner un script.
Y ahora, pues, vamos a decir cuáles son las props
que tiene este componente, ¿no?
Hacemos un export y le decimos que tenemos el index
y también tiene que tener el title
y también tiene que tener el poster y el año.
Hasta aquí.
Perfecto.
Pues, estas serían las props que tendría nuestro componente.
Ahora, para utilizar este nuevo componente,
pues, nada, lo tenemos que importar.
Hacemos un const import...
Ah, esto no es un const.
Sería un import movie from...
Y le decimos de dónde lo tenemos que importar.
De movie.
Import movie from movie.
No tenemos que hacer un export ni nada.
Recordemos que esto lo hace automáticamente Svile.
Importamos este componente movie
y ahora vamos a utilizarlo de la siguiente forma.
Con el index, el title...
Bueno, en este caso ya podríamos utilizar esto
para renombrarlo al vuelo.
Y así quedaría un poco mejor.
Tendremos que ahora modificar el componente de antes,
pero creo que así podemos hacer el cambio hasta el vuelo
y ya quedaría bien.
Así que todo esto ahora lo podemos eliminar
y nos faltaría adaptar aquí,
pues, esto ahora sería con una T minúscula.
Sí, podría haber cambiado toda la referencia de golpe.
Muy bien.
Este title, este title y el poster que tendríamos por aquí.
Perfecto.
Ahora guardamos aquí los cambios, guardamos los cambios.
Muy bien.
Vamos a buscar aquí Toy Story
y ya tenemos aquí cómo está funcionando correctamente
nuestro nuevo componente que ha quedado así de sencillo.
Pues podríamos empezar a poner un poco de estilos aquí.
Y recordemos que puedes añadir los estilos en el mismo componente
y no hace falta que pongas clases,
ni edades, la potencia que tienes Bell.
Y además te va diciendo, pues eso,
si tienes algo que no estás utilizando,
si ponemos aquí un div, cosas...
Te dice, este selector no tiene sentido
porque tu componente no tiene un div.
Es muy potente, muy potente.
Así que aquí ya podríamos empezar a estilar nuestras películas.
Me estoy inventando un poco sobre la marcha,
lo que podemos poner aquí.
Pero al menos para que veamos esto con un poco de cara y ojos.
No sé si va a salir muy bien al vuelo,
pero vamos a poner alguna cosita más.
Por ejemplo, el título.
Vamos a ponerlo un poco más grande.
Pero vamos a hacer que el margen sea más pequeño.
Para que no se vaya tanto.
Y vamos a probar.
A ver, más o menos.
Más o menos.
Ya seguiremos trabajando en nuestros estilos.
Bueno, al menos, mira, aquí es interesante
que tenga un poquito de espacio.
Ya vamos viendo lo que va quedando.
Creo que el index no es tan interesante.
Que este solo era para el ejemplo.
Así que vamos a quitarlo.
Pero fíjate, ¿no?
Qué bueno que es Svel.
Que ya te dice, este componente está exportando algo
que no utiliza.
¿Vale?
Y está muy bien, ¿no?
Ya te va avisando y evita que pongas código
que realmente no necesitas.
Así que, bueno, pues ya se va viendo un poquito mejor
nuestro proyecto, nuestro buscador de películas,
que ahora sí está mostrando las películas.
No solo nos dice cuántas tenemos,
sino que nos está mostrando las películas.
Y todo esto, pues gracias a saber
cómo podemos renderizar listas de elementos.
Pues nada, espero que te haya gustado mucho
la clase de hoy.
Si es así, ya sabes, dale like,
suscríbete si no lo estás todavía
para no perderte los siguientes vídeos
porque en la siguiente clase
vamos a ver una técnica muy interesante
que tiene Svelte para manejar promesas.
Y vas a ver que la sintaxis queda muy, muy bien.
Es fantástica.
Así que no te lo pierdas.
Nos vemos en el siguiente.
Hasta luego.
¡Gracias!
¡Gracias!
¡Gracias!
¡Gracias!
¡Gracias!
¡Gracias!
¡Gracias!
¡Gracias!
¡Gracias!
¡Gracias!
¡Gracias!