From 2a2df7fe7018acd5c4174a382fbeebb1e9f13740 Mon Sep 17 00:00:00 2001 From: "Caique M. Oliveira" Date: Sat, 30 Mar 2019 00:18:27 -0300 Subject: [PATCH 01/20] translate the article intro --- content/blog/2017-11-28-react-v16.2.0-fragment-support.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/blog/2017-11-28-react-v16.2.0-fragment-support.md b/content/blog/2017-11-28-react-v16.2.0-fragment-support.md index a8db2b0bd..b5d11274a 100644 --- a/content/blog/2017-11-28-react-v16.2.0-fragment-support.md +++ b/content/blog/2017-11-28-react-v16.2.0-fragment-support.md @@ -1,11 +1,11 @@ --- -title: "React v16.2.0: Improved Support for Fragments" +title: "React v16.2.0: Melhoria no Suporte a Fragmentos" author: [clemmy] --- -React 16.2 is now available! The biggest addition is improved support for returning multiple children from a component's render method. We call this feature *fragments*: +O React 16.2 agora está disponível! O maior complemento, é a melhoria ao suporte do retorno a multiplos filhos de um método de renderização de um componente. Nós chamamos esta funcionaliade de *fragmentos*: -Fragments look like empty JSX tags. They let you group a list of children without adding extra nodes to the DOM: +Fragmentos se parecem com tags JSX vazias. Elas permitem você agrupar uma lista de filhos sem adicionar nós extras ao DOM: ```js render() { @@ -19,7 +19,7 @@ render() { } ``` -This exciting new feature is made possible by additions to both React and JSX. +Esta empolgante funcionalidade é possível graças a junção do React e do JSX. ## What Are Fragments? {#what-are-fragments} From 7561f561db154a16f779ff0c7701aa73f3510b5f Mon Sep 17 00:00:00 2001 From: "Caique M. Oliveira" Date: Sat, 30 Mar 2019 21:20:52 -0300 Subject: [PATCH 02/20] translate 'What Are Fragments?' block --- ...17-11-28-react-v16.2.0-fragment-support.md | 66 +++++++++---------- 1 file changed, 33 insertions(+), 33 deletions(-) diff --git a/content/blog/2017-11-28-react-v16.2.0-fragment-support.md b/content/blog/2017-11-28-react-v16.2.0-fragment-support.md index b5d11274a..99c8362f1 100644 --- a/content/blog/2017-11-28-react-v16.2.0-fragment-support.md +++ b/content/blog/2017-11-28-react-v16.2.0-fragment-support.md @@ -21,74 +21,74 @@ render() { Esta empolgante funcionalidade é possível graças a junção do React e do JSX. -## What Are Fragments? {#what-are-fragments} +## O Que São Fragmentos? {#what-are-fragments} -A common pattern is for a component to return a list of children. Take this example HTML: +Um padrão comum é um componente retornar uma lista de filhos. Observe este exmplo em HTML: ```html -Some text. -

A heading

-More text. -

Another heading

-Even more text. +Algum texto. +

Um cabeçalho

+Mais texto. +

Outro cabeçalho

+Ainda mais texto. ``` -Prior to version 16, the only way to achieve this in React was by wrapping the children in an extra element, usually a `div` or `span`: +Antes da versão 16, a única forma de realizar isto no React, seria encapsulando os filhos em um elemento extra, geralmente uma `div` ou `span`: ```js render() { return ( - // Extraneous div element :( + // Elemento div inconveniente :(
- Some text. -

A heading

- More text. -

Another heading

- Even more text. + Algum texto. +

Um cabeçalho

+ Mais texto. +

Outro cabeçalho

+ Ainda mais texto.
); } ``` -To address this limitation, React 16.0 added support for [returning an array of elements from a component's `render` method](/blog/2017/09/26/react-v16.0.html#new-render-return-types-fragments-and-strings). Instead of wrapping the children in a DOM element, you can put them into an array: +Para resolver esta limitação, no React 16.0, foi adicionado suporte ao [retorno de um array de elementos de um método `render` de um componente](/blog/2017/09/26/react-v16.0.html#new-render-return-types-fragments-and-strings). Ao invés de encapsular os filhos em um elemento DOM, você pode coloca-los dentro de um array: ```jsx render() { return [ - "Some text.", -

A heading

, - "More text.", -

Another heading

, - "Even more text." + "Algum texto.", +

Um cabeçalho

, + "Mais texto.", +

Outro cabeçalho

, + "Ainda mais texto." ]; } ``` -However, this has some confusing differences from normal JSX: +No entando, isso tem algumas diferenças confusas do JSX normal: -- Children in an array must be separated by commas. -- Children in an array must have a key to prevent React's [key warning](/docs/lists-and-keys.html#keys). -- Strings must be wrapped in quotes. +- Filhos contidos em um array, devem ser separados por víngula. +- Filhos contidos em um array, devem ter uma chave para prevenir o [aviso de chave](/docs/lists-and-keys.html#keys) do React. +- Strings devem estas entre aspas. -To provide a more consistent authoring experience for fragments, React now provides a first-class `Fragment` component that can be used in place of arrays. +Para providenciar uma maior consistência de exepriência a fragmentos, o React agora fornece um componente `Fragment` de primeira classe, que pode ser usado em lugar dos arrays. ```jsx{3,9} render() { return ( - Some text. -

A heading

- More text. -

Another heading

- Even more text. + Algum texto. +

Um cabeçalho

+ Mais texto. +

Outro cabeçalho

+ Ainda mais texto.
); } ``` -You can use `` the same way you'd use any other element, without changing the way you write JSX. No commas, no keys, no quotes. +Você pode usar `` da mesma forma que usaria qualquer outro elemento, sem mudar a forma que você escreve JSX. Sem víngulas, sem chaves e sem aspas. -The Fragment component is available on the main React object: +O componente Fragment está disponível no objeto principal React: ```js const Fragment = React.Fragment; @@ -99,7 +99,7 @@ const Fragment = React.Fragment; -// This also works +// Isto também funciona From d4e161712620f0ea695b4eabe2bc884cb3a35512 Mon Sep 17 00:00:00 2001 From: "Caique M. Oliveira" Date: Sat, 30 Mar 2019 22:10:47 -0300 Subject: [PATCH 03/20] translate 'JSX Fragment Syntax' block --- ...017-11-28-react-v16.2.0-fragment-support.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/content/blog/2017-11-28-react-v16.2.0-fragment-support.md b/content/blog/2017-11-28-react-v16.2.0-fragment-support.md index 99c8362f1..8a67af2a8 100644 --- a/content/blog/2017-11-28-react-v16.2.0-fragment-support.md +++ b/content/blog/2017-11-28-react-v16.2.0-fragment-support.md @@ -107,27 +107,27 @@ const Fragment = React.Fragment; ``` -## JSX Fragment Syntax {#jsx-fragment-syntax} +## Sintaxe Fragment JSX {#jsx-fragment-syntax} -Fragments are a common pattern in our codebases at Facebook. We anticipate they'll be widely adopted by other teams, too. To make the authoring experience as convenient as possible, we're adding syntactical support for fragments to JSX: +Fragments são padrões comuns em nossa base de código no Facebook. Nós antecipamos que eles serão amplamente adotados por outros times. Para tornar a experiência de criação o mais conveniente possível, nós estamos adicionando o suporte sintático aos fragmentos no JSX: ```jsx{3,9} render() { return ( <> - Some text. -

A heading

- More text. -

Another heading

- Even more text. + Algum texto. +

Um cabeçalho

+ Mais texto. +

Outro cabeçalho

+ Ainda mais texto. ); } ``` -In React, this desugars to a `` element, as in the example from the previous section. (Non-React frameworks that use JSX may compile to something different.) +No React, esta transformação do elemento ``, como no exemplo da seção anterior. (Frameworks não React que usam JSX talvez compile de forma diferente.) -Fragment syntax in JSX was inspired by prior art such as the `XMLList() <>` constructor in [E4X](https://developer.mozilla.org/en-US/docs/Archive/Web/E4X/E4X_for_templating). Using a pair of empty tags is meant to represent the idea it won't add an actual element to the DOM. +A sintaxe de Fragemento no JSX foi inspirada pela arte anterior, como o construtor `XMLList() <>` no [E4X](https://developer.mozilla.org/pt-BR/docs/Archive/Web/E4X/E4X_for_templating). Usando um par de tags vazias, representa-se a ideia de que não será adicionado um elemento real ao DOM. ### Keyed Fragments {#keyed-fragments} From 0e10e891c5ca172b33550729103ab28682f0cf4b Mon Sep 17 00:00:00 2001 From: "Caique M. Oliveira" Date: Sat, 30 Mar 2019 22:18:00 -0300 Subject: [PATCH 04/20] translate the line 'Live Demo' --- content/blog/2017-11-28-react-v16.2.0-fragment-support.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/blog/2017-11-28-react-v16.2.0-fragment-support.md b/content/blog/2017-11-28-react-v16.2.0-fragment-support.md index 8a67af2a8..f0429299f 100644 --- a/content/blog/2017-11-28-react-v16.2.0-fragment-support.md +++ b/content/blog/2017-11-28-react-v16.2.0-fragment-support.md @@ -153,9 +153,9 @@ function Glossary(props) { `key` is the only attribute that can be passed to `Fragment`. In the future, we may add support for additional attributes, such as event handlers. -### Live Demo {#live-demo} +### Demonstração Ao Vivo {#live-demo} -You can experiment with JSX fragment syntax with this [CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000). +Você pode experimentar a sintaxe fragment JSX com este [CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000). ## Support for Fragment Syntax {#support-for-fragment-syntax} From e39ff5af776c63f6c3d956349c0782f0bb8d2713 Mon Sep 17 00:00:00 2001 From: "Caique M. Oliveira" Date: Sat, 30 Mar 2019 22:33:24 -0300 Subject: [PATCH 05/20] translate 'Installation' block --- .../2017-11-28-react-v16.2.0-fragment-support.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/content/blog/2017-11-28-react-v16.2.0-fragment-support.md b/content/blog/2017-11-28-react-v16.2.0-fragment-support.md index f0429299f..1d5c3ae4b 100644 --- a/content/blog/2017-11-28-react-v16.2.0-fragment-support.md +++ b/content/blog/2017-11-28-react-v16.2.0-fragment-support.md @@ -269,30 +269,30 @@ If you're a TypeScript user -- great news! Editor support for JSX fragments is a For other tools, please check with the corresponding documentation to check if there is support available. However, if you're blocked by your tooling, you can always start with using the `` component and perform a codemod later to replace it with the shorthand syntax when the appropriate support is available. -## Installation {#installation} +## Instalação {#installation} -React v16.2.0 is available on the npm registry. +O React v16.2.0 está disponível no registro npm. -To install React 16 with Yarn, run: +Para instalar o React 16 com o Yarn, execute: ```bash yarn add react@^16.2.0 react-dom@^16.2.0 ``` -To install React 16 with npm, run: +Para instalar o React 16 com o npm, execute: ```bash npm install --save react@^16.2.0 react-dom@^16.2.0 ``` -We also provide UMD builds of React via a CDN: +Nós também fornecemos compilações UMD do React via CDN: ```html ``` -Refer to the documentation for [detailed installation instructions](/docs/installation.html). +Consulte a documentação para [instruções de instalações detalhadas](/docs/installation.html). ## Changelog {#changelog} From 49e2c89fd947e8cf06ba7185ba6f096a22747b0c Mon Sep 17 00:00:00 2001 From: "Caique M. Oliveira" Date: Sat, 30 Mar 2019 22:50:23 -0300 Subject: [PATCH 06/20] translate 'Support for Fragment Syntax' block --- content/blog/2017-11-28-react-v16.2.0-fragment-support.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/blog/2017-11-28-react-v16.2.0-fragment-support.md b/content/blog/2017-11-28-react-v16.2.0-fragment-support.md index 1d5c3ae4b..bb96582c8 100644 --- a/content/blog/2017-11-28-react-v16.2.0-fragment-support.md +++ b/content/blog/2017-11-28-react-v16.2.0-fragment-support.md @@ -157,9 +157,9 @@ function Glossary(props) { Você pode experimentar a sintaxe fragment JSX com este [CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000). -## Support for Fragment Syntax {#support-for-fragment-syntax} +## Suporte à Sintaxe Fragment {#support-for-fragment-syntax} -Support for fragment syntax in JSX will vary depending on the tools you use to build your app. Please be patient as the JSX community works to adopt the new syntax. We've been working closely with maintainers of the most popular projects: +O suporte à sintaxe de fragmento no JSX irá variar dependendo das ferramentas quais você utiliza para contruir o seu app. Por favor, seja paciente enquanto a comunidade JSX trabalha para adotar a nova sintaxe. Nós temos trabalhado próximo dos responsáveis dos projetos mais populares: ### Create React App {#create-react-app} From 9fd4ad85abf3612a49c0a93128e1eadf9f69145b Mon Sep 17 00:00:00 2001 From: "Caique M. Oliveira" Date: Sat, 30 Mar 2019 23:03:44 -0300 Subject: [PATCH 07/20] translate 'Create React App' block --- content/blog/2017-11-28-react-v16.2.0-fragment-support.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/blog/2017-11-28-react-v16.2.0-fragment-support.md b/content/blog/2017-11-28-react-v16.2.0-fragment-support.md index bb96582c8..459239279 100644 --- a/content/blog/2017-11-28-react-v16.2.0-fragment-support.md +++ b/content/blog/2017-11-28-react-v16.2.0-fragment-support.md @@ -163,7 +163,7 @@ O suporte à sintaxe de fragmento no JSX irá variar dependendo das ferramentas ### Create React App {#create-react-app} -Experimental support for fragment syntax will be added to Create React App within the next few days. A stable release may take a bit longer as we await adoption by upstream projects. +O suporte experimental à sintaxe de fragment será adicionado ao Create React App dentro de poucos dias. Uma versão estável talvez leve mais tempo, enquanto esperamos a adoção por projetos principiantes. ### Babel {#babel} From 144ef74dc924952c95adb1db6d169df7c96f1c49 Mon Sep 17 00:00:00 2001 From: "Caique M. Oliveira" Date: Sun, 31 Mar 2019 16:59:37 -0300 Subject: [PATCH 08/20] translate 'TypeScript' block --- content/blog/2017-11-28-react-v16.2.0-fragment-support.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/blog/2017-11-28-react-v16.2.0-fragment-support.md b/content/blog/2017-11-28-react-v16.2.0-fragment-support.md index 459239279..a62a457d6 100644 --- a/content/blog/2017-11-28-react-v16.2.0-fragment-support.md +++ b/content/blog/2017-11-28-react-v16.2.0-fragment-support.md @@ -199,14 +199,14 @@ If you use JSX with a non-React framework like Inferno or Preact, there is a [pr ### TypeScript {#typescript} -TypeScript has full support for fragment syntax! Please upgrade to [version 2.6.2](https://github.com/Microsoft/TypeScript/releases/tag/v2.6.2). (Note that this is important even if you are already on version 2.6.1, since support was added as patch release in 2.6.2.) +O TypeScript possui total suporte à sintaxe de fragmento! Por favor, atualize para a [versão 2.6.2](https://github.com/Microsoft/TypeScript/releases/tag/v2.6.2). (Note que é imporante mesmo se você já está na versão 2.6.1, sendo que o suporte foi adicionado como atualização de complemento na versão 2.6.2.) -Upgrade to the latest TypeScript with the command: +Atualize para a última versão do TypeScript utilizando este comando: ```bash -# for yarn users +# para usuários que utilizam yarn yarn upgrade typescript -# for npm users +# para usuários que utilizam npm npm update typescript ``` From 5c1df5bc53ed4035aae2c15cf88a7ec4674a51ad Mon Sep 17 00:00:00 2001 From: "Caique M. Oliveira" Date: Sun, 31 Mar 2019 17:09:33 -0300 Subject: [PATCH 09/20] translate 'Flow' block --- content/blog/2017-11-28-react-v16.2.0-fragment-support.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/blog/2017-11-28-react-v16.2.0-fragment-support.md b/content/blog/2017-11-28-react-v16.2.0-fragment-support.md index a62a457d6..a5922dc88 100644 --- a/content/blog/2017-11-28-react-v16.2.0-fragment-support.md +++ b/content/blog/2017-11-28-react-v16.2.0-fragment-support.md @@ -212,16 +212,16 @@ npm update typescript ### Flow {#flow} -[Flow](https://flow.org/) support for JSX fragments is available starting in [version 0.59](https://github.com/facebook/flow/releases/tag/v0.59.0)! Simply run +O suporte do [Flow](https://flow.org/) aos fragmentos JSX estão disponíveis a partir da [versão 0.59](https://github.com/facebook/flow/releases/tag/v0.59.0)! Apenas execute ```bash -# for yarn users +# para usuários que utilizam yarn yarn upgrade flow-bin -# for npm users +# para usuários que utilizam npm npm update flow-bin ``` -to update Flow to the latest version. +para atualizar o Flow para a última versão. ### Prettier {#prettier} From 3ec05881cf5ff1658f4e96203347655043ec4d41 Mon Sep 17 00:00:00 2001 From: "Caique M. Oliveira" Date: Sun, 31 Mar 2019 17:12:20 -0300 Subject: [PATCH 10/20] fix typo --- content/blog/2017-11-28-react-v16.2.0-fragment-support.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/blog/2017-11-28-react-v16.2.0-fragment-support.md b/content/blog/2017-11-28-react-v16.2.0-fragment-support.md index a5922dc88..2c034890c 100644 --- a/content/blog/2017-11-28-react-v16.2.0-fragment-support.md +++ b/content/blog/2017-11-28-react-v16.2.0-fragment-support.md @@ -3,7 +3,7 @@ title: "React v16.2.0: Melhoria no Suporte a Fragmentos" author: [clemmy] --- -O React 16.2 agora está disponível! O maior complemento, é a melhoria ao suporte do retorno a multiplos filhos de um método de renderização de um componente. Nós chamamos esta funcionaliade de *fragmentos*: +O React 16.2 agora está disponível! O maior complemento, é a melhoria ao suporte do retorno a múltiplos filhos de um método de renderização de um componente. Nós chamamos esta funcionaliade de *fragmentos*: Fragmentos se parecem com tags JSX vazias. Elas permitem você agrupar uma lista de filhos sem adicionar nós extras ao DOM: From 521a1f2477ef5eb185c1be1626d1911febb61460 Mon Sep 17 00:00:00 2001 From: "Caique M. Oliveira" Date: Sun, 31 Mar 2019 17:26:53 -0300 Subject: [PATCH 11/20] translate 'Prettier' block --- content/blog/2017-11-28-react-v16.2.0-fragment-support.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/blog/2017-11-28-react-v16.2.0-fragment-support.md b/content/blog/2017-11-28-react-v16.2.0-fragment-support.md index 2c034890c..701a90673 100644 --- a/content/blog/2017-11-28-react-v16.2.0-fragment-support.md +++ b/content/blog/2017-11-28-react-v16.2.0-fragment-support.md @@ -225,7 +225,7 @@ para atualizar o Flow para a última versão. ### Prettier {#prettier} -[Prettier](https://github.com/prettier/prettier) added support for fragments in their [1.9 release](https://prettier.io/blog/2017/12/05/1.9.0.html#jsx-fragment-syntax-3237-https-githubcom-prettier-prettier-pull-3237-by-duailibe-https-githubcom-duailibe). +O [Prettier](https://github.com/prettier/prettier) adicionou suporte à fragmentos em sua [versão 1.9](https://prettier.io/blog/2017/12/05/1.9.0.html#jsx-fragment-syntax-3237-https-githubcom-prettier-prettier-pull-3237-by-duailibe-https-githubcom-duailibe). ### ESLint {#eslint} From 3078efef0b6675bb0d4a95ecc903abb0e5e3f492 Mon Sep 17 00:00:00 2001 From: "Caique M. Oliveira" Date: Sun, 31 Mar 2019 17:53:26 -0300 Subject: [PATCH 12/20] translate 'ESLint' block --- ...017-11-28-react-v16.2.0-fragment-support.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/content/blog/2017-11-28-react-v16.2.0-fragment-support.md b/content/blog/2017-11-28-react-v16.2.0-fragment-support.md index 701a90673..37f18d24c 100644 --- a/content/blog/2017-11-28-react-v16.2.0-fragment-support.md +++ b/content/blog/2017-11-28-react-v16.2.0-fragment-support.md @@ -229,33 +229,33 @@ O [Prettier](https://github.com/prettier/prettier) adicionou suporte à fragment ### ESLint {#eslint} -JSX Fragments are supported by [ESLint](https://eslint.org/) 3.x when it is used together with [babel-eslint](https://github.com/babel/babel-eslint): +Fragmentos JSX são suportados pelo [ESLint](https://eslint.org/) 3.x, quando este é utilizado junto ao [babel-eslint](https://github.com/babel/babel-eslint): ```bash -# for yarn users +# para usuários que utilizam yarn yarn add eslint@3.x babel-eslint@7 -# for npm users +# para usuários que utilizam npm npm install eslint@3.x babel-eslint@7 ``` -or if you already have it, then upgrade: +ou se você já utiliza, então atualize: ```bash -# for yarn users +# para usuários que utilizam yarn yarn upgrade eslint@3.x babel-eslint@7 -# for npm users +# para usuários que utilizam npm npm update eslint@3.x babel-eslint@7 ``` -Ensure you have the following line inside your `.eslintrc`: +Assegure que você tenha a seguinte linha dentro de seu `.eslintrc`: ```json "parser": "babel-eslint" ``` -That's it! +É isso aí! -Note that `babel-eslint` is not officially supported by ESLint. We'll be looking into adding support for fragments to ESLint 4.x itself in the coming weeks (see [issue #9662](https://github.com/eslint/eslint/issues/9662)). +Observe que o `babel-eslint` não é oficialmente suportado pelo ESLint. Nós estaremos procurando adicionar o suporte aos fragmentos ao ESLint 4.x ao decorrer das próximas semanas (veja a [discussão #9662](https://github.com/eslint/eslint/issues/9662)) ### Editor Support {#editor-support} From e06df60601d8b9ca27acbea4c5eb4f0650bf5810 Mon Sep 17 00:00:00 2001 From: "Caique M. Oliveira" Date: Sun, 31 Mar 2019 18:04:52 -0300 Subject: [PATCH 13/20] translate 'Other Tools' block --- content/blog/2017-11-28-react-v16.2.0-fragment-support.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/blog/2017-11-28-react-v16.2.0-fragment-support.md b/content/blog/2017-11-28-react-v16.2.0-fragment-support.md index 37f18d24c..f2082aac8 100644 --- a/content/blog/2017-11-28-react-v16.2.0-fragment-support.md +++ b/content/blog/2017-11-28-react-v16.2.0-fragment-support.md @@ -265,9 +265,9 @@ It may take a while for fragment syntax to be supported in your text editor. Ple If you're a TypeScript user -- great news! Editor support for JSX fragments is already available in [Visual Studio 2015](https://www.microsoft.com/en-us/download/details.aspx?id=48593), [Visual Studio 2017](https://www.microsoft.com/en-us/download/details.aspx?id=55258), [Visual Studio Code](https://code.visualstudio.com/updates/v1_19#_jsx-fragment-syntax) and [Sublime Text via Package Control](https://packagecontrol.io/packages/TypeScript). -### Other Tools {#other-tools} +### Outras Ferramentas {#other-tools} -For other tools, please check with the corresponding documentation to check if there is support available. However, if you're blocked by your tooling, you can always start with using the `` component and perform a codemod later to replace it with the shorthand syntax when the appropriate support is available. +Para outras ferramentas, por favor, verifique com a documentação correspondente se há suporte disponível. Porém, se você estiver restrito pelo seu ferramental, você pode sempre começar usando o componente `` e realizar uma refatoração depois, para assim, utilizar da sintaxe abreviada quando o suporte apropriado estiver disponível. ## Instalação {#installation} From 1ff18e3ef1d07ac58d719adb3dd01d0ad8a966d1 Mon Sep 17 00:00:00 2001 From: "Caique M. Oliveira" Date: Mon, 1 Apr 2019 13:16:35 -0300 Subject: [PATCH 14/20] translate 'Acknowledgments' block --- content/blog/2017-11-28-react-v16.2.0-fragment-support.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/blog/2017-11-28-react-v16.2.0-fragment-support.md b/content/blog/2017-11-28-react-v16.2.0-fragment-support.md index f2082aac8..4dc4ee40d 100644 --- a/content/blog/2017-11-28-react-v16.2.0-fragment-support.md +++ b/content/blog/2017-11-28-react-v16.2.0-fragment-support.md @@ -318,10 +318,10 @@ Consulte a documentação para [instruções de instalações detalhadas](/docs/ * Many tests were rewritten against the public API. Big thanks to [everyone who contributed](https://github.com/facebook/react/issues/11299)! -## Acknowledgments {#acknowledgments} +## Agradecimentos {#acknowledgments} -This release was made possible by our open source contributors. A big thanks to everyone who filed issues, contributed to syntax discussions, reviewed pull requests, added support for JSX fragments in third party libraries, and more! +Esta versão se tornou possível graças aos nossos colaboradores de código aberto. Um grande obrigado a todos aqueles que relataram problemas, contribuiram com discussões sobre a sintaxe, revisaram as solicitações de mudanças, adicionaram suporte aos fragmentos JSX em bibliotecas terceiras, e mais! -Special thanks to the [TypeScript](https://www.typescriptlang.org/) and [Flow](https://flow.org/) teams, as well as the [Babel](https://babeljs.io/) maintainers, who helped make tooling support for the new syntax go seamlessly. +Um agradecimento especial aos times do [TypeScript](https://www.typescriptlang.org/) e [Flow](https://flow.org/), assim como, aos responsáveis do [Babel](https://babeljs.io/), quem nos ajudou a produzir o ferramental de suporte para a nova sintaxe funcionar perfeitamente. -Thanks to [Gajus Kuizinas](https://github.com/gajus/) and other contributors who prototyped the `Fragment` component in open source. +Obrigado ao [Gajus Kuizinas](https://github.com/gajus/) e aos outros contribuidores que prototiparam o componente `Fragment` em código aberto. From e5c6b07f4dbca99099e44fa51c407de0ae141a44 Mon Sep 17 00:00:00 2001 From: "Caique M. Oliveira" Date: Mon, 1 Apr 2019 22:34:00 -0300 Subject: [PATCH 15/20] translate 'Editor Support' block --- content/blog/2017-11-28-react-v16.2.0-fragment-support.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/blog/2017-11-28-react-v16.2.0-fragment-support.md b/content/blog/2017-11-28-react-v16.2.0-fragment-support.md index 4dc4ee40d..ba76bd258 100644 --- a/content/blog/2017-11-28-react-v16.2.0-fragment-support.md +++ b/content/blog/2017-11-28-react-v16.2.0-fragment-support.md @@ -257,13 +257,13 @@ Assegure que você tenha a seguinte linha dentro de seu `.eslintrc`: Observe que o `babel-eslint` não é oficialmente suportado pelo ESLint. Nós estaremos procurando adicionar o suporte aos fragmentos ao ESLint 4.x ao decorrer das próximas semanas (veja a [discussão #9662](https://github.com/eslint/eslint/issues/9662)) -### Editor Support {#editor-support} +### Suporte do Editor {#editor-support} -It may take a while for fragment syntax to be supported in your text editor. Please be patient as the community works to adopt the latest changes. In the meantime, you may see errors or inconsistent highlighting if your editor does not yet support fragment syntax. Generally, these errors can be safely ignored. +Talvez demore um pouco para a sintaxe do fragmento ser suportada pelo seu editor de texto. Por favor, seja paciente enquanto a comunidade trabalha para adotar as últimas mudanças. Ao decorrer deste meio tempo, você talvez veja erros ou inconsistências de destacamento se o seu editor ainda não suporta a sintaxe de fragmento. Geralmente, estes erros podem ser desconsiderados com segurança. -#### TypeScript Editor Support {#typescript-editor-support} +#### Suporte ao Editor de TypeScript {#typescript-editor-support} -If you're a TypeScript user -- great news! Editor support for JSX fragments is already available in [Visual Studio 2015](https://www.microsoft.com/en-us/download/details.aspx?id=48593), [Visual Studio 2017](https://www.microsoft.com/en-us/download/details.aspx?id=55258), [Visual Studio Code](https://code.visualstudio.com/updates/v1_19#_jsx-fragment-syntax) and [Sublime Text via Package Control](https://packagecontrol.io/packages/TypeScript). +Se você é um usuário de TypeScript -- boas notícias! O suporte do editor à sintaxe de fragmentos JSX já encontra-se disponível em [Visual Studio 2015](https://www.microsoft.com/en-us/download/details.aspx?id=48593), [Visual Studio 2017](https://www.microsoft.com/en-us/download/details.aspx?id=55258), [Visual Studio Code](https://code.visualstudio.com/updates/v1_19#_jsx-fragment-syntax) e [Sublime Text via Gerenciador de Pacote](https://packagecontrol.io/packages/TypeScript). ### Outras Ferramentas {#other-tools} From 28cd0bd907c318a5810085c247adca74ece02de9 Mon Sep 17 00:00:00 2001 From: "Caique M. Oliveira" Date: Mon, 1 Apr 2019 23:02:27 -0300 Subject: [PATCH 16/20] translate 'Changelog' block --- ...17-11-28-react-v16.2.0-fragment-support.md | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/content/blog/2017-11-28-react-v16.2.0-fragment-support.md b/content/blog/2017-11-28-react-v16.2.0-fragment-support.md index ba76bd258..862dbca0e 100644 --- a/content/blog/2017-11-28-react-v16.2.0-fragment-support.md +++ b/content/blog/2017-11-28-react-v16.2.0-fragment-support.md @@ -294,29 +294,29 @@ Nós também fornecemos compilações UMD do React via CDN: Consulte a documentação para [instruções de instalações detalhadas](/docs/installation.html). -## Changelog {#changelog} +## Histórico de Mudanças {#changelog} ### React {#react} -* Add `Fragment` as named export to React. ([@clemmy](https://github.com/clemmy) in [#10783](https://github.com/facebook/react/pull/10783)) -* Support experimental Call/Return types in `React.Children` utilities. ([@MatteoVH](https://github.com/MatteoVH) in [#11422](https://github.com/facebook/react/pull/11422)) +* Adiciona o `Fragment` como uma exportação nomeada ao React. ([@clemmy](https://github.com/clemmy) em [#10783](https://github.com/facebook/react/pull/10783)) +* Suporte experimental aos tipos de Chamada/Retorno nos utilitários `React.Children`. ([@MatteoVH](https://github.com/MatteoVH) em [#11422](https://github.com/facebook/react/pull/11422)) ### React DOM {#react-dom} -* Fix radio buttons not getting checked when using multiple lists of radios. ([@landvibe](https://github.com/landvibe) in [#11227](https://github.com/facebook/react/pull/11227)) -* Fix radio buttons not receiving the `onChange` event in some cases. ([@jquense](https://github.com/jquense) in [#11028](https://github.com/facebook/react/pull/11028)) +* Correção da seleção dos botões de rádio, quando utilizado múltiplas listas de rádios. ([@landvibe](https://github.com/landvibe) em [#11227](https://github.com/facebook/react/pull/11227)) +* Correção dos botões de rádio, referente ao não recebimento do evento `onChange` em alguns casos. ([@jquense](https://github.com/jquense) em [#11028](https://github.com/facebook/react/pull/11028)) -### React Test Renderer {#react-test-renderer} +### Renderizador de Test React {#react-test-renderer} -* Fix `setState()` callback firing too early when called from `componentWillMount`. ([@accordeiro](https://github.com/accordeiro) in [#11507](https://github.com/facebook/react/pull/11507)) +* Correção da chamada ao callback `setState()`, quanto ao acionamento antecipado através do `componentWillMount`. ([@accordeiro](https://github.com/accordeiro) em [#11507](https://github.com/facebook/react/pull/11507)) ### React Reconciler {#react-reconciler} -* Expose `react-reconciler/reflection` with utilities useful to custom renderers. ([@rivenhk](https://github.com/rivenhk) in [#11683](https://github.com/facebook/react/pull/11683)) +* Expõe o `react-reconciler/reflection` junto aos utilitários para os renderizadores personalizados. ([@rivenhk](https://github.com/rivenhk) em [#11683](https://github.com/facebook/react/pull/11683)) -### Internal Changes {#internal-changes} +### Mudanças Internas {#internal-changes} -* Many tests were rewritten against the public API. Big thanks to [everyone who contributed](https://github.com/facebook/react/issues/11299)! +* Muitos testes foram reescritos contra a API pública. Grandes agradecimentos a [todos que contribuiram](https://github.com/facebook/react/issues/11299)! ## Agradecimentos {#acknowledgments} From f2b958bcf1142122a5888e84a49abd5226d27f56 Mon Sep 17 00:00:00 2001 From: "Caique M. Oliveira" Date: Wed, 3 Apr 2019 19:31:07 -0300 Subject: [PATCH 17/20] translate 'Babel' block --- ...17-11-28-react-v16.2.0-fragment-support.md | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/content/blog/2017-11-28-react-v16.2.0-fragment-support.md b/content/blog/2017-11-28-react-v16.2.0-fragment-support.md index 862dbca0e..2eb4e9c5f 100644 --- a/content/blog/2017-11-28-react-v16.2.0-fragment-support.md +++ b/content/blog/2017-11-28-react-v16.2.0-fragment-support.md @@ -167,35 +167,35 @@ O suporte experimental à sintaxe de fragment será adicionado ao Create React A ### Babel {#babel} -Support for JSX fragments is available in [Babel v7.0.0-beta.31](https://github.com/babel/babel/releases/tag/v7.0.0-beta.31) and above! If you are already on Babel 7, simply update to the latest Babel and plugin transform: +O suporte ao fragmento JSX encontra-se disponível no [Babel v7.0.0-beta.31](https://github.com/babel/babel/releases/tag/v7.0.0-beta.31) e versões superiores! Se você já utiliza o Babel 7, apenas atualize para a última versão do Babel e do plugin transform: ```bash -# for yarn users +# para usuários que utilizam yarn yarn upgrade @babel/core @babel/plugin-transform-react-jsx -# for npm users +# para usuários que utilizam npm npm update @babel/core @babel/plugin-transform-react-jsx ``` -Or if you are using the [react preset](https://www.npmjs.com/package/@babel/preset-react): +Ou se você está usando o [react preset](https://www.npmjs.com/package/@babel/preset-react): ```bash -# for yarn users +# para usuários que utilizam yarn yarn upgrade @babel/core @babel/preset-react -# for npm users +# para usuários que utilizam npm npm update @babel/core @babel/preset-react ``` -Note that Babel 7 is technically still in beta, but a [stable release is coming soon](https://babeljs.io/blog/2017/09/12/planning-for-7.0). +Observe que o Babel 7 ainda se encontra na versão beta, a [versão estável chegará em breve](https://babeljs.io/blog/2017/09/12/planning-for-7.0). -Unfortunately, support for Babel 6.x is not available, and there are currently no plans to backport. +Infelizmente o suporte ao Babel 6.x não está disponível, e não há atualmente planos para faze-lo retrocompatível. -#### Babel with Webpack (babel-loader) {#babel-with-webpack-babel-loader} +#### Babel com Webpack (babel-loader) {#babel-with-webpack-babel-loader} -If you are using Babel with [Webpack](https://webpack.js.org/), no additional steps are needed because [babel-loader](https://github.com/babel/babel-loader) will use your peer-installed version of Babel. +Se você está utilizando o Babel com [Webpack](https://webpack.js.org/), não é necessário nenhuma etapa adicional, porque o [babel-loader](https://github.com/babel/babel-loader) utilizará sua versão internamente já instalada do Babel. -#### Babel with Other Frameworks {#babel-with-other-frameworks} +#### Babel com Outros Frameworks {#babel-with-other-frameworks} -If you use JSX with a non-React framework like Inferno or Preact, there is a [pragma option available in babel-plugin-transform-react-jsx](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx#pragmafrag) that configures the Babel compiler to de-sugar the `<>` syntax to a custom identifier. +Se você utiliza JSX com um framework não baseado em React, como Inferno ou Preact, há uma [opção de diretiva no babel-plugin-transform-react-jsx](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx#pragmafrag), que configura o compilador do Babel para alterar a sintaxe `<>` para um identificador personalizado. ### TypeScript {#typescript} From faa3e99a06fadc80fda069bc47e7af40ee4b817d Mon Sep 17 00:00:00 2001 From: "Caique M. Oliveira" Date: Wed, 3 Apr 2019 20:00:34 -0300 Subject: [PATCH 18/20] translate 'Keyed Fragments' block --- .../blog/2017-11-28-react-v16.2.0-fragment-support.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/content/blog/2017-11-28-react-v16.2.0-fragment-support.md b/content/blog/2017-11-28-react-v16.2.0-fragment-support.md index 2eb4e9c5f..a5fd0a86f 100644 --- a/content/blog/2017-11-28-react-v16.2.0-fragment-support.md +++ b/content/blog/2017-11-28-react-v16.2.0-fragment-support.md @@ -129,18 +129,18 @@ No React, esta transformação do elemento ``, como no exemplo A sintaxe de Fragemento no JSX foi inspirada pela arte anterior, como o construtor `XMLList() <>` no [E4X](https://developer.mozilla.org/pt-BR/docs/Archive/Web/E4X/E4X_for_templating). Usando um par de tags vazias, representa-se a ideia de que não será adicionado um elemento real ao DOM. -### Keyed Fragments {#keyed-fragments} +### Fragmentos com Chave {#keyed-fragments} -Note that the `<>` syntax does not accept attributes, including keys. +Observe que a sintaxe `<>` não aceita atributos, incluindo chaves (key). -If you need a keyed fragment, you can use `` directly. A use case for this is mapping a collection to an array of fragments -- for example, to create a description list: +Se você precisa de um fragmento com chave, você pode usar o `` diretamente. Um caso de uso seria mapear uma coleção para um array de fragmentos -- por exemplo, para criar uma lista de descrição: ```jsx function Glossary(props) { return (
{props.items.map(item => ( - // Without the `key`, React will fire a key warning + // Sem a `key`, o React irá exibir um alerta sobre a key
{item.term}
{item.description}
@@ -151,7 +151,7 @@ function Glossary(props) { } ``` -`key` is the only attribute that can be passed to `Fragment`. In the future, we may add support for additional attributes, such as event handlers. +`key` é o único atributo qual pode ser passado ao `Fragment`. No futuro, nós provavelmente adicionaremos suporte aos de mais atributos, tais como os manipuladores de eventos. ### Demonstração Ao Vivo {#live-demo} From dffad2660997a442a9785e623388bd6f6cc138e3 Mon Sep 17 00:00:00 2001 From: "Caique M. Oliveira" Date: Wed, 3 Apr 2019 20:25:44 -0300 Subject: [PATCH 19/20] fix some typos --- content/blog/2017-11-28-react-v16.2.0-fragment-support.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/blog/2017-11-28-react-v16.2.0-fragment-support.md b/content/blog/2017-11-28-react-v16.2.0-fragment-support.md index a5fd0a86f..8daccfe28 100644 --- a/content/blog/2017-11-28-react-v16.2.0-fragment-support.md +++ b/content/blog/2017-11-28-react-v16.2.0-fragment-support.md @@ -159,7 +159,7 @@ Você pode experimentar a sintaxe fragment JSX com este [CodePen](https://codepe ## Suporte à Sintaxe Fragment {#support-for-fragment-syntax} -O suporte à sintaxe de fragmento no JSX irá variar dependendo das ferramentas quais você utiliza para contruir o seu app. Por favor, seja paciente enquanto a comunidade JSX trabalha para adotar a nova sintaxe. Nós temos trabalhado próximo dos responsáveis dos projetos mais populares: +O suporte à sintaxe de fragmento no JSX irá variar dependendo das ferramentas quais você utiliza para construir o seu app. Por favor, seja paciente enquanto a comunidade JSX trabalha para adotar a nova sintaxe. Nós temos trabalhado próximo dos responsáveis dos projetos mais populares: ### Create React App {#create-react-app} @@ -306,7 +306,7 @@ Consulte a documentação para [instruções de instalações detalhadas](/docs/ * Correção da seleção dos botões de rádio, quando utilizado múltiplas listas de rádios. ([@landvibe](https://github.com/landvibe) em [#11227](https://github.com/facebook/react/pull/11227)) * Correção dos botões de rádio, referente ao não recebimento do evento `onChange` em alguns casos. ([@jquense](https://github.com/jquense) em [#11028](https://github.com/facebook/react/pull/11028)) -### Renderizador de Test React {#react-test-renderer} +### Renderizador de Teste React {#react-test-renderer} * Correção da chamada ao callback `setState()`, quanto ao acionamento antecipado através do `componentWillMount`. ([@accordeiro](https://github.com/accordeiro) em [#11507](https://github.com/facebook/react/pull/11507)) From 02bc186bae2d6642c3664c4d5c37e8196195a86e Mon Sep 17 00:00:00 2001 From: Jhon Mike Date: Sun, 7 Apr 2019 23:05:59 -0300 Subject: [PATCH 20/20] Update content/blog/2017-11-28-react-v16.2.0-fragment-support.md Co-Authored-By: CaiqueMOliveira --- content/blog/2017-11-28-react-v16.2.0-fragment-support.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/blog/2017-11-28-react-v16.2.0-fragment-support.md b/content/blog/2017-11-28-react-v16.2.0-fragment-support.md index 8daccfe28..ca8445fcc 100644 --- a/content/blog/2017-11-28-react-v16.2.0-fragment-support.md +++ b/content/blog/2017-11-28-react-v16.2.0-fragment-support.md @@ -127,7 +127,7 @@ render() { No React, esta transformação do elemento ``, como no exemplo da seção anterior. (Frameworks não React que usam JSX talvez compile de forma diferente.) -A sintaxe de Fragemento no JSX foi inspirada pela arte anterior, como o construtor `XMLList() <>` no [E4X](https://developer.mozilla.org/pt-BR/docs/Archive/Web/E4X/E4X_for_templating). Usando um par de tags vazias, representa-se a ideia de que não será adicionado um elemento real ao DOM. +A sintaxe do Fragmento no JSX foi inspirada pela arte anterior, como o construtor `XMLList() <>` no [E4X](https://developer.mozilla.org/pt-BR/docs/Archive/Web/E4X/E4X_for_templating). Usando um par de tags vazias, representa-se a ideia de que não será adicionado um elemento real ao DOM. ### Fragmentos com Chave {#keyed-fragments}