You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This funny tag syntax is neither a string nor HTML.
15
+
Esta sintaxe estranha de tags não é uma string, nem HTML.
16
16
17
-
It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.
17
+
É chamada JSX e é uma extensão de sintaxe para JavaScript. Recomendamos usar JSX com o React para descrever como a UI deveria parecer. JSX pode lembrar uma linguagem de template, mas que vem com todo o poder do JavaScript.
18
18
19
-
JSX produces React "elements". We will explore rendering them to the DOM in the [next section](/docs/rendering-elements.html). Below, you can find the basics of JSX necessary to get you started.
19
+
JSX produz "elementos" do React. Nós iremos explorar a renderização para o DOM na [próxima seção](/docs/rendering-elements.html). Abaixo você descobrirá o básico de JSX necessário para começar.
20
20
21
-
### Why JSX? {#why-jsx}
21
+
### Por que JSX? {#why-jsx}
22
22
23
-
React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display.
23
+
O React adota o fato de que a lógica de renderização é inerentemente acoplada com outras lógicas de UI: como eventos são manipulados, como o state muda com o tempo e como os dados são preparados para exibição.
24
24
25
-
Instead of artificially separating *technologies* by putting markup and logic in separate files, React [separates *concerns*](https://en.wikipedia.org/wiki/Separation_of_concerns) with loosely coupled units called "components" that contain both. We will come back to components in a [further section](/docs/components-and-props.html), but if you're not yet comfortable putting markup in JS, [this talk](https://www.youtube.com/watch?v=x7cQ3mrcKaY) might convince you otherwise.
25
+
Ao invés de separar *tecnologias* artificialmente colocando markup e lógica em arquivos separados, o React [separa *conceitos*](https://pt.wikipedia.org/wiki/Separa%C3%A7%C3%A3o_de_conceitos) com unidades pouco acopladas chamadas "componentes" que contém ambos. Voltaremos aos componentes em
26
+
[outra seção](/docs/components-and-props.html). Mas, se você ainda não está confortável em usar markup em JS, [esta palestra](https://www.youtube.com/watch?v=x7cQ3mrcKaY) pode convencer você do contrário.
26
27
27
-
React [doesn't require](/docs/react-without-jsx.html)using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.
28
+
O React [não requer](/docs/react-without-jsx.html)o uso do JSX. Porém, a maioria das pessoas acha prático como uma ajuda visual quando se está trabalhando com uma UI dentro do código em JavaScript. Ele permite ao React mostrar mensagens mais úteis de erro e aviso.
28
29
29
-
With that out of the way, let's get started!
30
+
Com isso fora do caminho, vamos começar!
30
31
31
-
### Embedding Expressions in JSX {#embedding-expressions-in-jsx}
32
+
### Incorporando Expressões em JSX {#embedding-expressions-in-jsx}
32
33
33
-
In the example below, we declare a variable called `name`and then use it inside JSX by wrapping it in curly braces:
34
+
No exemplo abaixo, declaramos uma variável chamada `name`e então a usamos dentro do JSX ao envolvê-la com chaves:
34
35
35
36
```js{1,2}
36
37
const name = 'Josh Perez';
@@ -42,9 +43,9 @@ ReactDOM.render(
42
43
);
43
44
```
44
45
45
-
You can put any valid [JavaScript expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions)inside the curly braces in JSX. For example, `2 + 2`, `user.firstName`, or`formatName(user)`are all valid JavaScript expressions.
46
+
Você pode inserir qualquer [expressão JavaScript](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions)válida dentro das chaves em JSX. Por exemplo, `2 + 2`, `user.firstName`, ou`formatName(user)`são todas expressões JavaScript válidas.
46
47
47
-
In the example below, we embed the result of calling a JavaScript function, `formatName(user)`, into an `<h1>` element.
48
+
No exemplo abaixo, incorporamos o resultado da chamada de uma função JavaScript, `formatName(user)`, dentro de um elemento `<h1>`.
48
49
49
50
```js{12}
50
51
function formatName(user) {
@@ -70,13 +71,13 @@ ReactDOM.render(
70
71
71
72
[](codepen://introducing-jsx)
72
73
73
-
We split JSX over multiple lines for readability. While it isn't required, when doing this, we also recommend wrapping it in parentheses to avoid the pitfalls of [automatic semicolon insertion](http://stackoverflow.com/q/2846283).
74
+
Separamos o JSX em múltiplas linhas para melhorar a legibilidade. Mesmo que não seja obrigatório, quando fizer isso, também recomendamos colocar dentro de parênteses para evitar as armadilhas da [inserção automática de ponto-e-vírgula](http://stackoverflow.com/q/2846283).
74
75
75
-
### JSX is an Expression Too {#jsx-is-an-expression-too}
76
+
### JSX Também é uma Expressão {#jsx-is-an-expression-too}
76
77
77
-
After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects.
78
+
Depois da compilação, as expressões em JSX se transformam em chamadas normais de funções que retornam objetos JavaScript.
78
79
79
-
This means that you can use JSX inside of `if`statements and`for` loops, assign it to variables, accept it as arguments, and return it from functions:
80
+
Isto significa que você pode usar JSX dentro de condições `if`e laços`for`, atribuí-lo a variáveis, aceitá-lo como argumentos e retorná-los de funções:
80
81
81
82
```js{3,5}
82
83
function getGreeting(user) {
@@ -87,37 +88,37 @@ function getGreeting(user) {
87
88
}
88
89
```
89
90
90
-
### Specifying Attributes with JSX {#specifying-attributes-with-jsx}
91
+
### Especificando Atributos com JSX {#specifying-attributes-with-jsx}
91
92
92
-
You may use quotes to specify string literals as attributes:
93
+
Você pode usar aspas para especificar strings literais como atributos:
93
94
94
95
```js
95
96
constelement=<div tabIndex="0"></div>;
96
97
```
97
98
98
-
You may also use curly braces to embed a JavaScript expression in an attribute:
99
+
Você também pode usar chaves para incorporar uma expressão JavaScript em um atributo:
99
100
100
101
```js
101
102
constelement=<img src={user.avatarUrl}></img>;
102
103
```
103
104
104
-
Don't put quotes around curly braces when embedding a JavaScript expression in an attribute. You should either use quotes (for string values) or curly braces (for expressions), but not both in the same attribute.
105
+
Não envolva chaves com aspas quando estiver incorporando uma expressão JavaScript em um atributo. Você deveria ou usar aspas (para valores em string) ou chaves (para expressões), mas não ambos no mesmo atributo.
105
106
106
-
>**Warning:**
107
+
>**Atenção:**
107
108
>
108
-
>Since JSX is closer to JavaScript than to HTML, React DOM uses`camelCase`property naming convention instead of HTML attribute names.
109
+
>Como JSX é mais próximo de JavaScript que do HTML, o React DOM usa`camelCase`como convenção para nomes de propriedades ao invés dos nomes de atributos do HTML.
109
110
>
110
-
>For example, `class`becomes [`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className)in JSX, and`tabindex`becomes [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex).
111
+
>Por exemplo, `class`se transforma em [`className`](https://developer.mozilla.org/pt-BR/docs/Web/API/Element/className)em JSX, e`tabindex`se transforma em [`tabIndex`](https://developer.mozilla.org/pt-BR/docs/Web/API/HTMLElement/tabIndex).
111
112
112
-
### Specifying Children with JSX {#specifying-children-with-jsx}
113
+
### Especificando Elementos Filhos com JSX {#specifying-children-with-jsx}
113
114
114
-
If a tag is empty, you may close it immediately with `/>`, like XML:
115
+
Se uma tag está vazia, você pode fechá-la imediatamente com `/>`, como XML:
### JSX Previne Ataques de Injeção {#jsx-prevents-injection-attacks}
132
133
133
-
It is safe to embed user input in JSX:
134
+
É seguro incorporar entradas de usuário em JSX:
134
135
135
136
```js
136
137
consttitle=response.potentiallyMaliciousInput;
137
138
// This is safe:
138
139
constelement=<h1>{title}</h1>;
139
140
```
140
141
141
-
By default, React DOM [escapes](http://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html)any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that's not explicitly written in your application. Everything is converted to a string before being rendered. This helps prevent [XSS (cross-site-scripting)](https://en.wikipedia.org/wiki/Cross-site_scripting) attacks.
142
+
Por padrão, o React DOM [escapa](http://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html)quaisquer valores incorporados no JSX antes de renderizá-los. Assim, assegura que você nunca injete algo que não esteja explicitamente escrito na sua aplicação. Tudo é convertido para string antes de ser renderizado. Isso ajuda a prevenir ataques [XSS (cross-site-scripting)](https://pt.wikipedia.org/wiki/Cross-site_scripting).
### JSX Representa Objetos {#jsx-represents-objects}
144
145
145
-
Babel compiles JSX down to`React.createElement()` calls.
146
+
O Babel compila JSX para chamadas`React.createElement()`.
146
147
147
-
These two examples are identical:
148
+
Estes dois exemplos são idênticos:
148
149
149
150
```js
150
151
constelement= (
@@ -162,10 +163,10 @@ const element = React.createElement(
162
163
);
163
164
```
164
165
165
-
`React.createElement()`performs a few checks to help you write bug-free code but essentially it creates an object like this:
166
+
`React.createElement()`realiza algumas verificações para ajudar você a criar um código sem bugs, mas, essencialmente, cria um objeto como este:
166
167
167
168
```js
168
-
//Note: this structure is simplified
169
+
//Nota: esta estrutura está simplificada
169
170
constelement= {
170
171
type:'h1',
171
172
props: {
@@ -175,10 +176,10 @@ const element = {
175
176
};
176
177
```
177
178
178
-
These objects are called "React elements". You can think of them as descriptions of what you want to see on the screen. React reads these objects and uses them to construct the DOM and keep it up to date.
179
+
Estes objetos são chamados "Elementos React". Você pode imaginá-los como descrições do que você quer ver na tela. O React lê esses objetos e os usa para construir o DOM e deixá-lo atualizado.
179
180
180
-
We will explore rendering React elements to the DOM in the next section.
181
+
Exploraremos a renderização de elementos React no DOM na próxima seção.
181
182
182
-
>**Tip:**
183
+
>**Dica:**
183
184
>
184
-
>We recommend using the ["Babel" language definition](http://babeljs.io/docs/editors)for your editor of choice so that both ES6 and JSX code is properly highlighted. This website uses the [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/) color scheme which is compatible with it.
185
+
>Recomendamos o uso da [definição de linguagem "Babel"](http://babeljs.io/docs/editors)no seu editor preferido para que ambos os códigos em ES6 e JSX sejam devidamente realçados. Este website usa o esquema de cores [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/), no qual é compatível com o Babel.
0 commit comments