From ab5a18039cbf1254a602788489042c9a133c2428 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vinicius=20Cerqueira=20Bonif=C3=A1cio?= Date: Sun, 7 May 2023 14:21:52 +0300 Subject: [PATCH 1/4] =?UTF-8?q?fix(reacting-to-input-with-state):=20traduz?= =?UTF-8?q?=20a=20se=C3=A7=C3=A3o=20'reacting=20to=20input=20state'=20do?= =?UTF-8?q?=20menu=20'managing=20state'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../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..edf4d4bbf 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 IU, 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 IU. -* 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 IU 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 IU 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 IU, você provavelmente pensa em como a IU *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 a 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. +Ele não sabem 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 IU, o formulário é criado *sem* o React. Ele usa apenas o [DOM](https://developer.mozilla.org/en-US/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?


- - + +
-

That's right!

+

É isso mesmo!