@astrojs/ react
Esta integração Astro habilita a renderização no servidor e a hidratação no cliente para seus componentes React.
Instalação
Seção intitulada InstalaçãoO 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:
Se encontrar algum problema, sinta-se à vontade para relatar no GitHub e tente as etapas de instalação manual abaixo.
Instalação manual
Seção intitulada Instalação manualPrimeiro, instale o pacote @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
:
Em seguida, utilize a integração no seu arquivo astro.config.*
usando a propriedade integrations
:
Primeiros passos
Seção intitulada Primeiros passosPara 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
Seção intitulada OpçõesCombinando múltiplos frameworks JSX
Seção intitulada Combinando múltiplos frameworks JSXQuando 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:
Conversão de filhos
Seção intitulada Conversão de filhosFilhos 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:
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: