Integração do React na sua aplicação Astro

Neste tutorial, você aprenderá como adicionar o React ao seu aplicativo Astro. Isso permitirá que você crie e integre componentes modernos do React em seu aplicativo. Iremos guiar você pelos passos necessários para preparar seu aplicativo Astro para o React e criar um componente simples.

Principais Descobertas

• Você precisa instalar o pacote React e os plugins correspondentes.
• A estrutura de seus componentes no Astro difere um pouco do HTML puro.
• Para garantir que seus componentes React sejam renderizados no navegador, você precisa usar o atributo client:only.

Guia Passo a Passo

Para adicionar o React ao seu aplicativo Astro, siga os passos abaixo:

Primeiro, certifique-se de que seu servidor de desenvolvimento não esteja mais em execução. Você pode fazer isso cancelando o comando npm run dev. Isso é importante para garantir que você não tenha conflitos durante a instalação das novas dependências.

Agora você está pronto para integrar oficialmente o React. Para fazer isso, use o comando npx astro add react. Com este comando, você adicionará os pacotes necessários para dar suporte ao React em seu aplicativo Astro.

Em seguida, você será perguntado se deseja instalar as novas dependências com npm. Certifique-se de confirmar isso, pois a instalação não funcionará corretamente sem essas dependências.

No processo de instalação, também serão feitas alterações no arquivo astro.config.mjs. Você também deve aceitar essas alterações para garantir que tudo funcione sem problemas.

Após a conclusão da instalação, seu aplicativo agora deve ter suporte ao React. Vamos verificar quais novas dependências foram adicionadas. Em seu package.json, agora você encontrará react, react-dom e @astrojs/react como plugins.

Para garantir que tudo esteja configurado corretamente, você precisará de um componente React que possa testar. Dentro da pasta src, crie uma nova pasta chamada components, que será usada para armazenar seus componentes React posteriormente.

Nesta pasta, crie um arquivo chamado index.jsx. Este será o seu componente React pronto para uso, onde você pode inserir seu código.

Agora certifique-se de importar o componente no arquivo index.astro. Isso deve ser feito entre os três hífens (---) na parte superior do arquivo, onde você pode inserir as instruções de importação.

A instrução de importação pode se parecer com import App from '../components/index.jsx';. Isso garante que seu componente seja carregado corretamente.

Primeiramente, você precisa exportar algo para evitar que o arquivo fique vazio. Adicione uma função simples que renderiza algo no DOM.

Lembre-se de definir um atributo client:only para o seu componente. Isso garante que o componente seja renderizado no navegador e não no servidor.

Agora vá para o arquivo index.jsx e crie um componente React simples. Por exemplo, você pode adicionar um div simples com o texto "App" no HTML.

Ao iniciar o aplicativo agora, você deverá ver que o novo componente foi carregado com sucesso e está funcionando corretamente.

Ao inspecionar o DOM, você notará que o Astro usa um espaço reservado especial chamado de "Astro Island", onde seus componentes React são renderizados.

O Astro permite usar várias bibliotecas frontend ao mesmo tempo. Isso significa que você pode combinar React, Vue ou outras bibliotecas em um único aplicativo, sem complicações.

O funcionamento do seu componente já é um bom passo, e agora você pode trabalhar para expandir ainda mais o seu aplicativo. Em tutoriais futuros, desenvolveremos o componente em uma aplicação de chat.

Resumo

Neste tutorial, você aprendeu como adicionar o React ao seu app Astro e criar um componente simples. Isso abre caminho para uma variedade de possibilidades de expansão do seu aplicativo.