diff --git a/content/blog/2019-08-15-new-react-devtools.md b/content/blog/2019-08-15-new-react-devtools.md index 8e52dfae31e..d9ddf507565 100644 --- a/content/blog/2019-08-15-new-react-devtools.md +++ b/content/blog/2019-08-15-new-react-devtools.md @@ -1,79 +1,79 @@ --- -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 vídeos 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 hierarquias profundamente aninhadas. +Host nodes (por exemplo, HTML `
`, React Native ``) são *escondidos por padrão*, 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 (ou 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 +# Faça 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 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).