From 4cb60945f108262eea83aef07460455366dba356 Mon Sep 17 00:00:00 2001 From: Tiago Hermano Date: Sat, 9 Feb 2019 18:16:56 -0200 Subject: [PATCH 01/35] Translate DOM Elements --- content/docs/reference-dom-elements.md | 78 +++++++++++++------------- 1 file changed, 39 insertions(+), 39 deletions(-) diff --git a/content/docs/reference-dom-elements.md b/content/docs/reference-dom-elements.md index 166870968..50fa5fc6f 100644 --- a/content/docs/reference-dom-elements.md +++ b/content/docs/reference-dom-elements.md @@ -1,6 +1,6 @@ --- id: dom-elements -title: DOM Elements +title: Elementos DOM layout: docs category: Reference permalink: docs/dom-elements.html @@ -14,27 +14,27 @@ redirect_from: - "tips/dangerously-set-inner-html.html" --- -React implements a browser-independent DOM system for performance and cross-browser compatibility. We took the opportunity to clean up a few rough edges in browser DOM implementations. +O React implementa um sistema DOM independente ao browser visando performance e compatibilidade entre browsers. Aproveitamos a oportunidade para melhorar algumas implementações do DOM no browser. -In React, all DOM properties and attributes (including event handlers) should be camelCased. For example, the HTML attribute `tabindex` corresponds to the attribute `tabIndex` in React. The exception is `aria-*` and `data-*` attributes, which should be lowercased. For example, you can keep `aria-label` as `aria-label`. +No React, todas as propriedades e atributos (incluindo manipuladores de eventos) devem estar em camelCase. Por exemplo, o atributo HTML `tabindex` corresponde ao atributo `tabIndex` no React. As exceções são os atributos `aria-*` e `data-*`, os quais devem estar em lowercase. Por exemplo, você pode manter `aria-label` como `aria-label`. -## Differences In Attributes {#differences-in-attributes} +## Diferenças nos Atributos {#diferencas-nos-atributos} -There are a number of attributes that work differently between React and HTML: +Existem alguns atributos que funcionam de formas diferentes no React e no HTML: ### checked {#checked} -The `checked` attribute is supported by `` components of type `checkbox` or `radio`. You can use it to set whether the component is checked. This is useful for building controlled components. `defaultChecked` is the uncontrolled equivalent, which sets whether the component is checked when it is first mounted. +O atributo `checked` é suportado por componentes `` do 'type' `checkbox` ou `radio `. Você pode usa-lo para definir se o componente está checado. Isso é útil para construção de componentes controlados(controlled components). `defaultChecked` é o equivalente para componentes não controlados(uncontrolled components), que define se o componente está checado na primeira vez em que é montado. ### className {#classname} -To specify a CSS class, use the `className` attribute. This applies to all regular DOM and SVG elements like `
`, ``, and others. +Para especificar uma classe CSS, utilize o atributo `className`. Isso se aplica para todos os DOM e elementos SVG regulares como `
`, ``, e outros. -If you use React with Web Components (which is uncommon), use the `class` attribute instead. +Se você usar React com Web Components (prática incomum), use o atributo `class`. ### dangerouslySetInnerHTML {#dangerouslysetinnerhtml} -`dangerouslySetInnerHTML` is React's replacement for using `innerHTML` in the browser DOM. In general, setting HTML from code is risky because it's easy to inadvertently expose your users to a [cross-site scripting (XSS)](https://en.wikipedia.org/wiki/Cross-site_scripting) attack. So, you can set HTML directly from React, but you have to type out `dangerouslySetInnerHTML` and pass an object with a `__html` key, to remind yourself that it's dangerous. For example: +`dangerouslySetInnerHTML` é a substituição do React para o uso do `innerHTML` no DOM do browser. Em geral, setar HTML através de código é arriscado pois é fácil expor inadvertidamente seus usuários a um ataque de [cross-site scripting (XSS)](https://en.wikipedia.org/wiki/Cross-site_scripting). Então, você pode definir HTML diretamente através do React, mas vocẽ tem que digitar `dangerouslySetInnerHTML` e passar um objeto com a chave `__html`, para te relembrar que é perigoso. Por exemplo: --> ```js function createMarkup() { @@ -48,23 +48,23 @@ function MyComponent() { ### htmlFor {#htmlfor} -Since `for` is a reserved word in JavaScript, React elements use `htmlFor` instead. +Já que `for` é uma palavra reservada em JavaScript, elementos em React usam `htmlFor` no lugar. ### onChange {#onchange} -The `onChange` event behaves as you would expect it to: whenever a form field is changed, this event is fired. We intentionally do not use the existing browser behavior because `onChange` is a misnomer for its behavior and React relies on this event to handle user input in real time. +O evento `onChange` se comporta como você esperaria que ele se comportasse: sempre que o um campo de formulário muda este evento é disparado. Nós intencionalmente não utilizamos o comportamento existente do browser porque `onChange` é um termo inadequado para seu comportamento, e o React depende deste evento para manipular input do usuário em tempo real. ### selected {#selected} -The `selected` attribute is supported by `