Adicionar React a um Projeto Existente

Se você quer adicionar alguma interatividade ao seu projeto existente, não precisa reescrevê-lo em React. Adicione React à sua stack existente e renderize componentes React interativos em qualquer lugar.

Usar React para uma sub-rota inteira do seu site existente

Digamos que você tenha um aplicativo web existente emexample.comconstruído com outra tecnologia de servidor (como Rails), e você queira implementar todas as rotas começando comexample.com/some-app/totalmente com React.

Aqui está como recomendamos configurá-lo:

1. Construa a parte React do seu aplicativousando um dosframeworks baseados em React.
2. Especifique/some-appcomo ocaminho basena configuração do seu framework (aqui está como:Next.js,Gatsby).
3. Configure seu servidor ou um proxypara que todas as requisições sob/some-app/sejam tratadas pelo seu aplicativo React.

Isso garante que a parte React do seu aplicativo possabeneficiar-se das melhores práticasincorporadas nesses frameworks.

Muitos frameworks baseados em React são full-stack e permitem que seu aplicativo React aproveite o servidor. No entanto, você pode usar a mesma abordagem mesmo se não puder ou não quiser executar JavaScript no servidor. Nesse caso, sirva a exportação HTML/CSS/JS (saída de exportação estática do Next.jspara Next.js, padrão para Gatsby) em/some-app/em vez disso.

Usar React para uma parte da sua página existente

Digamos que você tenha uma página existente construída com outra tecnologia (seja uma de servidor como Rails, ou uma de cliente como Backbone), e você queira renderizar componentes React interativos em algum lugar dessa página. Essa é uma forma comum de integrar o React—na verdade, foi assim que a maioria do uso do React se parecia na Meta por muitos anos!

Você pode fazer isso em duas etapas:

1. Configure um ambiente JavaScriptque permita usar asintaxe JSX, dividir seu código em módulos com a sintaxeimport/export, e usar pacotes (por exemplo, React) do registro de pacotesnpm.
2. Renderize seus componentes Reactonde você quiser vê-los na página.

A abordagem exata depende da configuração da sua página existente, então vamos detalhar alguns pontos.

Etapa 1: Configurar um ambiente JavaScript modular

Um ambiente JavaScript modular permite que você escreva seus componentes React em arquivos individuais, em vez de escrever todo o seu código em um único arquivo. Ele também permite que você use todos os pacotes maravilhosos publicados por outros desenvolvedores no registronpm—incluindo o próprio React! Como você faz isso depende da sua configuração existente:

• Se o seu aplicativo já está dividido em arquivos que usam instruçõesimport,tente usar a configuração que você já tem. Verifique se escrever<div />no seu código JS causa um erro de sintaxe. Se causar um erro de sintaxe, talvez você precisetransformar seu código JavaScript com Babele habilitar opreset React do Babelpara usar JSX.
• Se o seu aplicativo não tem uma configuração existente para compilar módulos JavaScript,configure-o comVite. A comunidade Vite mantémmuitas integrações com frameworks de backend, incluindo Rails, Django e Laravel. Se o seu framework de backend não estiver listado,siga este guiapara integrar manualmente as builds do Vite com seu backend.

Para verificar se sua configuração funciona, execute este comando na pasta do seu projeto:

npm install react react-dom

Em seguida, adicione estas linhas de código no topo do seu arquivo JavaScript principal (pode ser chamado deindex.jsoumain.js):

Se todo o conteúdo da sua página foi substituído por um “Hello, world!”, tudo funcionou! Continue lendo.

Etapa 2: Renderize componentes React em qualquer lugar da página

Na etapa anterior, você colocou este código no topo do seu arquivo principal:

Claro, você não quer realmente limpar o conteúdo HTML existente!

Exclua este código.

Em vez disso, você provavelmente deseja renderizar seus componentes React em locais específicos do seu HTML. Abra sua página HTML (ou os templates do servidor que a geram) e adicione um atributoidexclusivo a qualquer tag, por exemplo:

Isso permite que você encontre esse elemento HTML comdocument.getElementByIde o passe paracreateRootpara que você possa renderizar seu próprio componente React dentro:

Observe como o conteúdo HTML original deindex.htmlé preservado, mas seu próprio componente ReactNavigationBaragora aparece dentro do<nav id="navigation">do seu HTML. Leia adocumentação de uso do createRootpara saber mais sobre como renderizar componentes React dentro de uma página HTML existente.

Ao adotar o React em um projeto existente, é comum começar com pequenos componentes interativos (como botões) e, em seguida, gradualmente continuar "subindo" até que eventualmente toda a sua página seja construída com React. Se você chegar a esse ponto, recomendamos migrar paraum framework Reactlogo em seguida para aproveitar ao máximo o React.

Usando React Native em um aplicativo móvel nativo existente

React Nativetambém pode ser integrado incrementalmente em aplicativos nativos existentes. Se você tem um aplicativo nativo existente para Android (Java ou Kotlin) ou iOS (Objective-C ou Swift),siga este guiapara adicionar uma tela React Native a ele.