Pular para o conteúdo
Astro Astro

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

  1. Se ele estiver executando, feche o servidor de desenvolvimento para ter acesso ao terminal (atalho de teclado: Ctrl + C).

  2. Adicione a habilidade de utilizar componentes Preact em seu projeto Astro com um único comando:

    Terminal window
    npx astro add preact

  3. Siga as instruções da linha de comando para confirmar a adição do Preact ao seu projeto.

Inclua um banner de saudação com Preact

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.

  1. Crie um novo arquivo em src/components/ chamado Saudacao.jsx

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

  2. Adicione o seguinte código para Saudacao.jsx:

    src/components/Saudacao.jsx
    import { useState } from 'preact/hooks';
    

    export default function Saudacao({mensagens}) {
    

      const mensagemAleatoria = () => mensagens[(Math.floor(Math.random() * mensagens.length))];
    

      const [saudacao, setSaudacao] = useState(mensagens[0]);
    

      return (
        <div>
          <h3>{saudacao}! Obrigado por visitar!</h3>
          <button onClick={() => setSaudacao(mensagemAleatoria())}>
            Nova Saudação
          </button>
        </div>
      );
    }

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

    src/pages/index.astro
    ---
    import LayoutBase from '../layouts/LayoutBase.astro';
    import Saudacao from '../components/Saudacao.jsx';
    const tituloPagina = "Página Inicial";
    ---
    <LayoutBase tituloPagina={tituloPagina}>
      <h2>O subtítulo incrível do meu blog</h2>
      <Saudacao mensagens={["Oi", "Olá", "Coé", "E aí"]} />
    </LayoutBase>

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

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

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

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

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

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

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>

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

  2. De que forma(s) os dois componentes <BannerPreact /> serão o mesmo? De que forma(s) eles serão diferentes?

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

Teste seu conhecimento

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

  1. <ContadorReact client:load/>

  2. <CartaoSvelte />

Checklist

Recursos