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

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

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

    src/components/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.

    src/pages/index.astro
    ---
    import BaseLayout from '../layouts/BaseLayout.astro';
    import Greeting from '../components/Greeting.jsx';
    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.

    src/pages/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í"]} />
      <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.

    src/pages/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í"]} />
      <Greeting client:load messages={["Hej", "Hallo", "Hola", "Habari"]} />
    </BaseLayout>

Analise o Padrão

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

Seção intitulada Teste seu conhecimento

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

  1. <ContadorReact client:load/>

  2. <CartaoSvelte />

Checklist

Seção intitulada Checklist

Recursos

Seção intitulada Recursos