From 1c4a47d91efb8e40e445ea576052744c84dcbedf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nat=C3=A3=20Rodrigo=20Santos=20Pereira?= Date: Tue, 25 Apr 2023 09:54:43 -0300 Subject: [PATCH 1/6] Translation of the describing-the-ui page --- src/content/learn/describing-the-ui.md | 94 +++++++++++++------------- 1 file changed, 48 insertions(+), 46 deletions(-) diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md index 6df4c0475..d47fb46a3 100644 --- a/src/content/learn/describing-the-ui.md +++ b/src/content/learn/describing-the-ui.md @@ -1,30 +1,29 @@ --- -title: Describing the UI +title: Construindo a UI --- -React is a JavaScript library for rendering user interfaces (UI). UI is built from small units like buttons, text, and images. React lets you combine them into reusable, nestable *components.* From web sites to phone apps, everything on the screen can be broken down into components. In this chapter, you'll learn to create, customize, and conditionally display React components. +React é uma biblioteca JavaScript para renderizar interfaces de usuário (UI). A interface do usuário é construída a partir de pequenas unidades, como botões, texto e imagens. O React permite combiná-los em *componentes.* encaixáveis ​​e reutilizáveis. De sites a aplicativos de telefone, tudo na tela pode ser dividido em componentes. Neste capítulo, você aprenderá a criar, personalizar e exibir componentes React condicionalmente. -* [How to write your first React component](/learn/your-first-component) -* [When and how to create multi-component files](/learn/importing-and-exporting-components) -* [How to add markup to JavaScript with JSX](/learn/writing-markup-with-jsx) -* [How to use curly braces with JSX to access JavaScript functionality from your components](/learn/javascript-in-jsx-with-curly-braces) -* [How to configure components with props](/learn/passing-props-to-a-component) -* [How to conditionally render components](/learn/conditional-rendering) -* [How to render multiple components at a time](/learn/rendering-lists) -* [How to avoid confusing bugs by keeping components pure](/learn/keeping-components-pure) +* [Como criar seu primeiro componente React](/learn/your-first-component) +* [Quando e como criar múltiplos componentes](/learn/importing-and-exporting-components) +* [Como escrever tags dentro do JavaScript usando JSX](/learn/writing-markup-with-jsx) +* [Como utilizar chaves no JSX para utilizar funcões JavaScript nos seus componentes](/learn/javascript-in-jsx-with-curly-braces) +* [Como configurar componentes utilizando props(propriedades)](/learn/passing-props-to-a-component) +* [Como renderizar componentes de forma condicional](/learn/conditional-rendering) +* [Como renderizar múltiplos componentes de uma só vez](/learn/rendering-lists) +* [Como evitar bugs e confusões mantendo seus componentes puros](/learn/keeping-components-pure) -## Your first component {/*your-first-component*/} - -React applications are built from isolated pieces of UI called *components*. A React component is a JavaScript function that you can sprinkle with markup. Components can be as small as a button, or as large as an entire page. Here is a `Gallery` component rendering three `Profile` components: +## Seu Primeiro Componente {/*your-first-component*/} +Aplicações React são construídas a partir de partes isoladas da UI chamadas de *componentes*. Um componente React é uma função JavaScript que você pode adicionar no seu código com tags. Os componentes podem ser tão pequenos quanto um botão ou tão grandes quanto uma página inteira. Abaixo você pode ver um componente `Gallery` renderizando três componentes `Profile`: ```js @@ -57,13 +56,13 @@ img { margin: 0 10px 10px 0; height: 90px; } -Read **[Your First Component](/learn/your-first-component)** to learn how to declare and use React components. +Leia **[Seu Primeiro Componente](/learn/your-first-component)** para aprender como criar e usar componentes React. -## Importing and exporting components {/*importing-and-exporting-components*/} +## Importando e exportando componentes {/*importing-and-exporting-components*/} -You can declare many components in one file, but large files can get difficult to navigate. To solve this, you can *export* a component into its own file, and then *import* that component from another file: +Você pode declarar vários componentes em um único arquivo, mas arquivos grades podem ser difíceis de navegar. Para resolver isso, você pode *exportar* um componente no seu próprio arquivo, e então *importar* este componente em outro arquivo: @@ -112,22 +111,22 @@ img { margin: 0 10px 10px 0; } -Read **[Importing and Exporting Components](/learn/importing-and-exporting-components)** to learn how to split components into their own files. +Leia **[Importando e exportando componentes](/learn/importing-and-exporting-components)** para aprender como separar seus componentes em arquivos próprios. -## Writing markup with JSX {/*writing-markup-with-jsx*/} +## Escrevendo markup com JSX {/*writing-markup-with-jsx*/} -Each React component is a JavaScript function that may contain some markup that React renders into the browser. React components use a syntax extension called JSX to represent that markup. JSX looks a lot like HTML, but it is a bit stricter and can display dynamic information. +Cada componente React é uma função JavaScript que pode conter tags que o React renderiza no navegador. Componentes React utilizam uma extensão de sintaxe chamada JSX para representar essas tags. JSX parece muito com HTML, mas é um pouco mais rígido e pode exibir informações de forma dinâmica. -If we paste existing HTML markup into a React component, it won't always work: +Nem sempre colar um HTML pré-existente irá funcionar em um componente React: ```js export default function TodoList() { return ( - // This doesn't quite work! + // Isto não vai funcionar!

Hedy Lamarr's Todos

-If you have existing HTML like this, you can fix it using a [converter](https://transform.tools/html-to-jsx): +Você pode consertar seu HTML pré-existente usando um [conversor](https://transform.tools/html-to-jsx): @@ -181,13 +180,13 @@ img { height: 90px; } -Read **[Writing Markup with JSX](/learn/writing-markup-with-jsx)** to learn how to write valid JSX. +Leia **[Escrevendo tags com JSX](/learn/writing-markup-with-jsx)** para aprender como escrever JSX corretamente. -## JavaScript in JSX with curly braces {/*javascript-in-jsx-with-curly-braces*/} +## JavaScript no JSX utilizando chaves {/*javascript-in-jsx-with-curly-braces*/} -JSX lets you write HTML-like markup inside a JavaScript file, keeping rendering logic and content in the same place. Sometimes you will want to add a little JavaScript logic or reference a dynamic property inside that markup. In this situation, you can use curly braces in your JSX to "open a window" to JavaScript: +JSX permite que você escreva de maneira análoga ao HTML dentro de um arquivo JavaScript, mantendo a lógica de renderização e o conteúdo no mesmo lugar. Em alguns momentos, você pode querer adicionar alguma lógica JavaScript ou uma propriedade dinâmica em uma tag. Neste tipo de situação, você pode utilizar chaves no JSX para "abrir uma janela" que entenda JavaScript: @@ -229,13 +228,13 @@ body > div > div { padding: 20px; } -Read **[JavaScript in JSX with Curly Braces](/learn/javascript-in-jsx-with-curly-braces)** to learn how to access JavaScript data from JSX. +Leia **[JavaScript no JSX utilizando chaves](/learn/javascript-in-jsx-with-curly-braces)** para aprender como acessar dados do seu código JavaScript a partir do JSX. -## Passing props to a component {/*passing-props-to-a-component*/} +## Passando propriedades para um componente {/*passing-props-to-a-component*/} -React components use *props* to communicate with each other. Every parent component can pass some information to its child components by giving them props. Props might remind you of HTML attributes, but you can pass any JavaScript value through them, including objects, arrays, functions, and even JSX! +Componentes React utilizam *propriedades (props)* para se comunicarem entre si. Cada componente pai pode passar informações para seus componentes filhos por meio de props. Props lembram um pouco os atributos HTML, mas você pode passar uma variável JavaScript por meio delas, incluindo objetos, arrays, funções e até mesmo JSX! @@ -310,15 +309,16 @@ export function getImageUrl(person, size = 's') { -Read **[Passing Props to a Component](/learn/passing-props-to-a-component)** to learn how to pass and read props. +Leia **[Passando propriedades para um componente](/learn/passing-props-to-a-component)** para aprender como passar e ler props. ## Conditional rendering {/*conditional-rendering*/} -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. +Frequentemente você vai precisar exibir diferentes conteúdos nos seus componentes de acordo com certas condições. No React, você pode renderizar JSX condicionalmente utilizando uma sintaxe parecida com JavaScript, que usa o comando `if`, e operadores lógicos `&&` e `? :`. + +Neste exemplo, o operador JavaScript `&&` é utilizado para renderizar condicionalmente um marcação de 'concluído': -In this example, the JavaScript `&&` operator is used to conditionally render a checkmark: @@ -358,15 +358,16 @@ export default function PackingList() { -Read **[Conditional Rendering](/learn/conditional-rendering)** to learn the different ways to render content conditionally. +Leia **[Renderização Condicional](/learn/conditional-rendering)** para aprender diferentes maneiras de renderizar um conteúdo de forma condicional. -## Rendering lists {/*rendering-lists*/} +## Renderizando Listas {/*rendering-lists*/} -You will often want to display multiple similar components from a collection of data. You can use JavaScript's `filter()` and `map()` with React to filter and transform your array of data into an array of components. +Frequentemente você vai desejar exibir vários componentes similares a partir de uma lista de dados. Você pode utilizar as funções `filter()` e `map()` do JavaScript no React para filtrar e transformar suas listas de dados em listas de componentes. + +Para cada item da lista, você precisa especificar uma chave (`key`). Chaves permitem que o React rastreie o local de cada item da lista, mesmo que a lista mude. -For each array item, you will need to specify a `key`. Usually, you will want to use an ID from the database as a `key`. Keys let React keep track of each item's place in the list even if the list changes. @@ -458,18 +459,19 @@ h2 { font-size: 20px; } -Read **[Rendering Lists](/learn/rendering-lists)** to learn how to render a list of components, and how to choose a key. +Leia **[Renderizando Listas](/learn/rendering-lists)** para aprender como renderizar uma lista de compomentes e como escolher uma chave para cada item da lista. -## Keeping components pure {/*keeping-components-pure*/} +## Mantendo seus componentes puros {/*keeping-components-pure*/} + +Algumas funções JavaScript são *puras*. Uma função pura: -Some JavaScript functions are *pure.* A pure function: -* **Minds its own business.** It does not change any objects or variables that existed before it was called. -* **Same inputs, same output.** Given the same inputs, a pure function should always return the same result. +* **Cuida apenas de suas próprias responsabilidades.** Isso significa que ela não modifica nenhum objeto ou variável que existia antes que ela fosse chamada. +* **Mesmas entradas, mesma saída.** Dadas as mesmas entradas, uma função pura sempre deve retornar o mesmo resultado. -By strictly only writing your components as pure functions, you can avoid an entire class of baffling bugs and unpredictable behavior as your codebase grows. Here is an example of an impure component: +Escrevendo apenas funções puras, você pode evitar muitos erros e comportamentos imprevisíveis conforme seu código aumenta. Este é um exemplo de componente impuro: @@ -495,7 +497,7 @@ export default function TeaSet() { -You can make this component pure by passing a prop instead of modifying a preexisting variable: +Você pode tornar esse componente puro passando uma prop ao invés de modificar uma variável pré-existente: @@ -519,12 +521,12 @@ export default function TeaSet() { -Read **[Keeping Components Pure](/learn/keeping-components-pure)** to learn how to write components as pure, predictable functions. +Leia **[Mantendo seus componentes puros](/learn/keeping-components-pure)** para aprender como criar componentes puros e funções previsíveis. -## What's next? {/*whats-next*/} +## O que vem depois? {/*whats-next*/} -Head over to [Your First Component](/learn/your-first-component) to start reading this chapter page by page! +Navegue para a página [Seu Primeiro Componente](/learn/your-first-component) para começar a ler esse capítulo página por página! -Or, if you're already familiar with these topics, why not read about [Adding Interactivity](/learn/adding-interactivity)? +Ou, se você já tem familirialidade com estes tópicos, por quê não ler sobre [Adicionando Interatividade](/learn/adding-interactivity)? From eff7b99e3be2e9421544ddac412bd0a9c6000ef8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nat=C3=A3=20Pereira?= <57020127+natrodrigo@users.noreply.github.com> Date: Tue, 25 Apr 2023 13:03:38 -0300 Subject: [PATCH 2/6] Update src/content/learn/describing-the-ui.md Co-authored-by: Uilian Souza --- src/content/learn/describing-the-ui.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md index d47fb46a3..38799bc8e 100644 --- a/src/content/learn/describing-the-ui.md +++ b/src/content/learn/describing-the-ui.md @@ -62,7 +62,7 @@ Leia **[Seu Primeiro Componente](/learn/your-first-component)** para aprender co ## Importando e exportando componentes {/*importing-and-exporting-components*/} -Você pode declarar vários componentes em um único arquivo, mas arquivos grades podem ser difíceis de navegar. Para resolver isso, você pode *exportar* um componente no seu próprio arquivo, e então *importar* este componente em outro arquivo: +Você pode declarar vários componentes em um único arquivo, mas arquivos grandes podem ser difíceis de navegar. Para resolver isso, você pode *exportar* um componente para um arquivo separado, e então *importar* este componente em outro arquivo: From 26617f4d0f75b8465f43739794799e5ca6e71c9e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nat=C3=A3=20Pereira?= <57020127+natrodrigo@users.noreply.github.com> Date: Tue, 25 Apr 2023 13:06:49 -0300 Subject: [PATCH 3/6] Update src/content/learn/describing-the-ui.md Co-authored-by: Uilian Souza --- src/content/learn/describing-the-ui.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md index 38799bc8e..5393638d2 100644 --- a/src/content/learn/describing-the-ui.md +++ b/src/content/learn/describing-the-ui.md @@ -234,7 +234,7 @@ Leia **[JavaScript no JSX utilizando chaves](/learn/javascript-in-jsx-with-curly ## Passando propriedades para um componente {/*passing-props-to-a-component*/} -Componentes React utilizam *propriedades (props)* para se comunicarem entre si. Cada componente pai pode passar informações para seus componentes filhos por meio de props. Props lembram um pouco os atributos HTML, mas você pode passar uma variável JavaScript por meio delas, incluindo objetos, arrays, funções e até mesmo JSX! +Componentes React utilizam *propriedades (props)* para se comunicarem entre si. Cada componente pai pode passar informações para seus componentes filhos por meio de props. Props lembram um pouco os atributos HTML, mas você pode passar qualquer valor que seja válido em JavaScript por meio delas, incluindo objetos, arrays, funções e até mesmo JSX! From 95573a04e52c1bc9877c06acc30566ff9803e99d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nat=C3=A3=20Rodrigo=20Santos=20Pereira?= Date: Tue, 25 Apr 2023 13:27:33 -0300 Subject: [PATCH 4/6] Update src/content/learn/describing-the-ui.md with reviews --- src/content/learn/describing-the-ui.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md index 5393638d2..2b0946f2c 100644 --- a/src/content/learn/describing-the-ui.md +++ b/src/content/learn/describing-the-ui.md @@ -17,13 +17,13 @@ React é uma biblioteca JavaScript para renderizar interfaces de usuário (UI). * [Como configurar componentes utilizando props(propriedades)](/learn/passing-props-to-a-component) * [Como renderizar componentes de forma condicional](/learn/conditional-rendering) * [Como renderizar múltiplos componentes de uma só vez](/learn/rendering-lists) -* [Como evitar bugs e confusões mantendo seus componentes puros](/learn/keeping-components-pure) +* [Como evitar comportamentos inesperados mantendo seus componentes puros](/learn/keeping-components-pure) ## Seu Primeiro Componente {/*your-first-component*/} -Aplicações React são construídas a partir de partes isoladas da UI chamadas de *componentes*. Um componente React é uma função JavaScript que você pode adicionar no seu código com tags. Os componentes podem ser tão pequenos quanto um botão ou tão grandes quanto uma página inteira. Abaixo você pode ver um componente `Gallery` renderizando três componentes `Profile`: +Aplicações React são construídas a partir de partes isoladas da UI chamadas de *componentes*. Um componente React é uma função JavaScript que você pode usar em combinação com tags. Os componentes podem ser tão pequenos quanto um botão ou tão grandes quanto uma página inteira. Abaixo você pode ver um componente `Gallery` renderizando três componentes `Profile`: ```js @@ -115,7 +115,7 @@ Leia **[Importando e exportando componentes](/learn/importing-and-exporting-comp -## Escrevendo markup com JSX {/*writing-markup-with-jsx*/} +## Escrevendo tags com JSX {/*writing-markup-with-jsx*/} Cada componente React é uma função JavaScript que pode conter tags que o React renderiza no navegador. Componentes React utilizam uma extensão de sintaxe chamada JSX para representar essas tags. JSX parece muito com HTML, mas é um pouco mais rígido e pode exibir informações de forma dinâmica. @@ -366,7 +366,7 @@ Leia **[Renderização Condicional](/learn/conditional-rendering)** para aprende Frequentemente você vai desejar exibir vários componentes similares a partir de uma lista de dados. Você pode utilizar as funções `filter()` e `map()` do JavaScript no React para filtrar e transformar suas listas de dados em listas de componentes. -Para cada item da lista, você precisa especificar uma chave (`key`). Chaves permitem que o React rastreie o local de cada item da lista, mesmo que a lista mude. +Para cada item da lista, você precisa especificar uma chave (`key`). Normalmente é desejável que você use um ID do seu banco de dados como `key`. Chaves permitem que o React rastreie o local de cada item da lista, mesmo que a lista mude. From 0e67a382b36a102774d00cf7cc9df79a13fce420 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nat=C3=A3=20Rodrigo=20Santos=20Pereira?= Date: Wed, 26 Apr 2023 10:55:42 -0300 Subject: [PATCH 5/6] Update src/content/learn/describing-the-ui.md --- src/content/learn/describing-the-ui.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md index 2b0946f2c..d3a1150c6 100644 --- a/src/content/learn/describing-the-ui.md +++ b/src/content/learn/describing-the-ui.md @@ -60,7 +60,7 @@ Leia **[Seu Primeiro Componente](/learn/your-first-component)** para aprender co -## Importando e exportando componentes {/*importing-and-exporting-components*/} +## Importando e Exportando Componentes {/*importing-and-exporting-components*/} Você pode declarar vários componentes em um único arquivo, mas arquivos grandes podem ser difíceis de navegar. Para resolver isso, você pode *exportar* um componente para um arquivo separado, e então *importar* este componente em outro arquivo: @@ -115,7 +115,7 @@ Leia **[Importando e exportando componentes](/learn/importing-and-exporting-comp -## Escrevendo tags com JSX {/*writing-markup-with-jsx*/} +## Escrevendo Tags com JSX {/*writing-markup-with-jsx*/} Cada componente React é uma função JavaScript que pode conter tags que o React renderiza no navegador. Componentes React utilizam uma extensão de sintaxe chamada JSX para representar essas tags. JSX parece muito com HTML, mas é um pouco mais rígido e pode exibir informações de forma dinâmica. @@ -184,7 +184,7 @@ Leia **[Escrevendo tags com JSX](/learn/writing-markup-with-jsx)** para aprender -## JavaScript no JSX utilizando chaves {/*javascript-in-jsx-with-curly-braces*/} +## JavaScript entre Chaves no JSX {/*javascript-in-jsx-with-curly-braces*/} JSX permite que você escreva de maneira análoga ao HTML dentro de um arquivo JavaScript, mantendo a lógica de renderização e o conteúdo no mesmo lugar. Em alguns momentos, você pode querer adicionar alguma lógica JavaScript ou uma propriedade dinâmica em uma tag. Neste tipo de situação, você pode utilizar chaves no JSX para "abrir uma janela" que entenda JavaScript: @@ -232,7 +232,7 @@ Leia **[JavaScript no JSX utilizando chaves](/learn/javascript-in-jsx-with-curly -## Passando propriedades para um componente {/*passing-props-to-a-component*/} +## Passando Props para um Componente {/*passing-props-to-a-component*/} Componentes React utilizam *propriedades (props)* para se comunicarem entre si. Cada componente pai pode passar informações para seus componentes filhos por meio de props. Props lembram um pouco os atributos HTML, mas você pode passar qualquer valor que seja válido em JavaScript por meio delas, incluindo objetos, arrays, funções e até mesmo JSX! @@ -313,7 +313,7 @@ Leia **[Passando propriedades para um componente](/learn/passing-props-to-a-comp -## Conditional rendering {/*conditional-rendering*/} +## Renderização Condicional {/*conditional-rendering*/} Frequentemente você vai precisar exibir diferentes conteúdos nos seus componentes de acordo com certas condições. No React, você pode renderizar JSX condicionalmente utilizando uma sintaxe parecida com JavaScript, que usa o comando `if`, e operadores lógicos `&&` e `? :`. @@ -463,7 +463,7 @@ Leia **[Renderizando Listas](/learn/rendering-lists)** para aprender como render -## Mantendo seus componentes puros {/*keeping-components-pure*/} +## Mantendo Seus Componentes Puros {/*keeping-components-pure*/} Algumas funções JavaScript são *puras*. Uma função pura: From 23a31082d3f45856088bdc892edcc2808e72958a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nat=C3=A3=20Rodrigo=20Santos=20Pereira?= Date: Wed, 26 Apr 2023 11:01:35 -0300 Subject: [PATCH 6/6] Fixed conflicting terms on src/content/learn/describing-the-ui.md --- src/content/learn/describing-the-ui.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md index d3a1150c6..1c3820d0a 100644 --- a/src/content/learn/describing-the-ui.md +++ b/src/content/learn/describing-the-ui.md @@ -111,7 +111,7 @@ img { margin: 0 10px 10px 0; } -Leia **[Importando e exportando componentes](/learn/importing-and-exporting-components)** para aprender como separar seus componentes em arquivos próprios. +Leia **[Importando e Exportando Componentes](/learn/importing-and-exporting-components)** para aprender como separar seus componentes em arquivos próprios. @@ -180,7 +180,7 @@ img { height: 90px; } -Leia **[Escrevendo tags com JSX](/learn/writing-markup-with-jsx)** para aprender como escrever JSX corretamente. +Leia **[Escrevendo Tags com JSX](/learn/writing-markup-with-jsx)** para aprender como escrever JSX corretamente. @@ -228,7 +228,7 @@ body > div > div { padding: 20px; } -Leia **[JavaScript no JSX utilizando chaves](/learn/javascript-in-jsx-with-curly-braces)** para aprender como acessar dados do seu código JavaScript a partir do JSX. +Leia **[JavaScript entre Chaves no JSX](/learn/javascript-in-jsx-with-curly-braces)** para aprender como acessar dados do seu código JavaScript a partir do JSX. @@ -309,7 +309,7 @@ export function getImageUrl(person, size = 's') { -Leia **[Passando propriedades para um componente](/learn/passing-props-to-a-component)** para aprender como passar e ler props. +Leia **[Passando Props para um Componente](/learn/passing-props-to-a-component)** para aprender como passar e ler props. @@ -521,7 +521,7 @@ export default function TeaSet() { -Leia **[Mantendo seus componentes puros](/learn/keeping-components-pure)** para aprender como criar componentes puros e funções previsíveis. +Leia **[Mantendo Seus Componentes Puros](/learn/keeping-components-pure)** para aprender como criar componentes puros e funções previsíveis.