chore(i18n,curriculum): update translations (#43178)
This commit is contained in:
camperbot
GitHub
@@ -29,7 +29,7 @@ Você deve ter o total de 6 elementos `button`.
|
||||
assert($('button') && $('button').length > 5);
|
||||
```
|
||||
|
||||
Todos os elementos `button` devem conter tag de fechamento.
|
||||
Todos os elementos `button` devem ter tags de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -12,7 +12,7 @@ dashedName: add-font-awesome-icons-to-all-of-our-buttons
|
||||
|
||||
# --description--
|
||||
|
||||
Font Awesome é uma biblioteca conveniente de ícones. Estes ícones podem ser fontes da web ou gráficos vetoriais. Estes ícones são tratados assim como as fontes. Você pode especificar seu tamanho utilizando pixels, e eles vão assumir o tamanho de fonte dos elementos pais do HTML.
|
||||
Font Awesome é uma biblioteca conveniente de ícones. Estes ícones podem ser fontes da web ou gráficos vetoriais. Estes ícones são tratados assim como as fontes. Você pode especificar seu tamanho utilizando pixels, e eles irão assumir o tamanho de fonte de seus elementos HTML parentes.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@ dashedName: add-font-awesome-icons-to-our-buttons
|
||||
|
||||
# --description--
|
||||
|
||||
Font Awesome é uma biblioteca conveniente de ícones. Estes ícones podem ser fontes da web ou gráficos vetoriais. Estes ícones são tratados assim como as fontes. Você pode especificar seu tamanho utilizando pixels, e eles vão assumir o tamanho de fonte dos elementos pais do HTML.
|
||||
Font Awesome é uma biblioteca conveniente de ícones. Estes ícones podem ser fontes da web ou gráficos vetoriais. Estes ícones são tratados assim como as fontes. Você pode especificar seu tamanho utilizando pixels, e eles irão assumir o tamanho de fonte de seus elementos HTML parentes.
|
||||
|
||||
Você pode incluir o Font Awesome em qualquer aplicativo, adicionando o seguinte código ao topo do seu HTML:
|
||||
|
||||
|
||||
@@ -8,11 +8,11 @@ dashedName: call-out-optional-actions-with-btn-info
|
||||
|
||||
# --description--
|
||||
|
||||
O Bootstrap vem com várias cores predefinidas para botões. A classe `btn-info` é usada para chamar atenção para ações opcionais que o usuário pode tomar.
|
||||
O Bootstrap vem com diversas cores predefinidas para botões. A classe `btn-info` é usada para chamar atenção para ações opcionais que o usuário pode tomar.
|
||||
|
||||
Crie um novo botão do Bootstrap no nível de blocos abaixo do botão `Like` com o texto `Info`, e adicione as classes `btn-info` e `btn-block` do Bootstrap a ele.
|
||||
|
||||
Observe que esses botões ainda precisam das classes `btn` e `btn-block`.
|
||||
Note que esses botões ainda precisam das classes `btn` e `btn-block`.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -34,7 +34,7 @@ O novo botão deve ter a classe `btn-info`.
|
||||
assert($('button').hasClass('btn-info'));
|
||||
```
|
||||
|
||||
Todos os seus elementos `button` deve ter tags de fechamento.
|
||||
Todos os elementos `button` devem ter tags de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -12,7 +12,7 @@ Nós também queremos ser capazes de usar jQuery para selecionar cada botão a p
|
||||
|
||||
Dê a cada um dos botões um id único, começando com `target1` e terminando com `target6`.
|
||||
|
||||
Certifique-se de que `target1` até `target3` estão em `#left-well`, e `target4` até `target6` estão em `#right well`.
|
||||
Certifique-se de que `target1` até `target3` estão em `#left-well`, e `target4` até `target6` estão em `#right-well`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@ O Bootstrap vem com diversas cores predefinidas para botões. A classe `btn-dang
|
||||
|
||||
Crie um botão com o texto `Delete` e dê a ele a classe `btn-danger`.
|
||||
|
||||
Observe que esses botões ainda precisam das classes `btn` e `btn-block`.
|
||||
Note que esses botões ainda precisam das classes `btn` e `btn-block`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@ dashedName: build-a-25--5-clock
|
||||
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story) e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery para completar este projeto. Você deve usar um framework de front-end (como React, por exemplo) porque essa seção trata de aprender frameworks de front-end. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos buscando apoiar outros frameworks de front-end como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e JQuery para completar este projeto. Você deve usar um framework de front-end (como React por exemplo) porque essa seção trata de aprender frameworks de front-end. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos buscando apoiar outros frameworks de front-end, como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
|
||||
**Especificação de usuário nº 1:** eu consigo ver um elemento com `id="break-label"` que contém uma string (por exemplo, "Duração do intervalo").
|
||||
|
||||
|
||||
@@ -10,9 +10,9 @@ dashedName: build-a-drum-machine
|
||||
|
||||
**Objetivo:** Construa um app [CodePen.io](https://codepen.io) que seja funcionalmente semelhante a: <https://codepen.io/freeCodeCamp/full/MJyNMd>.
|
||||
|
||||
Atenda às [especificações de usuário](https://en.wikipedia.org/wiki/User_story) abaixo para passar em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story) e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery para completar este projeto. Você deve usar um framework de front-end (como React, por exemplo) porque essa seção trata de aprender frameworks de front-end. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos buscando apoiar outros frameworks de front-end como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e JQuery para completar este projeto. Você deve usar um framework de front-end (como React por exemplo) porque essa seção trata de aprender frameworks de front-end. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos buscando apoiar outros frameworks de front-end, como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
|
||||
**Especificação de usuário nº 1:** eu devo ser capaz de ver um contêiner externo com um `id="drum-machine"` correspondente que contém todos os outros elementos.
|
||||
|
||||
@@ -28,9 +28,9 @@ Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, Reac
|
||||
|
||||
**Especificação de usuário nº 7:** quando um `.drum-pad` é acionado, uma string descrevendo o clipe de áudio associado é exibido como o texto interno do elemento `#display` (cada string precisa ser única).
|
||||
|
||||
Você pode fazer o seu projeto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este modelo da CodePen</a> e clicando em `Save` para criar seu próprio pen. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
Você pode construir seu projeto com <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este template CodePen</a> e clicando `Save` para criar seu próprio pen. Ou você pode usar esse link CDN para rodar os testes em qualquer ambiente que você goste:`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Quando tiver terminado, envie o URL do seu projeto depois de ele haver passado em todos os testes.
|
||||
Quando você terminar, envie a URL para o seu projeto em trabalho com todos os testes passando.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@ dashedName: build-a-javascript-calculator
|
||||
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story) e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery para completar este projeto. Você deve usar um framework de front-end (como React, por exemplo) porque essa seção trata de aprender frameworks de front-end. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos buscando apoiar outros frameworks de front-end, como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e JQuery para completar este projeto. Você deve usar um framework de front-end (como React por exemplo) porque essa seção trata de aprender frameworks de front-end. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos buscando apoiar outros frameworks de front-end, como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
|
||||
**Especificação de usuário nº 1:** minha calculadora deve conter um elemento clicável contendo um `=` (sinal de igualdade) com o `id="equals"` correspondente.
|
||||
|
||||
@@ -38,7 +38,7 @@ Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, Reac
|
||||
|
||||
**Especificação de usuário nº 12:** eu devo ser capaz de executar qualquer operação (`+`, `-`, `*`, `/`) em números contendo pontos decimais.
|
||||
|
||||
**User Story #13:** Se 2 ou mais operadores forem inseridos consecutivamente, a operação executada deve ser o último operador inserido, excluindo o símbolo de negação (`-`). Por exemplo, se `5 + * 7 =` for inserido, o resultado deve ser `35` (ou seja, `5 * 7`); se `5 * - 5 =` for inserido, o resultado deve ser `-25` (ou seja, `5 * (-5)`).
|
||||
**Especificação de usuário nº 13:** Se 2 ou mais operadores forem inseridos consecutivamente, a operação executada deve ser o último operador inserido, excluindo o símbolo de negação (`-`). Por exemplo, se `5 + * 7 =` for inserido, o resultado deve ser `35` (ou seja, `5 * 7`); se `5 * - 5 =` for inserido, o resultado deve ser `-25` (ou seja, `5 * (-5)`).
|
||||
|
||||
**Especificação de usuário nº 14:** pressionar um operador imediatamente após um `=` deve iniciar um novo cálculo que opera no resultado da avaliação anterior.
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@ dashedName: build-a-markdown-previewer
|
||||
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story) e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery para completar este projeto. Você deve usar um framework de front-end (como React, por exemplo) porque essa seção trata de aprender frameworks de front-end. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos buscando apoiar outros frameworks de front-end, como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e JQuery para completar este projeto. Você deve usar um framework de front-end (como React por exemplo) porque essa seção trata de aprender frameworks de front-end. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos buscando apoiar outros frameworks de front-end, como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
|
||||
**Especificação de usuário nº 1:** eu consigo ver um elemento `textarea` com o `id="editor"` correspondente.
|
||||
|
||||
@@ -28,9 +28,9 @@ Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, Reac
|
||||
|
||||
**Bônus opcional (você não precisa de aprovação nesse teste):** meu pré-visualizador de marcação interpreta o retorno de carro e o renderiza como elementos `br` (quebra de linha).
|
||||
|
||||
Você pode fazer o seu projeto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este modelo da CodePen</a> e clicando em `Save` para criar seu próprio pen. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
Você pode construir seu projeto com <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este template CodePen</a> e clicando `Save` para criar seu próprio pen. Ou você pode usar esse link CDN para rodar os testes em qualquer ambiente que você goste:`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Quando tiver terminado, envie o URL do seu projeto depois de ele haver passado em todos os testes.
|
||||
Quando você terminar, envie a URL para o seu projeto em trabalho com todos os testes passando.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@ dashedName: build-a-random-quote-machine
|
||||
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story) e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery para completar este projeto. Você deve usar um framework de front-end (como React, por exemplo) porque essa seção trata de aprender frameworks de front-end. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos buscando apoiar outros frameworks de front-end, como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e JQuery para completar este projeto. Você deve usar um framework de front-end (como React por exemplo) porque essa seção trata de aprender frameworks de front-end. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos buscando apoiar outros frameworks de front-end, como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
|
||||
**Especificação de usuário nº 1:** eu consigo ver um elemento wrapper com o `id="quote-box"` correspondente.
|
||||
|
||||
@@ -36,9 +36,9 @@ Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, Reac
|
||||
|
||||
**Especificação de usuário nº 11:** o elemento wrapper `#quote-box` deve ser centralizado horizontalmente. Execute testes com o zoom do navegador em 100% e com a página maximizada.
|
||||
|
||||
Você pode fazer o seu projeto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este modelo da CodePen</a> e, logo após, clicar em `Save` para criar seu próprio projeto. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
Você pode construir seu projeto com <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este template CodePen</a> e clicando `Save` para criar seu próprio pen. Ou você pode usar esse link CDN para rodar os testes em qualquer ambiente que você goste:`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Quando tiver terminado, envie o URL do seu projeto depois de ele haver passado em todos os testes.
|
||||
Quando você terminar, envie a URL para o seu projeto em trabalho com todos os testes passando.
|
||||
|
||||
**Observação:** o Twitter não permite que links sejam carregados em um iframe. Tente usar o atributo `target="_blank"` ou `target="_top"` no elemento `#tweet-quote` se o seu tweet não carregar. `target="_top"` vai substituir a aba atual para garantir que o seu trabalho foi salvo.
|
||||
|
||||
|
||||
@@ -35,7 +35,7 @@ Você deve deixar o `$(document).ready(function() {` no início do seu elemento
|
||||
assert(code.match(/\$\(document\)\.ready\(function\(\)\s?\{/g));
|
||||
```
|
||||
|
||||
Você deve deixar intacto o fechamento `});` da função `document.ready`.
|
||||
Você deve deixar intacto o fechamento `})` da função `document.ready`.
|
||||
|
||||
```js
|
||||
assert(code.match(/.*\s*\}\);/g));
|
||||
|
||||
@@ -19,9 +19,9 @@ Primeiro, vamos ter como alvo seus elementos `div` com a classe `well` usando o
|
||||
|
||||
Observe que, assim como com declarações CSS, você digita um `.` antes do nome da classe.
|
||||
|
||||
Em seguida, use a função `.addClass()` do jQuery para adicionar as classes `animated<code> e <code>shake`.
|
||||
Em seguida, use a função `.addClass()` do jQuery para adicionar as classes `animated` e `shake`.
|
||||
|
||||
Por exemplo, você poderia fazer todos os elementos com a classe `text-primary` sacudir adicionando o seguinte ao seu `$(document).ready(function() {`:
|
||||
Por exemplo, você poderia fazer todos os elementos com a classe `text-primary` sacudir adicionando o seguinte à sua `document ready function`:
|
||||
|
||||
```js
|
||||
$(".text-primary").addClass("animated shake");
|
||||
|
||||
@@ -17,7 +17,7 @@ Primeiro, vamos tomar como alvo seu elemento `button` com o id `target3` usando
|
||||
|
||||
Note que, assim como as declarações CSS, você digita um `#` antes do nome do id.
|
||||
|
||||
Em seguida use a função `.addClass` do jQuery para adicionar as classes `animated` e `fadeOut`.
|
||||
Em seguida use a função `.addClass()` do jQuery para adicionar as classes `animated` e `fadeOut`.
|
||||
|
||||
Aqui está como você faria o elemento `button` com o id `target6` desaparecer:
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@ dashedName: target-even-elements-using-jquery
|
||||
|
||||
Você também pode ter como alvo elementos baseados em suas posições usando os seletores `:odd` ou `:even`.
|
||||
|
||||
Note que jQuery é indexado a zero, o que significa que o primeiro elemento em uma seleção tem a posição 0. Isso pode ser um pouco confuso, pois, contra-intuitivamente, `:odd` seleciona o segundo elemento (position1), fourth element (position 3) e assim por diante.
|
||||
Note que jQuery é indexado a zero, o que significa que o primeiro elemento em uma seleção tem a posição 0. Isso pode ser um pouco confuso, pois, contraintuitivamente, `:odd` seleciona o segundo elemento (position1), fourth element (position 3) e assim por diante.
|
||||
|
||||
Aqui está como você teria como alvo todos os elementos ímpares com a classe `target` e dar a eles as classes:
|
||||
|
||||
|
||||
@@ -23,7 +23,7 @@ Por exemplo, vamos fazer todos os nossos elementos `button` quicar. Basta adicio
|
||||
$("button").addClass("animated bounce");
|
||||
```
|
||||
|
||||
Note que nós já incluímos ambas as bibliotecas jQuery e Animate.css por trás dos panos para que você possa utilizá-las no editor. Então você está usando jQuery para aplicar a classe `bounce` do Animate.css ao seus elementos `button`.
|
||||
Note que nós já incluímos ambas as bibliotecas jQuery e Animate.css por trás dos panos para que você possa utilizá-las no editor. Então você está usando jQuery para aplicar a classe `bounce` do Animate.css ao seus elementos `button`.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -39,7 +39,7 @@ Você deve usar apenas jQuery para adicionar essas classes ao elemento.
|
||||
assert(!code.match(/class.*animated/g));
|
||||
```
|
||||
|
||||
Seu código jQuery deve estar dentro da função `$(document).ready()`.
|
||||
Seu código jQuery deve estar dentro da função `$(document).ready();`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -18,7 +18,7 @@ O editor de código tem todo o código que você escreveu nesta seção até ago
|
||||
|
||||
# --hints--
|
||||
|
||||
O `AppWrapper` deve ser renderizardo na página.
|
||||
O `AppWrapper` deve ser renderizado na página.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -40,7 +40,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
O componente `Presentational` deve renderizar os elementos `h2`, `input`, `button`, e `ul`.
|
||||
O componente `Presentational` deve renderizar os elementos `h2`, `input`, `button` e `ul`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -20,7 +20,7 @@ Finalmente, use o `ul` para mapear em cima do array `messages` e o renderize na
|
||||
|
||||
# --hints--
|
||||
|
||||
O componente `DisplayMessages` deve inicializar com o estado igual a `{ input: "", messages: []}`.
|
||||
O componente `DisplayMessages` deve inicializar com o estado igual a `{ input: "", messages: [] }`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -8,7 +8,7 @@ dashedName: copy-an-object-with-object-assign
|
||||
|
||||
# --description--
|
||||
|
||||
Os últimos desafios funcionaram com arrays, mas também existem maneiras de ajudar a impor a imutabilidade do state quando o state for um `object`. Uma ferramenta útil para lidar com objetos é o `Object.assign()`. `Object.assign()` recebe um objeto alvo e objetos fonte e mapeia propriedades dos objetos de origem para o objeto alvo. Qualquer propriedades correspondentes são substituídas por propriedades nos objetos de origem. Esse comportamento é comumente usado para fazer cópias rasas de objetos, passando um objeto vazio como o primeiro argumento seguido do(s) objeto(s) que você deseja copiar. Exemplo:
|
||||
Os últimos desafios funcionaram com arrays, mas também existem maneiras de ajudar a impor a imutabilidade do state quando o state for um `object`. Uma ferramenta útil para lidar com objetos é a utilidade do `Object.assign()`. `Object.assign()` recebe um objeto alvo e objetos fonte e mapeia propriedades dos objetos de origem para o objeto alvo. Qualquer propriedades correspondentes são substituídas por propriedades nos objetos de origem. Esse comportamento é comumente usado para fazer cópias rasas de objetos, passando um objeto vazio como o primeiro argumento seguido do(s) objeto(s) que você deseja copiar. Exemplo:
|
||||
|
||||
```js
|
||||
const newObject = Object.assign({}, obj1, obj2);
|
||||
|
||||
@@ -29,7 +29,7 @@ Chamando a função `loginAction` deve retornar um objeto com a propriedade `typ
|
||||
assert(loginAction().type === 'LOGIN');
|
||||
```
|
||||
|
||||
A store deve ser inicializada com um objeto com a propriedade `login` definido como `false`.
|
||||
A store deve ser inicializada com um objeto com a propriedade `login` definida como `false`.
|
||||
|
||||
```js
|
||||
assert(store.getState().login === false);
|
||||
|
||||
@@ -18,7 +18,7 @@ O editor de código tem o exemplo anterior, bem como o início de uma função `
|
||||
|
||||
# --hints--
|
||||
|
||||
Chamar a função `loginAction` deve retornar um objeto com a propriedade `type` definida para a string `LOGIN`.
|
||||
Chamar a função `loginAction` deve retornar um objeto com a propriedade type definida para a string `LOGIN`.
|
||||
|
||||
```js
|
||||
assert(loginAction().type === 'LOGIN');
|
||||
|
||||
@@ -12,9 +12,9 @@ Até agora você aprendeu como enviar ações para a store do Redux, mas até ag
|
||||
|
||||
# --instructions--
|
||||
|
||||
Há dois criadores de ações básicos, `notesReducer()` e um `addNoteText()`, definidos no editor de código. Finalize o corpo da função `addNodeText()` para que ela retorne um objeto `action`. O objeto deve incluir a propriedade `type` com o valor `ADD_NOTE` e também uma propriedade `text` definida para o dado `note` que foi passado ao criador de ação. Quando você chama o criador de ação, você passará uma informação note específica que você pode acessar para o objeto.
|
||||
Há dois criadores de ações básicos, `notesReducer()` e um `addNoteText()`, definidos no editor de código. Finalize o corpo da função `addNoteText()` para que ela retorne um objeto `action`. O objeto deve incluir a propriedade `type` com o valor `ADD_NOTE` e também uma propriedade `text` definida para o dado `note` que foi passado ao criador de ação. Quando você chama o criador de ação, você passará uma informação note específica que você pode acessar para o objeto.
|
||||
|
||||
Em seguida, termine de escreve a instrução `switch` no `notesReducer()`. Você precisa adicionar um caso que lide com ações do `addNodeText()`. Esse caso deve ser acionado sempre que há uma ação do tipo `ADD_NOTE` e ele deve retornar a propriedade `text` na `action` chegando como o novo `state`.
|
||||
Em seguida, termine de escreve a instrução `switch` no `notesReducer()`. Você precisa adicionar um caso que lide com ações do `addNoteText()`. Esse caso deve ser acionado sempre que há uma ação do tipo `ADD_NOTE` e ele deve retornar a propriedade `text` na `action` chegando como o novo `state`.
|
||||
|
||||
A ação é despachada no final do código. Quando terminar, rode o código e olhe o console. Isso é tudo que é necessário para enviar dados específicos de ações ao store e o usar quando você atualizar o `state` do store.
|
||||
|
||||
@@ -31,7 +31,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Despachar uma ação do tipo `ADD_NOTE` com o criador de ação `addNodeText` deve atualizar o `state` para a string passada para o criador da ação.
|
||||
Despachar uma ação do tipo `ADD_NOTE` com o criador de ação `addNoteText` deve atualizar o `state` para a string passada para o criador da ação.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -18,13 +18,13 @@ O editor de código tem uma store, actions e criadores de actions configurados p
|
||||
|
||||
# --hints--
|
||||
|
||||
Chamar a função `loginUser` deve retornar um objeto com a propriedade `type` definida para a string `LOGIN`.
|
||||
Chamar a função `loginUser` deve retornar um objeto com a propriedade type definida para a string `LOGIN`.
|
||||
|
||||
```js
|
||||
assert(loginUser().type === 'LOGIN');
|
||||
```
|
||||
|
||||
Chamar a função `logoutUser` deve retornar um objeto com a propriedade `type` definida para a string `LOGOUT`.
|
||||
Chamar a função `logoutUser` deve retornar um objeto com a propriedade type definida para a string `LOGOUT`.
|
||||
|
||||
```js
|
||||
assert(logoutUser().type === 'LOGOUT');
|
||||
|
||||
@@ -67,7 +67,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
A função `authReducer` deve lidar com vários tipos de ação com um comando `switch`.
|
||||
A função `authReducer` deve lidar com vários tipos de ação com um comando switch.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@@ -28,7 +28,7 @@ O criador de ação `requestingData` deve retornar um objeto de tipo igual ao va
|
||||
assert(requestingData().type === REQUESTING_DATA);
|
||||
```
|
||||
|
||||
O criador de ação `receivedData` deve retornar um objeto de tipo igual ao valor de `REQUESTING_DATA`.
|
||||
O criador de ação `receivedData` deve retornar um objeto de tipo igual ao valor de `RECEIVED_DATA`.
|
||||
|
||||
```js
|
||||
assert(receivedData('data').type === RECEIVED_DATA);
|
||||
|
||||
@@ -8,7 +8,7 @@ dashedName: extend-one-set-of-css-styles-to-another-element
|
||||
|
||||
# --description--
|
||||
|
||||
Sass tem um recurso chamado `extend` que faz com que seja fácil pegar emprestado as regras CSS de um elemento e construr a partir delas em outro.
|
||||
Sass tem um recurso chamado `extend` que faz com que seja fácil pegar emprestado as regras CSS de um elemento e construir a partir delas em outro.
|
||||
|
||||
Por exemplo, o bloco abaixo de regras CSS estiliza uma classe `.panel`. Tem um `background-color`, um `height` e um `border`.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user