[\s\S]*{\s*\/\*[\s\S]*\*\/\s*}[\s\S]*<\/div>/.test(code));
diff --git a/curriculum/challenges/portuguese/03-front-end-libraries/react/add-event-listeners.md b/curriculum/challenges/portuguese/03-front-end-libraries/react/add-event-listeners.md
index d49282cfe6..a432337911 100644
--- a/curriculum/challenges/portuguese/03-front-end-libraries/react/add-event-listeners.md
+++ b/curriculum/challenges/portuguese/03-front-end-libraries/react/add-event-listeners.md
@@ -1,6 +1,6 @@
---
id: 5a24c314108439a4d403617e
-title: Add Event Listeners
+title: Adicionar Ouvintes de Evento
challengeType: 6
forumTopicId: 301377
dashedName: add-event-listeners
@@ -8,19 +8,19 @@ dashedName: add-event-listeners
# --description--
-The `componentDidMount()` method is also the best place to attach any event listeners you need to add for specific functionality. React provides a synthetic event system which wraps the native event system present in browsers. This means that the synthetic event system behaves exactly the same regardless of the user's browser - even if the native events may behave differently between different browsers.
+O método `componentDidMount()` também é o melhor local para anexar qualquer ouvinte de evento (event listener) que você precisa adicionar para uma funcionalidade específica. React fornece um sistema de eventos sintéticos que envolve o sistema de evento nativo presente nos navegadores. Isso significa que o sistema de evento sintético se comporta exatamente da mesma forma independente do navegador do usuário - mesmo se os eventos nativos possam se comportar de forma diferente em diferentes navegadores.
-You've already been using some of these synthetic event handlers such as `onClick()`. React's synthetic event system is great to use for most interactions you'll manage on DOM elements. However, if you want to attach an event handler to the document or window objects, you have to do this directly.
+Você já tem usado alguns destes manipuladores de eventos sintéticos como `onClick()`. O sistema de evento sintético do React é ótimo de usar para a maioria das interações que você gerenciará em elementos DOM. No entanto, se você que anexar um manipulador de evento aos objetos documento ou janela, você tem que fazer isso diretamente.
# --instructions--
-Attach an event listener in the `componentDidMount()` method for `keydown` events and have these events trigger the callback `handleKeyPress()`. You can use `document.addEventListener()` which takes the event (in quotes) as the first argument and the callback as the second argument.
+Anexe um event listener no método `componentDidMount()` para eventos `keydown` e faça com que esses eventos acionem o callback `handleKeyPress()`. Você pode usar `document.addEventListener()` o qual recebe o evento (entre aspas) como o primeiro argumento e o callback como o segundo argumento.
-Then, in `componentWillUnmount()`, remove this same event listener. You can pass the same arguments to `document.removeEventListener()`. It's good practice to use this lifecycle method to do any clean up on React components before they are unmounted and destroyed. Removing event listeners is an example of one such clean up action.
+Em seguida, em `componentWillUnmount()`, remova esse mesmo event listener. Você pode passar os mesmos argumentos para `document.removeEventListener()`. É uma boa prática usar este método de ciclo de vida para limpar qualquer componente do React antes deles serem desmontados e destruídos. Remover event listeners é um exemplo de uma ação de limpeza.
# --hints--
-`MyComponent` should render a `div` element which wraps an `h1` tag.
+`MyComponent` deve renderizar um elemento `div` o qual envolve a tag `h1`.
```js
assert(
@@ -31,7 +31,7 @@ assert(
);
```
-A `keydown` listener should be attached to the document in `componentDidMount`.
+Um ouvinte de `keydown` deve ser anexado ao documento em `componentDidMount`.
```js
assert(
@@ -47,7 +47,7 @@ assert(
);
```
-The `keydown` listener should be removed from the document in `componentWillUnmount`.
+O ouvinte de `keydown` deve ser removido do documento em `componentWillUnmount`.
```js
assert(
@@ -63,7 +63,7 @@ assert(
);
```
-Once the component has mounted, pressing `enter` should update its state and the rendered `h1` tag.
+Uma vez que o componente foi montado, pressionar `enter` deve atualizar seu estado e a tag renderizada `h1`.
```js
async () => {
diff --git a/curriculum/challenges/portuguese/03-front-end-libraries/react/add-inline-styles-in-react.md b/curriculum/challenges/portuguese/03-front-end-libraries/react/add-inline-styles-in-react.md
index 0ced56da50..c3e2f020f1 100644
--- a/curriculum/challenges/portuguese/03-front-end-libraries/react/add-inline-styles-in-react.md
+++ b/curriculum/challenges/portuguese/03-front-end-libraries/react/add-inline-styles-in-react.md
@@ -1,6 +1,6 @@
---
id: 5a24c314108439a4d4036182
-title: Add Inline Styles in React
+title: Adicione estilos em linha no React
challengeType: 6
forumTopicId: 301378
dashedName: add-inline-styles-in-react
@@ -8,41 +8,41 @@ dashedName: add-inline-styles-in-react
# --description--
-You may have noticed in the last challenge that there were several other syntax differences from HTML inline styles in addition to the `style` attribute set to a JavaScript object. First, the names of certain CSS style properties use camel case. For example, the last challenge set the size of the font with `fontSize` instead of `font-size`. Hyphenated words like `font-size` are invalid syntax for JavaScript object properties, so React uses camel case. As a rule, any hyphenated style properties are written using camel case in JSX.
+Você pode ter percebido no último desafio que existem diversas outras diferenças de sintaxe de estilos HTML em linha em adição ao atributo `style` definido para um objeto JavaScript. Primeiro, os nomes de certas propriedades de estilo CSS usam camel case. Por exemplo, o último desafio definiu o tamanho da fonte com `fontSize` ao invés de `font-size`. Palavras com hifens como `font-size` são sintaxes inválidas para propriedades de objeto JavaScript, então React usa camel case. Como regra, qualquer propriedades de estilos com hífen são escritas usando camel case em JSX.
-All property value length units (like `height`, `width`, and `fontSize`) are assumed to be in `px` unless otherwise specified. If you want to use `em`, for example, you wrap the value and the units in quotes, like `{fontSize: "4em"}`. Other than the length values that default to `px`, all other property values should be wrapped in quotes.
+Todas as unidades de valor de comprimento das propriedades (como `height`,`width`, e `fontSize`) são assumidos para estar em `px` a não ser que seja especificado outra forma. Se você quiser usar `em`, por exemplo, você envolve o valor e as unidades em aspas, como `{fontSize: "4em"}`. Além dos valores de comprimento que tem como padrão `px`, todas os outros valores de propriedade devem estar entre aspas.
# --instructions--
-If you have a large set of styles, you can assign a style `object` to a constant to keep your code organized. Declare your styles constant as a global variable at the top of the file. Initialize `styles` constant and assign an `object` with three style properties and their values to it. Give the `div` a color of `purple`, a font-size of `40`, and a border of `2px solid purple`. Then set the `style` attribute equal to the `styles` constant.
+Se você tem um grande conjunto de estilos, você pode atribuir um `objeto` de estilo para uma constante para te ajudar a manter o código organizado. Declare suas constantes de estilo como variáveis globais no topo do arquivo. Inicialize a constante `styles` e atribua um `object` com três propriedades de estilo e os seus valores à constante. Dê a `div` a color (cor) `purple (roxo)`, um font-size (tamanho de fonte) de `40` e um border (borda) de `2px solid purple`. Em seguida, defina o atributo `style` para ser igual a constante `styles`.
# --hints--
-The `styles` variable should be an `object` with three properties.
+A variável `styles` deve ser um `objeto` com três propriedades.
```js
assert(Object.keys(styles).length === 3);
```
-The `styles` variable should have a `color` property set to a value of `purple`.
+A variável `styles` devem ter a propriedade `color` definida com o valor `purple`.
```js
assert(styles.color === 'purple');
```
-The `styles` variable should have a `fontSize` property set to a value of `40`.
+A variável `styles` devem ter a propriedade `fontSize` definida com o valor `40`.
```js
assert(styles.fontSize === 40);
```
-The `styles` variable should have a `border` property set to a value of `2px solid purple`.
+A variável `styles` deve ter a propriedade `border` definida com o valor `2px solid purple`.
```js
assert(styles.border === '2px solid purple');
```
-The component should render a `div` element.
+O componente deve renderizar um elemento `div`.
```js
assert(
@@ -53,7 +53,7 @@ assert(
);
```
-The `div` element should have its styles defined by the `styles` object.
+O elemento `div` deve ter seu estilo definido pelo objeto `styles`.
```js
assert(
diff --git a/curriculum/challenges/portuguese/03-front-end-libraries/react/bind-this-to-a-class-method.md b/curriculum/challenges/portuguese/03-front-end-libraries/react/bind-this-to-a-class-method.md
index ed61f77d7f..63211ff552 100644
--- a/curriculum/challenges/portuguese/03-front-end-libraries/react/bind-this-to-a-class-method.md
+++ b/curriculum/challenges/portuguese/03-front-end-libraries/react/bind-this-to-a-class-method.md
@@ -1,6 +1,6 @@
---
id: 5a24c314108439a4d4036174
-title: Bind 'this' to a Class Method
+title: Vincular 'this' para um Método de Classe
challengeType: 6
forumTopicId: 301379
dashedName: bind-this-to-a-class-method
@@ -8,23 +8,23 @@ dashedName: bind-this-to-a-class-method
# --description--
-In addition to setting and updating `state`, you can also define methods for your component class. A class method typically needs to use the `this` keyword so it can access properties on the class (such as `state` and `props`) inside the scope of the method. There are a few ways to allow your class methods to access `this`.
+Além de definir e atualizar `state`, você também pode definir métodos para o seu componente de classe. Um método de classe tipicamente precisa usar a palavra-chave `this` para que possa acessar as propriedades na classe (assim como `state` e `props`) dentro do escopo do método. Existem algumas maneiras para permitir que os métodos da sua classe acessem `this`.
-One common way is to explicitly bind `this` in the constructor so `this` becomes bound to the class methods when the component is initialized. You may have noticed the last challenge used `this.handleClick = this.handleClick.bind(this)` for its `handleClick` method in the constructor. Then, when you call a function like `this.setState()` within your class method, `this` refers to the class and will not be `undefined`.
+Uma forma comum é explicitamente vincular `this` no construtor para que `this` torne-se vinculado aos métodos da classe quando o componente é inicializado. Você pode ter percebido que o último desafio usou `this.handleClick = this.handleClick.bind(this)` para o método `handleClick` no construtor. Em seguida, quando você chama uma função como `this.setState()` dentro do método da classe, `this` refere-se a classe e não será `undefined`.
-**Note:** The `this` keyword is one of the most confusing aspects of JavaScript but it plays an important role in React. Although its behavior here is totally normal, these lessons aren't the place for an in-depth review of `this` so please refer to other lessons if the above is confusing!
+**Nota:** A palavra-chave `this` é um dos aspectos mais confusos do JavaScript mas ele exerce uma papel importante em React. Embora o seu comportamento aqui é completamente normal, essas aulas não são o lugar para uma análise profunda de `this` portanto, por favor consulte outras aulas se o conteúdo acima for confuso!
# --instructions--
-The code editor has a component with a `state` that keeps track of the text. It also has a method which allows you to set the text to `You clicked!`. However, the method doesn't work because it's using the `this` keyword that is undefined. Fix it by explicitly binding `this` to the `handleClick()` method in the component's constructor.
+O editor de código possui um componente com um `state` que mantém o controle do texto. Também possui um método o qual o permite definir o texto para `You clicked!`. No entanto, o método não funciona porque está usando a palavra-chave `this` que é undefined. Corrija isso ao vincular explicitamente `this` ao método `handleClick()` no construtor do componente.
-Next, add a click handler to the `button` element in the render method. It should trigger the `handleClick()` method when the button receives a click event. Remember that the method you pass to the `onClick` handler needs curly braces because it should be interpreted directly as JavaScript.
+Em seguida, adicione um manipulador de clique ao elemento `button` no método de renderização. Ele deve acionar o método `handleClick()` quando o botão recebe um evento de clique. Lembre-se que o método que você passou ao manipulador `onClick` precisa de chaves porque ele deve ser interpretador diretamente como JavaScript.
-Once you complete the above steps you should be able to click the button and see `You clicked!`.
+Assim que você completar os passos acima você deve ser capaz de clicar o botão e ver `You clicked!`.
# --hints--
-`MyComponent` should return a `div` element which wraps two elements, a button and an `h1` element, in that order.
+`MyComponent` deve retornar um elemento `div` o qual envolve dois elementos, os elementos `button` e `h1`, nessa ordem.
```js
assert(
@@ -40,7 +40,7 @@ assert(
);
```
-The state of `MyComponent` should initialize with the key value pair `{ text: "Hello" }`.
+O state de `MyComponent` deve inicializar com o par de chave e valor `{ text: "Hello" }`.
```js
assert(
@@ -48,7 +48,7 @@ assert(
);
```
-Clicking the `button` element should run the `handleClick` method and set the state `text` to `You clicked!`.
+Clicar o elemento `button` deve executar o método `handleClick` e definir o estado de `text` para `You clicked!`.
```js
async () => {
diff --git a/curriculum/challenges/portuguese/03-front-end-libraries/react/change-inline-css-conditionally-based-on-component-state.md b/curriculum/challenges/portuguese/03-front-end-libraries/react/change-inline-css-conditionally-based-on-component-state.md
index 9a08852594..b4a0cca6df 100644
--- a/curriculum/challenges/portuguese/03-front-end-libraries/react/change-inline-css-conditionally-based-on-component-state.md
+++ b/curriculum/challenges/portuguese/03-front-end-libraries/react/change-inline-css-conditionally-based-on-component-state.md
@@ -1,6 +1,6 @@
---
id: 5a24c314108439a4d4036189
-title: Change Inline CSS Conditionally Based on Component State
+title: Mudar CSS Emlinha Condicionalmente Baseado no Estado do Component
challengeType: 6
forumTopicId: 301380
dashedName: change-inline-css-conditionally-based-on-component-state
@@ -8,17 +8,17 @@ dashedName: change-inline-css-conditionally-based-on-component-state
# --description--
-At this point, you've seen several applications of conditional rendering and the use of inline styles. Here's one more example that combines both of these topics. You can also render CSS conditionally based on the state of a React component. To do this, you check for a condition, and if that condition is met, you modify the styles object that's assigned to the JSX elements in the render method.
+Nesse ponto, você já viu diversas aplicações de renderização condicional e o uso de estilos emlinha. Aqui está mais um exemplo que combina ambos esses tópicos. Você também pode renderizar CSS condicionalmente baseado no estado de um componente React. Para fazer isso, você verifica por uma condição, e se essa condição for atendida, você modifica o objeto styles que foi atribuido aos elementos JSX no método de renderização.
-This paradigm is important to understand because it is a dramatic shift from the more traditional approach of applying styles by modifying DOM elements directly (which is very common with jQuery, for example). In that approach, you must keep track of when elements change and also handle the actual manipulation directly. It can become difficult to keep track of changes, potentially making your UI unpredictable. When you set a style object based on a condition, you describe how the UI should look as a function of the application's state. There is a clear flow of information that only moves in one direction. This is the preferred method when writing applications with React.
+É importante entender esse paradigma porque é uma mudança dramática da abordagem mais tradicional de aplicar estilos ao modificar diretamente os elementos DOM (o que é muito comum com jQuery, por exemplo). Nessa abordagem, você precisa monitorar quando um elemento mudar e também lidar com a manipulação diretamente. Pode se tornar difícil acompanhar as mudanças, tornando potencialmente a sua interface de usuário imprevisível. Quando você define um objeto estilo baseado em uma condição, você descreve como a interface deve se parecer com uma função do estado da aplicação. Há um fluxo claro de informação que só avança em uma direção. Esse é o método preferido ao escrever aplicações com React.
# --instructions--
-The code editor has a simple controlled input component with a styled border. You want to style this border red if the user types more than 15 characters of text in the input box. Add a condition to check for this and, if the condition is valid, set the input border style to `3px solid red`. You can try it out by entering text in the input.
+O editor de código tem um simples componente de entrada controlado com uma borda estilizada. Você quer estilizar essa borda como vermelha se o usuário escrever um texto com mais de 15 caracteres na caixa de entrada. Adicione uma condição para verificar por isso e, se a condição for válida, defina o estilo da borda do input para `3px solid red`. Você pode experimentá-lo inserindo texto no input.
# --hints--
-The `GateKeeper` component should render a `div` element.
+O componente `GateKeeper` deve renderizar um elemento `div`.
```js
assert(
@@ -29,7 +29,7 @@ assert(
);
```
-The `GateKeeper` component should be initialized with a state key `input` set to an empty string.
+O componente `GateKeeper` deve ser inicializado com a chave de estado `input` definida para uma string vazia.
```js
assert(
@@ -40,7 +40,7 @@ assert(
);
```
-The `GateKeeper` component should render an `h3` tag and an `input` tag.
+O componente `GateKeeper` deve renderizar uma tag `h3` e uma tag `input`.
```js
assert(
@@ -54,7 +54,7 @@ assert(
);
```
-The `input` tag should initially have a style of `1px solid black` for the `border` property.
+A tag `input` deve inicialmente ter o estilo `1px solid black` para a propriedade `border`.
```js
assert(
@@ -67,7 +67,7 @@ assert(
);
```
-The `input` tag should be styled with a border of `3px solid red` if the input value in state is longer than 15 characters.
+A tag `input` deve ser estilizada com a borda como `3px solid red` se o valor do input no estado tiver mais de 15 caracteres.
```js
async () => {
diff --git a/curriculum/challenges/portuguese/03-front-end-libraries/react/compose-react-components.md b/curriculum/challenges/portuguese/03-front-end-libraries/react/compose-react-components.md
index f39e29008a..414abf8829 100644
--- a/curriculum/challenges/portuguese/03-front-end-libraries/react/compose-react-components.md
+++ b/curriculum/challenges/portuguese/03-front-end-libraries/react/compose-react-components.md
@@ -1,6 +1,6 @@
---
id: 5a24c314108439a4d4036166
-title: Compose React Components
+title: Componha Componentes React
challengeType: 6
forumTopicId: 301381
dashedName: compose-react-components
@@ -8,17 +8,17 @@ dashedName: compose-react-components
# --description--
-As the challenges continue to use more complex compositions with React components and JSX, there is one important point to note. Rendering ES6 style class components within other components is no different than rendering the simple components you used in the last few challenges. You can render JSX elements, stateless functional components, and ES6 class components within other components.
+Enquanto os desafios continuam a usar composições mais complexas com componentes React e JSX, há um ponto importante a se notar. Renderizar componentes de classe de estilo ES6 dentro de outros componentes não é diferente de renderizar componentes simples que você usou nos últimos desafios. Você pode renderizar elementos JSX, componentes funcionais sem estado e componentes de classe ES6 dentro de outros componentes.
# --instructions--
-In the code editor, the `TypesOfFood` component is already rendering a component called `Vegetables`. Also, there is the `Fruits` component from the last challenge.
+No editor de código, o componente `TypesOfFood` já está renderizando um componente chamado `Vegetables`. Além disso, há o componente `Fruits` do último desafio.
-Nest two components inside of `Fruits` — first `NonCitrus`, and then `Citrus`. Both of these components are provided for you behind the scenes. Next, nest the `Fruits` class component into the `TypesOfFood` component, below the `h1` header and above `Vegetables`. The result should be a series of nested components, which uses two different component types.
+Aninhe dois componentes dentro de `Fruits` — primeiro `NonCitrus`, e depois `Citrus`. Ambos os componentes são fornecidos nos bastidores. Em seguida, aninhe o componente de classe `Fruits` dentro do componente `TypesOfFood`, abaixo do cabeçalho `h1` e acima de `Vegetables`. O resultado deve ser uma série de componentes aninhados, que usa dois tipos de componentes diferentes.
# --hints--
-The `TypesOfFood` component should return a single `div` element.
+O componente `TypesOfFood` deve retornar um único elemento `div`.
```js
assert(
@@ -29,7 +29,7 @@ assert(
);
```
-The `TypesOfFood` component should return the `Fruits` component.
+O componente `TypesOfFood` deve retornar o component `Fruits`.
```js
assert(
@@ -40,7 +40,7 @@ assert(
);
```
-The `Fruits` component should return the `NonCitrus` component and the `Citrus` component.
+O componente `Fruits` deve retornar o componente `NonCitrus` e o componente `Citrus`.
```js
assert(
@@ -55,7 +55,7 @@ assert(
);
```
-The `TypesOfFood` component should return the `Vegetables` component below the `Fruits` component.
+O componente `Fruits` deve retornar o componente `Vegetables` abaixo do componente `Fruits`.
```js
assert(
diff --git a/curriculum/challenges/portuguese/03-front-end-libraries/react/create-a-complex-jsx-element.md b/curriculum/challenges/portuguese/03-front-end-libraries/react/create-a-complex-jsx-element.md
index 595047ee70..fd56ab4662 100644
--- a/curriculum/challenges/portuguese/03-front-end-libraries/react/create-a-complex-jsx-element.md
+++ b/curriculum/challenges/portuguese/03-front-end-libraries/react/create-a-complex-jsx-element.md
@@ -1,6 +1,6 @@
---
id: 5a24bbe0dba28a8d3cbd4c5d
-title: Create a Complex JSX Element
+title: Criar um Elemento JSX Complexo
challengeType: 6
forumTopicId: 301382
dashedName: create-a-complex-jsx-element
@@ -8,17 +8,17 @@ dashedName: create-a-complex-jsx-element
# --description--
-The last challenge was a simple example of JSX, but JSX can represent more complex HTML as well.
+O último desafio foi um exemplo simples de JSX, mas JSX também pode representar HTML mais complexo.
-One important thing to know about nested JSX is that it must return a single element.
+Uma coisa importante a saber sobre JSX aninhado é que ele deve retornar um único elemento.
-This one parent element would wrap all of the other levels of nested elements.
+Este único elemento pai envolveria todos os outros níveis de elementos aninhados.
-For instance, several JSX elements written as siblings with no parent wrapper element will not transpile.
+Por exemplo, vários elementos JSX escritos como irmãos sem elemento encapsulador pai não vai transpilar.
-Here's an example:
+Aqui está um exemplo:
-**Valid JSX:**
+**JSX válido:**
```jsx
@@ -28,7 +28,7 @@ Here's an example:
```
-**Invalid JSX:**
+**JSX inválido:**
```jsx
Paragraph One
@@ -38,39 +38,39 @@ Here's an example:
# --instructions--
-Define a new constant `JSX` that renders a `div` which contains the following elements in order:
+Defina uma nova constante `JSX` que renderiza uma `div` a qual contém os elementos a seguir em ordem:
-An `h1`, a `p`, and an unordered list that contains three `li` items. You can include any text you want within each element.
+Um `h1`, um `p`, e uma lista não ordenada que contém três itens `li`. Você pode incluir qualquer texto que você quiser dentro de cada elemento.
-**Note:** When rendering multiple elements like this, you can wrap them all in parentheses, but it's not strictly required. Also notice this challenge uses a `div` tag to wrap all the child elements within a single parent element. If you remove the `div`, the JSX will no longer transpile. Keep this in mind, since it will also apply when you return JSX elements in React components.
+**Nota:** Ao renderizar vários elementos como este, você pode envolver todos entre parênteses, mas não é estritamente necessário. Note também que este desafio usa uma tag `div` para encapsular todos os elementos filhos dentro de um único elemento pai. Se você remover a `div`, o JSX não será mais transpilável. Tenha isso em mente, uma vez que ele também será aplicado quando você retornar elementos JSX em componentes React.
# --hints--
-The constant `JSX` should return a `div` element.
+A constante `JSX` deve retornar um elemento `div`.
```js
assert(JSX.type === 'div');
```
-The `div` should contain an `h1` tag as the first element.
+O `div` deve conter uma tag `h1` como o primeiro elemento.
```js
assert(JSX.props.children[0].type === 'h1');
```
-The `div` should contain a `p` tag as the second element.
+A `div` deve conter uma tag `p` como o segundo elemento.
```js
assert(JSX.props.children[1].type === 'p');
```
-The `div` should contain a `ul` tag as the third element.
+O `div` deve conter uma tag `ul` como o terceiro elemento.
```js
assert(JSX.props.children[2].type === 'ul');
```
-The `ul` should contain three `li` elements.
+O `ul` deve conter três elementos `li`.
```js
assert(
diff --git a/curriculum/challenges/portuguese/03-front-end-libraries/react/create-a-component-with-composition.md b/curriculum/challenges/portuguese/03-front-end-libraries/react/create-a-component-with-composition.md
index 956c87a620..580ccbd796 100644
--- a/curriculum/challenges/portuguese/03-front-end-libraries/react/create-a-component-with-composition.md
+++ b/curriculum/challenges/portuguese/03-front-end-libraries/react/create-a-component-with-composition.md
@@ -1,6 +1,6 @@
---
id: 5a24c314108439a4d4036164
-title: Create a Component with Composition
+title: Criar um componente com composição
challengeType: 6
forumTopicId: 301383
dashedName: create-a-component-with-composition
@@ -8,9 +8,9 @@ dashedName: create-a-component-with-composition
# --description--
-Now we will look at how we can compose multiple React components together. Imagine you are building an app and have created three components: a `Navbar`, `Dashboard`, and `Footer`.
+Agora vamos ver como podemos compor vários componentes React juntos. Imagine que você está construindo um aplicativo e criou três componentes: uma `Navbar`, um `Dashboard`, e um `Footer`.
-To compose these components together, you could create an `App` *parent* component which renders each of these three components as *children*. To render a component as a child in a React component, you include the component name written as a custom HTML tag in the JSX. For example, in the `render` method you could write:
+Para compor esses componentes juntos, você poderia criar um componente `App` *pai* que renderiza cada um desses três componentes como *filhos*. Para renderizar um componente como filho em um componente React, você inclui o nome do componente escrito como uma tag HTML personalizada no JSX. Por exemplo, no método `render` você pode escrever:
```jsx
return (
@@ -22,17 +22,17 @@ return (
)
```
-When React encounters a custom HTML tag that references another component (a component name wrapped in `< />` like in this example), it renders the markup for that component in the location of the tag. This should illustrate the parent/child relationship between the `App` component and the `Navbar`, `Dashboard`, and `Footer`.
+Quando o React encontra uma tag HTML personalizada que faz referência a outro componente (um nome de componente encapsulado em `< />` como neste exemplo), ele renderiza a marcação para esse componente na localização da tag. Isso deve ilustrar a relação pai/filho entre o componente `App` e a `Navbar`, o `Dashboard`, e o `Footer`.
# --instructions--
-In the code editor, there is a simple functional component called `ChildComponent` and a class component called `ParentComponent`. Compose the two together by rendering the `ChildComponent` within the `ParentComponent`. Make sure to close the `ChildComponent` tag with a forward slash.
+No editor de código, há um simples componente funcional chamado `ChildComponent` e um componente de classe chamado `ParentComponent`. Componha as duas juntas ao renderizar o `ChildComponent` dentro do `ParentComponent`. Certifique-se de fechar a tag `ChildComponent` com uma barra avançada.
-**Note:** `ChildComponent` is defined with an ES6 arrow function because this is a very common practice when using React. However, know that this is just a function. If you aren't familiar with the arrow function syntax, please refer to the JavaScript section.
+**Nota:** `ChildComponent` é definida com uma função de seta ES6, porque esta é uma prática muito comum ao usar React. No entanto, é do conhecimento geral que se trata apenas de uma função. Se você não estiver familiarizado com a sintaxe de função de seta, por favor, consulte a seção de JavaScript.
# --hints--
-The React component should return a single `div` element.
+O componente React deve retornar um único elemento `div`.
```js
assert(
@@ -43,7 +43,7 @@ assert(
);
```
-The component should return two nested elements.
+O componente deve retornar dois elementos aninhados.
```js
assert(
@@ -54,7 +54,7 @@ assert(
);
```
-The component should return the `ChildComponent` as its second child.
+O componente deve retornar o `ChildComponent` como seu segundo filho.
```js
assert(
diff --git a/curriculum/challenges/portuguese/03-front-end-libraries/react/create-a-controlled-form.md b/curriculum/challenges/portuguese/03-front-end-libraries/react/create-a-controlled-form.md
index efb076c172..bea7635462 100644
--- a/curriculum/challenges/portuguese/03-front-end-libraries/react/create-a-controlled-form.md
+++ b/curriculum/challenges/portuguese/03-front-end-libraries/react/create-a-controlled-form.md
@@ -1,6 +1,6 @@
---
id: 5a24c314108439a4d4036179
-title: Create a Controlled Form
+title: Criar um formulário controlado
challengeType: 6
forumTopicId: 301384
dashedName: create-a-controlled-form
@@ -8,21 +8,21 @@ dashedName: create-a-controlled-form
# --description--
-The last challenge showed that React can control the internal state for certain elements like `input` and `textarea`, which makes them controlled components. This applies to other form elements as well, including the regular HTML `form` element.
+O último desafio mostrou que React pode controlar o estado interno para certos elementos como `input` e `textarea`, o que os torna componentes controlados. Isso também se aplica a outros elementos de formulário, incluindo o elemento HTML regular `form`.
# --instructions--
-The `MyForm` component is set up with an empty `form` with a submit handler. The submit handler will be called when the form is submitted.
+O componente `MyForm` é definido com um `form` vazio com um manipulador de envio. O manipulador de envio será chamado quando o formulário for submetido.
-We've added a button which submits the form. You can see it has the `type` set to `submit` indicating it is the button controlling the form. Add the `input` element in the `form` and set its `value` and `onChange()` attributes like the last challenge. You should then complete the `handleSubmit` method so that it sets the component state property `submit` to the current input value in the local `state`.
+Adicionamos um botão que envia o formulário. Você pode ver que tem o `type` definido como `submit` indicando que é o botão que controla o formulário. Adicione o elemento `input` no `form` e defina seus atributos `value` e `onChange()` como o último desafio. Você deve então completar o método `handleSubmit` para que ele defina a propriedade de estado `submit` do componente para o valor de entrada atual no `state`.
-**Note:** You also must call `event.preventDefault()` in the submit handler, to prevent the default form submit behavior which will refresh the web page. For camper convenience, the default behavior has been disabled here to prevent refreshes from resetting challenge code.
+**Nota:** Você deve chamar o evento `event.preventDefault()` no manipulador de envio, para evitar o comportamento de envio de formulário padrão que atualizará a página web. Por conveniência, o comportamento padrão foi desabilitado aqui para impedir que atualizações redefinam o código do desafio.
-Finally, create an `h1` tag after the `form` which renders the `submit` value from the component's `state`. You can then type in the form and click the button (or press enter), and you should see your input rendered to the page.
+Finalmente cria uma tag `h1` após o `form` que renderiza o valor `sumbit` do `estado` do componente. Em seguida você pode digitar no formulário e clicar o botão (ou pressionar enter), e você deve ver seu input renderizado na página.
# --hints--
-`MyForm` should return a `div` element which contains a `form` and an `h1` tag. The form should include an `input` and a `button`.
+`MyForm` deve retornar um elemento `div` que contém as tags `form` e `h1`. O formulário deve incluir um `input` e um `button`.
```js
assert(
@@ -38,7 +38,7 @@ assert(
);
```
-The state of `MyForm` should initialize with `input` and `submit` properties, both set to empty strings.
+O estado do `MyForm` deve inicializar com as propriedades `input` e `submit`, ambos definidos como strings vazias.
```js
assert(
@@ -47,7 +47,7 @@ assert(
);
```
-Typing in the `input` element should update the `input` property of the component's state.
+Digitar no elemento `input` deve atualizar a propriedade `input` do estado do componente.
```js
(() => {
@@ -75,7 +75,7 @@ Typing in the `input` element should update the `input` property of the componen
})();
```
-Submitting the form should run `handleSubmit` which should set the `submit` property in state equal to the current input.
+Enviar o formulário deve executar `handleSubmit` o qual deve definir a propriedade `submit` no estado igual a entrada atual.
```js
(() => {
@@ -98,7 +98,7 @@ Submitting the form should run `handleSubmit` which should set the `submit` prop
})();
```
-`handleSubmit` should call `event.preventDefault`
+`handleSubmit` deve chamar `event.preventDefault`
```js
const handleSubmit = MyForm.prototype.handleSubmit.toString();
@@ -117,7 +117,7 @@ assert(
);
```
-The `h1` header should render the value of the `submit` field from the component's state.
+O título `h1` deve renderizar o valor do campo `submit` do estado do componente.
```js
(() => {
diff --git a/curriculum/challenges/portuguese/03-front-end-libraries/react/create-a-controlled-input.md b/curriculum/challenges/portuguese/03-front-end-libraries/react/create-a-controlled-input.md
index e38cf90ad5..97be930db6 100644
--- a/curriculum/challenges/portuguese/03-front-end-libraries/react/create-a-controlled-input.md
+++ b/curriculum/challenges/portuguese/03-front-end-libraries/react/create-a-controlled-input.md
@@ -1,6 +1,6 @@
---
id: 5a24c314108439a4d4036178
-title: Create a Controlled Input
+title: Criar um Input Controlado
challengeType: 6
forumTopicId: 301385
dashedName: create-a-controlled-input
@@ -8,23 +8,23 @@ dashedName: create-a-controlled-input
# --description--
-Your application may have more complex interactions between `state` and the rendered UI. For example, form control elements for text input, such as `input` and `textarea`, maintain their own state in the DOM as the user types. With React, you can move this mutable state into a React component's `state`. The user's input becomes part of the application `state`, so React controls the value of that input field. Typically, if you have React components with input fields the user can type into, it will be a controlled input form.
+Sua aplicação pode ter interações mais complexas entre `state` e a interface renderizada. Por exemplo, elementos de controle de formulário para entradas do tipo texto, assim como `input` e `textarea`, mantém seus próprios estados no DOM enquanto o usuário digita. Com React, você pode mover esse estado mutável para o `state` de um componente React. A entrada do usuário se torna parte do `state` da aplicação, então o React controla o valor desse campo de entrada. Tipicamente, se você tem componentes React com campos de entrada em que o usuário pode digitar, será um formulário de entrada controlado.
# --instructions--
-The code editor has the skeleton of a component called `ControlledInput` to create a controlled `input` element. The component's `state` is already initialized with an `input` property that holds an empty string. This value represents the text a user types into the `input` field.
+O editor de código tem o esqueleto de um componente chamado `ControlledInput` para criar um elemento controlado `input`. O `state` do componente já está inicializado com a propriedade `input` que possui uma string vazia. Esse valor representa o texto que o usuário digitou no campo `input`.
-First, create a method called `handleChange()` that has a parameter called `event`. When the method is called, it receives an `event` object that contains a string of text from the `input` element. You can access this string with `event.target.value` inside the method. Update the `input` property of the component's `state` with this new string.
+Primeiro, crie um método chamado `handleChange()` que tem um parâmetro chamado `event`. Quando o método é chamado, ele recebe um objeto `event` que contém a string do texto do elemento `input`. Você pode acessar essa string com `event.target.value` dentro do método. Atualize a propriedade `input` do `state` do componente com essa nova string.
-In the `render` method, create the `input` element above the `h4` tag. Add a `value` attribute which is equal to the `input` property of the component's `state`. Then add an `onChange()` event handler set to the `handleChange()` method.
+No método `render`, crie o elemento `input` acima da tag `h4`. Adicione o atributo `value` o qual é igual a propriedade `input` do `state` do componente. Em seguida, adicione o manipulador de evento `onChange()` definido para o método `handleChange()`.
-When you type in the input box, that text is processed by the `handleChange()` method, set as the `input` property in the local `state`, and rendered as the value in the `input` box on the page. The component `state` is the single source of truth regarding the input data.
+Quando você digita na caixa de entrada, o texto é processado pelo método `handleChange()`, definido como a propriedade `input` no local `state`, e renderizado como o valor do `input` na página. O componente `state` é a única fonte de verdade em relação aos dados de entrada.
-Last but not least, don't forget to add the necessary bindings in the constructor.
+Por último, mas não menos importante, não se esqueça de adicionar as ligações necessárias no construtor.
# --hints--
-`ControlledInput` should return a `div` element which contains an `input` and a `p` tag.
+`ControlledInput` deve retornar um elemento `div` que contém as tags `input` e `p`.
```js
assert(
@@ -39,7 +39,7 @@ assert(
);
```
-The state of `ControlledInput` should initialize with an `input` property set to an empty string.
+O estado de `ControlledInput` deve inicializar com a propriedade `input` definida para ser uma string vazia.
```js
assert.strictEqual(
@@ -48,7 +48,7 @@ assert.strictEqual(
);
```
-Typing in the input element should update the state and the value of the input, and the `p` element should render this state as you type.
+Escrever no elemento input deve atualizar o estado e o valor do input, e o elemento `p` deve renderizar esse estado enquanto você digita.
```js
async () => {
diff --git a/curriculum/challenges/portuguese/03-front-end-libraries/react/create-a-react-component.md b/curriculum/challenges/portuguese/03-front-end-libraries/react/create-a-react-component.md
index 6a92615c1d..e75fbae548 100644
--- a/curriculum/challenges/portuguese/03-front-end-libraries/react/create-a-react-component.md
+++ b/curriculum/challenges/portuguese/03-front-end-libraries/react/create-a-react-component.md
@@ -1,6 +1,6 @@
---
id: 5a24c314108439a4d4036163
-title: Create a React Component
+title: Crie um Componente React
challengeType: 6
forumTopicId: 301386
dashedName: create-a-react-component
@@ -8,7 +8,7 @@ dashedName: create-a-react-component
# --description--
-The other way to define a React component is with the ES6 `class` syntax. In the following example, `Kitten` extends `React.Component`:
+A outra forma de definir um componente React é com a sintaxe `class` do ES6. No exemplo a seguir, `Kitten` extende `React.Component`:
```jsx
class Kitten extends React.Component {
@@ -24,21 +24,21 @@ class Kitten extends React.Component {
}
```
-This creates an ES6 class `Kitten` which extends the `React.Component` class. So the `Kitten` class now has access to many useful React features, such as local state and lifecycle hooks. Don't worry if you aren't familiar with these terms yet, they will be covered in greater detail in later challenges. Also notice the `Kitten` class has a `constructor` defined within it that calls `super()`. It uses `super()` to call the constructor of the parent class, in this case `React.Component`. The constructor is a special method used during the initialization of objects that are created with the `class` keyword. It is best practice to call a component's `constructor` with `super`, and pass `props` to both. This makes sure the component is initialized properly. For now, know that it is standard for this code to be included. Soon you will see other uses for the constructor as well as `props`.
+Isso cria a classe ES6 `Kitten` que extende a classe `React.Component`. Então a classe `Kitten` agora possui acesso a diversos recursos úteis do React, como local state e lifecycle hooks. Não se preocupe se você não estiver familiarizado com esses termos ainda, eles serão abordados em detalhes maiores nos desafios futuros. Também note que a classe `Kitten` possui um `construtor` definido dentro dele que chama `super()`. O construtor usa `super()` para chamar o construtor da classe pai, nesse caso `React.Component`. O construtor é um método especial usado durante a inicialização de objetos que são criados com a palavra-chave `class`. É uma boa prática chamar o `constructor` de um componente com `super`, e passar `props` para ambos. Isso garante que o componente é inicializado corretamente. Por agora, saiba que é padrão que esse código seja incluído. Em breve você verá outros usos para o construtor assim como para `props`.
# --instructions--
-`MyComponent` is defined in the code editor using class syntax. Finish writing the `render` method so it returns a `div` element that contains an `h1` with the text `Hello React!`.
+`MyComponent` é definido no editor de código usando a sintaxe de classe. Termine de escrever o método `render` para que ele retorne um elemento `div` que contém um `h1` com o texto `Hello React!`.
# --hints--
-The React component should return a `div` element.
+O componente React deve retornar um elemento `div`.
```js
assert(Enzyme.shallow(React.createElement(MyComponent)).type() === 'div');
```
-The returned `div` should render an `h1` header within it.
+A `div` retornada deve renderizar um título `h1` dentro dele.
```js
assert(
@@ -48,7 +48,7 @@ assert(
);
```
-The `h1` header should contain the string `Hello React!`.
+O título `h1` deve conter a string `Hello React!`.
```js
assert(
diff --git a/curriculum/challenges/portuguese/03-front-end-libraries/react/create-a-simple-jsx-element.md b/curriculum/challenges/portuguese/03-front-end-libraries/react/create-a-simple-jsx-element.md
index 6873473687..a758ce7298 100644
--- a/curriculum/challenges/portuguese/03-front-end-libraries/react/create-a-simple-jsx-element.md
+++ b/curriculum/challenges/portuguese/03-front-end-libraries/react/create-a-simple-jsx-element.md
@@ -1,6 +1,6 @@
---
id: 587d7dbc367417b2b2512bb1
-title: Create a Simple JSX Element
+title: Crie um Elemento JSX Simples
challengeType: 6
forumTopicId: 301390
dashedName: create-a-simple-jsx-element
@@ -8,29 +8,29 @@ dashedName: create-a-simple-jsx-element
# --description--
-React is an Open Source view library created and maintained by Facebook. It's a great tool to render the User Interface (UI) of modern web applications.
+React é uma biblioteca de visualização de código aberto criado e mantido pelo Facebook. É uma ótima ferramenta para renderizar a interface do usuário (IU) de aplicações web modernas.
-React uses a syntax extension of JavaScript called JSX that allows you to write HTML directly within JavaScript. This has several benefits. It lets you use the full programmatic power of JavaScript within HTML, and helps to keep your code readable. For the most part, JSX is similar to the HTML that you have already learned, however there are a few key differences that will be covered throughout these challenges.
+React usa a sintaxe de extensão do JavaScript chamada JSX que o permite escrever HTML diretamente no JavaScript. Isso possui diversos benefícios. Ele permite a você usar todo o poder programático do JavaScript dentro do HTML, e ajuda a manter o seu código legível. Em grande parte, JSX é semelhante ao HTML que você já aprendeu, no entanto existem algumas diferenças chaves que cobriremos durante esses desafios.
-For instance, because JSX is a syntactic extension of JavaScript, you can actually write JavaScript directly within JSX. To do this, you simply include the code you want to be treated as JavaScript within curly braces: `{ 'this is treated as JavaScript code' }`. Keep this in mind, since it's used in several future challenges.
+Por exemplo, porque o JSX é uma extensão sintática de JavaScript, você realmente pode escrever JavaScript diretamente dentro do JSX. Para isso, você simplesmente inclui o código que você quer que seja tratado como JavaScript dentro de chaves: `{'this is treated as JavaScript code'}`. Mantenha isso em mente, já que é utilizado em diversos desafios futuros.
-However, because JSX is not valid JavaScript, JSX code must be compiled into JavaScript. The transpiler Babel is a popular tool for this process. For your convenience, it's already added behind the scenes for these challenges. If you happen to write syntactically invalid JSX, you will see the first test in these challenges fail.
+No entanto, porque JSX não é JavaScript válido, código JSX precisa ser compilado em JavaScript. O transpilador Babel é uma ferramenta popular para esse processo. Para sua conveniência, já está adicionado por trás dos panos para esses desafios. Se por acaso você escrever JSX inválido sintaticamente, você verá o primeiro teste nesses desafios falhar.
-It's worth noting that under the hood the challenges are calling `ReactDOM.render(JSX, document.getElementById('root'))`. This function call is what places your JSX into React's own lightweight representation of the DOM. React then uses snapshots of its own DOM to optimize updating only specific parts of the actual DOM.
+Vale a pena notar que por trás dos panos os desafios estão chamando `ReactDOM.render(JSX, document.getElementById('root'))`. Essa chamada de função é o que coloca seu JSX na representação leve do DOM própria do React. React então usa snapshots de seu próprio DOM para otimizar a atualização apenas de partes específicas do DOM.
# --instructions--
-The current code uses JSX to assign a `div` element to the constant `JSX`. Replace the `div` with an `h1` element and add the text `Hello JSX!` inside it.
+O código atual usa JSX para atribuir um elemento `div` à constante `JSX`. Substitua o elemento `div` por um `h1` e adicione o texto `Hello JSX!` dentro dele.
# --hints--
-The constant `JSX` should return an `h1` element.
+A constante `JSX` deve retornar um elemento `h1`.
```js
assert(JSX.type === 'h1');
```
-The `h1` tag should include the text `Hello JSX!`
+A tag `h1` deve incluir o texto `Hello JSX!`
```js
assert(Enzyme.shallow(JSX).contains('Hello JSX!'));
diff --git a/curriculum/challenges/portuguese/03-front-end-libraries/react/create-a-stateful-component.md b/curriculum/challenges/portuguese/03-front-end-libraries/react/create-a-stateful-component.md
index 41ebc9c77b..32cf3422a4 100644
--- a/curriculum/challenges/portuguese/03-front-end-libraries/react/create-a-stateful-component.md
+++ b/curriculum/challenges/portuguese/03-front-end-libraries/react/create-a-stateful-component.md
@@ -1,6 +1,6 @@
---
id: 5a24c314108439a4d4036170
-title: Create a Stateful Component
+title: Criar um Componente Stateful
challengeType: 6
forumTopicId: 301391
dashedName: create-a-stateful-component
@@ -8,9 +8,9 @@ dashedName: create-a-stateful-component
# --description--
-One of the most important topics in React is `state`. State consists of any data your application needs to know about, that can change over time. You want your apps to respond to state changes and present an updated UI when necessary. React offers a nice solution for the state management of modern web applications.
+Um dos tópicos mais importantes em React é `state`. State consiste em qualquer dado que sua aplicação precisar saber, que pode ser alterado durante o tempo. Você quer que seus aplicativos respondam a mudanças de estado e apresentem uma interface atualizada quando necessário. React oferece uma boa solução para o gerenciamento de estados de aplicações web modernas.
-You create state in a React component by declaring a `state` property on the component class in its `constructor`. This initializes the component with `state` when it is created. The `state` property must be set to a JavaScript `object`. Declaring it looks like this:
+Você pode criar um estado em um componente React ao declarar a propriedade `state` na classe do componente no seu `constructor`. Isso inicializa o componente com `state` quando é criado. A propriedade `state` deve ser definida para um `objeto` JavaScript. Declarando, ele se parece com isso:
```jsx
this.state = {
@@ -18,15 +18,15 @@ this.state = {
}
```
-You have access to the `state` object throughout the life of your component. You can update it, render it in your UI, and pass it as props to child components. The `state` object can be as complex or as simple as you need it to be. Note that you must create a class component by extending `React.Component` in order to create `state` like this.
+Você precisa acessar o objeto `state` ao longo da vida do seu componente. Você pode atualizá-lo, renderizá-lo na sua interface do usuário e o passar como props para componentes filhos. O objeto `state` pode ser tão complexo ou simples quanto você precise. Note que você precisa criar uma classe de componente ao extender `React.Component` para criar `state` dessa forma.
# --instructions--
-There is a component in the code editor that is trying to render a `name` property from its `state`. However, there is no `state` defined. Initialize the component with `state` in the `constructor` and assign your name to a property of `name`.
+Existe um componente no editor de código que está tentando renderizar uma propriedade `name` de seu `state`. No entanto, não há nenhum `state` definido. Inicialize o componente com `state` no `constructor` e atribua o seu nome para a propriedade `name`.
# --hints--
-`StatefulComponent` should exist and render.
+`StatefulComponent` deve existir e renderizar.
```js
assert(
@@ -39,7 +39,7 @@ assert(
);
```
-`StatefulComponent` should render a `div` and an `h1` element.
+`StatefulComponent` deve renderizar um elemento `div` e um elemento `h1`.
```js
assert(
@@ -55,7 +55,7 @@ assert(
);
```
-The state of `StatefulComponent` should be initialized with a property `name` set to a string.
+O estado de `StatefulComponent` deve ser inicializado com uma propriedade `name` definida como uma string.
```js
assert(
@@ -71,7 +71,7 @@ assert(
);
```
-The property `name` in the state of `StatefulComponent` should render in the `h1` element.
+A propriedade `name` no state de `StatefulComponent` deve renderizar o elemento `h1`.
```js
assert(
diff --git a/curriculum/challenges/portuguese/03-front-end-libraries/react/create-a-stateless-functional-component.md b/curriculum/challenges/portuguese/03-front-end-libraries/react/create-a-stateless-functional-component.md
index e76b742ada..db12c9523b 100644
--- a/curriculum/challenges/portuguese/03-front-end-libraries/react/create-a-stateless-functional-component.md
+++ b/curriculum/challenges/portuguese/03-front-end-libraries/react/create-a-stateless-functional-component.md
@@ -1,6 +1,6 @@
---
id: 5a24c314108439a4d4036162
-title: Create a Stateless Functional Component
+title: Criar um Componente Funcional Sem Estado
challengeType: 6
forumTopicId: 301392
dashedName: create-a-stateless-functional-component
@@ -8,11 +8,11 @@ dashedName: create-a-stateless-functional-component
# --description--
-Components are the core of React. Everything in React is a component and here you will learn how to create one.
+Componentes são o núcleo do React. Tudo em React é um componente e aqui você vai aprender como criar um.
-There are two ways to create a React component. The first way is to use a JavaScript function. Defining a component in this way creates a *stateless functional component*. The concept of state in an application will be covered in later challenges. For now, think of a stateless component as one that can receive data and render it, but does not manage or track changes to that data. (We'll cover the second way to create a React component in the next challenge.)
+Existem duas maneiras de criar um componente React. A primeira maneira é usar uma função JavaScript. Definir um componente dessa forma cria um *componente funcional sem estado*. O conceito de estado numa aplicação será abordado em desafios posteriores. Por enquanto, pense em um componente sem estado como um que pode receber dados e renderizá-lo, mas não gerencia ou rastreia as alterações desses dados. (Vamos cobrir a segunda maneira de criar um componente React no próximo desafio.)
-To create a component with a function, you simply write a JavaScript function that returns either JSX or `null`. One important thing to note is that React requires your function name to begin with a capital letter. Here's an example of a stateless functional component that assigns an HTML class in JSX:
+Para criar um componente com uma função, você simplesmente escreve uma função JavaScript que retorne JSX ou `null`. Uma coisa importante a notar é que React requer que o nome da sua função comece com uma letra maiúscula. Aqui está um exemplo de um componente funcional sem estado que atribui uma classe HTML em JSX:
```jsx
const DemoComponent = function() {
@@ -22,19 +22,19 @@ const DemoComponent = function() {
};
```
-After being transpiled, the `
` will have a CSS class of `customClass`.
+Depois de ser transpilado, o `
` terá uma classe CSS de `customClass`.
-Because a JSX component represents HTML, you could put several components together to create a more complex HTML page. This is one of the key advantages of the component architecture React provides. It allows you to compose your UI from many separate, isolated components. This makes it easier to build and maintain complex user interfaces.
+Como um componente JSX representa HTML, você pode juntar vários componentes para criar uma página HTML mais complexa. Esta é uma das principais vantagens da arquitetura do componente que React provê. Isso permite que você componha sua interface de usuário de vários componentes isolados e separados. Isso torna mais fácil construir e manter interfaces de usuário complexas.
# --instructions--
-The code editor has a function called `MyComponent`. Complete this function so it returns a single `div` element which contains some string of text.
+O editor de código tem uma função chamada `MyComponent`. Complete essa função para que ela retorne um único elemento `div`, que contém alguma string de texto.
-**Note:** The text is considered a child of the `div` element, so you will not be able to use a self-closing tag.
+**Nota:** O texto é considerado filho do elemento `div`, portanto você não poderá usar uma tag de fechamento.
# --hints--
-`MyComponent` should return JSX.
+`MyComponent` deve retornar JSX.
```js
assert(
@@ -45,7 +45,7 @@ assert(
);
```
-`MyComponent` should return a `div` element.
+`MyComponent` deve retornar um elemento `div`.
```js
assert(
@@ -56,7 +56,7 @@ assert(
);
```
-The `div` element should contain a string of text.
+O elemento `div` deve conter uma string de texto.
```js
assert(
diff --git a/curriculum/challenges/portuguese/03-front-end-libraries/react/define-an-html-class-in-jsx.md b/curriculum/challenges/portuguese/03-front-end-libraries/react/define-an-html-class-in-jsx.md
index 2438f4b291..5f17f180d3 100644
--- a/curriculum/challenges/portuguese/03-front-end-libraries/react/define-an-html-class-in-jsx.md
+++ b/curriculum/challenges/portuguese/03-front-end-libraries/react/define-an-html-class-in-jsx.md
@@ -1,6 +1,6 @@
---
id: 5a24c314108439a4d4036160
-title: Define an HTML Class in JSX
+title: Definir uma classe HTML em JSX
challengeType: 6
forumTopicId: 301393
dashedName: define-an-html-class-in-jsx
@@ -8,27 +8,27 @@ dashedName: define-an-html-class-in-jsx
# --description--
-Now that you're getting comfortable writing JSX, you may be wondering how it differs from HTML.
+Agora que você está se sentindo confortável escrevendo JSX, você pode estar se perguntando como ele difere do HTML.
-So far, it may seem that HTML and JSX are exactly the same.
+Até agora, pode parecer que HTML e JSX são exatamente os mesmos.
-One key difference in JSX is that you can no longer use the word `class` to define HTML classes. This is because `class` is a reserved word in JavaScript. Instead, JSX uses `className`.
+Uma diferença importante em JSX é que você não pode mais usar a palavra `class` para definir classes HTML. O motivo disso é porque `class` é uma palavra reservada em JavaScript. Em vez disso, JSX usa `className`.
-In fact, the naming convention for all HTML attributes and event references in JSX become camelCase. For example, a click event in JSX is `onClick`, instead of `onclick`. Likewise, `onchange` becomes `onChange`. While this is a subtle difference, it is an important one to keep in mind moving forward.
+Na verdade, a convenção de nomeação para todos os atributos HTML e referências de eventos em JSX tornam-se camelCase. Por exemplo, um evento de clique em JSX é `onClick`, ao invés de `onclick`. Da mesma forma, `onchange` se torna `onChange`. Embora essa seja uma diferença sutil, é importante manter em mente no futuro.
# --instructions--
-Apply a class of `myDiv` to the `div` provided in the JSX code.
+Aplique a classe `myDiv` no `div` fornecido no código JSX.
# --hints--
-The constant `JSX` should return a `div` element.
+A constante `JSX` deve retornar um elemento `div`.
```js
assert.strictEqual(JSX.type, 'div');
```
-The `div` should have a class of `myDiv`.
+A `div` deve ter a classe `myDiv`.
```js
assert.strictEqual(JSX.props.className, 'myDiv');
diff --git a/curriculum/challenges/portuguese/03-front-end-libraries/react/give-sibling-elements-a-unique-key-attribute.md b/curriculum/challenges/portuguese/03-front-end-libraries/react/give-sibling-elements-a-unique-key-attribute.md
index 49bf695b42..2970b3b470 100644
--- a/curriculum/challenges/portuguese/03-front-end-libraries/react/give-sibling-elements-a-unique-key-attribute.md
+++ b/curriculum/challenges/portuguese/03-front-end-libraries/react/give-sibling-elements-a-unique-key-attribute.md
@@ -1,6 +1,6 @@
---
id: 5a24c314108439a4d403618b
-title: Give Sibling Elements a Unique Key Attribute
+title: Dê aos Elementos Irmãos um Atributo Chave Único
challengeType: 6
forumTopicId: 301394
dashedName: give-sibling-elements-a-unique-key-attribute
@@ -8,19 +8,19 @@ dashedName: give-sibling-elements-a-unique-key-attribute
# --description--
-The last challenge showed how the `map` method is used to dynamically render a number of elements based on user input. However, there was an important piece missing from that example. When you create an array of elements, each one needs a `key` attribute set to a unique value. React uses these keys to keep track of which items are added, changed, or removed. This helps make the re-rendering process more efficient when the list is modified in any way.
+O último desafio mostrou como o método `map` é usado para renderizar dinamicamente um número de elementos com base na entrada do usuário. No entanto, faltou uma peça importante desse exemplo. Ao criar um array de elementos, cada um precisa de um atributo `key` definido com um valor único. React usa essas chaves para manter o controle de quais itens são adicionados, alterados ou removidos. Isso ajuda a tornar o processo de re-renderização mais eficiente quando a lista é modificada de qualquer forma.
-**Note:** Keys only need to be unique between sibling elements, they don't need to be globally unique in your application.
+**Nota:** As chaves só precisam ser únicas entre elementos irmãos, elas não precisam ser globalmente exclusivas na sua aplicação.
# --instructions--
-The code editor has an array with some front end frameworks and a stateless functional component named `Frameworks()`. `Frameworks()` needs to map the array to an unordered list, much like in the last challenge. Finish writing the `map` callback to return an `li` element for each framework in the `frontEndFrameworks` array. This time, make sure to give each `li` a `key` attribute, set to a unique value. The `li` elements should also contain text from `frontEndFrameworks`.
+O editor de código tem uma array com alguns frameworks front-end e um componente funcional sem estado chamado `Frameworks()`. `Frameworks()` precisa mapear a matriz para uma lista não ordenada, assim como no último desafio. Finalize a escrita do callback `map` para retornar um elemento `li` para cada framework no array `frontEndFrameworks`. Desta vez, certifique-se de dar a cada `li` um atributo `key`, definido como um valor único. Os elementos `li` também devem conter o texto do `frontEndFrameworks`.
-Normally, you want to make the key something that uniquely identifies the element being rendered. As a last resort the array index may be used, but typically you should try to use a unique identification.
+Normalmente, você quer tornar a chave algo que identifica de forma única o elemento que está a ser renderizado. Como um último recurso, o índice da matriz pode ser usado, mas normalmente você deve tentar usar uma identificação exclusiva.
# --hints--
-The `Frameworks` component should exist and render to the page.
+O componente `Frameworks` deve existir e renderizar à página.
```js
assert(
@@ -28,19 +28,19 @@ assert(
);
```
-`Frameworks` should render an `h1` element.
+`Frameworks` deve renderizar um elemento `h1`.
```js
assert(Enzyme.mount(React.createElement(Frameworks)).find('h1').length === 1);
```
-`Frameworks` should render a `ul` element.
+`Frameworks` deve renderizar um elemento `ul`.
```js
assert(Enzyme.mount(React.createElement(Frameworks)).find('ul').length === 1);
```
-The `ul` tag should render 6 child `li` elements.
+A tag `ul` deve renderizar 6 elementos filhos `li`.
```js
assert(
@@ -54,7 +54,7 @@ assert(
);
```
-Each list item element should have a unique `key` attribute.
+Cada elemento de item da lista deve ter um atributo único `key`.
```js
assert(
@@ -73,7 +73,7 @@ assert(
);
```
-Each list item element should contain text from `frontEndFrameworks`.
+Cada elemento de item da lista deve conter o texto de `frontEndFrameworks`.
```js
assert(
diff --git a/curriculum/challenges/portuguese/03-front-end-libraries/react/learn-about-self-closing-jsx-tags.md b/curriculum/challenges/portuguese/03-front-end-libraries/react/learn-about-self-closing-jsx-tags.md
index 31edb73183..ca86c1ac62 100644
--- a/curriculum/challenges/portuguese/03-front-end-libraries/react/learn-about-self-closing-jsx-tags.md
+++ b/curriculum/challenges/portuguese/03-front-end-libraries/react/learn-about-self-closing-jsx-tags.md
@@ -1,6 +1,6 @@
---
id: 5a24c314108439a4d4036161
-title: Learn About Self-Closing JSX Tags
+title: Aprenda sobre tags JSX com autofechamento
challengeType: 6
forumTopicId: 301396
dashedName: learn-about-self-closing-jsx-tags
@@ -8,35 +8,35 @@ dashedName: learn-about-self-closing-jsx-tags
# --description--
-So far, you’ve seen how JSX differs from HTML in a key way with the use of `className` vs. `class` for defining HTML classes.
+Até agora, você viu como o JSX difere do HTML de uma forma chave com o uso de `className` vs. `class` para definir classes HTML.
-Another important way in which JSX differs from HTML is in the idea of the self-closing tag.
+Outra forma importante em que o JSX difere do HTML é na ideia da tag de auto-fechamento.
-In HTML, almost all tags have both an opening and closing tag: `
`; the closing tag always has a forward slash before the tag name that you are closing. However, there are special instances in HTML called “self-closing tags”, or tags that don’t require both an opening and closing tag before another tag can start.
+Em HTML, quase todas as tags possuem uma tag de abertura e fechamento: `
`; a tag de fechamento sempre tem uma barra para frente antes do nome da tag que está fechando. No entanto, há instâncias especiais no HTML chamadas de "tags de autofechamento", ou tags que não requerem uma tag de abertura e fechamento antes que outra tag possa iniciar.
-For example the line-break tag can be written as `
` or as `
`, but should never be written as `
`, since it doesn't contain any content.
+Por exemplo, a tag quebra-linha pode ser escrita como `
` ou como `
`, mas nunca deve ser escrito como `
`, uma vez que não contém nenhum conteúdo.
-In JSX, the rules are a little different. Any JSX element can be written with a self-closing tag, and every element must be closed. The line-break tag, for example, must always be written as `
` in order to be valid JSX that can be transpiled. A `
`, on the other hand, can be written as `
` or `
`. The difference is that in the first syntax version there is no way to include anything in the `
`. You will see in later challenges that this syntax is useful when rendering React components.
+Em JSX, as regras são um pouco diferentes. Qualquer elemento JSX pode ser escrito com uma tag auto-fechada, e todo elemento deve ser fechado. A tag quebra-linha, por exemplo, deve sempre ser escrita como `
` para ser JSX válido que pode ser transpilado. Um `
`, por outro lado, pode ser escrito como `
` ou `
`. A diferença é que na primeira versão de sintaxe não há como incluir nada no `
`. Você verá em desafios posteriores que essa sintaxe é útil ao renderizar componentes React.
# --instructions--
-Fix the errors in the code editor so that it is valid JSX and successfully transpiles. Make sure you don't change any of the content - you only need to close tags where they are needed.
+Corrija os erros no editor de código para que ele seja JSX válido e transpilado com sucesso. Certifique-se de não alterar nenhum conteúdo - você só precisa fechar as tags onde elas são necessárias.
# --hints--
-The constant `JSX` should return a `div` element.
+A constante `JSX` deve retornar um elemento `div`.
```js
assert.strictEqual(JSX.type, 'div');
```
-The `div` should contain a `br` tag.
+A `div` deve conter uma tag `br`.
```js
assert(Enzyme.shallow(JSX).find('br').length === 1);
```
-The `div` should contain an `hr` tag.
+A `div` deve conter uma tag `hr`.
```js
assert(Enzyme.shallow(JSX).find('hr').length === 1);
diff --git a/curriculum/challenges/portuguese/03-front-end-libraries/react/optimize-re-renders-with-shouldcomponentupdate.md b/curriculum/challenges/portuguese/03-front-end-libraries/react/optimize-re-renders-with-shouldcomponentupdate.md
index 661ea8e6dd..487af13929 100644
--- a/curriculum/challenges/portuguese/03-front-end-libraries/react/optimize-re-renders-with-shouldcomponentupdate.md
+++ b/curriculum/challenges/portuguese/03-front-end-libraries/react/optimize-re-renders-with-shouldcomponentupdate.md
@@ -1,6 +1,6 @@
---
id: 5a24c314108439a4d4036180
-title: Optimize Re-Renders with shouldComponentUpdate
+title: Otimizar Re-Renderizações com shouldComponentUpdate
challengeType: 6
forumTopicId: 301398
dashedName: optimize-re-renders-with-shouldcomponentupdate
@@ -8,17 +8,17 @@ dashedName: optimize-re-renders-with-shouldcomponentupdate
# --description--
-So far, if any component receives new `state` or new `props`, it re-renders itself and all its children. This is usually okay. But React provides a lifecycle method you can call when child components receive new `state` or `props`, and declare specifically if the components should update or not. The method is `shouldComponentUpdate()`, and it takes `nextProps` and `nextState` as parameters.
+Até agora, se qualquer componente recebe um novo `state` ou novas `props`, ele se renderiza novamente e todos os seus filhos. Normalmente isto está ok. Mas React fornece um método de ciclo de vida que você pode chamar quando componentes filhos recebem um novo `state` ou `props`, e declarar especificamente se os componentes devem atualizar ou não. O método é `shouldComponentUpdate()`, e leva `nextProps` e `nextState` como parâmetros.
-This method is a useful way to optimize performance. For example, the default behavior is that your component re-renders when it receives new `props`, even if the `props` haven't changed. You can use `shouldComponentUpdate()` to prevent this by comparing the `props`. The method must return a `boolean` value that tells React whether or not to update the component. You can compare the current props (`this.props`) to the next props (`nextProps`) to determine if you need to update or not, and return `true` or `false` accordingly.
+Esse método é uma maneira útil de otimizar o desempenho. Por exemplo, o comportamento padrão é que seu componente re-renderiza novamente quando recebe novas `props`, mesmo que as `props` não tenham mudado. Você pode usar `shouldComponentUpdate()` para evitar isso comparando as `props`. O método deve retornar um valor `booleano` que indica ao React se deve ou não atualizar o componente. Você pode comparar os "props" atuais (`this.props`) para os próximos props (`nextProps`) para determinar se você precisa atualizar ou não, e retorne `true` ou `false` de acordo.
# --instructions--
-The `shouldComponentUpdate()` method is added in a component called `OnlyEvens`. Currently, this method returns `true` so `OnlyEvens` re-renders every time it receives new `props`. Modify the method so `OnlyEvens` updates only if the `value` of its new props is even. Click the `Add` button and watch the order of events in your browser's console as the lifecycle hooks are triggered.
+O método `shouldComponentUpdate()` é adicionado em um componente chamado `OnlyEvens`. Atualmente, esse método retorna `true` então `OnlyEvens` re-renderiza novamente toda vez que recebe novas `props`. Modifique o método para que `OnlyEvens` seja atualizado somente se os `value` de suas novas props forem par. Clique no botão `Add` e veja a ordem dos eventos no console do seu navegador enquanto os ganchos de ciclo de vida são ativados.
# --hints--
-The `Controller` component should render the `OnlyEvens` component as a child.
+O componente `Controller` deve renderizar o componente `OnlyEvens` como um filho.
```js
assert(
@@ -32,7 +32,7 @@ assert(
);
```
-The `shouldComponentUpdate` method should be defined on the `OnlyEvens` component.
+O método `shouldComponentUpdate` deve ser definido no componente `OnlyEvens`.
```js
assert(
@@ -45,7 +45,7 @@ assert(
);
```
-The `OnlyEvens` component should return an `h1` tag which renders the value of `this.props.value`.
+O componente OnlyEvens` deve retornar uma tag
h1` que renderiza o valor de `this.props.value`.
```js
(() => {
@@ -64,7 +64,7 @@ The `OnlyEvens` component should return an `h1` tag which renders the value of `
})();
```
-`OnlyEvens` should re-render only when `nextProps.value` is even.
+`OnlyEvens` deve re-renderizar novamente somente quando `nextProps.value` for par.
```js
(() => {
diff --git a/curriculum/challenges/portuguese/03-front-end-libraries/react/override-default-props.md b/curriculum/challenges/portuguese/03-front-end-libraries/react/override-default-props.md
index 9a6afa9795..29d7b4a766 100644
--- a/curriculum/challenges/portuguese/03-front-end-libraries/react/override-default-props.md
+++ b/curriculum/challenges/portuguese/03-front-end-libraries/react/override-default-props.md
@@ -1,6 +1,6 @@
---
id: 5a24c314108439a4d403616c
-title: Override Default Props
+title: Sobrescrever Props Padrão
challengeType: 6
forumTopicId: 301399
dashedName: override-default-props
@@ -8,17 +8,17 @@ dashedName: override-default-props
# --description--
-The ability to set default props is a useful feature in React. The way to override the default props is to explicitly set the prop values for a component.
+A habilidade de definir props padrões é um recurso útil em React. A maneira de substituir as props padrões é definindo explicitamente os valores das propriedades para um componente.
# --instructions--
-The `ShoppingCart` component now renders a child component `Items`. This `Items` component has a default prop `quantity` set to the integer `0`. Override the default prop by passing in a value of `10` for `quantity`.
+O componente `ShoppingCart` agora renderiza um componente filho `Itens`. Este componente `Itens` tem uma prop padrão `quantidade ` definida como o número inteiro `0`. Substitua a prop padrão passando o valor de `10` para `quantity`.
-**Note:** Remember that the syntax to add a prop to a component looks similar to how you add HTML attributes. However, since the value for `quantity` is an integer, it won't go in quotes but it should be wrapped in curly braces. For example, `{100}`. This syntax tells JSX to interpret the value within the braces directly as JavaScript.
+**Nota:** Lembre-se de que a sintaxe para adicionar uma prop a um componente fica semelhante à forma como você adiciona atributos HTML. No entanto, uma vez que o valor para `quantity` é um número inteiro, ele não irá entre aspas mas deve estar entre chaves. Por exemplo, `{100}`. Esta sintaxe diz para JSX interpretar o valor entre chaves diretamente como JavaScript.
# --hints--
-The component `ShoppingCart` should render.
+O componente `ShoppingCart` deve renderizar.
```js
assert(
@@ -29,7 +29,7 @@ assert(
);
```
-The component `Items` should render.
+O componente `Items` deve renderizar.
```js
assert(
@@ -40,7 +40,7 @@ assert(
);
```
-The `Items` component should have a prop of `{ quantity: 10 }` passed from the `ShoppingCart` component.
+O componente `Items` deve ter a propriedade `{ quantity: 10 }` passada do componente `ShoppingCart`.
```js
(getUserInput) =>