- Pick a color:{' '}
+ Escolha uma cor:{' '}
setColor(e.target.value)}>
lightcoral
midnightblue
@@ -407,21 +407,21 @@ export default function App() {
-This example illustrates that **a component may receive different props over time.** Props are not always static! Here, the `time` prop changes every second, and the `color` prop changes when you select another color. Props reflect a component's data at any point in time, rather than only in the beginning.
+Este exemplo ilustra que **um componente pode receber props diferentes com o passar o tempo.** Props não são sempre estáticas! Aqui, a prop `time` muda a cada segundo, e a prop `color` muda quando você seleciona outra cor. As props refletem os dados de um componente a qualquer instante, não apenas num primeiro momento.
-However, props are [immutable](https://en.wikipedia.org/wiki/Immutable_object)—a term from computer science meaning "unchangeable". When a component needs to change its props (for example, in response to a user interaction or new data), it will have to "ask" its parent component to pass it _different props_—a new object! Its old props will then be cast aside, and eventually the JavaScript engine will reclaim the memory taken by them.
+Entretanto, as props são [imutáveis](https://pt.wikipedia.org/wiki/Objeto_imut%C3%A1vel)-um termo da ciência da computação o qual significa "inalterável". Quando um componente precisa mudar suas props (por exemplo, em resposta à interação do usuário ou a novos dados), ele terá que "pedir" ao componente pai que passe _props diferentes_- um novo objeto! Suas props antigas serão então deixadas de lado, e eventualmente o motor do JavaScript irá recuperar a memória ocupada por elas.
-**Don't try to "change props".** When you need to respond to the user input (like changing the selected color), you will need to "set state", which you can learn about in [State: A Component's Memory.](/learn/state-a-components-memory)
+**Não tente "alterar props".** Quando você precisa responder a interações do usuário (como trocar a cor selecionada), você terá que "definir state", sobre o qual você pode aprender em [State: A Memória de um Componente.](/learn/state-a-components-memory)
-* To pass props, add them to the JSX, just like you would with HTML attributes.
-* To read props, use the `function Avatar({ person, size })` destructuring syntax.
-* You can specify a default value like `size = 100`, which is used for missing and `undefined` props.
-* You can forward all props with ` ` JSX spread syntax, but don't overuse it!
-* Nested JSX like ` ` will appear as `Card` component's `children` prop.
-* Props are read-only snapshots in time: every render receives a new version of props.
-* You can't change props. When you need interactivity, you'll need to set state.
+* Para passar props, adicione-as à JSX, assim como você faria com atributos HTML.
+* Para ler props, use a sintaxe de desestruturação `function Avatar({ person, size })`.
+* Você pode especificar um valor padrão como `size = 100`, o qual é usado para props inexistentes ou `undefined`.
+* Você pode encaminhar todas as props com a sintaxe de espalhamento JSX ` `, mas não abuse!
+* JSX aninhada como ` ` aparecerá como a prop `children` do componente `Card`.
+* Props podem somente ser lidas e representam um momento específico no tempo: toda renderização recebe uma nova versão de props.
+* Você não pode mudar as props. Quando você precisar de interatividade, precisará definir state.
@@ -429,9 +429,9 @@ However, props are [immutable](https://en.wikipedia.org/wiki/Immutable_object)
-#### Extract a component {/*extract-a-component*/}
+#### Extraia um componente {/*extract-a-component*/}
-This `Gallery` component contains some very similar markup for two profiles. Extract a `Profile` component out of it to reduce the duplication. You'll need to choose what props to pass to it.
+Este componente `Gallery` contém marcação bastante similar para os dois perfis. Extraia um componente `Profile` a partir dele para reduzir a duplicação de código. Você precisará escolher quais props passar para ele.
@@ -524,15 +524,15 @@ li { margin: 5px; }
-Start by extracting the markup for one of the scientists. Then find the pieces that don't match it in the second example, and make them configurable by props.
+Comece extraindo a marcação para um dos cientistas. Então encontre as partes diferentes no segundo exemplo e torne-as configuráveis via props.
-In this solution, the `Profile` component accepts multiple props: `imageId` (a string), `name` (a string), `profession` (a string), `awards` (an array of strings), `discovery` (a string), and `imageSize` (a number).
+Nesta solução, o componente `Profile` aceita múltiplas props: `imageId` (uma string), `name` (uma string), `profession` (uma string), `awards` (um array de strings), `discovery` (uma string), e `imageSize` (um número).
-Note that the `imageSize` prop has a default value, which is why we don't pass it to the component.
+Note que a prop `imageSize` possui um valor padrão, o qual justifica o por quê de não a passarmos ao componente.
@@ -630,9 +630,9 @@ li { margin: 5px; }
-Note how you don't need a separate `awardCount` prop if `awards` is an array. Then you can use `awards.length` to count the number of awards. Remember that props can take any values, and that includes arrays too!
+Perceba como você não precisa de uma prop separada `awardCount` se `awards` é um array. Logo, você pode usar `awards.length` para contar o número de prêmios. Lembre-se de que as props podem receber quaisquer valores, e isso também inclui arrays!
-Another solution, which is more similar to the earlier examples on this page, is to group all information about a person in a single object, and pass that object as one prop:
+Outra solução, a qual é mais parecida com os exemplos anteriores nesta página, é agrupar toda a informação sobre uma pessoa em um único objeto e passá-lo como uma prop:
@@ -727,15 +727,15 @@ li { margin: 5px; }
-Although the syntax looks slightly different because you're describing properties of a JavaScript object rather than a collection of JSX attributes, these examples are mostly equivalent, and you can pick either approach.
+Mesmo que a sintaxe seja levemente diferente porque você está descrevendo as propriedades de um objeto JavaScript em vez de uma coleção de atributos JSX, esses exemplos são praticamente equivalentes e você pode escolher ambas as abordagens.
-#### Adjust the image size based on a prop {/*adjust-the-image-size-based-on-a-prop*/}
+#### Ajuste o tamanho da imagem com base em uma prop {/*adjust-the-image-size-based-on-a-prop*/}
-In this example, `Avatar` receives a numeric `size` prop which determines the ` ` width and height. The `size` prop is set to `40` in this example. However, if you open the image in a new tab, you'll notice that the image itself is larger (`160` pixels). The real image size is determined by which thumbnail size you're requesting.
+Neste exemplo, `Avatar` recebe uma prop numérica `size` a qual determina a largura e a altura da ` `. A prop `size` é igual a `40` neste exemplo. No entanto, se você abrir a imagem em uma nova aba, perceberá que ela em si é maior (`160` pixels). O tamanho real da imagem é determinado pelo tamanho da miniatura que você está solicitando.
-Change the `Avatar` component to request the closest image size based on the `size` prop. Specifically, if the `size` is less than `90`, pass `'s'` ("small") rather than `'b'` ("big") to the `getImageUrl` function. Verify that your changes work by rendering avatars with different values of the `size` prop and opening images in a new tab.
+Altere o componente `Avatar` para solicitar o tamanho mais próximo da imagem com base na prop `size`. Especificamente, se `size` for menor que `90`, passe `'s'` ("small") em vez de `'b'` ("big") à função `getImageUrl`. Verifique se suas mudanças funcionam renderizando avatares com diferentes valores da prop `size` e abrindo as imagens em uma nova aba.
@@ -786,7 +786,7 @@ export function getImageUrl(person, size) {
-Here is how you could go about it:
+Veja como você poderia fazer isso:
@@ -848,7 +848,7 @@ export function getImageUrl(person, size) {
-You could also show a sharper image for high DPI screens by taking [`window.devicePixelRatio`](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio) into account:
+Você também poderia exibir uma imagem mais nítida para telas de altas DPIs levando [`window.devicePixelRatio`](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio) em consideração:
@@ -919,13 +919,13 @@ export function getImageUrl(person, size) {
-Props let you encapsulate logic like this inside the `Avatar` component (and change it later if needed) so that everyone can use the `` component without thinking about how the images are requested and resized.
+Props permitem encapsular a lógica como esta dentro do componente `Avatar`, (e alterá-la depois caso necessário), para que todos possam usar o componente `` sem pensar sobre como as imagens são solicitadas e redimensionadas.
-#### Passing JSX in a `children` prop {/*passing-jsx-in-a-children-prop*/}
+#### Passando JSX em uma prop `children` {/*passing-jsx-in-a-children-prop*/}
-Extract a `Card` component from the markup below, and use the `children` prop to pass different JSX to it:
+Extraia um componente `Card` da marcação abaixo, e use a prop `children` para passar JSX diferente a ele:
@@ -983,13 +983,13 @@ h1 {
-Any JSX you put inside of a component's tag will be passed as the `children` prop to that component.
+Qualquer JSX que você colocar dentro da tag do componente será passada como prop `children` para o mesmo.
-This is how you can use the `Card` component in both places:
+Esta é a maneira que você pode usar o componente `Card` em ambos os lugares:
@@ -1051,7 +1051,7 @@ h1 {
-You can also make `title` a separate prop if you want every `Card` to always have a title:
+Você pode também fazer de `title` uma prop separada se quiser que todo `Card` sempre tenha um título:
From 2d03f9f41d412666ea329fdcb51e18fb622b5e50 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tarc=C3=ADsio=20Surdi?=
Date: Mon, 22 May 2023 09:42:30 -0300
Subject: [PATCH 07/67] docs(pt-br): translated `tutorial-tic-tac-toe.md`
(#686)
* docs(pt-br): translated `tutorial-tic-tac-toe.md`
* docs(pt-br): general improvements to the translation
* docs(pt-br): general improvements suggested by reviewers
* docs(pt-br): emphasized the terms "prop" and "state"
---
src/content/learn/tutorial-tic-tac-toe.md | 506 +++++++++++-----------
1 file changed, 253 insertions(+), 253 deletions(-)
diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index 28d997b04..a94471e6c 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -1,31 +1,31 @@
---
-title: 'Tutorial: Tic-Tac-Toe'
+title: 'Tutorial: Jogo da Velha'
---
-You will build a small tic-tac-toe game during this tutorial. This tutorial does not assume any existing React knowledge. The techniques you'll learn in the tutorial are fundamental to building any React app, and fully understanding it will give you a deep understanding of React.
+Você construirá um pequeno jogo da velha durante este tutorial. Este tutorial não assume qualquer conhecimento prévio em React. As técnicas que você aprenderá no tutorial são fundamentais à construção de qualquer aplicativo React, e o entendimento destas lhe dará conhecimentos aprofundados sobre o React.
-This tutorial is designed for people who prefer to **learn by doing** and want to quickly try making something tangible. If you prefer learning each concept step by step, start with [Describing the UI.](/learn/describing-the-ui)
+Este tutorial foi criado para pessoas as quais preferem **aprender na prática** e querem tentar fazer algo tangível rapidamente. Se você prefere aprender cada conceito passo a passo, comece por [Descrevendo a UI.](/learn/describing-the-ui)
-The tutorial is divided into several sections:
+O tutorial é dividido em diversas seções:
-- [Setup for the tutorial](#setup-for-the-tutorial) will give you **a starting point** to follow the tutorial.
-- [Overview](#overview) will teach you **the fundamentals** of React: components, props, and state.
-- [Completing the game](#completing-the-game) will teach you **the most common techniques** in React development.
-- [Adding time travel](#adding-time-travel) will give you **a deeper insight** into the unique strengths of React.
+- [Preparação para o tutorial](#setup-for-the-tutorial) dará **um ponto de partida** para seguir o tutorial.
+- [Visão geral](#overview) ensinará os **fundamentos** do React: componentes, *props*, e *state*.
+- [Completando o jogo](#completing-the-game) ensinará a você **as técnicas mais comuns** no desenvolvimento React.
+- [Adicionando viagem no tempo](#adding-time-travel) dará **uma visão aprofundada** sobre os pontos fortes únicos do React.
-### What are you building? {/*what-are-you-building*/}
+### O quê você está construindo? {/*what-are-you-building*/}
-In this tutorial, you'll build an interactive tic-tac-toe game with React.
+Neste tutorial, você construirá um jogo interativo de jogo da velha com React.
-You can see what it will look like when you're finished here:
+Você pode ver com o que ele se parecerá quando você tiver terminado aqui:
@@ -194,15 +194,15 @@ body {
-If the code doesn't make sense to you yet, or if you are unfamiliar with the code's syntax, don't worry! The goal of this tutorial is to help you understand React and its syntax.
+Se o código não faz sentido para você ainda, ou se você não tem familiaridade com a sintaxe do código, não se preocupe! O objetivo deste tutorial é ajudá-lo a entender o React e a sua sintaxe.
-We recommend that you check out the tic-tac-toe game above before continuing with the tutorial. One of the features that you'll notice is that there is a numbered list to the right of the game's board. This list gives you a history of all of the moves that have occurred in the game, and it is updated as the game progresses.
+Nós recomendamos que você cheque o jogo da velha acima antes de continuar com o tutorial. Uma das funções que você perceberá é a de que existe uma lista numerada à direita do tabuleiro do jogo. Essa lista fornece um histórico de todos os movimentos que ocorreram no jogo, e é atualizada conforme o jogo progride.
-Once you've played around with the finished tic-tac-toe game, keep scrolling. You'll start with a simpler template in this tutorial. Our next step is to set you up so that you can start building the game.
+Uma vez que você tenha brincado com o jogo da velha finalizado, continue rolando a página. Você iniciará com um modelo mais simples neste tutorial. Nosso próximo passo é prepará-lo para que você possa começar a construir o jogo.
-## Setup for the tutorial {/*setup-for-the-tutorial*/}
+## Preparação para o tutorial {/*setup-for-the-tutorial*/}
-In the live code editor below, click **Fork** in the top-right corner to open the editor in a new tab using the website CodeSandbox. CodeSandbox lets you write code in your browser and preview how your users will see the app you've created. The new tab should display an empty square and the starter code for this tutorial.
+No editor de código abaixo, clique em **Fork** no canto superior direito para abri-lo em uma nova aba usando o site CodeSandbox. O CodeSandbox permite que você escreva código em seu navegador e pré-visualize como os seus usuários verão o aplicativo que você criou. A nova aba deve exibir um quadrado vazio e o código inicial para este tutorial.
@@ -261,33 +261,33 @@ body {
-You can also follow this tutorial using your local development environment. To do this, you need to:
+Você também pode seguir esse tutorial usando o seu ambiente de desenvolvimento local. Para fazer isso, você precisará:
-1. Install [Node.js](https://nodejs.org/en/)
-1. In the CodeSandbox tab you opened earlier, press the top-left corner button to open the menu, and then choose **File > Export to ZIP** in that menu to download an archive of the files locally
-1. Unzip the archive, then open a terminal and `cd` to the directory you unzipped
-1. Install the dependencies with `npm install`
-1. Run `npm start` to start a local server and follow the prompts to view the code running in a browser
+1. Instalar [Node.js](https://nodejs.org/en/)
+1. Na aba do CodeSandbox que você abriu anteriormente, pressione o botão no canto superior esquerdo para abrir o menu e então escolha **Arquivo > Exportar como ZIP** naquele menu para baixar os arquivos localmente
+1. Descompacte o arquivo, então abra um terminal e execute `cd` até o diretório em que você os descompactou
+1. Instale as dependências com `npm install`
+1. Execute `npm start` para iniciar um servidor local e siga os prompts para ver o código rodando em um navegador
-If you get stuck, don't let this stop you! Follow along online instead and try a local setup again later.
+Se você tiver problemas, não deixe com que isso lhe pare! Ao invés disso continue online e tente novamente em ambiente local mais tarde.
-## Overview {/*overview*/}
+## Visão geral {/*overview*/}
-Now that you're set up, let's get an overview of React!
+Agora que você está preparado, vamos ter uma visão geral to React!
-### Inspecting the starter code {/*inspecting-the-starter-code*/}
+### Inspecionando o código inicial {/*inspecting-the-starter-code*/}
-In CodeSandbox you'll see three main sections:
+No CodeSandbox você verá três seções principais:
-![CodeSandbox with starter code](../images/tutorial/react-starter-code-codesandbox.png)
+![CodeSandbox com código inicial](../images/tutorial/react-starter-code-codesandbox.png)
-1. The _Files_ section with a list of files like `App.js`, `index.js`, `styles.css` and a folder called `public`
-1. The _code editor_ where you'll see the source code of your selected file
-1. The _browser_ section where you'll see how the code you've written will be displayed
+1. A seção *Arquivos* com uma lista de arquivos como `App.js`, `index.js`, `styles.css` e uma pasta chamada `public`
+1. O *editor de código* onde você verá o código fonte de seu arquivo selecionado
+1. A seção de *navegador* onde você verá como o código que você escreveu será exibido
-The `App.js` file should be selected in the _Files_ section. The contents of that file in the _code editor_ should be:
+O arquivo `App.js` deve ser selecionado na seção *Arquivos*. Os conteúdos daquele arquivo no *editor de código* devem ser:
```jsx
export default function Square() {
@@ -295,15 +295,15 @@ export default function Square() {
}
```
-The _browser_ section should be displaying a square with a X in it like this:
+A seção *navegador* deve estar exibindo um quadrado com um X em seu interior desta forma:
-![x-filled square](../images/tutorial/x-filled-square.png)
+![quadrado preenchido por um x](../images/tutorial/x-filled-square.png)
-Now let's have a look at the files in the starter code.
+Agora vamos dar uma olhada nos arquivos do código inicial.
#### `App.js` {/*appjs*/}
-The code in `App.js` creates a _component_. In React, a component is a piece of reusable code that represents a part of a user interface. Components are used to render, manage, and update the UI elements in your application. Let's look at the component line by line to see what's going on:
+O código em `App.js` cria um *componente*. No React, um componente é uma peça de código reutilizável a qual representa uma parte de sua interface de usuário. Componentes são usados para renderizar, administrar, e atualizar os elementos de UI na sua aplicação. Vamos ler o componente linha a linha para entender o que está acontecendo:
```js {1}
export default function Square() {
@@ -311,7 +311,7 @@ export default function Square() {
}
```
-The first line defines a function called `Square`. The `export` JavaScript keyword makes this function accessible outside of this file. The `default` keyword tells other files using your code that it's the main function in your file.
+A primeira linha define uma função chamada `Square`. A palavra-chave do JavaScript `export` torna essa função acessível fora deste arquivo. O termo `default` diz aos outros arquivos usando seu código que essa é a função principal em seu arquivo.
```js {2}
export default function Square() {
@@ -319,15 +319,15 @@ export default function Square() {
}
```
-The second line returns a button. The `return` JavaScript keyword means whatever comes after is returned as a value to the caller of the function. `` is a *JSX element*. A JSX element is a combination of JavaScript code and HTML tags that describes what you'd like to display. `className="square"` is a button property or *prop* that tells CSS how to style the button. `X` is the text displayed inside of the button and ` ` closes the JSX element to indicate that any following content shouldn't be placed inside the button.
+A segunda linha retorna um botão. A palavra-chave `return` do JavaScript significa que qualquer coisa que venha após ela é retornada como um valor para quem chamar esta função. `` é um *elemento JSX*. Um elemento JSX é uma combinação de código JavaScript e tags HTML a qual descreve o que você quer exibir. `className="square"` é uma propriedade do botão ou *prop* que diz à CSS como estilizar o botão. `X` é o texto a ser exibido dentro do botão e ` ` fecha o elemento JSX para indicar que qualquer conteúdo após isso não deve ser colocado dentro do botão.
#### `styles.css` {/*stylescss*/}
-Click on the file labeled `styles.css` in the _Files_ section of CodeSandbox. This file defines the styles for your React app. The first two _CSS selectors_ (`*` and `body`) define the style of large parts of your app while the `.square` selector defines the style of any component where the `className` property is set to `square`. In your code, that would match the button from your Square component in the `App.js` file.
+Clique no arquivo denominado `styles.css` na seção *Arquivos* do CodeSandbox. Esse arquivo define os estilos para a sua aplicação React. Os primeiros dois *seletores CSS* (`*` e `body`) definem o estilo de grandes parte do seu aplicativo enquanto o seletor `.square` define o estilo de qualquer componente onde a propriedade `className` esteja definida como `square`. Em seu código, isso se refere ao botão de seu componente Square no arquivo `App.js`.
#### `index.js` {/*indexjs*/}
-Click on the file labeled `index.js` in the _Files_ section of CodeSandbox. You won't be editing this file during the tutorial but it is the bridge between the component you created in the `App.js` file and the web browser.
+Clique no arquivo denominado `index.js` na seção *Arquivos* de seu CodeSandbox. Você não editará este arquivo durante o tutorial mas ele é a ponte entre o componente que você criou no arquivo `App.js` e o navegador.
```jsx
import { StrictMode } from 'react';
@@ -337,20 +337,20 @@ import './styles.css';
import App from './App';
```
-Lines 1-5 brings all the necessary pieces together:
+As linhas 1-5 juntam todas as peças necessárias:
-* React
-* React's library to talk to web browsers (React DOM)
-* the styles for your components
-* the component you created in `App.js`.
+- React
+- a biblioteca do React para conversar com navegadores de internet (React DOM)
+- os estilos de seus componentes
+- o componente que você criou em `App.js`.
-The remainder of the file brings all the pieces together and injects the final product into `index.html` in the `public` folder.
+O restante do arquivo junta todas as partes e injeta o produto final em `index.html` na pasta `public`.
-### Building the board {/*building-the-board*/}
+### Construindo o tabuleiro {/*building-the-board*/}
-Let's get back to `App.js`. This is where you'll spend the rest of the tutorial.
+Vamos voltar ao `App.js`. É aqui que você passará o restante do tutorial.
-Currently the board is only a single square, but you need nine! If you just try and copy paste your square to make two squares like this:
+Atualmente o tabuleiro é apenas um único quadrado, mas você precisa de nove! Se você simplesmente tentar copiar e colar seu quadrado para fazer dois quadrados desta forma:
```js {2}
export default function Square() {
@@ -358,15 +358,15 @@ export default function Square() {
}
```
-You'll get this error:
+Você receberá este erro:
-/src/App.js: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment `<>...>`?
+/src/App.js: Elementos JSX adjacentes devem ser envolvidos em uma tag externa. Você queria um fragment JSX `<>...>`?
-React components need to return a single JSX element and not multiple adjacent JSX elements like two buttons. To fix this you can use *fragments* (`<>` and `>`) to wrap multiple adjacent JSX elements like this:
+Componentes do React precisam retornar um único elemento JSX e não múltiplos elementos JSX adjacentes como dois botões. Para consertar isso você pode usar *fragments* (`<>` e `>`) para envolver múltiplos elementos JSX adjacentes desta forma:
```js {3-6}
export default function Square() {
@@ -379,17 +379,17 @@ export default function Square() {
}
```
-Now you should see:
+Agora você deve ver:
-![two x-filled squares](../images/tutorial/two-x-filled-squares.png)
+![dois quadrados preenchidos por x](../images/tutorial/two-x-filled-squares.png)
-Great! Now you just need to copy-paste a few times to add nine squares and...
+Ótimo! Agora você só precisa copiar e colar algumas vezes para adicionar nove quadrados e...
-![nine x-filled squares in a line](../images/tutorial/nine-x-filled-squares.png)
+![nove quadrados preenchidos por x em uma linha](../images/tutorial/nine-x-filled-squares.png)
-Oh no! The squares are all in a single line, not in a grid like you need for our board. To fix this you'll need to group your squares into rows with `div`s and add some CSS classes. While you're at it, you'll give each square a number to make sure you know where each square is displayed.
+Ah não! Os quadrados estão todos em uma única linha, não em uma grade como você precisa para nosso tabuleiro. Para consertar isso, você precisará agrupar seus quadrados em linhas com `div`s e adicionar algumas classes CSS. Enquanto você o faz, dê a cada quadrado um número para certificar-se de que você sabe onde cada quadrado está sendo exibido.
-In the `App.js` file, update the `Square` component to look like this:
+No arquivo `App.js`, atualize o componente `Square` para que se pareça com isto:
```js {3-19}
export default function Square() {
@@ -415,11 +415,11 @@ export default function Square() {
}
```
-The CSS defined in `styles.css` styles the divs with the `className` of `board-row`. Now that you've grouped your components into rows with the styled `div`s you have your tic-tac-toe board:
+A CSS definida em `styles.css` estiliza as divs com o `className` de `board-row`. Agora que você agrupou os seus componentes em linhas com as `div`s estilizadas você tem seu tabuleiro de jogo da velha:
-![tic-tac-toe board filled with numbers 1 through 9](../images/tutorial/number-filled-board.png)
+![tabuleiro de jogo da velha preenchido com os números de 1 a 9](../images/tutorial/number-filled-board.png)
-But you now have a problem. Your component named `Square`, really isn't a square anymore. Let's fix that by changing the name to `Board`:
+Mas agora você tem um problema. Seu componente chamado `Square`, na verdade não é mais um quadrado. Vamos arrumar isso trocando o nome para `Board`:
```js {1}
export default function Board() {
@@ -427,7 +427,7 @@ export default function Board() {
}
```
-At this point your code should look something like this:
+A esse ponto seu código deve se parecer com isto:
@@ -504,15 +504,15 @@ body {
-Psssst... That's a lot to type! It's okay to copy and paste code from this page. However, if you're up for a little challenge, we recommend only copying code that you've manually typed at least once yourself.
+Pssss... Isso é bastante para se digitar! É OK copiar e colar código desta página. Entretanto, se você está disposto a topar um desafio, nós recomendamos apenas copiar código que você mesmo já escreveu manualmente antes.
-### Passing data through props {/*passing-data-through-props*/}
+### Passando dados através de *props* {/*passing-data-through-props*/}
-Next, you'll want to change the value of a square from empty to "X" when the user clicks on the square. With how you've built the board so far you would need to copy-paste the code that updates the square nine times (once for each square you have)! Instead of copy-pasting, React's component architecture allows you to create a reusable component to avoid messy, duplicated code.
+Após isso, você gostará de mudar o valor de um quadrado de vazio para "X" quando o usuário clicar no quadrado. Com a maneira em que você construiu o tabuleiro até agora você teria que copiar e colar o código que atualiza o quadrado nove vezes (uma para cada quadrado que você tem)! Ao invés de copiar e colar, a arquitetura de componentes do React permite que você crie um componente reutilizável para evitar código bagunçado e duplicado.
-First, you are going to copy the line defining your first square (`1 `) from your `Board` component into a new `Square` component:
+Primeiro, você irá copiar a linha definindo o seu primeiro quadrado (`1 `) de seu componente `Board` a um novo componente `Square`:
```js {1-3}
function Square() {
@@ -524,7 +524,7 @@ export default function Board() {
}
```
-Then you'll update the Board component to render that `Square` component using JSX syntax:
+Então você atualizará o componente do tabuleiro para renderizar aquele componente `Square` usando a sintaxe JSX:
```js {5-19}
// ...
@@ -551,15 +551,15 @@ export default function Board() {
}
```
-Note how unlike the browser `div`s, your own components `Board` and `Square` must start with a capital letter.
+Perceba como diferentes das `div`s do navegador, os componentes `Board` e `Square` pertencem a você e devem começar com uma letra maiúscula.
-Let's take a look:
+Vamos dar uma olhada:
-![one-filled board](../images/tutorial/board-filled-with-ones.png)
+![tabuleiro preenchido pela número 1](../images/tutorial/board-filled-with-ones.png)
-Oh no! You lost the numbered squares you had before. Now each square says "1". To fix this, you will use *props* to pass the value each square should have from the parent component (`Board`) to its child (`Square`).
+Ah não! Você perdeu os quadrados numerados que tinha antes. Agora cada quadrado diz "1". Para consertar isso, você usará *props* para passar o valor que cada quadrado deve ter a partir de seu componente pai (`Board`) para seus filhos (`Square`).
-Update the `Square` component to read the `value` prop that you'll pass from the `Board`:
+Atualize o componente `Square` para ler a *prop* `value` que você irá passar a partir de `Board`:
```js {1}
function Square({ value }) {
@@ -567,9 +567,9 @@ function Square({ value }) {
}
```
-`function Square({ value })` indicates the Square component can be passed a prop called `value`.
+`function Square({ value })` indica que o componente Square aceita receber uma *prop* chamada `value`.
-Now you want to display that `value` instead of `1` inside every square. Try doing it like this:
+Agora você quer exibir aquele `value` ao invés de `1` dentro de cada quadrado. Tente fazer isso desta forma:
```js {2}
function Square({ value }) {
@@ -577,11 +577,11 @@ function Square({ value }) {
}
```
-Oops, this is not what you wanted:
+Ops, isto não é o que você queria:
-![value-filled board](../images/tutorial/board-filled-with-value.png)
+![tabuleiro preenchido com "value"](../images/tutorial/board-filled-with-value.png)
-You wanted to render the JavaScript variable called `value` from your component, not the word "value". To "escape into JavaScript" from JSX, you need curly braces. Add curly braces around `value` in JSX like so:
+Você queria renderizar a variável JavaScript chamada `value` a partir de seu componente, não a palavra "value". Para "escapar ao JavaScript" a partir da JSX, você precisa de chaves. Adicione chaves ao redor de `value` na JSX desta forma:
```js {2}
function Square({ value }) {
@@ -589,11 +589,11 @@ function Square({ value }) {
}
```
-For now, you should see an empty board:
+Por enquanto, você deve ver um tabuleiro vazio:
-![empty board](../images/tutorial/empty-board.png)
+![tabuleiro vazio](../images/tutorial/empty-board.png)
-This is because the `Board` component hasn't passed the `value` prop to each `Square` component it renders yet. To fix it you'll add the `value` prop to each `Square` component rendered by the `Board` component:
+Isso é porque o componente `Board` não passou a *prop* `value` a cada componente `Square` que ele renderiza ainda. Para consertar isso você adicionará a *prop* `value` a cada componente `Square` renderizado pelo componente `Board`:
```js {5-7,10-12,15-17}
export default function Board() {
@@ -619,11 +619,11 @@ export default function Board() {
}
```
-Now you should see a grid of numbers again:
+Agora você deve ver uma grade de números novamente:
-![tic-tac-toe board filled with numbers 1 through 9](../images/tutorial/number-filled-board.png)
+![tabuleiro de jogo da velha preenchido com números de 1 a 9](../images/tutorial/number-filled-board.png)
-Your updated code should look like this:
+O seu código atualizado deve se parecer com isto:
@@ -702,9 +702,9 @@ body {
-### Making an interactive component {/*making-an-interactive-component*/}
+### Fazendo um componente interativo {/*making-an-interactive-component*/}
-Let's fill the `Square` component with an `X` when you click it. Declare a function called `handleClick` inside of the `Square`. Then, add `onClick` to the props of the button JSX element returned from the `Square`:
+Vamos preencher o componente `Square` com um `X` quando você o clicar. Declare uma função chamada `handleClick` dentro de `Square`. Então, adicione `onClick` às *props* do elemento JSX `button` retornado de `Square`:
```js {2-4,9}
function Square({ value }) {
@@ -723,19 +723,19 @@ function Square({ value }) {
}
```
-If you click on a square now, you should see a log saying `"clicked!"` in the _Console_ tab at the bottom of the _Browser_ section in CodeSandbox. Clicking the square more than once will log `"clicked!"` again. Repeated console logs with the same message will not create more lines in the console. Instead, you will see an incrementing counter next to your first `"clicked!"` log.
+Agora se você clica no quadrado, deve ver um registro dizendo `"clicked!"` na aba *Console* na parte inferior da seção *Navegador* do CodeSandbox. Clicar no quadrado mais de uma vez irá registrar `"clicked!"` novamente. Registros repetidos no console com a mesma mensagem não criarão mais linhas no console. Em vez disso, você verá um contador incrementando próximo ao seu primeiro registro `"clicked!"`.
-If you are following this tutorial using your local development environment, you need to open your browser's Console. For example, if you use the Chrome browser, you can view the Console with the keyboard shortcut **Shift + Ctrl + J** (on Windows/Linux) or **Option + ⌘ + J** (on macOS).
+Se você está seguindo este tutorial usando o seu ambiente de desenvolvimento local, você precisa abrir o console de seu navegador. Por exemplo, se você usa o navegador Chrome, você pode ver o Console com o atalho de teclado **Shift + Ctrl + J** (no Windows/Linux) ou **Option + ⌘ + J** (no macOS).
-As a next step, you want the Square component to "remember" that it got clicked, and fill it with an "X" mark. To "remember" things, components use *state*.
+Como um próximo passo, você quer que o componente Square "lembre-se" de que ele foi clicado, e preenchê-lo com uma marca de "X". Para "lembrar-se" de coisas, componentes usam *state*.
-React provides a special function called `useState` that you can call from your component to let it "remember" things. Let's store the current value of the `Square` in state, and change it when the `Square` is clicked.
+O React fornece uma função especial chamada `useState` a qual você pode chamar a partir de seu componente para permitir que ele "lembre-se" de coisas. Vamos armazenar o valor atual do `Square` em *state*, e mudá-lo quando o `Square` for clicado.
-Import `useState` at the top of the file. Remove the `value` prop from the `Square` component. Instead, add a new line at the start of the `Square` that calls `useState`. Have it return a state variable called `value`:
+Importe `useState` no topo do arquivo. Remova a *prop* `value` do componente `Square`. Em vez disso, adicione uma nova linha no começo de `Square` que chame `useState`. Faça com que ela retorne uma variável de *state* chamada `value`:
```js {1,3,4}
import { useState } from 'react';
@@ -747,9 +747,9 @@ function Square() {
//...
```
-`value` stores the value and `setValue` is a function that can be used to change the value. The `null` passed to `useState` is used as the initial value for this state variable, so `value` here starts off equal to `null`.
+`value` salva o valor e `setValue` é a função que pode ser usada para mudar esse valor. O `null` passado para `useState` é usado como o valor inicial desta variável de *state*, então aqui `value` começa sendo igual a `null`.
-Since the `Square` component no longer accepts props anymore, you'll remove the `value` prop from all nine of the Square components created by the Board component:
+Já que o componente `Square` não mais aceita *props*, você irá remover a *prop* `value` de todos os nove componentes Square criados pelo componente Board:
```js {6-8,11-13,16-18}
// ...
@@ -776,7 +776,7 @@ export default function Board() {
}
```
-Now you'll change `Square` to display an "X" when clicked. Replace the `console.log("clicked!");` event handler with `setValue('X');`. Now your `Square` component looks like this:
+Agora você irá mudar `Square` para que exiba um "X" quando clicado. Substitua o manipulador de eventos `console.log("clicked!");` com `setValue('X');`. Agora o seu componente `Square` se parece com isto:
```js {5}
function Square() {
@@ -797,13 +797,13 @@ function Square() {
}
```
-By calling this `set` function from an `onClick` handler, you're telling React to re-render that `Square` whenever its `` is clicked. After the update, the `Square`'s `value` will be `'X'`, so you'll see the "X" on the game board. Click on any Square, and "X" should show up:
+Ao chamar essa função `set` a partir de um manipulador `onClick`, você está dizendo ao React para rerrenderizar aquele `Square` sempre que o seu `` for clicado. Depois da atualização, o `value` de `Square` será `'X'`, então você verá o "X" no tabuleiro do jogo. Clique em qualquer Square, e "X" deve aparecer:
-![adding xes to board](../images/tutorial/tictac-adding-x-s.gif)
+![adicionando x ao tabuleiro](../images/tutorial/tictac-adding-x-s.gif)
-Each Square has its own state: the `value` stored in each Square is completely independent of the others. When you call a `set` function in a component, React automatically updates the child components inside too.
+Cada Square tem seu próprio *state*: o `value` armazenado em cada Square é completamente independente dos outros. Quando você chama a função `set` em um componente, o React automaticamente atualiza os componentes filhos dentro dele também.
-After you've made the above changes, your code will look like this:
+Após ter feito as mudanças acima, seu código deve se parecer com isto:
@@ -897,37 +897,37 @@ body {
-### React Developer Tools {/*react-developer-tools*/}
+### Ferramentas do Desenvolvedor React {/*react-developer-tools*/}
-React DevTools let you check the props and the state of your React components. You can find the React DevTools tab at the bottom of the _browser_ section in CodeSandbox:
+As DevTools do React permitem que você cheque as *props* e o *state* de seus componentes React. Você pode encontrar a aba de DevTools do React na parte inferior da seção *navegador* no CodeSandbox:
-![React DevTools in CodeSandbox](../images/tutorial/codesandbox-devtools.png)
+![React DevTools no CodeSandbox](../images/tutorial/codesandbox-devtools.png)
-To inspect a particular component on the screen, use the button in the top left corner of React DevTools:
+Para inspecionar um componente em particular na tela, use o botão no canto superior esquerdo das DevTools do React:
-![Selecting components on the page with React DevTools](../images/tutorial/devtools-select.gif)
+![Selecionando componente na página com as DevTools do React](../images/tutorial/devtools-select.gif)
-For local development, React DevTools is available as a [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en), [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/), and [Edge](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) browser extension. Install it, and the *Components* tab will appear in your browser Developer Tools for sites using React.
+Para desenvolvimento local, as DevTools do React estão disponíveis como extensões de navegador para [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en), [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/), e [Edge](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil). Instale-as, e a aba *Components* irá aparecer nas ferramentas de desenvolvedor do seu navegador para sites utilizando React.
-## Completing the game {/*completing-the-game*/}
+## Completando o jogo {/*completing-the-game*/}
-By this point, you have all the basic building blocks for your tic-tac-toe game. To have a complete game, you now need to alternate placing "X"s and "O"s on the board, and you need a way to determine a winner.
+Até aqui, você já tem todos os blocos de construção básicos para o seu jogo da velha. Para completar o jogo, você agora precisa alternar a colocação de "X"s e "O"s no tabuleiro, e você precisa de uma maneira de determinar um vencedor.
-### Lifting state up {/*lifting-state-up*/}
+### Elevando o *state* {/*lifting-state-up*/}
-Currently, each `Square` component maintains a part of the game's state. To check for a winner in a tic-tac-toe game, the `Board` would need to somehow know the state of each of the 9 `Square` components.
+Atualmente, cada componente `Square` mantém uma parte do *state* do jogo. Para checar por um vencedor em um jogo da velha, o `Board` precisaria de alguma maneira de conhecer o *state* de cada um dos 9 componentes `Square`.
-How would you approach that? At first, you might guess that the `Board` needs to "ask" each `Square` for that `Square`'s state. Although this approach is technically possible in React, we discourage it because the code becomes difficult to understand, susceptible to bugs, and hard to refactor. Instead, the best approach is to store the game's state in the parent `Board` component instead of in each `Square`. The `Board` component can tell each `Square` what to display by passing a prop, like you did when you passed a number to each Square.
+Como você abordaria isso? Em um primeiro momento, você pode imaginar que o `Board` precisa "pedir" para cada `Square` pelo *state* daquele `Square`. Por mais que essa abordagem seja tecnicamente possível em React, nós a desencorajamos porque o código se torna difícil de entender, susceptível a bugs, e difícil de refatorar. Em vez disso, a melhor abordagem é armazenar o *state* do jogo no componente pai `Board` ao invés de em cada `Square`. O componente `Board` pode dizer a cada `Square` o que exibir passando uma *prop*, como você fez quando passou um número para cada Square.
-**To collect data from multiple children, or to have two child components communicate with each other, declare the shared state in their parent component instead. The parent component can pass that state back down to the children via props. This keeps the child components in sync with each other and with their parent.**
+**Para coletar dados de múltiplos filhos, ou fazer com que dois componentes filhos comuniquem-se entre si, em vez disso declare *state* compartilhado no componente pai. O componente pai pode passar esse *state* de volta aos filhos via *props*. Isso mantém os componentes filhos sincronizados um com o outro e com seu pai.**
-Lifting state into a parent component is common when React components are refactored.
+Elevar *state* em um componente pai é comum quando componentes React são refatorados.
-Let's take this opportunity to try it out. Edit the `Board` component so that it declares a state variable named `squares` that defaults to an array of 9 nulls corresponding to the 9 squares:
+Vamos aproveitar esta oportunidade para tentar fazer isso. Edite o componente `Board` para que ele declare uma variável de *state* denominada `squares` a qual possua um array com 9 nulls por padrão correspondendo aos 9 quadrados:
```js {3}
// ...
@@ -939,13 +939,13 @@ export default function Board() {
}
```
-`Array(9).fill(null)` creates an array with nine elements and sets each of them to `null`. The `useState()` call around it declares a `squares` state variable that's initially set to that array. Each entry in the array corresponds to the value of a square. When you fill the board in later, the `squares` array will look like this:
+`Array(9).fill(null)` cria um array com nove elementos e define cada um deles como `null`. A chamada `useState()` ao redor dele declara uma variável de *state* `squares` a qual é inicialmente definida àquele array. Cada valor no array corresponde ao valor de um quadrado. Quando você preencher o tabuleiro mais tarde, o array `squares` se parecerá com isto:
```jsx
['O', null, 'X', 'X', 'X', 'O', 'O', null, null]
```
-Now your `Board` component needs to pass the `value` prop down to each `Square` that it renders:
+Agora o componente `Board` precisa passar a *prop* `value` para cada `Square` que renderiza:
```js {6-8,11-13,16-18}
export default function Board() {
@@ -972,7 +972,7 @@ export default function Board() {
}
```
-Next, you'll edit the `Square` component to receive the `value` prop from the Board component. This will require removing the Square component's own stateful tracking of `value` and the button's `onClick` prop:
+A seguir, você editará o componente `Square` para que receba a *prop* `value` do componente Board. Isso precisará da remoção do próprio monitoramento sobre `value` do componente Square e a *prop* `onClick` do botão:
```js {1,2}
function Square({value}) {
@@ -980,11 +980,11 @@ function Square({value}) {
}
```
-At this point you should see an empty tic-tac-toe board:
+Nesta altura você deve ver um tabuleiro vazio de jogo da velha:
-![empty board](../images/tutorial/empty-board.png)
+![tabuleiro vazio](../images/tutorial/empty-board.png)
-And your code should look like this:
+E seu código deve se parecer com isto:
@@ -1066,11 +1066,11 @@ body {
-Each Square will now receive a `value` prop that will either be `'X'`, `'O'`, or `null` for empty squares.
+Cada Square agora irá receber uma *prop* `value` a qual será `'X'`, `'O'`, ou `null` para quadrados vazios.
-Next, you need to change what happens when a `Square` is clicked. The `Board` component now maintains which squares are filled. You'll need to create a way for the `Square` to update the `Board`'s state. Since state is private to a component that defines it, you cannot update the `Board`'s state directly from `Square`.
+A seguir, você precisará mudar o que acontece quando um `Square` é clicado. O componente `Board` agora mantêm quais dos quadrados estão preenchidos. Você precisará criar uma maneira para que o `Square` atualize o *state* de `Board`. Já que o *state* é privado ao componente que o define, você não pode atualizar o *state* de `Board` diretamente de `Square`.
-Instead, you'll pass down a function from the `Board` component to the `Square` component, and you'll have `Square` call that function when a square is clicked. You'll start with the function that the `Square` component will call when it is clicked. You'll call that function `onSquareClick`:
+Em vez disso, você passará uma função do componente `Board` ao componente `Square`, e você fará com que `Square` chame essa função quando um quadrado for clicado. Você começará com a função que o componente `Square` chamará quando for clicado. Você chamará a função `onSquareClick`:
```js {3}
function Square({ value }) {
@@ -1082,7 +1082,7 @@ function Square({ value }) {
}
```
-Next, you'll add the `onSquareClick` function to the `Square` component's props:
+A seguir, você adicionará a função `onSquareClick` às *props* do componente `Square`:
```js {1}
function Square({ value, onSquareClick }) {
@@ -1094,7 +1094,7 @@ function Square({ value, onSquareClick }) {
}
```
-Now you'll connect the `onSquareClick` prop to a function in the `Board` component that you'll name `handleClick`. To connect `onSquareClick` to `handleClick` you'll pass a function to the `onSquareClick` prop of the first `Square` component:
+Agora você conectará a *prop* `onSquareClick` a uma função no componente `Board` que você chamará de `handleClick`. Para conectar a *prop* `onSquareClick` a `handleClick` você passará a função à *prop* `onSquareClick` do primeiro componente `Square`:
```js {7}
export default function Board() {
@@ -1109,7 +1109,7 @@ export default function Board() {
}
```
-Lastly, you will define the `handleClick` function inside the Board component to update the `squares` array holding your board's state:
+Por fim, você irá definir a função `handleClick` dentro do componente Board para atualizar o array `squares` o qual armazena o *state* de seu tabuleiro:
```js {4-8}
export default function Board() {
@@ -1127,17 +1127,17 @@ export default function Board() {
}
```
-The `handleClick` function creates a copy of the `squares` array (`nextSquares`) with the JavaScript `slice()` Array method. Then, `handleClick` updates the `nextSquares` array to add `X` to the first (`[0]` index) square.
+A função `handleClick` cria uma cópia do array `squares` (`nextSquares`) com o método de Array JavaScript `slice()`. Então, `handleClick` atualiza o array `nextSquares` para adicionar `X` ao primeiro (índice `[0]`) quadrado.
-Calling the `setSquares` function lets React know the state of the component has changed. This will trigger a re-render of the components that use the `squares` state (`Board`) as well as its child components (the `Square` components that make up the board).
+Chamar a função `setSquares` permite que o React saiba que o *state* do componente mudou. Isso irá acionar uma rerrenderização dos componentes que usa o *state* `squares` (`Board`) bem como seus componentes filhos (os componentes `Square` que fazem parte do tabuleiro).
-JavaScript supports [closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) which means an inner function (e.g. `handleClick`) has access to variables and functions defined in a outer function (e.g. `Board`). The `handleClick` function can read the `squares` state and call the `setSquares` method because they are both defined inside of the `Board` function.
+O JavaScript possui suporte a [closures](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Closures) o que significa que uma função interna (por exemplo, `handleClick`) tem acesso às variáveis e funções definidas em uma função externa (por exemplo, `Board`). A função `handleClick` pode ler o *state* `squares` e chamar o método `setSquares` porque eles são ambos definidos dentro da função `Board`.
-Now you can add X's to the board... but only to the upper left square. Your `handleClick` function is hardcoded to update the index for the upper left square (`0`). Let's update `handleClick` to be able to update any square. Add an argument `i` to the `handleClick` function that takes the index of the square to update:
+Agora você pode adicionar X's ao tabuleiro... mas apenas no quadrado superior esquerdo. A sua função `handleClick` está codificada a atualizar o índice do quadrado superior esquerdo (`0`). Vamos atualizar `handleClick` para que seja capaz de atualizar qualquer quadrado. Adicione um argumento `i` à função `handleClick` que recebe o índice de qual quadrado atualizar:
```js {4,6}
export default function Board() {
@@ -1155,27 +1155,27 @@ export default function Board() {
}
```
-Next, you will need to pass that `i` to `handleClick`. You could try to set the `onSquareClick` prop of square to be `handleClick(0)` directly in the JSX like this, but it won't work:
+A seguir, você precisará passar aquele `i` a `handleClick`. Você pode tentar definir a *prop* `onSquareClick` de cada quadrado para `handleClick(0)` diretamente na JSX desta forma, mas isto não funcionará:
```jsx
```
-Here is why this doesn't work. The `handleClick(0)` call will be a part of rendering the board component. Because `handleClick(0)` alters the state of the board component by calling `setSquares`, your entire board component will be re-rendered again. But this runs `handleClick(0)` again, leading to an infinite loop:
+Aqui está o razão pela qual isso não funciona. A chamada `handleClick(0)` será parte da renderização do componente do tabuleiro. Como `handleClick(0)` altera o *state* do componente do tabuleiro ao chamar `setSquares`, seu componente de tabuleiro todo será rerrenderizado novamente. Mas isso executa `handleClick(0)` de novo, levando a um um loop infinito:
-Too many re-renders. React limits the number of renders to prevent an infinite loop.
+Muitas rerrenderizações. O React limita o número de renderizações para previnir um loop infinito.
-Why didn't this problem happen earlier?
+Por que esse problema não aconteceu antes?
-When you were passing `onSquareClick={handleClick}`, you were passing the `handleClick` function down as a prop. You were not calling it! But now you are *calling* that function right away--notice the parentheses in `handleClick(0)`--and that's why it runs too early. You don't *want* to call `handleClick` until the user clicks!
+Quando você estava passando `onSquareClick={handleClick}`, você passava a função `handleClick` como uma *prop*. Você não a chamava! Mas agora você está *chamando* aquela função imediatamente--perceba os parênteses em `handleClick(0)`--e é por isso que ela é executada muito cedo. Você não *quer* chamar `handleClick` até que o usuário clique!
-You could fix by creating a function like `handleFirstSquareClick` that calls `handleClick(0)`, a function like `handleSecondSquareClick` that calls `handleClick(1)`, and so on. You would pass (rather than call) these functions down as props like `onSquareClick={handleFirstSquareClick}`. This would solve the infinite loop.
+Você poderia consertar isso criando uma função como `handleFirstSquareClick` que chama `handleClick(0)`, um função como `handleSecondSquareClick` que chama `handleClick(1)`, e assim por diante. Você passaria (ao invés de chamar) essas funções como *props* assim: `onSquareClick={handleFirstSquareClick}`. Isso resolveria o loop infinito.
-However, defining nine different functions and giving each of them a name is too verbose. Instead, let's do this:
+Entretanto, definir nove funções diferentes e dar um nome a cada uma delas é muito verboso. Em vez disso, vamos fazer isto:
```js {6}
export default function Board() {
@@ -1189,9 +1189,9 @@ export default function Board() {
}
```
-Notice the new `() =>` syntax. Here, `() => handleClick(0)` is an *arrow function,* which is a shorter way to define functions. When the square is clicked, the code after the `=>` "arrow" will run, calling `handleClick(0)`.
+Perceba a nova sintaxe `() =>`. Aqui, `() => handleClick(0)` é uma *arrow function*, a qual é uma maneira mais curta de definir funções. Quando o quadrado é clicado, o código depois da "flecha" `=>` irá executar, chamando `handleClick(0)`.
-Now you need to update the other eight squares to call `handleClick` from the arrow functions you pass. Make sure that the argument for each call of the `handleClick` corresponds to the index of the correct square:
+Agora você precisa atualizar os outros oito quadrados para chamarem `handleClick` através das arrow functions que você passa. Certifique-se de que cada argumento para cada chamada de `handleClick` corresponda ao índice do quadrado correto:
```js {6-8,11-13,16-18}
export default function Board() {
@@ -1218,13 +1218,13 @@ export default function Board() {
};
```
-Now you can again add X's to any square on the board by clicking on them:
+Agora você pode novamente adicionar X's a qualquer quadrado do tabuleiro os clicando:
-![filling the board with X](../images/tutorial/tictac-adding-x-s.gif)
+![preenchendo o tabuleiro com X](../images/tutorial/tictac-adding-x-s.gif)
-But this time all the state management is handled by the `Board` component!
+Mas desta vez toda a manipulação de *state* é feita pelo componente `Board`!
-This is what your code should look like:
+Seu código deve se parecer com isto:
@@ -1317,53 +1317,53 @@ body {
-Now that your state handling is in the `Board` component, the parent `Board` component passes props to the child `Square` components so that they can be displayed correctly. When clicking on a `Square`, the child `Square` component now asks the parent `Board` component to update the state of the board. When the `Board`'s state changes, both the `Board` component and every child `Square` re-renders automatically. Keeping the state of all squares in the `Board` component will allow it to determine the winner in the future.
+Agora que sua manipulação de *state* está no componente `Board`, o componente pai `Board` passa*props* aos componentes filhos `Square` para que eles possam ser exibidos corretamente. Ao clicar em um `Square`, o componente filho `Square` agora pede ao componente pai `Board` que atualize o *state* do tabuleiro. Quando o *state* de `Board` muda, ambos o componente `Board` e cada filho `Square` rerrenderizam automaticamente. Manter o *state* de todos os quadrados no componente `Board` o permitirá determinar o vencedor no futuro.
-Let's recap what happens when a user clicks the top left square on your board to add an `X` to it:
+Vamos recapitular o que acontece quando um usuário clica no quadrado superior esquerdo em seu tabuleiro para adicionar um `X` a ele:
-1. Clicking on the upper left square runs the function that the `button` received as its `onClick` prop from the `Square`. The `Square` component received that function as its `onSquareClick` prop from the `Board`. The `Board` component defined that function directly in the JSX. It calls `handleClick` with an argument of `0`.
-1. `handleClick` uses the argument (`0`) to update the first element of the `squares` array from `null` to `X`.
-1. The `squares` state of the `Board` component was updated, so the `Board` and all of its children re-render. This causes the `value` prop of the `Square` component with index `0` to change from `null` to `X`.
+1. Clicar no quadrado superior esquerdo executra a função que `button` recebeu como sua *prop* `onClick` de `Square`. O componente `Square` receber aquela função como sua *prop* `onSquareClick` de `Board`. O componente `Board` definiu aquela função diretamente na JSX. Ela chama `handleClick`com um argumento de `0`.
+1. `handleClick` usa o argumento (`0`) para atualizar o primeiro elemento do array `squares` de `null` para `X`.
+1. O *state* `square` do componente `Board` foi atualizado, então `Board` e todos os seus filhos rerrenderizam. Isso faz com que a *prop* `value` do componente `Square` de índice `0` mude de `null` para `X`.
-In the end the user sees that the upper left square has changed from empty to having a `X` after clicking it.
+No final o usuário vê que o quadrado superior esquerdo mudou de vazio para ter um `X` depois de clicar nele.
-The DOM `` element's `onClick` attribute has a special meaning to React because it is a built-in component. For custom components like Square, the naming is up to you. You could give any name to the `Square`'s `onSquareClick` prop or `Board`'s `handleClick` function, and the code would work the same. In React, it's conventional to use `onSomething` names for props which represent events and `handleSomething` for the function definitions which handle those events.
+O atributo `onClick` do elemento do DOM `` tem um significado especial ao React porque ele é um componente embutido. Para componentes customizados como Square, a nomeação depende de você. Você poderia dar qualquer nome à *prop* `onSquareClick` de `Square` ou à função `handleClick` de `Board`, e o código funcionaria da mesma forma. No React, é convenção o uso de nomes `onAlgo` para *props* as quais representam eventos e `handleAlgo` para definições de funções as quais manipulam tais eventos.
-### Why immutability is important {/*why-immutability-is-important*/}
+### Por quê imutabilidade é importante {/*why-immutability-is-important*/}
-Note how in `handleClick`, you call `.slice()` to create a copy of the `squares` array instead of modifying the existing array. To explain why, we need to discuss immutability and why immutability is important to learn.
+Perceba como em `handleClick`, você chama `.slice()` para criar uma cópia do array `squares` em vez de modificar o array existente. Para explicar o porquê, nós precisamos discutir imutabilidade e por que imutabilidade é importante de se aprender.
-There are generally two approaches to changing data. The first approach is to _mutate_ the data by directly changing the data's values. The second approach is to replace the data with a new copy which has the desired changes. Here is what it would look like if you mutated the `squares` array:
+Há geralmente duas abordagens para alterar dados. A primeira abordagem é *mutar* os dados alterando diretamente os seus valores. A segunda abordagem é substituir os dados com uma nova cópia a qual tem as mudanças desejadas. Veja como isso se pareceria se você mutasse o array `squares`:
```jsx
const squares = [null, null, null, null, null, null, null, null, null];
squares[0] = 'X';
-// Now `squares` is ["X", null, null, null, null, null, null, null, null];
+// Agora `squares` é ["X", null, null, null, null, null, null, null, null];
```
-And here is what it would look like if you changed data without mutating the `squares` array:
+E aqui está como isso se pareceria se você alterasse os dados sem mutar o array `squares`:
```jsx
const squares = [null, null, null, null, null, null, null, null, null];
const nextSquares = ['X', null, null, null, null, null, null, null, null];
-// Now `squares` is unchanged, but `nextSquares` first element is 'X' rather than `null`
+// Agora `squares` segue não modificado, mas o primeiro elemento de `nextSquares` é 'X' em vez de `null`
```
-The result is the same but by not mutating (changing the underlying data) directly, you gain several benefits.
+O resultado é o mesmo mas ao não mutar (alterar os dados subjacentes) diretamente, você ganha diversos benefícios.
-Immutability makes complex features much easier to implement. Later in this tutorial, you will implement a "time travel" feature that lets you review the game's history and "jump back" to past moves. This functionality isn't specific to games--an ability to undo and redo certain actions is a common requirement for apps. Avoiding direct data mutation lets you keep previous versions of the data intact, and reuse them later.
+Imutabilidade torna recursos complexos muito mais fáceis de se implementar. Mais tarde neste tutorial, você implementará uma função de "viagem no tempo" a qual permite que você avalie o histórico do jogo e "pule de volta" a movimentos passados. Essa funcionalidade não é específica aos jogos--a habilidade de desfazer e refazer certas ações é um requerimento comum para aplicativos. Evitar a mutação direta de dados permite que você mantenha versões prévias dos dados intactas e as reutilize mais tarde.
-There is also another benefit of immutability. By default, all child components re-render automatically when the state of a parent component changes. This includes even the child components that weren't affected by the change. Although re-rendering is not by itself noticeable to the user (you shouldn't actively try to avoid it!), you might want to skip re-rendering a part of the tree that clearly wasn't affected by it for performance reasons. Immutability makes it very cheap for components to compare whether their data has changed or not. You can learn more about how React chooses when to re-render a component in [the `memo` API reference](/reference/react/memo).
+Há também outro benefício da imutabilidade. Por padrão, todos os componentes filhos rerrenderizam automaticamente quando o *state* de um componente pai muda. Isso inclui até os componentes filhos que não foram afetados pela mudança. Mesmo que a rerrenderização em si não seja perceptível ao usuário (você não deveria ativamente tentar evitá-la), você pode querer pular a rerrenderização de uma parte da árvore que claramente não foi afetada por razões de performance. Imutabilidade torna muito barato para os componentes compararem se seus dados foram alterados ou não. Você pode aprender mais sobre como o React escolhe quando rerrenderizar um componente na [referência da API `memo`](/reference/react/memo).
-### Taking turns {/*taking-turns*/}
+### Revezando {/*taking-turns*/}
-It's now time to fix a major defect in this tic-tac-toe game: the "O"s cannot be marked on the board.
+Agora é hora de consertarmos um grande defeito neste jogo da velha: os "O"s não podem ser marcados no tabuleiro.
-You'll set the first move to be "X" by default. Let's keep track of this by adding another piece of state to the Board component:
+Você definirá o primeiro movimento como "X" por padrão. Vamos acompanhar isso adicionando outra peça de *state* ao componente Board:
```js {2}
function Board() {
@@ -1374,7 +1374,7 @@ function Board() {
}
```
-Each time a player moves, `xIsNext` (a boolean) will be flipped to determine which player goes next and the game's state will be saved. You'll update the `Board`'s `handleClick` function to flip the value of `xIsNext`:
+A cada vez que um jogador fizer um movimento, `xIsNext` (um booleano) será invertido para determinar qual o próximo jogador e o *state* do jogo será salvo. Você atualizará a função `handleClick` de `Board` para inverter o valor de `xIsNext`:
```js {7,8,9,10,11,13}
export default function Board() {
@@ -1398,15 +1398,15 @@ export default function Board() {
}
```
-Now, as you click on different squares, they will alternate between `X` and `O`, as they should!
+Agora, ao clicar em diferentes quadrados, eles alternarão entre `X` e `O`, como deveriam!
-But wait, there's a problem. Try clicking on the same square multiple times:
+Mas calma, há um problema. Tente clicar no mesmo quadrado múltiplas vezes:
-![O overwriting an X](../images/tutorial/o-replaces-x.gif)
+![O sobrescrevendo um X](../images/tutorial/o-replaces-x.gif)
-The `X` is overwritten by an `O`! While this would add a very interesting twist to the game, we're going to stick to the original rules for now.
+O `X` é sobrescrito por um `O`! À medida que isso adicionaria uma reviravolta interessante ao jogo, nós vamos nos limitar às regras originais por enquanto.
-When you mark a square with a `X` or an `O` you aren't first checking to see if the square already has a `X` or `O` value. You can fix this by *returning early*. You'll check to see if the square already has a `X` or an `O`. If the square is already filled, you will `return` in the `handleClick` function early--before it tries to update the board state.
+Quando você marca um quadrado com um `X` ou um `O` você não está primeiro checando se o quadrado já possui um valor `X` ou `O`. Você pode consertar isso *retornando cedo*. Você checará se um quadrado já possui `X` ou `O`. Se o quadrado já estiver preenchido, você chamará `return` na função `handleClick` cedo--antes que ela tente atualizar o *state* do tabuleiro.
```js {2,3,4}
function handleClick(i) {
@@ -1418,7 +1418,7 @@ function handleClick(i) {
}
```
-Now you can only add `X`'s or `O`'s to empty squares! Here is what your code should look like at this point:
+Agora você pode apenas adicionar `X`'s ou `O`'s a quadrados vazios! Veja como o seu código deveria estar a esse ponto:
@@ -1520,9 +1520,9 @@ body {
-### Declaring a winner {/*declaring-a-winner*/}
+### Declarando um vencedor {/*declaring-a-winner*/}
-Now that the players can take turns, you'll want to show when the game is won and there are no more turns to make. To do this you'll add a helper function called `calculateWinner` that takes an array of 9 squares, checks for a winner and returns `'X'`, `'O'`, or `null` as appropriate. Don't worry too much about the `calculateWinner` function; it's not specific to React:
+Agora que os jogadores podem trocar de vez, você vai querer exibir quando o jogo for vencido e não existam mais turnos a fazer. Para fazer isso você adicionará uma função ajudante chamada `calculateWinner` a qual recebe um array de 9 quadrados, checa por um vencedor e retorna `'X'`, `'O'`, ou `null` apropriadamente. Não se preocupe muito com a função `calculateWinner`; ela não é específica ao React:
```js App.js
export default function Board() {
@@ -1552,11 +1552,11 @@ function calculateWinner(squares) {
-It does not matter whether you define `calculateWinner` before or after the `Board`. Let's put it at the end so that you don't have to scroll past it every time you edit your components.
+Não importa se você define `calculateWinner` antes ou depois de `Board`. Vamos colocá-la no final para que você não tenha que passar por ela toda vez que quiser editar seus componentes.
-You will call `calculateWinner(squares)` in the `Board` component's `handleClick` function to check if a player has won. You can perform this check at the same time you check if a user has clicked a square that already has a `X` or and `O`. We'd like to return early in both cases:
+Você chamará `calculateWinner(squares)` na função `handleClick` do componente `Board` para checar se um jogador venceu. Você pode realizar essa checagem ao mesmo tempo em que checa se um usuário clicou em um quadrado que já possui um `X` ou um `O`. Nós gostaríamos de retornar cedo em ambos os casos:
```js {2}
function handleClick(i) {
@@ -1568,7 +1568,7 @@ function handleClick(i) {
}
```
-To let the players know when the game is over, you can display text such as "Winner: X" or "Winner: O". To do that you'll add a `status` section to the `Board` component. The status will display the winner if the game is over and if the game is ongoing you'll display which player's turn is next:
+Para deixar que os jogadores saibam quando o jogo terminou, você pode exibir texto como "Vencedor: X" ou "Vencedor: O". Para fazer isso, você adicionará uma seção `status` ao componente `Board`. O status exibirá o vencedor do jogo se o ele tiver terminado e se o jogo estiver em andamento exibirá de qual jogador é o próximo turno:
```js {3-9,13}
export default function Board() {
@@ -1590,7 +1590,7 @@ export default function Board() {
}
```
-Congratulations! You now have a working tic-tac-toe game. And you've just learned the basics of React too. So _you_ are the real winner here. Here is what the code should look like:
+Parabéns! Você agora tem um jogo da velha funcional. E você também acabou de aprender os básicos do React. Então *você* é o verdadeiro vencedor aqui. Veja como seu código deve ser parecer:
@@ -1721,37 +1721,37 @@ body {
-## Adding time travel {/*adding-time-travel*/}
+## Adicionando viagem no tempo {/*adding-time-travel*/}
-As a final exercise, let's make it possible to "go back in time" to the previous moves in the game.
+Como um exercício final, vamos tornar possível "ir de volta no tempo" aos movimentos anteriores no jogo.
-### Storing a history of moves {/*storing-a-history-of-moves*/}
+### Armazenando um histórico de movimentos {/*storing-a-history-of-moves*/}
-If you mutated the `squares` array, implementing time travel would be very difficult.
+Se você tivesse mutado o array `squares`, implementar viagem no tempo seria muito difícil.
-However, you used `slice()` to create a new copy of the `squares` array after every move, and treated it as immutable. This will allow you to store every past version of the `squares` array, and navigate between the turns that have already happened.
+Entretanto, você usou `slice()` para criar uma nova cópia do array de `squares` depois de cada movimento, e o tratou como imutável. Isso permitirá que você armazene cada versão passada do array `squares` e navegue entre os turnos que já aconteceram.
-You'll store the past `squares` arrays in another array called `history`, which you'll store as a new state variable. The `history` array represents all board states, from the first to the last move, and has a shape like this:
+Você armazenará os arrays `squares` antigos em outro array chamado `history`, o qual você armazenará como uma nova variável de *state*. O array de `history` representa todos os *states* do tabuleiro, do primeiro ao último movimento, e possui uma forma parecida com isto:
```jsx
[
- // Before first move
+ // Antes do primeiro movimento
[null, null, null, null, null, null, null, null, null],
- // After first move
+ // Depois do primeiro movimento
[null, null, null, null, 'X', null, null, null, null],
- // After second move
+ // Depois do segundo movimento
[null, null, null, null, 'X', null, null, null, 'O'],
// ...
]
```
-### Lifting state up, again {/*lifting-state-up-again*/}
+### Elevando *state*, novamente {/*lifting-state-up-again*/}
-You will now write a new top-level component called `Game` to display a list of past moves. That's where you will place the `history` state that contains the entire game history.
+Agora você irá escrever um novo componente de nível do topo `Game` para exibir uma lista de movimentos passados. É ali que você colocará o *state* `history` contendo todo o histórico do jogo.
-Placing the `history` state into the `Game` component will let you remove the `squares` state from its child `Board` component. Just like you "lifted state up" from the `Square` component into the `Board` component, you will now lift it up from the `Board` into the top-level `Game` component. This gives the `Game` component full control over the `Board`'s data and lets it instruct the `Board` to render previous turns from the `history`.
+Colocar o *state* `history` no componente `Game` permitirá que você remova o *state* `squares` de seu componente filho `Board`. Assim como você "elevou *state*" do componente `Square` ao componente `Board`, você agora o elevará de `Board` ao componente de nível superior `Game`. Isso dá ao componente `Game` controle total sobre os dados de `Board` e permite-o instruir `Board` a renderizar turnos anteriores a partir de `history`.
-First, add a `Game` component with `export default`. Have it render the `Board` component and some markup:
+Primeiro, adicione um componente `Game` com `export default`. Faça-o renderizar o componente `Board` e alguma marcação HTML:
```js {1,5-16}
function Board() {
@@ -1772,9 +1772,9 @@ export default function Game() {
}
```
-Note that you are removing the `export default` keywords before the `function Board() {` declaration and adding them before the `function Game() {` declaration. This tells your `index.js` file to use the `Game` component as the top-level component instead of your `Board` component. The additional `div`s returned by the `Game` component are making room for the game information you'll add to the board later.
+Perceba que você está removendo as palavras-chave `export default` antes da declaração `function Board() {` e adicionando-as antes da declaração `function Game() {`. Isso diz ao seu arquivo `index.js` para usar o componente `Game` como o componente do nível do topo ao invés do componente `Board`. As `div`s adicionais retornadas pelo componente `Game` estão fazendo espaço para a informação de jogo que você adicionará ao tabuleiro mais tarde.
-Add some state to the `Game` component to track which player is next and the history of moves:
+Adicione algum *state* ao componente `Game` para acompanhar qual é o próximo jogador e o histórico de movimentos:
```js {2-3}
export default function Game() {
@@ -1783,9 +1783,9 @@ export default function Game() {
// ...
```
-Notice how `[Array(9).fill(null)]` is an array with a single item, which itself is an array of 9 `null`s.
+Perceba como `[Array(9).fill(null)]` é um array com um único item, o qual é em si um array de 9 `null`s.
-To render the squares for the current move, you'll want to read the last squares array from the `history`. You don't need `useState` for this--you already have enough information to calculate it during rendering:
+Para renderizar os quadrados do movimento atual, você terá que ler os últimos quadrados do array a partir de `history`. Você não precisa de `useState` para isso--você já tem informação o suficiente para calculá-lo durante a renderização:
```js {4}
export default function Game() {
@@ -1795,7 +1795,7 @@ export default function Game() {
// ...
```
-Next, create a `handlePlay` function inside the `Game` component that will be called by the `Board` component to update the game. Pass `xIsNext`, `currentSquares` and `handlePlay` as props to the `Board` component:
+A seguir, crie uma função `handlePlay` dentro do componente `Game` a qual será chamada pelo componente `Board` para atualizar o jogo. Passe `xIsNext`, `currentSquares` e `handlePlay` como *props* ao componente `Board`:
```js {6-8,13}
export default function Game() {
@@ -1816,7 +1816,7 @@ export default function Game() {
}
```
-Let's make the `Board` component fully controlled by the props it receives. Change the `Board` component to take three props: `xIsNext`, `squares`, and a new `onPlay` function that `Board` can call with the updated squares array when a player makes a move. Next, remove the first two lines of the `Board` function that call `useState`:
+Vamos tornar o componente `Board` completamente controlado pelas *props* que recebe. Mude o componente `Board` para que receba três *props*: `xIsNext`, `squares`, e a nova função `onPlay` que `Board` pode chamar com os quadrados atualizados quando um jogador fizer um movimento. A seguir, remova as duas primeiras linhas da função `Board` que chamam `useState`:
```js {1}
function Board({ xIsNext, squares, onPlay }) {
@@ -1827,7 +1827,7 @@ function Board({ xIsNext, squares, onPlay }) {
}
```
-Now replace the `setSquares` and `setXIsNext` calls in `handleClick` in the `Board` component with a single call to your new `onPlay` function so the `Game` component can update the `Board` when the user clicks a square:
+Agora substitua as chamadas a `setSquares` e `setXIsNext` em `handleClick` no componente `Board` com uma única chamada a sua nova função `onPlay` para que o componente `Game` possa atualizar `Board` quando o usuário clicar em um quadrado:
```js {12}
function Board({ xIsNext, squares, onPlay }) {
@@ -1847,11 +1847,11 @@ function Board({ xIsNext, squares, onPlay }) {
}
```
-The `Board` component is fully controlled by the props passed to it by the `Game` component. You need to implement the `handlePlay` function in the `Game` component to get the game working again.
+O componente `Board` é completamente controlado pelas *props* passadas a ele pelo componente `Game`. Você precisará implementar a função `handlePlay` no componente `Game` para fazer com que o jogo funcione novamente.
-What should `handlePlay` do when called? Remember that Board used to call `setSquares` with an updated array; now it passes the updated `squares` array to `onPlay`.
+O que `handlePlay` deveria fazer quando chamada? Lembre-se que Board costumava chamar `setSquares` com um array atualizado; agora ele passa o array `squares` atualizado a `onPlay`.
-The `handlePlay` function needs to update `Game`'s state to trigger a re-render, but you don't have a `setSquares` function that you can call any more--you're now using the `history` state variable to store this information. You'll want to update `history` by appending the updated `squares` array as a new history entry. You also want to toggle `xIsNext`, just as Board used to do:
+A função `handlePlay` precisa atualizar o *state* de `Game` para acionar uma rerrenderização, mas você não tem mais uma função `setSquares` a qual possa chamar--agora você está usando a variável de *state* `history` para armazenar essa informação. Você vai querer atualizar `history` anexando o array atualizado `squares` como uma nova entrada no histórico. Você também gostará de alternar `xIsNext`, assim como Board costumava fazer:
```js {4-5}
export default function Game() {
@@ -1864,11 +1864,11 @@ export default function Game() {
}
```
-Here, `[...history, nextSquares]` creates a new array that contains all the items in `history`, followed by `nextSquares`. (You can read the `...history` [*spread syntax*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) as "enumerate all the items in `history`".)
+Aqui, `[...history, nextSquares]` cria um novo array que contêm todos os items em `history`, seguido de `nextSquares`. (Você pode ler a [*sintaxe espalhada*](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/Spread_syntax) `...history` como "enumere todos os items em `history`".)
-For example, if `history` is `[[null,null,null], ["X",null,null]]` and `nextSquares` is `["X",null,"O"]`, then the new `[...history, nextSquares]` array will be `[[null,null,null], ["X",null,null], ["X",null,"O"]]`.
+Por exemplo, se `history` é `[[null,null,null], ["X",null,null]]` e `nextSquares` é `["X",null,"O"]` então o novo array `[...history, nextSquares]` será `[[null,null,null], ["X",null,null], ["X",null,"O"]]`.
-At this point, you've moved the state to live in the `Game` component, and the UI should be fully working, just as it was before the refactor. Here is what the code should look like at this point:
+Até agora, você moveu o *state* para viver no componente `Game`, e a UI deve estar funcionando por completo, assim como estava antes da refatoração. Veja com o que o seu código deve se parecer a esse ponto:
@@ -2017,19 +2017,19 @@ body {
-### Showing the past moves {/*showing-the-past-moves*/}
+### Exibindo movimentos passados {/*showing-the-past-moves*/}
-Since you are recording the tic-tac-toe game's history, you can now display a list of past moves to the player.
+Já que você está gravando o histórico do jogo da velha, você agora pode exibir uma lista com os movimentos passados ao jogador.
-React elements like `` are regular JavaScript objects; you can pass them around in your application. To render multiple items in React, you can use an array of React elements.
+Elementos React como `` são objetos comuns do JavaScript; você pode movê-los dentro de sua aplicação. Para renderizar múltiplos items em React, você pode usar um array de elementos React.
-You already have an array of `history` moves in state, so now you need to transform it to an array of React elements. In JavaScript, to transform one array into another, you can use the [array `map` method:](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
+Você já tem um array de movimentos `history` no *state*, então agora você precisa transformá-lo em um array de elementos React. Em JavaScript, para transformar um array em outro, você pode usar o [método de array `map`:](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
```jsx
[1, 2, 3].map((x) => x * 2) // [2, 4, 6]
```
-You'll use `map` to transform your `history` of moves into React elements representing buttons on the screen, and display a list of buttons to "jump" to past moves. Let's `map` over the `history` in the Game component:
+Você usará `map` para transformar seu `history` de movimentos em elementos React representando botões na tela, e exibir a lista de botões para "pular" para movimentos anteriores. Vamos usar `map` sobre `history` no componente Game:
```js {11-13,15-27,35}
export default function Game() {
@@ -2073,7 +2073,7 @@ export default function Game() {
}
```
-You can see what your code should look like below. Note that you should see an error in the developer tools console that says: ``Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Game`.`` You'll fix this error in the next section.
+Você pode ver como seu código deve se parecer abaixo. Perceba que você deve ver um erro em seu console nas ferramentas de desenvolvedor que diz: ``Aviso: Cada filho em um array ou iterador deve ter uma *prop* "key" única. Cheque o método render de `Game`.`` Você consertará esse erro na próxima seção.
@@ -2241,56 +2241,56 @@ body {
-As you iterate through `history` array inside the function you passed to `map`, the `squares` argument goes through each element of `history`, and the `move` argument goes through each array index: `0`, `1`, `2`, …. (In most cases, you'd need the actual array elements, but to render a list of moves you will only need indexes.)
+À medida em que você itera sobre o array `history` dentro da função que você passou ao `map`, o argumento `squares` vai a cada elemento de `history` e o argumento `move` vai a cada índice do array: `0`, `1`, `2`, …. (Na maior parte dos casos, você precisaria dos elementos do array em si, mas para renderizar uma lista de movimento você precisará apenas dos índices).
-For each move in the tic-tac-toe game's history, you create a list item `` which contains a button ``. The button has an `onClick` handler which calls a function called `jumpTo` (that you haven't implemented yet).
+Para cada movimento no histórico do jogo da velha, você cria um item de lista `` o qual contém um botão ``. O botão tem um manipulador `onClick` o qual chama a função denominada `jumpTo` (que você ainda não implementou).
-For now, you should see a list of the moves that occurred in the game and an error in the developer tools console. Let's discuss what the "key" error means.
+Por enquanto, você deve ver uma lista de movimentos que ocorreram no jogo e um erro no console das ferramentas do desenvolvedor. Vamos discutir o que o error de "key" significa.
-### Picking a key {/*picking-a-key*/}
+### Escolhendo uma key {/*picking-a-key*/}
-When you render a list, React stores some information about each rendered list item. When you update a list, React needs to determine what has changed. You could have added, removed, re-arranged, or updated the list's items.
+Quando você renderiza uma lista, o React salva alguma informação sobre cada item da lista renderizado. Quando você atualiza uma lista, o React precisa determinar o que mudou. Você poderia ter adicionado, removido, reposicionado, ou atualizado os items da lista.
-Imagine transitioning from
+Imagine transicionar de
```html
-Alexa: 7 tasks left
-Ben: 5 tasks left
+Alexa: 7 tarefas restantes
+Ben: 5 tarefas restantes
```
-to
+para
```html
-Ben: 9 tasks left
-Claudia: 8 tasks left
-Alexa: 5 tasks left
+Ben: 9 tarefas restantes
+Claudia: 8 tarefas restantes
+Alexa: 5 tarefas restantes
```
-In addition to the updated counts, a human reading this would probably say that you swapped Alexa and Ben's ordering and inserted Claudia between Alexa and Ben. However, React is a computer program and can't know what you intended, so you need to specify a _key_ property for each list item to differentiate each list item from its siblings. If your data was from a database, Alexa, Ben, and Claudia's database IDs could be used as keys.
+Em adição às contagens atualizadas, um humano lendo isso provavelmente diria que você trocou a ordem de Alexa e Ben e inseriu Claudia entre Alexa e Ben. Entretanto, o React é um programa de computador e não pode saber quais as suas intenções, então você precisa especificar uma propriedade *key* para cada item da lista para diferenciar cada item da lista de seus irmãos. Se seus dados vêm de uma base de dados, os IDs de Alexa, Ben e Claudia vindos da base de dados podem ser usadas como keys.
```js {1}
- {user.name}: {user.taskCount} tasks left
+ {user.name}: {user.taskCount} tarefas restantes
```
-When a list is re-rendered, React takes each list item's key and searches the previous list's items for a matching key. If the current list has a key that didn't exist before, React creates a component. If the current list is missing a key that existed in the previous list, React destroys the previous component. If two keys match, the corresponding component is moved.
+Quando uma lista é rerrenderizada, o React usa a key de cada item da lista e procura nos itens da lista anterior por uma chave que combine. Se a lista atual possui uma key que não existia antes, o React cria um componente. Se na lista atual está faltando uma chave que existia na lista anterior, o React destrói o componente anterior. Se duas chaves são iguais, o componente correspondente é movido.
-Keys tell React about the identity of each component, which allows React to maintain state between re-renders. If a component's key changes, the component will be destroyed and re-created with a new state.
+Keys dizem ao React sobre a identidade de cada componente, o que permite ao React manter o *state* entre rerrenderizações. Se a key de um componente muda, o componente será destruído e recriado com um novo *state*.
-`key` is a special and reserved property in React. When an element is created, React extracts the `key` property and stores the key directly on the returned element. Even though `key` may look like it is passed as props, React automatically uses `key` to decide which components to update. There's no way for a component to ask what `key` its parent specified.
+`key` é uma propriedade especial e reservada em React. Quando um elemento é criado, o React extrai a propriedade `key` e a salva diretamente no elemento retornado. Mesmo que a `key` possa parecer como se fosse passada como uma *prop*, o React automaticamente usa `key` para decidir quais componente a atualizar. Não há maneira para que um componente peça qual `key` seu pai especificou.
-**It's strongly recommended that you assign proper keys whenever you build dynamic lists.** If you don't have an appropriate key, you may want to consider restructuring your data so that you do.
+**É fortemente recomendado que você designe keys apropriadas sempre que estiver construindo listas dinâmicas.** Se você não tiver uma key apropriada, você pode considerar a reestruturação de seus dados para que você tenha.
-If no key is specified, React will report an error and use the array index as a key by default. Using the array index as a key is problematic when trying to re-order a list's items or inserting/removing list items. Explicitly passing `key={i}` silences the error but has the same problems as array indices and is not recommended in most cases.
+Se nenhuma key é especificada, o React irá reportar um erro e usará o índice do array como key por padrão. Usar o índice do array como key é problemático ao tentar re-ordenar os items de uma lista ou inserindo/removendo items da lista. Passar explicitamente `key={i}` silencia esses erros mas tem os mesmo problemas que índices de array e não é recomendado na maioria dos casos.
-Keys do not need to be globally unique; they only need to be unique between components and their siblings.
+Keys não precisam ser globalmente únicas; elas só precisam ser únicas entre componentes e seus filhos.
-### Implementing time travel {/*implementing-time-travel*/}
+### Implementando viagem no tempo {/*implementing-time-travel*/}
-In the tic-tac-toe game's history, each past move has a unique ID associated with it: it's the sequential number of the move. Moves will never be re-ordered, deleted, or inserted in the middle, so it's safe to use the move index as a key.
+No histórico do jogo da velha, cada movimento passado possui um ID único associado com ele: é o número sequencial do movimento. Movimentos nunca serão reordenados, excluídos, ou inseridos no meio, então é seguro usar o índice do movimento como key.
-In the `Game` function, you can add the key as ``, and if you reload the rendered game, React's "key" error should disappear:
+Na função `Game`, você pode adicionar a key como ` `, e se você recarregar o jogo renderizado, o erro de "key" do React deveria desaparecer:
```js {4}
const moves = history.map((squares, move) => {
@@ -2470,7 +2470,7 @@ body {
-Before you can implement `jumpTo`, you need the `Game` component to keep track of which step the user is currently viewing. To do this, define a new state variable called `currentMove`, defaulting to `0`:
+Antes que você possa implementar `jumpTo`, você precisa que o componente `Game` acompanhe qual passo o usuário está vendo atualmente. Para fazer isso, defina uma nova variável de *state* chamada `currentMove`, definida por padrão como `0`:
```js {4}
export default function Game() {
@@ -2482,7 +2482,7 @@ export default function Game() {
}
```
-Next, update the `jumpTo` function inside `Game` to update that `currentMove`. You'll also set `xIsNext` to `true` if the number that you're changing `currentMove` to is even.
+A seguir, atualize a função `jumpTo` dentro de `Game` para atualizar o `currentMove`. Você também definirá `xIsNext` como `true` se o número para o qual você está mudando `currentMove` seja par.
```js {4-5}
export default function Game() {
@@ -2495,10 +2495,10 @@ export default function Game() {
}
```
-You will now make two changes to the `Game`'s `handlePlay` function which is called when you click on a square.
+Você agora irá fazer duas mudanças à função `handlePlay` de `Game` em que é chamada quando você clica no quadrado.
-- If you "go back in time" and then make a new move from that point, you only want to keep the history up to that point. Instead of adding `nextSquares` after all items (`...` spread syntax) in `history`, you'll add it after all items in `history.slice(0, currentMove + 1)` so that you're only keeping that portion of the old history.
-- Each time a move is made, you need to update `currentMove` to point to the latest history entry.
+- Se você "ir de volta no tempo" e então fazer um novo movimento a partir daquele ponto, você só gostará manter o histórico até aquele ponto. Em vez de adicionar `nextSquares` depois de todos os items (sintaxe espalhada `...`) em `history`, você o adicionará em `history.slice(0, currentMove + 1)` para que você esteja mantendo apenas aquela porção do histórico antigo.
+- A cada vez que um movimento seja feito, você precisará atualizar `currentMove` para apontar à última entrada do histórico.
```js {2-4}
function handlePlay(nextSquares) {
@@ -2509,7 +2509,7 @@ function handlePlay(nextSquares) {
}
```
-Finally, you will modify the `Game` component to render the currently selected move, instead of always rendering the final move:
+Finalmente, você irá modificar o componente `Game` para renderizar o movimento atualmente selecionado, em vez de sempre renderizar o movimento final:
```js {5}
export default function Game() {
@@ -2522,7 +2522,7 @@ export default function Game() {
}
```
-If you click on any step in the game's history, the tic-tac-toe board should immediately update to show what the board looked like after that step occurred.
+Se você clicar em qualquer passo no histórico do jogo, o tabuleiro de jogo da velha deve atualizar imediatamente para mostrar como o tabuleiro se parecia depois que aquele movimento ocorreu.
@@ -2693,11 +2693,11 @@ body {
-### Final cleanup {/*final-cleanup*/}
+### Limpeza final {/*final-cleanup*/}
-If you look at the code very closely, you may notice that `xIsNext === true` when `currentMove` is even and `xIsNext === false` when `currentMove` is odd. In other words, if you know the value of `currentMove`, then you can always figure out what `xIsNext` should be.
+Se você olhar para o código bastante atenção, pode perceber que `xIsNext === true` quando `currentMove` é par e `xIsNext === false` quando `currentMove` é ímpar. Em outras palavras, se você sabe o valor de `currentMove`, então você sempre pode descobrir o que `xIsNext` deveria ser.
-There's no reason for you to store both of these in state. In fact, always try to avoid redundant state. Simplifying what you store in state reduces bugs and makes your code easier to understand. Change `Game` so that it doesn't store `xIsNext` as a separate state variable and instead figures it out based on the `currentMove`:
+Não há razão para armazenar ambos em *state*. De fato, sempre tente evitar *state* redundante. A simplificação do que você armazena em *state* reduz bugs e faz do seu código mais fácil de entender. Mude `Game` para que ele não armazene mais `xIsNext` como uma variável de *state* separada e em vez disso a descubra com base em `currentMove`:
```js {4,11,15}
export default function Game() {
@@ -2719,20 +2719,20 @@ export default function Game() {
}
```
-You no longer need the `xIsNext` state declaration or the calls to `setXIsNext`. Now, there's no chance for `xIsNext` to get out of sync with `currentMove`, even if you make a mistake while coding the components.
+Você não mais precisa da declaração de *state* `xIsNext` ou as chamadas de `setXIsNext`. Agora, não há chance de que `xIsNext` dessincronize com `currentMove`, mesmo se vocẽ fizer um erro enquanto programa os componentes.
-### Wrapping up {/*wrapping-up*/}
+### Concluindo {/*wrapping-up*/}
-Congratulations! You've created a tic-tac-toe game that:
+Parabéns! Você criou um jogo da velha que:
-- Lets you play tic-tac-toe,
-- Indicates when a player has won the game,
-- Stores a game's history as a game progresses,
-- Allows players to review a game's history and see previous versions of a game's board.
+- Deixa que você jogue jogo da velha,
+- Indica quando um jogador venceu o jogo,
+- Armazena o histórico do jogo em um histórico enquanto o jogo progride,
+- Permite aos jogadores revisar o histórico de um jogo e ver versões anteriores do tabuleiro do jogo.
-Nice work! We hope you now feel like you have a decent grasp of how React works.
+Bom Trabalho! Nós esperamos que agora você sinta que tem um bom entendimento sobre como o React funciona.
-Check out the final result here:
+Cheque o resultado final aqui:
@@ -2901,12 +2901,12 @@ body {
-If you have extra time or want to practice your new React skills, here are some ideas for improvements that you could make to the tic-tac-toe game, listed in order of increasing difficulty:
+Se você tem tempo extra ou quer praticar suas novas habilidades de React, aqui estão algumas ideias de melhorias que você poderia fazer ao jogo da velha, listadas em ordem de dificuldade crescente:
-1. For the current move only, show "You are at move #..." instead of a button.
-1. Rewrite `Board` to use two loops to make the squares instead of hardcoding them.
-1. Add a toggle button that lets you sort the moves in either ascending or descending order.
-1. When someone wins, highlight the three squares that caused the win (and when no one wins, display a message about the result being a draw).
-1. Display the location for each move in the format (row, col) in the move history list.
+1. Apenas para o movimento atual, mostre "Você está no movimento #..." em vez de um botão.
+1. Reescreva `Board` para que use dois loops que façam quadrados em vez de codificá-los.
+1. Adicione um botão alternador que permite que você ordene os movimento em ordem ascendente ou descendente.
+1. Quando alguém ganhar, sublinhe os três quadrados que causaram a vitória (e quando ninguém ganhar, exiba uma mensagem sobre o resultado ter sido um empate).
+1. Exiba a localização de cada movimento no formato (linha, coluna) e mova a lista do histórico.
-Throughout this tutorial, you've touched on React concepts including elements, components, props, and state. Now that you've seen how these concepts work when building a game, check out [Thinking in React](/learn/thinking-in-react) to see how the same React concepts work when build an app's UI.
+Ao longo desse tutorial, você entrou em contato com conceitos do React incluindo elementos, componentes, *props* e *state*. Agora que você viu como esses conceitos funcionam construindo um jogo, veja [Pensando em React](/learn/thinking-in-react) para entender como os mesmos conceitos do React funcionam ao construir a UI de um aplicativo.
From 7f04b3cfb1db1870c6c7e8a0c1aba25a3fd263e4 Mon Sep 17 00:00:00 2001
From: Tiago Barros
Date: Mon, 22 May 2023 09:49:57 -0300
Subject: [PATCH 08/67] Translate the `render-and-commit` page (#665)
* [FEAT]: Translate the render-and-commit page
* WIP
---
src/content/learn/render-and-commit.md | 115 ++++++++++++-------------
1 file changed, 57 insertions(+), 58 deletions(-)
diff --git a/src/content/learn/render-and-commit.md b/src/content/learn/render-and-commit.md
index 84bf904cd..2808fccc9 100644
--- a/src/content/learn/render-and-commit.md
+++ b/src/content/learn/render-and-commit.md
@@ -1,44 +1,44 @@
---
-title: Render and Commit
+title: Renderizar e Confirmar
---
-Before your components are displayed on screen, they must be rendered by React. Understanding the steps in this process will help you think about how your code executes and explain its behavior.
+Antes de seus componentes serem exibidos em tela, eles devem ser renderizados pelo React. Entender as etapas desse processo irá te ajudar a pensar sobre como seu código é executado e a explicar seu comportamento.
-* What rendering means in React
-* When and why React renders a component
-* The steps involved in displaying a component on screen
-* Why rendering does not always produce a DOM update
+* O que significa renderização no React
+* Quando e porque o React renderiza um componente
+* As etapas envolvidas na exibição de um componente na tela
+* Por que a renderização nem sempre produz uma atualização no DOM
-Imagine that your components are cooks in the kitchen, assembling tasty dishes from ingredients. In this scenario, React is the waiter who puts in requests from customers and brings them their orders. This process of requesting and serving UI has three steps:
+Imagine que seus componentes são cozinheiros na cozinha, preparando pratos saborosos com ingredientes. Nesse cenário, o React é o garçom que faz as solicitações dos clientes e traz seus pedidos. Esse processo de solicitação e veiculação da interface do usuário tem três etapas:
-1. **Triggering** a render (delivering the guest's order to the kitchen)
-2. **Rendering** the component (preparing the order in the kitchen)
-3. **Committing** to the DOM (placing the order on the table)
+1. **Acionando** uma renderização (entregar o pedido do cliente na cozinha)
+2. **Renderizando** o componente (preparar o pedido na cozinha)
+3. **Confirmar** com o DOM (colocar o pedido na mesa)
-
-
-
+
+
+
-## Step 1: Trigger a render {/*step-1-trigger-a-render*/}
+## Etapa 1: Acionar uma renderização {/*step-1-trigger-a-render*/}
-There are two reasons for a component to render:
+Há duas razões para um componente ser renderizado
-1. It's the component's **initial render.**
-2. The component's (or one of its ancestors') **state has been updated.**
+1. É a **renderização inicial** do componente.
+2. O estado do componente (ou de um de seus ancestrais) **foi atualizado.**
-### Initial render {/*initial-render*/}
+### Renderização inicial {/*initial-render*/}
-When your app starts, you need to trigger the initial render. Frameworks and sandboxes sometimes hide this code, but it's done by calling [`createRoot`](/reference/react-dom/client/createRoot) with the target DOM node, and then calling its `render` method with your component:
+Quando seu app é iniciado, você precisa acionar uma renderização inicial. Às vezes, Frameworks e sandboxes ocultam esse código, mas isso é feito chamando [`createRoot`](/reference/react-dom/client/createRoot) com o alvo de nó DOM, e em seguida, chamando seu método `render` com seu componente:
@@ -55,7 +55,7 @@ export default function Image() {
return (
);
}
@@ -63,28 +63,28 @@ export default function Image() {
-Try commenting out the `root.render()` call and see the component disappear!
+Tente comentar a chamada `root.render()` e veja o componente desaparecer!
-### Re-renders when state updates {/*re-renders-when-state-updates*/}
+### Rerrenderizar quando o estado é atualizado {/*re-renders-when-state-updates*/}
-Once the component has been initially rendered, you can trigger further renders by updating its state with the [`set` function.](/reference/react/useState#setstate) Updating your component's state automatically queues a render. (You can imagine these as a restaurant guest ordering tea, dessert, and all sorts of things after putting in their first order, depending on the state of their thirst or hunger.)
+Uma vez que o componente foi renderizado inicialmente, você pode acionar outras renderizações atualizando seu estado com a função [`set`](/reference/react/useState#setstate). A atualização do estado do seu componente enfileira automaticamente uma renderização. (Você pode imaginá-los como um cliente de restaurante pedindo chá, sobremesa e todo tipo de coisas depois de fazer o primeiro pedido, dependendo do estado de sede ou fome.)
-
-
-
+
+
+
-## Step 2: React renders your components {/*step-2-react-renders-your-components*/}
+## Etapa 2: React renderiza seus componentes {/*step-2-react-renders-your-components*/}
-After you trigger a render, React calls your components to figure out what to display on screen. **"Rendering" is React calling your components.**
+Depois de acionar uma renderização, o React chama seus componentes para descobrir o que exibir na tela. **"Renderização" é o React chamando seus componentes.**
-* **On initial render,** React will call the root component.
-* **For subsequent renders,** React will call the function component whose state update triggered the render.
+* **Na renderização inicial,** o React chamará o componente raiz.
+* **Para renderizações seguintes,** o React chamará o componente de função cuja atualização de estado acionou a renderização.
-This process is recursive: if the updated component returns some other component, React will render _that_ component next, and if that component also returns something, it will render _that_ component next, and so on. The process will continue until there are no more nested components and React knows exactly what should be displayed on screen.
+Este processo é recursivo: se o componente atualizado retornar algum outro componente, o React renderizará _aquele_ componente a seguir, e se esse componente também retornar algo, ele renderizará _aquele_ componente em seguida e assim por diante. O processo continuará até que não haja mais componentes aninhados e o React saiba exatamente o que deve ser exibido na tela.
-In the following example, React will call `Gallery()` and `Image()` several times:
+No exemplo a seguir, o React chamará `Gallery()` e `Image()` várias vezes:
@@ -92,7 +92,7 @@ In the following example, React will call `Gallery()` and `Image()` several tim
export default function Gallery() {
return (
- Inspiring Sculptures
+ Esculturas inspiradoras
@@ -104,7 +104,7 @@ function Image() {
return (
);
}
@@ -124,36 +124,36 @@ img { margin: 0 10px 10px 0; }
-* **During the initial render,** React will [create the DOM nodes](https://developer.mozilla.org/docs/Web/API/Document/createElement) for ``, ``, and three ` ` tags.
-* **During a re-render,** React will calculate which of their properties, if any, have changed since the previous render. It won't do anything with that information until the next step, the commit phase.
+* **Durante a renderização inicial,** o React [criará os nós DOM](https://developer.mozilla.org/docs/Web/API/Document/createElement) para ``, ``, e três tags ` `.
+* **Durante uma rerrenderização,** o React calculará quais de suas propriedades, se houver, foram alterados desde a renderização anterior. Ele não fará nada com essa informação até a próxima etapa, a fase de confirmação.
-Rendering must always be a [pure calculation](/learn/keeping-components-pure):
+A renderização sempre deve ser um [cálculo puro](/learn/keeping-components-pure):
-* **Same inputs, same output.** Given the same inputs, a component should always return the same JSX. (When someone orders a salad with tomatoes, they should not receive a salad with onions!)
-* **It minds its own business.** It should not change any objects or variables that existed before rendering. (One order should not change anyone else's order.)
+* **Mesmas entradas, mesma saída.** Dadas as mesmas entradas, um componente deve sempre retornar o mesmo JSX. (Quando alguém pede uma salada com tomate, não deve receber uma salada com cebola!)
+* **Ele cuida de seus próprios negócios.** Ele não deve alterar nenhum objeto ou variável que existia antes da renderização. (Um pedido não deve alterar o pedido de ninguém.)
-Otherwise, you can encounter confusing bugs and unpredictable behavior as your codebase grows in complexity. When developing in "Strict Mode", React calls each component's function twice, which can help surface mistakes caused by impure functions.
+Caso contrário, você pode encontrar bugs confusos e comportamento imprevisível à medida que sua base de código cresce em complexidade. Ao desenvolver no "Modo estrito (Strict Mode)", o React chama a função de cada componente duas vezes, o que pode ajudar a detectar erros causados por funções impuras.
-#### Optimizing performance {/*optimizing-performance*/}
+#### Otimizando o desempenho {/*optimizing-performance*/}
-The default behavior of rendering all components nested within the updated component is not optimal for performance if the updated component is very high in the tree. If you run into a performance issue, there are several opt-in ways to solve it described in the [Performance](https://reactjs.org/docs/optimizing-performance.html) section. **Don't optimize prematurely!**
+O comportamento padrão de renderizar todos os componentes aninhados no componente atualizado não é ideal para desempenho se o componente atualizado estiver muito alto na árvore. Se você tiver um problema de desempenho, existem várias maneiras opcionais de resolvê-lo descritas na seção [Desempenho](https://reactjs.org/docs/optimizing-performance.html). **Não otimize prematuramente!**
-## Step 3: React commits changes to the DOM {/*step-3-react-commits-changes-to-the-dom*/}
+## Etapa 3: O React confirma as alterações no DOM {/*step-3-react-commits-changes-to-the-dom*/}
-After rendering (calling) your components, React will modify the DOM.
+Depois de renderizar (chamar) seus componentes, o React modificará o DOM.
-* **For the initial render,** React will use the [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) DOM API to put all the DOM nodes it has created on screen.
-* **For re-renders,** React will apply the minimal necessary operations (calculated while rendering!) to make the DOM match the latest rendering output.
+* **Para a renderização inicial,** o React usará a API DOM [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) para colocar todos os nós DOM criados na tela.
+* **Para rerrenderizações,** o React aplicará as operações mínimas necessárias (calculadas durante a renderização!) Para fazer o DOM corresponder à última saída de renderização.
-**React only changes the DOM nodes if there's a difference between renders.** For example, here is a component that re-renders with different props passed from its parent every second. Notice how you can add some text into the ` `, updating its `value`, but the text doesn't disappear when the component re-renders:
+**O React apenas altera os nós do DOM se houver uma diferença entre as renderizações.** Por exemplo, aqui está um componente que renderiza novamente com props diferentes passados de seu pai a cada segundo. Observe como você pode adicionar algum texto no ` `, atualizando seu `valor`, mas o texto não desaparece quando o componente renderiza novamente:
@@ -193,21 +193,20 @@ export default function App() {
-This works because during this last step, React only updates the content of `` with the new `time`. It sees that the ` ` appears in the JSX in the same place as last time, so React doesn't touch the ` `—or its `value`!
-## Epilogue: Browser paint {/*epilogue-browser-paint*/}
+Isso funciona porque durante esta última etapa, o React apenas atualiza o conteúdo de `` com o novo `time`. Ele vê que o ` ` aparece no JSX no mesmo lugar da última vez, então o React não toca no ` `—ou no seu `value`!
+## Epílogo: pintura do Navegador {/*epilogue-browser-paint*/}
-After rendering is done and React updated the DOM, the browser will repaint the screen. Although this process is known as "browser rendering", we'll refer to it as "painting" to avoid confusion throughout the docs.
+Após a renderização ser concluída e o React atualizar o DOM, o navegador irá repintar a tela. Embora esse processo seja conhecido como "renderização do navegador", vamos nos referir a ele como "pintura" para evitar confusão ao longo dos documentos.
-
+
-* Any screen update in a React app happens in three steps:
- 1. Trigger
- 2. Render
- 3. Commit
-* You can use Strict Mode to find mistakes in your components
-* React does not touch the DOM if the rendering result is the same as last time
+* Qualquer atualização de tela em um app React ocorre em três etapas:
+ 1. Acionar
+ 2. Renderizar
+ 3. Confirmar
+* Você pode usar o Modo Estrito (Strict Mode) para encontrar erros em seus componentes
+* O React não toca no DOM se o resultado da renderização for o mesmo da última vez
-
From 5715d09ab0bf6726637883b4a295e1a55855c323 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Renato=20B=C3=B6hler?=
Date: Mon, 22 May 2023 09:54:49 -0300
Subject: [PATCH 09/67] Adds new common translation terms to `GLOSSARY.md`
(#681)
* Adds new common translation terms
* Adds translation suggestion for "caveats"
---
GLOSSARY.md | 3 +++
1 file changed, 3 insertions(+)
diff --git a/GLOSSARY.md b/GLOSSARY.md
index 2ce2caf7d..19ff920aa 100644
--- a/GLOSSARY.md
+++ b/GLOSSARY.md
@@ -105,9 +105,11 @@ Sugestões de palavras e termos:
| Palavra/Termo original | Sugestão |
| ---------------------- | -------------------------------------- |
| assertion | asserção |
+| at the top level | na raiz |
| browser | navegador |
| bubbling | propagar |
| bug | erro |
+| caveats | ressalvas |
| class component | componente de classe |
| class | classe |
| client | cliente |
@@ -136,6 +138,7 @@ Sugestões de palavras e termos:
| stateful logic | lógica com estado |
| to assert | afirmar |
| to wrap | encapsular |
+| troubleshooting | solução de problemas |
| uncontrolled component | componente não controlado |
| uppercase | maiúscula(s) / caixa alta |
From 331206a4bd13330fae04c6dd6cc9ad2811deedd3 Mon Sep 17 00:00:00 2001
From: Kevin Cubas <61201131+kevinCubas@users.noreply.github.com>
Date: Mon, 22 May 2023 14:36:08 -0300
Subject: [PATCH 10/67] Translate Fragment.md (#680)
* update(translation): translate Fragment component path: src\content\reference\react\Fragment.md
* fix: remove english lines
* fix: grammar typos
* fix: break lines between sections
Co-authored-by: Jhon Mike
* Update Fragment.md
---------
Co-authored-by: Jhon Mike
---
src/content/reference/react/Fragment.md | 56 ++++++++++++-------------
1 file changed, 28 insertions(+), 28 deletions(-)
diff --git a/src/content/reference/react/Fragment.md b/src/content/reference/react/Fragment.md
index aa72b08a0..1d0848b22 100644
--- a/src/content/reference/react/Fragment.md
+++ b/src/content/reference/react/Fragment.md
@@ -4,7 +4,7 @@ title: (<>...>)
-``, often used via `<>...>` syntax, lets you group elements without a wrapper node.
+``, frequentemente usado por meio da sintaxe `<>...>`, permite agrupar elementos sem um nó de encapsulamento.
```js
<>
@@ -19,29 +19,29 @@ title: (<>...>)
---
-## Reference {/*reference*/}
+## Referência {/*reference*/}
### `` {/*fragment*/}
-Wrap elements in `` to group them together in situations where you need a single element. Grouping elements in `Fragment` has no effect on the resulting DOM; it is the same as if the elements were not grouped. The empty JSX tag `<>>` is shorthand for ` ` in most cases.
+Encapsule elementos em `` para agrupá-los juntos em situações em que você precisa de um único elemento. Agrupar elementos em `Fragment` não afeta o DOM resultante; é o mesmo que se os elementos não estivessem agrupados. A tag JSX vazia `<>>` é uma forma abreviada de ` ` na maioria dos casos.
#### Props {/*props*/}
-- **optional** `key`: Fragments declared with the explicit `` syntax may have [keys.](/learn/rendering-lists#keeping-list-items-in-order-with-key)
+- **opcional** `key`: Fragments declarados com a sintaxe explícita `` podem ter [keys.](https://pt-br.react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key).
-#### Caveats {/*caveats*/}
+#### Cuidados {/*caveats*/}
-- If you want to pass `key` to a Fragment, you can't use the `<>...>` syntax. You have to explicitly import `Fragment` from `'react'` and render `... `.
+- Se você quiser passar uma `key` para um Fragment, não pode usar a sintaxe `<>...>`. Você precisa importar explicitamente o `Fragment` de `'react'` e renderizar `... `.
-- React does not [reset state](/learn/preserving-and-resetting-state) when you go from rendering `<> >` to `[ ]` or back, or when you go from rendering `<> >` to ` ` and back. This only works a single level deep: for example, going from `<><> >>` to ` ` resets the state. See the precise semantics [here.](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b)
+- O React não [reseta o estado](/learn/preserving-and-resetting-state) quando você passa de `<> >` para `[ ]` ou vice-versa, ou quando você passa de `<> >` para ` ` e vice-versa. Isso funciona apenas para um único nível: por exemplo, passar de `<><> >>` para ` ` reseta o estado. Veja a semântica precisa [aqui.](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b).
---
-## Usage {/*usage*/}
+## Uso {/*usage*/}
-### Returning multiple elements {/*returning-multiple-elements*/}
+### Retornando múltiplos elementos {/*returning-multiple-elements*/}
-Use `Fragment`, or the equivalent `<>...>` syntax, to group multiple elements together. You can use it to put multiple elements in any place where a single element can go. For example, a component can only return one element, but by using a Fragment you can group multiple elements together and then return them as a group:
+Use `Fragment` ou a sintaxe equivalente `<>...>` para agrupar vários elementos juntos. Você pode usá-lo para colocar vários elementos em qualquer lugar onde um único elemento possa ir. Por exemplo, um componente só pode retornar um elemento, mas usando um Fragment você pode agrupar vários elementos juntos e então retorná-los como um grupo:
```js {3,6}
function Post() {
@@ -54,7 +54,7 @@ function Post() {
}
```
-Fragments are useful because grouping elements with a Fragment has no effect on layout or styles, unlike if you wrapped the elements in another container like a DOM element. If you inspect this example with the browser tools, you'll see that all `` and `` DOM nodes appear as siblings without wrappers around them:
+Fragments são úteis porque agrupar elementos com um Fragment não afeta o layout ou os estilos, ao contrário se você envolvesse os elementos em outro container como um elemento do DOM. Se você inspecionar este exemplo com as ferramentas do navegador, verá que todos os nós do DOM `` e `` aparecem como irmãos sem encapsulamento ao redor deles:
@@ -62,8 +62,8 @@ Fragments are useful because grouping elements with a Fragment has no effect on
export default function Blog() {
return (
<>
-
-
+
+
>
)
}
@@ -94,9 +94,9 @@ function PostBody({ body }) {
-#### How to write a Fragment without the special syntax? {/*how-to-write-a-fragment-without-the-special-syntax*/}
+#### Como escrever um Fragment sem a sintaxe especial? {/*how-to-write-a-fragment-without-the-special-syntax*/}
-The example above is equivalent to importing `Fragment` from React:
+O exemplo acima é equivalente a importar `Fragment` do React:
```js {1,5,8}
import { Fragment } from 'react';
@@ -111,15 +111,15 @@ function Post() {
}
```
-Usually you won't need this unless you need to [pass a `key` to your `Fragment`.](#rendering-a-list-of-fragments)
+Normalmente, você não precisará disso, a menos que precise [passar uma `key` para o seu `Fragment`.](#rendering-a-list-of-fragments)
---
-### Assigning multiple elements to a variable {/*assigning-multiple-elements-to-a-variable*/}
+### Atribuindo vários elementos a uma variável {/*assigning-multiple-elements-to-a-variable*/}
-Like any other element, you can assign Fragment elements to variables, pass them as props, and so on:
+Assim como qualquer outro elemento, você pode atribuir elementos de Fragment a variáveis, passá-los como props, e assim por diante:
```js
function CloseDialog() {
@@ -131,7 +131,7 @@ function CloseDialog() {
);
return (
- Are you sure you want to leave this page?
+ Você tem certeza que deseja sair desta página?
);
}
@@ -139,17 +139,17 @@ function CloseDialog() {
---
-### Grouping elements with text {/*grouping-elements-with-text*/}
+### Agrupando elementos com texto {/*grouping-elements-with-text*/}
-You can use `Fragment` to group text together with components:
+Você pode usar `Fragment` para agrupar textos juntamente com componentes:
```js
function DateRangePicker({ start, end }) {
return (
<>
- From
+ De
- to
+ para
>
);
@@ -158,9 +158,9 @@ function DateRangePicker({ start, end }) {
---
-### Rendering a list of Fragments {/*rendering-a-list-of-fragments*/}
+### Renderizando uma lista de Fragments {/*rendering-a-list-of-fragments*/}
-Here's a situation where you need to write `Fragment` explicitly instead of using the `<>>` syntax. When you [render multiple elements in a loop](/learn/rendering-lists), you need to assign a `key` to each element. If the elements within the loop are Fragments, you need to use the normal JSX element syntax in order to provide the `key` attribute:
+Aqui está uma situação em que você precisa escrever `Fragment` explicitamente em vez de usar a sintaxe `<>>`. Quando você [renderiza vários elementos em um loop](https://pt-br.react.dev/learn/rendering-lists), é necessário atribuir uma `key` a cada elemento. Se os elementos dentro do loop forem Fragments, você precisará usar a sintaxe normal de elementos JSX para fornecer o atributo `key`:
```js {3,6}
function Blog() {
@@ -173,7 +173,7 @@ function Blog() {
}
```
-You can inspect the DOM to verify that there are no wrapper elements around the Fragment children:
+Você pode inspecionar o DOM para verificar que não há elementos de encapsulamento ao redor dos filhos do Fragment:
@@ -181,8 +181,8 @@ You can inspect the DOM to verify that there are no wrapper elements around the
import { Fragment } from 'react';
const posts = [
- { id: 1, title: 'An update', body: "It's been a while since I posted..." },
- { id: 2, title: 'My new blog', body: 'I am starting a new blog!' }
+ { id: 1, title: 'Uma atualização', body: "Faz um tempo desde que eu publiquei..." },
+ { id: 2, title: 'Meu novo blog', body: 'Eu estou começando um novo blog!' }
];
export default function Blog() {
From 398ace5b5e36535be19e89edd8c4a20db8a3e042 Mon Sep 17 00:00:00 2001
From: Viacheslav Makarov <9768704+mekarthedev@users.noreply.github.com>
Date: Tue, 23 May 2023 16:01:09 +0200
Subject: [PATCH 11/67] Add missing 'it' (#6061)
---
src/content/reference/react/useEffect.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/content/reference/react/useEffect.md b/src/content/reference/react/useEffect.md
index dd84fd2ea..8d04f205c 100644
--- a/src/content/reference/react/useEffect.md
+++ b/src/content/reference/react/useEffect.md
@@ -1089,7 +1089,7 @@ function ChatRoom({ roomId }) {
}
```
-**To remove a dependency, you need to ["prove" to the linter *doesn't need* to be a dependency.](/learn/removing-effect-dependencies#removing-unnecessary-dependencies)** For example, you can move `serverUrl` out of your component to prove that it's not reactive and won't change on re-renders:
+**To remove a dependency, you need to ["prove" to the linter that it *doesn't need* to be a dependency.](/learn/removing-effect-dependencies#removing-unnecessary-dependencies)** For example, you can move `serverUrl` out of your component to prove that it's not reactive and won't change on re-renders:
```js {1,8}
const serverUrl = 'https://localhost:1234'; // Not a reactive value anymore
From 09185bcea9c7880763a458e9a68e67e454109791 Mon Sep 17 00:00:00 2001
From: Soichiro Miki
Date: Tue, 23 May 2023 23:16:39 +0900
Subject: [PATCH 12/67] Fix a wrong explanation in "Manipulating the DOM with
Refs" (#6055)
* Fix manipulating-the-dom-with-refs
* Update manipulating-the-dom-with-refs.md
---------
Co-authored-by: dan
---
src/content/learn/manipulating-the-dom-with-refs.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md
index b5c193763..3e91a7694 100644
--- a/src/content/learn/manipulating-the-dom-with-refs.md
+++ b/src/content/learn/manipulating-the-dom-with-refs.md
@@ -31,7 +31,7 @@ Then, use it to declare a ref inside your component:
const myRef = useRef(null);
```
-Finally, pass it to the DOM node as the `ref` attribute:
+Finally, pass your ref as the `ref` attribute to the JSX tag for which you want to get the DOM node:
```js
From 9443bae2255b5549a20836c43846568fd9c155a5 Mon Sep 17 00:00:00 2001
From: Gustavo Henrique Ribeiro Dias
Date: Tue, 23 May 2023 15:37:40 -0300
Subject: [PATCH 13/67] translate Reusing logic with custom hooks to pt-br
---
.../learn/reusing-logic-with-custom-hooks.md | 414 +++++++++---------
1 file changed, 207 insertions(+), 207 deletions(-)
diff --git a/src/content/learn/reusing-logic-with-custom-hooks.md b/src/content/learn/reusing-logic-with-custom-hooks.md
index 679a9bac2..6cef0dba7 100644
--- a/src/content/learn/reusing-logic-with-custom-hooks.md
+++ b/src/content/learn/reusing-logic-with-custom-hooks.md
@@ -4,27 +4,27 @@ title: 'Reusing Logic with Custom Hooks'
-React comes with several built-in Hooks like `useState`, `useContext`, and `useEffect`. Sometimes, you'll wish that there was a Hook for some more specific purpose: for example, to fetch data, to keep track of whether the user is online, or to connect to a chat room. You might not find these Hooks in React, but you can create your own Hooks for your application's needs.
+O React vem com vários Hooks embutidos como `useState`, `useContext`, and `useEffect`. Às vezes, você desejará que houvesse um Hook para algum propósito mais específico: Por exemplo, para buscar dados, para acompanhar se o usuário está online, ou para se conectar a uma sala de bate-papo. Você pode não encontrar esses Hooks no React, mas pode criar seus próprios Hooks para as necessidades do seu aplicativo
-- What custom Hooks are, and how to write your own
-- How to reuse logic between components
-- How to name and structure your custom Hooks
-- When and why to extract custom Hooks
+- O que são Hooks personalizados e como escrever os seus próprios
+- Como reutilizar lógica entre componentes
+- Como nomear e estruturar seus Hooks personalizados
+- Quando e por que extrair Hooks personalizados
-## Custom Hooks: Sharing logic between components {/*custom-hooks-sharing-logic-between-components*/}
+## Hooks Personalizados: Compartilhando lógica entre componentes {/*custom-hooks-sharing-logic-between-components*/}
-Imagine you're developing an app that heavily relies on the network (as most apps do). You want to warn the user if their network connection has accidentally gone off while they were using your app. How would you go about it? It seems like you'll need two things in your component:
+Imagine que você está desenvolvendo um aplicativo que depende fortemente da rede (como a maioria dos aplicativos). Você deseja alertar o usuário caso a conexão de rede seja perdida acidentalmente enquanto eles estiverem usando o seu aplicativo. Como você procederia? Parece que você precisará de duas coisas no seu componente:
-1. A piece of state that tracks whether the network is online.
-2. An Effect that subscribes to the global [`online`](https://developer.mozilla.org/en-US/docs/Web/API/Window/online_event) and [`offline`](https://developer.mozilla.org/en-US/docs/Web/API/Window/offline_event) events, and updates that state.
+1. Um estado que acompanha se a rede está online ou não.
+2. Um efeito que se inscreve nos eventos globais [`online`](https://developer.mozilla.org/en-US/docs/Web/API/Window/online_event) e [`offline`](https://developer.mozilla.org/en-US/docs/Web/API/Window/offline_event) e atualiza o estado correspondente.
-This will keep your component [synchronized](/learn/synchronizing-with-effects) with the network status. You might start with something like this:
+Isso manterá seu componente [sincronizado](/learn/synchronizing-with-effects) com o status da rede. Você pode começar com algo assim:
@@ -48,17 +48,17 @@ export default function StatusBar() {
};
}, []);
- return {isOnline ? '✅ Online' : '❌ Disconnected'} ;
+ return {isOnline ? '✅ Conectado' : '❌ Desconectado'} ;
}
```
-Try turning your network on and off, and notice how this `StatusBar` updates in response to your actions.
+Tente ligar e desligar sua conexão de rede e observe como esta `StatusBar` é atualizada em resposta às suas ações.
-Now imagine you *also* want to use the same logic in a different component. You want to implement a Save button that will become disabled and show "Reconnecting..." instead of "Save" while the network is off.
+Agora, imagine que você *também* deseja usar a mesma lógica em um componente diferente. Você deseja implementar um botão "Salvar" que ficará desativado e exibirá "Reconectando..." em vez de "Salvar" enquanto a rede estiver desligada.
-To start, you can copy and paste the `isOnline` state and the Effect into `SaveButton`:
+Para começar, você pode copiar e colar o estado `isOnline` e o efeito em `SaveButton`:
@@ -83,12 +83,12 @@ export default function SaveButton() {
}, []);
function handleSaveClick() {
- console.log('✅ Progress saved');
+ console.log('✅ Progresso salvo');
}
return (
- {isOnline ? 'Save progress' : 'Reconnecting...'}
+ {isOnline ? 'Salvar progresso' : 'Reconectando...'}
);
}
@@ -96,36 +96,36 @@ export default function SaveButton() {
-Verify that, if you turn off the network, the button will change its appearance.
+Verifique que, ao desligar a rede, o botão alterará sua aparência.
-These two components work fine, but the duplication in logic between them is unfortunate. It seems like even though they have different *visual appearance,* you want to reuse the logic between them.
+Esses dois componentes funcionam bem, mas a duplicação da lógica entre eles é infeliz. Parece que, mesmo que eles tenham uma aparência *visual diferente,* você deseja reutilizar a lógica entre eles.
-### Extracting your own custom Hook from a component {/*extracting-your-own-custom-hook-from-a-component*/}
+### Extraindo seu próprio Hook personalizado de um componente {/*extracting-your-own-custom-hook-from-a-component*/}
-Imagine for a moment that, similar to [`useState`](/reference/react/useState) and [`useEffect`](/reference/react/useEffect), there was a built-in `useOnlineStatus` Hook. Then both of these components could be simplified and you could remove the duplication between them:
+Imagine, por um momento, que, assim como [`useState`](/reference/react/useState) e [`useEffect`](/reference/react/useEffect), houvesse um Hook embutido chamado `useOnlineStatus`. Em seguida, ambos esses componentes poderiam ser simplificados e seria possível remover a duplicação entre eles:
```js {2,7}
function StatusBar() {
const isOnline = useOnlineStatus();
- return {isOnline ? '✅ Online' : '❌ Disconnected'} ;
+ return {isOnline ? '✅ Conectado' : '❌ Desconectado'} ;
}
function SaveButton() {
const isOnline = useOnlineStatus();
function handleSaveClick() {
- console.log('✅ Progress saved');
+ console.log('✅ Progresso salvo');
}
return (
- {isOnline ? 'Save progress' : 'Reconnecting...'}
+ {isOnline ? 'Salvar progresso' : 'Reconectando...'}
);
}
```
-Although there is no such built-in Hook, you can write it yourself. Declare a function called `useOnlineStatus` and move all the duplicated code into it from the components you wrote earlier:
+Embora não exista um Hook embutido assim, você pode escrevê-lo por conta própria. Declare uma função chamada `useOnlineStatus` e mova todo o código duplicado para ela, a partir dos componentes que você escreveu anteriormente:
```js {2-16}
function useOnlineStatus() {
@@ -148,7 +148,7 @@ function useOnlineStatus() {
}
```
-At the end of the function, return `isOnline`. This lets your components read that value:
+No final da função, retorne `isOnline`. Isso permite que seus componentes leiam esse valor:
@@ -157,19 +157,19 @@ import { useOnlineStatus } from './useOnlineStatus.js';
function StatusBar() {
const isOnline = useOnlineStatus();
- return {isOnline ? '✅ Online' : '❌ Disconnected'} ;
+ return {isOnline ? '✅ Conectado' : '❌ Desconectado'} ;
}
function SaveButton() {
const isOnline = useOnlineStatus();
function handleSaveClick() {
- console.log('✅ Progress saved');
+ console.log('✅ Progresso salvo');
}
return (
- {isOnline ? 'Save progress' : 'Reconnecting...'}
+ {isOnline ? 'Salvar progresso' : 'Reconectando...'}
);
}
@@ -209,89 +209,89 @@ export function useOnlineStatus() {
-Verify that switching the network on and off updates both components.
+Verifique se alternar a rede ligada e desligada atualiza ambos os componentes.
-Now your components don't have as much repetitive logic. **More importantly, the code inside them describes *what they want to do* (use the online status!) rather than *how to do it* (by subscribing to the browser events).**
+Agora, seus componentes não possuem tanta lógica repetitiva. **Mais importante ainda, o código dentro deles descreve *o que deles desejam fazer* (usar o status online!) em vez de *como fazer isso* (se inscrevendo nos eventos do navegador).**
-When you extract logic into custom Hooks, you can hide the gnarly details of how you deal with some external system or a browser API. The code of your components expresses your intent, not the implementation.
+Quando você extrai a lógica em Hooks personalizados, é possível ocultar os detalhes complicados de como lidar com algum sistema externo ou uma API do navegador. O código dos seus componentes expressa sua intenção, não a implementação.
-### Hook names always start with `use` {/*hook-names-always-start-with-use*/}
+### Nome dos hooks sempre começam com `use` {/*hook-names-always-start-with-use*/}
-React applications are built from components. Components are built from Hooks, whether built-in or custom. You'll likely often use custom Hooks created by others, but occasionally you might write one yourself!
+Aplicações React são construídas a partir de componentes. Os componentes são construídos a partir de Hooks, sejam eles embutidos ou personalizados. Provavelmente, você frequentemente usará Hooks personalizados criados por outras pessoas, mas ocasionalmente poderá escrever um você mesmo!
-You must follow these naming conventions:
+Você deve seguir estas convenções de nomenclatura:
-1. **React component names must start with a capital letter,** like `StatusBar` and `SaveButton`. React components also need to return something that React knows how to display, like a piece of JSX.
-2. **Hook names must start with `use` followed by a capital letter,** like [`useState`](/reference/react/useState) (built-in) or `useOnlineStatus` (custom, like earlier on the page). Hooks may return arbitrary values.
+1. **Os nomes dos componentes do React devem começar com uma letra maiúscula,** como `StatusBar` e `SaveButton`. Os componentes do React também precisam retornar algo que o React saiba como exibir, como um trecho de JSX.
+2. **Os nomes do hooks devem começar com `use` seguido por uma letra maiúscula,** como [`useState`](/reference/react/useState) (built-in) ou `useOnlineStatus` (personalizado, como mencionado anteriormente na página). Hooks podem retornar valores arbitrários.
-This convention guarantees that you can always look at a component and know where its state, Effects, and other React features might "hide". For example, if you see a `getColor()` function call inside your component, you can be sure that it can't possibly contain React state inside because its name doesn't start with `use`. However, a function call like `useOnlineStatus()` will most likely contain calls to other Hooks inside!
+Essa convenção garante que você sempre possa olhar para um componente e saber onde seu estado, efeitos e outras funcionalidades do React podem estar "escondidos". Por exemplo, se você vir uma chamada de função `getColor()` dentro do seu componente, pode ter certeza de que ela não pode conter estado do React, pois seu nome não começa com `use`. No entanto, uma chamada de função como `useOnlineStatus()` provavelmente conterá chamadas a outros Hooks internamente!
-If your linter is [configured for React,](/learn/editor-setup#linting) it will enforce this naming convention. Scroll up to the sandbox above and rename `useOnlineStatus` to `getOnlineStatus`. Notice that the linter won't allow you to call `useState` or `useEffect` inside of it anymore. Only Hooks and components can call other Hooks!
+Se o seu linter estiver [configurado para o React,](/learn/editor-setup#linting) ele irá impor essa convenção de nomenclatura. Role para cima até a área de sandbox acima e renomeie `useOnlineStatus` para `getOnlineStatus`. Observe que o linter não permitirá mais que você chame `useState` ou `useEffect` dentro dele. Apenas Hooks e componentes podem chamar outros Hooks!
-#### Should all functions called during rendering start with the use prefix? {/*should-all-functions-called-during-rendering-start-with-the-use-prefix*/}
+#### Todos os nomes de funções chamadas durante a renderização devem começar com o prefixo use? {/*should-all-functions-called-during-rendering-start-with-the-use-prefix*/}
-No. Functions that don't *call* Hooks don't need to *be* Hooks.
+Não. Funções que não *chamam* Hooks não precisam *ser* Hooks.
-If your function doesn't call any Hooks, avoid the `use` prefix. Instead, write it as a regular function *without* the `use` prefix. For example, `useSorted` below doesn't call Hooks, so call it `getSorted` instead:
+Se sua função não chama nenhum Hook, evite o prefixo `use`. Em vez disso, escreva-a como uma função regular *sem* o prefixo `use`. Por exemplo, se a função `useSorted` abaixo não chama Hooks, você pode chamá-la de `getSorted`:
```js
-// 🔴 Avoid: A Hook that doesn't use Hooks
+// 🔴 Evite: um Hook que não utiliza Hooks
function useSorted(items) {
return items.slice().sort();
}
-// ✅ Good: A regular function that doesn't use Hooks
+// ✅ Bom: uma função regular que não utiliza Hooks
function getSorted(items) {
return items.slice().sort();
}
```
-This ensures that your code can call this regular function anywhere, including conditions:
+Isso garante que seu código possa chamar essa função regular em qualquer lugar, incluindo condições:
```js
function List({ items, shouldSort }) {
let displayedItems = items;
if (shouldSort) {
- // ✅ It's ok to call getSorted() conditionally because it's not a Hook
+ // ✅ É possível chamar getSorted() condicionalmente porque não é um Hook.
displayedItems = getSorted(items);
}
// ...
}
```
-You should give `use` prefix to a function (and thus make it a Hook) if it uses at least one Hook inside of it:
+Você deve adicionar o prefixo `use` a uma função (e, portanto, transformá-la em um Hook) se ela usar pelo menos um Hook em seu interior.
```js
-// ✅ Good: A Hook that uses other Hooks
+// ✅ Bom: um Hook que usa outros Hooks
function useAuth() {
return useContext(Auth);
}
```
-Technically, this isn't enforced by React. In principle, you could make a Hook that doesn't call other Hooks. This is often confusing and limiting so it's best to avoid that pattern. However, there may be rare cases where it is helpful. For example, maybe your function doesn't use any Hooks right now, but you plan to add some Hook calls to it in the future. Then it makes sense to name it with the `use` prefix:
+Tecnicamente, isso não é exigido pelo React. Em princípio, é possível criar um Hook que não chama outros Hooks. Isso geralmente é confuso e limitante, então é melhor evitar esse padrão. No entanto, pode haver casos raros em que isso é útil. Por exemplo, talvez sua função não use nenhum Hook no momento, mas você planeja adicionar chamadas de Hook a ela no futuro. Nesse caso, faz sentido nomeá-la com o prefixo `use`.
```js {3-4}
-// ✅ Good: A Hook that will likely use some other Hooks later
+// ✅ Bom: um Hook que provavelmente usará outros Hooks posteriormente
function useAuth() {
- // TODO: Replace with this line when authentication is implemented:
+ // TODO: Substitua por esta linha quando a autenticação for implementada:
// return useContext(Auth);
return TEST_USER;
}
```
-Then components won't be able to call it conditionally. This will become important when you actually add Hook calls inside. If you don't plan to use Hooks inside it (now or later), don't make it a Hook.
+Então, os componentes não poderão chamá-lo condicionalmente. Isso se tornará importante quando você realmente adicionar chamadas de Hook no interior. Se você não planeja usar Hooks dentro dele (agora ou posteriormente), não o transforme em um Hook.
-### Custom Hooks let you share stateful logic, not state itself {/*custom-hooks-let-you-share-stateful-logic-not-state-itself*/}
+### Hooks personalizados permitem compartilhar lógica com estado, não o próprio estado {/*custom-hooks-let-you-share-stateful-logic-not-state-itself*/}
-In the earlier example, when you turned the network on and off, both components updated together. However, it's wrong to think that a single `isOnline` state variable is shared between them. Look at this code:
+No exemplo anterior, quando você ligou e desligou a rede, ambos os componentes foram atualizados juntos. No entanto, é incorreto pensar que uma única variável de estado `isOnline` é compartilhada entre eles. Observe este código:
```js {2,7}
function StatusBar() {
@@ -305,7 +305,7 @@ function SaveButton() {
}
```
-It works the same way as before you extracted the duplication:
+Ele funciona da mesma forma que antes de extrair a duplicação:
```js {2-5,10-13}
function StatusBar() {
@@ -325,9 +325,9 @@ function SaveButton() {
}
```
-These are two completely independent state variables and Effects! They happened to have the same value at the same time because you synchronized them with the same external value (whether the network is on).
+Essas são duas variáveis de estado e efeitos completamente independentes! Elas acabaram tendo o mesmo valor ao mesmo tempo porque foram sincronizadas com o mesmo valor externo (se a rede está ligada ou desligada).
-To better illustrate this, we'll need a different example. Consider this `Form` component:
+Para ilustrar melhor isso, precisaremos de um exemplo diferente. Considere este componente `Form`:
@@ -369,13 +369,13 @@ input { margin-left: 10px; }
-There's some repetitive logic for each form field:
+Há alguma lógica repetitiva para cada campo do formulário:
-1. There's a piece of state (`firstName` and `lastName`).
-1. There's a change handler (`handleFirstNameChange` and `handleLastNameChange`).
-1. There's a piece of JSX that specifies the `value` and `onChange` attributes for that input.
+1. Há uma variável de estado (`firstName` e `lastName`).
+2. Há um manipulador de alteração (`handleFirstNameChange` e `handleLastNameChange`).
+3. Há uma parte de JSX que especifica os atributos `value` e `onChange` para a entrada.
-You can extract the repetitive logic into this `useFormInput` custom Hook:
+Você pode extrair a lógica repetitiva para este Hook personalizado `useFormInput`:
@@ -428,9 +428,9 @@ input { margin-left: 10px; }
-Notice that it only declares *one* state variable called `value`.
+Observe que ele declara apenas uma variável de estado chamada `value`.
-However, the `Form` component calls `useFormInput` *two times:*
+No entanto, o componente `Form` chama `useFormInput` *duas vezes*:
```js
function Form() {
@@ -439,17 +439,17 @@ function Form() {
// ...
```
-This is why it works like declaring two separate state variables!
+É por isso que funciona como se estivéssemos declarando duas variáveis de estado separadas!
-**Custom Hooks let you share *stateful logic* but not *state itself.* Each call to a Hook is completely independent from every other call to the same Hook.** This is why the two sandboxes above are completely equivalent. If you'd like, scroll back up and compare them. The behavior before and after extracting a custom Hook is identical.
+**Os Hooks personalizados permitem compartilhar *lógica com estado* e não *o próprio estado*. Cada chamada a um Hook é completamente independente de qualquer outra chamada ao mesmo Hook.** É por isso que as duas áreas de teste acima são completamente equivalentes. Se desejar, role para cima e compare-as. O comportamento antes e depois de extrair um Hook personalizado é idêntico.
-When you need to share the state itself between multiple components, [lift it up and pass it down](/learn/sharing-state-between-components) instead.
+Quando você precisa compartilhar o próprio estado entre vários componentes, [eleve-o e passe-o como propriedade](/learn/sharing-state-between-components) em vez disso.
-## Passing reactive values between Hooks {/*passing-reactive-values-between-hooks*/}
+## Passando valores reativos entre Hooks {/*passing-reactive-values-between-hooks*/}
-The code inside your custom Hooks will re-run during every re-render of your component. This is why, like components, custom Hooks [need to be pure.](/learn/keeping-components-pure) Think of custom Hooks' code as part of your component's body!
+O código dentro dos seus Hooks personalizados será executado novamente durante cada nova renderização do seu componente. É por isso que, assim como os componentes, os Hooks personalizados [precisam ser puros](/learn/keeping-components-pure). Pense no código dos Hooks personalizados como parte do corpo do seu componente!
-Because custom Hooks re-render together with your component, they always receive the latest props and state. To see what this means, consider this chat room example. Change the server URL or the chat room:
+Como os Hooks personalizados são renderizados juntamente com o seu componente, eles sempre recebem as props e o estado mais recentes. Para entender o que isso significa, considere este exemplo de sala de bate-papo. Altere a URL do servidor ou a sala de bate-papo:
@@ -496,7 +496,7 @@ export default function ChatRoom({ roomId }) {
};
const connection = createConnection(options);
connection.on('message', (msg) => {
- showNotification('New message: ' + msg);
+ showNotification('Nova mensagem: ' + msg);
});
connection.connect();
return () => connection.disconnect();
@@ -516,7 +516,7 @@ export default function ChatRoom({ roomId }) {
```js chat.js
export function createConnection({ serverUrl, roomId }) {
- // A real implementation would actually connect to the server
+ // Uma implementação real conectaria de fato ao servidor
if (typeof serverUrl !== 'string') {
throw Error('Expected serverUrl to be a string. Received: ' + serverUrl);
}
@@ -527,7 +527,7 @@ export function createConnection({ serverUrl, roomId }) {
let messageCallback;
return {
connect() {
- console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...');
+ console.log('✅ Conectando a "' + roomId + '" sala em ' + serverUrl + '...');
clearInterval(intervalId);
intervalId = setInterval(() => {
if (messageCallback) {
@@ -542,7 +542,7 @@ export function createConnection({ serverUrl, roomId }) {
disconnect() {
clearInterval(intervalId);
messageCallback = null;
- console.log('❌ Disconnected from "' + roomId + '" room at ' + serverUrl + '');
+ console.log('❌ Desconectado de "' + roomId + '" sala em ' + serverUrl + '');
},
on(event, callback) {
if (messageCallback) {
@@ -599,9 +599,9 @@ button { margin-left: 10px; }
-When you change `serverUrl` or `roomId`, the Effect ["reacts" to your changes](/learn/lifecycle-of-reactive-effects#effects-react-to-reactive-values) and re-synchronizes. You can tell by the console messages that the chat re-connects every time that you change your Effect's dependencies.
+Quando você altera `serverUrl` ou `roomId`, o efeito ["reage" às suas mudanças](/learn/lifecycle-of-reactive-effects#effects-react-to-reactive-values) e ressincroniza. Você pode observar pelas mensagens no console que o chat se reconecta toda vez que você altera as dependências do seu efeito.
-Now move the Effect's code into a custom Hook:
+Agora mova o código do efeito para um Hook personalizado:
```js {2-13}
export function useChatRoom({ serverUrl, roomId }) {
@@ -613,14 +613,14 @@ export function useChatRoom({ serverUrl, roomId }) {
const connection = createConnection(options);
connection.connect();
connection.on('message', (msg) => {
- showNotification('New message: ' + msg);
+ showNotification('Nova mensagem: ' + msg);
});
return () => connection.disconnect();
}, [roomId, serverUrl]);
}
```
-This lets your `ChatRoom` component call your custom Hook without worrying about how it works inside:
+Isso permite que seu componente `ChatRoom` chame o seu Hook personalizado sem se preocupar com o funcionamento interno:
```js {4-7}
export default function ChatRoom({ roomId }) {
@@ -643,9 +643,9 @@ export default function ChatRoom({ roomId }) {
}
```
-This looks much simpler! (But it does the same thing.)
+Isso parece muito mais simples! (Mas faz a mesma coisa.)
-Notice that the logic *still responds* to prop and state changes. Try editing the server URL or the selected room:
+Observe que a lógica *ainda responde* às mudanças nas props e no estado. Experimente editar a URL do servidor ou a sala selecionada:
@@ -715,7 +715,7 @@ export function useChatRoom({ serverUrl, roomId }) {
const connection = createConnection(options);
connection.connect();
connection.on('message', (msg) => {
- showNotification('New message: ' + msg);
+ showNotification('Nova mensagem: ' + msg);
});
return () => connection.disconnect();
}, [roomId, serverUrl]);
@@ -724,7 +724,7 @@ export function useChatRoom({ serverUrl, roomId }) {
```js chat.js
export function createConnection({ serverUrl, roomId }) {
- // A real implementation would actually connect to the server
+ // Uma implementação real conectaria de fato ao servidor
if (typeof serverUrl !== 'string') {
throw Error('Expected serverUrl to be a string. Received: ' + serverUrl);
}
@@ -735,7 +735,7 @@ export function createConnection({ serverUrl, roomId }) {
let messageCallback;
return {
connect() {
- console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...');
+ console.log('✅ Conectando a "' + roomId + '" sala em ' + serverUrl + '...');
clearInterval(intervalId);
intervalId = setInterval(() => {
if (messageCallback) {
@@ -750,7 +750,7 @@ export function createConnection({ serverUrl, roomId }) {
disconnect() {
clearInterval(intervalId);
messageCallback = null;
- console.log('❌ Disconnected from "' + roomId + '" room at ' + serverUrl + '');
+ console.log('❌ Desconectado de "' + roomId + '" sala em ' + serverUrl + '');
},
on(event, callback) {
if (messageCallback) {
@@ -807,7 +807,7 @@ button { margin-left: 10px; }
-Notice how you're taking the return value of one Hook:
+Observe como você está recebendo o valor de retorno de um Hook:
```js {2}
export default function ChatRoom({ roomId }) {
@@ -820,7 +820,7 @@ export default function ChatRoom({ roomId }) {
// ...
```
-and pass it as an input to another Hook:
+e passando como entrada para outro Hook:
```js {6}
export default function ChatRoom({ roomId }) {
@@ -833,17 +833,17 @@ export default function ChatRoom({ roomId }) {
// ...
```
-Every time your `ChatRoom` component re-renders, it passes the latest `roomId` and `serverUrl` to your Hook. This is why your Effect re-connects to the chat whenever their values are different after a re-render. (If you ever worked with audio or video processing software, chaining Hooks like this might remind you of chaining visual or audio effects. It's as if the output of `useState` "feeds into" the input of the `useChatRoom`.)
+Sempre que o componente `ChatRoom` é renderizado novamente, ele passa as últimas `roomId` e `serverUrl` para o seu Hook. É por isso que o seu efeito se reconecta ao chat sempre que os valores forem diferentes após uma nova renderização. (Se você já trabalhou com software de processamento de áudio ou vídeo, encadear Hooks dessa forma pode lembrar o encadeamento de efeitos visuais ou de áudio. É como se a saída do `useState` "alimentasse" a entrada do `useChatRoom`.)
-### Passing event handlers to custom Hooks {/*passing-event-handlers-to-custom-hooks*/}
+### Passando manipuladores de eventos para Hooks personalizados {/*passing-event-handlers-to-custom-hooks*/}
-This section describes an **experimental API that has not yet been released** in a stable version of React.
+Esta seção descreve uma **API experimental que ainda não foi lançada** em uma versão estável do React.
-As you start using `useChatRoom` in more components, you might want to let components customize its behavior. For example, currently, the logic for what to do when a message arrives is hardcoded inside the Hook:
+Conforme você começa a usar o `useChatRoom` em mais componentes, pode ser desejável permitir que os componentes personalizem seu comportamento. Por exemplo, atualmente, a lógica do que fazer quando uma mensagem chega está codificada diretamente no Hook:
```js {9-11}
export function useChatRoom({ serverUrl, roomId }) {
@@ -855,14 +855,14 @@ export function useChatRoom({ serverUrl, roomId }) {
const connection = createConnection(options);
connection.connect();
connection.on('message', (msg) => {
- showNotification('New message: ' + msg);
+ showNotification('Nova mensagem: ' + msg);
});
return () => connection.disconnect();
}, [roomId, serverUrl]);
}
```
-Let's say you want to move this logic back to your component:
+Digamos que você queira mover essa lógica de volta para o seu componente:
```js {7-9}
export default function ChatRoom({ roomId }) {
@@ -872,13 +872,13 @@ export default function ChatRoom({ roomId }) {
roomId: roomId,
serverUrl: serverUrl,
onReceiveMessage(msg) {
- showNotification('New message: ' + msg);
+ showNotification('Nova mensagem: ' + msg);
}
});
// ...
```
-To make this work, change your custom Hook to take `onReceiveMessage` as one of its named options:
+Para fazer isso funcionar, altere o seu Hook personalizado para receber `onReceiveMessage` como uma das opções nomeadas:
```js {1,10,13}
export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) {
@@ -893,13 +893,13 @@ export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) {
onReceiveMessage(msg);
});
return () => connection.disconnect();
- }, [roomId, serverUrl, onReceiveMessage]); // ✅ All dependencies declared
+ }, [roomId, serverUrl, onReceiveMessage]); // ✅ Todas as dependências declaradas
}
```
-This will work, but there's one more improvement you can do when your custom Hook accepts event handlers.
+Isso funcionará, mas há mais uma melhoria que você pode fazer quando seu Hook personalizado aceita manipuladores de eventos.
-Adding a dependency on `onReceiveMessage` is not ideal because it will cause the chat to re-connect every time the component re-renders. [Wrap this event handler into an Effect Event to remove it from the dependencies:](/learn/removing-effect-dependencies#wrapping-an-event-handler-from-the-props)
+Adicionar uma dependência em `onReceiveMessage` não é ideal, pois fará com que o chat se reconecte sempre que o componente for renderizado novamente. [Encapsule esse manipulador de eventos em um Event Effect para removê-lo das dependências:](/learn/removing-effect-dependencies#wrapping-an-event-handler-from-the-props)
```js {1,4,5,15,18}
import { useEffect, useEffectEvent } from 'react';
@@ -919,11 +919,11 @@ export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) {
onMessage(msg);
});
return () => connection.disconnect();
- }, [roomId, serverUrl]); // ✅ All dependencies declared
+ }, [roomId, serverUrl]); // ✅ Todas as dependências declaradas
}
```
-Now the chat won't re-connect every time that the `ChatRoom` component re-renders. Here is a fully working demo of passing an event handler to a custom Hook that you can play with:
+Agora, o chat não será reconectado toda vez que o componente `ChatRoom` for renderizado novamente. Aqui está um exemplo completo de como passar um manipulador de eventos para um Hook personalizado com o qual você pode brincar:
@@ -967,7 +967,7 @@ export default function ChatRoom({ roomId }) {
roomId: roomId,
serverUrl: serverUrl,
onReceiveMessage(msg) {
- showNotification('New message: ' + msg);
+ showNotification('Nova mensagem: ' + msg);
}
});
@@ -1008,7 +1008,7 @@ export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) {
```js chat.js
export function createConnection({ serverUrl, roomId }) {
- // A real implementation would actually connect to the server
+ // Uma implementação real conectaria de fato ao servidor
if (typeof serverUrl !== 'string') {
throw Error('Expected serverUrl to be a string. Received: ' + serverUrl);
}
@@ -1019,7 +1019,7 @@ export function createConnection({ serverUrl, roomId }) {
let messageCallback;
return {
connect() {
- console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...');
+ console.log('✅ Conectando a "' + roomId + '" sala em ' + serverUrl + '...');
clearInterval(intervalId);
intervalId = setInterval(() => {
if (messageCallback) {
@@ -1034,7 +1034,7 @@ export function createConnection({ serverUrl, roomId }) {
disconnect() {
clearInterval(intervalId);
messageCallback = null;
- console.log('❌ Disconnected from "' + roomId + '" room at ' + serverUrl + '');
+ console.log('❌ Desconectado de "' + roomId + '" sala em ' + serverUrl + '');
},
on(event, callback) {
if (messageCallback) {
@@ -1091,20 +1091,20 @@ button { margin-left: 10px; }
-Notice how you no longer need to know *how* `useChatRoom` works in order to use it. You could add it to any other component, pass any other options, and it would work the same way. That's the power of custom Hooks.
+Observe como agora você não precisa mais saber *como* `useChatRoom` funciona para poder usá-lo. Você poderia adicioná-lo a qualquer outro componente, passar outras opções e ele funcionaria da mesma maneira. Esse é o poder dos Hooks personalizados.
-## When to use custom Hooks {/*when-to-use-custom-hooks*/}
+## Quando usar Hooks personalizados {/*when-to-use-custom-hooks*/}
-You don't need to extract a custom Hook for every little duplicated bit of code. Some duplication is fine. For example, extracting a `useFormInput` Hook to wrap a single `useState` call like earlier is probably unnecessary.
+Você não precisa extrair um Hook personalizado para cada pequeno trecho de código duplicado. Alguma duplicação é aceitável. Por exemplo, extrair um Hook `useFormInput` para envolver uma única chamada `useState` como feito anteriormente provavelmente é desnecessário.
-However, whenever you write an Effect, consider whether it would be clearer to also wrap it in a custom Hook. [You shouldn't need Effects very often,](/learn/you-might-not-need-an-effect) so if you're writing one, it means that you need to "step outside React" to synchronize with some external system or to do something that React doesn't have a built-in API for. Wrapping it into a custom Hook lets you precisely communicate your intent and how the data flows through it.
+No entanto, sempre que você escrever um Efeito, considere se seria mais claro encapsulá-lo também em um Hook personalizado. [Você não deve precisar de Efeitos com muita frequência,](/learn/you-might-not-need-an-effect) então, se você estiver escrevendo um, significa que precisa "sair do mundo React" para sincronizar com algum sistema externo ou fazer algo para o qual o React não tenha uma API embutida. encapsular o Efeito em um Hook personalizado permite que você comunique claramente sua intenção e como os dados fluem por ele.
-For example, consider a `ShippingForm` component that displays two dropdowns: one shows the list of cities, and another shows the list of areas in the selected city. You might start with some code that looks like this:
+Por exemplo, considere um componente `ShippingForm` que exibe dois dropdowns: um mostra a lista de cidades e outro mostra a lista de áreas na cidade selecionada. Você pode começar com um código que se parece com isso:
```js {3-16,20-35}
function ShippingForm({ country }) {
const [cities, setCities] = useState(null);
- // This Effect fetches cities for a country
+ // Este efeito busca cidades para um país
useEffect(() => {
let ignore = false;
fetch(`/api/cities?country=${country}`)
@@ -1121,7 +1121,7 @@ function ShippingForm({ country }) {
const [city, setCity] = useState(null);
const [areas, setAreas] = useState(null);
- // This Effect fetches areas for the selected city
+ // Esse efeito busca as áreas para a cidade selecionada.
useEffect(() => {
if (city) {
let ignore = false;
@@ -1141,7 +1141,7 @@ function ShippingForm({ country }) {
// ...
```
-Although this code is quite repetitive, [it's correct to keep these Effects separate from each other.](/learn/removing-effect-dependencies#is-your-effect-doing-several-unrelated-things) They synchronize two different things, so you shouldn't merge them into one Effect. Instead, you can simplify the `ShippingForm` component above by extracting the common logic between them into your own `useData` Hook:
+Embora este código seja bastante repetitivo, [é correto manter esses efeitos separados um do outro.](/learn/removing-effect-dependencies#is-your-effect-doing-several-unrelated-things) Eles sincronizam duas coisas diferentes, portanto, não deve-se mesclá-los em um único efeito. Em vez disso, você pode simplificar o componente `ShippingForm` acima extraindo a lógica comum entre eles para o seu próprio Hook `useData`:
```js {2-18}
function useData(url) {
@@ -1165,7 +1165,7 @@ function useData(url) {
}
```
-Now you can replace both Effects in the `ShippingForm` components with calls to `useData`:
+Agora você pode substituir os dois efeitos nos componentes `ShippingForm` por chamadas ao `useData`:
```js {2,4}
function ShippingForm({ country }) {
@@ -1175,39 +1175,39 @@ function ShippingForm({ country }) {
// ...
```
-Extracting a custom Hook makes the data flow explicit. You feed the `url` in and you get the `data` out. By "hiding" your Effect inside `useData`, you also prevent someone working on the `ShippingForm` component from adding [unnecessary dependencies](/learn/removing-effect-dependencies) to it. With time, most of your app's Effects will be in custom Hooks.
+Extrair um Hook personalizado torna o fluxo de dados explícito. Você fornece a `url` como entrada e obtém a `data` como saída. Ao "esconder" seu efeito dentro do `useData`, você também impede que alguém que trabalhe no componente `ShippingForm` adicione [dependências desnecessárias](/learn/removing-effect-dependencies) a ele. Com o tempo, a maioria dos efeitos do seu aplicativo estará nos Hooks personalizados.
-#### Keep your custom Hooks focused on concrete high-level use cases {/*keep-your-custom-hooks-focused-on-concrete-high-level-use-cases*/}
+#### Mantenha seus Hooks personalizados focados em casos de uso concretos de alto nível {/*keep-your-custom-hooks-focused-on-concrete-high-level-use-cases*/}
-Start by choosing your custom Hook's name. If you struggle to pick a clear name, it might mean that your Effect is too coupled to the rest of your component's logic, and is not yet ready to be extracted.
+Comece escolhendo o nome do seu Hook personalizado. Se você tiver dificuldade em escolher um nome claro, isso pode significar que seu Efeito está muito acoplado à lógica do restante do seu componente e ainda não está pronto para ser extraído.
-Ideally, your custom Hook's name should be clear enough that even a person who doesn't write code often could have a good guess about what your custom Hook does, what it takes, and what it returns:
+Idealmente, o nome do seu Hook personalizado deve ser claro o suficiente para que até mesmo uma pessoa que não escreve código com frequência possa ter uma boa ideia do que seu Hook personalizado faz, o que ele recebe e o que retorna:
* ✅ `useData(url)`
* ✅ `useImpressionLog(eventName, extraData)`
* ✅ `useChatRoom(options)`
-When you synchronize with an external system, your custom Hook name may be more technical and use jargon specific to that system. It's good as long as it would be clear to a person familiar with that system:
+Quando você se sincroniza com um sistema externo, o nome do seu Hook personalizado pode ser mais técnico e usar jargões específicos desse sistema. Isso é bom, desde que seja claro para uma pessoa familiarizada com esse sistema:
* ✅ `useMediaQuery(query)`
* ✅ `useSocket(url)`
* ✅ `useIntersectionObserver(ref, options)`
-**Keep custom Hooks focused on concrete high-level use cases.** Avoid creating and using custom "lifecycle" Hooks that act as alternatives and convenience wrappers for the `useEffect` API itself:
+**Mantenha os Hooks personalizados focados em casos de uso concretos de alto nível.** Evite criar e usar Hooks personalizados de "ciclo de vida" que atuem como alternativas e encapsuladores de conveniência para a própria API `useEffect`:
* 🔴 `useMount(fn)`
* 🔴 `useEffectOnce(fn)`
* 🔴 `useUpdateEffect(fn)`
-For example, this `useMount` Hook tries to ensure some code only runs "on mount":
+Por exemplo, este Hook `useMount` tenta garantir que determinado código seja executado apenas "no momento da montagem":
```js {4-5,14-15}
function ChatRoom({ roomId }) {
const [serverUrl, setServerUrl] = useState('https://localhost:1234');
- // 🔴 Avoid: using custom "lifecycle" Hooks
+ // 🔴 Evite: usar Hooks personalizados de "ciclo de vida"
useMount(() => {
const connection = createConnection({ roomId, serverUrl });
connection.connect();
@@ -1217,23 +1217,23 @@ function ChatRoom({ roomId }) {
// ...
}
-// 🔴 Avoid: creating custom "lifecycle" Hooks
+// 🔴 Evite: criar Hooks personalizados de "ciclo de vida"
function useMount(fn) {
useEffect(() => {
fn();
- }, []); // 🔴 React Hook useEffect has a missing dependency: 'fn'
+ }, []); // 🔴 React Hook `useEffect` está com uma dependência faltando: 'fn'
}
```
-**Custom "lifecycle" Hooks like `useMount` don't fit well into the React paradigm.** For example, this code example has a mistake (it doesn't "react" to `roomId` or `serverUrl` changes), but the linter won't warn you about it because the linter only checks direct `useEffect` calls. It won't know about your Hook.
+**Hooks personalizados de "ciclo de vida", como `useMount`, não se encaixam bem no paradigma do React.** Por exemplo, este exemplo de código contém um erro (ele não "reage" às alterações em `roomId` ou `serverUrl`), mas o linter não irá alertá-lo sobre isso porque o linter verifica apenas chamadas diretas de `useEffect`. Ele não saberá sobre o seu Hook.
-If you're writing an Effect, start by using the React API directly:
+Se você está escrevendo um efeito, comece usando a API do React diretamente:
```js
function ChatRoom({ roomId }) {
const [serverUrl, setServerUrl] = useState('https://localhost:1234');
- // ✅ Good: two raw Effects separated by purpose
+ // ✅ Bom: dois efeitos separados por finalidade
useEffect(() => {
const connection = createConnection({ serverUrl, roomId });
@@ -1249,28 +1249,28 @@ function ChatRoom({ roomId }) {
}
```
-Then, you can (but don't have to) extract custom Hooks for different high-level use cases:
+Em seguida, você pode (mas não é obrigatório) extrair Hooks personalizados para diferentes casos de uso de alto nível:
```js
function ChatRoom({ roomId }) {
const [serverUrl, setServerUrl] = useState('https://localhost:1234');
- // ✅ Great: custom Hooks named after their purpose
+ // ✅ Ótimo: Hooks personalizados nomeados de acordo com sua finalidade
useChatRoom({ serverUrl, roomId });
useImpressionLog('visit_chat', { roomId });
// ...
}
```
-**A good custom Hook makes the calling code more declarative by constraining what it does.** For example, `useChatRoom(options)` can only connect to the chat room, while `useImpressionLog(eventName, extraData)` can only send an impression log to the analytics. If your custom Hook API doesn't constrain the use cases and is very abstract, in the long run it's likely to introduce more problems than it solves.
+**Um bom Hook personalizado torna o código de chamada mais declarativo, restringindo o que ele faz.** Por exemplo, `useChatRoom(options)` pode apenas se conectar à sala de bate-papo, enquanto `useImpressionLog(eventName, extraData)` pode apenas enviar um registro de impressão para a análise. Se a API do seu Hook personalizado não restringir os casos de uso e for muito abstrata, a longo prazo é provável que introduza mais problemas do que resolve.
-### Custom Hooks help you migrate to better patterns {/*custom-hooks-help-you-migrate-to-better-patterns*/}
+### Hooks personalizados ajudam na migração para padrões melhores {/*custom-hooks-help-you-migrate-to-better-patterns*/}
-Effects are an ["escape hatch"](/learn/escape-hatches): you use them when you need to "step outside React" and when there is no better built-in solution for your use case. With time, the React team's goal is to reduce the number of the Effects in your app to the minimum by providing more specific solutions to more specific problems. Wrapping your Effects in custom Hooks makes it easier to upgrade your code when these solutions become available.
+Os efeitos são uma ["porta de escape"](/learn/escape-hatches): você os utiliza quando precisa "sair do React" e não há uma solução interna melhor para o seu caso de uso. Com o tempo, o objetivo da equipe do React é reduzir ao mínimo o número de efeitos em seu aplicativo, fornecendo soluções mais específicas para problemas mais específicos. Encapsular seus efeitos em Hooks personalizados facilita a atualização do seu código quando essas soluções estiverem disponíveis.
-Let's return to this example:
+Vamos voltar a este exemplo:
@@ -1279,19 +1279,19 @@ import { useOnlineStatus } from './useOnlineStatus.js';
function StatusBar() {
const isOnline = useOnlineStatus();
- return {isOnline ? '✅ Online' : '❌ Disconnected'} ;
+ return {isOnline ? '✅ Conectado' : '❌ Desconectado'} ;
}
function SaveButton() {
const isOnline = useOnlineStatus();
function handleSaveClick() {
- console.log('✅ Progress saved');
+ console.log('✅ Progresso Salvo');
}
return (
- {isOnline ? 'Save progress' : 'Reconnecting...'}
+ {isOnline ? 'Salvar progresso' : 'Reconectando...'}
);
}
@@ -1331,9 +1331,9 @@ export function useOnlineStatus() {
-In the above example, `useOnlineStatus` is implemented with a pair of [`useState`](/reference/react/useState) and [`useEffect`.](/reference/react/useEffect) However, this isn't the best possible solution. There is a number of edge cases it doesn't consider. For example, it assumes that when the component mounts, `isOnline` is already `true`, but this may be wrong if the network already went offline. You can use the browser [`navigator.onLine`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/onLine) API to check for that, but using it directly would not work on the server for generating the initial HTML. In short, this code could be improved.
+No exemplo acima, `useOnlineStatus` é implementado com um par de [`useState`](/reference/react/useState) e [`useEffect`](/reference/react/useEffect). No entanto, essa não é a melhor solução possível. Existem alguns casos específicos que não são considerados. Por exemplo, assume-se que quando o componente é montado, `isOnline` já é `true`, mas isso pode estar errado se a rede já estiver offline. Você pode usar a API do navegador [`navigator.onLine`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/onLine) para verificar isso, mas usá-la diretamente não funcionaria no servidor para gerar o HTML inicial. Em resumo, este código pode ser aprimorado.
-Luckily, React 18 includes a dedicated API called [`useSyncExternalStore`](/reference/react/useSyncExternalStore) which takes care of all of these problems for you. Here is how your `useOnlineStatus` Hook, rewritten to take advantage of this new API:
+Felizmente, o React 18 inclui uma API dedicada chamada [`useSyncExternalStore`](/reference/react/useSyncExternalStore) que cuida de todos esses problemas para você. Aqui está como o seu Hook `useOnlineStatus` pode ser reescrito para aproveitar essa nova API:
@@ -1342,19 +1342,19 @@ import { useOnlineStatus } from './useOnlineStatus.js';
function StatusBar() {
const isOnline = useOnlineStatus();
- return {isOnline ? '✅ Online' : '❌ Disconnected'} ;
+ return {isOnline ? '✅ Conectado' : '❌ Desconectado'} ;
}
function SaveButton() {
const isOnline = useOnlineStatus();
function handleSaveClick() {
- console.log('✅ Progress saved');
+ console.log('✅ Progresso Salvo');
}
return (
- {isOnline ? 'Save progress' : 'Reconnecting...'}
+ {isOnline ? 'Salvar progresso' : 'Reconectando...'}
);
}
@@ -1384,8 +1384,8 @@ function subscribe(callback) {
export function useOnlineStatus() {
return useSyncExternalStore(
subscribe,
- () => navigator.onLine, // How to get the value on the client
- () => true // How to get the value on the server
+ () => navigator.onLine, // Como obter o valor no cliente
+ () => true // Como obter o valor no servidor
);
}
@@ -1393,7 +1393,7 @@ export function useOnlineStatus() {
-Notice how **you didn't need to change any of the components** to make this migration:
+Observe como **você não precisou alterar nenhum dos componentes** para fazer essa migração:
```js {2,7}
function StatusBar() {
@@ -1407,22 +1407,22 @@ function SaveButton() {
}
```
-This is another reason for why wrapping Effects in custom Hooks is often beneficial:
+Este é outro motivo pelo qual envolver efeitos em Hooks personalizados frequentemente é benéfico:
-1. You make the data flow to and from your Effects very explicit.
-2. You let your components focus on the intent rather than on the exact implementation of your Effects.
-3. When React adds new features, you can remove those Effects without changing any of your components.
+1. Você torna o fluxo de dados de ida e volta dos seus efeitos muito explícito.
+2. Você permite que seus componentes se concentrem na intenção em vez de na implementação exata dos seus efeitos.
+3. Quando o React adiciona novos recursos, você pode remover esses efeitos sem precisar alterar nenhum dos seus componentes.
-Similar to a [design system,](https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969) you might find it helpful to start extracting common idioms from your app's components into custom Hooks. This will keep your components' code focused on the intent, and let you avoid writing raw Effects very often. Many excellent custom Hooks are maintained by the React community.
+Similar a um [sistema de design](https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969), você pode achar útil começar a extrair idiomatismos comuns dos componentes do seu aplicativo em Hooks personalizados. Isso manterá o código dos seus componentes focado na intenção e permitirá evitar escrever efeitos brutos com frequência. Muitos Hooks personalizados excelentes são mantidos pela comunidade do React.
-#### Will React provide any built-in solution for data fetching? {/*will-react-provide-any-built-in-solution-for-data-fetching*/}
+#### O React fornecerá alguma solução interna para busca de dados? {/*will-react-provide-any-built-in-solution-for-data-fetching*/}
-We're still working out the details, but we expect that in the future, you'll write data fetching like this:
+Ainda estamos trabalhando nos detalhes, mas esperamos que no futuro você escreva a busca de dados da seguinte forma:
```js {1,4,6}
-import { use } from 'react'; // Not available yet!
+import { use } from 'react'; // Não disponível ainda!
function ShippingForm({ country }) {
const cities = use(fetch(`/api/cities?country=${country}`));
@@ -1431,13 +1431,13 @@ function ShippingForm({ country }) {
// ...
```
-If you use custom Hooks like `useData` above in your app, it will require fewer changes to migrate to the eventually recommended approach than if you write raw Effects in every component manually. However, the old approach will still work fine, so if you feel happy writing raw Effects, you can continue to do that.
+Se você usar Hooks personalizados como `useData` mencionado acima em seu aplicativo, será necessário fazer menos alterações para migrar para a abordagem eventualmente recomendada do que se você escrever efeitos brutos em cada componente manualmente. No entanto, a abordagem antiga ainda funcionará bem, então, se você se sentir confortável escrevendo efeitos brutos, pode continuar fazendo isso.
-### There is more than one way to do it {/*there-is-more-than-one-way-to-do-it*/}
+### Há mais de uma maneira de fazer isso {/*there-is-more-than-one-way-to-do-it*/}
-Let's say you want to implement a fade-in animation *from scratch* using the browser [`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) API. You might start with an Effect that sets up an animation loop. During each frame of the animation, you could change the opacity of the DOM node you [hold in a ref](/learn/manipulating-the-dom-with-refs) until it reaches `1`. Your code might start like this:
+Vamos supor que você queira implementar uma animação de fade-in *do zero* usando a API do navegador [`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame). Você pode começar com um efeito que configura um loop de animação. Durante cada quadro da animação, você poderia alterar a opacidade do nó do DOM que você [mantém em uma referência (ref)](/learn/manipulating-the-dom-with-refs) até que ela atinja o valor `1`. Seu código pode começar assim:
@@ -1459,7 +1459,7 @@ function Welcome() {
const progress = Math.min(timePassed / duration, 1);
onProgress(progress);
if (progress < 1) {
- // We still have more frames to paint
+ // Ainda temos mais quadros para renderizar
frameId = requestAnimationFrame(onFrame);
}
}
@@ -1520,7 +1520,7 @@ html, body { min-height: 300px; }
-To make the component more readable, you might extract the logic into a `useFadeIn` custom Hook:
+Para tornar o componente mais legível, você pode extrair a lógica para um Hook personalizado `useFadeIn`:
@@ -1569,7 +1569,7 @@ export function useFadeIn(ref, duration) {
const progress = Math.min(timePassed / duration, 1);
onProgress(progress);
if (progress < 1) {
- // We still have more frames to paint
+ // Ainda temos mais quadros para renderizar
frameId = requestAnimationFrame(onFrame);
}
}
@@ -1611,7 +1611,7 @@ html, body { min-height: 300px; }
-You could keep the `useFadeIn` code as is, but you could also refactor it more. For example, you could extract the logic for setting up the animation loop out of `useFadeIn` into a custom `useAnimationLoop` Hook:
+Você pode manter o código do `useFadeIn` como está, mas também pode refatorá-lo ainda mais. Por exemplo, você pode extrair a lógica para configurar o loop de animação do `useFadeIn` para um Hook personalizado `useAnimationLoop`:
@@ -1715,7 +1715,7 @@ html, body { min-height: 300px; }
-However, you didn't *have to* do that. As with regular functions, ultimately you decide where to draw the boundaries between different parts of your code. You could also take a very different approach. Instead of keeping the logic in the Effect, you could move most of the imperative logic inside a JavaScript [class:](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)
+No entanto, você *não precisou* fazer isso. Assim como com funções regulares, você decide em última instância onde definir os limites entre diferentes partes do seu código. Você também pode adotar uma abordagem muito diferente. Em vez de manter a lógica no efeito, você poderia mover a maior parte da lógica imperativa para uma [classe](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes) JavaScript:
@@ -1782,7 +1782,7 @@ export class FadeInAnimation {
if (progress === 1) {
this.stop();
} else {
- // We still have more frames to paint
+ // Ainda temos mais quadros para renderizar
this.frameId = requestAnimationFrame(() => this.onFrame());
}
}
@@ -1813,9 +1813,9 @@ html, body { min-height: 300px; }
-Effects let you connect React to external systems. The more coordination between Effects is needed (for example, to chain multiple animations), the more it makes sense to extract that logic out of Effects and Hooks *completely* like in the sandbox above. Then, the code you extracted *becomes* the "external system". This lets your Effects stay simple because they only need to send messages to the system you've moved outside React.
+Os efeitos permitem conectar o React a sistemas externos. Quanto mais coordenação entre efeitos for necessária (por exemplo, para encadear várias animações), mais faz sentido extrair essa lógica *completamente* dos efeitos e hooks, como no exemplo do código anterior. Em seguida, o código que você extraiu se torna *o sistema externo*. Isso permite que seus efeitos permaneçam simples, pois eles só precisam enviar mensagens para o sistema que você moveu para fora do React.
-The examples above assume that the fade-in logic needs to be written in JavaScript. However, this particular fade-in animation is both simpler and much more efficient to implement with a plain [CSS Animation:](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations)
+Os exemplos acima pressupõem que a lógica do fade-in precisa ser escrita em JavaScript. No entanto, essa animação específica de fade-in é mais simples e muito mais eficiente de ser implementada com uma simples [Animação CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations).
@@ -1870,27 +1870,27 @@ html, body { min-height: 300px; }
-Sometimes, you don't even need a Hook!
+Às vezes, você nem precisa de um Hook!
-- Custom Hooks let you share logic between components.
-- Custom Hooks must be named starting with `use` followed by a capital letter.
-- Custom Hooks only share stateful logic, not state itself.
-- You can pass reactive values from one Hook to another, and they stay up-to-date.
-- All Hooks re-run every time your component re-renders.
-- The code of your custom Hooks should be pure, like your component's code.
-- Wrap event handlers received by custom Hooks into Effect Events.
-- Don't create custom Hooks like `useMount`. Keep their purpose specific.
-- It's up to you how and where to choose the boundaries of your code.
+- Hooks personalizados permitem compartilhar lógica entre componentes.
+- Hooks personalizados devem ser nomeados começando com `use`, seguido por uma letra maiúscula.
+- Hooks personalizados compartilham apenas a lógica relacionada ao estado, não o estado em si.
+- É possível passar valores reativos de um Hook para outro, e eles se mantêm atualizados.
+- Todos os Hooks são executados novamente sempre que o componente é renderizado novamente.
+- O código dos seus Hooks personalizados deve ser puro, assim como o código do seu componente.
+- Encapsular manipuladores de eventos recebidos por Hooks personalizados em Effects de Evento.
+- Não crie Hooks personalizados como `useMount`. Mantenha o propósito deles específico.
+- Cabe a você escolher como e onde definir os limites do seu código.
-#### Extract a `useCounter` Hook {/*extract-a-usecounter-hook*/}
+#### Extrair um Hook `useCounter` {/*extract-a-usecounter-hook*/}
-This component uses a state variable and an Effect to display a number that increments every second. Extract this logic into a custom Hook called `useCounter`. Your goal is to make the `Counter` component implementation look exactly like this:
+Este componente usa uma variável de estado e um efeito para exibir um número que incrementa a cada segundo. Extraia essa lógica para um Hook personalizado chamado `useCounter`. Seu objetivo é fazer com que a implementação do componente `Counter` fique exatamente assim:
```js
export default function Counter() {
@@ -1899,7 +1899,7 @@ export default function Counter() {
}
```
-You'll need to write your custom Hook in `useCounter.js` and import it into the `Counter.js` file.
+Você precisará escrever seu Hook personalizado no arquivo `useCounter.js` e importá-lo no arquivo `Counter.js`.
@@ -1919,14 +1919,14 @@ export default function Counter() {
```
```js useCounter.js
-// Write your custom Hook in this file!
+// Escreva seu Hook personalizado neste arquivo!
```
-Your code should look like this:
+Seu código deve se parecer com isto:
@@ -1956,13 +1956,13 @@ export function useCounter() {
-Notice that `App.js` doesn't need to import `useState` or `useEffect` anymore.
+Observe que `App.js` não precisa mais importar `useState` ou `useEffect`.
-#### Make the counter delay configurable {/*make-the-counter-delay-configurable*/}
+#### Torne o atraso do contador configurável {/*make-the-counter-delay-configurable*/}
-In this example, there is a `delay` state variable controlled by a slider, but its value is not used. Pass the `delay` value to your custom `useCounter` Hook, and change the `useCounter` Hook to use the passed `delay` instead of hardcoding `1000` ms.
+Neste exemplo, há uma variável de estado `delay` controlada por um slider, mas seu valor não está sendo utilizado. Passe o valor de `delay` para o seu Hook personalizado `useCounter` e altere o Hook `useCounter` para usar o `delay` passado em vez de codificar `1000` ms.
@@ -2012,7 +2012,7 @@ export function useCounter() {
-Pass the `delay` to your Hook with `useCounter(delay)`. Then, inside the Hook, use `delay` instead of the hardcoded `1000` value. You'll need to add `delay` to your Effect's dependencies. This ensures that a change in `delay` will reset the interval.
+Passe o `delay` para o seu Hook com `useCounter(delay)`. Em seguida, dentro do Hook, use `delay` em vez do valor codificado `1000`. Você precisará adicionar `delay` às dependências do seu efeito. Isso garante que uma alteração no `delay` redefina o intervalo.
@@ -2062,9 +2062,9 @@ export function useCounter(delay) {
-#### Extract `useInterval` out of `useCounter` {/*extract-useinterval-out-of-usecounter*/}
+#### Extrair `useInterval` fora do `useCounter` {/*extract-useinterval-out-of-usecounter*/}
-Currently, your `useCounter` Hook does two things. It sets up an interval, and it also increments a state variable on every interval tick. Split out the logic that sets up the interval into a separate Hook called `useInterval`. It should take two arguments: the `onTick` callback, and the `delay`. After this change, your `useCounter` implementation should look like this:
+Atualmente, seu Hook `useCounter` faz duas coisas. Ele configura um intervalo e também incrementa uma variável de estado a cada intervalo. Separe a lógica que configura o intervalo em um Hook separado chamado `useInterval`. Ele deve receber dois argumentos: o callback `onTick` e o `delay`. Após essa alteração, a implementação do seu `useCounter` deve ficar assim:
```js
export function useCounter(delay) {
@@ -2076,7 +2076,7 @@ export function useCounter(delay) {
}
```
-Write `useInterval` in the `useInterval.js` file and import it into the `useCounter.js` file.
+Escreva `useInterval` no arquivo `useInterval.js` e importe-o no arquivo `useCounter.js`.
@@ -2106,14 +2106,14 @@ export function useCounter(delay) {
```
```js useInterval.js
-// Write your Hook here!
+// Escreva seu Hook aqui!
```
-The logic inside `useInterval` should set up and clear the interval. It doesn't need to do anything else.
+A lógica dentro do `useInterval` deve configurar e limpar o intervalo. Não precisa fazer mais nada.
@@ -2152,36 +2152,36 @@ export function useInterval(onTick, delay) {
-Note that there is a bit of a problem with this solution, which you'll solve in the next challenge.
+Observe que há um pequeno problema com essa solução, que você resolverá no próximo desafio.
-#### Fix a resetting interval {/*fix-a-resetting-interval*/}
+#### Corrigir um intervalo que é resetado {/*fix-a-resetting-interval*/}
-In this example, there are *two* separate intervals.
+No exemplo dado, existem *dois* intervalos separados.
-The `App` component calls `useCounter`, which calls `useInterval` to update the counter every second. But the `App` component *also* calls `useInterval` to randomly update the page background color every two seconds.
+O componente `App` chama `useCounter`, que por sua vez chama `useInterval` para atualizar o contador a cada segundo. Mas o componente `App` *também* chama `useInterval` para atualizar aleatoriamente a cor de fundo da página a cada dois segundos.
-For some reason, the callback that updates the page background never runs. Add some logs inside `useInterval`:
+Por algum motivo, o callback que atualiza o fundo da página nunca é executado. Adicione alguns logs dentro do `useInterval`:
```js {2,5}
useEffect(() => {
- console.log('✅ Setting up an interval with delay ', delay)
+ console.log('✅ Configurando um intervalo com atraso ', delay)
const id = setInterval(onTick, delay);
return () => {
- console.log('❌ Clearing an interval with delay ', delay)
+ console.log('❌ Limpando um intervalo com atraso ', delay)
clearInterval(id);
};
}, [onTick, delay]);
```
-Do the logs match what you expect to happen? If some of your Effects seem to re-synchronize unnecessarily, can you guess which dependency is causing that to happen? Is there some way to [remove that dependency](/learn/removing-effect-dependencies) from your Effect?
+Os logs correspondem ao que você espera que aconteça? Se alguns de seus Effects parecem ser ressincronizados desnecessariamente, você consegue adivinhar qual dependência está causando isso? Existe alguma maneira de [remover essa dependência](/learn/removing-effect-dependencies) do seu efeito?
-After you fix the issue, you should expect the page background to update every two seconds.
+Depois de corrigir o problema, você deve esperar que o fundo da página seja atualizado a cada dois segundos.
-It looks like your `useInterval` Hook accepts an event listener as an argument. Can you think of some way to wrap that event listener so that it doesn't need to be a dependency of your Effect?
+Parece que o seu Hook `useInterval` aceita um ouvinte de evento como argumento. Você consegue pensar em alguma maneira de encapsular esse ouvinte de evento para que ele não precise ser uma dependência do seu Effect?
@@ -2250,11 +2250,11 @@ export function useInterval(onTick, delay) {
-Inside `useInterval`, wrap the tick callback into an Effect Event, as you did [earlier on this page.](/learn/reusing-logic-with-custom-hooks#passing-event-handlers-to-custom-hooks)
+Dentro do `useInterval`, encapsule o callback do tick em um Evento de Efeito, como você fez [anteriormente nesta página.](/learn/reusing-logic-with-custom-hooks#passing-event-handlers-to-custom-hooks)
-This will allow you to omit `onTick` from dependencies of your Effect. The Effect won't re-synchronize on every re-render of the component, so the page background color change interval won't get reset every second before it has a chance to fire.
+Isso permitirá que você omita `onTick` das dependências do seu Effect. O Effect não será ressincronizado a cada re-renderização do componente, portanto, o intervalo de alteração da cor de fundo da página não será redefinido a cada segundo antes de ter a chance de disparar.
-With this change, both intervals work as expected and don't interfere with each other:
+Com essa alteração, ambos os intervalos funcionam como esperado e não interferem um no outro:
@@ -2321,21 +2321,21 @@ export function useInterval(callback, delay) {
-#### Implement a staggering movement {/*implement-a-staggering-movement*/}
+#### Implemente um movimento impressionante {/*implement-a-staggering-movement*/}
-In this example, the `usePointerPosition()` Hook tracks the current pointer position. Try moving your cursor or your finger over the preview area and see the red dot follow your movement. Its position is saved in the `pos1` variable.
+Neste exemplo, o Hook `usePointerPosition()` rastreia a posição atual do ponteiro. Tente mover o cursor do mouse ou o dedo sobre a área de visualização e observe o ponto vermelho seguir o seu movimento. Sua posição é armazenada na variável `pos1`.
-In fact, there are five (!) different red dots being rendered. You don't see them because currently they all appear at the same position. This is what you need to fix. What you want to implement instead is a "staggered" movement: each dot should "follow" the previous dot's path. For example, if you quickly move your cursor, the first dot should follow it immediately, the second dot should follow the first dot with a small delay, the third dot should follow the second dot, and so on.
+Na verdade, existem cinco (!) pontos vermelhos diferentes sendo renderizados. Você não os vê porque atualmente todos aparecem na mesma posição. Isso é o que você precisa corrigir. Em vez disso, você deseja implementar um movimento "escalado": cada ponto deve "seguir" o caminho do ponto anterior. Por exemplo, se você mover rapidamente o cursor, o primeiro ponto deve segui-lo imediatamente, o segundo ponto deve seguir o primeiro ponto com um pequeno atraso, o terceiro ponto deve seguir o segundo ponto e assim por diante.
-You need to implement the `useDelayedValue` custom Hook. Its current implementation returns the `value` provided to it. Instead, you want to return the value back from `delay` milliseconds ago. You might need some state and an Effect to do this.
+Você precisa implementar o Hook personalizado `useDelayedValue`. Sua implementação atual retorna o `value` fornecido a ele. Em vez disso, você deseja retornar o valor de volta de `delay` milissegundos atrás. Você pode precisar de algum estado e um Effect para fazer isso.
-After you implement `useDelayedValue`, you should see the dots move following one another.
+Após você implementar o `useDelayedValue`, você deverá ver os pontos se movendo um após o outro.
-You'll need to store the `delayedValue` as a state variable inside your custom Hook. When the `value` changes, you'll want to run an Effect. This Effect should update `delayedValue` after the `delay`. You might find it helpful to call `setTimeout`.
+Você precisará armazenar o `delayedValue` como uma variável de estado dentro do seu Hook personalizado. Quando o `value` mudar, você desejará executar um efeito. Este efeito deve atualizar o `delayedValue` após o `delay`. Pode ser útil usar `setTimeout` para isso.
-Does this Effect need cleanup? Why or why not?
+Este efeito precisa de limpeza? Por quê ou por que não?
@@ -2345,7 +2345,7 @@ Does this Effect need cleanup? Why or why not?
import { usePointerPosition } from './usePointerPosition.js';
function useDelayedValue(value, delay) {
- // TODO: Implement this Hook
+ // TODO: Implemente este Hook
return value;
}
@@ -2408,7 +2408,7 @@ body { min-height: 300px; }
-Here is a working version. You keep the `delayedValue` as a state variable. When `value` updates, your Effect schedules a timeout to update the `delayedValue`. This is why the `delayedValue` always "lags behind" the actual `value`.
+Aqui está uma versão funcional. Você mantém o `delayedValue` como uma variável de estado. Quando o `value` é atualizado, seu efeito agenda um timeout para atualizar o `delayedValue`. É por isso que o `delayedValue` sempre fica "atrasado" em relação ao valor real.
@@ -2485,7 +2485,7 @@ body { min-height: 300px; }
-Note that this Effect *does not* need cleanup. If you called `clearTimeout` in the cleanup function, then each time the `value` changes, it would reset the already scheduled timeout. To keep the movement continuous, you want all the timeouts to fire.
+Observe que este efeito *não precisa* de uma limpeza. Se você chamasse `clearTimeout` na função de limpeza, cada vez que o `value` mudasse, ele redefiniria o timeout já agendado. Para manter o movimento contínuo, você deseja que todos os timeouts sejam disparados.
From 2cf1693d27f56d600312bdc5064d407bfbe418dc Mon Sep 17 00:00:00 2001
From: Gustavo Henrique Ribeiro Dias
Date: Tue, 23 May 2023 15:43:34 -0300
Subject: [PATCH 14/67] translate Reusing logic with custom hooks to pt-br
---
src/content/learn/reusing-logic-with-custom-hooks.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/content/learn/reusing-logic-with-custom-hooks.md b/src/content/learn/reusing-logic-with-custom-hooks.md
index 6cef0dba7..359ecf502 100644
--- a/src/content/learn/reusing-logic-with-custom-hooks.md
+++ b/src/content/learn/reusing-logic-with-custom-hooks.md
@@ -1,5 +1,5 @@
---
-title: 'Reusing Logic with Custom Hooks'
+title: 'Reutilizando lógica com Hooks personalizados'
---
From 8a2c048032f6f5bcbac93b8b6e4574a36ead81af Mon Sep 17 00:00:00 2001
From: Gustavo Henrique Ribeiro Dias
Date: Tue, 23 May 2023 15:47:19 -0300
Subject: [PATCH 15/67] translate Reusing logic with custom hooks to pt-br
---
src/content/learn/reusing-logic-with-custom-hooks.md | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/content/learn/reusing-logic-with-custom-hooks.md b/src/content/learn/reusing-logic-with-custom-hooks.md
index 359ecf502..2b314b179 100644
--- a/src/content/learn/reusing-logic-with-custom-hooks.md
+++ b/src/content/learn/reusing-logic-with-custom-hooks.md
@@ -1097,7 +1097,7 @@ Observe como agora você não precisa mais saber *como* `useChatRoom` funciona p
Você não precisa extrair um Hook personalizado para cada pequeno trecho de código duplicado. Alguma duplicação é aceitável. Por exemplo, extrair um Hook `useFormInput` para envolver uma única chamada `useState` como feito anteriormente provavelmente é desnecessário.
-No entanto, sempre que você escrever um Efeito, considere se seria mais claro encapsulá-lo também em um Hook personalizado. [Você não deve precisar de Efeitos com muita frequência,](/learn/you-might-not-need-an-effect) então, se você estiver escrevendo um, significa que precisa "sair do mundo React" para sincronizar com algum sistema externo ou fazer algo para o qual o React não tenha uma API embutida. encapsular o Efeito em um Hook personalizado permite que você comunique claramente sua intenção e como os dados fluem por ele.
+No entanto, sempre que você escrever um Efeito, considere se seria mais claro encapsulá-lo também em um Hook personalizado. [Você não deve precisar de efeitos com muita frequência,](/learn/you-might-not-need-an-effect) então, se você estiver escrevendo um, significa que precisa "sair do mundo React" para sincronizar com algum sistema externo ou fazer algo para o qual o React não tenha uma API embutida. encapsular o Efeito em um Hook personalizado permite que você comunique claramente sua intenção e como os dados fluem por ele.
Por exemplo, considere um componente `ShippingForm` que exibe dois dropdowns: um mostra a lista de cidades e outro mostra a lista de áreas na cidade selecionada. Você pode começar com um código que se parece com isso:
@@ -1880,7 +1880,7 @@ html, body { min-height: 300px; }
- É possível passar valores reativos de um Hook para outro, e eles se mantêm atualizados.
- Todos os Hooks são executados novamente sempre que o componente é renderizado novamente.
- O código dos seus Hooks personalizados deve ser puro, assim como o código do seu componente.
-- Encapsular manipuladores de eventos recebidos por Hooks personalizados em Effects de Evento.
+- Encapsular manipuladores de eventos recebidos por Hooks personalizados em efeitos de Evento.
- Não crie Hooks personalizados como `useMount`. Mantenha o propósito deles específico.
- Cabe a você escolher como e onde definir os limites do seu código.
@@ -2175,7 +2175,7 @@ Por algum motivo, o callback que atualiza o fundo da página nunca é executado.
}, [onTick, delay]);
```
-Os logs correspondem ao que você espera que aconteça? Se alguns de seus Effects parecem ser ressincronizados desnecessariamente, você consegue adivinhar qual dependência está causando isso? Existe alguma maneira de [remover essa dependência](/learn/removing-effect-dependencies) do seu efeito?
+Os logs correspondem ao que você espera que aconteça? Se alguns de seus efeitos parecem ser ressincronizados desnecessariamente, você consegue adivinhar qual dependência está causando isso? Existe alguma maneira de [remover essa dependência](/learn/removing-effect-dependencies) do seu efeito?
Depois de corrigir o problema, você deve esperar que o fundo da página seja atualizado a cada dois segundos.
From e429bbf2ea88b4ecd52fdec394f881f79a9ac38c Mon Sep 17 00:00:00 2001
From: Gustavo Henrique Ribeiro Dias
Date: Tue, 23 May 2023 15:57:05 -0300
Subject: [PATCH 16/67] translate Reusing logic with custom hooks to pt-br
---
src/content/learn/reusing-logic-with-custom-hooks.md | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/content/learn/reusing-logic-with-custom-hooks.md b/src/content/learn/reusing-logic-with-custom-hooks.md
index 2b314b179..9ec6d6ed4 100644
--- a/src/content/learn/reusing-logic-with-custom-hooks.md
+++ b/src/content/learn/reusing-logic-with-custom-hooks.md
@@ -228,7 +228,7 @@ Essa convenção garante que você sempre possa olhar para um componente e saber
-Se o seu linter estiver [configurado para o React,](/learn/editor-setup#linting) ele irá impor essa convenção de nomenclatura. Role para cima até a área de sandbox acima e renomeie `useOnlineStatus` para `getOnlineStatus`. Observe que o linter não permitirá mais que você chame `useState` ou `useEffect` dentro dele. Apenas Hooks e componentes podem chamar outros Hooks!
+Se o seu linter estiver [configurado para o React,](/learn/editor-setup#linting) ele irá impor essa convenção de nomenclatura. Role para cima até o sandbox e renomeie `useOnlineStatus` para `getOnlineStatus`. Observe que o linter não permitirá mais que você chame `useState` ou `useEffect` dentro dele. Apenas Hooks e componentes podem chamar outros Hooks!
@@ -441,7 +441,7 @@ function Form() {
É por isso que funciona como se estivéssemos declarando duas variáveis de estado separadas!
-**Os Hooks personalizados permitem compartilhar *lógica com estado* e não *o próprio estado*. Cada chamada a um Hook é completamente independente de qualquer outra chamada ao mesmo Hook.** É por isso que as duas áreas de teste acima são completamente equivalentes. Se desejar, role para cima e compare-as. O comportamento antes e depois de extrair um Hook personalizado é idêntico.
+**Os Hooks personalizados permitem compartilhar *lógica com estado* e não *o próprio estado*. Cada chamada a um Hook é completamente independente de qualquer outra chamada ao mesmo Hook.** É por isso que as duas sandboxes acima são completamente equivalentes. Se desejar, role para cima e compare-as. O comportamento antes e depois de extrair um Hook personalizado é idêntico.
Quando você precisa compartilhar o próprio estado entre vários componentes, [eleve-o e passe-o como propriedade](/learn/sharing-state-between-components) em vez disso.
@@ -1813,7 +1813,7 @@ html, body { min-height: 300px; }
-Os efeitos permitem conectar o React a sistemas externos. Quanto mais coordenação entre efeitos for necessária (por exemplo, para encadear várias animações), mais faz sentido extrair essa lógica *completamente* dos efeitos e hooks, como no exemplo do código anterior. Em seguida, o código que você extraiu se torna *o sistema externo*. Isso permite que seus efeitos permaneçam simples, pois eles só precisam enviar mensagens para o sistema que você moveu para fora do React.
+Os efeitos permitem conectar o React a sistemas externos. Quanto mais coordenação entre efeitos for necessária (por exemplo, para encadear várias animações), mais faz sentido extrair essa lógica *completamente* dos efeitos e hooks, como no sandbox anterior. Em seguida, o código que você extraiu se torna *o sistema externo*. Isso permite que seus efeitos permaneçam simples, pois eles só precisam enviar mensagens para o sistema que você moveu para fora do React.
Os exemplos acima pressupõem que a lógica do fade-in precisa ser escrita em JavaScript. No entanto, essa animação específica de fade-in é mais simples e muito mais eficiente de ser implementada com uma simples [Animação CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations).
From 3364c93feb358a7d1ac2e8d8b0468c3e32214062 Mon Sep 17 00:00:00 2001
From: Tunzeki
Date: Wed, 24 May 2023 00:04:02 +0100
Subject: [PATCH 17/67] Fix typo: change "intermedinate" to "indeterminate"
(#6062)
---
src/content/reference/react-dom/components/progress.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/content/reference/react-dom/components/progress.md b/src/content/reference/react-dom/components/progress.md
index fd6c96a1e..b783a102d 100644
--- a/src/content/reference/react-dom/components/progress.md
+++ b/src/content/reference/react-dom/components/progress.md
@@ -35,7 +35,7 @@ To display a progress indicator, render the [built-in browser ``](http
Additionally, `` supports these props:
* [`max`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#attr-max): A number. Specifies the maximum `value`. Defaults to `1`.
-* [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#attr-value): A number between `0` and `max`, or `null` for intermedinate progress. Specifies how much was done.
+* [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#attr-value): A number between `0` and `max`, or `null` for indeterminate progress. Specifies how much was done.
---
From 5cb547a05c0d6d947c12fb5610f55e763e07ac6f Mon Sep 17 00:00:00 2001
From: Gustavo Henrique Ribeiro Dias
Date: Wed, 24 May 2023 08:24:58 -0300
Subject: [PATCH 18/67] translate Reusing logic with custom hooks to pt-br
---
.../learn/reusing-logic-with-custom-hooks.md | 120 +++++++++---------
1 file changed, 60 insertions(+), 60 deletions(-)
diff --git a/src/content/learn/reusing-logic-with-custom-hooks.md b/src/content/learn/reusing-logic-with-custom-hooks.md
index 9ec6d6ed4..b8b8fc12f 100644
--- a/src/content/learn/reusing-logic-with-custom-hooks.md
+++ b/src/content/learn/reusing-logic-with-custom-hooks.md
@@ -349,14 +349,14 @@ export default function Form() {
return (
<>
- First name:
+ Primeiro nome:
- Last name:
+ Último nome:
- Good morning, {firstName} {lastName}.
+ Bom dia, {firstName} {lastName}.
>
);
}
@@ -389,14 +389,14 @@ export default function Form() {
return (
<>
- First name:
+ Primeiro nome:
- Last name:
+ Último nome:
- Good morning, {firstNameProps.value} {lastNameProps.value}.
+ Bom dia, {firstNameProps.value} {lastNameProps.value}.
>
);
}
@@ -458,18 +458,18 @@ import { useState } from 'react';
import ChatRoom from './ChatRoom.js';
export default function App() {
- const [roomId, setRoomId] = useState('general');
+ const [roomId, setRoomId] = useState('geral');
return (
<>
- Choose the chat room:{' '}
+ Escolha a sala de bate-papo{' '}
setRoomId(e.target.value)}
>
- general
- travel
- music
+ geral
+ viagem
+ música
@@ -505,10 +505,10 @@ export default function ChatRoom({ roomId }) {
return (
<>
- Server URL:
+ URL do servidor:
setServerUrl(e.target.value)} />
- Welcome to the {roomId} room!
+ Bem vindo(a) à sala {roomId}
>
);
}
@@ -518,10 +518,10 @@ export default function ChatRoom({ roomId }) {
export function createConnection({ serverUrl, roomId }) {
// Uma implementação real conectaria de fato ao servidor
if (typeof serverUrl !== 'string') {
- throw Error('Expected serverUrl to be a string. Received: ' + serverUrl);
+ throw Error('Espera-se que serverUrl seja uma string. Recebido: ' + serverUrl);
}
if (typeof roomId !== 'string') {
- throw Error('Expected roomId to be a string. Received: ' + roomId);
+ throw Error('Espera-se que roomId seja uma string. Recebido: ' + roomId);
}
let intervalId;
let messageCallback;
@@ -546,10 +546,10 @@ export function createConnection({ serverUrl, roomId }) {
},
on(event, callback) {
if (messageCallback) {
- throw Error('Cannot add the handler twice.');
+ throw Error('Não é possível adicionar o manipulador duas vezes.');
}
if (event !== 'message') {
- throw Error('Only "message" event is supported.');
+ throw Error('Apenas o evento "message" é suportado.');
}
messageCallback = callback;
},
@@ -634,10 +634,10 @@ export default function ChatRoom({ roomId }) {
return (
<>
- Server URL:
+ URL do servidor:
setServerUrl(e.target.value)} />
- Welcome to the {roomId} room!
+ Bem vindo(a) à sala {roomId}
>
);
}
@@ -654,18 +654,18 @@ import { useState } from 'react';
import ChatRoom from './ChatRoom.js';
export default function App() {
- const [roomId, setRoomId] = useState('general');
+ const [roomId, setRoomId] = useState('geral');
return (
<>
- Choose the chat room:{' '}
+ Escolha a sala de bate-papo{' '}
setRoomId(e.target.value)}
>
- general
- travel
- music
+ geral
+ viagem
+ música
@@ -692,10 +692,10 @@ export default function ChatRoom({ roomId }) {
return (
<>
- Server URL:
+ URL do servidor:
setServerUrl(e.target.value)} />
- Welcome to the {roomId} room!
+ Bem vindo(a) à sala {roomId}
>
);
}
@@ -726,10 +726,10 @@ export function useChatRoom({ serverUrl, roomId }) {
export function createConnection({ serverUrl, roomId }) {
// Uma implementação real conectaria de fato ao servidor
if (typeof serverUrl !== 'string') {
- throw Error('Expected serverUrl to be a string. Received: ' + serverUrl);
+ throw Error('Espera-se que serverUrl seja uma string. Recebido: ' + serverUrl);
}
if (typeof roomId !== 'string') {
- throw Error('Expected roomId to be a string. Received: ' + roomId);
+ throw Error('Espera-se que roomId seja uma string. Recebido: ' + roomId);
}
let intervalId;
let messageCallback;
@@ -754,10 +754,10 @@ export function createConnection({ serverUrl, roomId }) {
},
on(event, callback) {
if (messageCallback) {
- throw Error('Cannot add the handler twice.');
+ throw Error('Não é possível adicionar o manipulador duas vezes.');
}
if (event !== 'message') {
- throw Error('Only "message" event is supported.');
+ throw Error('Apenas o evento "message" é suportado.');
}
messageCallback = callback;
},
@@ -932,18 +932,18 @@ import { useState } from 'react';
import ChatRoom from './ChatRoom.js';
export default function App() {
- const [roomId, setRoomId] = useState('general');
+ const [roomId, setRoomId] = useState('geral');
return (
<>
- Choose the chat room:{' '}
+ Escolha a sala de bate-papo{' '}
setRoomId(e.target.value)}
>
- general
- travel
- music
+ geral
+ viagem
+ música
@@ -974,10 +974,10 @@ export default function ChatRoom({ roomId }) {
return (
<>
- Server URL:
+ URL do servidor:
setServerUrl(e.target.value)} />
- Welcome to the {roomId} room!
+ Bem vindo(a) à sala {roomId}
>
);
}
@@ -1010,10 +1010,10 @@ export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) {
export function createConnection({ serverUrl, roomId }) {
// Uma implementação real conectaria de fato ao servidor
if (typeof serverUrl !== 'string') {
- throw Error('Expected serverUrl to be a string. Received: ' + serverUrl);
+ throw Error('Espera-se que serverUrl seja uma string. Recebido: ' + serverUrl);
}
if (typeof roomId !== 'string') {
- throw Error('Expected roomId to be a string. Received: ' + roomId);
+ throw Error('Espera-se que roomId seja uma string. Recebido: ' + roomId);
}
let intervalId;
let messageCallback;
@@ -1038,10 +1038,10 @@ export function createConnection({ serverUrl, roomId }) {
},
on(event, callback) {
if (messageCallback) {
- throw Error('Cannot add the handler twice.');
+ throw Error('Não é possível adicionar o manipulador duas vezes.');
}
if (event !== 'message') {
- throw Error('Only "message" event is supported.');
+ throw Error('Apenas o evento "message" é suportado.');
}
messageCallback = callback;
},
@@ -1486,7 +1486,7 @@ function Welcome() {
return (
- Welcome
+ Bem vindo(a)
);
}
@@ -1496,7 +1496,7 @@ export default function App() {
return (
<>
setShow(!show)}>
- {show ? 'Remove' : 'Show'}
+ {show ? 'Remover' : 'Mostrar'}
{show && }
@@ -1535,7 +1535,7 @@ function Welcome() {
return (
- Welcome
+ Bem vindo(a)
);
}
@@ -1545,7 +1545,7 @@ export default function App() {
return (
<>
setShow(!show)}>
- {show ? 'Remove' : 'Show'}
+ {show ? 'Remover' : 'Mostrar'}
{show && }
@@ -1626,7 +1626,7 @@ function Welcome() {
return (
- Welcome
+ Bem vindo(a)
);
}
@@ -1636,7 +1636,7 @@ export default function App() {
return (
<>
setShow(!show)}>
- {show ? 'Remove' : 'Show'}
+ {show ? 'Remover' : 'Mostrar'}
{show && }
@@ -1730,7 +1730,7 @@ function Welcome() {
return (
- Welcome
+ Bem vindo(a)
);
}
@@ -1740,7 +1740,7 @@ export default function App() {
return (
<>
setShow(!show)}>
- {show ? 'Remove' : 'Show'}
+ {show ? 'Remover' : 'Mostrar'}
{show && }
@@ -1826,7 +1826,7 @@ import './welcome.css';
function Welcome() {
return (
- Welcome
+ Bem vindo(a)
);
}
@@ -1836,7 +1836,7 @@ export default function App() {
return (
<>
setShow(!show)}>
- {show ? 'Remove' : 'Show'}
+ {show ? 'Remover' : 'Mostrar'}
{show && }
@@ -1895,7 +1895,7 @@ Este componente usa uma variável de estado e um efeito para exibir um número q
```js
export default function Counter() {
const count = useCounter();
- return Seconds passed: {count} ;
+ return Segundos que se passaram: {count} ;
}
```
@@ -1914,7 +1914,7 @@ export default function Counter() {
}, 1000);
return () => clearInterval(id);
}, []);
- return Seconds passed: {count} ;
+ return Segundos que se passaram: {count} ;
}
```
@@ -1935,7 +1935,7 @@ import { useCounter } from './useCounter.js';
export default function Counter() {
const count = useCounter();
- return Seconds passed: {count} ;
+ return Segundos que se passaram: {count} ;
}
```
@@ -1976,7 +1976,7 @@ export default function Counter() {
return (
<>
- Tick duration: {delay} ms
+ duração do Tick: {delay} ms
- Tick duration: {delay} ms
+ duração do Tick: {delay} ms
Seconds passed: {count};
+ return Segundos que se passaram: {count} ;
}
```
@@ -2122,7 +2122,7 @@ import { useCounter } from './useCounter.js';
export default function Counter() {
const count = useCounter(1000);
- return Seconds passed: {count} ;
+ return Segundos que se passaram: {count} ;
}
```
@@ -2215,7 +2215,7 @@ export default function Counter() {
document.body.style.backgroundColor = randomColor;
}, 2000);
- return Seconds passed: {count} ;
+ return Segundos que se passaram: {count} ;
}
```
@@ -2287,7 +2287,7 @@ export default function Counter() {
document.body.style.backgroundColor = randomColor;
}, 2000);
- return Seconds passed: {count} ;
+ return Segundos que se passaram: {count} ;
}
```
From fc1017952e07e3a0724c7ba8ec38718ba6ab6983 Mon Sep 17 00:00:00 2001
From: Gustavo Henrique Ribeiro Dias
Date: Wed, 24 May 2023 10:44:32 -0300
Subject: [PATCH 19/67] translate Reusing logic with custom hooks to pt-br
---
src/content/learn/reusing-logic-with-custom-hooks.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/content/learn/reusing-logic-with-custom-hooks.md b/src/content/learn/reusing-logic-with-custom-hooks.md
index b8b8fc12f..9df55070d 100644
--- a/src/content/learn/reusing-logic-with-custom-hooks.md
+++ b/src/content/learn/reusing-logic-with-custom-hooks.md
@@ -4,7 +4,7 @@ title: 'Reutilizando lógica com Hooks personalizados'
-O React vem com vários Hooks embutidos como `useState`, `useContext`, and `useEffect`. Às vezes, você desejará que houvesse um Hook para algum propósito mais específico: Por exemplo, para buscar dados, para acompanhar se o usuário está online, ou para se conectar a uma sala de bate-papo. Você pode não encontrar esses Hooks no React, mas pode criar seus próprios Hooks para as necessidades do seu aplicativo
+O React vem com vários Hooks embutidos como `useState`, `useContext`, e `useEffect`. Às vezes, você desejará que houvesse um Hook para algum propósito mais específico: Por exemplo, para buscar dados, para acompanhar se o usuário está online, ou para se conectar a uma sala de bate-papo. Você pode não encontrar esses Hooks no React, mas pode criar seus próprios Hooks para as necessidades do seu aplicativo
From ad4f5c7c9555f65d6b889e85427ba3fdfa4e7159 Mon Sep 17 00:00:00 2001
From: Serhii Palamarchuk
Date: Tue, 30 May 2023 19:57:57 +0300
Subject: [PATCH 20/67] Update NextJs link (#6053)
---
.../reference/react-dom/server/renderToPipeableStream.md | 2 +-
.../reference/react-dom/server/renderToReadableStream.md | 2 +-
src/content/reference/react/Suspense.md | 2 +-
src/content/reference/react/useDeferredValue.md | 2 +-
4 files changed, 4 insertions(+), 4 deletions(-)
diff --git a/src/content/reference/react-dom/server/renderToPipeableStream.md b/src/content/reference/react-dom/server/renderToPipeableStream.md
index dee690372..6a9021e02 100644
--- a/src/content/reference/react-dom/server/renderToPipeableStream.md
+++ b/src/content/reference/react-dom/server/renderToPipeableStream.md
@@ -286,7 +286,7 @@ Streaming does not need to wait for React itself to load in the browser, or for
**Only Suspense-enabled data sources will activate the Suspense component.** They include:
-- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/advanced-features/react-18)
+- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/getting-started/react-essentials)
- Lazy-loading component code with [`lazy`](/reference/react/lazy)
Suspense **does not** detect when data is fetched inside an Effect or event handler.
diff --git a/src/content/reference/react-dom/server/renderToReadableStream.md b/src/content/reference/react-dom/server/renderToReadableStream.md
index d6d5b3264..8ef42aa71 100644
--- a/src/content/reference/react-dom/server/renderToReadableStream.md
+++ b/src/content/reference/react-dom/server/renderToReadableStream.md
@@ -285,7 +285,7 @@ Streaming does not need to wait for React itself to load in the browser, or for
**Only Suspense-enabled data sources will activate the Suspense component.** They include:
-- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/advanced-features/react-18)
+- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/getting-started/react-essentials)
- Lazy-loading component code with [`lazy`](/reference/react/lazy)
Suspense **does not** detect when data is fetched inside an Effect or event handler.
diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md
index f24c98c7d..27add6035 100644
--- a/src/content/reference/react/Suspense.md
+++ b/src/content/reference/react/Suspense.md
@@ -252,7 +252,7 @@ async function getAlbums() {
**Only Suspense-enabled data sources will activate the Suspense component.** They include:
-- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/advanced-features/react-18)
+- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/getting-started/react-essentials)
- Lazy-loading component code with [`lazy`](/reference/react/lazy)
Suspense **does not** detect when data is fetched inside an Effect or event handler.
diff --git a/src/content/reference/react/useDeferredValue.md b/src/content/reference/react/useDeferredValue.md
index 3f2a8a5d9..f25054542 100644
--- a/src/content/reference/react/useDeferredValue.md
+++ b/src/content/reference/react/useDeferredValue.md
@@ -84,7 +84,7 @@ During updates, the deferred value will "lag behin
This example assumes you use one of Suspense-enabled data sources:
-- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/advanced-features/react-18)
+- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/getting-started/react-essentials)
- Lazy-loading component code with [`lazy`](/reference/react/lazy)
[Learn more about Suspense and its limitations.](/reference/react/Suspense)
From 4e62b6b8684a8ab124d66c91729a4dc58b6fc351 Mon Sep 17 00:00:00 2001
From: jhonmike
Date: Wed, 31 May 2023 11:13:52 -0300
Subject: [PATCH 21/67] fix: conflict
---
src/content/reference/react-dom/components/progress.md | 5 -----
1 file changed, 5 deletions(-)
diff --git a/src/content/reference/react-dom/components/progress.md b/src/content/reference/react-dom/components/progress.md
index 1411106d3..53fc64a5d 100644
--- a/src/content/reference/react-dom/components/progress.md
+++ b/src/content/reference/react-dom/components/progress.md
@@ -34,13 +34,8 @@ Para exibir um indicador de progresso, renderize o componente [`` nati
Adicionalmente, `` suporta estas props:
-<<<<<<< HEAD
* [`max`](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/progress#attr-max): Um número. Especifica o `value` máximo. Seu valor padrão é `1`.
* [`value`](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/progress#attr-value): Um número entre `0` e `max`, ou `null` para progresso indeterminado. Especifica o quanto foi feito.
-=======
-* [`max`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#attr-max): A number. Specifies the maximum `value`. Defaults to `1`.
-* [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#attr-value): A number between `0` and `max`, or `null` for indeterminate progress. Specifies how much was done.
->>>>>>> 3364c93feb358a7d1ac2e8d8b0468c3e32214062
---
From 4184c0f5608ef80d6cec4e1c42dfa9c6f3c9ad92 Mon Sep 17 00:00:00 2001
From: J <124119483+escwxyz@users.noreply.github.com>
Date: Wed, 31 May 2023 16:15:21 +0200
Subject: [PATCH 22/67] Fix a missing word in useLayoutEffect (#6078)
---
src/content/reference/react/useLayoutEffect.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/content/reference/react/useLayoutEffect.md b/src/content/reference/react/useLayoutEffect.md
index d30ebbd16..5af3ec5a6 100644
--- a/src/content/reference/react/useLayoutEffect.md
+++ b/src/content/reference/react/useLayoutEffect.md
@@ -26,7 +26,7 @@ useLayoutEffect(setup, dependencies?)
### `useLayoutEffect(setup, dependencies?)` {/*useinsertioneffect*/}
-Call `useLayoutEffect` perform the layout measurements before the browser repaints the screen:
+Call `useLayoutEffect` to perform the layout measurements before the browser repaints the screen:
```js
import { useState, useRef, useLayoutEffect } from 'react';
From 288bde2765dffbf04d8fc055d1aeac900b004c5c Mon Sep 17 00:00:00 2001
From: Alexandre Costa
Date: Wed, 31 May 2023 11:19:54 -0300
Subject: [PATCH 23/67] Translates `responding-to-events` page (#684)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* translates responding-to-events page
* fix responding-to-events analytics translation
* Update src/content/learn/responding-to-events.md
Co-authored-by: Natã Pereira <57020127+natrodrigo@users.noreply.github.com>
* Update src/content/learn/responding-to-events.md
Co-authored-by: Natã Pereira <57020127+natrodrigo@users.noreply.github.com>
* Update src/content/learn/responding-to-events.md
Co-authored-by: Natã Pereira <57020127+natrodrigo@users.noreply.github.com>
* Update src/content/learn/responding-to-events.md
Co-authored-by: Natã Pereira <57020127+natrodrigo@users.noreply.github.com>
* Update src/content/learn/responding-to-events.md
Co-authored-by: Natã Pereira <57020127+natrodrigo@users.noreply.github.com>
* Update src/content/learn/responding-to-events.md
Co-authored-by: Natã Pereira <57020127+natrodrigo@users.noreply.github.com>
* Update src/content/learn/responding-to-events.md
Co-authored-by: Natã Pereira <57020127+natrodrigo@users.noreply.github.com>
* Update src/content/learn/responding-to-events.md
Co-authored-by: Natã Pereira <57020127+natrodrigo@users.noreply.github.com>
* Update src/content/learn/responding-to-events.md
Co-authored-by: Natã Pereira <57020127+natrodrigo@users.noreply.github.com>
* Update src/content/learn/responding-to-events.md
Co-authored-by: Natã Pereira <57020127+natrodrigo@users.noreply.github.com>
* Update src/content/learn/responding-to-events.md
Co-authored-by: Natã Pereira <57020127+natrodrigo@users.noreply.github.com>
* Update src/content/learn/responding-to-events.md
Co-authored-by: Natã Pereira <57020127+natrodrigo@users.noreply.github.com>
* Update src/content/learn/responding-to-events.md
Co-authored-by: Natã Pereira <57020127+natrodrigo@users.noreply.github.com>
* Update src/content/learn/responding-to-events.md
Co-authored-by: Natã Pereira <57020127+natrodrigo@users.noreply.github.com>
---------
Co-authored-by: Natã Pereira <57020127+natrodrigo@users.noreply.github.com>
---
src/content/learn/responding-to-events.md | 309 +++++++++++-----------
1 file changed, 154 insertions(+), 155 deletions(-)
diff --git a/src/content/learn/responding-to-events.md b/src/content/learn/responding-to-events.md
index 4450c4613..83b5439eb 100644
--- a/src/content/learn/responding-to-events.md
+++ b/src/content/learn/responding-to-events.md
@@ -1,24 +1,24 @@
---
-title: Responding to Events
+title: Respondendo a Eventos
---
-React lets you add *event handlers* to your JSX. Event handlers are your own functions that will be triggered in response to interactions like clicking, hovering, focusing form inputs, and so on.
+O React permite você adicionar *manipuladores de eventos* (event handlers) ao seu JSX. Os manipuladores de eventos são funções independentes que são acionadas em resposta a interações como clicar com o mouse, passar o cursor do mouse sobre um certo elemento, focar em campos de formulário, entre outros.
-* Different ways to write an event handler
-* How to pass event handling logic from a parent component
-* How events propagate and how to stop them
+* Diferentes maneiras de escrever um manipulador de eventos
+* Como herdar a lógica de manipulação de eventos de um componente pai
+* Como os eventos se propagam e como pará-los
-## Adding event handlers {/*adding-event-handlers*/}
+## Adicionando manipuladores de eventos {/*adding-event-handlers*/}
-To add an event handler, you will first define a function and then [pass it as a prop](/learn/passing-props-to-a-component) to the appropriate JSX tag. For example, here is a button that doesn't do anything yet:
+Para adicionar um manipulador de eventos, primeiro defina uma função e depois [passe-a como uma prop](/learn/passing-props-to-a-component) para o elemento JSX desejado. Por exemplo, aqui temos um botão que ainda não faz nada:
@@ -26,7 +26,7 @@ To add an event handler, you will first define a function and then [pass it as a
export default function Button() {
return (
- I don't do anything
+ Este botão não faz nada
);
}
@@ -34,23 +34,23 @@ export default function Button() {
-You can make it show a message when a user clicks by following these three steps:
+Seguindo esses três passos, você poderá fazer com que uma mensagem seja exibida quando um usuário clicar no botão:
-1. Declare a function called `handleClick` *inside* your `Button` component.
-2. Implement the logic inside that function (use `alert` to show the message).
-3. Add `onClick={handleClick}` to the `` JSX.
+1. Declare uma função chamada `handleClick` *dentro* do seu componente `Button`.
+2. Implemente a lógica dentro dessa função (utilize o método `alert` para exibir a mensagem).
+3. Adicione `onClick={handleClick}` ao JSX do elemento ``.
```js
export default function Button() {
function handleClick() {
- alert('You clicked me!');
+ alert('Você clicou no botão!');
}
return (
- Click me
+ Clique neste botão
);
}
@@ -62,77 +62,76 @@ button { margin-right: 10px; }
-You defined the `handleClick` function and then [passed it as a prop](/learn/passing-props-to-a-component) to ``. `handleClick` is an **event handler.** Event handler functions:
+Você definiu a função `handleClick` e depois [a passou como prop](/learn/passing-props-to-a-component) para o elmento ``. O `handleClick` é um **manipulador de eventos.** As funções de manipulador de eventos geralmente:
-* Are usually defined *inside* your components.
-* Have names that start with `handle`, followed by the name of the event.
+* São definidas *dentro* de seus componentes.
+* Tem nomes que começam com a palavra `handle`, seguida do nome do evento.
-By convention, it is common to name event handlers as `handle` followed by the event name. You'll often see `onClick={handleClick}`, `onMouseEnter={handleMouseEnter}`, and so on.
+Por convenção, é comum nomear manipuladores de eventos com a palavra `handle` seguida do nome do evento. Você verá frequentemente nomes como `onClick={handleClick}`, `onMouseEnter={handleMouseEnter}`, e assim por diante.
-Alternatively, you can define an event handler inline in the JSX:
+Se desejar, você pode definir um manipulador de eventos diretamente na prop da tag JSX:
```jsx
```
-Or, more concisely, using an arrow function:
+Ou, de forma mais concisa, usando uma arrow function:
```jsx
{
- alert('You clicked me!');
+ alert('Você clicou no botão!');
}}>
```
-All of these styles are equivalent. Inline event handlers are convenient for short functions.
+Todos esses estilos são equivalentes. Os manipuladores de eventos diretamente na prop são adequados para funções pequenas.
-Functions passed to event handlers must be passed, not called. For example:
+As funções passadas para os manipuladores de eventos devem ser passadas como referência, e não chamá-la diretamente. Por exemplo:
-| passing a function (correct) | calling a function (incorrect) |
-| -------------------------------- | ---------------------------------- |
-| `` | `` |
+| passando uma função como referência (correto) | chamando uma função (incorreto) |
+| --------------------------------------------------------- | ---------------------------------- |
+| `` | `` |
-The difference is subtle. In the first example, the `handleClick` function is passed as an `onClick` event handler. This tells React to remember it and only call your function when the user clicks the button.
+A diferença é sutil. No primeiro exemplo, a função `handleClick` é passada como um manipulador de eventos `onClick`. Isso diz ao React para lembrá-lo e apenas chamar sua função quando o usuário clicar no botão.
-In the second example, the `()` at the end of `handleClick()` fires the function *immediately* during [rendering](/learn/render-and-commit), without any clicks. This is because JavaScript inside the [JSX `{` and `}`](/learn/javascript-in-jsx-with-curly-braces) executes right away.
+No segundo exemplo, o `()` no final de `handleClick()` dispara a função *imediatamente* durante a [renderização](/learn/render-and-commit), sem nenhum clique. Isso ocorre porque o JavaScript dentro do [JSX `{` e `}`](/learn/javascript-in-jsx-with-curly-braces) é executado imediatamente.
-When you write code inline, the same pitfall presents itself in a different way:
+Quando você escreve código diretamente na prop, você pode cometer o mesmo erro de uma maneira diferente:
-| passing a function (correct) | calling a function (incorrect) |
-| --------------------------------------- | --------------------------------- |
-| ` alert('...')}>` | `` |
+| passando uma função como referência (correto) | chamando uma função (incorreto) |
+| -------------------------------------------------------- | --------------------------------- |
+| ` alert('...')}>` | `` |
-
-Passing inline code like this won't fire on click—it fires every time the component renders:
+Passar código diretamente na prop, como no exemplo abaixo, não dispara no clique - ele será disparado toda vez que o componente for renderizado:
```jsx
-// This alert fires when the component renders, not when clicked!
-
+// Este alerta é acionado quando o componente é renderizado, não quando clicado!
+
```
-If you want to define your event handler inline, wrap it in an anonymous function like so:
+Se você deseja definir seu manipulador de eventos diretamente na prop, envolva-o em uma função anônima da seguinte forma:
```jsx
- alert('You clicked me!')}>
+ alert('Você clicou em mim!')}>
```
-Rather than executing the code inside with every render, this creates a function to be called later.
+Em vez de executar o código dentro da prop `onClick` a cada renderização, isso cria uma função que será chamada posteriormente.
-In both cases, what you want to pass is a function:
+Em ambos os casos, o que você quer é passar uma função:
-* `` passes the `handleClick` function.
-* ` alert('...')}>` passes the `() => alert('...')` function.
+* `` passa a função `handleClick`.
+* ` alert('...')}>` passa a função `() => alert('...')`.
-[Read more about arrow functions.](https://javascript.info/arrow-functions-basics)
+[Leia mais sobre as arrow functions.](https://javascript.info/arrow-functions-basics)
-### Reading props in event handlers {/*reading-props-in-event-handlers*/}
+### Lendo props em manipuladores de eventos {/*reading-props-in-event-handlers*/}
-Because event handlers are declared inside of a component, they have access to the component's props. Here is a button that, when clicked, shows an alert with its `message` prop:
+Como os manipuladores de eventos são declarados dentro de um componente, eles têm acesso às props do componente. No examplo abaixo, temos um botão que, ao ser clicado, exibe um alerta com a prop `message`:
@@ -148,11 +147,11 @@ function AlertButton({ message, children }) {
export default function Toolbar() {
return (
-
- Play Movie
+
+ Reproduzir Filme
-
- Upload Image
+
+ Enviar Imagem
);
@@ -165,13 +164,13 @@ button { margin-right: 10px; }
-This lets these two buttons show different messages. Try changing the messages passed to them.
+Isso permite que esses dois botões exibam mensagens diferentes. Tente alterar as mensagens passadas para eles.
-### Passing event handlers as props {/*passing-event-handlers-as-props*/}
+### Passando manipuladores de eventos como props {/*passing-event-handlers-as-props*/}
-Often you'll want the parent component to specify a child's event handler. Consider buttons: depending on where you're using a `Button` component, you might want to execute a different function—perhaps one plays a movie and another uploads an image.
+É comum que o componente pai defina o manipulador de eventos de um componente filho. Por exemplo, considere os botões: dependendo do contexto em que o componente `Button` é usado, pode ser necessário executar funções diferentes, talvez um reproduza um filme e outro faça o upload de uma imagem.
-To do this, pass a prop the component receives from its parent as the event handler like so:
+Para fazer isso, passe uma prop que o componente recebe de seu pai como o manipulador de eventos da seguinte forma:
@@ -186,20 +185,20 @@ function Button({ onClick, children }) {
function PlayButton({ movieName }) {
function handlePlayClick() {
- alert(`Playing ${movieName}!`);
+ alert(`Reproduzindo ${movieName}!`);
}
return (
- Play "{movieName}"
+ Reproduzir "{movieName}"
);
}
function UploadButton() {
return (
- alert('Uploading!')}>
- Upload Image
+ alert('Enviando!')}>
+ Enviar Imagem
);
}
@@ -207,7 +206,7 @@ function UploadButton() {
export default function Toolbar() {
return (
);
@@ -220,22 +219,22 @@ button { margin-right: 10px; }
-Here, the `Toolbar` component renders a `PlayButton` and an `UploadButton`:
+Aqui, o componente `Toolbar` renderiza o componente `PlayButton` e o componente`UploadButton`:
-- `PlayButton` passes `handlePlayClick` as the `onClick` prop to the `Button` inside.
-- `UploadButton` passes `() => alert('Uploading!')` as the `onClick` prop to the `Button` inside.
+- O `PlayButton` passa o `handlePlayClick` como prop `onClick` para o `Button` dentro dele.
+- O `UploadButton` passa `() => alert('Enviando!')` como a prop `onClick` para o `Button` dentro.
-Finally, your `Button` component accepts a prop called `onClick`. It passes that prop directly to the built-in browser `` with `onClick={onClick}`. This tells React to call the passed function on click.
+Por fim, seu componente `Button` aceita uma prop chamada `onClick`. Ele passa essa prop diretamente para o elemento `` nativo do navegador usando `onClick={onClick}`. Isso diz ao React para chamar a função quando o botão for clicado.
-If you use a [design system](https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969), it's common for components like buttons to contain styling but not specify behavior. Instead, components like `PlayButton` and `UploadButton` will pass event handlers down.
+Se você usa um [design system](https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969), é comum que componentes, como botões, contenham estilo mas não especifiquem o comportamento. Em vez disso, componentes como `PlayButton` e `UploadButton` passarão os manipuladores de eventos para baixo.
-### Naming event handler props {/*naming-event-handler-props*/}
+### Nomeando props de manipuladores de eventos {/*naming-event-handler-props*/}
-Built-in components like `` and `` only support [browser event names](/reference/react-dom/components/common#common-props) like `onClick`. However, when you're building your own components, you can name their event handler props any way that you like.
+Os componentes nativos, como `
` e ``, suportam apenas [os nomes de eventos do navegador](/reference/react-dom/components/common#common-props), tais como `onClick`. No entanto, quando você está criando seus próprios componentes, você pode nomear os manipuladores de eventos da forma que preferir.
-By convention, event handler props should start with `on`, followed by a capital letter.
+Por convenção, as props dos manipuladores de eventos devem começar com o termo `on`, seguido por uma letra maiúscula.
-For example, the `Button` component's `onClick` prop could have been called `onSmash`:
+Por exemplo, a prop `onClick` do componente `Button` poderia ter sido chamada de `onSmash`:
@@ -251,11 +250,11 @@ function Button({ onSmash, children }) {
export default function App() {
return (
- alert('Playing!')}>
- Play Movie
+ alert('Reproduzindo!')}>
+ Reproduzir Filme
- alert('Uploading!')}>
- Upload Image
+ alert('Enviando!')}>
+ Enviar Imagem
);
@@ -268,9 +267,9 @@ button { margin-right: 10px; }
-In this example, `
` shows that the browser `` (lowercase) still needs a prop called `onClick`, but the prop name received by your custom `Button` component is up to you!
+Neste exemplo, `` mostra que a tag `` do navegador (minúsculo) ainda precisa de uma prop chamada `onClick`. No entanto, é você quem escolhe o nome da prop recebida pelo seu componente personalizado `Button`!
-When your component supports multiple interactions, you might name event handler props for app-specific concepts. For example, this `Toolbar` component receives `onPlayMovie` and `onUploadImage` event handlers:
+Quando seu componente oferece suporte a várias interações, você pode nomear as props dos manipuladores de eventos com base em conceitos específicos da sua aplicação. Por exemplo, o componente `Toolbar` pode receber os manipuladores de eventos `onPlayMovie` e `onUploadImage`:
@@ -278,8 +277,8 @@ When your component supports multiple interactions, you might name event handler
export default function App() {
return (
alert('Playing!')}
- onUploadImage={() => alert('Uploading!')}
+ onPlayMovie={() => alert('Reproduzindo!')}
+ onUploadImage={() => alert('Enviando!')}
/>
);
}
@@ -288,10 +287,10 @@ function Toolbar({ onPlayMovie, onUploadImage }) {
return (
- Play Movie
+ Reproduzir Filme
- Upload Image
+ Enviar Imagem
);
@@ -312,19 +311,19 @@ button { margin-right: 10px; }
-Notice how the `App` component does not need to know *what* `Toolbar` will do with `onPlayMovie` or `onUploadImage`. That's an implementation detail of the `Toolbar`. Here, `Toolbar` passes them down as `onClick` handlers to its `Button`s, but it could later also trigger them on a keyboard shortcut. Naming props after app-specific interactions like `onPlayMovie` gives you the flexibility to change how they're used later.
-
+Note como o componente `App` não precisa saber *o que* o componente `Toolbar` fará com o `onPlayMovie` ou `onUploadImage`. Isso é um detalhe de implementação da `Toolbar`. Aqui, a `Toolbar` os passa como manipuladores `onClick` para seus componentes `Button`, mas posteriormente pode acioná-los também em um atalho de teclado. Nomear as props com base em interações específicas da aplicação, como `onPlayMovie`, oferece a flexibilidade para alterar como elas são usadas no futuro.
+
-Make sure that you use the appropriate HTML tags for your event handlers. For example, to handle clicks, use [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) instead of ``. Using a real browser `
` enables built-in browser behaviors like keyboard navigation. If you don't like the default browser styling of a button and want to make it look more like a link or a different UI element, you can achieve it with CSS. [Learn more about writing accessible markup.](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML)
+É importante utilizar as tags HTML apropriadas para seus manipuladores de eventos. Por exemplo, para lidar com cliques, use [``](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/button) em vez de ``. Ao utilizar a tag `
`, você se beneficia dos comportamentos nativos do navegador, como a navegação pelo teclado. Se você não gosta do comportamento padrão do navegador de um botão e deseja torná-lo mais parecido com um link ou um elemento diferente, você pode alcançar isso com CSS. [Saiba mais sobre como escrever marcação acessível.](https://developer.mozilla.org/pt-BR/docs/Learn/Accessibility/HTML)
-## Event propagation {/*event-propagation*/}
+## Propagação de eventos {/*event-propagation*/}
-Event handlers will also catch events from any children your component might have. We say that an event "bubbles" or "propagates" up the tree: it starts with where the event happened, and then goes up the tree.
+Os manipuladores de eventos também capturam eventos de quaisquer elementos filhos que o seu componente possa ter. Dizemos que um evento "borbulha" ou "se propaga" pela árvore: ele começa no local onde o evento ocorreu e, em seguida, se propaga pela árvore.
-This `` contains two buttons. Both the `
` *and* each button have their own `onClick` handlers. Which handlers do you think will fire when you click a button?
+Esta `
` contém dois botões, sendo que tanto a `
` quanto cada botão tem seu próprio manipulador `onClick`. Você sabe dizer quais manipuladores serão acionados quando clicar em um dos botões?
@@ -332,13 +331,13 @@ This `` contains two buttons. Both the `
` *and* each button have their
export default function Toolbar() {
return (
{
- alert('You clicked on the toolbar!');
+ alert('Você clicou na toolbar!');
}}>
- alert('Playing!')}>
- Play Movie
+ alert('Reproduzindo!')}>
+ Reproduzir Filme
- alert('Uploading!')}>
- Upload Image
+ alert('Enviando!')}>
+ Enviar Imagem
);
@@ -355,19 +354,19 @@ button { margin: 5px; }
-If you click on either button, its `onClick` will run first, followed by the parent `
`'s `onClick`. So two messages will appear. If you click the toolbar itself, only the parent `
`'s `onClick` will run.
+Se você clicar em qualquer um dos botões, o `onClick` do botão clicado será executado primeiro e, em seguida, o `onClick` da `
` pai será executado. Como resultado, duas mensagens serão exibidas. Se você clicar na toolbar, apenas o `onClick` da `
` pai será executado.
-All events propagate in React except `onScroll`, which only works on the JSX tag you attach it to.
+Todos os eventos se propagam no React, exceto `onScroll`, que funciona apenas na tag JSX à qual foi adicionado.
-### Stopping propagation {/*stopping-propagation*/}
+### Interrompendo a propagação {/*stopping-propagation*/}
-Event handlers receive an **event object** as their only argument. By convention, it's usually called `e`, which stands for "event". You can use this object to read information about the event.
+Os manipuladores de eventos recebem um **event object** como único argumento. Por convenção, ele é normalmente chamado de `e`, que significa "event", em inglês. Você pode usar esse objeto para obter informações sobre o evento.
-That event object also lets you stop the propagation. If you want to prevent an event from reaching parent components, you need to call `e.stopPropagation()` like this `Button` component does:
+Esse event object também permite que você interrompa a propagação. Caso deseje que um evento não chegue aos componentes pai, você precisa chamar `e.stopPropagation()` como no exemplo do componente `Button` abaixo:
@@ -386,13 +385,13 @@ function Button({ onClick, children }) {
export default function Toolbar() {
return (
{
- alert('You clicked on the toolbar!');
+ alert('Você clicou na toolbar!');
}}>
- alert('Playing!')}>
- Play Movie
+ alert('Reproduzindo!')}>
+ Reproduzir Filme
- alert('Uploading!')}>
- Upload Image
+ alert('Enviando!')}>
+ Enviar Imagem
);
@@ -409,43 +408,43 @@ button { margin: 5px; }
-When you click on a button:
+Ao clicar em um dos botões:
-1. React calls the `onClick` handler passed to `
`.
-2. That handler, defined in `Button`, does the following:
- * Calls `e.stopPropagation()`, preventing the event from bubbling further.
- * Calls the `onClick` function, which is a prop passed from the `Toolbar` component.
-3. That function, defined in the `Toolbar` component, displays the button's own alert.
-4. Since the propagation was stopped, the parent ``'s `onClick` handler does *not* run.
+1. O React chama o manipulador `onClick` passado para `
`.
+2. Esse manipulador, definido em `Button`, faz o seguinte:
+ * Chama `e.stopPropagation()`, que impede que o evento continue se propagando.
+ * Chama a função `onClick`, que é uma propriedade passada do componente `Toolbar`.
+3. Essa função, definida no componente `Toolbar`, exibe o alerta que foi definido no botão clicado.
+4. Como a propagação foi interrompida, o manipulador `onClick` da `` pai *não* é executado.
-As a result of `e.stopPropagation()`, clicking on the buttons now only shows a single alert (from the `
`) rather than the two of them (from the `` and the parent toolbar ``). Clicking a button is not the same thing as clicking the surrounding toolbar, so stopping the propagation makes sense for this UI.
+Ao usar `e.stopPropagation()`, agora somente um alerta (da tag `
`) é exibido quando os botões são clicados, em vez de dois alertas (da tag `` e outro da `` do toolbar). Clicar em um botão não é a mesma coisa que clicar na `div` da toolbar que envolve os botões, por isso, interromper a propagação faz sentido no caso dessa UI.
-#### Capture phase events {/*capture-phase-events*/}
+#### Capturar eventos de cada fase {/*capture-phase-events*/}
-In rare cases, you might need to catch all events on child elements, *even if they stopped propagation*. For example, maybe you want to log every click to analytics, regardless of the propagation logic. You can do this by adding `Capture` at the end of the event name:
+Em casos raros, pode ser necessário capturar todos os eventos em elementos filhos, *mesmo que eles tenham interrompido a propagação*. Por exemplo, talvez você queira coletar cada clique para coleta de dados, independentemente da lógica de propagação. Você pode fazer isso adicionando `Capture` no final do nome do evento:
```js
- { /* this runs first */ }}>
+
{ /* Essa função é executada primeiro */ }}>
e.stopPropagation()} />
e.stopPropagation()} />
```
-Each event propagates in three phases:
+Cada evento se propaga em três fases
-1. It travels down, calling all `onClickCapture` handlers.
-2. It runs the clicked element's `onClick` handler.
-3. It travels upwards, calling all `onClick` handlers.
+1. Ele se propaga para baixo, chamando todos os manipuladores `onClickCapture`.
+2. Ele executa o manipulador `onClick` do elemento clicado.
+3. Ele se propaga para cima, chamando todos os manipuladores `onClick`.
-Capture events are useful for code like routers or analytics, but you probably won't use them in app code.
+Os eventos de captura são úteis para códigos como roteadores ou análises, mas você provavelmente não os usará no código de uma aplicação.
-### Passing handlers as alternative to propagation {/*passing-handlers-as-alternative-to-propagation*/}
+### Passando manipuladores como alternativa à propagação {/*passing-handlers-as-alternative-to-propagation*/}
-Notice how this click handler runs a line of code _and then_ calls the `onClick` prop passed by the parent:
+Observe como esse manipulador de cliques executa uma linha de código _e depois_ chama a prop `onClick` passada pelo pai:
```js {4,5}
function Button({ onClick, children }) {
@@ -460,22 +459,22 @@ function Button({ onClick, children }) {
}
```
-You could add more code to this handler before calling the parent `onClick` event handler, too. This pattern provides an *alternative* to propagation. It lets the child component handle the event, while also letting the parent component specify some additional behavior. Unlike propagation, it's not automatic. But the benefit of this pattern is that you can clearly follow the whole chain of code that executes as a result of some event.
+Você também pode adicionar mais código a esse manipulador antes de chamar o manipulador de eventos `onClick` do elemento pai. Esse padrão fornece uma *alternativa* à propagação. Ele permite que o componente filho manipule o evento, mas ainda permitindo que o componente pai especifique algum comportamento adicional. Diferente da propagação, esse padrão não é automático, mas a sua vantagem é que você pode seguir claramente toda a cadeia de código executada como resultado de algum evento.
-If you rely on propagation and it's difficult to trace which handlers execute and why, try this approach instead.
+Caso você esteja dependendo da propagação de eventos e tenha dificuldade em rastrear quais manipuladores estão sendo executados e por quê, tente essa abordagem.
-### Preventing default behavior {/*preventing-default-behavior*/}
+### Removendo comportamento padrão {/*preventing-default-behavior*/}
-Some browser events have default behavior associated with them. For example, a `
);
}
@@ -679,9 +678,9 @@ export default function App() {
-First, you need to add the event handler, like ``.
+Primeiro, você precisa adicionar o manipulador de eventos, como por exemplo: ``.
-However, this introduces the problem of the incrementing counter. If `onChangeColor` does not do this, as your colleague insists, then the problem is that this event propagates up, and some handler above does it. To solve this problem, you need to stop the propagation. But don't forget that you should still call `onChangeColor`.
+No entanto, surge o problema que incremeta contador. Se o seu colega está certo e o `onChangeColor` não deveria incrementar o contador, então o problema é que esse evento se propaga, e algum manipulador acima está realizando essa operação. Para resolver esse problema, você precisa parar a propagação. Mas não se esqueça que você ainda deve chamar o `onChangeColor`.
From 077c26aa94c03b9bcd6b702f883e2d31905bfef0 Mon Sep 17 00:00:00 2001
From: Eduardo Pereira
Date: Wed, 31 May 2023 11:20:10 -0300
Subject: [PATCH 24/67] Translate updating-objects-in-state.md (#679)
* Translate updating-objects-in-state.md
* Apply suggestions
---------
Co-authored-by: Eduardo Pereira
---
.../learn/updating-objects-in-state.md | 304 +++++++++---------
1 file changed, 151 insertions(+), 153 deletions(-)
diff --git a/src/content/learn/updating-objects-in-state.md b/src/content/learn/updating-objects-in-state.md
index 9289f2454..a32d01cde 100644
--- a/src/content/learn/updating-objects-in-state.md
+++ b/src/content/learn/updating-objects-in-state.md
@@ -1,57 +1,58 @@
---
-title: Updating Objects in State
+title: Atualizando Objetos no State
---
-State can hold any kind of JavaScript value, including objects. But you shouldn't change objects that you hold in the React state directly. Instead, when you want to update an object, you need to create a new one (or make a copy of an existing one), and then set the state to use that copy.
+O state pode conter qualquer tipo de valor JavaScript, inclusive objetos. Mas você não deve alterar diretamente os objetos que mantém no state do React. Em vez disso, quando quiser atualizar um objeto, você precisa criar um novo (ou fazer uma cópia de um existente) e, em seguida, definir o state para usar essa cópia.
-- How to correctly update an object in React state
-- How to update a nested object without mutating it
-- What immutability is, and how not to break it
-- How to make object copying less repetitive with Immer
+- Como atualizar corretamente um objeto no state do React
+- Como atualizar um objeto aninhado sem mutá-lo
+- O que é imutabilidade e como não quebrá-la
+- Como tornar a cópia de objetos menos repetitiva com o Immer
-## What's a mutation? {/*whats-a-mutation*/}
+## O que é uma mutação? {/*whats-a-mutation*/}
-You can store any kind of JavaScript value in state.
+Você pode armazenar qualquer tipo de valor JavaScript no state.
```js
const [x, setX] = useState(0);
```
-So far you've been working with numbers, strings, and booleans. These kinds of JavaScript values are "immutable", meaning unchangeable or "read-only". You can trigger a re-render to _replace_ a value:
+Até agora, você trabalhou com números, strings e booleanos. Esses tipos de valores JavaScript são "imutáveis", ou seja, inalteráveis ou "somente leitura". Você pode acionar uma nova renderização para _substituir_ um valor:
+
```js
setX(5);
```
-The `x` state changed from `0` to `5`, but the _number `0` itself_ did not change. It's not possible to make any changes to the built-in primitive values like numbers, strings, and booleans in JavaScript.
+O state `x` foi alterado de `0` para `5`, mas o _número `0` em si_ não foi alterado. Não é possível fazer nenhuma alteração nos valores primitivos internos, como números, strings e booleanos, no JavaScript.
-Now consider an object in state:
+Agora, considere um objeto no state:
```js
const [position, setPosition] = useState({ x: 0, y: 0 });
```
-Technically, it is possible to change the contents of _the object itself_. **This is called a mutation:**
+Tecnicamente, é possível alterar o conteúdo _do próprio objeto_. **Isso é chamado de mutação:**
```js
position.x = 5;
```
-However, although objects in React state are technically mutable, you should treat them **as if** they were immutable--like numbers, booleans, and strings. Instead of mutating them, you should always replace them.
+No entanto, embora os objetos no state do React sejam tecnicamente mutáveis, você deve tratá-los **como se** fossem imutáveis -- como números, booleanos e strings. Em vez de mutá-los, você deve sempre substituí-los.
-## Treat state as read-only {/*treat-state-as-read-only*/}
+## Trate o state como somente leitura {/*treat-state-as-read-only*/}
-In other words, you should **treat any JavaScript object that you put into state as read-only.**
+Em outras palavras, você deve **tratar qualquer objeto JavaScript que você colocar no state como somente leitura**.
-This example holds an object in state to represent the current pointer position. The red dot is supposed to move when you touch or move the cursor over the preview area. But the dot stays in the initial position:
+Este exemplo mantém um objeto no state para representar a posição atual do ponteiro. O ponto vermelho deve se mover quando você tocar ou mover o cursor sobre a área de visualização. Mas o ponto permanece na posição inicial:
@@ -94,7 +95,7 @@ body { margin: 0; padding: 0; height: 250px; }
-The problem is with this bit of code.
+O problema é com este trecho de código.
```js
onPointerMove={e => {
@@ -103,9 +104,9 @@ onPointerMove={e => {
}}
```
-This code modifies the object assigned to `position` from [the previous render.](/learn/state-as-a-snapshot#rendering-takes-a-snapshot-in-time) But without using the state setting function, React has no idea that object has changed. So React does not do anything in response. It's like trying to change the order after you've already eaten the meal. While mutating state can work in some cases, we don't recommend it. You should treat the state value you have access to in a render as read-only.
+Esse código modifica o objeto atribuído à `position` da [renderização anterior.](/learn/state-as-a-snapshot#rendering-takes-a-snapshot-in-time) Mas sem usar a função de configuração de state, o React não tem ideia de que o objeto foi alterado. Portanto, o React não faz nada em resposta. É como tentar alterar o pedido depois que você já comeu a refeição. Embora a mutação de state possa funcionar em alguns casos, não a recomendamos. Você deve tratar o valor de state ao qual tem acesso em uma renderização como somente leitura.
-To actually [trigger a re-render](/learn/state-as-a-snapshot#setting-state-triggers-renders) in this case, **create a *new* object and pass it to the state setting function:**
+Para realmente [acionar uma nova renderização](/learn/state-as-a-snapshot#setting-state-triggers-renders) nesse caso, **crie um objeto *novo* e passe-o para a função de configuração de state:**
```js
onPointerMove={e => {
@@ -116,12 +117,12 @@ onPointerMove={e => {
}}
```
-With `setPosition`, you're telling React:
+Com `setPosition`, você está dizendo ao React:
-* Replace `position` with this new object
-* And render this component again
+* Substitua `position` por este novo objeto
+* E renderize esse componente novamente
-Notice how the red dot now follows your pointer when you touch or hover over the preview area:
+Observe como o ponto vermelho agora segue seu ponteiro quando você toca ou passa o mouse sobre a área de visualização:
@@ -168,16 +169,16 @@ body { margin: 0; padding: 0; height: 250px; }
-#### Local mutation is fine {/*local-mutation-is-fine*/}
+#### Mutação local não tem problema {/*local-mutation-is-fine*/}
-Code like this is a problem because it modifies an *existing* object in state:
+Um código como esse é um problema porque modifica um objeto *existente* no state:
```js
position.x = e.clientX;
position.y = e.clientY;
```
-But code like this is **absolutely fine** because you're mutating a fresh object you have *just created*:
+Mas um código como esse é **absolutamente aceitável** porque você está alterando um objeto novo que *acabou de criar*:
```js
const nextPosition = {};
@@ -186,7 +187,7 @@ nextPosition.y = e.clientY;
setPosition(nextPosition);
```
-In fact, it is completely equivalent to writing this:
+Na verdade, é completamente equivalente a escrever isto:
```js
setPosition({
@@ -195,15 +196,15 @@ setPosition({
});
```
-Mutation is only a problem when you change *existing* objects that are already in state. Mutating an object you've just created is okay because *no other code references it yet.* Changing it isn't going to accidentally impact something that depends on it. This is called a "local mutation". You can even do local mutation [while rendering.](/learn/keeping-components-pure#local-mutation-your-components-little-secret) Very convenient and completely okay!
+A mutação só é um problema quando você altera objetos *existentes* que já estão no state. A mutação de um objeto que você acabou de criar não tem problema porque *nenhum outro código faz referência a ele ainda*. Alterá-lo não afetará acidentalmente algo que depende dele. Isso é chamado de "mutação local". Você pode até mesmo fazer a mutação local [durante a renderização.](/learn/keeping-components-pure#local-mutation-your-components-little-secret) Muito conveniente e completamente aceitável!
-## Copying objects with the spread syntax {/*copying-objects-with-the-spread-syntax*/}
+## Copiando objetos com a sintaxe de espalhamento {/*copying-objects-with-the-spread-syntax*/}
-In the previous example, the `position` object is always created fresh from the current cursor position. But often, you will want to include *existing* data as a part of the new object you're creating. For example, you may want to update *only one* field in a form, but keep the previous values for all other fields.
+No exemplo anterior, o objeto `position` é sempre criado a partir da posição atual do cursor. Mas, muitas vezes, você desejará incluir dados *existentes* como parte do novo objeto que está criando. Por exemplo, talvez você queira atualizar *apenas um* campo em um formulário, mas manter os valores anteriores de todos os outros campos.
-These input fields don't work because the `onChange` handlers mutate the state:
+Esses campos de entrada não funcionam porque os manipuladores `onChange` alteram o state:
@@ -232,21 +233,21 @@ export default function Form() {
return (
<>
- First name:
+ Nome:
- Last name:
+ Sobrenome:
- Email:
+ E-mail:
-For example, this line mutates the state from a past render:
+Por exemplo, esta linha altera o state de uma renderização anterior:
```js
person.firstName = e.target.value;
```
-
-The reliable way to get the behavior you're looking for is to create a new object and pass it to `setPerson`. But here, you want to also **copy the existing data into it** because only one of the fields has changed:
+A maneira confiável de obter o comportamento que você está procurando é criar um novo objeto e passá-lo para `setPerson`. Mas aqui, você também deseja **copiar os dados existentes para ele** porque apenas um dos campos foi alterado:
```js
setPerson({
- firstName: e.target.value, // New first name from the input
+ firstName: e.target.value, // Novo nome a partir da entrada
lastName: person.lastName,
email: person.email
});
```
-You can use the `...` [object spread](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_object_literals) syntax so that you don't need to copy every property separately.
+Você pode usar a [sintaxe de espalhamento](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/Spread_syntax) `...` para não precisar copiar cada propriedade separadamente.
```js
setPerson({
- ...person, // Copy the old fields
- firstName: e.target.value // But override this one
+ ...person, // Copie os campos antigos
+ firstName: e.target.value // Mas substitua esse
});
```
-Now the form works!
+Agora o formulário funciona!
-Notice how you didn't declare a separate state variable for each input field. For large forms, keeping all data grouped in an object is very convenient--as long as you update it correctly!
+Observe como você não declarou uma variável de state separada para cada campo de entrada. Para formulários grandes, manter todos os dados agrupados em um objeto é muito conveniente -- desde que você os atualize corretamente!
@@ -334,21 +334,21 @@ export default function Form() {
return (
<>
- First name:
+ Nome:
- Last name:
+ Sobrenome:
- Email:
+ E-mail:
-Note that the `...` spread syntax is "shallow"--it only copies things one level deep. This makes it fast, but it also means that if you want to update a nested property, you'll have to use it more than once.
+Observe que a sintaxe de espalhamento `...` é "rasa" -- ela copia apenas um nível de profundidade. Isso a torna rápida, mas também significa que, se você quiser atualizar uma propriedade aninhada, terá de usá-la mais de uma vez.
-#### Using a single event handler for multiple fields {/*using-a-single-event-handler-for-multiple-fields*/}
+#### Usando um único manipulador de eventos para vários campos {/*using-a-single-event-handler-for-multiple-fields*/}
-You can also use the `[` and `]` braces inside your object definition to specify a property with dynamic name. Here is the same example, but with a single event handler instead of three different ones:
+Você também pode usar as chaves `[` e `]` dentro da definição do objeto para especificar uma propriedade com nome dinâmico. Aqui está o mesmo exemplo, mas com um único manipulador de eventos em vez de três diferentes:
@@ -401,7 +401,7 @@ export default function Form() {
return (
<>
- First name:
+ Nome:
- Last name:
+ Sobrenome:
- Email:
+ E-mail:
-Here, `e.target.name` refers to the `name` property given to the ` ` DOM element.
+Aqui, `e.target.name` refere-se à propriedade `name` fornecida ao elemento do DOM ` `.
-## Updating a nested object {/*updating-a-nested-object*/}
+## Atualizando um objeto aninhado {/*updating-a-nested-object*/}
-Consider a nested object structure like this:
+Considere uma estrutura de objetos aninhados como esta:
```js
const [person, setPerson] = useState({
name: 'Niki de Saint Phalle',
artwork: {
title: 'Blue Nana',
- city: 'Hamburg',
+ city: 'Hamburgo',
image: 'https://i.imgur.com/Sd1AgUOm.jpg',
}
});
```
-
-If you wanted to update `person.artwork.city`, it's clear how to do it with mutation:
+Se você quisesse atualizar `person.artwork.city`, está claro como fazer isso com a mutação:
```js
-person.artwork.city = 'New Delhi';
+person.artwork.city = 'Nova Deli';
```
-But in React, you treat state as immutable! In order to change `city`, you would first need to produce the new `artwork` object (pre-populated with data from the previous one), and then produce the new `person` object which points at the new `artwork`:
+Mas no React, você trata o state como imutável! Para alterar `city`, você precisaria primeiro produzir o novo objeto `artwork` (pré-preenchido com os dados do anterior) e, em seguida, produzir o novo objeto `person` que aponta para o novo `artwork`:
```js
-const nextArtwork = { ...person.artwork, city: 'New Delhi' };
+const nextArtwork = { ...person.artwork, city: 'Nova Deli' };
const nextPerson = { ...person, artwork: nextArtwork };
setPerson(nextPerson);
```
-Or, written as a single function call:
+Ou, escrito como uma única chamada de função:
```js
setPerson({
- ...person, // Copy other fields
- artwork: { // but replace the artwork
- ...person.artwork, // with the same one
- city: 'New Delhi' // but in New Delhi!
+ ...person, // Copie os outros campos
+ artwork: { // mas substitua artwork
+ ...person.artwork, // pelo mesmo
+ city: 'Nova Deli' // mas em Nova Deli!
}
});
```
-This gets a bit wordy, but it works fine for many cases:
+Isto fica um pouco verboso, mas funciona bem em muitos casos:
@@ -498,7 +497,7 @@ export default function Form() {
name: 'Niki de Saint Phalle',
artwork: {
title: 'Blue Nana',
- city: 'Hamburg',
+ city: 'Hamburgo',
image: 'https://i.imgur.com/Sd1AgUOm.jpg',
}
});
@@ -543,28 +542,28 @@ export default function Form() {
return (
<>
- Name:
+ Nome:
- Title:
+ Título:
- City:
+ Cidade:
- Image:
+ Imagem:
{person.artwork.title}
- {' by '}
+ {' por '}
{person.name}
- (located in {person.artwork.city})
+ (localizada em {person.artwork.city})
-#### Objects are not really nested {/*objects-are-not-really-nested*/}
+#### Objetos não são realmente aninhados {/*objects-are-not-really-nested*/}
-An object like this appears "nested" in code:
+Um objeto como este parece "aninhado" no código:
```js
let obj = {
name: 'Niki de Saint Phalle',
artwork: {
title: 'Blue Nana',
- city: 'Hamburg',
+ city: 'Hamburgo',
image: 'https://i.imgur.com/Sd1AgUOm.jpg',
}
};
```
-However, "nesting" is an inaccurate way to think about how objects behave. When the code executes, there is no such thing as a "nested" object. You are really looking at two different objects:
+No entanto, o "aninhamento" é uma maneira imprecisa de pensar sobre como os objetos se comportam. Quando o código é executado, não existe um objeto "aninhado". Na verdade, você está olhando para dois objetos diferentes:
```js
let obj1 = {
title: 'Blue Nana',
- city: 'Hamburg',
+ city: 'Hamburgo',
image: 'https://i.imgur.com/Sd1AgUOm.jpg',
};
@@ -625,13 +624,12 @@ let obj2 = {
artwork: obj1
};
```
-
-The `obj1` object is not "inside" `obj2`. For example, `obj3` could "point" at `obj1` too:
+O objeto `obj1` não está "dentro" do `obj2`. Por exemplo, o `obj3` também poderia "apontar" para o `obj1`:
```js
let obj1 = {
title: 'Blue Nana',
- city: 'Hamburg',
+ city: 'Hamburgo',
image: 'https://i.imgur.com/Sd1AgUOm.jpg',
};
@@ -646,13 +644,13 @@ let obj3 = {
};
```
-If you were to mutate `obj3.artwork.city`, it would affect both `obj2.artwork.city` and `obj1.city`. This is because `obj3.artwork`, `obj2.artwork`, and `obj1` are the same object. This is difficult to see when you think of objects as "nested". Instead, they are separate objects "pointing" at each other with properties.
+Se você fizesse uma mutação em `obj3.artwork.city`, isso afetaria tanto `obj2.artwork.city` quanto `obj1.city`. Isso ocorre porque `obj3.artwork`, `obj2.artwork` e `obj1` são o mesmo objeto. Isso é difícil de perceber quando você pensa em objetos como "aninhados". Em vez disso, eles são objetos separados "apontando" uns para os outros com propriedades.
-### Write concise update logic with Immer {/*write-concise-update-logic-with-immer*/}
+### Escreva uma lógica de atualização concisa com Immer {/*write-concise-update-logic-with-immer*/}
-If your state is deeply nested, you might want to consider [flattening it.](/learn/choosing-the-state-structure#avoid-deeply-nested-state) But, if you don't want to change your state structure, you might prefer a shortcut to nested spreads. [Immer](https://github.com/immerjs/use-immer) is a popular library that lets you write using the convenient but mutating syntax and takes care of producing the copies for you. With Immer, the code you write looks like you are "breaking the rules" and mutating an object:
+Se o seu state estiver muito aninhado, talvez você deva considerar [achatá-lo](/learn/choosing-the-state-structure#avoid-deeply-nested-state). Mas, se você não quiser alterar sua estrutura de estado, talvez prefira um atalho para espalhamentos aninhados. [Immer](https://github.com/immerjs/use-immer) é uma biblioteca popular que permite que você escreva usando a sintaxe conveniente, mas mutante, e se encarrega de produzir as cópias para você. Com a Immer, o código que você escreve parece que está "quebrando as regras" e mutando um objeto:
```js
updatePerson(draft => {
@@ -660,22 +658,22 @@ updatePerson(draft => {
});
```
-But unlike a regular mutation, it doesn't overwrite the past state!
+Mas, diferentemente de uma mutação normal, ela não sobrescreve o estado anterior!
-#### How does Immer work? {/*how-does-immer-work*/}
+#### Como a Immer funciona? {/*how-does-immer-work*/}
-The `draft` provided by Immer is a special type of object, called a [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy), that "records" what you do with it. This is why you can mutate it freely as much as you like! Under the hood, Immer figures out which parts of the `draft` have been changed, and produces a completely new object that contains your edits.
+O `draft` fornecido pela Immer é um tipo especial de objeto, chamado de [Proxy](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Proxy), que "registra" o que você faz com ele. É por isso que você pode mutá-lo livremente o quanto quiser! Por baixo dos panos, a Immer descobre quais partes do `draft` foram alteradas e produz um objeto completamente novo que contém suas modificações.
-To try Immer:
+Para experimentar a Immer:
-1. Run `npm install use-immer` to add Immer as a dependency
-2. Then replace `import { useState } from 'react'` with `import { useImmer } from 'use-immer'`
+1. Execute `npm install use-immer` para adicionar a Immer como uma dependência
+2. Em seguida, substitua `import { useState } from 'react'` por `import { useImmer } from 'use-immer'`
-Here is the above example converted to Immer:
+Aqui está o exemplo acima convertido para Immer:
@@ -687,7 +685,7 @@ export default function Form() {
name: 'Niki de Saint Phalle',
artwork: {
title: 'Blue Nana',
- city: 'Hamburg',
+ city: 'Hamburgo',
image: 'https://i.imgur.com/Sd1AgUOm.jpg',
}
});
@@ -719,28 +717,28 @@ export default function Form() {
return (
<>
- Name:
+ Nome:
- Title:
+ Título:
- City:
+ Cidade:
- Image:
+ Imagem:
{person.artwork.title}
- {' by '}
+ {' por '}
{person.name}
- (located in {person.artwork.city})
+ (localizada em {person.artwork.city})
-Notice how much more concise the event handlers have become. You can mix and match `useState` and `useImmer` in a single component as much as you like. Immer is a great way to keep the update handlers concise, especially if there's nesting in your state, and copying objects leads to repetitive code.
+Observe como os manipuladores de eventos se tornaram muito mais concisos. Você pode misturar e combinar `useState` e `useImmer` em um único componente o quanto quiser. A Immer é uma ótima maneira de manter os manipuladores de atualização concisos, especialmente se houver aninhamento em seu state e a cópia de objetos resultar em código repetitivo.
-#### Why is mutating state not recommended in React? {/*why-is-mutating-state-not-recommended-in-react*/}
+#### Por que a mutação de state não é recomendada no React? {/*why-is-mutating-state-not-recommended-in-react*/}
-There are a few reasons:
+Existem alguns motivos:
-* **Debugging:** If you use `console.log` and don't mutate state, your past logs won't get clobbered by the more recent state changes. So you can clearly see how state has changed between renders.
-* **Optimizations:** Common React [optimization strategies](/reference/react/memo) rely on skipping work if previous props or state are the same as the next ones. If you never mutate state, it is very fast to check whether there were any changes. If `prevObj === obj`, you can be sure that nothing could have changed inside of it.
-* **New Features:** The new React features we're building rely on state being [treated like a snapshot.](/learn/state-as-a-snapshot) If you're mutating past versions of state, that may prevent you from using the new features.
-* **Requirement Changes:** Some application features, like implementing Undo/Redo, showing a history of changes, or letting the user reset a form to earlier values, are easier to do when nothing is mutated. This is because you can keep past copies of state in memory, and reuse them when appropriate. If you start with a mutative approach, features like this can be difficult to add later on.
-* **Simpler Implementation:** Because React does not rely on mutation, it does not need to do anything special with your objects. It does not need to hijack their properties, always wrap them into Proxies, or do other work at initialization as many "reactive" solutions do. This is also why React lets you put any object into state--no matter how large--without additional performance or correctness pitfalls.
+* **Depuração:** Se você usar `console.log` e não mutar o state, os logs anteriores não serão afetados pelas alterações de estado mais recentes. Assim, você poderá ver claramente como o estado foi alterado entre as renderizações.
+* **Otimizações:** As [estratégias de otimização](/reference/react/memo) comuns do React dependem de pular o trabalho se as props ou o state anteriores forem os mesmos que os próximos. Se você nunca altera o estado, é muito rápido verificar se houve alguma alteração. Se `prevObj === obj`, você pode ter certeza de que nada pode ter sido alterado dentro dele.
+* **Novas Funcionalidades:** As novas funcionalidades do React que estamos criando dependem de o estado ser [tratado como um snapshot](/learn/state-as-a-snapshot). Se você estiver mutando versões anteriores do estado, isso poderá impedi-lo de usar as novas funcionalidades.
+* **Mudanças de Requisitos:** Algumas funcionalidades de aplicações, como a implementação de Desfazer/Refazer, a exibição de um histórico de alterações ou a possibilidade de o usuário retornar um formulário para valores anteriores, são mais fáceis de fazer quando nada é mutado. Isso ocorre porque você pode manter cópias anteriores do estado na memória e reutilizá-las quando for apropriado. Se você começar com uma abordagem de mutação, pode ser difícil adicionar funcionalidades como essas no futuro.
+* **Implementação Mais Simples:** Como o React não depende de mutação, ele não precisa fazer nada de especial com seus objetos. Ele não precisa sequestrar suas propriedades, sempre envolvê-las em Proxies ou fazer outro trabalho na inicialização, como fazem muitas soluções "reativas". É também por isso que o React permite que você coloque qualquer objeto no state -- independentemente do tamanho -- sem problemas adicionais de desempenho ou correção.
-In practice, you can often "get away" with mutating state in React, but we strongly advise you not to do that so that you can use new React features developed with this approach in mind. Future contributors and perhaps even your future self will thank you!
+Na prática, muitas vezes é possível "sair ileso" ao fazer mutação de state no React, mas recomendamos enfaticamente que você não faça isso para que possa usar as novas funcionalidades do React desenvolvidas com essa abordagem em mente. Os futuros colaboradores e talvez até mesmo seu futuro eu lhe agradecerão!
-* Treat all state in React as immutable.
-* When you store objects in state, mutating them will not trigger renders and will change the state in previous render "snapshots".
-* Instead of mutating an object, create a *new* version of it, and trigger a re-render by setting state to it.
-* You can use the `{...obj, something: 'newValue'}` object spread syntax to create copies of objects.
-* Spread syntax is shallow: it only copies one level deep.
-* To update a nested object, you need to create copies all the way up from the place you're updating.
-* To reduce repetitive copying code, use Immer.
+* Trate todo o estado no React como imutável.
+* Quando você armazena objetos no estado, a mutação deles não acionará renderizações e alterará o estado em "snapshots" de renderização anteriores.
+* Em vez de mutar um objeto, crie uma versão *nova* dele e acione uma nova renderização definindo o state para ele.
+* Você pode usar a sintaxe de espalhamento de objetos `{...obj, something: 'newValue'}` para criar cópias de objetos.
+* A sintaxe de espalhamento é superficial: ela copia apenas um nível de profundidade.
+* Para atualizar um objeto aninhado, é necessário criar cópias em todos os níveis a partir do local que está sendo atualizado.
+* Para reduzir a cópia de código repetitiva, use Immer.
@@ -822,11 +820,11 @@ In practice, you can often "get away" with mutating state in React, but we stron
-#### Fix incorrect state updates {/*fix-incorrect-state-updates*/}
+#### Correção de atualizações de state incorretas {/*fix-incorrect-state-updates*/}
-This form has a few bugs. Click the button that increases the score a few times. Notice that it does not increase. Then edit the first name, and notice that the score has suddenly "caught up" with your changes. Finally, edit the last name, and notice that the score has disappeared completely.
+Este formulário tem alguns erros. Clique no botão que aumenta a pontuação algumas vezes. Observe que ela não aumenta. Em seguida, edite o nome e observe que a pontuação subitamente "alcançou" suas alterações. Por fim, edite o sobrenome e observe que a pontuação desapareceu completamente.
-Your task is to fix all of these bugs. As you fix them, explain why each of them happens.
+Sua tarefa é corrigir todos esses erros. Ao corrigi-los, explique por que cada um deles acontece.
@@ -860,21 +858,21 @@ export default function Scoreboard() {
return (
<>
- Score: {player.score}
+ Pontuação: {player.score}
{' '}
+1
- First name:
+ Nome:
- Last name:
+ Sobrenome:
-Here is a version with both bugs fixed:
+Aqui está uma versão com os dois erros corrigidos:
@@ -932,21 +930,21 @@ export default function Scoreboard() {
return (
<>
- Score: {player.score}
+ Pontuação: {player.score}
{' '}
+1
- First name:
+ Nome:
- Last name:
+ Sobrenome:
-The problem with `handlePlusClick` was that it mutated the `player` object. As a result, React did not know that there's a reason to re-render, and did not update the score on the screen. This is why, when you edited the first name, the state got updated, triggering a re-render which _also_ updated the score on the screen.
+O problema com `handlePlusClick` era que ele mutava o objeto `player`. Como resultado, o React não sabia que havia um motivo para renderizar novamente e não atualizava a pontuação na tela. É por isso que, quando você editou o nome, o state foi atualizado, acionando uma nova renderização que _também_ atualizou a pontuação na tela.
-The problem with `handleLastNameChange` was that it did not copy the existing `...player` fields into the new object. This is why the score got lost after you edited the last name.
+O problema com `handleLastNameChange` era que ele não copiava os campos existentes de `...player` para o novo objeto. É por isso que a pontuação foi perdida depois que você editou o sobrenome.
-#### Find and fix the mutation {/*find-and-fix-the-mutation*/}
+#### Encontre e corrija a mutação {/*find-and-fix-the-mutation*/}
-There is a draggable box on a static background. You can change the box's color using the select input.
+Há uma caixa arrastável em um fundo estático. Você pode alterar a cor da caixa usando a lista de seleção.
-But there is a bug. If you move the box first, and then change its color, the background (which isn't supposed to move!) will "jump" to the box position. But this should not happen: the `Background`'s `position` prop is set to `initialPosition`, which is `{ x: 0, y: 0 }`. Why is the background moving after the color change?
+Mas há um erro. Se você mover a caixa primeiro e depois mudar sua cor, o fundo (que não deveria se mover!) "pulará" para a posição da caixa. Mas isso não deveria acontecer: a propriedade `position` do `Background` é definida como `initialPosition`, que é `{ x: 0, y: 0 }`. Por que o fundo está se movendo após a mudança de cor?
-Find the bug and fix it.
+Encontre o erro e corrija-o.
-If something unexpected changes, there is a mutation. Find the mutation in `App.js` and fix it.
+Se algo inesperado muda, é porque há uma mutação. Encontre a mutação em `App.js` e corrija-a.
@@ -1020,9 +1018,9 @@ export default function Canvas() {
value={shape.color}
onChange={handleColorChange}
>
- orange
- lightpink
- aliceblue
+ laranja
+ rosa claro
+ azul alice
- Drag me!
+ Arraste-me!
>
);
@@ -1130,9 +1128,9 @@ select { margin-bottom: 10px; }
-The problem was in the mutation inside `handleMove`. It mutated `shape.position`, but that's the same object that `initialPosition` points at. This is why both the shape and the background move. (It's a mutation, so the change doesn't reflect on the screen until an unrelated update--the color change--triggers a re-render.)
+O problema estava na mutação dentro de `handleMove`. Ele alterou `shape.position`, mas esse é o mesmo objeto para o qual `initialPosition` aponta. É por isso que tanto a forma quanto o plano de fundo se movem. (É uma mutação, portanto, a alteração não é refletida na tela até que uma atualização não relacionada -- a alteração de cor -- acione uma nova renderização).
-The fix is to remove the mutation from `handleMove`, and use the spread syntax to copy the shape. Note that `+=` is a mutation, so you need to rewrite it to use a regular `+` operation.
+A solução é remover a mutação de `handleMove` e usar a sintaxe de espalhamento para copiar a forma. Observe que `+=` é uma mutação, portanto, você precisa reescrevê-la para usar uma operação `+` regular.
@@ -1175,9 +1173,9 @@ export default function Canvas() {
value={shape.color}
onChange={handleColorChange}
>
- orange
- lightpink
- aliceblue
+ laranja
+ rosa claro
+ azul alice
- Drag me!
+ Arraste-me!
>
);
@@ -1285,9 +1283,9 @@ select { margin-bottom: 10px; }
-#### Update an object with Immer {/*update-an-object-with-immer*/}
+#### Atualize um objeto com Immer {/*update-an-object-with-immer*/}
-This is the same buggy example as in the previous challenge. This time, fix the mutation by using Immer. For your convenience, `useImmer` is already imported, so you need to change the `shape` state variable to use it.
+Este é o mesmo exemplo com erros do desafio anterior. Desta vez, corrija a mutação usando Immer. Para sua conveniência, o `useImmer` já está importado, portanto, você precisa alterar a variável `shape` do state para usá-lo.
@@ -1326,9 +1324,9 @@ export default function Canvas() {
value={shape.color}
onChange={handleColorChange}
>
- orange
- lightpink
- aliceblue
+ laranja
+ rosa claro
+ azul alice
- Drag me!
+ Arraste-me!
>
);
@@ -1454,7 +1452,7 @@ select { margin-bottom: 10px; }
-This is the solution rewritten with Immer. Notice how the event handlers are written in a mutating fashion, but the bug does not occur. This is because under the hood, Immer never mutates the existing objects.
+Esta é a solução reescrita com Immer. Observe como os manipuladores de eventos são escritos de forma mutante, mas o erro não ocorre. Isso se deve ao fato de que, por baixo dos panos, a Immer nunca muta os objetos existentes.
@@ -1493,9 +1491,9 @@ export default function Canvas() {
value={shape.color}
onChange={handleColorChange}
>
- orange
- lightpink
- aliceblue
+ laranja
+ rosa claro
+ azul alice
- Drag me!
+ Arraste-me!
>
);
From 6dec14aa67b75fce67c5035e1c7e151504f87f3d Mon Sep 17 00:00:00 2001
From: Nivaldo Farias
Date: Wed, 31 May 2023 11:22:15 -0300
Subject: [PATCH 25/67] =?UTF-8?q?Tradu=C3=A7=C3=A3o=20da=20p=C3=A1gina=20`?=
=?UTF-8?q?state-as-a-snapshot.md`=20=20(#690)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* translate `learn/state-as-a-snapshot.md` to pt-BR
* translate all `state` to native `estado`, excluding title
* update branch; add text
---
src/content/learn/state-as-a-snapshot.md | 172 +++++++++++------------
1 file changed, 86 insertions(+), 86 deletions(-)
diff --git a/src/content/learn/state-as-a-snapshot.md b/src/content/learn/state-as-a-snapshot.md
index 503b0abb4..99bebd8f0 100644
--- a/src/content/learn/state-as-a-snapshot.md
+++ b/src/content/learn/state-as-a-snapshot.md
@@ -1,27 +1,27 @@
---
-title: State as a Snapshot
+title: State como uma Foto Instantânea
---
-State variables might look like regular JavaScript variables that you can read and write to. However, state behaves more like a snapshot. Setting it does not change the state variable you already have, but instead triggers a re-render.
+Variáveis de estado podem parecer variáveis JavaScript regulares das quais você pode ler e escrever. No entanto, estado se comporta mais como uma foto instantânea. Modificá-lo não altera a variável de estado que você já tem, mas sim dispara uma nova renderização.
-* How setting state triggers re-renders
-* When and how state updates
-* Why state does not update immediately after you set it
-* How event handlers access a "snapshot" of the state
+* Como manipulações de estado disparam novas renderizações
+* Quando e como atualizar o estado
+* Por que o estado não é atualizado imediatamente após você modificá-lo
+* Como os manipuladores de eventos acessam uma "foto instantânea" do estado
-## Setting state triggers renders {/*setting-state-triggers-renders*/}
+## Manipulações de estado disparam novas renderizações {/*setting-state-triggers-renders*/}
-You might think of your user interface as changing directly in response to the user event like a click. In React, it works a little differently from this mental model. On the previous page, you saw that [setting state requests a re-render](/learn/render-and-commit#step-1-trigger-a-render) from React. This means that for an interface to react to the event, you need to *update the state*.
+Você pode pensar que sua interface do usuário muda diretamente em resposta ao evento do usuário, como um clique. No React, isso funciona de forma um pouco diferente deste modelo mental. Na página anterior, você viu que [manipular o estado solicita uma nova renderização](/learn/render-and-commit#step-1-trigger-a-render) do React. Isso significa que, para uma interface reagir ao evento, você precisa *atualizar o state*.
-In this example, when you press "send", `setIsSent(true)` tells React to re-render the UI:
+Neste exemplo, quando você pressiona "enviar", `setIsSent(true)` diz ao React para renderizar novamente a interface:
@@ -30,9 +30,9 @@ import { useState } from 'react';
export default function Form() {
const [isSent, setIsSent] = useState(false);
- const [message, setMessage] = useState('Hi!');
+ const [message, setMessage] = useState('Olá!');
if (isSent) {
- return Your message is on its way!
+ return Sua mensagem está a caminho!
}
return (
{
@@ -45,7 +45,7 @@ export default function Form() {
value={message}
onChange={e => setMessage(e.target.value)}
/>
- Send
+ Enviar
);
}
@@ -61,43 +61,43 @@ label, textarea { margin-bottom: 10px; display: block; }
-Here's what happens when you click the button:
+Veja o que acontece quando você clica no botão:
-1. The `onSubmit` event handler executes.
-2. `setIsSent(true)` sets `isSent` to `true` and queues a new render.
-3. React re-renders the component according to the new `isSent` value.
+1. O manipulador de evento `onSubmit` é executado.
+2. `setIsSent(true)` define `isSent` como `true` e enfileira uma nova renderização.
+3. O React rerrenderiza o componente de acordo com o novo valor de `isSent`.
-Let's take a closer look at the relationship between state and rendering.
+Vamos dar uma olhada mais de perto na relação entre estado e renderização.
-## Rendering takes a snapshot in time {/*rendering-takes-a-snapshot-in-time*/}
+## Renderização tira uma foto instantânea {/*rendering-takes-a-snapshot-in-time*/}
-["Rendering"](/learn/render-and-commit#step-2-react-renders-your-components) means that React is calling your component, which is a function. The JSX you return from that function is like a snapshot of the UI in time. Its props, event handlers, and local variables were all calculated **using its state at the time of the render.**
+["Renderizar"](/learn/render-and-commit#step-2-react-renders-your-components) significa que o React está chamando seu componente, que é uma função. O JSX que você retorna dessa função é como uma foto instantânea da interface do usuário em um determinado momento. Suas *props*, manipuladores de eventos e variáveis locais foram todas calculadas **usando seu estado no momento da renderização.**
-Unlike a photograph or a movie frame, the UI "snapshot" you return is interactive. It includes logic like event handlers that specify what happens in response to inputs. React updates the screen to match this snapshot and connects the event handlers. As a result, pressing a button will trigger the click handler from your JSX.
+Ao contrário de uma fotografia ou um *frame* de um filme, a foto instantânea da interface do usuário que você retorna é interativa. Ela inclui lógica como manipuladores de eventos que especificam o que acontece em resposta às entradas. O React atualiza a tela para corresponder a essa foto instantânea e conecta os manipuladores de eventos. Como resultado, pressionar um botão acionará o manipulador de clique do seu JSX.
-When React re-renders a component:
+Quando o React rerrenderiza um componente:
-1. React calls your function again.
-2. Your function returns a new JSX snapshot.
-3. React then updates the screen to match the snapshot you've returned.
+1. O React chama sua função novamente.
+2. Sua função retorna uma nova foto instantânea do JSX.
+3. O React, então, atualiza a tela para corresponder à foto instantânea que você retornou.
-
-
-
+
+
+
-As a component's memory, state is not like a regular variable that disappears after your function returns. State actually "lives" in React itself--as if on a shelf!--outside of your function. When React calls your component, it gives you a snapshot of the state for that particular render. Your component returns a snapshot of the UI with a fresh set of props and event handlers in its JSX, all calculated **using the state values from that render!**
+Assim como a memória de um componente, o estado não é como uma variável regular que desaparece após a função retornar. O estado realmente "vive" no React, fora da sua função. Quando o React chama seu componente, ele lhe dá uma foto instantânea do estado para aquela renderização específica. Seu componente retorna uma foto instantânea da interface do usuário com um novo conjunto de *props* e manipuladores de eventos em seu JSX, todos calculados **usando os valores do estado daquela renderização!**
-
-
-
+
+
+
-Here's a little experiment to show you how this works. In this example, you might expect that clicking the "+3" button would increment the counter three times because it calls `setNumber(number + 1)` three times.
+Aqui está um pequeno experimento para mostrar como isso funciona. Neste exemplo, você pode esperar que clicar no botão "+3" incremente o contador três vezes porque ele chama `setNumber(number + 1)` três vezes.
-See what happens when you click the "+3" button:
+Veja o que acontece quando você clica no botão "+3":
@@ -127,9 +127,9 @@ h1 { display: inline-block; margin: 10px; width: 30px; text-align: center; }
-Notice that `number` only increments once per click!
+Observe que `number` só incrementa uma vez por clique!
-**Setting state only changes it for the *next* render.** During the first render, `number` was `0`. This is why, in *that render's* `onClick` handler, the value of `number` is still `0` even after `setNumber(number + 1)` was called:
+**Manipular o estado o altera apenas para a *próxima* renderização.** Durante a primeira renderização, `number` era `0`. É por isso que, no manipulador de `onClick` *daquela renderização*, o valor de `number` ainda é `0` mesmo depois de `setNumber(number + 1)` ter sido chamado:
```js
{
@@ -139,18 +139,18 @@ Notice that `number` only increments once per click!
}}>+3
```
-Here is what this button's click handler tells React to do:
+Aqui está o que o manipulador de `onClick` deste botão diz ao React para fazer:
1. `setNumber(number + 1)`: `number` is `0` so `setNumber(0 + 1)`.
- - React prepares to change `number` to `1` on the next render.
+ - O React se prepara para mudar `number` para `1` na próxima renderização.
2. `setNumber(number + 1)`: `number` is `0` so `setNumber(0 + 1)`.
- - React prepares to change `number` to `1` on the next render.
+ - O React se prepara para mudar `number` para `1` na próxima renderização.
3. `setNumber(number + 1)`: `number` is `0` so `setNumber(0 + 1)`.
- - React prepares to change `number` to `1` on the next render.
+ - O React se prepara para mudar `number` para `1` na próxima renderização.
-Even though you called `setNumber(number + 1)` three times, in *this render's* event handler `number` is always `0`, so you set the state to `1` three times. This is why, after your event handler finishes, React re-renders the component with `number` equal to `1` rather than `3`.
+Mesmo que você tenha chamado `setNumber(number + 1)` três vezes, no manipulador de eventos *daquela renderização* `number` é sempre `0`, então você definiu o estado para `1` três vezes. É por isso que, depois que o manipulador de eventos termina, o React rerrenderiza o componente com `number` igual a `1` em vez de `3`.
-You can also visualize this by mentally substituting state variables with their values in your code. Since the `number` state variable is `0` for *this render*, its event handler looks like this:
+Você também pode visualizar isso substituindo mentalmente as variáveis de estado por seus valores no seu código. Como a variável de estado `number` é `0` para *essa renderização*, seu manipulador de eventos se parece com isto:
```js
{
@@ -160,7 +160,7 @@ You can also visualize this by mentally substituting state variables with their
}}>+3
```
-For the next render, `number` is `1`, so *that render's* click handler looks like this:
+Para a próxima renderização, `number` é `1`, então o manipulador de eventos *daquela renderização* se parece com isto:
```js
{
@@ -170,11 +170,11 @@ For the next render, `number` is `1`, so *that render's* click handler looks lik
}}>+3
```
-This is why clicking the button again will set the counter to `2`, then to `3` on the next click, and so on.
+É por isso que clicar no botão novamente definirá o contador para `2`, depois para `3` no próximo clique e assim por diante.
-## State over time {/*state-over-time*/}
+## Estado ao longo do tempo {/*state-over-time*/}
-Well, that was fun. Try to guess what clicking this button will alert:
+Bem, isso foi divertido. Tente adivinhar o que clicar neste botão irá alertar:
@@ -203,14 +203,14 @@ h1 { display: inline-block; margin: 10px; width: 30px; text-align: center; }
-If you use the substitution method from before, you can guess that the alert shows "0":
+Se você usar o método de substituição de antes, você pode adivinhar que o alerta mostra "0":
```js
setNumber(0 + 5);
alert(0);
```
-But what if you put a timer on the alert, so it only fires _after_ the component re-rendered? Would it say "0" or "5"? Have a guess!
+Mas e se você colocar um temporizador no alerta, para que ele só seja disparado *depois* do componente ser renderizado novamente? Ele diria "0" ou "5"? Dê um palpite!
@@ -241,7 +241,7 @@ h1 { display: inline-block; margin: 10px; width: 30px; text-align: center; }
-Surprised? If you use the substitution method, you can see the "snapshot" of the state passed to the alert.
+Surpreso? Se você usar o método de substituição, você pode ver a "instantânea" do estado passado para o alerta.
```js
setNumber(0 + 5);
@@ -250,16 +250,16 @@ setTimeout(() => {
}, 3000);
```
-The state stored in React may have changed by the time the alert runs, but it was scheduled using a snapshot of the state at the time the user interacted with it!
+O estado armazenado no React pode ter mudado no momento em que o alerta é executado, mas ele foi agendado usando uma "instantânea" do estado no momento em que o usuário interagiu com ele!
-**A state variable's value never changes within a render,** even if its event handler's code is asynchronous. Inside *that render's* `onClick`, the value of `number` continues to be `0` even after `setNumber(number + 5)` was called. Its value was "fixed" when React "took the snapshot" of the UI by calling your component.
+**O valor de uma variável de estado nunca muda dentro de uma renderização,** mesmo que o código do manipulador de eventos seja assíncrono. Dentro do `onClick` *daquela renderização*, o valor de `number` continua sendo `0` mesmo depois que `setNumber(number + 5)` foi chamado. Seu valor foi "fixado" quando o React "tirou a foto" da UI chamando seu componente.
-Here is an example of how that makes your event handlers less prone to timing mistakes. Below is a form that sends a message with a five-second delay. Imagine this scenario:
+Aqui está um exemplo de como isso torna seus manipuladores de eventos menos propensos a erros de sincronização. Abaixo está um formulário que envia uma mensagem com um atraso de cinco segundos. Imagine este cenário:
-1. You press the "Send" button, sending "Hello" to Alice.
-2. Before the five-second delay ends, you change the value of the "To" field to "Bob".
+1. Você pressiona o botão "Enviar", enviando "Olá" para Alice.
+2. Antes que o atraso de cinco segundos termine, você muda o valor do campo "Para" para "Bob".
-What do you expect the `alert` to display? Would it display, "You said Hello to Alice"? Or would it display, "You said Hello to Bob"? Make a guess based on what you know, and then try it:
+O que você espera que o `alert` mostre? Ele exibiria "Você disse Olá para Alice"? Ou exibiria "Você disse Olá para Bob"? Faça uma suposição com base no que você sabe e, em seguida, tente:
@@ -268,19 +268,19 @@ import { useState } from 'react';
export default function Form() {
const [to, setTo] = useState('Alice');
- const [message, setMessage] = useState('Hello');
+ const [message, setMessage] = useState('Olá');
function handleSubmit(e) {
e.preventDefault();
setTimeout(() => {
- alert(`You said ${message} to ${to}`);
+ alert(`Você disse ${message} para ${to}`);
}, 5000);
}
return (
- To:{' '}
+ Para:{' '}
setTo(e.target.value)}>
@@ -293,7 +293,7 @@ export default function Form() {
value={message}
onChange={e => setMessage(e.target.value)}
/>
- Send
+ Enviar
);
}
@@ -305,19 +305,19 @@ label, textarea { margin-bottom: 10px; display: block; }
-**React keeps the state values "fixed" within one render's event handlers.** You don't need to worry whether the state has changed while the code is running.
+O React mantém os valores do estado "fixos" dentro dos manipuladores de eventos de uma renderização. Você não precisa se preocupar se o estado mudou enquanto o código está sendo executado.
-But what if you wanted to read the latest state before a re-render? You'll want to use a [state updater function](/learn/queueing-a-series-of-state-updates), covered on the next page!
+Mas e se você quiser ler o estado mais recente antes de uma rerrenderização? Você vai querer usar uma [função de atualização de estado](/learn/queueing-a-series-of-state-updates), abordado na próxima página!
-* Setting state requests a new render.
-* React stores state outside of your component, as if on a shelf.
-* When you call `useState`, React gives you a snapshot of the state *for that render*.
-* Variables and event handlers don't "survive" re-renders. Every render has its own event handlers.
-* Every render (and functions inside it) will always "see" the snapshot of the state that React gave to *that* render.
-* You can mentally substitute state in event handlers, similarly to how you think about the rendered JSX.
-* Event handlers created in the past have the state values from the render in which they were created.
+* Manipular o estado solicita uma nova renderização.
+* O React armazena o estado fora do seu componente, como se estivesse em uma prateleira.
+* Quando você chama `useState`, o React te dá uma "instantânea" do estado *daquela renderização*.
+* Variáveis e manipuladores de eventos não "sobrevivem" às rerrenderizações. Cada renderização tem seus próprios manipuladores de eventos.
+* Cada renderização (e funções dentro dela) sempre "vê" a "instantânea" do estado que o React deu para *aquela* renderização.
+* Você pode substituir mentalmente o estado nos manipuladores de eventos, de forma semelhante à forma como você pensa sobre o JSX renderizado.
+* Manipuladores de eventos criados no passado têm os valores do estado da renderização em que foram criados.
@@ -325,9 +325,9 @@ But what if you wanted to read the latest state before a re-render? You'll want
-#### Implement a traffic light {/*implement-a-traffic-light*/}
+#### Implemente um semáforo {/*implement-a-traffic-light*/}
-Here is a crosswalk light component that toggles when the button is pressed:
+Aqui está um componente de semáforo que alterna quando o botão é pressionado:
@@ -344,12 +344,12 @@ export default function TrafficLight() {
return (
<>
- Change to {walk ? 'Stop' : 'Walk'}
+ Mudar para {walk ? 'Pare' : 'Prossiga'}
- {walk ? 'Walk' : 'Stop'}
+ {walk ? 'Prossiga' : 'Pare'}
>
);
@@ -362,13 +362,13 @@ h1 { margin-top: 20px; }
-Add an `alert` to the click handler. When the light is green and says "Walk", clicking the button should say "Stop is next". When the light is red and says "Stop", clicking the button should say "Walk is next".
+Adicione um `alert` ao manipulador de cliques. Quando a luz estiver verde e disser "Prossiga", clicar no botão deve dizer "Pare a seguir". Quando a luz estiver vermelha e disser "Pare", clicar no botão deve dizer "Prossiga a seguir".
-Does it make a difference whether you put the `alert` before or after the `setWalk` call?
+Faz diferença se você colocar o `alert` antes ou depois da chamada `setWalk`?
-Your `alert` should look like this:
+Seu `alert` deve parecer com isto:
@@ -380,18 +380,18 @@ export default function TrafficLight() {
function handleClick() {
setWalk(!walk);
- alert(walk ? 'Stop is next' : 'Walk is next');
+ alert(walk ? 'Pare a seguir' : 'Prossiga a seguir');
}
return (
<>
- Change to {walk ? 'Stop' : 'Walk'}
+ Mudar para {walk ? 'Pare' : 'Prossiga'}
- {walk ? 'Walk' : 'Stop'}
+ {walk ? 'Prossiga' : 'Pare'}
>
);
@@ -404,31 +404,31 @@ h1 { margin-top: 20px; }
-Whether you put it before or after the `setWalk` call makes no difference. That render's value of `walk` is fixed. Calling `setWalk` will only change it for the *next* render, but will not affect the event handler from the previous render.
+Você colocar ele antes ou depois da chamada `setWalk` não faz diferença. O valor de `walk` daquela renderização é fixo. Chamar `setWalk` só irá alterá-lo para a *próxima* renderização, mas não afetará o manipulador de eventos da renderização anterior.
-This line might seem counter-intuitive at first:
+Esta linha pode parecer contra-intuitiva à primeira vista:
```js
-alert(walk ? 'Stop is next' : 'Walk is next');
+alert(walk ? 'Pare a seguir' : 'Prossiga a seguir');
```
-But it makes sense if you read it as: "If the traffic light shows 'Walk now', the message should say 'Stop is next.'" The `walk` variable inside your event handler matches that render's value of `walk` and does not change.
+Mas faz sentido se você ler como: "Se o semáforo mostrar 'Prossiga agora', a mensagem deve dizer 'Pare a seguir'". A variável `walk` dentro do seu manipulador de eventos corresponde ao valor de `walk` daquela renderização, e não muda.
-You can verify that this is correct by applying the substitution method. When `walk` is `true`, you get:
+Você pode verificar que isso está correto aplicando o método de substituição. Quando `walk` é `true`, você obtém:
```js
{
setWalk(false);
- alert('Stop is next');
+ alert('Pare a seguir');
}}>
- Change to Stop
+ Mudar para Pare
- Walk
+ Prossiga
```
-So clicking "Change to Stop" queues a render with `walk` set to `false`, and alerts "Stop is next".
+Então, clicar "Mudar para Pare" enfileira uma renderização com `walk` alterado para `false`, e alerta "Pare a seguir".
From 934fa1e05aeb7b653856e18b87b932fce477062f Mon Sep 17 00:00:00 2001
From: Vitor Gultzgoff
Date: Wed, 31 May 2023 11:22:47 -0300
Subject: [PATCH 26/67] docs(pt-br): translate conditional-rendering (#692)
Co-authored-by: Vitor Gultzgoff
---
src/content/learn/conditional-rendering.md | 276 ++++++++++-----------
1 file changed, 138 insertions(+), 138 deletions(-)
diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index cfd52320a..bd809c309 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -1,24 +1,24 @@
---
-title: Conditional Rendering
+title: Renderização condicional
---
-Your components will often need to display different things depending on different conditions. In React, you can conditionally render JSX using JavaScript syntax like `if` statements, `&&`, and `? :` operators.
+Seus componentes frequentemente precisarão exibir coisas diferentes dependendo de diferentes condições. No React, você pode renderizar condicionalmente JSX usando sintaxe do JavaScript, como declarações `if`, e operadores `? :` e `&&`.
-* How to return different JSX depending on a condition
-* How to conditionally include or exclude a piece of JSX
-* Common conditional syntax shortcuts you’ll encounter in React codebases
+* Como retornar diferentes JSX dependendendo de uma condição
+* Como incluir ou excluir condicionalmente um trecho de JSX
+* Atalhos de sintaxe condicional comuns que você encontrará em bases de código do React
-## Conditionally returning JSX {/*conditionally-returning-jsx*/}
+## Retorno condicional de JSX {/*conditionally-returning-jsx*/}
-Let’s say you have a `PackingList` component rendering several `Item`s, which can be marked as packed or not:
+Digamos que você tenha um componente `PackingList` renderizando vários `Item`s, que podem ser marcados como empacotados ou não:
@@ -30,19 +30,19 @@ function Item({ name, isPacked }) {
export default function PackingList() {
return (
- Sally Ride's Packing List
+ Packing List de Sally Ride
@@ -52,9 +52,9 @@ export default function PackingList() {
-Notice that some of the `Item` components have their `isPacked` prop set to `true` instead of `false`. You want to add a checkmark (✔) to packed items if `isPacked={true}`.
+Observe que alguns dos componentes `Item` possuem a propriedade `isPacked` definida como `true` ao invés de `false`. Você deseja adicionar uma marca de seleção (✔) aos itens empacotados se `isPacked={true}`.
-You can write this as an [`if`/`else` statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) like so:
+Você pode escrever isso como uma [declaração `if`/`else`](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/if...else) da seguinte maneira:
```js
if (isPacked) {
@@ -63,7 +63,7 @@ if (isPacked) {
return {name} ;
```
-If the `isPacked` prop is `true`, this code **returns a different JSX tree.** With this change, some of the items get a checkmark at the end:
+Se a propriedade `isPacked` for `true`, este código **retorna uma árvore JSX diferente.** Com essa alteração, alguns dos itens recebem uma marca de seleção no final:
@@ -78,19 +78,19 @@ function Item({ name, isPacked }) {
export default function PackingList() {
return (
- Sally Ride's Packing List
+ Packing List de Sally Ride
@@ -100,13 +100,13 @@ export default function PackingList() {
-Try editing what gets returned in either case, and see how the result changes!
+Experimente editar o que é retornado em cada caso e veja como o resultado muda!
-Notice how you're creating branching logic with JavaScript's `if` and `return` statements. In React, control flow (like conditions) is handled by JavaScript.
+Observe como você está criando lógica de ramificação com as declarações `if` e `return` do JavaScript. No React, o fluxo de controle (como condições) é tratado pelo JavaScript.
-### Conditionally returning nothing with `null` {/*conditionally-returning-nothing-with-null*/}
+### Retornando condicionalmente nada com `null` {/*conditionally-returning-nothing-with-null*/}
-In some situations, you won't want to render anything at all. For example, say you don't want to show packed items at all. A component must return something. In this case, you can return `null`:
+Em algumas situações, você não desejará renderizar nada. Por exemplo, digamos que você não queira mostrar itens embalados de jeito nenhum. Um componente deve retornar algo. Nesse caso, você pode retornar `null`:
```js
if (isPacked) {
@@ -115,7 +115,7 @@ if (isPacked) {
return {name} ;
```
-If `isPacked` is true, the component will return nothing, `null`. Otherwise, it will return JSX to render.
+Se `isPacked` equivaler à `true`, o componente não retornará nada, `null`. Caso contrário, retornará o JSX para ser renderizado.
@@ -130,19 +130,19 @@ function Item({ name, isPacked }) {
export default function PackingList() {
return (
- Sally Ride's Packing List
+ Packing List de Sally Ride
@@ -152,23 +152,23 @@ export default function PackingList() {
-In practice, returning `null` from a component isn't common because it might surprise a developer trying to render it. More often, you would conditionally include or exclude the component in the parent component's JSX. Here's how to do that!
+Na prática, retornar `null` de um componente não é comum porque pode surpreender um desenvolvedor que está tentando renderizá-lo. Com mais frequência, você condicionalmente incluiria ou excluíria o componente no JSX do componente pai. Veja como fazer isso!
-## Conditionally including JSX {/*conditionally-including-jsx*/}
+## Incluindo JSX condicionalmente {/*conditionally-including-jsx*/}
-In the previous example, you controlled which (if any!) JSX tree would be returned by the component. You may already have noticed some duplication in the render output:
+No exemplo anterior, você controlou qual (se houver) árvore JSX seria retornada pelo componente. Você pode ter percebido alguma duplicação na saída de renderização:
```js
{name} ✔
```
-is very similar to
+é muito semelhante a
```js
{name}
```
-Both of the conditional branches return `... `:
+Ambas as ramificações condicionais retornam `... `:
```js
if (isPacked) {
@@ -177,13 +177,13 @@ if (isPacked) {
return {name} ;
```
-While this duplication isn't harmful, it could make your code harder to maintain. What if you want to change the `className`? You'd have to do it in two places in your code! In such a situation, you could conditionally include a little JSX to make your code more [DRY.](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself)
+Embora essa duplicação não seja prejudicial, ela pode tornar seu código mais difícil de manter. E se você quiser alterar a `className`? Você teria que fazer isso em dois lugares do seu código! Em tal situação, você poderia incluir condicionalmente um pouco de JSX para tornar seu código mais [DRY.](https://pt.wikipedia.org/wiki/Don%27t_repeat_yourself)
-### Conditional (ternary) operator (`? :`) {/*conditional-ternary-operator--*/}
+### Operador condicional ternário (`? :`) {/*conditional-ternary-operator--*/}
-JavaScript has a compact syntax for writing a conditional expression -- the [conditional operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) or "ternary operator".
+O JavaScript possui uma sintaxe compacta para escrever uma expressão condicional -- o [operador condicional](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) ou "operador ternário".
-Instead of this:
+Ao invés disso:
```js
if (isPacked) {
@@ -192,7 +192,7 @@ if (isPacked) {
return {name} ;
```
-You can write this:
+Você pode escrever isso:
```js
return (
@@ -202,17 +202,17 @@ return (
);
```
-You can read it as *"if `isPacked` is true, then (`?`) render `name + ' ✔'`, otherwise (`:`) render `name`"*.
+Você pode interpretá-lo como *"se `isPacked` for `true`, então (`?`) renderize `name + ' ✔'`, caso contrário (`:`) renderize `name`"*.
-#### Are these two examples fully equivalent? {/*are-these-two-examples-fully-equivalent*/}
+#### Esses dois exemplos são totalmente equivalentes? {/*are-these-two-examples-fully-equivalent*/}
-If you're coming from an object-oriented programming background, you might assume that the two examples above are subtly different because one of them may create two different "instances" of ``. But JSX elements aren't "instances" because they don't hold any internal state and aren't real DOM nodes. They're lightweight descriptions, like blueprints. So these two examples, in fact, *are* completely equivalent. [Preserving and Resetting State](/learn/preserving-and-resetting-state) goes into detail about how this works.
+Se você vem de um histórico de programação orientada a objetos, você pode supor que os dois exemplos acima são sutilmente diferentes porque um deles pode criar duas "instâncias" diferentes de ` `. No entanto, os elementos JSX não são "instâncias" porque eles não possuem nenhum estado interno e não são nós reais do DOM. Eles são leves descrições, como plantas baixas. Portanto, esses dois exemplos, na verdade, *são* completamente equivalentes. [Preservando e redefinindo o estado](/learn/preserving-and-resetting-state) explora em detalhes como isso funciona.
-Now let's say you want to wrap the completed item's text into another HTML tag, like `` to strike it out. You can add even more newlines and parentheses so that it's easier to nest more JSX in each of the cases:
+Agora, vamos supor que você queira envolver o texto do item concluído em outra tag HTML, como ``, para eliminá-lo. Você pode adicionar ainda mais quebras de linha e parênteses para facilitar a aninhamento de mais JSX em cada um dos casos:
@@ -234,19 +234,19 @@ function Item({ name, isPacked }) {
export default function PackingList() {
return (
- Sally Ride's Packing List
+ Packing List de Sally Ride
@@ -256,11 +256,11 @@ export default function PackingList() {
-This style works well for simple conditions, but use it in moderation. If your components get messy with too much nested conditional markup, consider extracting child components to clean things up. In React, markup is a part of your code, so you can use tools like variables and functions to tidy up complex expressions.
+Este estilo funciona bem para condições simples, mas use-o com moderação. Se seus componentes ficarem bagunçados com marcação condicional aninhada demais, considere extrair componentes filhos para limpar as coisas. No React, a marcação faz parte do seu código, então você pode usar ferramentas como variáveis e funções para organizar expressões complexas.
-### Logical AND operator (`&&`) {/*logical-and-operator-*/}
+### Operador lógico AND (`&&`) {/*logical-and-operator-*/}
-Another common shortcut you'll encounter is the [JavaScript logical AND (`&&`) operator.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The%20logical%20AND%20(%20%26%26%20)%20operator,it%20returns%20a%20Boolean%20value.) Inside React components, it often comes up when you want to render some JSX when the condition is true, **or render nothing otherwise.** With `&&`, you could conditionally render the checkmark only if `isPacked` is `true`:
+Outro atalho comum que você encontrará é o [operador JavaScript AND lógico (`&&`)](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/Logical_AND). Dentro de componentes React, ele geralmente é usado quando você deseja renderizar algum JSX quando a condição for verdadeira, **ou não renderizar nada caso contrário**. Com `&&`, você pode renderizar condicionalmente o marcador de verificação apenas se `isPacked` for `true`:
```js
return (
@@ -270,9 +270,9 @@ return (
);
```
-You can read this as *"if `isPacked`, then (`&&`) render the checkmark, otherwise, render nothing"*.
+Você pode interpretar isso como *"se `isPacked`, então (`&&`) renderize o marcador de verificação, caso contrário, não renderize nada"*.
-Here it is in action:
+Veja como funciona na prática:
@@ -288,19 +288,19 @@ function Item({ name, isPacked }) {
export default function PackingList() {
return (
- Sally Ride's Packing List
+ Packing List de Sally Ride
@@ -310,30 +310,30 @@ export default function PackingList() {
-A [JavaScript && expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND) returns the value of its right side (in our case, the checkmark) if the left side (our condition) is `true`. But if the condition is `false`, the whole expression becomes `false`. React considers `false` as a "hole" in the JSX tree, just like `null` or `undefined`, and doesn't render anything in its place.
+A [Express JavaScript &&](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/Logical_AND) retorna o valor do seu lado direito (no nosso caso, o marcador de verificação) se o lado esquerdo (a nossa condição) for `true`. Mas se a condição for `false`, a expressão inteira se torna `false`. O React considera `false` como um "vazio" na árvore JSX, assim como `null` ou `undefined`, e não renderiza nada em seu lugar.
-**Don't put numbers on the left side of `&&`.**
+**Não coloque números no lado esquerdo do `&&`.**
-To test the condition, JavaScript converts the left side to a boolean automatically. However, if the left side is `0`, then the whole expression gets that value (`0`), and React will happily render `0` rather than nothing.
+Para testar a condição, o JavaScript converte automaticamente o lado esquerdo para um valor booleano. No entanto, se o lado esquerdo for `0`, então a expressão inteira receberá esse valor (`0`), e o React renderizará alegremente o próprio `0` ao invés de nada.
-For example, a common mistake is to write code like `messageCount && New messages
`. It's easy to assume that it renders nothing when `messageCount` is `0`, but it really renders the `0` itself!
+Por exemplo, um erro comum é escrever o código como `messageCount && Novas mensagens
`. É fácil assumir que não renderiza nada quando `messageCount` for `0`, mas na verdade renderiza o próprio `0`!
-To fix it, make the left side a boolean: `messageCount > 0 && New messages
`.
+Para corrigir isso, faça do lado esquerdo um valor booleano: `messageCount > 0 && Novas mensagens
`.
-### Conditionally assigning JSX to a variable {/*conditionally-assigning-jsx-to-a-variable*/}
+### Atribuindo condicionalmente JSX à uma variável {/*conditionally-assigning-jsx-to-a-variable*/}
-When the shortcuts get in the way of writing plain code, try using an `if` statement and a variable. You can reassign variables defined with [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), so start by providing the default content you want to display, the name:
+Quando os atalhos atrapalham a escrita de código simples, tente usar uma declaração `if` e uma variável. Você pode reatribuir variáveis definidas com [`let`](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/let), portanto, comece fornecendo o conteúdo padrão que você deseja exibir, o nome:
```js
let itemContent = name;
```
-Use an `if` statement to reassign a JSX expression to `itemContent` if `isPacked` is `true`:
+Use uma declaração `if` para reatribuir uma expressão JSX a `itemContent` se `isPacked` for `true`:
```js
if (isPacked) {
@@ -341,7 +341,7 @@ if (isPacked) {
}
```
-[Curly braces open the "window into JavaScript".](/learn/javascript-in-jsx-with-curly-braces#using-curly-braces-a-window-into-the-javascript-world) Embed the variable with curly braces in the returned JSX tree, nesting the previously calculated expression inside of JSX:
+[As chaves {} abrem a "janela para o JavaScript".](/learn/javascript-in-jsx-with-curly-braces#using-curly-braces-a-window-into-the-javascript-world) Incorpore a variável com chaves na árvore JSX retornada, aninhando a expressão previamente calculada dentro do JSX:
```js
@@ -349,7 +349,7 @@ if (isPacked) {
```
-This style is the most verbose, but it's also the most flexible. Here it is in action:
+Este estilo é o mais verbose, mas também o mais flexível. Veja como funciona na prática:
@@ -369,19 +369,19 @@ function Item({ name, isPacked }) {
export default function PackingList() {
return (
- Sally Ride's Packing List
+ Packing List de Sally Ride
@@ -391,7 +391,7 @@ export default function PackingList() {
-Like before, this works not only for text, but for arbitrary JSX too:
+Como antes, isso funciona não apenas para texto, mas também para JSX arbitrário:
@@ -415,19 +415,19 @@ function Item({ name, isPacked }) {
export default function PackingList() {
return (
- Sally Ride's Packing List
+ Packing List de Sally Ride
@@ -437,16 +437,16 @@ export default function PackingList() {
-If you're not familiar with JavaScript, this variety of styles might seem overwhelming at first. However, learning them will help you read and write any JavaScript code -- and not just React components! Pick the one you prefer for a start, and then consult this reference again if you forget how the other ones work.
+Se você não está familiarizado com JavaScript, essa variedade de estilos pode parecer avassaladora no início. No entanto, aprender esses estilos ajudará você a ler e escrever qualquer código JavaScript, e não apenas componentes React! Escolha aquele que você preferir para começar e consulte esta referência novamente se você esquecer como os outros funcionam.
-* In React, you control branching logic with JavaScript.
-* You can return a JSX expression conditionally with an `if` statement.
-* You can conditionally save some JSX to a variable and then include it inside other JSX by using the curly braces.
-* In JSX, `{cond ? : }` means *"if `cond`, render ` `, otherwise ` `"*.
-* In JSX, `{cond && }` means *"if `cond`, render ` `, otherwise nothing"*.
-* The shortcuts are common, but you don't have to use them if you prefer plain `if`.
+* No React, você controla a lógica de ramificação com JavaScript.
+* Você pode retornar uma expressão JSX condicionalmente com uma declaração `if`.
+* Você pode salvar condicionalmente algum JSX em uma variável e depois incluí-lo dentro de outro JSX usando chaves.
+* No JSX, `{cond ? : }` significa *"se `cond`, renderize ` `, caso contrário, ` `"*.
+* No JSX, `{cond && }` significa *"se `cond`, renderize ` `, caso contrário, nada"*.
+* Os atalhos são comuns, mas você não precisa usá-los se preferir usar um `if` simples.
@@ -454,9 +454,9 @@ If you're not familiar with JavaScript, this variety of styles might seem overwh
-#### Show an icon for incomplete items with `? :` {/*show-an-icon-for-incomplete-items-with--*/}
+#### Mostre um ícone para itens incompletos com `? :` {/*show-an-icon-for-incomplete-items-with--*/}
-Use the conditional operator (`cond ? a : b`) to render a ❌ if `isPacked` isn’t `true`.
+Use o operador condicional (`cond ? a : b`) para renderizar um ❌ se `isPacked` não for `true`.
@@ -472,19 +472,19 @@ function Item({ name, isPacked }) {
export default function PackingList() {
return (
- Sally Ride's Packing List
+ Packing List de Sally Ride
@@ -510,19 +510,19 @@ function Item({ name, isPacked }) {
export default function PackingList() {
return (
- Sally Ride's Packing List
+ Packing List de Sally Ride
@@ -534,15 +534,15 @@ export default function PackingList() {
-#### Show the item importance with `&&` {/*show-the-item-importance-with-*/}
+#### Mostrar a importância do item com `&&` {/*show-the-item-importance-with-*/}
-In this example, each `Item` receives a numerical `importance` prop. Use the `&&` operator to render "_(Importance: X)_" in italics, but only for items that have non-zero importance. Your item list should end up looking like this:
+Neste exemplo, cada `Item` recebe uma prop `importance` numérica. Use o operador `&&` para renderizar "_(Relevância: X)_" em itálico, mas apenas para os itens que têm relevância diferente de zero. Sua lista de itens deve ficar assim:
-* Space suit _(Importance: 9)_
-* Helmet with a golden leaf
-* Photo of Tam _(Importance: 6)_
+* Traje espacial _(Relevância: 9)_
+* Capacete com folha dourada
+* Foto de Tam _(Relevância: 6)_
-Don't forget to add a space between the two labels!
+Não se esqueça de adicionar um espaço entre as duas etiquetas!
@@ -558,19 +558,19 @@ function Item({ name, importance }) {
export default function PackingList() {
return (
- Sally Ride's Packing List
+ Packing List de Sally Ride
@@ -582,7 +582,7 @@ export default function PackingList() {
-This should do the trick:
+Isso deve resolver o problema:
@@ -593,7 +593,7 @@ function Item({ name, importance }) {
{name}
{importance > 0 && ' '}
{importance > 0 &&
- (Importance: {importance})
+ (Relevância: {importance})
}
);
@@ -602,19 +602,19 @@ function Item({ name, importance }) {
export default function PackingList() {
return (
- Sally Ride's Packing List
+ Packing List de Sally Ride
@@ -624,15 +624,15 @@ export default function PackingList() {
-Note that you must write `importance > 0 && ...` rather than `importance && ...` so that if the `importance` is `0`, `0` isn't rendered as the result!
+Observe que você deve escrever `importance > 0 && ...` ao invés de `importance && ...` para que, se `importance` for `0`, `0` não seja renderizado como resultado!
-In this solution, two separate conditions are used to insert a space between the name and the importance label. Alternatively, you could use a fragment with a leading space: `importance > 0 && <> ... >` or add a space immediately inside the ``: `importance > 0 && ... `.
+Nessa solução, duas condições separadas são usadas para inserir um espaço entre o nome e a etiqueta de relevância. Alternativamente, você pode usar um fragmento com um espaço inicial: `importance > 0 && <> ... >` ou adicionar um espaço imediatamente dentro do ``: `importance > 0 && ... `.
-#### Refactor a series of `? :` to `if` and variables {/*refactor-a-series-of---to-if-and-variables*/}
+#### Refatore uma série de `? :` para `if` e variáveis {/*refactor-a-series-of---to-if-and-variables*/}
-This `Drink` component uses a series of `? :` conditions to show different information depending on whether the `name` prop is `"tea"` or `"coffee"`. The problem is that the information about each drink is spread across multiple conditions. Refactor this code to use a single `if` statement instead of three `? :` conditions.
+Este componente `Drink` usa uma série de condições `? :` para mostrar informações diferentes dependendo se a prop `name` for `"tea"` ou `"coffee"`. O problema é que as informações sobre cada bebida estão espalhadas em várias condições. Refatore este código para usar uma única declaração `if` em vez de três condições `? :`.
@@ -642,12 +642,12 @@ function Drink({ name }) {
{name}
- Part of plant
- {name === 'tea' ? 'leaf' : 'bean'}
- Caffeine content
- {name === 'tea' ? '15–70 mg/cup' : '80–185 mg/cup'}
- Age
- {name === 'tea' ? '4,000+ years' : '1,000+ years'}
+ Parte da planta
+ {name === 'tea' ? 'folha' : 'feijão'}
+ Teor de cafeína
+ {name === 'tea' ? '15–70 mg/xícara' : '80–185 mg/xícara'}
+ Idade
+ {name === 'tea' ? '4.000+ anos' : '1.000+ anos'}
);
@@ -665,11 +665,11 @@ export default function DrinkList() {
-Once you've refactored the code to use `if`, do you have further ideas on how to simplify it?
+Depois de refatorar o código para usar `if`, você tem mais ideias de como simplificá-lo?
-There are multiple ways you could go about this, but here is one starting point:
+Existem várias maneiras de abordar isso, mas aqui está um ponto de partida:
@@ -677,23 +677,23 @@ There are multiple ways you could go about this, but here is one starting point:
function Drink({ name }) {
let part, caffeine, age;
if (name === 'tea') {
- part = 'leaf';
- caffeine = '15–70 mg/cup';
- age = '4,000+ years';
+ part = 'folha';
+ caffeine = '15–70 mg/xícara';
+ age = '4.000+ anos';
} else if (name === 'coffee') {
- part = 'bean';
- caffeine = '80–185 mg/cup';
- age = '1,000+ years';
+ part = 'feijão';
+ caffeine = '80–185 mg/xícara';
+ age = '1.000+ anos';
}
return (
{name}
- Part of plant
+ Parte da planta
{part}
- Caffeine content
+ Teor de cafeína
{caffeine}
- Age
+ Idade
{age}
@@ -712,23 +712,23 @@ export default function DrinkList() {
-Here the information about each drink is grouped together instead of being spread across multiple conditions. This makes it easier to add more drinks in the future.
+Aqui, as informações sobre cada bebida são agrupadas em vez de serem espalhadas em várias condições. Isso facilita a adição de mais bebidas no futuro.
-Another solution would be to remove the condition altogether by moving the information into objects:
+Outra solução seria remover a condição completamente, movendo as informações para objetos:
```js
const drinks = {
tea: {
- part: 'leaf',
- caffeine: '15–70 mg/cup',
- age: '4,000+ years'
+ part: 'folha',
+ caffeine: '15–70 mg/xícara',
+ age: '4.000+ anos'
},
coffee: {
- part: 'bean',
- caffeine: '80–185 mg/cup',
- age: '1,000+ years'
+ part: 'feijão',
+ caffeine: '80–185 mg/xícara',
+ age: '1.000+ anos'
}
};
@@ -738,11 +738,11 @@ function Drink({ name }) {
{name}
- Part of plant
+ Parte da planta
{info.part}
- Caffeine content
+ Teor de cafeína
{info.caffeine}
- Age
+ Idade
{info.age}
From 7c8b91a37ab4d4cfa4044cde14bffb2b7b23131a Mon Sep 17 00:00:00 2001
From: tiagobarros01
Date: Thu, 1 Jun 2023 22:18:54 -0300
Subject: [PATCH 27/67] [FEAT]: Translates the `useId` page
---
src/content/reference/react/useId.md | 96 ++++++++++++++--------------
1 file changed, 48 insertions(+), 48 deletions(-)
diff --git a/src/content/reference/react/useId.md b/src/content/reference/react/useId.md
index 4ea029f27..980f44bc6 100644
--- a/src/content/reference/react/useId.md
+++ b/src/content/reference/react/useId.md
@@ -4,7 +4,7 @@ title: useId
-`useId` is a React Hook for generating unique IDs that can be passed to accessibility attributes.
+`useId` é um Hook do React para gerar IDs únicos que podem ser passados para atributos de acessibilidade.
```js
const id = useId()
@@ -16,11 +16,11 @@ const id = useId()
---
-## Reference {/*reference*/}
+## Referência {/*reference*/}
### `useId()` {/*useid*/}
-Call `useId` at the top level of your component to generate a unique ID:
+Chame `useId` no nível superior do seu componente para gerar um ID único:
```js
import { useId } from 'react';
@@ -30,35 +30,35 @@ function PasswordField() {
// ...
```
-[See more examples below.](#usage)
+[Veja mais exemplos abaixo.](#usage)
-#### Parameters {/*parameters*/}
+#### Parâmetros {/*parameters*/}
-`useId` does not take any parameters.
+`useId` não aceita nenhum parâmetro.
-#### Returns {/*returns*/}
+#### Retorna {/*returns*/}
-`useId` returns a unique ID string associated with this particular `useId` call in this particular component.
+`useId` retorna uma sequência de ID único associada a esta chamada `useId` específica neste componente específico.
-#### Caveats {/*caveats*/}
+#### Ressalvas {/*caveats*/}
-* `useId` is a Hook, so you can only call it **at the top level of your component** or your own Hooks. You can't call it inside loops or conditions. If you need that, extract a new component and move the state into it.
+* `useId` é um Hook, então você só pode chamá-lo **no nível superior do seu componente** ou no seus próprios Hooks. Você não pode chamá-lo dentro de loops ou condições. Se precisar, extraia um novo componente e mova o estado para ele.
-* `useId` **should not be used to generate keys** in a list. [Keys should be generated from your data.](/learn/rendering-lists#where-to-get-your-key)
+* `useId` **não deve ser usado para gerar chaves** em uma lista. [As chaves devem ser geradas a partir de seus dados.](/learn/rendering-lists#where-to-get-your-key)
---
-## Usage {/*usage*/}
+## Uso {/*usage*/}
-**Do not call `useId` to generate keys in a list.** [Keys should be generated from your data.](/learn/rendering-lists#where-to-get-your-key)
+**Não chame `useId` para gerar chaves em uma lista.** [As chaves devem ser geradas a partir de seus dados.](/learn/rendering-lists#where-to-get-your-key)
-### Generating unique IDs for accessibility attributes {/*generating-unique-ids-for-accessibility-attributes*/}
+### Gerando IDs únicos para atributos de acessibilidade {/*generating-unique-ids-for-accessibility-attributes*/}
-Call `useId` at the top level of your component to generate a unique ID:
+Chame `useId` no nível superior do seu componente para gerar um ID único:
```js [[1, 4, "passwordHintId"]]
import { useId } from 'react';
@@ -68,7 +68,7 @@ function PasswordField() {
// ...
```
-You can then pass the generated ID to different attributes:
+Você pode então passar o ID gerado para diferentes atributos:
```js [[1, 2, "passwordHintId"], [1, 3, "passwordHintId"]]
<>
@@ -77,26 +77,26 @@ You can then pass the generated ID to different at
>
```
-**Let's walk through an example to see when this is useful.**
+**Vamos analisar um exemplo para ver quando isso é útil.**
-[HTML accessibility attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) like [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) let you specify that two tags are related to each other. For example, you can specify that an element (like an input) is described by another element (like a paragraph).
+[Atributos de acessibilidade do HTML](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) como [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) permite especificar que duas tags estão relacionadas entre si. Por exemplo, você pode especificar que um elemento (como um input) seja descrito por outro elemento (como um parágrafo).
-In regular HTML, you would write it like this:
+No HTML normal, você escreveria assim:
```html {5,8}
- Password:
+ Senha:
- The password should contain at least 18 characters
+ A senha deve conter pelo menos 18 caracteres
```
-However, hardcoding IDs like this is not a good practice in React. A component may be rendered more than once on the page--but IDs have to be unique! Instead of hardcoding an ID, generate a unique ID with `useId`:
+No entanto, codificar IDs como esse não é uma boa prática no React. Um componente pode ser renderizado mais de uma vez na página, mas os IDs devem ser únicos! Em vez de codificar um ID, gere um ID único com `useId`:
```js {4,11,14}
import { useId } from 'react';
@@ -106,21 +106,21 @@ function PasswordField() {
return (
<>
- Password:
+ Senha:
- The password should contain at least 18 characters
+ A senha deve conter pelo menos 18 caracteres
>
);
}
```
-Now, even if `PasswordField` appears multiple times on the screen, the generated IDs won't clash.
+Agora, mesmo que `PasswordField` apareça várias vezes na tela, os IDs gerados não entrarão em conflito.
@@ -132,14 +132,14 @@ function PasswordField() {
return (
<>
- Password:
+ Senha:
- The password should contain at least 18 characters
+ A senha deve conter pelo menos 18 caracteres
>
);
@@ -148,9 +148,9 @@ function PasswordField() {
export default function App() {
return (
<>
- Choose password
+ Escolha uma senha
- Confirm password
+ Confirme a senha
>
);
@@ -163,33 +163,33 @@ input { margin: 5px; }
-[Watch this video](https://www.youtube.com/watch?v=0dNzNcuEuOo) to see the difference in the user experience with assistive technologies.
+[Assista à esse vídeo](https://www.youtube.com/watch?v=0dNzNcuEuOo) para ver a diferença na experiência do usuário com tecnologias assistivas.
-With [server rendering](/reference/react-dom/server), **`useId` requires an identical component tree on the server and the client**. If the trees you render on the server and the client don't match exactly, the generated IDs won't match.
+Com a [renderização do servidor](/reference/react-dom/server), **`useId` requer uma árvore de componentes idêntica no servidor e no cliente**. Se as árvores que você renderizar no servidor e no cliente não corresponderem exatamente, os IDs gerados não corresponderão.
-#### Why is useId better than an incrementing counter? {/*why-is-useid-better-than-an-incrementing-counter*/}
+#### Por que useId é melhor que um contador de incremento? {/*why-is-useid-better-than-an-incrementing-counter*/}
-You might be wondering why `useId` is better than incrementing a global variable like `nextId++`.
+Você pode estar se perguntando por que `useId` é melhor do que incrementar uma variável global como `nextId++`.
-The primary benefit of `useId` is that React ensures that it works with [server rendering.](/reference/react-dom/server) During server rendering, your components generate HTML output. Later, on the client, [hydration](/reference/react-dom/client/hydrateRoot) attaches your event handlers to the generated HTML. For hydration to work, the client output must match the server HTML.
+O principal benefício do `useId` é que o React garante que funcione com a [renderização do servidor.](/reference/react-dom/server) Durante a renderização do servidor, seus componentes geram saídas HTML. Posteriormente, no cliente, a [hidratação](/reference/react-dom/client/hydrateRoot) anexa seus manipuladores de eventos ao HTML gerado. Para que a hidratação funcione, a saída do cliente deve corresponder ao HTML do servidor.
-This is very difficult to guarantee with an incrementing counter because the order in which the client components are hydrated may not match the order in which the server HTML was emitted. By calling `useId`, you ensure that hydration will work, and the output will match between the server and the client.
+Isso é muito difícil de garantir com um contador de incremento porque a ordem na qual os componentes do cliente são hidratados pode não corresponder à ordem na qual o HTML do servidor foi emitido. Ao chamar `useId`, você garante que a hidratação funcionará e a saída corresponderá entre o servidor e o cliente.
-Inside React, `useId` is generated from the "parent path" of the calling component. This is why, if the client and the server tree are the same, the "parent path" will match up regardless of rendering order.
+Dentro do React, `useId` é gerado a partir do "caminho pai" do componente chamado. É por isso que, se o cliente e a árvore do servidor forem iguais, o "caminho pai" corresponderá, independentemente da ordem de renderização.
---
-### Generating IDs for several related elements {/*generating-ids-for-several-related-elements*/}
+### Gerando IDs para vários elementos relacionados {/*generating-ids-for-several-related-elements*/}
-If you need to give IDs to multiple related elements, you can call `useId` to generate a shared prefix for them:
+Se você precisar fornecer IDs para vários elementos relacionados, você pode chamar `useId` para gerar um prefixo compartilhado para eles:
@@ -200,10 +200,10 @@ export default function Form() {
const id = useId();
return (
- First Name:
+ Primeiro nome:
- Last Name:
+ Sobrenome:
);
@@ -216,20 +216,20 @@ input { margin: 5px; }
-This lets you avoid calling `useId` for every single element that needs a unique ID.
+Isso permite que você evite chamar `useId` para cada elemento que precisa de um ID único.
---
-### Specifying a shared prefix for all generated IDs {/*specifying-a-shared-prefix-for-all-generated-ids*/}
+### Especificando um prefixo compartilhado para todos os IDs gerados {/*specifying-a-shared-prefix-for-all-generated-ids*/}
-If you render multiple independent React applications on a single page, pass `identifierPrefix` as an option to your [`createRoot`](/reference/react-dom/client/createRoot#parameters) or [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) calls. This ensures that the IDs generated by the two different apps never clash because every identifier generated with `useId` will start with the distinct prefix you've specified.
+Se você renderizar várias aplicações React independentes em uma única página, passe `identifierPrefix` como uma opção para suas chamadas [`createRoot`](/reference/react-dom/client/createRoot#parameters) ou [`hydrateRoot`](/reference/react-dom/client/hydrateRoot). Isso garante que os IDs gerados pelos dois aplicativos diferentes nunca entrem em conflito porque cada identificador gerado com `useId` começará com o prefixo distinto que você especificou.
```html index.html
- My app
+ Meu app
@@ -242,18 +242,18 @@ import { useId } from 'react';
function PasswordField() {
const passwordHintId = useId();
- console.log('Generated identifier:', passwordHintId)
+ console.log('Identificador gerado:', passwordHintId)
return (
<>
- Password:
+ Senha:
- The password should contain at least 18 characters
+ A senha deve conter pelo menos 18 caracteres
>
);
@@ -262,7 +262,7 @@ function PasswordField() {
export default function App() {
return (
<>
- Choose password
+ Escolha uma senha
>
);
From ca93140eb98a7ff4364a719075fccea980c55b55 Mon Sep 17 00:00:00 2001
From: Ahmed Abdelbaset
Date: Fri, 2 Jun 2023 14:42:16 +0300
Subject: [PATCH 28/67] Fix option's mdn link (#6080)
---
src/content/reference/react-dom/components/option.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/content/reference/react-dom/components/option.md b/src/content/reference/react-dom/components/option.md
index 8d930523f..84725854c 100644
--- a/src/content/reference/react-dom/components/option.md
+++ b/src/content/reference/react-dom/components/option.md
@@ -23,7 +23,7 @@ The [built-in browser `` component](https://developer.mozilla.org/en-US/
### ` ` {/*option*/}
-The [built-in browser ` ` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) lets you render an option inside a [``](/reference/react-dom/components/select) box.
+The [built-in browser `` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option) lets you render an option inside a [``](/reference/react-dom/components/select) box.
```js
From 8313857315171de577230ade4cf870f75ee12ff0 Mon Sep 17 00:00:00 2001
From: Ahmed Abdelbaset
Date: Mon, 5 Jun 2023 15:36:56 +0300
Subject: [PATCH 29/67] Fix(github-actions): Update gh-actions dependencies to
versions that utilize Node.js v16 (#6084)
* Update site_lint.yml
* Update site_lint.yml
---
.github/workflows/site_lint.yml | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/.github/workflows/site_lint.yml b/.github/workflows/site_lint.yml
index 560e22643..34ca6d7b8 100644
--- a/.github/workflows/site_lint.yml
+++ b/.github/workflows/site_lint.yml
@@ -16,12 +16,12 @@ jobs:
steps:
- uses: actions/checkout@v1
- name: Use Node.js 20.x
- uses: actions/setup-node@v1
+ uses: actions/setup-node@v3
with:
node-version: 20.x
- name: Install deps and build (with cache)
- uses: bahmutov/npm-install@v1.7.10
+ uses: bahmutov/npm-install@v1.8.32
- name: Lint codebase
run: yarn ci-check
From 940e963798533168d9966ce70aaa05356dfa3f95 Mon Sep 17 00:00:00 2001
From: Cole Milne
Date: Thu, 8 Jun 2023 11:59:56 -0600
Subject: [PATCH 30/67] Move recent conferences from 'Upcoming' to 'Past'
section (#6089)
---
src/content/community/conferences.md | 60 ++++++++++++++--------------
1 file changed, 30 insertions(+), 30 deletions(-)
diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md
index 792dbeecf..06711db6d 100644
--- a/src/content/community/conferences.md
+++ b/src/content/community/conferences.md
@@ -10,36 +10,6 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
## Upcoming Conferences {/*upcoming-conferences*/}
-### Reactathon 2023 {/*reactathon-2023*/}
-May 2 - 3, 2023. San Francisco, CA, USA
-
-[Website](https://reactathon.com) - [Twitter](https://twitter.com/reactathon) - [YouTube](https://www.youtube.com/realworldreact)
-
-### RemixConf 2023 {/*remixconf-2023*/}
-May, 2023. Salt Lake City, UT
-
-[Website](https://remix.run/conf/2023) - [Twitter](https://twitter.com/remix_run)
-
-### App.js Conf 2023 {/*appjs-conf-2023*/}
-May 10 - 12, 2023. In-person in Kraków, Poland + remote
-
-[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf)
-
-### Chain React 2023 {/*chain-react-2023*/}
-May 17 - 19, 2023. Portland, OR, USA
-
-[Website](https://chainreactconf.com/) - [Twitter](https://twitter.com/ChainReactConf) - [Facebook](https://www.facebook.com/ChainReactConf/) - [Youtube](https://www.youtube.com/channel/UCwpSzVt7QpLDbCnPXqR97-g/playlists)
-
-### Render(ATL) 2023 🍑 {/*renderatl-2023-*/}
-May 31 - June 2, 2023. Atlanta, GA, USA
-
-[Website](https://renderatl.com) - [Discord](https://www.renderatl.com/discord) - [Twitter](https://twitter.com/renderATL) - [Instagram](https://www.instagram.com/renderatl/) - [Facebook](https://www.facebook.com/renderatl/) - [LinkedIn](https://www.linkedin.com/company/renderatl) - [Podcast](https://www.renderatl.com/culture-and-code#/)
-
-### React Summit 2023 {/*react-summit-2023*/}
-June 2 & 6, 2023. In-person in Amsterdam, Netherlands + remote first interactivity (hybrid event)
-
-[Website](https://reactsummit.com) - [Twitter](https://twitter.com/reactsummit) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://portal.gitnation.org/events/react-summit-2023)
-
### React Norway 2023 {/*react-norway-2023*/}
June 16th, 2023. Larvik, Norway
@@ -82,6 +52,36 @@ December 8 & 12, 2023. In-person in Berlin, Germany + remote first interactivity
## Past Conferences {/*past-conferences*/}
+### React Summit 2023 {/*react-summit-2023*/}
+June 2 & 6, 2023. In-person in Amsterdam, Netherlands + remote first interactivity (hybrid event)
+
+[Website](https://reactsummit.com) - [Twitter](https://twitter.com/reactsummit) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://portal.gitnation.org/events/react-summit-2023)
+
+### Render(ATL) 2023 🍑 {/*renderatl-2023-*/}
+May 31 - June 2, 2023. Atlanta, GA, USA
+
+[Website](https://renderatl.com) - [Discord](https://www.renderatl.com/discord) - [Twitter](https://twitter.com/renderATL) - [Instagram](https://www.instagram.com/renderatl/) - [Facebook](https://www.facebook.com/renderatl/) - [LinkedIn](https://www.linkedin.com/company/renderatl) - [Podcast](https://www.renderatl.com/culture-and-code#/)
+
+### Chain React 2023 {/*chain-react-2023*/}
+May 17 - 19, 2023. Portland, OR, USA
+
+[Website](https://chainreactconf.com/) - [Twitter](https://twitter.com/ChainReactConf) - [Facebook](https://www.facebook.com/ChainReactConf/) - [Youtube](https://www.youtube.com/channel/UCwpSzVt7QpLDbCnPXqR97-g/playlists)
+
+### App.js Conf 2023 {/*appjs-conf-2023*/}
+May 10 - 12, 2023. In-person in Kraków, Poland + remote
+
+[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf)
+
+### RemixConf 2023 {/*remixconf-2023*/}
+May, 2023. Salt Lake City, UT
+
+[Website](https://remix.run/conf/2023) - [Twitter](https://twitter.com/remix_run)
+
+### Reactathon 2023 {/*reactathon-2023*/}
+May 2 - 3, 2023. San Francisco, CA, USA
+
+[Website](https://reactathon.com) - [Twitter](https://twitter.com/reactathon) - [YouTube](https://www.youtube.com/realworldreact)
+
### React Miami 2023 {/*react-miami-2023*/}
April 20 - 21, 2023. Miami, FL, USA
From 9a1e1c61fcdaf7177e89494bd70bfdc7900e37ad Mon Sep 17 00:00:00 2001
From: Christophe Porteneuve
Date: Fri, 9 Jun 2023 09:48:21 +0200
Subject: [PATCH 31/67] Fix incorrect inner component reference (#6044)
The inner component is `EditForm`, not `EditContact`.
---
src/content/learn/you-might-not-need-an-effect.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/content/learn/you-might-not-need-an-effect.md b/src/content/learn/you-might-not-need-an-effect.md
index 05f053be2..a3b33d3a7 100644
--- a/src/content/learn/you-might-not-need-an-effect.md
+++ b/src/content/learn/you-might-not-need-an-effect.md
@@ -1438,7 +1438,7 @@ It would be nice if there was a way to tell React that when `savedContact.id` is
-Split the `EditContact` component in two. Move all the form state into the inner `EditForm` component. Export the outer `EditContact` component, and make it pass `savedContact.id` as the `key` to the inner `EditContact` component. As a result, the inner `EditForm` component resets all of the form state and recreates the DOM whenever you select a different contact.
+Split the `EditContact` component in two. Move all the form state into the inner `EditForm` component. Export the outer `EditContact` component, and make it pass `savedContact.id` as the `key` to the inner `EditForm` component. As a result, the inner `EditForm` component resets all of the form state and recreates the DOM whenever you select a different contact.
From 4961d510b0325dc74e08a93e375083b20c8ab4a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vinicius=20Cerqueira=20Bonif=C3=A1cio?=
Date: Sat, 10 Jun 2023 21:07:49 +0300
Subject: [PATCH 32/67] fix(reacting-to-input-with-state) (#683)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* fix(reacting-to-input-with-state): traduz a seção 'reacting to input state' do menu 'managing state'
* fix(code-review-pull-683): corrige tradução
* fix(code-review-pull-683): corrige tradução (parte 2)
* fix(code-review-pull-683): corrige tradução (final)
---
.../learn/reacting-to-input-with-state.md | 354 +++++++++---------
1 file changed, 177 insertions(+), 177 deletions(-)
diff --git a/src/content/learn/reacting-to-input-with-state.md b/src/content/learn/reacting-to-input-with-state.md
index 522aa63a1..36e7244dc 100644
--- a/src/content/learn/reacting-to-input-with-state.md
+++ b/src/content/learn/reacting-to-input-with-state.md
@@ -1,37 +1,37 @@
---
-title: Reacting to Input with State
+title: Reagindo à entrada de dados com state
---
-React provides a declarative way to manipulate the UI. Instead of manipulating individual pieces of the UI directly, you describe the different states that your component can be in, and switch between them in response to the user input. This is similar to how designers think about the UI.
+React oferece uma maneira declarativa de manipular a interface do usuário. Em vez de manipular diretamente partes individuais da UI, você descreve os diferentes estados em que seu componente pode estar e alterna entre eles em resposta à entrada do usuário. Isso é semelhante ao modo como os designers pensam sobre a UI.
-* How declarative UI programming differs from imperative UI programming
-* How to enumerate the different visual states your component can be in
-* How to trigger the changes between the different visual states from code
+* Como programação da UI difere entre declarativa e imperativa
+* Como enumerar os diferentes estados visuais em que seu componente pode estar
+* Como acionar as alterações entre os diferentes estados visuais a partir do código
-## How declarative UI compares to imperative {/*how-declarative-ui-compares-to-imperative*/}
+## Como a UI declarativa se compara à imperativa {/*how-declarative-ui-compares-to-imperative*/}
-When you design UI interactions, you probably think about how the UI *changes* in response to user actions. Consider a form that lets the user submit an answer:
+Ao projetar interações de UI, você provavelmente pensa em como a UI *muda* em resposta às ações do usuário. Considere um formulário que permite que o usuário envie uma resposta:
-* When you type something into the form, the "Submit" button **becomes enabled.**
-* When you press "Submit", both the form and the button **become disabled,** and a spinner **appears.**
-* If the network request succeeds, the form **gets hidden,** and the "Thank you" message **appears.**
-* If the network request fails, an error message **appears,** and the form **becomes enabled** again.
+* Quando você digita algo no formulário, o botão "Enviar" **fica habilitado**.
+* Quando você pressiona "Enviar", tanto o formulário quanto o botão ficam desativados e um loader aparece.
+* Se a solicitação de rede for bem-sucedida, o formulário ficará oculto e a mensagem "Obrigado" aparecerá.
+* Se a solicitação de rede falhar, uma mensagem de erro **aparecerá** e o formulário **ficará habilitado** novamente.
-In **imperative programming,** the above corresponds directly to how you implement interaction. You have to write the exact instructions to manipulate the UI depending on what just happened. Here's another way to think about this: imagine riding next to someone in a car and telling them turn by turn where to go.
+Na **programação imperativa**, o que foi dito acima corresponde diretamente a como você implementa a interação. Você precisa escrever as instruções exatas para manipular a interface do usuário, dependendo do que acabou de acontecer. Eis outra maneira de pensar sobre isso: imagine estar ao lado de alguém em um carro e dizer a essa pessoa, curva à curva, para onde ir.
-
+
-They don't know where you want to go, they just follow your commands. (And if you get the directions wrong, you end up in the wrong place!) It's called *imperative* because you have to "command" each element, from the spinner to the button, telling the computer *how* to update the UI.
+Essa pessoa não sabe para onde você quer ir, apenas segue os seus comandos. (E se você errar as instruções, acabará no lugar errado!) É chamada de *imperativa* porque você precisa "comandar" cada elemento, desde o loader até o botão, dizendo ao computador *como* atualizar a interface do usuário.
-In this example of imperative UI programming, the form is built *without* React. It only uses the browser [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model):
+Neste exemplo de programação imperativa de UI, o formulário é criado *sem* o React. Ele usa apenas o [DOM](https://developer.mozilla.org/pt-BR/docs/Web/API/Document_Object_Model) do navegador:
@@ -81,13 +81,13 @@ function disable(el) {
}
function submitForm(answer) {
- // Pretend it's hitting the network.
+ // Simula que está acessando a rede.
return new Promise((resolve, reject) => {
setTimeout(() => {
- if (answer.toLowerCase() == 'istanbul') {
+ if (answer.toLowerCase() == 'istambul') {
resolve();
} else {
- reject(new Error('Good guess but a wrong answer. Try again!'));
+ reject(new Error('Bom palpite, mas resposta errada. Tente novamente!'));
}
}, 1500);
});
@@ -111,17 +111,17 @@ textarea.oninput = handleTextareaChange;
```html public/index.html
- City quiz
+ Questionário sobre cidades
- What city is located on two continents?
+ Qual cidade está localizada em dois continentes?
- Submit
- Loading...
+ Enviar
+ Carregando...
-That's right!
+É isso mesmo!