Pular para o conteúdo

@astrojs/ react

Esta integração Astro habilita a renderização no servidor e a hidratação no cliente para seus componentes React.

O Astro inclui o comando astro add para automatizar a configuração de integrações oficiais. Se preferir, você pode instalar as integrações manualmente em vez disso.

Para instalar @astrojs/react, execute o seguinte comando no diretório do seu projeto e siga as instruções:

Terminal window
npx astro add react

Se encontrar algum problema, sinta-se à vontade para relatar no GitHub e tente as etapas de instalação manual abaixo.

Primeiro, instale o pacote @astrojs/react:

Terminal window
npm install @astrojs/react

A maioria dos gerenciadores de pacotes também instalará as dependências associadas. Se você vir o aviso “Cannot find package ‘react’” (ou similar) ao iniciar o Astro, você precisará instalar react e react-dom:

Terminal window
npm install react react-dom

Em seguida, utilize a integração no seu arquivo astro.config.* usando a propriedade integrations:

astro.config.mjs
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
export default defineConfig({
// ...
integrations: [react()],
});

Para usar seu primeiro componente React no Astro, acesse nossa documentação de frameworks de UI. Você irá explorar:

  • 📦 como componentes de frameworks são carregados
  • 💧 opções de hidratação no cliente, e
  • 🤝 oportunidades de misturar e aninhar frameworks

Quando você utiliza múltiplos frameworks JSX (React, Preact, Solid) no mesmo projeto, o Astro precisa determinar quais transformações específicas de framework JSX devem ser usadas para cada um dos seus componentes. Se você adicionou apenas uma integração de framework JSX ao seu projeto, nenhuma configuração extra é necessária.

Use as opções de configuração include (obrigatório) e exclude (opcional) para especificar quais arquivos pertencem a qual framework. Forneça um array de arquivos e/ou pastas para include para cada framework que você está usando. Curingas podem ser usados para incluir vários caminhos de arquivo.

Nós recomendamos colocar componentes de frameworks semelhantes na mesma pasta (ex. /components/react/ e /components/solid/) para facilitar a especificação de seus includes, mas isso não é obrigatório:

astro.config.mjs
import { defineConfig } from 'astro/config';
import preact from '@astrojs/preact';
import react from '@astrojs/react';
import svelte from '@astrojs/svelte';
import vue from '@astrojs/vue';
import solid from '@astrojs/solid-js';
export default defineConfig({
// Habilite muitos frameworks para suportar todos os tipos diferentes de componentes.
// Nenhum `include` é necessário se você estiver usando apenas um framework JSX!
integrations: [
preact({
include: ['**/preact/*'],
}),
react({
include: ['**/react/*'],
}),
solid({
include: ['**/solid/*'],
}),
],
});

Filhos passados para um componente React de um componente Astro são analisadas como strings simples, não como nós React.

Por exemplo, o <ReactComponent /> abaixo receberá apenas um único elemento filho:

---
import ReactComponent from './ReactComponent';
---
<ReactComponent>
<div>um</div>
<div>dois</div>
</ReactComponent>

Se você estiver usando uma biblioteca que espera que mais de um elemento filho seja passado, por exemplo, para que ela possa encaixar certos elementos em lugares diferentes, você pode achar isso um bloqueio.

Você pode definir a opção experimental experimentalReactChildren para dizer ao Astro para sempre passar filhos para o React como nós virtuais do React. Há um custo de tempo de execução para isso, mas pode ajudar com a compatibilidade.

Você pode habilitar esta opção na configuração para a integração React:

astro.config.mjs
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
export default defineConfig({
// ...
integrations: [
react({
experimentalReactChildren: true,
}),
],
});

Mais integrações

Frameworks de UI

Adaptadores de SSR

Outras integrações