Pular para o conteúdo

Sintaxe do Astro

Se você conhece HTML, você 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 do JavaScript.

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

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

src/components/Variaveis.astro
---
const nome = "Astro";
---
<div>
<h1>Olá {nome}!</h1> <!-- Produz <h1>Olá Astro!</h1> -->
</div>

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

src/components/AtributosDinamicos.astro
---
const nome = "Astro";
---
<h1 class={nome}>Expressões de atributo são suportadas</h1>
<MeuComponente atributoTemplateLiteralNome={`MeuNomeE${nome}`} />

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

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

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

src/components/HtmlCondicional.astro
---
const visivel = true;
---
{visivel && <p>Mostre-me!</p>}
{visivel ? <p>Mostre-me!</p> : <p>Ou mostre-me!</p>}

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

src/components/TagsDinamicas.astro
---
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 precisam ser capitalizados. Por exemplo, use Elemento, não elemento. Caso contrário, o Astro vai 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:*, 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.

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

Fragmentos podem ser úteis para evitar ter que colocar um elemento em volta ao adicionar diretivas set:*, como no exemplo a seguir:

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

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

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.

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

O template 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.

src/components/ElementosRaiz.astro
---
// Template com múltiplos elementos
---
<p>Não precisa envolver elementos em um único elemento.</p>
<p>O Astro suporta múltiplos elementos raiz em um template.</p>

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

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

O que passa em sua cabeça?

Community