diff --git a/beta/src/pages/learn/add-react-to-a-website.md b/beta/src/pages/learn/add-react-to-a-website.md
index 474514cb9..65396bfdf 100644
--- a/beta/src/pages/learn/add-react-to-a-website.md
+++ b/beta/src/pages/learn/add-react-to-a-website.md
@@ -1,56 +1,56 @@
---
-title: Add React to a Website
+title: Adicione o React a um site
---
-React has been designed from the start for gradual adoption, and you can use as little or as much React as you need. Whether you're working with micro-frontends, an existing system, or just giving React a try, you can start adding interactive React components to an HTML page with just a few lines of code—and no build tooling!
+React foi projetado desde o início para adoção gradual e você pode usar o React o quanto precisar, sendo pouco ou muito. Quer você esteja trabalhando com micro-frontends, um sistema existente, ou experimentando o React, você pode começar adicionando componentes interativos do React a uma página HTML com apenas algumas linhas de código - e nenhuma ferramenta de build!
-## Add React in one minute {/*add-react-in-one-minute*/}
+## Adicione o React em Um Minuto {/*add-react-in-one-minute*/}
-You can add a React component to an existing HTML page in under a minute. Try this out with your own website or [an empty HTML file](https://gist.github.com/rachelnabors/7b33305bf33776354797a2e3c1445186/archive/859eac2f7079c9e1f0a6eb818a9684a464064d80.zip)—all you need is an internet connection and a text editor like Notepad (or VSCode—check out our guide on [how to set yours up](/learn/editor-setup/))!
+Você pode adicionar um componente React em uma página HTML existente em menos de um minuto. Você pode usar em seu próprio site ou [em um arquivo HTML vazio](https://gist.github.com/rachelnabors/7b33305bf33776354797a2e3c1445186/archive/859eac2f7079c9e1f0a6eb818a9684a464064d80.zip)—tudo o que você precisa é uma conexão de internet e um editor de texto como o Notepad (ou o VSCode-verifique nosso guia sobre [como configurar](/learn/editor-setup/))!
-### Step 1: Add an element to the HTML {/*step-1-add-an-element-to-the-html*/}
+### Passo 1: Adicionar um elemento ao HTML {/*step-1-add-an-element-to-the-html*/}
-In the HTML page you want to edit, add an HTML element like an empty `
` tag with a unique `id` to mark the spot where you want to display something with React.
+Primeiramente, abra a página HTML que você deseja alterar. Adicione uma tag `
` com um `id` único para marcar o local onde você deseja exibir algo com o React.
-You can place a "container" element like this `
` anywhere inside the `` tag. React will replace any existing content inside HTML elements, so they are usually empty. You can have as many of these HTML elements on one page as you need.
+Você pode colocar um elemento "contêiner" como esta `
` em qualquer lugar dentro da tag ``. O React irá substituir qualquer conteúdo dentro desses elementos HTML, então eles geralmente estão vazios. Você pode ter quantos desses elementos HTML você precisar em uma página.
```html {3}
-
+
-
+
```
-### Step 2: Add the Script Tags {/*step-2-add-the-script-tags*/}
+### Passo 2: Adicionar as Tags Script {/*step-2-add-the-script-tags*/}
-In the HTML page, right before the closing `` tag, add three `
```
-### Step 3: Create a React component {/*step-3-create-a-react-component*/}
+### Passo 3: Criar um Componente React {/*step-3-create-a-react-component*/}
-Create a file called **like_button.js** next to your HTML page, add this code snippet, and save the file. This code defines a React component called `LikeButton`. [You can learn more about making components in our guides.](/learn/your-first-component)
+Crie um arquivo com o nome `like_button.js` na pasta de sua página HTML, adicione esse trecho de código, e salve o arquivo. Esse código define um componente React chamando `LikeButton`. [Você pode aprender mais sobre criação de componentes em nossos tutoriais.](/learn/your-first-component)
```js
'use strict';
@@ -72,26 +72,26 @@ function LikeButton() {
}
```
-### Step 4: Add your React Component to the page {/*step-4-add-your-react-component-to-the-page*/}
+### Passo 4: Adicionar seu Componente React a página {/*step-4-add-your-react-component-to-the-page*/}
-Lastly, add two lines to the bottom of **like_button.js**. These two lines of code find the `
` you added to your HTML in the first step and then display the "Like" button React component inside of it.
+Por último, adicione duas linhas ao final de **like_button.js**. Essas duas linhas de código irão procurar a tag `
` que você adicionou em seu HTML no primeiro passo e então exibir o componente React do botão "Curtir" nela.
```js
const domContainer = document.getElementById('component-goes-here');
ReactDOM.render(React.createElement(LikeButton), domContainer);
```
-**Congratulations! You have just rendered your first React component to your website!**
+**Parabéns! Você acaba de renderizar seu primeiro componente em seu website!**
-- [View the full example source code](https://gist.github.com/rachelnabors/c64b3aeace8a191cf5ea6fb5202e66c9)
-- [Download the full example (2KB zipped)](https://gist.github.com/rachelnabors/c64b3aeace8a191cf5ea6fb5202e66c9/archive/7b41a88cb1027c9b5d8c6aff5212ecd3d0493504.zip)
+- [Ver o código fonte do exemplo completo](https://gist.github.com/rachelnabors/c64b3aeace8a191cf5ea6fb5202e66c9)
+- [Baixe o exemplo completo (2KB comprimido)](https://gist.github.com/rachelnabors/c64b3aeace8a191cf5ea6fb5202e66c9/archive/7b41a88cb1027c9b5d8c6aff5212ecd3d0493504.zip)
-#### You can reuse components! {/*you-can-reuse-components*/}
+#### Você pode reutilizar componentes! {/*you-can-reuse-components*/}
-You might want to display a React component in multiple places on the same HTML page. This is most useful while React-powered parts of the page are isolated from each other. You can do this by calling `ReactDOM.render()` multiple times with multiple container elements.
+Você pode querer exibir um componente React em diversos lugares na mesma página HTML. Isso é muito útil quando diversas partes da página feitas com React são isoladas uma da outra. Você pode fazer isso chamando `ReactDOM.render()` diversas vezes com vários elementos de contêiner.
-1. In **index.html**, add an additional container element ``.
-2. In **like_button.js**, add an additional `ReactDOM.render()` for the new container element:
+1. No arquivo **index.html**, adicione um elemento contêiner extra ``.
+2. No arquivo **like_button.js**, adicione um `ReactDOM.render()` extra para o novo elemento contêiner:
```js {6,7,8,9}
ReactDOM.render(
@@ -105,44 +105,44 @@ ReactDOM.render(
);
```
-Check out [an example that displays the "Like" button three times and passes some data to it](https://gist.github.com/rachelnabors/c0ea05cc33fbe75ad9bbf78e9044d7f8)!
+Veja [um exemplo que exibe o botão "Curtir" três vezes e passa alguns dados para eles](https://gist.github.com/rachelnabors/c0ea05cc33fbe75ad9bbf78e9044d7f8)!
-### Step 5: Minify JavaScript for production {/*step-5-minify-javascript-for-production*/}
+### Passo 5: Minificar o JavaScript para produção {/*step-5-minify-javascript-for-production*/}
-Unminified JavaScript can significantly slow down page load times for your users. Before deploying your website to production, it's a good idea to minify its scripts.
+JavaScript não minificado pode aumentar consideravelmente o tempo de carregamento das páginas para seus usuários. Antes de realizar o deploy de seu website para produção, é uma boa ideia minificar o código.
-- **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).
-- **If you already minify** your 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` like so:
+- **Se você não tiver um passo de minificação** para seus códigos, [aqui está uma maneira de configurar](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3).
+- **Se você já minifica** o código de sua aplicação, seu site vai estar pronto para produção se você garantir que o HTML que irá para a versão de deploy carregue as versões do react que terminam em `production.min.js` assim como:
```html
```
-## Try React with JSX {/*try-react-with-jsx*/}
+## Experimente React com JSX {/*try-react-with-jsx*/}
-The examples above rely on features that are natively supported by browsers. This is why **like_button.js** uses a JavaScript function call to tell React what to display:
+O exemplo abaixo utiliza funcionalidades que são suportadas pelos navegadores de maneira nativa. É por isso que **like_button.js** usa uma chamada de função JavaScript para dizer ao React o que exibir:
```js
return React.createElement('button', {onClick: () => setLiked(true)}, 'Like');
```
-However, React also offers an option to use [JSX](/learn/writing-markup-with-jsx), an HTML-like JavaScript syntax, instead:
+No entanto, o React também oferece uma opção de utilizar [JSX](/learn/writing-markup-with-jsx), uma sintaxe JavaScript similar ao HTML:
```jsx
return ;
```
-These two code snippets are equivalent. JSX is popular syntax for describing markup in JavaScript. Many people find it familiar and helpful for writing UI code--both with React and with other libraries. You might see "markup sprinkled throughout your JavaScript" in other projects!
+Esses dois trechos de código são equivalentes. JSX é uma sintaxe popular para descrever marcação em JavaScript. Muitas pessoas acham mais familiar e útil para escrever código de interface de usuário --seja com React ou com outras bibliotecas. Você pode ver "marcação envolvida por acento grave pelo JavaScript" em outros projetos!
-> You can play with transforming HTML markup into JSX using [this online converter](https://babeljs.io/en/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=DwIwrgLhD2B2AEcDCAbAlgYwNYF4DeAFAJTw4B88EAFmgM4B0tAphAMoQCGETBe86WJgBMAXJQBOYJvAC-RGWQBQ8FfAAyaQYuAB6cFDhkgA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.4.3).
+> Você pode utilizar [esse conversor online](https://babeljs.io/en/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=DwIwrgLhD2B2AEcDCAbAlgYwNYF4DeAFAJTw4B88EAFmgM4B0tAphAMoQCGETBe86WJgBMAXJQBOYJvAC-RGWQBQ8FfAAyaQYuAB6cFDhkgA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.4.3) para transformar marcação HTML em JSX.
-### Try JSX {/*try-jsx*/}
+### Experimente JSX {/*try-jsx*/}
-The quickest way to try JSX in your project is to add the Babel compiler to your page's `` along with React and ReactDOM like so:
+A maneira mais rápida de experimentar JSX em seu projeto é adicionar o compilador Babel ao tag `` de sua página junto com o React e o ReactDOM da seguinte maneira:
```html {6}
-
+
@@ -150,10 +150,10 @@ The quickest way to try JSX in your project is to add the Babel compiler to your
-
+
```
-Now you can use JSX in any `
```
-To convert **like_button.js** to use JSX:
+Para converter **like_button.js** para JSX:
-1. In **like_button.js**, replace
+1. Em **like_button.js**, substitua
```js
return React.createElement(
@@ -176,99 +176,99 @@ return React.createElement(
);
```
-with:
+por:
```jsx
return ;
```
-2. In **index.html**, add `type="text/babel"` to the like button's script tag:
+2. Em **index.html**, adicione `type="text/babel"` na tag script do botão curtir:
```html
```
-Here is [an example HTML file with JSX](https://raw.githubusercontent.com/reactjs/reactjs.org/main/static/html/single-file-example.html) that you can download and play with.
+Aqui está [um exemplo de arquivo HTML feito com JSX](https://raw.githubusercontent.com/reactjs/reactjs.org/main/static/html/single-file-example.html) que você pode baixar e experimentar.
-This approach is fine for learning and creating simple demos. However, it makes your website slow and **isn't suitable for production**. When you're ready to move forward, remove this new `