Use o React o quanto precisar, sendo pouco ou muito.
\nReact 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.
\nA 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.
\nNesta 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.
\nNã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.
\nOpcional: Faça o download do exemplo completo (2KB zipado)
\nPrimeiramente, 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 ... -->\n\n<div id=\"like_button_container\"></div>\n<!-- ... 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.
\n\nDica
\nVocê pode colocar um “contêiner” como esta
\n<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.
A seguir, adicione três tags <script> em sua página HTML logo antes do fechamento da tag </body>:
<!-- ... HTML qualquer ... -->\n\n <!-- Adicionar o React. -->\n <!-- Nota: ao fazer o deploy, substitua \"development.js\" por \"production.min.js\". -->\n <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>\n <!-- Adicione nosso componente React. -->\n <script src=\"like_button.js\"></script>\n</body>As duas primeiras tags adicionam o React. A terceira irá adicionar o código de seu componente.
\nCrie 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.
\n\n\nDica
\nEsse código define um componente React chamado
\nLikeButton. 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 ...\n\nconst 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.
Não existe quarto passo. Você acabou de adicionar seu primeiro componente React ao seu site.
\nConfira nas próximas seções para mais dicas de como integrar o React.
\nVeja o código fonte completo do exemplo
\nFaça o download do exemplo completo (2KB zipado)
\nNormalmente, 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:
\nVeja o código fonte completo do exemplo
\nFaça o download do exemplo completo (2KB zipado)
\n\n\nNota
\nEssa 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.
\n
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.
\nSe 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>\n<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.
\nNos 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:
\nconst e = React.createElement;\n\n// Exibe um \"Like\" <button>\nreturn e(\n 'button',\n { onClick: () => this.setState({ liked: true }) },\n 'Like'\n);Portanto, o React também oferece a opção de usar o JSX como alternativa:
\n// Exibe um \"Like\" <button>\nreturn (\n <button onClick={() => this.setState({ liked: true })}>\n Like\n </button>\n);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.
\nVocê pode testar com JSX usando esse conversor online.
\nA 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 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.
\nNo terminal, vá até a pasta do seu projeto e cole esses dois comandos:
\nnpm init -y (se falhar, aqui está uma correção)npm install babel-cli@6 babel-preset-react-app@3\n\nDica
\nEstamos 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
\n<script>.
Parabéns! Você acabou de adicionar uma configuração JSX pronta para produção em seu projeto.
\nCrie uma pasta chamada src e execute no terminal esse comando:
npx babel --watch src --out-dir . --presets react-app/prod\n\nNota
\n\n
npxnão é um erro de digitação — é uma ferramenta de executar pacotes que vem com npm 5.2+.Se você ver uma mensagem de erro dizendo “You have mistakenly installed the
\nbabelpackage”, 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.
\nSe 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.
\nSe 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.
","frontmatter":{"title":"Adicione o React a um site","next":"create-a-new-react-app.html","prev":"getting-started.html"},"fields":{"path":"content/docs/add-react-to-a-website.md","slug":"docs/add-react-to-a-website.html"}}},"pageContext":{"slug":"docs/add-react-to-a-website.html"}},"staticQueryHashes":[]}