# Microfrontends com React, Angular e WU

Integre React e Angular com WU Framework: shell, adapters, comunicação e migração gradual. Explore também exemplos React/Vue e bindings para Svelte e Lit.

Este guia desenvolve o caso de React e Angular como exemplo de integração. Para trabalhar com Svelte, Stimulus ou qualquer outra tecnologia incluída, consulte o [catálogo completo de adapters](/pt/docs/framework/api-adapters/). WU usa um contrato de ciclo de vida independente do framework.

<span id="conservar-cada-framework-y-compartir-un-contrato"></span>

<span class="section-anchor" id="section-1"></span>

## Manter cada framework e compartilhar um contrato

Uma página pode hospedar uma capacidade React e outra Angular sem converter seus componentes para o mesmo renderer. Cada app mantém seu build; o shell fornece um contêiner e WU coordena seu ciclo de vida. A mesma abordagem permite uma migração gradual: substitua uma capacidade por vez e preserve as rotas de acesso do produto.

Isso exige adaptar as entradas das aplicações. Uma SPA que controla todo o documento não fica integrada apenas ao adicionar sua URL ao catálogo. Ela deve montar dentro do contêiner recebido e liberar seus recursos ao desmontar.

<span id="react-registrar-el-renderer-que-usa-tu-aplicación"></span>

<span class="section-anchor" id="section-2"></span>

## React: registrar o renderer usado pela aplicação

O adapter React recebe o componente raiz e as instâncias de React e ReactDOM. Use o mesmo runtime do seu build; o [guia de integrações](/pt/docs/framework/integrations/) mostra o registro com runtime explícito e a montagem a partir do Astro.

O percurso completo para começar é [criar uma app React](/pt/docs/guides/quickstart/), [adicionar Vue](/pt/docs/guides/add-an-app/) e [compartilhar um contador](/pt/docs/guides/shared-counter/). O último exemplo inclui fontes e ZIP; permite verificar mudanças nos dois renderers e a limpeza ao desmontar.

<span id="angular-elegir-el-adapter-correcto"></span>

<span class="section-anchor" id="section-3"></span>

## Angular: escolher o adapter correto

WU inclui entradas diferentes para aplicações baseadas em módulos, componentes standalone e Angular Elements. Escolha conforme a arquitetura da aplicação, não pelo nome do contêiner.

| Aplicação Angular | API de WU | O que preparar |
| --- | --- | --- |
| Baseada em NgModule | `register` | Módulo raiz, plataforma e seletor raiz |
| Componente standalone | `registerStandalone` | Componente, configuração e funções de criação do Angular |
| Angular Elements | `registerElement` | Dependência Angular Elements e nome do custom element |

Consulte assinaturas e opções na [referência de adapters](/pt/docs/framework/api-adapters/#angularregisterstandalone). O CLI oferece um template Angular com configuração de build e registro standalone: revise os arquivos em [templates do CLI](/pt/docs/cli/templates/) antes de transferir uma aplicação existente.

Framework 4 suporta atualização de inputs standalone, montagem zoneless e aplicações com Zone.js. Keep-alive pausa e retoma o detector de mudanças do componente. Veja a [matriz de adapters](/pt/docs/framework/api-adapters/) para opções e versões verificadas.

<span id="comunicación-entre-react-y-angular"></span>

<span class="section-anchor" id="section-4"></span>

## Comunicação entre React e Angular

Mantenha o estado visual em cada renderer. Compartilhe dados pelo store, fatos por eventos e operações por contratos/RPC. No Framework 4, bindings dentro de uma microapp usam sua facade e identidade; declare as solicitações e grants necessários. Fora de uma montagem WU, bindings standalone podem usar o runtime global.

Os exemplos de [contador compartilhado](/pt/docs/guides/shared-counter/) e [serviço de soma por RPC](/pt/docs/guides/rpc-between-apps/) ensinam os contratos usando React e Vue. Ao levá-los para Angular, preserve os contratos e adapte a assinatura, a atualização da interface e a limpeza ao seu ciclo de vida.

<span id="vue-svelte-lit-y-otros-renderers"></span>

<span class="section-anchor" id="section-5"></span>

## Vue, Svelte, Lit e outros renderers

O pacote também publica adapters para Vue, Svelte, Preact, Solid, Lit, Vanilla, Alpine, Qwik, Stencil, HTMX e Stimulus. Astro e Next têm integrações de shell. O [catálogo de adapters](/pt/docs/framework/api-adapters/) descreve suas diferenças; os [templates](/pt/docs/cli/templates/) distinguem o suporte de geração do pipeline completo de cada framework.

Antes de migrar outra capacidade, verifique montagem, navegação, estilos, comunicação e desmontagem com as versões do seu projeto. Use [produção](/pt/docs/guides/production/) para revisar os assets publicados e [diagnóstico](/pt/docs/framework/troubleshooting/) se uma app ficar vazia.