Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

i18n(pt-BR): update astro-syntax.mdx #9447

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+19 −17
Open

i18n(pt-BR): update astro-syntax.mdx #9447

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 19 additions & 17 deletions src/content/docs/pt-br/basics/astro-syntax.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,17 @@ description: Uma introdução à sintaxe de componente .astro .
i18nReady: true
---

**Se você conhece HTML, você já sabe o suficiente para escrever seu primeiro componente 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](#diferenças-entre-astro-e-jsx) e adiciona suporte para incluir componentes e expressões do JavaScript.
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](#diferenças-entre-astro-e-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 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!
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!

:::note[Dinâmico vs reativo]
Usando essa abordagem, você pode incluir valores **dinâmicos** que são calculados no frontmatter. Mas uma vez incluídos, esses valores não são **reativos** e nunca mudarão. Os componentes Astro são templates que só executam uma vez, durante a etapa de renderização.
Usando essa abordagem, você pode incluir valores **dinâmicos** que são calculados no frontmatter. Mas uma vez incluídos, esses valores não são **reativos** e nunca mudarão. Componentes Astro são modelos que só executam uma vez durante a etapa de renderização.

Veja abaixo mais exemplos de [diferenças entre Astro e JSX](#diferenças-entre-astro-e-jsx).
:::
Expand Down Expand Up @@ -59,7 +59,7 @@ function tratarClique () {
<button onClick={tratarClique}>Nada vai acontecer quando você me clicar!</button>
```

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

```astro title="faca-isso-em-vez-disso.astro"
---
Expand Down Expand Up @@ -89,7 +89,7 @@ const itens = ["Cachorro", "Gato", "Ornitorrinco"];
</ul>
```

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

```astro title="src/components/HtmlCondicional.astro" "visivel"
---
Expand All @@ -116,15 +116,17 @@ const Componente = 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.
- **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:*`](/pt-br/guides/framework-components/#hidratando-componentes-interativos), 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](/pt-br/reference/directives-reference/#definevars) 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 ter que colocar um elemento em volta ao adicionar [diretivas `set:*`](/pt-br/reference/directives-reference/#sethtml), como no exemplo a seguir:
Fragmentos podem ser úteis para evitar elementos de invólucro ao adicionar [diretivas `set:*`](/pt-br/reference/directives-reference/#sethtml), como no exemplo seguinte:

```astro title="src/components/SetHtml.astro" "Fragment"
---
Expand All @@ -135,7 +137,7 @@ const stringHtml = '<p>Conteúdo HTML bruto</p>';

### Diferenças entre Astro e JSX

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

Expand All @@ -146,16 +148,16 @@ No Astro, você usa o formato padrão `kebab-case` para todos os atributos HTML
<div class="caixa" data-value="3" />
```

#### Múltiplos elementos
#### Múltiplos Elementos

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

```astro title="src/components/ElementosRaiz.astro"
---
// Template com múltiplos elementos
// Modelo 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>
<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
Expand All @@ -165,10 +167,10 @@ No Astro, você pode usar comentários HTML padrão ou comentários no estilo Ja
```astro title="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 */}
<!-- A sintaxe de comentários HTML é válida em arquivos .astro -->
{/* A sintaxe de comentários JS também é válida */}
```

:::caution
Os comentários no estilo do HTML serão incluídos no DOM do navegador, enquanto os do JS serão ignorados. Para deixar mensagens TODO ou outras explicações somente para desenvolvimento, você pode querer usar comentários no estilo JavaScript ao invés disso.
Os comentários no estilo HTML serão incluídos no DOM do navegador, enquanto os JS serão ignorados. Para deixar mensagens TODO ou outras explicações somente em desenvolvimento, você pode querer usar comentários no estilo JavaScript.
:::
Loading