Componentes en Astro

Es el momento de trabajar de forma más profunda los componentes de Astro.

⚡️Este es el capítulo más importante del bootcamp.

Si conoces otros frameworks orientados a web verás muchas similitudes.

Si es la primera vez que ves algo así, estás de suerte, porque Astro lo hace MUY fácil.

👀 El Layout que vimos en pasos anteriores es también un componente.

🔍 Un componente es una unidad mínima de funcionalidad reutilizable. Una aplicación web es una unión de varios de estos componentes.

Componente estático ¶

Aprovechemos el fragmento de código donde estamos colocando la foto, el título y la descripción.

Crea la nueva carpeta /src/components y un nuevo fichero dentro Hero.astro.

Ahora cambia el index.astro y sustituye todo el contenido por el componente Hero.

👀 El componente funciona de forma similar a una etiqueta HTML. Como todavía no tenemos ningún elemento hijo (pronto sí, ya verás) la etiqueta puede abrirse y cerrarse con / en la misma etiqueta.

Añadimos props para hacerlo dinámico ¶

Es claro que si queremos reutilizar el componente hay que dotarle de “vida”.

Usemos de nuevo los props para pasar atributos desde el padre (index.astro) al componente.

⚡️Gracias al Atro.props podemos definir atributos variables. Hemos alterado el componente para que permita modificar título, la URL de la imagen y el enlace y texto del botón.

👀 Importante: Cuando el prop está entre etiquetas usamos la notación {buttonText} y cuando es el valor para un atributo hacemos lo mismo, pero eliminamos las comillas: href={buttonLink}

Ahora ajustemos el lugar donde llamamos al componente para asignarle los parámetros adecuados.

💪 Primer componente dinámico funcionando

Buenas prácticas: Tipos y valores ¶

Vamos a añadir aquí un concepto de TypeScript.

🎧 Podcast: WR 257: TypeScript puede ser tu lenguaje para SIEMPRE

😱 No te asustes, es solo para sacarle partido a la potencia de Astro y su uso interno del lenguaje TypeScript para dar más poder y control al developer… ¡a ti!

Al inicio del componente Hero añadimos esto:

👀 El interface Props es una declaración de variables y tipos. Astro a partir de este momento controlará que los 4 props que hemos definido tengan el tipo de string (cadena de texto) y que sean obligatorios.

Si alguno de los props fuera un número podríamos utilizar number en vez de string. Pero, por ahora, tranquilo, no es esencial profundizar en esto.

💦 Vete a index.astro y en la inserción del componente <Hero> prueba a eliminar algún atributo como por ejemplo title.

💪 ¿Ves lo que pasa? Aparece en rojo y te indica que hay un error. Eso es gracias al interface.

💣 Si te encuentras con algunos problemas debidos a TypeScript puedes reducir los requisitos que tiene que cumplir tu código cambiando el contenido del fichero tsconfig.json en tu carpeta raíz.

Props opcionales ¶

Acabamos añadiendo una opción más a nuestro interface Props. La capacidad de que alguno de nuestros props sean opcionales.

👀 Añadiendo un ? TypeScript y, por tanto Astro, entienden que esos dos props son ahora opcionales.

🔍 Dejamos para un poco más adelante cómo sacar partido a esos props opciones, lo haremos cuando veamos la sintaxis JSX.

💦 ¿Te animas a reutilizar el componente Hero en about.astro? Es muy fácil. Recuerda importar el componente en la parte encerrada entre las tres líneas ---.

💪 Componentes listos, o casi ;)