Paso 2: Un componente con variable

Crear tu primer componente reutilizare con una variable

Los componentes como piezas reutilizabas se guardan en la carpeta src/components.

👀 El proyecto ya tiene uno, heredado de la instalación, en el fichero Card.astro, no hagas nada con él todavía.

Algo que ya te habrás fijado es que los componentes .astro tienen dos partes diferenciadas.

Una primera marcada por estos tres guiones horizontales donde puedes escribir JavaScript.

---
// Script del componente (JavaScript)
---

Y la segunda, que aparece debajo, donde está el código HTML.

<!-- Maquetado del componente (HTML + Expresiones JS) -->

Juntos hacen que la magia funcione:

---
// Script del componente (JavaScript)
---
<!-- Maquetado del componente (HTML + Expresiones JS) -->

|

💦 Para que lo resuelvas tú

Vamos a sustituir el saludo de hola.astro por un componente.

Primero crea un componente en src/components y llámalo WelcomeMessage.astro (importante las mayúsculas).

Dentro escribes el saludo.

Ahora en hola.astro sustituyes <h1>Hola malandriner!</h1> por el componente.

👀 Tendrás que importar el componente en la parte de JavaScript del hola.astro

Lo tienes, ¡magnífico!

|

Segunda parte

Vamos a darle un poco más de valor al componente WelcomeMessage y cambiamos el HTML por este otro:

<h1>Hola malandriner {name}!<h1>

Pero ahora {name} debe ser tu nombre.

|

|

Puedes verla en la rama step02.

⚡️ Ahora ya estás listo para pasar al Paso 03.

|