@astrojs/ react

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

Instalação

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:

npx astro add react

pnpm astro add react

yarn astro add react

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

Instalação manual

Primeiro, instale o pacote @astrojs/react:

npm install @astrojs/react

pnpm add @astrojs/react

yarn add @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:

npm install react react-dom

pnpm add react react-dom

yarn add react react-dom

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

import { defineConfig } from 'astro/config';
import react from '@astrojs/react';

export default defineConfig({
  // ...
  integrations: [react()],
});

Primeiros passos

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

Opções

Combinando múltiplos frameworks JSX

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:

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/*'],
    }),
  ],
});

Conversão de filhos

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:

import { defineConfig } from 'astro/config';
import react from '@astrojs/react';

export default defineConfig({
  // ...
  integrations: [
    react({
      experimentalReactChildren: true,
    }),
  ],
});