Skip to content

Commit 88c6b9c

Browse files
NivaldoFariasNivaldoFarias
authored
Translate writing-markup-with-jsx.md to Portuguese (#1014)
1 parent 101afef commit 88c6b9c

File tree

1 file changed

+74
-75
lines changed

1 file changed

+74
-75
lines changed

‎src/content/learn/writing-markup-with-jsx.md

Lines changed: 74 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,88 @@
11
---
2-
title: Writing Markup with JSX
2+
title: Escrevendo Marcação com JSX
33
---
44

55
<Intro>
66

7-
*JSX* is a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file. Although there are other ways to write components, most React developers prefer the conciseness of JSX, and most codebases use it.
7+
*JSX* é uma extensão de sintaxe para JavaScript que permite que você escreva marcação semelhante a HTML dentro de um arquivo JavaScript. Embora existam outras maneiras de escrever componentes, a maioria dos desenvolvedores React prefere a concisão de JSX, e a maioria das bases de código o utiliza.
88

99
</Intro>
1010

1111
<YouWillLearn>
1212

13-
* Why React mixes markup with rendering logic
14-
* How JSX is different from HTML
15-
* How to display information with JSX
13+
* Por que React mistura marcação com lógica de renderização
14+
* Como JSX é diferente de HTML
15+
* Como exibir informações com JSX
1616

1717
</YouWillLearn>
1818

19-
## JSX: Putting markup into JavaScript {/*jsx-putting-markup-into-javascript*/}
19+
## JSX: Colocando marcação dentro do JavaScript {/*jsx-putting-markup-into-javascript*/}
2020

21-
The Web has been built on HTML, CSS, and JavaScript. For many years, web developers kept content in HTML, design in CSS, and logic in JavaScript—often in separate files! Content was marked up inside HTML while the page's logic lived separately in JavaScript:
21+
A Web foi construída em HTML, CSS e JavaScript. Por muitos anos, os desenvolvedores web mantiveram o conteúdo em HTML, o design em CSS e a lógica em JavaScript - muitas vezes em arquivos separados! O conteúdo foi marcado dentro do HTML, enquanto a lógica da página vivia separadamente em JavaScript:
2222

2323
<DiagramGroup>
2424

25-
<Diagram name="writing_jsx_html" height={237} width={325} alt="HTML markup with purple background and a div with two child tags: p and form. ">
25+
<Diagram name="writing_jsx_html" height={237} width={325} alt="Marcação HTML com fundo roxo e uma div com duas tags filhas: p e form. ">
2626

2727
HTML
2828

2929
</Diagram>
3030

31-
<Diagram name="writing_jsx_js" height={237} width={325} alt="Three JavaScript handlers with yellow background: onSubmit, onLogin, and onClick.">
31+
<Diagram name="writing_jsx_js" height={237} width={325} alt="Três manipuladores JavaScript com fundo amarelo: onSubmit, onLogin e onClick.">
3232

3333
JavaScript
3434

3535
</Diagram>
3636

3737
</DiagramGroup>
3838

39-
But as the Web became more interactive, logic increasingly determined content. JavaScript was in charge of the HTML! This is why **in React, rendering logic and markup live together in the same place—components.**
39+
Mas, à medida que a Web se tornou mais interativa, a lógica passou a determinar cada vez mais o conteúdo. JavaScript estava no comando do HTML! É por isso que **no React, a lógica de renderização e a marcação vivem juntas no mesmo lugar — nos componentes.**
4040

4141
<DiagramGroup>
4242

43-
<Diagram name="writing_jsx_sidebar" height={330} width={325} alt="React component with HTML and JavaScript from previous examples mixed. Function name is Sidebar which calls the function isLoggedIn, highlighted in yellow. Nested inside the function highlighted in purple is the p tag from before, and a Form tag referencing the component shown in the next diagram.">
43+
<Diagram name="writing_jsx_sidebar" height={330} width={325} alt="Componente React com HTML e JavaScript dos exemplos anteriores misturados. O nome da função é Sidebar que chama a função isLoggedIn, destacada em amarelo. Aninhado dentro da função, destacada em roxo, está a tag p de antes, e uma tag Form referenciando o componente mostrado no diagrama seguinte.">
4444

45-
`Sidebar.js` React component
45+
Componente React `Sidebar.js`
4646

4747
</Diagram>
4848

49-
<Diagram name="writing_jsx_form" height={330} width={325} alt="React component with HTML and JavaScript from previous examples mixed. Function name is Form containing two handlers onClick and onSubmit highlighted in yellow. Following the handlers is HTML highlighted in purple. The HTML contains a form element with a nested input element, each with an onClick prop.">
49+
<Diagram name="writing_jsx_form" height={330} width={325} alt="Componente React com HTML e JavaScript dos exemplos anteriores misturados. O nome da função é Form contendo dois manipuladores onClick e onSubmit destacados em amarelo. Seguindo os manipuladores, há HTML destacado em roxo. O HTML contém um elemento form com um elemento input aninhado, cada um com uma prop onClick.">
5050

51-
`Form.js` React component
51+
Componente React `Form.js`
5252

5353
</Diagram>
5454

5555
</DiagramGroup>
5656

57-
Keeping a button's rendering logic and markup together ensures that they stay in sync with each other on every edit. Conversely, details that are unrelated, such as the button's markup and a sidebar's markup, are isolated from each other, making it safer to change either of them on their own.
57+
Manter a lógica de renderização e a marcação de um botão juntas garante que elas permaneçam sincronizadas entre si em cada edição. Por outro lado, os detalhes que não estão relacionados, como a marcação do botão e a marcação de uma barra lateral, são isolados uns dos outros, tornando mais seguro alterá-los separadamente.
5858

59-
Each React component is a JavaScript function that may contain some markup that React renders into the browser. React components use a syntax extension called JSX to represent that markup. JSX looks a lot like HTML, but it is a bit stricter and can display dynamic information. The best way to understand this is to convert some HTML markup to JSX markup.
59+
Cada componente React é uma função JavaScript que pode conter alguma marcação que o React renderiza no navegador. Os componentes React usam uma extensão de sintaxe chamada JSX para representar essa marcação. JSX se parece muito com HTML, mas é um pouco mais rigoroso e pode exibir informações dinâmicas. A melhor maneira de entender isso é converter alguma marcação HTML em marcação JSX.
6060

6161
<Note>
6262

63-
JSX and React are two separate things. They're often used together, but you *can* [use them independently](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#whats-a-jsx-transform) of each other. JSX is a syntax extension, while React is a JavaScript library.
63+
JSX e React são duas coisas separadas. Eles são frequentemente usados juntos, mas você *pode* [usá-los independentemente](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#whats-a-jsx-transform) um do outro. JSX é uma extensão de sintaxe, enquanto React é uma biblioteca JavaScript.
6464

6565
</Note>
6666

67-
## Converting HTML to JSX {/*converting-html-to-jsx*/}
67+
## Convertendo HTML para JSX {/*converting-html-to-jsx*/}
6868

69-
Suppose that you have some (perfectly valid) HTML:
69+
Suponha que você tenha algum HTML (perfeitamente válido):
7070

7171
```html
72-
<h1>Hedy Lamarr's Todos</h1>
72+
<h1>Tarefas de Hedy Lamarr</h1>
7373
<img
7474
src="https://i.imgur.com/yXOvdOSs.jpg"
7575
alt="Hedy Lamarr"
7676
class="photo"
7777
>
7878
<ul>
79-
<li>Invent new traffic lights
80-
<li>Rehearse a movie scene
81-
<li>Improve the spectrum technology
79+
<li>Inventar novos semáforos
80+
<li>Ensaio de uma cena de filme
81+
<li>Melhorar a tecnologia de espectro
8282
</ul>
8383
```
8484

85-
And you want to put it into your component:
85+
E você quer colocá-lo no seu componente:
8686

8787
```js
8888
export default function TodoList() {
@@ -92,25 +92,25 @@ export default function TodoList() {
9292
}
9393
```
9494

95-
If you copy and paste it as is, it will not work:
95+
Se você copiar e colar do jeito que está, não funcionará:
9696

9797

9898
<Sandpack>
9999

100100
```js
101101
export default function TodoList() {
102102
return (
103-
// This doesn't quite work!
104-
<h1>Hedy Lamarr's Todos</h1>
103+
// Isso não funciona direito!
104+
<h1>Tarefas de Hedy Lamarr</h1>
105105
<img
106106
src="https://i.imgur.com/yXOvdOSs.jpg"
107107
alt="Hedy Lamarr"
108108
class="photo"
109109
>
110110
<ul>
111-
<li>Invent new traffic lights
112-
<li>Rehearse a movie scene
113-
<li>Improve the spectrum technology
111+
<li>Inventar novos semáforos
112+
<li>Ensaio de uma cena de filme
113+
<li>Melhorar a tecnologia de espectro
114114
</ul>
115115
);
116116
}
@@ -122,25 +122,25 @@ img { height: 90px }
122122

123123
</Sandpack>
124124

125-
This is because JSX is stricter and has a few more rules than HTML! If you read the error messages above, they'll guide you to fix the markup, or you can follow the guide below.
125+
Isso ocorre porque JSX é mais rigoroso e tem algumas regras a mais do que o HTML! Se você ler as mensagens de erro acima, elas o guiarão para corrigir a marcação, ou você pode seguir o guia abaixo.
126126

127127
<Note>
128128

129-
Most of the time, React's on-screen error messages will help you find where the problem is. Give them a read if you get stuck!
129+
Na maioria das vezes, as mensagens de erro na tela do React ajudarão você a encontrar onde está o problema. Dê uma lida se você ficar preso!
130130

131131
</Note>
132132

133-
## The Rules of JSX {/*the-rules-of-jsx*/}
133+
## As Regras do JSX {/*the-rules-of-jsx*/}
134134

135-
### 1. Return a single root element {/*1-return-a-single-root-element*/}
135+
### 1. Retornar um único elemento raiz {/*1-return-a-single-root-element*/}
136136

137-
To return multiple elements from a component, **wrap them with a single parent tag.**
137+
Para retornar vários elementos de um componente, **agrupe-os com uma única tag pai.**
138138

139-
For example, you can use a `<div>`:
139+
Por exemplo, você pode usar um `<div>`:
140140

141141
```js {1,11}
142142
<div>
143-
<h1>Hedy Lamarr's Todos</h1>
143+
<h1>Tarefas de Hedy Lamarr</h1>
144144
<img
145145
src="https://i.imgur.com/yXOvdOSs.jpg"
146146
alt="Hedy Lamarr"
@@ -152,12 +152,11 @@ For example, you can use a `<div>`:
152152
</div>
153153
```
154154

155-
156-
If you don't want to add an extra `<div>` to your markup, you can write `<>` and `</>` instead:
155+
Se você não quiser adicionar um `<div>` extra à sua marcação, você pode escrever `<>` e `</>` em vez disso:
157156

158157
```js {1,11}
159158
<>
160-
<h1>Hedy Lamarr's Todos</h1>
159+
<h1>Tarefas de Hedy Lamarr</h1>
161160
<img
162161
src="https://i.imgur.com/yXOvdOSs.jpg"
163162
alt="Hedy Lamarr"
@@ -169,21 +168,21 @@ If you don't want to add an extra `<div>` to your markup, you can write `<>` and
169168
</>
170169
```
171170

172-
This empty tag is called a *[Fragment.](/reference/react/Fragment)* Fragments let you group things without leaving any trace in the browser HTML tree.
171+
Esta tag vazia é chamada de *[Fragment.](/reference/react/Fragment)* Fragments permite que você agrupe coisas sem deixar nenhum vestígio na árvore HTML do navegador.
173172

174173
<DeepDive>
175174

176-
#### Why do multiple JSX tags need to be wrapped? {/*why-do-multiple-jsx-tags-need-to-be-wrapped*/}
175+
#### Por que várias tags JSX precisam ser encapsuladas? {/*why-do-multiple-jsx-tags-need-to-be-wrapped*/}
177176

178-
JSX looks like HTML, but under the hood it is transformed into plain JavaScript objects. You can't return two objects from a function without wrapping them into an array. This explains why you also can't return two JSX tags without wrapping them into another tag or a Fragment.
177+
JSX se parece com HTML, mas por baixo ele é transformado em objetos JavaScript simples. Você não pode retornar dois objetos de uma função sem os embalar em um array. Isso explica por que também não é possível retornar duas tags JSX sem encapsulá-las em outra tag ou em um Fragment.
179178

180179
</DeepDive>
181180

182-
### 2. Close all the tags {/*2-close-all-the-tags*/}
181+
### 2. Fechar todas as tags {/*2-close-all-the-tags*/}
183182

184-
JSX requires tags to be explicitly closed: self-closing tags like `<img>` must become `<img />`, and wrapping tags like `<li>oranges` must be written as `<li>oranges</li>`.
183+
JSX requer que as tags sejam explicitamente fechadas: tags de fechamento automático como `<img>` devem se tornar `<img />` e tags de encapsulamento como `<li>oranges` devem ser escritas como `<li>oranges</li>`.
185184

186-
This is how Hedy Lamarr's image and list items look closed:
185+
É assim que a imagem e os itens da lista de Hedy Lamarr ficam fechados:
187186

188187
```js {2-6,8-10}
189188
<>
@@ -193,18 +192,18 @@ This is how Hedy Lamarr's image and list items look closed:
193192
class="photo"
194193
/>
195194
<ul>
196-
<li>Invent new traffic lights</li>
197-
<li>Rehearse a movie scene</li>
198-
<li>Improve the spectrum technology</li>
195+
<li>Inventar novos semáforos</li>
196+
<li>Ensaio de uma cena de filme</li>
197+
<li>Melhorar a tecnologia de espectro</li>
199198
</ul>
200199
</>
201200
```
202201

203-
### 3. camelCase <s>all</s> most of the things! {/*3-camelcase-salls-most-of-the-things*/}
202+
### 3. camelCase <s>tudo</s> a maioria das coisas! {/*3-camelcase-salls-most-of-the-things*/}
204203

205-
JSX turns into JavaScript and attributes written in JSX become keys of JavaScript objects. In your own components, you will often want to read those attributes into variables. But JavaScript has limitations on variable names. For example, their names can't contain dashes or be reserved words like `class`.
204+
JSX se transforma em JavaScript e atributos escritos em JSX se tornam chaves de objetos JavaScript. Em seus próprios componentes, você costuma querer ler esses atributos em variáveis. Mas o JavaScript tem limitações nos nomes das variáveis. Por exemplo, seus nomes não podem conter hífens ou ser palavras reservadas como `class`.
206205

207-
This is why, in React, many HTML and SVG attributes are written in camelCase. For example, instead of `stroke-width` you use `strokeWidth`. Since `class` is a reserved word, in React you write `className` instead, named after the [corresponding DOM property](https://developer.mozilla.org/en-US/docs/Web/API/Element/className):
206+
É por isso que, no React, muitos atributos HTML e SVG são escritos em camelCase. Por exemplo, em vez de `stroke-width`, você usa `strokeWidth`. Como `class` é uma palavra reservada, no React você escreve `className` em vez disso, nomeado após a [propriedade DOM correspondente](https://developer.mozilla.org/en-US/docs/Web/API/Element/className):
208207

209208
```js {4}
210209
<img
@@ -214,36 +213,36 @@ This is why, in React, many HTML and SVG attributes are written in camelCase. Fo
214213
/>
215214
```
216215

217-
You can [find all these attributes in the list of DOM component props.](/reference/react-dom/components/common) If you get one wrong, don't worry—React will print a message with a possible correction to the [browser console.](https://developer.mozilla.org/docs/Tools/Browser_Console)
216+
Você pode [encontrar todos esses atributos na lista de props dos componentes DOM.](/reference/react-dom/components/common) Se você errar um, não se preocupe — o React imprimirá uma mensagem com uma possível correção no [console do navegador.](https://developer.mozilla.org/docs/Tools/Browser_Console)
218217

219218
<Pitfall>
220219

221-
For historical reasons, [`aria-*`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) and [`data-*`](https://developer.mozilla.org/docs/Learn/HTML/Howto/Use_data_attributes) attributes are written as in HTML with dashes.
220+
Por razões históricas, os atributos [`aria-*`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) e [`data-*`](https://developer.mozilla.org/docs/Learn/HTML/Howto/Use_data_attributes) são escritos como em HTML com hífens.
222221

223222
</Pitfall>
224223

225-
### Pro-tip: Use a JSX Converter {/*pro-tip-use-a-jsx-converter*/}
224+
### Dica profissional: Use um Conversor JSX {/*pro-tip-use-a-jsx-converter*/}
226225

227-
Converting all these attributes in existing markup can be tedious! We recommend using a [converter](https://transform.tools/html-to-jsx) to translate your existing HTML and SVG to JSX. Converters are very useful in practice, but it's still worth understanding what is going on so that you can comfortably write JSX on your own.
226+
Converter todos esses atributos na marcação existente pode ser tedioso! Recomendamos usar um [conversor](https://transform.tools/html-to-jsx) para traduzir seu HTML e SVG existentes para JSX. Os conversores são muito úteis na prática, mas ainda vale a pena entender o que está acontecendo para que você possa escrever JSX confortavelmente por conta própria.
228227

229-
Here is your final result:
228+
Aqui está o seu resultado final:
230229

231230
<Sandpack>
232231

233232
```js
234233
export default function TodoList() {
235234
return (
236235
<>
237-
<h1>Hedy Lamarr's Todos</h1>
236+
<h1>Tarefas de Hedy Lamarr</h1>
238237
<img
239238
src="https://i.imgur.com/yXOvdOSs.jpg"
240239
alt="Hedy Lamarr"
241240
className="photo"
242241
/>
243242
<ul>
244-
<li>Invent new traffic lights</li>
245-
<li>Rehearse a movie scene</li>
246-
<li>Improve the spectrum technology</li>
243+
<li>Inventar novos semáforos</li>
244+
<li>Ensaio de uma cena de filme</li>
245+
<li>Melhorar a tecnologia de espectro</li>
247246
</ul>
248247
</>
249248
);
@@ -258,34 +257,34 @@ img { height: 90px }
258257

259258
<Recap>
260259

261-
Now you know why JSX exists and how to use it in components:
260+
Agora você sabe por que JSX existe e como usá-lo em componentes:
262261

263-
* React components group rendering logic together with markup because they are related.
264-
* JSX is similar to HTML, with a few differences. You can use a [converter](https://transform.tools/html-to-jsx) if you need to.
265-
* Error messages will often point you in the right direction to fixing your markup.
262+
* Os componentes React agrupam a lógica de renderização junto com a marcação porque eles estão relacionados.
263+
* JSX é semelhante a HTML, com algumas diferenças. Você pode usar um [conversor](https://transform.tools/html-to-jsx) se precisar.
264+
* As mensagens de erro geralmente apontarão na direção certa para corrigir sua marcação.
266265

267266
</Recap>
268267

269268

270269

271270
<Challenges>
272271

273-
#### Convert some HTML to JSX {/*convert-some-html-to-jsx*/}
272+
#### Converter um pouco de HTML para JSX {/*convert-some-html-to-jsx*/}
274273

275-
This HTML was pasted into a component, but it's not valid JSX. Fix it:
274+
Este HTML foi colado em um componente, mas não é JSX válido. Corrija-o:
276275

277276
<Sandpack>
278277

279278
```js
280279
export default function Bio() {
281280
return (
282281
<div class="intro">
283-
<h1>Welcome to my website!</h1>
282+
<h1>Bem-vindo ao meu site!</h1>
284283
</div>
285284
<p class="summary">
286-
You can find my thoughts here.
285+
Você pode encontrar meus pensamentos aqui.
287286
<br><br>
288-
<b>And <i>pictures</b></i> of scientists!
287+
<b>E <i>imagens</b></i> de cientistas!
289288
</p>
290289
);
291290
}
@@ -308,7 +307,7 @@ export default function Bio() {
308307

309308
</Sandpack>
310309

311-
Whether to do it by hand or using the converter is up to you!
310+
Se você vai fazer isso à mão ou usando o conversor, depende de você!
312311

313312
<Solution>
314313

@@ -319,12 +318,12 @@ export default function Bio() {
319318
return (
320319
<div>
321320
<div className="intro">
322-
<h1>Welcome to my website!</h1>
321+
<h1>Bem-vindo ao meu site!</h1>
323322
</div>
324323
<p className="summary">
325-
You can find my thoughts here.
324+
Você pode encontrar meus pensamentos aqui.
326325
<br /><br />
327-
<b>And <i>pictures</i></b> of scientists!
326+
<b>E <i>imagens</i></b> de cientistas!
328327
</p>
329328
</div>
330329
);
@@ -350,4 +349,4 @@ export default function Bio() {
350349

351350
</Solution>
352351

353-
</Challenges>
352+
</Challenges>

0 commit comments

Comments
 (0)