Back end and Front end files back to English (#43219)
* Back end projects back to english * front end projects back to english * Introducing Inline Styles challenge back to English * changing files to be similar to others
This commit is contained in:
Ilenia
GitHub
@ -4,18 +4,13 @@ title: Back End Development and APIs Certificate
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
-
|
||||
id: bd7158d8c443edefaeb5bdef
|
||||
title: Microsserviço de timestamp
|
||||
-
|
||||
id: bd7158d8c443edefaeb5bdff
|
||||
title: Microsserviço parseador de cabeçalho de requisição
|
||||
-
|
||||
id: bd7158d8c443edefaeb5bd0e
|
||||
title: Microsserviço redutor de URL
|
||||
-
|
||||
id: 5a8b073d06fa14fcfde687aa
|
||||
title: Rastreador de exercícios
|
||||
-
|
||||
id: bd7158d8c443edefaeb5bd0f
|
||||
title: Microsserviço de metadados de arquivos
|
||||
- id: bd7158d8c443edefaeb5bdef
|
||||
title: Timestamp Microservice
|
||||
- id: bd7158d8c443edefaeb5bdff
|
||||
title: Request Header Parser Microservice
|
||||
- id: bd7158d8c443edefaeb5bd0e
|
||||
title: URL Shortener Microservice
|
||||
- id: 5a8b073d06fa14fcfde687aa
|
||||
title: Exercise Tracker
|
||||
- id: bd7158d8c443edefaeb5bd0f
|
||||
title: File Metadata Microservice
|
||||
|
||||
@ -4,18 +4,13 @@ title: Front End Development Libraries Certificate
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
-
|
||||
id: bd7158d8c442eddfaeb5bd13
|
||||
title: Crie uma máquina de citação aleatória
|
||||
-
|
||||
id: bd7157d8c242eddfaeb5bd13
|
||||
title: Crie um pré-visualizador de markdown
|
||||
-
|
||||
id: 587d7dbc367417b2b2512bae
|
||||
title: Crie uma bateria eletrônica
|
||||
-
|
||||
id: bd7158d8c442eddfaeb5bd17
|
||||
title: Crie uma calculadora JavaScript
|
||||
-
|
||||
id: bd7158d8c442eddfaeb5bd0f
|
||||
title: Crie um Relógio 25 + 5
|
||||
- id: bd7158d8c442eddfaeb5bd13
|
||||
title: Build a Random Quote Machine
|
||||
- id: bd7157d8c242eddfaeb5bd13
|
||||
title: Build a Markdown Previewer
|
||||
- id: 587d7dbc367417b2b2512bae
|
||||
title: Build a Drum Machine
|
||||
- id: bd7158d8c442eddfaeb5bd17
|
||||
title: Build a JavaScript Calculator
|
||||
- id: bd7158d8c442eddfaeb5bd0f
|
||||
title: Build a 25 + 5 Clock
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036181
|
||||
title: Introduzir estilos em linha
|
||||
title: Introducing Inline Styles
|
||||
challengeType: 6
|
||||
forumTopicId: 301395
|
||||
dashedName: introducing-inline-styles
|
||||
@ -8,33 +8,32 @@ dashedName: introducing-inline-styles
|
||||
|
||||
# --description--
|
||||
|
||||
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).
|
||||
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).
|
||||
|
||||
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.
|
||||
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.
|
||||
|
||||
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:
|
||||
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:
|
||||
|
||||
```jsx
|
||||
<div style="color: yellow; font-size: 16px">Mellow Yellow</div>
|
||||
```
|
||||
|
||||
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 `objeto` JavaScript. Exemplo:
|
||||
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:
|
||||
|
||||
```jsx
|
||||
<div style={{color: "yellow", fontSize: 16}}>Mellow Yellow</div>
|
||||
```
|
||||
|
||||
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.
|
||||
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.
|
||||
|
||||
# --instructions--
|
||||
|
||||
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`.
|
||||
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`.
|
||||
# --hints--
|
||||
|
||||
O componente deve renderizar um elemento `div`.
|
||||
The component should render a `div` element.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -45,7 +44,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
O elemento `div` deve ter a cor `red`.
|
||||
The `div` element should have a color of `red`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -56,7 +55,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
O elemento `div` deve ter um tamanho de fonte de `72px`.
|
||||
The `div` element should have a font size of `72px`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
Reference in New Issue
Block a user