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

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:

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

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

  2. 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>
  );
}

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

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

  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.

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

  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

Contribua Comunidade Sponsor