Pular para o conteúdo

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

Seção intitulada 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>

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?

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

  1. <ContadorReact client:load/>

  2. <CartaoSvelte />