Sintaxe do Astro

Se você conhece HTML, já sabe o suficiente para escrever seu primeiro componente Astro.

A sintaxe de componente Astro é uma extensão do HTML. A sintaxe foi projetada para soar familiar a qualquer um com experiência em escrever HTML ou JSX, e adiciona suporte para incluir componentes e expressões JavaScript.

Expressões parecidas com JSX

Você pode definir variáveis locais do JavaScript dentro do script frontmatter do componente entre as duas cercas de código (---) de um componente Astro. Você pode então injetar essas variáveis no modelo HTML do componente usando expressões parecidas com JSX!

Variáveis

Variáveis locais podem ser adicionadas ao HTML usando a sintaxe de chaves:

---
const nome = "Astro";
---
<div>
  <h1>Olá {nome}!</h1>  <!-- Produz <h1>Olá Astro!</h1> -->
</div>

Atributos Dinâmicos

Variáveis locais podem ser usadas entre chaves para passar valores de atributos tanto para elementos HTML como para componentes:

---
const nome = "Astro";
---
<h1 class={nome}>Expressões de atributo são suportadas</h1>

<MeuComponente atributoTemplateLiteralNome={`MeuNomeE${nome}`} />

Atributos HTML vão ser convertidos para strings, portanto não é possível passar funções e objetos para elementos HTML. Por exemplo, você não pode atribuir um manipulador de eventos a um elemento HTML em um componente Astro:

---
function tratarClique () {
    console.log("botão clicado!");
}
---
<!-- ❌ Isso não funciona! ❌ -->
<button onClick={tratarClique}>Nada vai acontecer quando você me clicar!</button>

Em vez disso, use um script no lado do cliente para adicionar o manipulador de evento, como você faria no JavaScript vanilla:

---
---
<button id="botao">Clique em Mim</button>
<script>
  function tratarClique () {
    console.log("botão clicado!");
  }
  document.getElementById("botao").addEventListener("click", tratarClique);
</script>

HTML Dinâmico

Variáveis locais podem ser usadas em funções parecidas com JSX para produzir elementos HTML gerados dinamicamente:

---
const itens = ["Cachorro", "Gato", "Ornitorrinco"];
---
<ul>
  {itens.map((item) => (
    <li>{item}</li>
  ))}
</ul>

Astro pode exibir HTML condicionalmente usando operadores lógicos JSX e expressões ternárias.

---
const visivel = true;
---
{visivel && <p>Mostre-me!</p>}

{visivel ? <p>Mostre-me!</p> : <p>Ou mostre-me!</p>}

Tags Dinâmicas

Você também pode usar tags dinâmicas ao atribuir a uma variável o nome de uma tag HTML ou um componente importado:

---
import MeuComponente from "./MeuComponente.astro";
const Elemento = 'div'
const Componente = MeuComponente;
---
<Elemento>Olá!</Elemento> <!-- renderiza como <div>Olá!</div> -->
<Componente /> <!-- renderiza como <MeuComponente /> -->

Ao usar tags dinâmicas:

Os nomes de variáveis devem iniciar com maiúsculas. Por exemplo, use Elemento, não elemento. Caso contrário, Astro tentará renderizar o nome da sua variável como uma tag HTML literal.
Diretivas de hidratação não são suportadas. Ao usar as diretivas de hidratação client:* (EN), o Astro precisa saber quais componentes devem fazer parte do bundle para produção, e o padrão de tags dinâmicas impede que isso funcione.
A diretiva define:vars (EN) não é suportada. Se você não puder envolver os filhos com um elemento extra (como <div>), então você pode adicionar manualmente um style={`--myVar:${value}`} ao seu Elemento.

Fragmentos

O Astro suporta usar tanto <Fragment></Fragment> como a abreviação <></>.

Fragmentos podem ser úteis para evitar elementos de invólucro ao adicionar diretivas set:* (EN), como no exemplo seguinte:

---
const stringHtml = '<p>Conteúdo HTML bruto</p>';
---
<Fragment set:html={stringHtml} />

Diferenças entre Astro e JSX

A sintaxe de componente Astro é um superconjunto do HTML. Ela foi projetada para parecer familiar a qualquer um com experiência com HTML ou JSX, mas existem algumas diferenças importantes entre arquivos .astro e JSX.

Atributos

No Astro, você usa o formato padrão kebab-case para todos os atributos HTML em vez do camelCase usado no JSX. Isso funciona até para o class, que não é suportado pelo React.

<div className="caixa" dataValue="3" />
<div class="caixa" data-value="3" />

Múltiplos Elementos

O modelo de um componente do Astro pode renderizar vários elementos sem a necessidade de envolver tudo em uma única <div> ou <>, diferente do JavaScript ou JSX.

---
// Modelo com múltiplos elementos
---
<p>Não precisa envolver elementos dentro de um único elemento.</p>
<p>Astro suporta múltiplos elementos raiz em um modelo.</p>

Comentários

No Astro, você pode usar comentários HTML padrão ou comentários no estilo JavaScript.

---
---
<!-- A sintaxe de comentários HTML é válida em arquivos .astro -->
{/* A sintaxe de comentários JS também é válida */}

Contribua Comunidade Sponsor