` to your markup, you can write `<>` and `>` instead:
+Se você não quiser adicionar um `
` extra à sua marcação, você pode escrever `<>` e `>` em vez disso:
```js {1,11}
<>
-
Hedy Lamarr's Todos
+
Tarefas de Hedy Lamarr

` to your markup, you can write `<>` and
>
```
-This empty tag is called a *[Fragment.](/reference/react/Fragment)* Fragments let you group things without leaving any trace in the browser HTML tree.
+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.
-#### Why do multiple JSX tags need to be wrapped? {/*why-do-multiple-jsx-tags-need-to-be-wrapped*/}
+#### Por que várias tags JSX precisam ser encapsuladas? {/*why-do-multiple-jsx-tags-need-to-be-wrapped*/}
-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.
+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.
-### 2. Close all the tags {/*2-close-all-the-tags*/}
+### 2. Fechar todas as tags {/*2-close-all-the-tags*/}
-JSX requires tags to be explicitly closed: self-closing tags like `
![]()
` must become `
![]()
`, and wrapping tags like `
oranges` must be written as `oranges`.
+JSX requer que as tags sejam explicitamente fechadas: tags de fechamento automático como `
![]()
` devem se tornar `
![]()
` e tags de encapsulamento como `
oranges` devem ser escritas como `oranges`.
-This is how Hedy Lamarr's image and list items look closed:
+É assim que a imagem e os itens da lista de Hedy Lamarr ficam fechados:
```js {2-6,8-10}
<>
@@ -193,18 +192,18 @@ This is how Hedy Lamarr's image and list items look closed:
class="photo"
/>
- - Invent new traffic lights
- - Rehearse a movie scene
- - Improve the spectrum technology
+ - Inventar novos semáforos
+ - Ensaio de uma cena de filme
+ - Melhorar a tecnologia de espectro
>
```
-### 3. camelCase
all most of the things! {/*3-camelcase-salls-most-of-the-things*/}
+### 3. camelCase
tudo a maioria das coisas! {/*3-camelcase-salls-most-of-the-things*/}
-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`.
+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`.
-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):
+É 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):
```js {4}
![]()
```
-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)
+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)
-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.
+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.
-### Pro-tip: Use a JSX Converter {/*pro-tip-use-a-jsx-converter*/}
+### Dica profissional: Use um Conversor JSX {/*pro-tip-use-a-jsx-converter*/}
-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.
+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.
-Here is your final result:
+Aqui está o seu resultado final:
@@ -234,16 +233,16 @@ Here is your final result:
export default function TodoList() {
return (
<>
- Hedy Lamarr's Todos
+ Tarefas de Hedy Lamarr
- - Invent new traffic lights
- - Rehearse a movie scene
- - Improve the spectrum technology
+ - Inventar novos semáforos
+ - Ensaio de uma cena de filme
+ - Melhorar a tecnologia de espectro
>
);
@@ -258,11 +257,11 @@ img { height: 90px }
-Now you know why JSX exists and how to use it in components:
+Agora você sabe por que JSX existe e como usá-lo em componentes:
-* React components group rendering logic together with markup because they are related.
-* JSX is similar to HTML, with a few differences. You can use a [converter](https://transform.tools/html-to-jsx) if you need to.
-* Error messages will often point you in the right direction to fixing your markup.
+* Os componentes React agrupam a lógica de renderização junto com a marcação porque eles estão relacionados.
+* JSX é semelhante a HTML, com algumas diferenças. Você pode usar um [conversor](https://transform.tools/html-to-jsx) se precisar.
+* As mensagens de erro geralmente apontarão na direção certa para corrigir sua marcação.
@@ -270,9 +269,9 @@ Now you know why JSX exists and how to use it in components:
-#### Convert some HTML to JSX {/*convert-some-html-to-jsx*/}
+#### Converter um pouco de HTML para JSX {/*convert-some-html-to-jsx*/}
-This HTML was pasted into a component, but it's not valid JSX. Fix it:
+Este HTML foi colado em um componente, mas não é JSX válido. Corrija-o:
@@ -280,12 +279,12 @@ This HTML was pasted into a component, but it's not valid JSX. Fix it:
export default function Bio() {
return (
-
Welcome to my website!
+ Bem-vindo ao meu site!
- You can find my thoughts here.
+ Você pode encontrar meus pensamentos aqui.
- And pictures of scientists!
+ E imagens de cientistas!
);
}
@@ -308,7 +307,7 @@ export default function Bio() {
-Whether to do it by hand or using the converter is up to you!
+Se você vai fazer isso à mão ou usando o conversor, depende de você!
@@ -319,12 +318,12 @@ export default function Bio() {
return (
-
Welcome to my website!
+ Bem-vindo ao meu site!
- You can find my thoughts here.
+ Você pode encontrar meus pensamentos aqui.
- And pictures of scientists!
+ E imagens de cientistas!
);
@@ -350,4 +349,4 @@ export default function Bio() {
-
+
\ No newline at end of file