Component

#Introducció

Els components estan dissenyats per ser reutilitzables i composables. Pots utilitzar components dins d’altres components per construir interfícies d’usuari cada cop més avançades. Per exemple, un component Button podria utilitzar-se per crear un component ButtonGroup:

---
import Button from './Button.astro';
---
<div>
  <Button title="Button 1" />
  <Button title="Button 2" />
  <Button title="Button 3" />
</div>

Són components de plantilla només HTML sense temps d’execució al costat del client i utilitzen l’extensió de fitxer .astro.

El més important que cal saber sobre els components Astro és que no es renderitzen al client. Es renderitzen a HTML sigui durant la compilació o sota demanda. Pots incloure codi JavaScript dins del “frontmatter” del teu component, i tot serà eliminat de la pàgina final enviada als navegadors dels teus usuaris. El resultat és un lloc més ràpid, sense cap empremta de JavaScript afegida per defecte.

Quan el teu component Astro necessita interactivitat al costat del client, pots afegir etiquetes <script> HTML estàndard o components de Framework UI com a “illes client”.

Per als components que necessiten renderitzar contingut personalitzat o dinàmic, pots ajornar la seva renderització al servidor afegint una directiva de servidor. Aquestes “illes de servidor” renderitzaran el seu contingut quan estigui disponible, sense retardar la càrrega completa de la pàgina.

#Estructura

Un component Astro està format per dues parts principals: l’Script del Component i la Plantilla del Component. Cada part realitza una funció diferent, però juntes proporcionen un marc de treball que és fàcil d’utilitzar i prou expressiu per gestionar qualsevol cosa que vulguis construir.

---
// Component Script (JavaScript)
---
<!-- Component Template (HTML + JS Expressions) -->

#Script

Astro utilitza una tanca de codi (---) per identificar l’script del component en el teu component Astro. Si has escrit Markdown abans, potser ja estàs familiaritzat amb un concepte similar anomenat frontmatter. La idea d’Astro sobre l’script del component està directament inspirada en aquest concepte.

Pots utilitzar l’script del component per escriure qualsevol codi JavaScript que necessitis per renderitzar la teva plantilla. Això pot incloure:

• importar altres components Astro
• importar components d’altres frameworks, com React
• importar dades, com un fitxer JSON
• obtenir contingut d’una API o base de dades
• crear variables que faràs servir en la teva plantilla

---
import SomeAstroComponent from '../components/SomeAstroComponent.astro';
import SomeReactComponent from '../components/SomeReactComponent.jsx';
import someData from '../data/pokemon.json';

// Access passed-in component props, like `<X title="Hello, World" />`
const { title } = Astro.props;

// Fetch external data, even from a private API or database
const data = await fetch('SOME_SECRET_API_URL/users').then(r => r.json());
---
<!-- Your template here! -->

La tanca de codi està dissenyada per garantir que el JavaScript que hi escrius quedi “tancat”. No s’escaparà a la teva aplicació frontend ni arribarà a mans dels teus usuaris. Pots escriure amb seguretat codi que sigui costós o sensible (com una crida a la teva base de dades privada) sense preocupar-te que acabi al navegador dels teus usuaris.