diff --git a/content/blog/2019-08-15-new-react-devtools.md b/content/blog/2019-08-15-new-react-devtools.md index 8e52dfae3..4d47ad901 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: "Introduciendo las nuevas 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! +Nos complace anunciarles una nueva liberación de las Herramientas de Desarrollo de React (*React DevTools*), disponible hoy en Chrome, Firefox y (Chromium) Edge! -## What's changed? +## ¿Qué Cambió? -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. +¡Mucho ha cambiado en la versión 4! +A un alto nivel, esta versión debería ofrecer ganancias significativas de rendimiento y una experiencia de navegación mejorada. +También ofrece soporte completo para los Hooks de React, incluyendo la inspección de objetos anidados. -![DevTools version 4 screenshot](../images/blog/devtools-v4-screenshot.png) +![Captura de Pantalla de DevTools versión 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 el tutorial interactivo](https://react-devtools-tutorial.now.sh/) para probar la nueva versión o [vea la bitácora de cambios](https://github.com/facebook/react/blob/master/packages/react-devtools/CHANGELOG.md#400-august-15-2019) para videos de demostración y más detalles. -## Which versions of React are supported? +## ¿Cuáles versiones de React son soportadas? **`react-dom`** -* `0`-`14.x`: Not supported -* `15.x`: Supported (except for the new component filters feature) -* `16.x`: Supported +* `0`-`14.x`: No soportada +* `15.x`: Soportada (excepto por la nueva funcionalidad de filtrar componentes) +* `16.x`: Soportada **`react-native`** -* `0`-`0.61`: Not supported -* `0.62`: Will be supported (when 0.62 is released) +* `0`-`0.61`: No soportada +* `0.62`: Será soportada (cuando 0.62 sea liberada) -## How do I get the new DevTools? +## ¿Cómo obtengo las nuevas 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. +React DevTools está disponible como una extensión para [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) y [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/). +Si ya instalaste la extensión, debería actualizarse de forma automática dentro de un par de 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): +Si usas el shell independiente (ej. en React Native o Safari), puedes installar la nueva versión [desde NPM](https://www.npmjs.com/package/react-devtools): ```shell npm install -g react-devtools@^4 ``` -## Where did all of the DOM elements go? +## ¿A dónde se fueron todos los elementos del 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: +Las nuevas DevTools proveen una forma de filtrar los componentes del árbol para hacer más fácil navegar en jerarquías profundamente anidadas. +Los nodos anfitriones (ej. HTML `
`, React Native ``) están *ocultos por defecto*, pero este filtro puede ser deshabilitado: -![DevTools component filters](../images/blog/devtools-component-filters.gif) +![Filtros de componentes de DevTools](../images/blog/devtools-component-filters.gif) -## How do I get the old version back? +## ¿Cómo obtengo de nuevo la versión anterior? -If you are working with React Native version 60 (or older) you can install the previous release of DevTools from NPM: +Si estás trabajando con React Native version 60 (o anterior) puedes instalar la versión anterior de DevTools desde 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 versiones anteriores de React DOM (v0.14 o previas) necesitarás compilar la extensión desde el código fuente: ```shell -# Checkout the extension source +# Haz Checkout del código fuente de la extensión git clone https://github.com/facebook/react-devtools cd react-devtools -# Checkout the previous release branch +# Haz Checkout de la rama de la versión anterior git checkout v3 -# Install dependencies and build the unpacked extension +# Instala las dependencias y compila la extensión yarn install yarn build:extension -# Follow the on-screen instructions to complete installation +# Sigue las instrucciones en pantalla para completar la instalación ``` -## Thank you! +## ¡Gracias! -We'd like to thank everyone who tested the early release of DevTools version 4. -Your feedback helped improve this initial release significantly. +Nos gustaría agradecer a todos que hicieron pruebas de la liberación temprana de DevTools versión 4. +Su feedback nos ayudó a mejorar esta liberación inicial de manera significativa. -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). +¡Aún tenemos muchas funcionalidades emocionanetes planificadas y el feedback es siempre bienvenido! +Sientanse libres de abrir un [reporte en GitHub](https://github.com/facebook/react/issues/new?labels=Component:%20Developer%20Tools) o etiquetar [@reactjs en Twitter](https://twitter.com/reactjs).