Componenti di framework UI

Costruisci il tuo sito web Astro senza rinunciare al tuo framework UI preferito.

Astro supporta molti tra i framework più diffusi, tra cui React, Preact, Svelte, Vue, SolidJS, AlpineJS e Lit.

Installazione delle integrazioni

Astro viene fornito con integrazioni opzionali (EN) per React, Preact, Svelte, Vue, SolidJS, AlpineJS e Lit. Una o più di queste integrazioni Astro possono essere installate e configurate nel tuo progetto.

⚙️ Visualizza la Guida alle integrazioni (EN) per maggiori dettagli sull’installazione e la configurazione delle integrazioni Astro.

⚙️ Vuoi vedere un esempio del framework che hai scelto? Visita astro.new e seleziona uno dei modelli di framework.

Utilizzo dei componenti di framework UI

Usa i componenti del tuo framework JavaScript preferito nelle tue pagine, layout e componenti Astro proprio come se fossero dei componenti Astro! Tutti i tuoi componenti possono coesistere in /src/components o possono essere organizzati nel modo che preferisci.

Per utilizzare un componente di un framework, importalo dal suo percorso relativo nello script del componente Astro. Quindi, utilizza il componente insieme ad altri componenti, elementi HTML ed espressioni simili a JSX nel modello del componente.

---
import MyReactComponent from '../components/MyReactComponent.jsx';
---
<html>
  <body>
    <h1>Usa componenti React direttamente in Astro!</h1>
    <MyReactComponent />
  </body>
</html>

Per impostazione predefinita, i componenti del framework verranno visualizzati solo sul server, come HTML statico. Ciò è utile per creare modelli di componenti che non sono interattivi ed evita di inviare JavaScript non necessario al client.

Componenti interattivi idratanti

Un componente di framework UI può essere reso interattivo (idratato) utilizzando una direttiva client:* (EN). Si tratta di attributi del componente che determinano quando il JavaScript del componente deve essere inviato al browser.

Con tutte le direttive client tranne client:only, il tuo componente verrà prima renderizzato sul server per generare HTML statico. Il componente JavaScript verrà inviato al browser in base alla direttiva scelta. Il componente si idraterà e diventerà interattivo.

---
// Example: idratare componenti di framework UI nel browser.
import InteractiveButton from '../components/InteractiveButton.jsx';
import InteractiveCounter from '../components/InteractiveCounter.jsx';
import InteractiveModal from "../components/InteractiveModal.svelte"
---
<!-- Il JS di questo componente inizierà l'importazione al caricamento della pagina -->
<InteractiveButton client:load />

<!-- Il JS di questo componente non verrà inviato al client fino a che
l'utente non scorre verso il basso e il componente non è visibile nella pagina -->
<InteractiveCounter client:visible />

<!-- Questo componente non verrà visualizzato sul server, ma verrà visualizzato sul client quando la pagina viene caricata -->
<InteractiveModal client:only="svelte" />

Il framework JavaScript (React, Svelte, ecc.) necessario per eseguire il rendering del componente verrà inviato al browser insieme al JavaScript del componente. Se due o più componenti di una pagina utilizzano lo stesso framework, il framework verrà inviato una sola volta.

Direttive di idratazione disponibili

Sono disponibili diverse direttive di idratazione per i componenti del framework dell’interfaccia utente: client:load, client:idle, client:visible, client:media={QUERY} e client:only={FRAMEWORK}.

📚 Consulta la nostra pagina riferimento alle direttive (EN) per una descrizione completa di queste direttive sull’idratazione e il loro utilizzo.

Strutture di miscelazione

Puoi importare ed eseguire il rendering di componenti da più framework nello stesso componente Astro.

---
// Esempio: combinazione di più componenti del framework sulla stessa pagina.
import MyReactComponent from '../components/MyReactComponent.jsx';
import MySvelteComponent from '../components/MySvelteComponent.svelte';
import MyVueComponent from '../components/MyVueComponent.vue';
---
<div>
  <MySvelteComponent />
  <MyReactComponent />
  <MyVueComponent />
</div>

Passaggio di proprietà ai componenti dei framework

Puoi passare proprietà dai componenti Astro ai componenti dei framework:

---
import TodoList from '../components/TodoList.jsx';
import Counter from '../components/Counter.svelte';
---
<div>
  <TodoList initialTodos={["learn Astro", "review PRs"]} />
  <Counter startingCount={1} />
</div>

Passaggio dei figli ai componenti del framework

All’interno di un componente Astro, puoi passare dei figli ai componenti di un framework. Ogni framework ha un proprio meccanismo per fare riferimento a componenti figli: React, Preact e Solid usano tutti un oggetto speciale chiamato children, mentre Svelte e Vue usano l’elemento <slot />.

---
import MyReactSidebar from '../components/MyReactSidebar.jsx';
---
<MyReactSidebar>
  <p>Ecco una barra laterale con del testo e un pulsante.</p>
</MyReactSidebar>

Inoltre, puoi utilizzare slot nominati per raggruppare insieme figli specifici.

Per React, Preact e Solid questi slot verranno convertiti in proprietà di livello superiore. I nomi degli slot che utilizzano kebab-case verranno convertiti in camelCase.

---
import MySidebar from '../components/MySidebar.jsx';
---
<MySidebar>
  <h2 slot="title">Menu</h2>
  <p>Ecco una barra laterale con del testo e un pulsante.</p>
  <ul slot="social-links">
    <li><a href="https://twitter.com/astrodotbuild">Twitter</a></li>
    <li><a href="https://github.com/withastro">GitHub</a></li>
  </ul>
</MySidebar>

export default function MySidebar(props) {
  return (
    <aside>
      <header>{props.title}</header>
      <main>{props.children}</main>
      <footer>{props.socialLinks}</footer>
    </aside>
  )
}

Per Svelte e Vue è possibile fare riferimento a questi slot utilizzando un elemento <slot> con l’attributo name. I nomi degli slot che utilizzano kebab-case verranno conservati.

<aside>
  <header><slot name="title" /></header>
  <main><slot /></main>
  <footer><slot name="social-links" /></footer>
</aside>

Componenti della struttura inseriti l’uno nell’altro

All’interno di un file Astro, i componenti figlio del framework possono anche essere componenti idratati. Ciò significa che puoi inserire ricorsivamente componenti l’uno nell’altro da uno qualsiasi di questi framework.

---
import MyReactSidebar from '../components/MyReactSidebar.jsx';
import MyReactButton from '../components/MyReactButton.jsx';
import MySvelteButton from '../components/MySvelteButton.svelte';
---

<MyReactSidebar>
  <p>Ecco una barra laterale con del testo e un pulsante.</p>
  <div slot="actions">
    <MyReactButton client:idle />
    <MySvelteButton client:idle />
  </div>
</MyReactSidebar>

Ciò ti consente di creare intere “app” nel tuo framework JavaScript preferito e renderle, tramite un componente principale, in una pagina Astro.

Posso utilizzare gli Astro Components all’interno dei miei Framework Components?

Qualsiasi componente del framework dell’interfaccia utente diventa un´“isola” di tale framework. Questi componenti devono essere scritti interamente come codice valido per quel framework, utilizzando solo le proprie importazioni e pacchetti. Non è possibile importare componenti .astro in un componente del framework dell’interfaccia utente (ad esempio .jsx o .svelte).

Puoi, tuttavia, utilizzare il pattern Astro <slot /> per passare il contenuto statico generato dai componenti Astro come figli ai componenti del framework all’interno di un Componente .astro.

---
import MyReactComponent from  '../components/MyReactComponent.jsx';
import MyAstroComponent from '../components/MyAstroComponent.astro';
---
<MyReactComponent>
  <MyAstroComponent slot="name" />
</MyReactComponent>

Posso idratare i componenti Astro?

Se provi a idratare un componente Astro con un modificatore client:, riceverai un errore.

I componenti Astro sono componenti di template solo HTML senza runtime lato client. Puoi però utilizzare un tag <script> nel modello del componente Astro per inviare JavaScript al browser che viene eseguito nell’ambito globale.

📚 Ulteriori informazioni sui tag <script> lato client nei componenti Astro (EN)

Crea una Issue su GitHub

Send us feedback