Aprenda React
Instalação

Adicionar React a um Projeto Existente

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

Note

Você precisa instalar o Node.js para o desenvolvimento local. Embora você possa experimentar o React online ou com uma simples página HTML, realisticamente a maioria das ferramentas JavaScript que você vai querer usar para desenvolvimento requer o Node.js.

Usando o React para uma subrota inteira do seu site existente

Digamos que você tenha um aplicativo da web existente em example.com construído com outra tecnologia de servidor (como Rails) e você deseja implementar todas as rotas iniciando em example.com/some-app/ completamente com React.

Veja como recomendamos configurá-lo:

  1. Construa a parte React do seu aplicativo usando um dos frameworks baseados em React.
  2. Especifique /some-app como o caminho base na configuração do seu framework (veja como: Next.js, Gatsby).
  3. Configure seu servidor ou um proxy para que todas as solicitações em /some-app/ sejam tratadas pelo seu aplicativo React.

Isso garante que a parte React do seu aplicativo possa se beneficiar das melhores práticas embutidas nesses frameworks.

Muitos frameworks baseados em React são full stack e permitem que seu aplicativo React tire proveito do servidor. No entanto, você pode usar a mesma abordagem mesmo se não puder ou não quiser executar JavaScript no servidor. Nesse caso, exponha os HTML/CSS/JS exportados (saída next export para o Next.js, padrão para o Gatsby) em /some-app/ em vez disso.

Usando o React para uma parte da sua página existente

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

Você pode fazer isso em duas etapas:

  1. Configure um ambiente JavaScript que permita o uso da sintaxe JSX, divida o seu código em módulos com a sintaxe import / export e utilize pacotes (por exemplo, React) do registro de pacotes npm.
  2. Renderize seus componentes React onde você deseja vê-los na página.

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

Passo 1: Configure 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. Também permite que você use todos os pacotes maravilhosos publicados por outros desenvolvedores no registro npm— incluindo o próprio React! Como fazer isso depende da sua configuração existente:

  • Se o seu aplicativo já está dividido em arquivos que usam declarações import, 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, você pode precisar transformar seu código JavaScript com o Babel e habilitar o Babel React preset para usar JSX.

  • Se o seu aplicativo não possui uma configuração existente para compilar módulos JavaScript, configure-o com o Vite. A comunidade do Vite mantém muitas integrações com frameworks backend, incluindo Rails, Django e Laravel. Se o seu framework backend não estiver listado, siga este guia para integrar manualmente a construção do Vite com seu backend.

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

Terminal
npm install react react-dom

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

import { createRoot } from 'react-dom/client';

// Limpar o conteúdo HTML existente
document.body.innerHTML = '<div id="app"></div>';

// Em vez disso, renderize seu componente React
const root = createRoot(document.getElementById('app'));
root.render(<h1>Hello, world</h1>);

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

Note

Integrar um ambiente JavaScript modular em um projeto existente pela primeira vez pode parecer intimidante, mas vale a pena! Se você ficar preso, experimente os nossos recursos da comunidade ou o Vite Chat.

Passo 2: Renderizar componentes React em qualquer lugar da página

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

import { createRoot } from 'react-dom/client';

// Limpar o conteúdo HTML existente
document.body.innerHTML = '<div id="app"></div>';

// Em vez disso, renderize seu componente React
const root = createRoot(document.getElementById('app'));
root.render(<h1>Hello, world</h1>);

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

Apague este código.

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

<!-- ... em algum lugar no seu HTML. ... -->
<nav id="navigation"></nav>
<!-- ... mais html ... -->

Isso permite que você encontre aquele elemento HTML com document.getElementById e o passe para createRoot para que você possa renderizar seu próprio componente React dentro dele:

import { createRoot } from 'react-dom/client';

function NavigationBar() {
  // TODO: Implemente de fato uma barra de navegação.
  return <h1>Hello from React!</h1>;
}

const domNode = document.getElementById('navigation');
const root = createRoot(domNode);
root.render(<NavigationBar />);

Observe como o conteúdo HTML original de index.html é preservado, mas o seu próprio componente React NavigationBar agora aparece dentro do <nav id="navigation" /> do seu HTML. Leia a documentação de uso do createRoot para aprender mais sobre como renderizar componentes React dentro de uma página HTML existente.

Quando você adota o React em um projeto existente, é comum começar com pequenos componentes interativos (como botões) e, gradualmente, “subir de nível” até que eventualmente toda a sua página seja construída com React. Se você chegar a esse ponto, recomendamos migrar para um framework React imediatamente para aproveitar ao máximo o React.

Usando o React Native em um aplicativo móvel nativo existente

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

PreviousComece um Novo Projeto React
NextConfiguração do Editor