diff --git a/content/docs/add-react-to-a-website.md b/content/docs/add-react-to-a-website.md index 11b99d37a..b926256ff 100644 --- a/content/docs/add-react-to-a-website.md +++ b/content/docs/add-react-to-a-website.md @@ -1,6 +1,6 @@ --- id: add-react-to-a-website -title: Add React to a Website +title: Adicione o React a um site permalink: docs/add-react-to-a-website.html redirect_from: - "docs/add-react-to-an-existing-app.html" @@ -8,127 +8,127 @@ prev: getting-started.html next: create-a-new-react-app.html --- -Use as little or as much React as you need. +Use o React o quanto precisar, sendo pouco ou muito. -React has been designed from the start for gradual adoption, and **you can use as little or as much React as you need**. Perhaps you only want to add some "sprinkles of interactivity" to an existing page. React components are a great way to do that. +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. -The majority of websites aren't, and don't need to be, single-page apps. With **a few lines of code and no build tooling**, try React in a small part of your website. You can then either gradually expand its presence, or keep it contained to a few dynamic widgets. +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. --- -- [Add React in One Minute](#add-react-in-one-minute) -- [Optional: Try React with JSX](#optional-try-react-with-jsx) (no bundler necessary!) +- [Adicione o React em Um Minuto](#add-react-in-one-minute) +- [Opcional: Experimente o React com JSX](#optional-try-react-with-jsx) (sem empacotador necessário!) -## Add React in One Minute {#add-react-in-one-minute} +## Adicione o React em Um Minuto {#add-react-in-one-minute} -In this section, we will show how to add a React component to an existing HTML page. You can follow along with your own website, or create an empty HTML file to practice. +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. -There will be no complicated tools or install requirements -- **to complete this section, you only need an internet connection, and a minute of your time.** +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.** -Optional: [Download the full example (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip) +Opcional: [Faça o download do exemplo completo (2KB zipado)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip) -### Step 1: Add a DOM Container to the HTML {#step-1-add-a-dom-container-to-the-html} +### Passo 1: Adicionar um contêiner DOM ao HTML {#passo-1-adicionar-um-conteiner-dom-ao-html} -First, open the HTML page you want to edit. Add an empty `
` tag to mark the spot where you want to display something with React. For example: +Primeiramente, abra a página HTML que você deseja alterar. Adicione uma tag `
` vazia para marcar o local onde você deseja exibir algo com o React. Por exemplo: ```html{3} - +
- + ``` -We gave this `
` a unique `id` HTML attribute. This will allow us to find it from the JavaScript code later and display a React component inside of it. +Nós atribuimos a esta `
` um atributo HTML `id` único. Isso nos permitirá encontrá-lo no código JavaScript e mais tarde exibir um componente React dentro dele. ->Tip +>Dica > ->You can place a "container" `
` like this **anywhere** inside the `` tag. You may have as many independent DOM containers on one page as you need. They are usually empty -- React will replace any existing content inside DOM containers. +>Você pode colocar um "contêiner" como esta `
` em **qualquer lugar** dentro da tag ``. 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. -### Step 2: Add the Script Tags {#step-2-add-the-script-tags} +### Passo 2: Adicionar as Tags Script {#step-2-add-the-script-tags} -Next, add three ` - + ``` -The first two tags load React. The third one will load your component code. +As duas primeiras tags adicionam o React. A terceira irá adicionar o código de seu componente. -### Step 3: Create a React Component {#step-3-create-a-react-component} +### Passo 3: Criar um Componente React {#passo-3-criar-um-componente-react} -Create a file called `like_button.js` next to your HTML page. +Crie um arquivo chamado `like_button.js` próximo a sua página HTML. -Open **[this starter code](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)** and paste it into the file you created. +Abra **[este código inicial](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)** e copie o conteúdo no arquivo que você criou. ->Tip +>Dica > ->This code defines a React component called `LikeButton`. Don't worry if you don't understand it yet -- we'll cover the building blocks of React later in our [hands-on tutorial](/tutorial/tutorial.html) and [main concepts guide](/docs/hello-world.html). For now, let's just get it showing on the screen! +>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](/tutorial/tutorial.html) e em nosso [guia dos conceitos principais](/docs/hello-world.html). Por enquanto, vamos apenas fazer funcionar! -After **[the starter code](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)**, add two lines to the bottom of `like_button.js`: +Depois **[do código inicial](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)**, adicione essas duas linhas no final do arquivo `like_button.js`: ```js{3,4} -// ... the starter code you pasted ... +// ... o código inicial que você copiou ... const domContainer = document.querySelector('#like_button_container'); ReactDOM.render(e(LikeButton), domContainer); ``` -These two lines of code find the `
` we added to our HTML in the first step, and then display our "Like" button React component inside of it. +Essas duas linhas de código encontram a `
` que adicionamos em nosso HTML no primeiro passo e então mostrará o componente React dentro dele. -### That's It! {#thats-it} +### É Isso Aí! {#thats-it} -There is no step four. **You have just added the first React component to your website.** +Não existe quarto passo. **Você acabou de adicionar seu primeiro componente React ao seu site.** -Check out the next sections for more tips on integrating React. +Confira nas próximas seções para mais dicas de como integrar o React. -**[View the full example source code](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605)** +**[Veja o código fonte completo do exemplo](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605)** -**[Download the full example (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)** +**[Faça o download do exemplo completo (2KB zipado)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)** -### Tip: Reuse a Component {#tip-reuse-a-component} +### Dica: Reutilize um Componente {#tip-reuse-a-component} -Commonly, you might want to display React components in multiple places on the HTML page. Here is an example that displays the "Like" button three times and passes some data to it: +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: -[View the full example source code](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda) +[Veja o código fonte completo do exemplo](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda) -[Download the full example (2KB zipped)](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda/archive/9d0dd0ee941fea05fd1357502e5aa348abb84c12.zip) +[Faça o download do exemplo completo (2KB zipado)](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda/archive/9d0dd0ee941fea05fd1357502e5aa348abb84c12.zip) ->Note +>Nota > ->This strategy is mostly useful while React-powered parts of the page are isolated from each other. Inside React code, it's easier to use [component composition](/docs/components-and-props.html#composing-components) instead. +>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](/docs/components-and-props.html#composing-components). -### Tip: Minify JavaScript for Production {#tip-minify-javascript-for-production} +### Dica: Minifique o JavaScript para Produção {#tip-minify-javascript-for-production} -Before deploying your website to production, be mindful that unminifed JavaScript can significantly slow down the page for your users. +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. -If you already minify the application scripts, **your site will be production-ready** if you ensure that the deployed HTML loads the versions of React ending in `production.min.js`: +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`: ```js ``` -If you don't have a minification step for your scripts, [here's one way to set it up](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3). +Se você não possui uma etapa de minificação para seus scripts, [aqui está um jeito de configurá-lo](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3). -## Optional: Try React with JSX {#optional-try-react-with-jsx} +## Opcional: Experimente o React com JSX {#optional-try-react-with-jsx} -In the examples above, we only relied on features that are natively supported by the browsers. This is why we used a JavaScript function call to tell React what to display: +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: ```js const e = React.createElement; -// Display a "Like"