Estructura de un Proyecto con Astro

**Un proyecto típico con Astro tiene una estructura de directorios organizada y modular.** Cuando se dice que la estructura de un proyecto es "organizada y modular", significa que el proyecto está estructurado de manera que: 1. **Organizada**: * **Claridad**: Los archivos y directorios están colocados en ubicaciones lógicas y fáciles de encontrar, lo que hace que sea fácil para cualquier desarrollador entender y navegar por el proyecto. * **Mantenibilidad**: Una estructura organizada facilita la actualización, corrección de errores y adición de nuevas funcionalidades sin desordenar el proyecto. * **Separación de Preocupaciones**: Cada tipo de recurso (componentes, estilos, páginas, datos, etc.) está separado en su propio directorio, lo que facilita el mantenimiento y la colaboración entre desarrolladores. 2. **Modular**: * **Reutilización de Código**: El código está dividido en módulos (por ejemplo, componentes reutilizables) que se pueden usar en diferentes partes del proyecto, evitando la duplicación de código. * **Escalabilidad**: La estructura modular permite añadir nuevas funcionalidades o realizar cambios en partes específicas del proyecto sin afectar otras partes. Esto es especialmente útil a medida que el proyecto crece en tamaño y complejidad. * **Aislamiento de Funcionalidades**: Cada módulo o componente tiene una responsabilidad específica y está aislado del resto del código, lo que hace que el proyecto sea más fácil de entender y menos propenso a errores.

Resumen de lo más importante de la clase ✏️: * `src/`: Contiene el código principal.* `pages/`: Cada archivo aquí es una página con su respectiva ruta (URL). Puedes usar `.astro`, `.md`, o `.mdx`. * `components/`: Carpeta opcional donde guardas los componentes reutilizables de la UI. * `layouts/`: Para definir plantillas o layouts globales usados en varias páginas. * `public/`: Archivos estáticos como imágenes, fuentes o assets que no pasan por el build, accesibles directamente desde el navegador.

La etiqueta **slot** nos permite añadir dinamismo a nuestros componentes cambiando el contenido que presentamos dinamicamente. Un ejemplo de como usarlo sería: 1. **Definir el Componente con un** `slot` (`Card.astro`): `<article class="card">` `

Título de la Tarjeta

` `

Descripción de la tarjeta.

` ` <slot></slot> ` `</article>` 1. **Usar el Componente**: \--- import Card from './Card.astro'; \--- \<Card> \ \<button>Haz clic aquí\</button> \</Card> En este ejemplo, el contenido `<button>Haz clic aquí</button>` se pasa desde el componente padre al `<slot>` dentro de `Card.astro`. Esto te permite personalizar lo que va dentro de la estructura de la tarjeta mientras mantienes su diseño.

🚀 Cómo funciona un archivo Astro (.astro) Básicamente, entre los guiones (`---`) puedes utilizar JavaScript (Component Script), y fuera utilizar HTML (Component Template). Si tienes experiencia con React, es similar a JSX, pero no es lo mismo. ```js --- // Component Script (JavaScript) const name = "Andrés" ---

Hola {name}

``` Como puedes ver, tampoco es HTML en sí, es un sistema de templates similar a JSX, por eso puedes mostrar variables o inclusive podrás utilizar Componentes como tu Framework favorito, lo que hace Astro sea tan genial para desarrollar. . Referencias: \[Componentes de Astro]\(https://docs.astro.build/en/basics/astro-components/)