From 9160eee81ebe0ea48f3a4fc238a95b073f51a5f2 Mon Sep 17 00:00:00 2001 From: Bruno Vercelino da Hora Date: Wed, 2 Oct 2019 09:22:08 -0300 Subject: [PATCH 1/3] Update 2019-08-15-new-react-devtools.md --- content/blog/2019-08-15-new-react-devtools.md | 67 ++++++++++--------- 1 file changed, 34 insertions(+), 33 deletions(-) diff --git a/content/blog/2019-08-15-new-react-devtools.md b/content/blog/2019-08-15-new-react-devtools.md index 8e52dfae3..20d76540c 100644 --- a/content/blog/2019-08-15-new-react-devtools.md +++ b/content/blog/2019-08-15-new-react-devtools.md @@ -1,79 +1,80 @@ --- -title: "Introducing the New React DevTools" +title: "Apresentando o novo React DevTools" author: [bvaughn] --- -We are excited to announce a new release of the React Developer Tools, available today in Chrome, Firefox, and (Chromium) Edge! +Nós estamos animados em anunciar uma nova versão do React Developer Tools, disponível hoje para Chrome, Firefox, e (Chromium) Edge! -## What's changed? +## O que mudou? -A lot has changed in version 4! -At a high level, this new version should offer significant performance gains and an improved navigation experience. -It also offers full support for React Hooks, including inspecting nested objects. +Muito mudou na versão 4! +Resumidamente, esta nova versão deve oferecer ganhos significantes de performance e uma experiência de navegação melhorada. +Ela também oferece suporte completo para React Hooks, incluindo a possibilidade de inspecionar objetos aninhados. -![DevTools version 4 screenshot](../images/blog/devtools-v4-screenshot.png) +![Screenshot da DevTools versão 4](../images/blog/devtools-v4-screenshot.png) -[Visit the interactive tutorial](https://react-devtools-tutorial.now.sh/) to try out the new version or [see the changelog](https://github.com/facebook/react/blob/master/packages/react-devtools/CHANGELOG.md#400-august-15-2019) for demo videos and more details. +[Visite o tutorial interativo](https://react-devtools-tutorial.now.sh/) para testar a nova versão ou [veja o changelog](https://github.com/facebook/react/blob/master/packages/react-devtools/CHANGELOG.md#400-august-15-2019) para videos de demonstração e mais detalhes. -## Which versions of React are supported? +## Quais versões do React são suportadas? **`react-dom`** -* `0`-`14.x`: Not supported -* `15.x`: Supported (except for the new component filters feature) -* `16.x`: Supported +* `0`-`14.x`: Não suportada +* `15.x`: Suportada (exceto para a nova funcionalidade de filtro de componentes) +* `16.x`: Suportada **`react-native`** -* `0`-`0.61`: Not supported -* `0.62`: Will be supported (when 0.62 is released) +* `0`-`0.61`: Não suportada +* `0.62`: Será suportada (quando a versão 0.62 for lançada) -## How do I get the new DevTools? +## Como eu consigo o novo DevTools? -React DevTools is available as an extension for [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) and [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/). -If you have already installed the extension, it should update automatically within the next couple of hours. +O React DevTools está disponível como uma extensão para [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) e [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/). +Se você já instalou a extensão, ela deve atualizar automaticamente nas próximas horas. -If you use the standalone shell (e.g. in React Native or Safari), you can install the new version [from NPM](https://www.npmjs.com/package/react-devtools): +Se você usa a versão independente (por exemplo, no React Native ou Safari), você pode instalar a nova versão [a partir do NPM](https://www.npmjs.com/package/react-devtools): ```shell npm install -g react-devtools@^4 ``` ## Where did all of the DOM elements go? +## Para onde foram todos os elementos do DOM? -The new DevTools provides a way to filter components from the tree to make it easier to navigate deeply nested hierarchies. -Host nodes (e.g. HTML `
`, React Native ``) are *hidden by default*, but this filter can be disabled: +O novo DevTools provê uma maneira de filtrar os componentes da árvore para facilitar a navegação de heirarquies profundamente aninhadas. +Host nodes (por exemplo, HTML `
`, React Native ``) são *escondidos por default*, mas este filtro pode ser desabilitado: -![DevTools component filters](../images/blog/devtools-component-filters.gif) +![Filtros de component do DevTools](../images/blog/devtools-component-filters.gif) -## How do I get the old version back? +## Como eu volto para a versão antiga? -If you are working with React Native version 60 (or older) you can install the previous release of DevTools from NPM: +Se você está trabalhando com React Native na versão 60 (or anterior), você pode instalar a versão anterior do DevTools a partir do NPM: ```shell npm install --dev react-devtools@^3 ``` -For older versions of React DOM (v0.14 or earlier) you will need to build the extension from source: +Para versões anteriores do React DOM (v0.14 ou anterior) você precisará fazer o build da extensão a partir do código fonte: ```shell -# Checkout the extension source +# Faça checkout do código da extensão git clone https://github.com/facebook/react-devtools cd react-devtools -# Checkout the previous release branch +# Facá checkout do branch da versão anterior git checkout v3 -# Install dependencies and build the unpacked extension +# Instale as dependências e faça o build da extensão descompactada yarn install yarn build:extension -# Follow the on-screen instructions to complete installation +# Siga as instruções da tela para finalizar a instalação ``` -## Thank you! +## Muito obrigado! -We'd like to thank everyone who tested the early release of DevTools version 4. -Your feedback helped improve this initial release significantly. +Nós gostaríamos de agradecer quem testou a versão antecipada do DevTools versão 4. +Seus feedbacks ajudaram a melhorar significativamente a versão inicial. -We still have many exciting features planned and feedback is always welcome! -Please feel free to open a [GitHub issue](https://github.com/facebook/react/issues/new?labels=Component:%20Developer%20Tools) or tag [@reactjs on Twitter](https://twitter.com/reactjs). +Nós anda temos muitas funcionalidades excitantes planejadas e feedbacks são muito bem vindos! +Sinta-se a vontada para abrir uma [issue no GitHub](https://github.com/facebook/react/issues/new?labels=Component:%20Developer%20Tools) ou marcar [@reactjs no Twitter](https://twitter.com/reactjs). From 0e687cb3d8f2626d8cde8b0b5a1e29a1a8e090f1 Mon Sep 17 00:00:00 2001 From: Bruno Vercelino da Hora Date: Wed, 2 Oct 2019 10:48:47 -0300 Subject: [PATCH 2/3] Apply suggestions from code review MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Júlio Campos --- content/blog/2019-08-15-new-react-devtools.md | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/content/blog/2019-08-15-new-react-devtools.md b/content/blog/2019-08-15-new-react-devtools.md index 20d76540c..a2fa29259 100644 --- a/content/blog/2019-08-15-new-react-devtools.md +++ b/content/blog/2019-08-15-new-react-devtools.md @@ -2,7 +2,7 @@ title: "Apresentando o novo React DevTools" author: [bvaughn] --- -Nós estamos animados em anunciar uma nova versão do React Developer Tools, disponível hoje para Chrome, Firefox, e (Chromium) Edge! +Nós estamos animados em anunciar uma nova versão do React Developer Tools, disponível hoje para Chrome, Firefox e (Chromium) Edge! ## O que mudou? @@ -12,7 +12,7 @@ Ela também oferece suporte completo para React Hooks, incluindo a possibilidade ![Screenshot da DevTools versão 4](../images/blog/devtools-v4-screenshot.png) -[Visite o tutorial interativo](https://react-devtools-tutorial.now.sh/) para testar a nova versão ou [veja o changelog](https://github.com/facebook/react/blob/master/packages/react-devtools/CHANGELOG.md#400-august-15-2019) para videos de demonstração e mais detalhes. +[Visite o tutorial interativo](https://react-devtools-tutorial.now.sh/) para testar a nova versão ou [veja o changelog](https://github.com/facebook/react/blob/master/packages/react-devtools/CHANGELOG.md#400-august-15-2019) para vídeos de demonstração e mais detalhes. ## Quais versões do React são suportadas? @@ -37,11 +37,10 @@ Se você usa a versão independente (por exemplo, no React Native ou Safari), vo npm install -g react-devtools@^4 ``` -## Where did all of the DOM elements go? ## Para onde foram todos os elementos do DOM? -O novo DevTools provê uma maneira de filtrar os componentes da árvore para facilitar a navegação de heirarquies profundamente aninhadas. -Host nodes (por exemplo, HTML `
`, React Native ``) são *escondidos por default*, mas este filtro pode ser desabilitado: +O novo DevTools provê uma maneira de filtrar os componentes da árvore para facilitar a navegação de hierarquias profundamente aninhadas. +Host nodes (por exemplo, HTML `
`, React Native ``) são *escondidos por padrão*, mas este filtro pode ser desabilitado: ![Filtros de component do DevTools](../images/blog/devtools-component-filters.gif) @@ -61,7 +60,7 @@ git clone https://github.com/facebook/react-devtools cd react-devtools -# Facá checkout do branch da versão anterior +# Faça checkout do branch da versão anterior git checkout v3 # Instale as dependências e faça o build da extensão descompactada @@ -76,5 +75,5 @@ yarn build:extension Nós gostaríamos de agradecer quem testou a versão antecipada do DevTools versão 4. Seus feedbacks ajudaram a melhorar significativamente a versão inicial. -Nós anda temos muitas funcionalidades excitantes planejadas e feedbacks são muito bem vindos! +Nós anda temos muitas funcionalidades excitantes planejadas e feedbacks são muito bem-vindos! Sinta-se a vontada para abrir uma [issue no GitHub](https://github.com/facebook/react/issues/new?labels=Component:%20Developer%20Tools) ou marcar [@reactjs no Twitter](https://twitter.com/reactjs). From d5c195f2a78f82eb28467723342d2a14b399ae9d Mon Sep 17 00:00:00 2001 From: Bruno Vercelino da Hora Date: Wed, 2 Oct 2019 14:35:50 -0300 Subject: [PATCH 3/3] Apply suggestions from code review #2 Co-Authored-By: Jhon Mike --- content/blog/2019-08-15-new-react-devtools.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/blog/2019-08-15-new-react-devtools.md b/content/blog/2019-08-15-new-react-devtools.md index a2fa29259..d9ddf5075 100644 --- a/content/blog/2019-08-15-new-react-devtools.md +++ b/content/blog/2019-08-15-new-react-devtools.md @@ -46,7 +46,7 @@ Host nodes (por exemplo, HTML `
`, React Native ``) são *escondidos p ## Como eu volto para a versão antiga? -Se você está trabalhando com React Native na versão 60 (or anterior), você pode instalar a versão anterior do DevTools a partir do NPM: +Se você está trabalhando com React Native na versão 60 (ou anterior), você pode instalar a versão anterior do DevTools a partir do NPM: ```shell npm install --dev react-devtools@^3 @@ -75,5 +75,5 @@ yarn build:extension Nós gostaríamos de agradecer quem testou a versão antecipada do DevTools versão 4. Seus feedbacks ajudaram a melhorar significativamente a versão inicial. -Nós anda temos muitas funcionalidades excitantes planejadas e feedbacks são muito bem-vindos! +Nós ainda temos muitas funcionalidades excitantes planejadas e feedbacks são muito bem-vindos! Sinta-se a vontada para abrir uma [issue no GitHub](https://github.com/facebook/react/issues/new?labels=Component:%20Developer%20Tools) ou marcar [@reactjs no Twitter](https://twitter.com/reactjs).