Construa sua primeira ilha Astro

Utilize um componente Preact para saudar seus visitantes com uma mensagem randomicamente selecionada!

Se prepare para...

Adicionar Preact ao seu projeto Astro
Incluir ilhas Astro (componentes Preact .jsx) em sua página inicial
Utilizar diretivas client: para fazer ilhas interativas

Adicione Preact ao seu projeto Astro

Se ele estiver executando, feche o servidor de desenvolvimento para ter acesso ao terminal (atalho de teclado: Ctrl + C).
Adicione a habilidade de utilizar componentes Preact em seu projeto Astro com um único comando:
- npm
- pnpm
- Yarn
Janela do terminal
npx astro add preact
Janela do terminal
pnpm astro add preact
Janela do terminal
yarn astro add preact
Siga as instruções da linha de comando para confirmar a adição do Preact ao seu projeto.

Esse componente irá receber um array de mensagens de saudação como uma prop e randomicamente selecionar uma delas para mostrar uma mensagem de boas-vindas. O usuário pode clicar em um botão para conseguir uma nova mensagem randômica.

Crie um novo arquivo em src/components/ chamado Greeting.jsx

Note a extensão de arquivo .jsx. Este arquivo será escrito em Preact, não Astro.

Adicione o seguinte código para Greeting.jsx:

import { useState } from 'preact/hooks';

export default function Greeting({messages}) {

  const randomMessage = () => messages[(Math.floor(Math.random() * messages.length))];

  const [greeting, setGreeting] = useState(messages[0]);

  return (
    <div>
      <h3>{greeting}! Obrigado por visitar!</h3>
      <button onClick={() => setGreeting(randomMessage())}>
        Nova Saudação
      </button>
    </div>
  );
}

Importe e utilize esse componente em sua página inicial index.astro.

---
import BaseLayout from '../layouts/BaseLayout.astro';
import Greeting from '../components/Greeting';
const pageTitle = "Página Inicial";
---
<BaseLayout pageTitle={pageTitle}>
  <h2>O subtítulo incrível do meu blog</h2>
  <Greeting messages={["Oi", "Olá", "Coé", "E aí"]} />
</BaseLayout>

Verifique a pré-visualização no seu navegador: você deve ver uma saudação aleatória, mas o botão não irá funcionar!

Adicione um segundo componente <Greeting /> com a diretiva client:load.

---
import BaseLayout from '../layouts/BaseLayout.astro';
import Greeting from '../components/Greeting';
const pageTitle = "Página Inicial";
---
<BaseLayout pageTitle={pageTitle}>
  <h2>O subtítulo incrível do meu blog</h2>
  <Greeting messages={["Oi", "Olá", "Coé", "E aí"]} />
  <Greeting client:load messages={["Hej", "Hallo", "Hola", "Habari"]} />
</BaseLayout>

Revisite sua página e compare os dois componentes. O segundo botão funciona pois a diretiva client:load diz ao Astro para enviar e executar novamente o JavaScript no cliente quando a página carrega, fazendo o componente interativo. Isso é chamado componente hidratado.

Quando a diferença ficar clara, remova o componente Saudação não-hidratado.

---
import BaseLayout from '../layouts/BaseLayout.astro';
import Greeting from '../components/Greeting';
const pageTitle = "Página Inicial";
---
<BaseLayout pageTitle={pageTitle}>
  <h2>O subtítulo incrível do meu blog</h2>
  <Greeting messages={["Oi", "Olá", "Coé", "E aí"]} />
  <Greeting client:load messages={["Hej", "Hallo", "Hola", "Habari"]} />
</BaseLayout>

Analise o Padrão

Há outras diretivas client: para explorar. Cada uma envia JavaScript ao cliente em momentos diferentes. client:visible, por exemplo, irá apenas enviar o JavaScript do componente quando ele é visível na página.

Considere um componente Astro com o seguinte código:

---
import LayoutBase from '../layouts/LayoutBase.astro';
import BannerAstro from '../components/BannerAstro.astro';
import BannerPreact from '../components/BannerPreact';
import ContadorSvelte from '../components/ContadorSvelte.svelte';
---
<LayoutBase>
  <BannerAstro />
  <BannerPreact />
  <BannerPreact client:load />
  <ContadorSvelte />
  <ContadorSvelte client:visible />
</LayoutBase>

Quais dos cinco componentes serão ilhas hidratadas, enviando JavaScript ao cliente?

<BannerPreact client:load /> e <ContadorSvelte client:visible /> serão ilhas hidratadas.
De que forma(s) os dois componentes <BannerPreact /> serão o mesmo? De que forma(s) eles serão diferentes?

Igual: Ambos mostram os mesmos elementos HTML e parecem o mesmo inicialmente. Diferente: O componente com a diretiva client:load será executado novamente após a página ser carregada, e quaisquer elementos interativos que ele tem irão funcionar.
Assuma que o componente ContadorSvelte mostra um número e tem um botão para aumentá-lo. Se você não pudesse ver o código do seu website, apenas a página publicada ao vivo, como você diria qual dos dois componentes <ContadorSvelte /> usaram client:visible?

Tente clicar no botão, e veja qual é interativo. Se ele responde a sua interação, ele deve ter uma diretiva client:.

Teste seu conhecimento

Para cada um dos seguintes componentes, identifique o que será enviado ao navegador:

<ContadorReact client:load />
1. Apenas HTML e CSS
2. HTML, CSS e JavaScript
<CartaoSvelte />
1. Apenas HTML e CSS
2. HTML, CSS e JavaScript

Checklist

Eu posso instalar uma integração Astro.
Eu posso escrever componentes de frameworks de UI em sua própria linguagem.
Eu posso utilizar uma diretiva client: para hidratar meu componente de framework de UI.