chore(i18n,curriculum): update translations (#43178)
This commit is contained in:
camperbot
GitHub
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036182
|
||||
title: Adicione estilos em linha no React
|
||||
title: Adicionar estilos em linha no React
|
||||
challengeType: 6
|
||||
forumTopicId: 301378
|
||||
dashedName: add-inline-styles-in-react
|
||||
@@ -8,7 +8,7 @@ dashedName: add-inline-styles-in-react
|
||||
|
||||
# --description--
|
||||
|
||||
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.
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
@@ -30,7 +30,7 @@ A variável `styles` devem ter a propriedade `color` definida com o valor `purpl
|
||||
assert(styles.color === 'purple');
|
||||
```
|
||||
|
||||
A variável `styles` devem ter a propriedade `fontSize` definida com o valor `40`.
|
||||
A variável `styles` deve ter a propriedade `fontSize` definida com o valor `40`.
|
||||
|
||||
```js
|
||||
assert(styles.fontSize === 40);
|
||||
|
||||
@@ -24,7 +24,7 @@ Assim que você completar os passos acima você deve ser capaz de clicar o botã
|
||||
|
||||
# --hints--
|
||||
|
||||
`MyComponent` deve retornar um elemento `div` o qual envolve dois elementos, os elementos `button` e `h1`, nessa ordem.
|
||||
`MyComponent` deve retornar um elemento `div` o qual envolve dois elementos, os elementos button e `h1`, nessa ordem.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -10,7 +10,7 @@ dashedName: change-inline-css-conditionally-based-on-component-state
|
||||
|
||||
Nesse ponto, você já viu diversas aplicações de renderização condicional e o uso de estilos em linha. 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 atribuído aos elementos do JSX no método de renderização.
|
||||
|
||||
É 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 a interface de usuário potencialmente 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.
|
||||
É 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 a interface de usuário potencialmente 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--
|
||||
|
||||
|
||||
@@ -29,7 +29,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
O componente `TypesOfFood` deve retornar o component `Fruits`.
|
||||
O componente `TypesOfFood` deve retornar o componente `Fruits`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -55,7 +55,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
O componente `Fruits` deve retornar o componente `Vegetables` abaixo do componente `Fruits`.
|
||||
O componente `TypesOfFood` deve retornar o componente `Vegetables` abaixo do componente `Fruits`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -52,7 +52,7 @@ A constante `JSX` deve retornar um elemento `div`.
|
||||
assert(JSX.type === 'div');
|
||||
```
|
||||
|
||||
O `div` deve conter uma tag `h1` como o primeiro elemento.
|
||||
A `div` deve conter uma tag `h1` como o primeiro elemento.
|
||||
|
||||
```js
|
||||
assert(JSX.props.children[0].type === 'h1');
|
||||
@@ -64,7 +64,7 @@ A `div` deve conter uma tag `p` como o segundo elemento.
|
||||
assert(JSX.props.children[1].type === 'p');
|
||||
```
|
||||
|
||||
O `div` deve conter uma tag `ul` como o terceiro elemento.
|
||||
A `div` deve conter uma tag `ul` como o terceiro elemento.
|
||||
|
||||
```js
|
||||
assert(JSX.props.children[2].type === 'ul');
|
||||
|
||||
@@ -12,7 +12,7 @@ O React é uma biblioteca de visualização de código aberto criada e mantida p
|
||||
|
||||
React usa a sintaxe de extensão do JavaScript chamada JSX que o permite escrever HTML diretamente no JavaScript. Isso possui diversos benefícios. Ela 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.
|
||||
|
||||
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.
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@ dashedName: create-a-stateful-component
|
||||
|
||||
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.
|
||||
|
||||
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:
|
||||
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 `object` JavaScript. Declarando, ele se parece com isso:
|
||||
|
||||
```jsx
|
||||
this.state = {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036181
|
||||
title: Introducing Inline Styles
|
||||
title: Introduzir estilos em linha
|
||||
challengeType: 6
|
||||
forumTopicId: 301395
|
||||
dashedName: introducing-inline-styles
|
||||
@@ -8,33 +8,32 @@ dashedName: introducing-inline-styles
|
||||
|
||||
# --description--
|
||||
|
||||
There are other complex concepts that add powerful capabilities to your React code. But you may be wondering about the more simple problem of how to style those JSX elements you create in React. You likely know that it won't be exactly the same as working with HTML because of [the way you apply classes to JSX elements](/learn/front-end-development-libraries/react/define-an-html-class-in-jsx).
|
||||
Existem outros conceitos complexos que adicionam recursos poderosos ao seu código React. Mas você pode estar se perguntando sobre o problema mais simples de como estilizar esses elementos JSX que você cria em React. Você provavelmente sabe que não será exatamente o mesmo que trabalhar com HTML por causa [da forma como aplica classes aos elementos JSX](/learn/front-end-development-libraries/react/define-an-html-class-in-jsx).
|
||||
|
||||
If you import styles from a stylesheet, it isn't much different at all. You apply a class to your JSX element using the `className` attribute, and apply styles to the class in your stylesheet. Another option is to apply inline styles, which are very common in ReactJS development.
|
||||
Se você importar estilos de uma folha de estilos, não é muito diferente. Você aplica uma classe ao seu elemento JSX usando o atributo `className` e aplica estilos à classe em sua folha de estilos. Outra opção é aplicar estilos em linha, que são muito comuns no desenvolvimento de ReactJS.
|
||||
|
||||
You apply inline styles to JSX elements similar to how you do it in HTML, but with a few JSX differences. Here's an example of an inline style in HTML:
|
||||
Você aplica estilos em linha em elementos JSX similares a como você faz isso em HTML, mas com algumas diferenças em JSX. Aqui está um exemplo de estilo integrado em HTML:
|
||||
|
||||
```jsx
|
||||
<div style="color: yellow; font-size: 16px">Mellow Yellow</div>
|
||||
```
|
||||
|
||||
JSX elements use the `style` attribute, but because of the way JSX is transpiled, you can't set the value to a `string`. Instead, you set it equal to a JavaScript `object`. Here's an example:
|
||||
Elementos JSX usam o atributo `style`, mas por causa da forma como o JSX é transpilado, você não pode definir o valor para uma `string`. Em vez disso, você o definiu para ser igual a um `object` em JavaScript. Exemplo:
|
||||
|
||||
```jsx
|
||||
<div style={{color: "yellow", fontSize: 16}}>Mellow Yellow</div>
|
||||
```
|
||||
|
||||
Notice how we camelCase the `fontSize` property? This is because React will not accept kebab-case keys in the style object. React will apply the correct property name for us in the HTML.
|
||||
Percebeu como colocamos em camelCase a propriedade `fontSize`? Isso é porque o React não aceitará chaves hifenizadas (em kebab-case) no objeto de estilo. React aplicará o nome de propriedade correto para nós no HTML.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add a `style` attribute to the `div` in the code editor to give the text a color of red and font size of `72px`.
|
||||
|
||||
Note that you can optionally set the font size to be a number, omitting the units `px`, or write it as `72px`.
|
||||
Adicione um atributo `style` para o `div` no editor de código para dar ao texto a cor vermelha e tamanho da fonte de `72px`.
|
||||
|
||||
Note que você pode opcionalmente definir o tamanho da fonte como um número. omitindo as unidades `px`, ou escreva-o como `72px`.
|
||||
# --hints--
|
||||
|
||||
The component should render a `div` element.
|
||||
O componente deve renderizar um elemento `div`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -45,7 +44,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `div` element should have a color of `red`.
|
||||
O elemento `div` deve ter a cor `red`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -56,7 +55,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `div` element should have a font size of `72px`.
|
||||
O elemento `div` deve ter um tamanho de fonte de `72px`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -10,7 +10,7 @@ dashedName: optimize-re-renders-with-shouldcomponentupdate
|
||||
|
||||
Até agora, se qualquer componente recebe um novo `state` ou novas `props`, ele se renderiza novamente com 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.
|
||||
|
||||
Esse método é uma maneira útil de otimizar o desempenho. Por exemplo, o comportamento padrão é que seu componente 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.
|
||||
Esse método é uma maneira útil de otimizar o desempenho. Por exemplo, o comportamento padrão é que seu componente 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 `boolean` 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--
|
||||
|
||||
@@ -45,7 +45,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
O componente </code>OnlyEvens` deve retornar uma tag <code>h1` que renderiza o valor de `this.props.value`.
|
||||
O componente `OnlyEvens` deve retornar uma tag `h1` que renderiza o valor de `this.props.value`.
|
||||
|
||||
```js
|
||||
(() => {
|
||||
|
||||
@@ -22,7 +22,7 @@ Você usa **atributos HTML personalizados** criados por você e suportados por R
|
||||
const Welcome = (props) => <h1>Hello, {props.user}!</h1>
|
||||
```
|
||||
|
||||
É padrão chamar esse valor `"props"` e, quando lidar com componentes funcionais sem estado, você basicamente considera isso como um argumento para uma função que retorna JSX. Você pode acessar o valor do argumento no corpo da função. Com componentes de classe, você verá que isto é um pouco diferente.
|
||||
É padrão chamar esse valor `props` e, quando lidar com componentes funcionais sem estado, você basicamente considera isso como um argumento para uma função que retorna JSX. Você pode acessar o valor do argumento no corpo da função. Com componentes de classe, você verá que isto é um pouco diferente.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -16,7 +16,7 @@ Componentes do React são passados a `ReactDOM.render()` um pouco diferente dos
|
||||
|
||||
# --instructions--
|
||||
|
||||
Os componentes `Fruits` e `Vegetables` são definidos para você nos bastidores. Renderize ambos os componentes como filhos do componente `TypesOfFood` e, em seguida, renderize `TypesOfFood` para o DOM. Há uma `div` com `id='challenge-node'` disponível para você usar.
|
||||
Os componentes `Fruits` e `Vegetables` são definidos para você nos bastidores. Renderize ambos os componentes como filhos do componente `TypesOfFood` e, em seguida, renderize `TypesOfFood` para o DOM. Há um `div` com `id='challenge-node'` disponível para você usar.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@ dashedName: render-conditionally-from-props
|
||||
|
||||
# --description--
|
||||
|
||||
Até agora, você viu como usar o `if/else`, `&&`, e o operador ternário (`condition ? expressionIfTrue : expressionIfFalse`) para tomar decisões condicionais sobre o que renderizar e quando. No entanto, resta um tópico importante para discutir que permite que você combine todos esses conceitos com outro poderoso recurso React: props. Usar props para renderizar código condicionalmente é muito comum entre desenvolvedores React — isto é, eles usam o valor de uma determinada propriedade para tomar decisões automaticamente sobre o que renderizar.
|
||||
Até agora, você viu como usar a condição `if/else`, `&&` e o operador ternário (`condition ? expressionIfTrue : expressionIfFalse`) para tomar decisões condicionais sobre o que renderizar e quando. No entanto, resta um tópico importante para discutir que permite que você combine todos esses conceitos com outro poderoso recurso React: props. Usar props para renderizar código condicionalmente é muito comum entre desenvolvedores React — isto é, eles usam o valor de uma determinada propriedade para tomar decisões automaticamente sobre o que renderizar.
|
||||
|
||||
Neste desafio, você vai configurar um componente filho para tomar decisões de renderização com base em props. Você também usará o operador ternário, mas você pode ver como vários dos outros conceitos que foram abordados nos últimos desafios poderão ser igualmente úteis neste contexto.
|
||||
|
||||
|
||||
@@ -16,7 +16,7 @@ Como você esperaria, `ReactDOM.render()` deve ser chamado após as declaraçõe
|
||||
|
||||
# --instructions--
|
||||
|
||||
O editor de código tem um componente JSX simples. Use o método `ReactDOM.render()` para renderizar este componente na página. Você pode passar elementos JSX definidos diretamente como o primeiro argumento e usar `document.getElementById()` para selecionar o nó do DOM onde renderizá-los. Há uma `div` com `id='challenge-node'` disponível para você usar. Certifique-se de não alterar a constante `JSX`.
|
||||
O editor de código tem um componente JSX simples. Use o método `ReactDOM.render()` para renderizar este componente na página. Você pode passar elementos JSX definidos diretamente como o primeiro argumento e usar `document.getElementById()` para selecionar o nó do DOM onde renderizá-los. Há um `div` com `id='challenge-node'` disponível para você usar. Certifique-se de não alterar a constante `JSX`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036185
|
||||
title: Use && para uma forma mais concisa do condicional
|
||||
title: Use && for a More Concise Conditional
|
||||
challengeType: 6
|
||||
forumTopicId: 301413
|
||||
dashedName: use--for-a-more-concise-conditional
|
||||
|
||||
@@ -22,15 +22,16 @@ Uma vez que o componente está renderizando informações na página, os usuári
|
||||
|
||||
# --hints--
|
||||
|
||||
O componente `CheckUserAge` deve renderizar com um único elemento `input` e um único elemento</code>button`.</p>
|
||||
O componente `CheckUserAge` deve renderizar com um único elemento `input` e um único elemento`button`.
|
||||
|
||||
<pre><code class="js">assert(
|
||||
```js
|
||||
assert(
|
||||
Enzyme.mount(React.createElement(CheckUserAge)).find('div').find('input')
|
||||
.length === 1 &&
|
||||
Enzyme.mount(React.createElement(CheckUserAge)).find('div').find('button')
|
||||
.length === 1
|
||||
);
|
||||
`</pre>
|
||||
```
|
||||
|
||||
O state do componente `CheckUserAge` deve ser inicializado com uma propriedade de `userAge` e uma propriedade `input`, ambos definidos com o valor de uma string vazia.
|
||||
|
||||
|
||||
@@ -42,7 +42,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
O componente `TypesOfFood` deve retornar os elementos `h2` e `ul`.
|
||||
O componente `TypesOfFruit` deve retornar os elementos `h2` e `ul`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -36,7 +36,7 @@ Observe que você tem que envolver o objeto literalmente entre parênteses, caso
|
||||
|
||||
# --instructions--
|
||||
|
||||
`MyComponent` tem uma propriedade `visibilty` que foi inicializada como `false`. O método de renderização retorna uma view se o valor de `visibility` for verdadeiro e uma view diferente se for falsa.
|
||||
`MyComponent` tem uma propriedade `visibility` que foi inicializada como `false`. O método de renderização retorna uma view se o valor de `visibility` for verdadeiro e uma view diferente se for falsa.
|
||||
|
||||
Atualmente, não há forma de atualizar a propriedade `visibility` no `state` do componente. O valor deve alternar entre verdadeiro e falso. Há um manipulador de cliques no botão que aciona um método de classe chamado `toggleVisibility()`. Passe uma função para `setState` para definir esse método para que o `state` de `visibility` alterne para o valor oposto quando o método for chamado. Se `visibility` for `false`, o método define para `true`, e vice-versa.
|
||||
|
||||
|
||||
@@ -40,7 +40,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`MyComponent` deve existir e ser rendizado no DOM.
|
||||
`MyComponent` deve existir e ser renderizado no DOM.
|
||||
|
||||
```js
|
||||
assert(document.getElementById('challenge-node').childNodes.length === 1);
|
||||
|
||||
Reference in New Issue
Block a user