From 085f2e7fd5dd09197e6f908fc12b0fc33c455b37 Mon Sep 17 00:00:00 2001 From: Lucas Polizeli Date: Wed, 10 Apr 2019 13:44:25 -0300 Subject: [PATCH 01/12] translate 'DOM Attributes in React 16' block --- .../2017-09-08-dom-attributes-in-react-16.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/content/blog/2017-09-08-dom-attributes-in-react-16.md b/content/blog/2017-09-08-dom-attributes-in-react-16.md index 31c66e53e..768953be5 100644 --- a/content/blog/2017-09-08-dom-attributes-in-react-16.md +++ b/content/blog/2017-09-08-dom-attributes-in-react-16.md @@ -3,25 +3,25 @@ title: "DOM Attributes in React 16" author: [gaearon] --- -In the past, React used to ignore unknown DOM attributes. If you wrote JSX with an attribute that React doesn't recognize, React would just skip it. For example, this: +No passado, o React ignorava atributos do DOM desconhecidos. Se você escreveu arquivos JSX com um atributo que o React não reconhece, ele apenas ignoraria. Por exemplo: ```js -// Your code: -
+// Seu código: +
``` -would render an empty div to the DOM with React 15: +renderizaria uma div vazia no DOM com React 15: ```js -// React 15 output: +// Renderização no React 15:
``` -In React 16, we are making a change. Now, any unknown attributes will end up in the DOM: +No React 16, estamos fazendo uma mudança. Agora, qualquer atributo desconhecido será colocado no DOM: ```js -// React 16 output: -
+// Renderização no React 16: +
``` ## Why Are We Changing This? {#why-are-we-changing-this} From dd5ee942328687ee3e67bda51eaa96e96ea25b6b Mon Sep 17 00:00:00 2001 From: Lucas Polizeli Date: Mon, 15 Apr 2019 00:29:53 -0300 Subject: [PATCH 02/12] Translation of why-are-we-changing-this block --- .../2017-09-08-dom-attributes-in-react-16.md | 25 +++++++++++-------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/content/blog/2017-09-08-dom-attributes-in-react-16.md b/content/blog/2017-09-08-dom-attributes-in-react-16.md index 768953be5..77272a48c 100644 --- a/content/blog/2017-09-08-dom-attributes-in-react-16.md +++ b/content/blog/2017-09-08-dom-attributes-in-react-16.md @@ -24,15 +24,18 @@ No React 16, estamos fazendo uma mudança. Agora, qualquer atributo desconhecido
``` -## Why Are We Changing This? {#why-are-we-changing-this} + +## Por Que Estamos Mudando Isso? {#why-are-we-changing-this} -React has always provided a JavaScript-centric API to the DOM. Since React components often take both custom and DOM-related props, it makes sense for React to use the `camelCase` convention just like the DOM APIs: + +O React sempre forneceu uma API central do JavaScript para o DOM. Visto que os componentes do React constantemente usam props customizadas e relacionadas ao DOM, faz sentido para o React usar a convenção `camelCase` como nas APis do DOM. ```js
``` -This has not changed. However, the way we enforced it in the past forced us to maintain a whitelist of all valid React DOM attributes in the bundle: + +Isso não mudou. Porém, a maneira como aplicamos isso no passado, nos forçou manter uma lista de permissões de todos os atributos do DOM válidos para o React no bundle. ```js // ... @@ -43,25 +46,25 @@ title: 'title', // ... ``` -This had two downsides: +Isso tem duas desvantagens: -* You could not [pass a custom attribute](https://github.com/facebook/react/issues/140). This is useful for supplying browser-specific non-standard attributes, trying new DOM APIs, and integrating with opinionated third-party libraries. +* Você não pode [passar um atributo personalizado](https://github.com/facebook/react/issues/140). Isso é útil por fornecer atributos não padronizados específicos de um navegador, tentando novas APIs do DOM, e interagindo com arbitrárias bibliotecas de terceiros. -* The attribute list kept growing over time, but most React canonical attribute names are already valid in the DOM. Removing most of the whitelist helped us reduce the bundle size a little bit. +* A lista de atributos continuou crescendo ao longo do tempo, porém, a maioria dos atributos canônicos do React já são válidos no DOM. Removendo a maioria das listas de permissões, tornou-se possível reduzir bastante o tamanho do bundle. -With the new approach, both of these problems are solved. With React 16, you can now pass custom attributes to all HTML and SVG elements, and React doesn't have to include the whole attribute whitelist in the production version. +Com uma nova abordagem, ambos problemas foram solucionados. No React 16, você pode passar um atributo personalizado para qualquer elemento HTML e SVG, que o React não irá incluir toda lista de permissões do atributo na versão de produção. -**Note that you should still use the canonical React naming for known attributes:** +**Observe que você ainda deve usar atributos canônicos do React para atributos desconhecidos:** ```js -// Yes, please +// Sim, por favor
-// Warning: Invalid DOM property `tabindex`. Did you mean `tabIndex`? +// Atenção: Propriedade do DOM `tabindex` inválida. Você quis dizer `tabIndex`?
``` -In other words, the way you use DOM components in React hasn't changed, but now you have some new capabilities. +Em outras palavras, a maneira como se usa componentes do DOM no React não mudou, mas agora você tem novos recursos. ## Should I Keep Data in Custom Attributes? {#should-i-keep-data-in-custom-attributes} From 5a09f56a4a8c9f6601952a007d9f12da941390ba Mon Sep 17 00:00:00 2001 From: Lucas Polizeli Date: Mon, 15 Apr 2019 00:38:20 -0300 Subject: [PATCH 03/12] Title translation --- content/blog/2017-09-08-dom-attributes-in-react-16.md | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/content/blog/2017-09-08-dom-attributes-in-react-16.md b/content/blog/2017-09-08-dom-attributes-in-react-16.md index 77272a48c..82d57e024 100644 --- a/content/blog/2017-09-08-dom-attributes-in-react-16.md +++ b/content/blog/2017-09-08-dom-attributes-in-react-16.md @@ -1,5 +1,5 @@ --- -title: "DOM Attributes in React 16" +title: "Atributos do DOM no React 16" author: [gaearon] --- @@ -24,17 +24,14 @@ No React 16, estamos fazendo uma mudança. Agora, qualquer atributo desconhecido
``` - ## Por Que Estamos Mudando Isso? {#why-are-we-changing-this} - O React sempre forneceu uma API central do JavaScript para o DOM. Visto que os componentes do React constantemente usam props customizadas e relacionadas ao DOM, faz sentido para o React usar a convenção `camelCase` como nas APis do DOM. ```js
``` - Isso não mudou. Porém, a maneira como aplicamos isso no passado, nos forçou manter uma lista de permissões de todos os atributos do DOM válidos para o React no bundle. ```js From 943513c0b853a735d6ea9ba0b627cea6e8a32b64 Mon Sep 17 00:00:00 2001 From: Lucas Polizeli Date: Mon, 15 Apr 2019 13:58:20 -0300 Subject: [PATCH 04/12] Translation of should-i-keep-data-in-custom-attributes --- content/blog/2017-09-08-dom-attributes-in-react-16.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/blog/2017-09-08-dom-attributes-in-react-16.md b/content/blog/2017-09-08-dom-attributes-in-react-16.md index 82d57e024..1483ebb5f 100644 --- a/content/blog/2017-09-08-dom-attributes-in-react-16.md +++ b/content/blog/2017-09-08-dom-attributes-in-react-16.md @@ -63,11 +63,11 @@ Com uma nova abordagem, ambos problemas foram solucionados. No React 16, você p Em outras palavras, a maneira como se usa componentes do DOM no React não mudou, mas agora você tem novos recursos. -## Should I Keep Data in Custom Attributes? {#should-i-keep-data-in-custom-attributes} +## Devo Manter Dados Em Atributos Personalizados? {#should-i-keep-data-in-custom-attributes} -No. We don't encourage you to keep data in DOM attributes. Even if you have to, `data-` attributes are probably a better approach, but in most cases data should be kept in React component state or external stores. +Não. Nós não recomendamos você manter dados em atributos do DOM. Mesmo se você tiver que fazer isso, usar atributos `data-` provavelmente é uma escolha melhor, porém na maioria dos casos deve ser mantido em um estado de um componente React, ou em armazenamentos externos. -However, the new feature is handy if you need to use a non-standard or a new DOM attribute, or if you need to integrate with a third-party library that relies on such attributes. +Entretanto, a nova funcionalidade é de fácil manuseio se você precisa usar um atributo não padronizado, ou um novo atributo do DOM, ou até mesmo se você precisa integrar com bibliotecas terceiras que dependa de tais atributos. ## Data and ARIA Attributes {#data-and-aria-attributes} From 30a264eb61c33353539e54b0bc48dbbc87dccdcf Mon Sep 17 00:00:00 2001 From: Lucas Polizeli Date: Mon, 15 Apr 2019 19:30:22 -0300 Subject: [PATCH 05/12] Translation of data-and-aria-attributes --- content/blog/2017-09-08-dom-attributes-in-react-16.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/blog/2017-09-08-dom-attributes-in-react-16.md b/content/blog/2017-09-08-dom-attributes-in-react-16.md index 1483ebb5f..fc03bfd82 100644 --- a/content/blog/2017-09-08-dom-attributes-in-react-16.md +++ b/content/blog/2017-09-08-dom-attributes-in-react-16.md @@ -69,18 +69,18 @@ Não. Nós não recomendamos você manter dados em atributos do DOM. Mesmo se vo Entretanto, a nova funcionalidade é de fácil manuseio se você precisa usar um atributo não padronizado, ou um novo atributo do DOM, ou até mesmo se você precisa integrar com bibliotecas terceiras que dependa de tais atributos. -## Data and ARIA Attributes {#data-and-aria-attributes} +## Atributos de Dados e ARIA {#data-and-aria-attributes} -Just like before, React lets you pass `data-` and `aria-` attributes freely: +Assim como antes, o React deixa você passar atributos `data-` e `aria-` livremente: ```js