diff --git a/src/content/learn/javascript-in-jsx-with-curly-braces.md b/src/content/learn/javascript-in-jsx-with-curly-braces.md index 7380dcdb7..e80060faa 100644 --- a/src/content/learn/javascript-in-jsx-with-curly-braces.md +++ b/src/content/learn/javascript-in-jsx-with-curly-braces.md @@ -4,7 +4,7 @@ title: JavaScript in JSX with Curly Braces -O JSX permite a você escrever marcações semelhantes a HTML dentro de um arquivo JavaScript, mantendo a lógica de renderização e o conteúdo no mesmo local. Às vezes, você desejará adicionar um pouco de lógica JavaScript ou fazer referência a uma propriedade dinâmica dentro dessa marcação. Nessa situação, você pode usar chaves em seu JSX para abrir uma janela para o JavaScript. +JSX permite a você escrever tags como faria no HTML dentro de um arquivo JavaScript, mantendo a lógica de renderização e o conteúdo no mesmo local. Às vezes, você pode querer adicionar um pouco de lógica JavaScript ou fazer referência a uma propriedade dinâmica dentro desse bloco de tags. Nessa situação, você pode usar chaves em seu JSX para abrir uma janela para o JavaScript. @@ -67,11 +67,11 @@ export default function Avatar() { -Note a diferença entre `className="avatar"`, que especifica um nome de classe CSS `"avatar"` para tornar a imagem redonda, e `src={avatar}`, que lê o valor da variável JavaScript chamada `avatar`. Isso ocorre porque as chaves permitem que você trabalhe com JavaScript diretamente na sua marcação! +Note a diferença entre `className="avatar"`, que especifica um nome de classe CSS `"avatar"` para tornar a imagem redonda, e `src={avatar}`, que lê o valor da variável JavaScript chamada `avatar`. Isso ocorre porque as chaves permitem que você trabalhe com JavaScript diretamente em seu bloco de tags! ## Usando chaves: Uma janela para o mundo do JavaScript {/*using-curly-braces-a-window-into-the-javascript-world*/} -JSX é uma forma especial de escrever JavaScript. Isso significa que é possível usar JavaScript dentro dele - com chaves `{ }`. O exemplo abaixo primeiro declara um nome para o cientista, `name`, e depois o insere com chaves dentro do `

`: +JSX é uma forma especial de escrever JavaScript. Isso significa que é possível usar JavaScript dentro dele - com chaves `{ }`. O exemplo abaixo primeiro declara um nome para o cientista, `name`, e depois insere o nome dentro do `

` com chaves: @@ -86,7 +86,7 @@ export default function TodoList() { -Tente mudar o valor do `name` de `'Gregorio Y. Zara'` para `'Hedy Lamarr'`. Está vendo como o título da lista muda? +Tente trocar o valor do `name` de `'Gregorio Y. Zara'` para `'Hedy Lamarr'`. Está vendo como o título da lista muda? Qualquer expressão JavaScript funcionará entre chaves, incluindo chamadas de função como `formatDate()`: @@ -150,7 +150,7 @@ ul { padding: 20px 20px 20px 40px; margin: 0; } Tente alterar os valores de `backgroundColor` e `color`. -Você pode ver bem o objeto JavaScript dentro das chaves quando o escreve dessa forma: +Você pode ver claramente o objeto JavaScript dentro das chaves quando o escreve dessa forma: ```js {2-5}