Adicione o React a um site

Use o React o quanto precisar, sendo pouco ou muito.

React foi projetado desde o início para adoção gradual e você pode usar o React o quanto precisar, sendo pouco ou muito. Talvez você só queira adicionar alguns “pontos de interatividade” a uma página existente. Os componentes React são uma ótima maneira de fazer isso.

A grande maioria dos sites não são e não precisam ser, single-page apps. Você pode usar o React em uma pequena parte do seu site com poucas linhas de código e nenhuma ferramenta de build. Você também pode expandir gradualmente sua presença ou mantê-lo contido em alguns widgets dinâmicos.

Adicione o React em Um Minuto
Opcional: Experimente o React com JSX (sem empacotador necessário!)

Adicione o React em Um Minuto

Nesta seção, mostraremos como adicionar um componente React a uma página HTML existente. Você pode usar seu próprio site ou criar um arquivo HTML vazio para praticar.

Não será necessário usar alguma ferramenta complicada ou instalar algo — para completar essa seção, você só precisa de uma conexão de internet e um minuto de seu tempo.

Opcional: Faça o download do exemplo completo (2KB zipado)

Passo 1: Adicionar um contêiner DOM ao HTML

Primeiramente, abra a página HTML que você deseja alterar. Adicione uma tag <div> vazia para marcar o local onde você deseja exibir algo com o React. Por exemplo:

<!-- ... HTML existente ... -->

<div id="like_button_container"></div>
<!-- ... HTML existente ... -->

Nós atribuimos a esta <div> um atributo HTML id único. Isso nos permitirá encontrá-lo no código JavaScript e mais tarde exibir um componente React dentro dele.

Dica

Você pode colocar um “contêiner” como esta <div> em qualquer lugar dentro da tag <body>. Você pode ter vários contêineres DOM independentes em uma página. Eles geralmente são vazios — o React vai substituir qualquer conteúdo existente dentro deles.

Passo 2: Adicionar as Tags Script

A seguir, adicione três tags <script> em sua página HTML logo antes do fechamento da tag </body>:

  <!-- ... HTML qualquer ... -->

  <!-- Adicionar o React. -->
  <!-- Nota: ao fazer o deploy, substitua "development.js" por "production.min.js". -->
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
  <!-- Adicione nosso componente React. -->
  <script src="like_button.js"></script>
</body>

As duas primeiras tags adicionam o React. A terceira irá adicionar o código de seu componente.

Passo 3: Criar um Componente React

Crie um arquivo chamado like_button.js próximo a sua página HTML.

Abra este código inicial e copie o conteúdo no arquivo que você criou.

Dica

Esse código define um componente React chamado LikeButton. Não se preocupe se você ainda não entendeu — mais tarde vamos cobrir os blocos de construção do React em nosso tutorial e em nosso guia dos conceitos principais. Por enquanto, vamos apenas fazer funcionar!

Depois do código inicial, adicione essas duas linhas no final do arquivo like_button.js:

// ... o código inicial que você copiou ...

const domContainer = document.querySelector('#like_button_container');ReactDOM.render(e(LikeButton), domContainer);

Essas duas linhas de código encontram a <div> que adicionamos em nosso HTML no primeiro passo e então mostrará o componente React dentro dele.

É Isso Aí!

Não existe quarto passo. Você acabou de adicionar seu primeiro componente React ao seu site.

Confira nas próximas seções para mais dicas de como integrar o React.

Veja o código fonte completo do exemplo

Faça o download do exemplo completo (2KB zipado)

Dica: Reutilize um Componente

Normalmente, você pode querer exibir seus componentes React em vários lugares em sua página HTML. Aqui está um exemplo que exibe o botão “Like” três vezes e passa alguns dados para ele:

Veja o código fonte completo do exemplo

Faça o download do exemplo completo (2KB zipado)

Nota

Essa estratégia é mais útil quando as partes da página com React estão isoladas uma das outras. Dentro do código do React, é mais fácil de usar composição de componentes.

Dica: Minifique o JavaScript para Produção

Antes de realizar o deploy de seu site para produção, lembre-se que o código JavaScript não minificado pode deixar sua página significamente mais lenta para seus usuários.

Se você já minifica os scripts da sua aplicação, seu site estará pronto para produção se você garantir que o HTML carregue a versão do React terminando em production.min.js:

<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>

Se você não possui uma etapa de minificação para seus scripts, aqui está um jeito de configurá-lo.

Opcional: Experimente o React com JSX

Nos exemplos acima, nós contamos apenas com recursos que são nativamentes suportados pelos navegadores. E é por isso que usamos uma chamada de função JavaScript para informar ao React o que exibir:

const e = React.createElement;

// Exibe um "Like" <button>
return e(
  'button',
  { onClick: () => this.setState({ liked: true }) },
  'Like'
);

Portanto, o React também oferece a opção de usar o JSX como alternativa:

// Exibe um "Like" <button>
return (
  <button onClick={() => this.setState({ liked: true })}>
    Like
  </button>
);

Esses dois blocos de código são equivalentes. Enquanto o JSX é completamente opcional, muitas pessoas acham útil para escrever código de UI — junto com React e com outras bibliotecas.

Você pode testar com JSX usando esse conversor online.

Experimente Rapidamente JSX

A maneira mais rápida de experimentar o JSX em seu projeto é adicionando essa tag <script> em sua página:

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

Agora você pode usar o JSX em qualquer tag <script> somente adicionando o atributo type="text/babel" a ele. Aqui está um exemplo de arquivo HTML com JSX em que você pode efetuar o download e testar.

Essa abordagem é boa para aprender e criar demostrações simples. Portanto, o site fica lento e não fica adequado para produção. Quando você estiver pronto para seguir em frente, remova essa nova tag <script> e os atributos type="text/babel" que você adicionou. Em vez disso, na seção a seguir você ira configurar um pré-processador JSX para converter todas suas tags <script> automaticamente.

Adicionar JSX a um Projeto

Adicionar JSX a um projeto não requer ferramentas complicadas, como um empacotador ou um servidor de desenvolvimento. Basicamente, adicionar JSX é como adicionar um pré-processador CSS. O único requisito é possuir o Node.js instalado em seu computador.

No terminal, vá até a pasta do seu projeto e cole esses dois comandos:

Passo 1: Execute npm init -y (se falhar, aqui está uma correção)
Passo 2: Execute npm install babel-cli@6 babel-preset-react-app@3

Dica

Estamos usando npm aqui somente para instalar o pré-processador do JSX; você não precisará dele para mais nada. Tanto o React quanto o código da aplicação pode continuar sem mudanças nas tags <script>.

Parabéns! Você acabou de adicionar uma configuração JSX pronta para produção em seu projeto.

Execute o Pré-processador JSX

Crie uma pasta chamada src e execute no terminal esse comando:

npx babel --watch src --out-dir . --presets react-app/prod

Nota

npx não é um erro de digitação — é uma ferramenta de executar pacotes que vem com npm 5.2+.

Se você vir uma mensagem de erro dizendo “You have mistakenly installed the babel package”, você pode ter perdido o passo anterior. Execute o passo anterior na mesma pasta e tente novamente.

Não espere o comando finalizar — esse comando inicia um watcher automatizado para o JSX.

Se você criar um arquivo chamado src/like_button.js com esse este código JSX inicial, o watcher criará um like_button.js pré-processado com o código JavaScript adequado para o navegador. Quando você edita o arquivo com JSX, a transpilação será executada automaticamente.

Como um bônus, isso também permite que você use recursos modernos do JavaScript, como classes, sem se preocupar com a incompatibilidade de navegadores antigos. A ferramenta que acabamos de usar é chamada de Babel e você pode aprender mais sobre ele em sua documentação.

Se você se sentir confortável com ferramentas de build e deseja que eles façam mais por você, a próxima seção descreve alguma das mais populares e acessíveis ferramentas. Caso contrário, essas tags scripts funcionarão perfeitamente.

Esta página é útil?Edite esta página